body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "WorkSans-M", sans-serif;
  background-color: #F1F2F6;
  scroll-behavior: smooth;
}

/*

  $$\                   $$\   $$\               $$\       
  $$ |                  \__|  $$ |              $$ |      
$$$$$$\   $$\  $$\  $$\ $$\ $$$$$$\    $$$$$$$\ $$$$$$$\  
\_$$  _|  $$ | $$ | $$ |$$ |\_$$  _|  $$  _____|$$  __$$\ 
  $$ |    $$ | $$ | $$ |$$ |  $$ |    $$ /      $$ |  $$ |
  $$ |$$\ $$ | $$ | $$ |$$ |  $$ |$$\ $$ |      $$ |  $$ |
  \$$$$  |\$$$$$\$$$$  |$$ |  \$$$$  |\$$$$$$$\ $$ |  $$ |
   \____/  \_____\____/ \__|   \____/  \_______|\__|  \__|

*/


#boitetwitch{
  position: fixed;
  bottom: 1em;
  right: 1em;
  z-index: 6000000;
  display: block;
  background-color: #D4FF59BF;
  padding-left: 1em;
  padding-right: 1em;  
  padding-bottom: 1em;    
}

#ferme{
  text-align: right;
  font-size: 1.2em;
  margin: 0.5em;
}

#ferme img{
  width: 20px;
  margin-top: 10px;
  margin-bottom: 10px;

}

/*
                                                           $$\ 
                                                           $$ |
 $$$$$$\   $$$$$$\  $$$$$$$\   $$$$$$\   $$$$$$\  $$$$$$\  $$ |
$$  __$$\ $$  __$$\ $$  __$$\ $$  __$$\ $$  __$$\ \____$$\ $$ |
$$ /  $$ |$$$$$$$$ |$$ |  $$ |$$$$$$$$ |$$ |  \__|$$$$$$$ |$$ |
$$ |  $$ |$$   ____|$$ |  $$ |$$   ____|$$ |     $$  __$$ |$$ |
\$$$$$$$ |\$$$$$$$\ $$ |  $$ |\$$$$$$$\ $$ |     \$$$$$$$ |$$ |
 \____$$ | \_______|\__|  \__| \_______|\__|      \_______|\__|
$$\   $$ |                                                     
\$$$$$$  |                                                     
 \______/

*/

