nav {position: fixed; top: 0%;
right: 0%; padding: 20px;
z-index: 100;
flex-shrink: 0;
/*font-family: "Tai Heritage Pro", serif;
font-weight: 400;
font-style: normal;
font-size: 20px;*/

 font-family: "Afacad Flux", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
  font-size: 30px;
  width: 100%;
  background-color: #FFFF ;
}

.nav-container {display: flex;
justify-content: flex-end;
padding: 1rem;
}




.navbar {display: inline;
width: 100%;
background-color: #FFFF;

}

ul.menu {
          list-style: none;   /* Supprime les puces d'une liste */
          padding: 0;
          margin: 0;
               
         }

          ul.menu li{ display: inline-block;
          padding-left: 20px;
          padding-right: 20px; }

          /*ul.menu li a{ 
          text-decoration: none;
          color:blueviolet;
          }*/
          ul.menu li a:hover{ 
          text-decoration: none;
          color:#00cb2b}
     
a{color:#e62a36;
text-decoration: none ;
}

a:hover{ color:#00cb2b;
text-decoration: underline;
}
nav a.active { color:#00cb2b;
text-decoration: underline;
}

.inverse{color:#00cb2b;
text-decoration: none ;
}

.inverse:hover{ color:#e62a36;
text-decoration: underline;
}


body{

font-family: "Afacad Flux", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
  font-size: 30px;
color:#393e3d;


  /*font-family: "Geist Mono", monospace;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal ;*/
}

/*opacity: 100;
background-image:  radial-gradient(#00e831 2.1px, transparent 2.1px), radial-gradient(#00e831 2.1px, #ffffff 2.1px);
background-size: 28px 28px;
background-position: 0 0,14px 14px;;*/

  
p {font-family: "Afacad Flux", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
font-size: 30px;
color:#393e3d;
}

.fond-bleu-clair {background-color: #edf6f7;}
.lettrage-plus-gr {font-size: 30px;}

/*.txt-white {color:rgb(255, 255, 255);}*/

/*#container-accueil {background-color:rgb(255, 255, 255);}*/
/*.txt-rose-f {color:rgb(0, 246, 4);
background-color:rgb(34, 33, 33);*/

h1,h2,h3,h4 { color: #00cb2b;
}

/*h1 {font-size: 55px;
font-family: "Oi", serif;
  font-weight: 400;
  font-style: normal;
  width: 100%; 
}*/

h1 {
  font-size:60px;

  font-family: "Afacad Flux", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
   
 /*font-family: "Geist Mono", monospace;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;*/
  /*background-color: #edf6f7*/
  }



h2 {
  font-size: 40px;
 font-family: "Afacad Flux", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;


  
  }
/*h2{width: 28px;}*/
/*h3{width: 26px;}*/
/* commentaire en html */

header


 h3,h4 {font-family: "Modak", system-ui;
  font-weight: 400;
  font-style: normal;} 
 
  h7 {color: #00cb2b;
    font-family: "Modak", system-ui;
  font-size: 25px;;
  font-style: italic;
}
            
  .container {
        display: flex;
        gap: 20px;
         /* espace entre les colonnes */
         /*background-color:#f3a5c3;*/
     }
   .colonne {
        flex: 1; /* les 3 colonnes ont la même largeur */
        padding: 20px;
        background: #eeeeee;
        border: 1px solid #ccc;
     }
     
     .banniere-pleine-largeur {
    width: 100%; /* S'étend sur toute la largeur disponible */
    box-sizing: border-box; /* Inclut les éventuelles marges intérieures dans le calcul de la taille */
}

.image-pleine-largeur {

  width:100%;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  
    
}


.contenu-en-image 
{ width: 100%;
  height: auto;
  display: block;
}
/*.contenu-en-image {
    display: block ;
    width: 100% ;
    max-width: 1200px; 
    height: auto ;
    min-height: 200px; 
    border: 5px solid red; /*
}*/


  
.conteneur-image {
  width: 100%; /* Prend la largeur disponible */
  max-width: 1700px; /* Modifiez 800px par la taille maximale que vous voulez sur votre écran */
  margin: auto; /* Centre la boîte au milieu de la page */
}

.conteneur-image img {
  width: 100%; /* L'image s'étire pour faire la largeur de la boîte */
  height: auto; /* Garde les bonnes proportions pour ne pas être déformée */
  display: block; /* Enlève les espaces vides indésirables sous l'image */
}


.galerie { display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 1200px;
  margin: 70px auto;
}
.galerie img {
  width: 85%;
  height: auto;
}


.galerie-plus { display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 1400px;
  
}
 .galerie-plus img {
  width: 115%;
  height: auto;
}

.galerie-aligne-haut {

  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  max-width: 1400px;
  
}

.galerie-aligne-haut img {

  width: 110%;
  height: auto;
}

/*h1{ font-size:60px;
    font-style: italic;
    font-weight: bold;
    text-align: left;
    /*opacity: 0.8;*/
    /*background-image: conic-gradient(from 60deg at 56.25% calc(425% / 6), transparent 0deg, transparent 0.5deg, #50f604 0.5deg, #50f604 119.5deg, transparent 119.5deg, transparent 120deg), conic-gradient(from 60deg at 56.25% calc(425% / 6), transparent 0deg, transparent 0.5deg, #50f604 0.5deg, #50f604 119.5deg, transparent 119.5deg, transparent 120deg), conic-gradient(from 180deg at 43.75% calc(425% / 6), transparent 0deg, transparent 0.5deg, #50f604 0.5deg, #50f604 119.5deg, transparent 119.5deg, transparent 120deg), conic-gradient(from 180deg at 43.75% calc(425% / 6), transparent 0deg, transparent 0.5deg, #50f604 0.5deg, #50f604 119.5deg, transparent 119.5deg, transparent 120deg), conic-gradient(from -60deg at 50% calc(175% / 12), transparent 0deg, transparent 0.5deg, #50f604 0.5deg, #50f604 119.5deg, transparent 119.5deg, transparent 120deg), conic-gradient(from -60deg at 50% calc(175% / 12), transparent 0deg, transparent 0.5deg, #50f604 0.5deg, #50f604 119.5deg, transparent 119.5deg, transparent 120deg);
    background-position: 0 0, 30px 52px, 0 0, 30px 52px, 30px 0, 0 52px;
    background-size: 60px 104px;
    
    margin: 
    100px; 
    0px;
    100px; 
    50px;
}*/





/*body{font-family: Arial, Helvetica, sans-serif;
    background-image: url(images/livre.png);
    background-repeat:repeat ;
}*/


/*background-color: #fdfdfd;
opacity: 1;
background-size: 38px 38px;
background-image: repeating-linear-gradient(0deg, #f3a5c3, #f3a5c3 1.9000000000000001px, #fdfdfd 1.9000000000000001px, #fdfdfd);
}*/


.txt-rose { 
color:#e62a36;
}

footer/*{background-color: #fdfdfd;
opacity: 1;
background-size: 38px 38px;
background-image: repeating-linear-gradient(0deg, #e62a36, #e62a36 1.9000000000000001px, #fdfdfd 1.9000000000000001px, #fdfdfd);

}*/

/*.pattern-backround{
background-color: #E5E5F7;
opacity: 0.8;
background-image:  radial-gradient(#50f604 4.5px, transparent 4.5px), radial-gradient(#50f604 4.5px, #E5E5F7 4.5px);
background-size: 60px 60px;
background-position: 0 0,30px 30px; 
}
*/
.banniere-gif {
    background-image: url('banniere.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 300px; /* Ajustez la hauteur selon vos besoins */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.carousel {
  position: relative;
  width: 900px;
  max-width: 100%;
  height: 500px;
  overflow: hidden; /* Cache les images qui dépassent du cadre */
  margin: auto;
  background-color: #ccc;
}

.carousel-images {
  display: flex; /* Aligne toutes les images sur une seule ligne horizontale */
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease-in-out; /* Ajoute un joli effet de glissement */
object-fit: contain;
background-color: #FFFF;
}

.carousel-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0; /* Empêche les images de rétrécir */
  object-fit: contain;
  background-color: #FFFF;

}

.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 20px;
  z-index: 10; /* Force les boutons à rester au-dessus des images */
}

#prev { left: 10px; }
#next { right: 10px; }