@font-face {
    font-family: 'Cochin';
    src: url('../fonts/Cochin/Cochin Regular/Cochin Regular.otf') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cochin';
    src: url('../fonts/Cochin/Cochin Italic/Cochin Italic.otf') format('woff2');
    font-weight: normal;
    font-style: italic;
}

body {
  background: #fffdf3;
  margin: 0;
  font-family: 'Cochin', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

h1 {
  color : black;
  text-align: center;
  align-content : center;
  padding : 0;
  margin-top : 3%;
  font-size: 3vw ;
}

.commentaires{
  text-align : center;
  align-content : center;
  color : rgb(57, 56, 56);
  font-size : 2vw;
  font-style : italic;
}

footer{
  text-align : center;
}

.p{
  color : black;
  text-align: center;
  align-content : center;
}

.text_navabr{
  font-size:1vw;
}

.scroll-link.text_navbar{
  font-size:1vw;
}


.navbar {
  z-index: 1000;
  background-color: transparent;
  color: #c62222;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;
  position: fixed;
  width: 100%;
  top: 0;
  transform-origin: 0;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.navbar.scrolled {
  background-color: rgba(0,0,0, 0.3);
  transform: scaleY(0.95);
  transform-origin: top; /* Ajout de la propriété transform-origin */
  top : 0;
  line-height: 4; /* Ajustez la hauteur de ligne selon vos préférences */
  height: auto;
}

.logo_navbar{
 color : white;
}

.navbar img {
  max-width: 4%; /* Ajustez la largeur maximale selon vos besoins */
  max-height: 4%; /* Ajustez la hauteur maximale selon vos besoins */
  width: auto; /* Assurez-vous que l'image conserve son rapport hauteur/largeur */
  height: auto;
  margin-left: 25%;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}

.navbar-toggle {
  cursor: pointer;
  display: none;
}

.nav-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  margin-right: 20%;
}

.nav-list li {
  margin-right: 20px;
}

.nav-list a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: font-size 0.3s ease-in-out;
}

.nav-list a.active {
  color: #ff8800;
}

.content {
  padding: 10%;
  margin-top: 10%;
}

/* 768px */




.container_majeur{
  height: 80vh; /* Taille du container */
  background-image: url("../img-cartel/banniere-accueil.png"); /*Image de fond*/
  background-position: center; /* Au centre */
  background-repeat : no-repeat; /* Pour ne pas que l'image se répète pour combler l'espace */
  background-size : cover;
}