.gradient{
  background: linear-gradient(to bottom, transparent 20%, #d4ff59 );
  padding-bottom: 5em;
}

.gradientinvert{
  background: linear-gradient(to top, transparent 80%, #d4ff59 );

}

.ital{
  font-style: italic;
}

::selection{
  background: #ffb1e9;
  color: #520f19;
}


h2{
  font-family: 'Krona One', sans-serif;
  font-size: 7em;
  word-break: break-all;
  padding-top:1em;
  margin-bottom: .5em;
  margin-left: .2em;
  text-transform: uppercase;
}


h3 {
  font-weight: bold;
  font-size: 1.2em;
  font-family: 'Krona One', sans-serif;
}

p{
  font-family: 'WorkSans-R';
}


.fondvert{
  background-color: #d4ff59;
}



/*  

                              
                              
$$$$$$$\   $$$$$$\ $$\    $$\ 
$$  __$$\  \____$$\\$$\  $$  |
$$ |  $$ | $$$$$$$ |\$$\$$  / 
$$ |  $$ |$$  __$$ | \$$$  /  
$$ |  $$ |\$$$$$$$ |  \$  /   
\__|  \__| \_______|   \_/

*/



nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95vw;
  padding: 1vw 2vw; /* marges internes gauche/droite */
}


.contact-link a { 
  color: #520f19;
}

.contact-link a:hover {
  background-color: #d4ff59;

}  

.logo img {
  width: 200px;  
}


.contact-link {
  display: flex;
  gap: 30px;      /* espace entre IG / YT / IN */
}


.contact-link a { 
  /*color: #520f19;*/
  text-transform: uppercase;
  font-size: 1.2em;
  text-decoration: none;
}

.contact-link a:hover {
  text-decoration: none;
}




/*

$$\            $$\                         
\__|           $$ |                        
$$\ $$$$$$$\ $$$$$$\    $$$$$$\   $$$$$$\  
$$ |$$  __$$\\_$$  _|  $$  __$$\ $$  __$$\ 
$$ |$$ |  $$ | $$ |    $$ |  \__|$$ /  $$ |
$$ |$$ |  $$ | $$ |$$\ $$ |      $$ |  $$ |
$$ |$$ |  $$ | \$$$$  |$$ |      \$$$$$$  |
\__|\__|  \__|  \____/ \__|       \______/

*/



.intro {

  text-align: left;
   
}

.intro p {

  font-family: "Krona One", sans-serif, ;
  word-break: normal;
  width: 90%;
  margin: 1em auto;
  font-size: 3.2em;
  line-height: 1.2em;
  font-weight: bold;
}


/*

                                $$\     $$\                               
                                $$ |    \__|                              
 $$$$$$$\  $$$$$$\   $$$$$$$\ $$$$$$\   $$\  $$$$$$\  $$$$$$$\   $$$$$$$\ 
$$  _____|$$  __$$\ $$  _____|\_$$  _|  $$ |$$  __$$\ $$  __$$\ $$  _____|
\$$$$$$\  $$$$$$$$ |$$ /        $$ |    $$ |$$ /  $$ |$$ |  $$ |\$$$$$$\  
 \____$$\ $$   ____|$$ |        $$ |$$\ $$ |$$ |  $$ |$$ |  $$ | \____$$\ 
$$$$$$$  |\$$$$$$$\ \$$$$$$$\   \$$$$  |$$ |\$$$$$$  |$$ |  $$ |$$$$$$$  |
\_______/  \_______| \_______|   \____/ \__| \______/ \__|  \__|\_______/
*/



.conteneur-intro{
  margin: 4vh auto 0 ;
  width: 88vw;
}



.intro-section{
  font-family: "Krona One", sans-serif, ;
  font-size: 2em;
  line-height: 1.2em;
  width: 80vw;
  font-weight: bold;
}




/*
                                             $$\               
                                             $$ |              
 $$$$$$\   $$$$$$\   $$$$$$\  $$\  $$$$$$\ $$$$$$\    $$$$$$$\ 
$$  __$$\ $$  __$$\ $$  __$$\ \__|$$  __$$\\_$$  _|  $$  _____|
$$ /  $$ |$$ |  \__|$$ /  $$ |$$\ $$$$$$$$ | $$ |    \$$$$$$\  
$$ |  $$ |$$ |      $$ |  $$ |$$ |$$   ____| $$ |$$\  \____$$\ 
$$$$$$$  |$$ |      \$$$$$$  |$$ |\$$$$$$$\  \$$$$  |$$$$$$$  |
$$  ____/ \__|       \______/ $$ | \_______|  \____/ \_______/ 
$$ |                    $$\   $$ |                             
$$ |                    \$$$$$$  |                             
\__|                     \______/

*/


#dnmade1{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

}


#dnmade2{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

}

#dnmade3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

}

.fullscreen-container {
  width: 100%;
  height: 40vh;
  display: flex;
  position: relative;
}

.fullscreen-container aside {
  position: absolute;
  bottom: 0;
  width: calc(100% - 2em);
/*  height: 30%;*/
  background-color: #D4FF59BF;
  padding: 1em;
/*  height: 40vh;*/
  z-index: 10000;
  display: none;
}

.fullscreen-container:hover aside {
  display: block;
}


