/* Home CSS */

/* body */

/*** communs ***/
.actus h2,.focus h2,.agenda h2 a span
{
width:100%;
position:relative;
margin-top:25px;
margin-bottom:5px;
text-decoration: none;
letter-spacing: 3px;
font-weight: bolder;
}



.agenda h2 a span /** agenda est un lien **/
{ 
   
    text-decoration: none;
    color:#808080;
}



/* main */

#main 
{
    height: 100vh !important;

}


.actus a,.focus a,.agenda a
{
    transition:0.2s all;
}

/******************carousel d'infos ******************************/

#carousel
{
width:100%;
/*height:60vh;*/
position:relative;
margin: 0 auto;
}

.carousel-home
{
position:relative;
}

#carousel > div.carousel-inner > div.carousel-item,#carousel > div.carousel-inner > div.carousel-item.active
{
    position:relative;
}

#carousel > div.carousel-inner > div.carousel-item > img,
#carousel > div.carousel-inner > div.carousel-item.active > img
{
    width:100%;
    aspect-ratio: 16/9; 
    height: 50vh;
    object-fit: cover;
    
}

.carousel-home .carousel-control-prev
{
left:150px;
}

.carousel-home .carousel-control-next
{  
    right:150px; 
}

.carousel-home .carousel-control-prev-icon
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-home .carousel-control-next-icon
{  
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel-caption
{
    left:0;
    bottom:0;
    width:100%;
    background:rgba(0,0,0,0.5);
}

/***************** carousel d'actualités *******************/

.actus
{

    transition: 0.2s all;
}


.actus .card
{
    box-shadow: 1px 1px 1px 1px grey;
    min-height:55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
    width:20em;
}

.empty-image
{
    padding-top:50px;
    padding:10px;
}

.actus .card .card-body
{
    min-height: 50%;
    overflow:hidden;
}


.actus .card  a .card-img-top

{
    width:100%;
    
    object-fit: cover;
}

#carousel-news .carousel-control-prev-icon {
    /** changer la valeur de fill change la couleur , %23000 = noir , %23fff = blanc ***/
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23360' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

#carousel-news .carousel-control-next-icon {
    /** changer la valeur de fill change la couleur , %23000 = noir , %23fff = blanc ***/
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23360' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

#carousel-news .categorie-tag
{
    position:absolute;
    left:0;
    top:10px;
    width:50%;
    padding-left:10px;

    border-radius:0 10px 10px 0;
    box-shadow: 1px 1px 1px black;
    border-left:0;
    font-weight: 700;
    text-align: center;
}

/*****************carousel images *******************/
.carousel-images
{
    position: relative;
}

#carousel-gallery .carousel-control-prev-icon,#carousel-gallery .carousel-control-next-icon 
{
    height: 50px;
    width: 50px;
    background-size: 100%, 100%;
    border-radius: 50%;
}

#main > div.wrapper.container-fluid > div.carousel-images.row.pb-2 > div > div > div > div > div > button.carousel-control-prev
{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left:10px;
}

#main > div.wrapper.container-fluid > div.carousel-images.row.pb-2 > div > div > div > div > div > button.carousel-control-next
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right:10px;
}


#carousel-gallery .carousel-control-prev-icon 
{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
    position: absolute;
}

#carousel-gallery .carousel-control-next-icon 
{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
    position: absolute;
}

#carousel-gallery
{
    width:100%;
}

#carousel-gallery .carousel-caption
{
    color:#ffffff;
    text-shadow:2px 2px 5px black;
}


#carousel-gallery .item-image
{
display: flex;
justify-content: space-around;
transition:1s all;

}

#carousel-gallery .carousel-item .item-image img,#carousel-gallery .carousel-item .item-image.active a
{
    max-width: 33%;
}
#carousel-gallery .carousel-item .item-image img,#carousel-gallery .carousel-item .item-image.active img
{
    max-width: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
}

#carousel-gallery .carousel-item .item-image.active a:not(:first-child),
#carousel-gallery .carousel-item .item-image.active a:not(:last-child),
#carousel-gallery .carousel-item .item-image a:not(:first-child),
#carousel-gallery .carousel-item .item-image a:not(:last-child)
{
padding-right:5px;
padding-left:5px;
}

#carousel-gallery button.carousel-control-next