.bouton_clique{
  display : flex;
  justify-content: center;
  align-items: center;
  color : #fff;
  /* padding : 15px 30px; */
  padding : 1% 2% ;
  border-radius : 10px;
  border : none;
  width : 20% ;
  background : linear-gradient(to left, #ffc490 50%, #ff7221 50%) right;
  background-size : 200%;
  transition : background-position 0.5s;
  font-size : 120%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  align-content : center;
  margin: 0 auto;
  text-decoration : none ; /* Supprimes le soulignement par défaut des liens */
}

.bouton_clique_dej{
  display : flex;
  justify-content: center;
  align-items: center;
  color : #fff;
  /* padding : 15px 30px; */
  padding : 1% 2% ;
  border-radius : 10px;
  border : none;
  width : 20% ;
  background : linear-gradient(to left, #ffc490 50%, #ff7221 50%) right;
  background-size : 200%;
  transition : background-position 0.5s;
  font-size : 120%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  align-content : center;
  margin: 0 auto;
  text-decoration : none ; /* Supprimes le soulignement par défaut des liens */
}



.bouton_clique:hover{
  background-position: left;
}

.bouton_clique_dej:hover{
  background-position: left;
}

.contenant_hotline_1{
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin-bottom: 5% ; /* Espace entre les lignes */
}

.ecart{
  display : flex;
  margin-top:25%;
}
.ecart_fin{
  display : flex;
  margin-top:25%;
}
.ecart_legion{
  display : flex;
  margin-top:30%;
}

.ecart_legion_fin{
  display : flex;
  margin-top:30%;
}

.ecart_texte{
  display : flex;
  margin-top : 5%;
}

.gallerie_legion{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 30%;
}

.contenant_legion{
  display: flex;
  justify-content: space-around;
  width: 80%;

  margin-bottom: 5% ; /* Espace entre les lignes */
}

.legion_desc_gauche{
  position : absolute;
  z-index: 1;
  width : 30%;
  height : 30%;
  margin-right:45%;
  margin-top : 1%;
}

.legion_desc_droite{
  position : absolute;
  width : 30%;
  height : 30%;
  z-index: 1;
  margin-left:55%;
  margin-top : 1%;
}

.legion_desc_milieu{
  position : absolute;
  width : 30%;
  height : 30%;
  z-index: 1;
  margin-top : 1%;
  margin-left : 5%;
}

.legion_gauche{
  position : absolute;
  z-index : 2;
  width : 30%;
  height : 30%;
  margin-right:45%;
  margin-top : 1%;
}

.legion_droite{
  position : absolute;
  width : 30%;
  height : 30%;
  z-index: 2;
  margin-left:55%;
  margin-top : 1%;
}

.legion_milieu{
  position : absolute;
  width : 30%;
  height : 30%;
  z-index: 2;
  margin-top : 1%;
  margin-left : 5%;
}

.legion_desc_maud{
  position : absolute;
  width : 30%;
  height : 30%;
  z-index: 1;
  margin-left : 10%;
}

.legion_maud{
  position : absolute;
  width : 30%;
  height : 30%;
  z-index: 2;
  margin-top : 1%;
  margin-left : 5%;
}

.legion_image_desc{
  position : absolute;
  display : block;
  margin : auto;
  width: 80%;
  height : auto;
  padding-top : 20%;
  text-align : center;
}

.legion_image{
  position : absolute;
  display : block;
  margin : auto;
  width: 80%;
  padding-top : 20%;
  height:auto;
  text-align : center;
}

.nom_legion_gauche{
  position : absolute;
  margin-right : 50%;
  margin-top : 32%;
  font-size : 2.5vw;
  font-weight : bold;
}

.role_legion_gauche{
  position : absolute;
  margin-right : 50%;
  margin-top :35%;
  font-size : 1.8vw;
  font-style : italic;
}

.nom_legion_droite{
  position : absolute;
  margin-left : 50% ;
  margin-top : 32%;
  font-size : 2.5vw;
  font-weight : bold;
}

.role_legion_droite{
  position : absolute;
  margin-left : 50% ;
  margin-top : 35%;
  font-size : 1.8vw;
  font-style : italic;
}


.nom_legion_milieu{
  position : absolute;
  margin-top : 32%;
  font-size : 2.5vw;
  font-weight : bold;
}

.role_legion_milieu{
  position : absolute;
  margin-top : 35%;
  font-size : 1.8vw;
  font-style : italic;
}

.nom_legion_maud{
  position : absolute;
  margin-top : 32%;
  font-size : 2.5vw;
  font-weight : bold;
}

.role_legion_maud{
  position : absolute;
  margin-top : 35%;
  font-size : 1.8vw;
  font-style : italic
}

div[id="legion"]:hover{
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

div[id="hotline_1"]:hover{
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
div[id="hotline_2"]:hover{
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
div[id="hotline_3"]:hover{
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
div[id="hotline_4"]:hover{
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
div[id="hotline_5"]:hover{
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
div[id="hotline_6"]:hover{
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
div[id="hotline_7"]:hover{
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.hotline_desc_gauche{
  position : absolute;
  z-index: 1;
  width : 35%;
  height : 35%;
  margin-right:60%;
}

.hotline_gauche{
  position : absolute;
  z-index : 2;
  width : 35%;
  height : 35%;
  margin-right:60%;
}

.hotline_desc_milieu{
  position : absolute;
  width : 35%;
  height : 35%;
  margin : auto;
  z-index: 1;
}
.hotline_milieu{
  position : absolute;
  margin : auto;
  width : 35%;
  height : 35%;
  z-index : 2;
}

.hotline_desc_droite{
  position : absolute;
  width : 35%;
  height : 35%;
  z-index: 1;
  margin-left:60%;
}
.hotline_droite{
  position : absolute;
  width : 35%;
  height : 35%;
  z-index : 2;
  margin-left:60%;
}
.hotline_image{
  background-color: #fffdf3;
  display : block;
  margin : auto;
  width:70%;
  height:auto;
}

.gallerie_hotline{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 30%;
}

.img_activite{
  display : block;
  margin : auto;
  width : 100%;
  height : auto;
}

.img_menu{
  display : block;
  margin : auto;
  width : 100%;
  height : auto;
}

.section_ptit_dej {
  padding : 8%;
  background : url("../img-cartel/banniere-ptit-dej.png");
  background-size : cover;
  background-color : #dfc336;
}

.section_creation{
  background : url("../img-cartel/banniere-creations.png");
  background-size : cover;
  background-attachment: fixed;
}

.section_partenariat{
  background-color : black;
  text-align : center;
}

.fuze_tea{
  position : flex;
  margin-left : 10vw;
  margin-bottom : 2%;

}

.amazon{
  position : flex;
  margin-left :10vw;
  margin-bottom : 2%;
}

.section_reseaux{
  background-color : rgb(62, 62, 62);
  text-align : center;
  outline : none;
  text-decoration : none ;


}

.insta{
  position : flex;
  width : 10vh;
  height : auto;
  margin-bottom : 2%;
  text-decoration : none ;
  outline : none;
}

.uponts{
  position : flex;
  width : 10vh;
  height : auto;
  margin-left : 5vw;
  margin-bottom : 2%;
  text-decoration : none ;
  outline : none;
}
.facebook{
  position : flex;
  width : 10vh;
  height : auto;
  margin-left : 5vw;
  margin-bottom : 2%;
  text-decoration : none ;
  outline : none;
}

.pixel{
  display : inline-block;
  width : 5vw;
  height : 1vw;
  margin : 0 10px;
  vertical-align : text-bottom;
}

/* Pour Téléphone : */

@media (max-width: 1024px) {
  h1{
    color : black;
    text-align: center;
    align-content : center;
    padding : 0;
    margin-top : 3%;
    font-size: 8vw ;
  }

  .gallerie_legion {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding: 0;
    margin-bottom: 70%;
    height: auto;
  }

  .commentaires{
    text-align : center;
    align-content : center;
    color : rgb(57, 56, 56);
    font-size : 5vw;
    font-style : italic;
  }


  .container_majeur{
    max-height: 35vh; /* Taille du container */
    background-image: url("../img-cartel/banniere-accueil.png"); /*Image de fond*/
    background-position: center; /* Au centre */
    background-repeat : no-repeat; /* Pour ne pas que l'image se répète pour combler l'espace */
    background-size : cover;
  }

  .contenant_legion {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0;
    position: relative;
  }

  .legion_desc_gauche {
    position: relative;
    width: 60%;
    height: auto;
    margin: 10% auto 0 auto;
    top: 0;
    left: 0;
    right: 0;
  }

  .legion_gauche {
    position: relative;
    width: 60%;
    height: auto;
    margin: 0 auto;
    top: 0;
    left: 0; /* Pour centrer (100% - 60%) / 2 */
    z-index: 2;
  }

  /* Deuxième membre */
  .legion_desc_milieu {
    position: relative;
    width: 60%;
    height: auto;
    margin: 100% auto 0 auto; /* Espace pour le premier membre */
    left: 0;
    right: 0;
  }

  .legion_milieu {
    position: relative;
    width: 60%;
    height: auto;
    margin: 0 auto;
    left: 0;
    z-index: 2;
  }

  /* Troisième membre */
  .legion_desc_droite {
    position: relative;
    width: 60%;
    height: auto;
    margin: 100% auto 0 auto; /* Espace pour le deuxième membre */
    left: 0;
    right: 0;
  }

  .legion_droite {
    position: relative;
    width: 60%;
    height: auto;
    margin: 0 auto;
    left: 0;
    z-index: 2;
  }

  .legion_image,
  .legion_image_desc {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
  }

  .nom_legion_gauche {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size : 8vw;
    font-weight : bold;
    top: 25%;
    left: 0;
  }

  .role_legion_gauche {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size : 7vw;
    font-style : italic;
    top: 20%;
    left: 0;
  }

  .nom_legion_milieu {
    z-index: 999;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size : 8vw;
    font-weight : bold;
    top: 73%;
    left: 0;
  }

  .role_legion_milieu {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size : 7vw;
    font-style : italic;
    top: 68%;
    left: 0;
  }

  .nom_legion_droite {
    z-index: 999;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size : 8vw;
    font-weight : bold;
    top: 121%;
    right: 0;
  }

  .role_legion_droite {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size : 7vw;
    font-style : italic;
    top: 116%;
    right: 0;
  }

  .ecart_legion {
    margin-top: 100%;
  }

  .ecart_legion_fin {
    height: 40%;
  }


  .gallerie_hotline {
    display: flex;
    flex-direction: column; /* Dispose les éléments verticalement */
    align-items: center; /* Centre les éléments */
    justify-content: flex-start; /* Aligne les enfants en haut */
    width: 100%; /* Prend toute la largeur */
    height: auto; /* Hauteur s'ajuste au contenu */
    padding-bottom: 15%; /* Ajoute un peu d'espace en haut et en bas */
    box-sizing: border-box; /* Inclut le padding dans les calculs de dimensions */
  }

  .contenant_hotline_1{
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: auto;
  }

  .hotline_desc_gauche{
    position : absolute;
    z-index: 1;
    width : 60%;
    height : auto;
    margin-right : 0%;
    margin-top : 65%;
  }

  .hotline_gauche{
    position : absolute;
    z-index : 2;
    width : 60%;
    height : auto;
    margin-right : 0%;
    margin-top : 65%;
  }

  .hotline_desc_milieu{
    position : absolute;
    width : 60%;
    height : auto;
    z-index: 1;
    margin-right : 0%;
  }

  .hotline_milieu{
    position : absolute;
    width : 60%;
    height : auto;
    z-index : 2;
    margin-right : 0%;
  }

  .hotline_desc_droite{
    position : absolute;
    width : 60%;
    height : auto;
    z-index: 1;
    margin-top : 130%;
    margin-right : 60%;
  }

  .hotline_droite{
    position : absolute;
    width : 60%;
    height : auto;
    z-index : 2;
    margin-right : 60%;
    margin-top : 130%;
  }

  .hotline_image{
    display : block;
    margin : auto;
    width: 100%;
    height:auto;
  }

  .ecart{
    display : flex;
    margin-top:190%;
  }
  .ecart_fin{
    display : flex;
    margin-top:40%;
  }

  .bouton_clique{
    display : flex;
    justify-content: center;
    align-items: center;
    color : #fff;
    /* padding : 15px 30px; */
    padding : 1% 2% ;
    border-radius : 20px;
    border : none;
    width : 50vw ;
    height : 5vh;
    background : linear-gradient(to left, #ffc490 50%, #ff7221 50%) right;
    background-size : 200%;
    transition : background-position 0.5s;
    font-size :4vw;
    font-family:'Courier New', Courier, monospace;
    align-content : center;
    margin: 0 auto;
    white-space:nowrap;
    text-decoration : none ; /* Supprimes le soulignement par défaut des liens */
  }

  .section_ptit_dej {
    padding : 16% 0;
    background : url("../img-cartel/banniere-ptit-dej.png");
    background-size : cover;
    background-color : #dfc336;
  }

  .bouton_clique_dej{
    display : flex;
    justify-content: center;
    align-items: center;
    color : #ffffff;
    text-align : center;
    /* padding : 15px 30px; */
    padding : 1% 2% ;
    border-radius : 20px;
    border : none;
    width : 80vw ;
    height : 5vh;
    background : linear-gradient(to left, #ffc490 50%, #ff7221 50%) right;
    background-size : 200%;
    transition : background-position 0.5s;
    font-size : 4vw;
    font-family:'Courier New', Courier, monospace;
    align-content : center;
    margin: 0 auto;
    text-decoration : none ; /* Supprimes le soulignement par défaut des liens */
  }

  .section_creation{
    background : url("../img-cartel/banniere-creations.png");
    background-size : cover;
    background-attachment: fixed;
  }

  .text_navabr{
    font-size:1vh;
  }

  .scroll-link.text_navbar{
    font-size:2.5vw;
    white-space:nowrap;

  }


  .navbar {
    z-index: 1000;
    background-color: transparent;
    color: #c62222;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 10vh;
    position: fixed;
    width: 100%;
    top: 0;
    transform-origin: 0;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out;
  }

  .navbar.scrolled {
    background-color: rgba(0,0,0, 0.3);
    transform: scaleY(0.95);
    transform-origin: top; /* Ajout de la propriété transform-origin */
    top : 0;
    line-height: 6; /* Ajustez la hauteur de ligne selon vos préférences */
  }
  .navbar.scrolled img{
    position : flex;
    max-width: 10%;
    max-height: 10%;
    width: auto; /* Assurez-vous que l'image conserve son rapport hauteur/largeur */
    height: auto;
    margin-right:5%;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  }

  .nav-list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
  }

  .nav-list li {
    margin-right: 2vw;
  }

  .nav-list a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: font-size 0.3s ease-in-out;
  }

  .nav-list a.active {
    color: #ff8800;
  }

  .navbar img {
    position : flex;
    max-width: 60%;
    max-height: 60%;
    width: auto; /* Assurez-vous que l'image conserve son rapport hauteur/largeur */
    height: auto;
    margin-left: 5%;
    margin-right: 5%;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  }

  .insta{
    position : flex;
    width : 15vw;
    height : auto;
    margin-bottom : 2%;
    text-decoration : none ;
    outline : none;
  }

  .uponts{
    position : flex;
    width : 15vw;
    height : auto;
    margin-left : 5vw;
    margin-bottom : 2%;
    text-decoration : none ;
    outline : none;
  }
}