.image-column {
  background-size: cover;
    background-position: center center;  
  flex: 1;
  position: relative;
  overflow: hidden;
  z-index: 1000;  
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay h3 {
  position: absolute;
  top: 20px; 
  right: 20px; 
  margin: 0;
  padding: 5px 10px;
}

.overlay p {
  position: absolute;
  bottom: 40px;
  margin: 0;
  padding: 15px 15px;

  background-color: #d4ff59BF;
  color: black;
  font-size: 13pt;
  max-width: 85%; 
}




/*
 $$$$$$\           $$\ $$\                     
$$  __$$\          $$ |\__|                    
$$ /  \__|$$$$$$\  $$ |$$\  $$$$$$\   $$$$$$$\ 
$$$$\    $$  __$$\ $$ |$$ |$$  __$$\ $$  _____|
$$  _|   $$ /  $$ |$$ |$$ |$$ /  $$ |\$$$$$$\  
$$ |     $$ |  $$ |$$ |$$ |$$ |  $$ | \____$$\ 
$$ |     \$$$$$$  |$$ |$$ |\$$$$$$  |$$$$$$$  |
\__|      \______/ \__|\__| \______/ \_______/

*/



.folios{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 88%;
  margin: 7em auto 0em;
}

.promo
{
  margin-bottom: 2em;
}

.annee{
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 1em;
  font-family: 'Krona One', sans-serif;
}




.promo h5{
  font-family: 'WorkSans-R', sans-serif;
  font-size: 1em;
  color: black;
  line-height: 1.4em;
}



.promo a{
  text-decoration: none;
  color: inherit;
  display: block;
  width: fit-content;
  /*padding: 2px 6px;*/
  padding: 2px ;
}

.promo a:active{
  color: black;
}

.promo a:hover{
  background-color: white;
  text-decoration: none;
}

#liens a{
  color:black;
}


/*
                         $$\                         
                         $$ |                        
$$$$$$\$$$$\   $$$$$$\ $$$$$$\    $$$$$$\   $$$$$$$\ 
$$  _$$  _$$\  \____$$\\_$$  _|  $$  __$$\ $$  _____|
$$ / $$ / $$ | $$$$$$$ | $$ |    $$ /  $$ |\$$$$$$\  
$$ | $$ | $$ |$$  __$$ | $$ |$$\ $$ |  $$ | \____$$\ 
$$ | $$ | $$ |\$$$$$$$ | \$$$$  |\$$$$$$  |$$$$$$$  |
\__| \__| \__| \_______|  \____/  \______/ \_______/



 $$$\     
$$ $$\    
\$$$\ |   
$$\$$\$$\ 
$$ \$$ __|
$$ |\$$\  
 $$$$ $$\ 
 \____\__|
                 

                    $$\ $$\           $$\       
                    $$ |$$ |          $$ |      
 $$$$$$$\  $$$$$$\  $$ |$$ | $$$$$$\  $$$$$$$\  
$$  _____|$$  __$$\ $$ |$$ | \____$$\ $$  __$$\ 
$$ /      $$ /  $$ |$$ |$$ | $$$$$$$ |$$ |  $$ |
$$ |      $$ |  $$ |$$ |$$ |$$  __$$ |$$ |  $$ |
\$$$$$$$\ \$$$$$$  |$$ |$$ |\$$$$$$$ |$$$$$$$  |
 \_______| \______/ \__|\__| \_______|\_______/



*/



.image-grid {
  margin-top: 5em;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes de taille égale */
  width: 100%;

}

.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper img {
  width: 100%;
  object-position: center;
  object-fit: cover; /* garde les images centrées et sans déformation */
  display: block;
}

/*hover effets*/

.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* couvre toute l'image */
  display: flex;           /* pour centrer le texte */
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #520f19;
  background: rgba(212, 255, 89, 0.7);
  text-transform: uppercase;
  font-family: "Krona One";
  font-size: 3em;
  font-weight: bold;  
}

.overlay-text-partenariat{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* couvre toute l'image */
  text-align: left;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #520f19;
  background: rgba(212, 255, 89, 0.7);

}

.overlay-text-partenariat p{
  line-height: 1.2em;
  font-family: "WorkSans-M";
  font-size: 1em;
  font-weight: bold;  
  padding: 3em;
}

.overlay-text-partenariat h6{
  line-height: 1.2em;
  font-family: "WorkSans-M";
  font-size: 2em;
  font-weight: bold;  
  padding: 1em;

}



.image-wrapper:hover .overlay-text {
  opacity: 1;
}


.image-wrapper:hover .overlay-text-partenariat {
  opacity: 1;
}