/*****************dalles *******************/
/****
.dalles
{
display:flex;

align-items: space-around;
justify-content: space-around;
margin:25px;
}

.dalle
{
    margin:5px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:var(--color);
    border:1px solid grey;
    border-radius:25px;
    cursor: pointer;
    transition:0.5s all;
}  

.dalle:hover
{
    box-shadow: 1px 1px 3px 2px grey;
}

.dalle-label
{
    padding-bottom:5px;
    width:100%;
    height:50%;
    display:flex;
    align-items: center;
    justify-content: center;
}

.dalle-label span
{
    display:flex;
    align-items: center;
    justify-content: center;
    width:90%;
    height:70%;
    font-size:1.3em;
    font-weight: bolder;
    text-align: center;
    color:#fff;
    margin:5px;
}

.dalle-icon 
{
 padding-top:5px;
  height:50%;
  width:100%;
  display:flex;
  align-items: center;
  justify-content: center;
}

.dalle-icon i 
{
    color:#fff;
    font-size:48px;
}
****/
/*****************focus *******************/
.o0
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:25px;
    margin-bottom:10px;
}

.focus .card
{
    box-shadow: 1px 1px 5px lightgray;
}

.focus .card-text p span, .focus .card-text p ,.focus .card-text h1 span
{
    text-align: left;
    background-color: white;
    color:black;
    font-family: initial;
}

.focus a
{
    color:#000;
    text-decoration: none;
}

.focus  .card
{
    margin:10px;
    overflow:hidden;
    border:1px solid lightgray;
    transition: 1s all;;
}

.focus .card-title
{
    text-decoration: underline;
   
}

.focus .card:hover
{
    box-shadow:0px 0px 2px black, 1px 1px 3px black;
}

.focus .card .card-image a
{
    display:flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}


/*****************agenda*************/

.agenda h2::before
{
    position:relative;
}
.agenda h2::before
{

    content: url(../../images/home/Four_Leaf_Clover.png);
    position:absolute;
    top:-100px;
    left:8%;
    transform: scale(0.5) rotate(10deg);
   
}

.agenda 
{ 
    position:relative;
   /* overflow:hidden;*/
}


.c-agenda-desc-div .subject
{
    font-weight:bolder;
    font-size:larger;
}

.c-agenda-desc-div .place
{
    color:grey;
    font-size:larger;   
}

.c-agenda-desc-div .c-agenda-description
{
    color:#222;
    display:block;
}

.agenda .c-agenda-image
{
    border:1px solid green;
    overflow:hidden;
}

.agenda .image a 
{ 
    width:100%;
    margin:0;
    padding:0;
    object-fit: cover; 
    overflow:hidden;
}


.agenda .image a img
{ 
    margin:0;
    padding:0;
    object-fit: cover; 
    border-radius:0 5px 5px 0
}

.agenda a
{
    transition:0.2s all;
    text-decoration: none;
    color:#000;
}

.agenda a:hover
{
    color:var(--bgcategorietag); 
}


/*************************** MEDIA QUERIES ******************************/ 
/**
.___.__                                    .__               
_____   ____   __| _/|__|____      ________ __   ___________|__| ____   ______
/     \_/ __ \ / __ | |  \__  \    / ____/  |  \_/ __ \_  __ \  |/ __ \ /  ___/
|  Y Y  \  ___// /_/ | |  |/ __ \_ < <_|  |  |  /\  ___/|  | \/  \  ___/ \___ \ 
|__|_|  /\___  >____ | |__(____  /  \__   |____/  \___  >__|  |__|\___  >____  >
    \/     \/     \/         \/      |__|           \/              \/     \/ 
**/