/*
                              $$\                     
                              \__|                    
 $$$$$$\   $$$$$$\  $$\   $$\ $$\  $$$$$$\   $$$$$$\  
$$  __$$\ $$  __$$\ $$ |  $$ |$$ |$$  __$$\ $$  __$$\ 
$$$$$$$$ |$$ /  $$ |$$ |  $$ |$$ |$$ /  $$ |$$$$$$$$ |
$$   ____|$$ |  $$ |$$ |  $$ |$$ |$$ |  $$ |$$   ____|
\$$$$$$$\ \$$$$$$$ |\$$$$$$  |$$ |$$$$$$$  |\$$$$$$$\ 
 \_______| \____$$ | \______/ \__|$$  ____/  \_______|
                $$ |              $$ |                
                $$ |              $$ |                
                \__|              \__|


*/



.presentation-all{
  font-size: 1em;
  margin-bottom: 2em;
  margin-left: 1em;

}


.liste{
  display: flex;
  flex-direction: row;
  column-gap: 8em;
  margin-top: 8em;
  margin-left: 3em;
}

.liste h3{
  margin-bottom: 1em;
}

.liste li{
  line-height: 1.4em;
}


/*

$$$$$$$$\  $$$$$$\   $$$$$$\  
$$  _____|$$  __$$\ $$  __$$\ 
$$ |      $$ /  $$ |$$ /  $$ |
$$$$$\    $$$$$$$$ |$$ |  $$ |
$$  __|   $$  __$$ |$$ |  $$ |
$$ |      $$ |  $$ |$$ $$\$$ |
$$ |      $$ |  $$ |\$$$$$$ / 
\__|      \__|  \__| \___$$$\ 
                         \___|

*/



#accordion{
  width: 100vw;
}

.question{
  display: flex;
  height: 70px;
  align-items: center;
  cursor: pointer;
}

.question img{
  padding: 15px;
  max-width: 20px;
  object-fit: contain;
  display: block;
  margin-left: 0.5em;
}

.un, .trois, .cinq{
  background: linear-gradient(45deg, #ffb1e9, #F1F2F6);
}

.un, .trois, .cinq{
  background: linear-gradient(45deg, #ffb1e9, #F1F2F6);
}

.deux, .quatre{
  background: linear-gradient(45deg, #F1F2F6, #ffb1e9);
}


.paragraphe_faq{
  padding: 0px 60px 30px 70px;
  width: 80%;
  font-size: 1.2em;
  line-height: 1.3em;
}

.question img + p{
  margin-left: 10px;
  font-family: 'WorkSans-M', sans-serif;
  font-size: 25px;
}


.itw{
  margin-top: 4em;
}



/*
                               $$\                           $$\     
                               $$ |                          $$ |    
 $$$$$$$\  $$$$$$\  $$$$$$$\ $$$$$$\    $$$$$$\   $$$$$$$\ $$$$$$\   
$$  _____|$$  __$$\ $$  __$$\\_$$  _|   \____$$\ $$  _____|\_$$  _|  
$$ /      $$ /  $$ |$$ |  $$ | $$ |     $$$$$$$ |$$ /        $$ |    
$$ |      $$ |  $$ |$$ |  $$ | $$ |$$\ $$  __$$ |$$ |        $$ |$$\ 
\$$$$$$$\ \$$$$$$  |$$ |  $$ | \$$$$  |\$$$$$$$ |\$$$$$$$\   \$$$$  |
 \_______| \______/ \__|  \__|  \____/  \_______| \_______|   \____/
*/


.conteneur-infos-pratiques {
  width: 90%;
  padding: 1.5vw 2.2vw;
  margin: auto;
/*  border: 1px solid black;*/
}



#boite-contact {
  width: 90%;
  margin: 1em auto 3em;
  display: flex;
  justify-content: space-between;
}



.titre{
  font-family: 'Krona One', sans-serif;
  font-size: 1.2em;
  margin-bottom: 1em;
  text-transform: uppercase;
}


#boite-contact ul{
  margin-bottom: 2em ;
/*  height: 15vh;*/
}


#carte-osm {
  outline: 2px solid #d4ff59;
  width: 100%;
  height: 25vw;
  filter: brightness(75%) sepia(110%)  hue-rotate(40deg) saturate(125%) contrast(100%);
}