/**_
_______________________________________ _____________________  ._________________  ______  
\______   \_   _____/\_   _____/\_____  \\______   \_   _____/  |   ____/\______  \/  __  \ 
 |    |  _/|    __)_  |    __)   /   |   \|       _/|    __)_   |____  \     /    />      < 
 |    |   \|        \ |     \   /    |    \    |   \|        \  /       \   /    //   --   \
 |______  /_______  / \___  /   \_______  /____|_  /_______  / /______  /  /____/ \______  /
        \/        \/      \/            \/       \/        \/         \/                 \/ 
**/
@media (max-width: 578px) {

    html,body 
    {
        padding: 0;
        margin:0;
        box-sizing: border-box;
        
    }
    
    /********** header *******/

    #social
    {
    justify-content: start;
    margin-top:5px;
    }

    /*************** carousel d'infos ****************/ 

    #carousel
    {
      width:100%;
      height:auto;
    
    }

    #carousel > div.carousel-inner > div.carousel-item > img,
    #carousel > div.carousel-inner > div.carousel-item.active > img
    {
        width:100%;
        aspect-ratio: 16/9; 
        object-fit: cover;
        margin:0;
        padding:0;
    }

   
    .carousel-home button.carousel-control-prev
    {

    left:0px;
    top:30%;
    }

    .carousel-home button.carousel-control-next
    {
        
        right:0px; 
        top:30%;
    }

    .carousel-indicators
    {
        bottom:0;
    }
/*************** carousel d'images ****************/
    #carousel-gallery
    {
        width:100%;  
    }
        
    #carousel-gallery .carousel-item .item-image ,#carousel-gallery .carousel-item .item-image.active 
    {
    flex-direction: column;
    }

    #carousel-gallery .carousel-item .item-image img,#carousel-gallery .carousel-item .item-image.active img
    {
    max-width: 100%;
    }

/*************** carousel d'actualités ****************/ 
    .actus 
    {
        align-items: center;
        justify-content: center; 
    }

    .card-image img
    {
        width:100%;
        
        aspect-ratio: 16/9;
    }


    .actus h2,.focus h2,.agenda h2
    {
    
    width:100%;
    margin-left:5px;

    }

    .actus h2::before,.focus h2::before,.agenda h2::before
    {
       
        width:50%;
  
    }

/** carousel d'images **/
    #main > div.wrapper.container-fluid > div.carousel-images.row.pb-2 > div > div > div > div > div > button.carousel-control-prev
    {
        left:0px;
    }

    #main > div.wrapper.container-fluid > div.carousel-images.row.pb-2 > div > div > div > div > div > button.carousel-control-next
    {
        right:0px;
    }

    .item-image img{
        margin-bottom:10px;
    };



    /** image du modal **/ 
    .mfp-container
    {
        width:100%;
        left:0;
    }
    .mfp-image img
    {
        width:100%;
    }


    .focus .card .card-image-top
    { 
        object-fit: contain; 
        width:100%;
        margin:0;
        padding:0;
    }

    .focus .card .card-image-top a
     { 
        object-fit: cover; 
        width:100%;
        margin:0;
        padding:0;
        
    }

    .focus .card .card-image-top a img
     { 
        object-fit: cover; 
        width:100%;
    }




}


/*
 ._________________  ______            _________  ________  ______  
 |   ____/\______  \/  __  \  _____    \______  \/  _____/ /  __  \ 
 |____  \     /    />      <  \__  \       /    /   __  \  >      < 
 /       \   /    //   --   \  / __ \_    /    /\  |__\  \/   --   \
/______  /  /____/ \______  / (____  /   /____/  \_____  /\______  /
       \/                 \/       \/                  \/        \/ 
*/
@media screen and (min-width: 578px ) and (max-width : 768px) {

    /********** header *******/

    #social
    {
    
    margin-top:5px;
    }

    #carousel
    {
      width:100%;
      
      height:auto;
    }

    #carousel > div.carousel-inner > div.carousel-item > img,
    #carousel > div.carousel-inner > div.carousel-item.active > img
    {
        
        width:100%;
        aspect-ratio: 16/9; 
        object-fit: cover;
        margin:0;
        padding:0;
    }


    .carousel-home button.carousel-control-prev
    {

    left:0px;
    filter:invert(1)
    }

    .carousel-home button.carousel-control-next
    {
        
        right:0px; 
        filter:invert(1)
    }

    /** carousel d'images **/
    #main > div.wrapper.container-fluid > div.carousel-images.row.pb-2 > div > div > div > div > div > button.carousel-control-prev
    {
        left:0px;
    }

    #main > div.wrapper.container-fluid > div.carousel-images.row.pb-2 > div > div > div > div > div > button.carousel-control-next
    {
        right:0px;
    }

    .item-image img{
        margin-bottom:10px;
    };

    /*************** focus ***********/

    .focus .card
    {
        margin-bottom:30px;
    }

    /*************** agenda ***********/

    .agenda .card
    {
        margin-bottom:30px;
    }



}



/*_________  ________  ______             ________  ________  ____ 
\______  \/  _____/ /  __  \  _____    /   __   \/   __   \/_   |
    /    /   __  \  >      <  \__  \   \____    /\____    / |   |
   /    /\  |__\  \/   --   \  / __ \_    /    /    /    /  |   |
  /____/  \_____  /\______  / (____  /   /____/    /____/   |___|
                \/        \/       \/                          
*/
@media (min-width: 768px) and (max-width: 991px) {
 
   
    body>.container-fluid {
        padding: 0 0 0 0 ;
        margin:0;
        box-sizing: border-box; 
    }

/********** header *******/

    #social
    {
    justify-content: flex-start;
    margin:20px;
    }

    /*************** carousel d'infos ****************/
    #carousel
    {
        /*height:30vh;*/ 
        width:100%;
        height:auto;
    }

    #carousel > div.carousel-inner > div.carousel-item > img,
    #carousel > div.carousel-inner > div.carousel-item.active > img
    {
        
        width:100%;
        aspect-ratio: 16/9; 
        object-fit: cover;
        margin:0;
        padding:0;
    }

    .carousel-home button.carousel-control-prev
    {

        top:50%;
    }

    .carousel-home button.carousel-control-next
    {
        top:50%;
    }

/*************** carousel d'images ****************/
    #carousel-gallery
    {
        width:100%;
    }


        
    #carousel-gallery .carousel-item .item-image ,#carousel-gallery .carousel-item .item-image.active 
    {

    flex-direction: column;

    }

    #carousel-gallery .carousel-item .item-image img,#carousel-gallery .carousel-item .item-image.active img
    {

    max-width: 100%;
    }


/*************** carousel d'actualités ****************/

   
    .actus 
    {
        align-items: center;
        justify-content: center;
    }

    .actus .card
    {
        min-height: 20vh;
    }

    .actus .card-body
    {
        margin-bottom:100px;
    }

    .card-image img
    {
        width:100%;
    }

    .actus h2,.focus h2,.agenda h2
    {
    width:100%;
    margin-left:5px;
    }

    .actus h2::before,.focus h2::before,.agenda h2::before
    {
        width:50%;
    }

    /** image du modal **/ 
    .mfp-container
    {
        width:100%;
        left:0;
    }
    .mfp-image img
    {
        width:100%;
    }


    /** carousel d'images **/
    #main > div.wrapper.container-fluid > div.carousel-images.row.pb-2 > div > div > div > div > div > button.carousel-control-prev
    {
        left:0px;
    }

    #main > div.wrapper.container-fluid > div.carousel-images.row.pb-2 > div > div > div > div > div > button.carousel-control-next
    {
        right:0px;
    }

    .item-image img{
        margin-bottom:10px;
    };

/*************** focus ***********/

    .focus .card
    {
        margin-bottom:30px;
    }

/*************** agenda ***********/

    .agenda .card
    {
        margin-bottom:30px;
    }




}

@media (min-width: 200px) and (max-width: 300px) {


    .agenda h2::before
    {
    
        content: url(../../images/home/Four_Leaf_Clover.png);
        position:absolute;
        top:-80px;
        left:-15%;
        transform: scale(0.25) rotate(10deg);
       
    }
    
}

@media (min-width: 300px) and (max-width: 578px) {


    .agenda h2::before
    {
    
        content: url(../../images/home/Four_Leaf_Clover.png);
        position:absolute;
        top:-80px;
        left:-15%;
        transform: scale(0.25) rotate(10deg);
       
    }
    
}


@media (min-width: 578px) and (max-width: 768px) {


    .agenda h2::before
    {
    
        content: url(../../images/home/Four_Leaf_Clover.png);
        position:absolute;
       
        left:-20%;
        transform: scale(0.25) rotate(10deg);
       
    }
    
}

@media (min-width: 768px) and (max-width: 991px) {


    .agenda h2::before
    {
    
        content: url(../../images/home/Four_Leaf_Clover.png);
        position:absolute;
       top:-80px;
        left:-5%;
        transform: scale(0.25) rotate(10deg);
       
    }
    
}

@media (min-width: 991px) and (max-width: 1200px) {


    .agenda h2::before
    {
    
        content: url(../../images/home/Four_Leaf_Clover.png);
        position:absolute;
       
        left:-3%;
        transform: scale(0.5) rotate(10deg);
       
    }
    
    }

@media (min-width: 1200px) and (max-width: 1400px) {



        
    }
    



@media (min-width: 1200px) and (max-width: 1600px) {


    .agenda h2::before
    {
    
        content: url(../../images/home/Four_Leaf_Clover.png);
        position:absolute;
       
        left:-1%;
        transform: scale(0.5) rotate(10deg);
       
    }
    
}


@media (min-width: 1600px) and (max-width: 1800px) {


.agenda h2::before
{

    content: url(../../images/home/Four_Leaf_Clover.png);
    position:absolute;
   
    left:3%;
    transform: scale(0.5) rotate(10deg);
   
}

}