@font-face {
  font-family: 'ChunkyBeard';
  src: url('fonts/ChunkyBeard.otf') format('otf'),
  url('fonts/ChunkyBeardDEMO.woff2') format('woff2'),
  url('fonts/ChunkyBeardDEMO.woff') format('woff'),
  url('fonts/ChunkyBeardDEMO.ttf') format('truetype');
  font-weight: normal; /* ou bold */
  font-style: normal;  /* ou italic */
}

@import url('https://fonts.googleapis.com/css2?family=Oi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@700&display=swap');


body {
  margin: 0;
  font-family: 'Kanit', 'Trebuchet MS', 'ChunkyBeard', 'Lucida Sans Unicode', 'Alfa Slab One','Oi', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

h1{
  color :  rgb(254,77,85);
  text-align: center;
  align-content : center;
  padding : 0;
  margin-top : 5%;
  font-family: 'Alfa Slab One' ;
  font-size: 3vw ;
}

.commentaires{
  text-align : center;
  align-content : center;
  color : rgb(254,138,183);
  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: rgba(104,34,62);
  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: rgb(84,142,104);
  transform: scaleY(0.95);
  transform-origin: top; /* Ajout de la propriété transform-origin */
  top : 0;
  line-height: 3; /* Ajustez la hauteur de ligne selon vos préférences */
  height: auto;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out;
}

.logo_navbar{
 color : white;
}

.pontsceandlove{
  width: 15%; /* Ajustez la largeur maximale selon vos besoins */
  height: 15%; /* Ajustez la hauteur maximale selon vos besoins */
  margin-left: 2%;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  font-family :'Kanit','Trebuchet MS'
}

.navbar img {
  max-width: 7%; /* Ajustez la largeur maximale selon vos besoins */
  max-height: 7%; /* Ajustez la hauteur maximale selon vos besoins */
  width: auto; /* Assurez-vous que l'image conserve son rapport hauteur/largeur */
  height: auto;
  margin-left: 5%;
  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: rgba(104,34,62); 
} 

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

/* 768px */

  


.container_majeur{
  height: 80vh; /* Taille du container */
  background-image: url("../assets/img/accueil-ordi.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, rgb(236, 160, 112) 50%, rgb(232, 94, 6) 50%) right;
  background-size : 200%;
  transition : background-position 0.5s;
  font-size : 100%;
  font-family: 'Kabit','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, rgb(236, 160, 112) 50%, rgb(232, 94, 6) 50%) right;
  background-size : 200%;
  transition : background-position 0.5s;
  font-size : 100%;
  font-family: 'Kabit','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:40%;
}

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

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

.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%;
  height:auto; 
  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
}

.legion_desc_gauche.guillaume{
  margin-top : 1%;
}

/*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{
  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_creation{
  background : url(../assets/img/Reseaux/star.jpg);
  background-size : cover;
  background-attachment: fixed;
}

.section_partenariat{
  background-color : rgb(254,77,85);
  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(254,138,183);
  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 : rgb(254,77,85);
    text-align: center;
    align-content : center;
    padding : 0;
    margin-top : 25%;
    font-size: 8vw ;
  }

  
  .gallerie_legion{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30%;; 
  }
  
  .commentaires{
    text-align : center;
    align-content : center;
    color : rgb(254,138,183);
    font-size : 5vw;
    font-style : italic;
    margin-bottom: -4%;
  }

  .container_majeur{
    max-height: 35vh; /* Taille du container */
    background-image: url("../assets/img/logo/accueil-logo.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;
    justify-content: center;
    flex-direction : column;
    text-align : center;
    align-items : center;
    height : 100vh;
  }

  .legion_desc_maud{
    position : absolute;
    margin-bottom : 25%;
    z-index: 1;
    height : 40%;
    width : 40%;
  }
  .legion_desc_gauche{
    position : absolute;
    margin-bottom : 25%;
    margin-left : 44vw;
    z-index: 1;
    height : 40%;
    width : 40%;
  }

  .legion_desc_milieu{
    position : flex;
    margin-bottom : 25%;
    margin-left:5vw;
    height : 40%;
    width: 40%;
    z-index: 1;
    margin-top : 75vh;
  }
  
  .legion_desc_droite{
    position : absolute;
    margin-bottom : 25%;

    margin-right : 49vw;
    z-index: 1;
    height : 40%;
    width : 40%;
    margin-top : 150vh;
  }
  
  .legion_maud{
    position : absolute;
    z-index : 2;
    width : 60%;
    height : 60%;
  }
  .legion_gauche{
    position : absolute;
    margin-left : 49vw;
    z-index : 2;
    width : 60%;
    height : 60%;
  }
  
  .legion_milieu{
    position : absolute;

    width : 60%;
    height : 60%;
    z-index: 2;
    margin-top : 75vh;

  }
  
  .legion_droite{
    position : absolute;
    margin-right : 49vw;
    z-index : 2;
    width : 60%;
    height : 60%;
    margin-top : 150vh;
  }
  
  .legion_image{
    display : block;
    width: 90%;
    height:auto; 
  }

  .legion_image_desc{
    display : block;
    width: 90%;
    height:auto; 
  }
  
  .nom_legion_maud{
    margin-top : 16vh;

    font-size :5.5vw;
    font-weight : bold;
    white-space:nowrap;
    display : none;
  }
  .nom_legion_gauche{
    margin-top : 16vh;
    margin-left : 49vw;

    font-size :5.5vw;
    font-weight : bold;
    white-space:nowrap;
    display : none;
  }

  .role_legion_maud{
    margin-top : 23vh;

    font-size :4.2vw;
    font-style : italic;
    white-space:nowrap;
    display : none;
  }
  .role_legion_gauche{
    margin-top : 23vh;
    margin-left : 49vw;

    font-size :4.2vw;
    font-style : italic;
    white-space:nowrap;
    display : none;
  }
  
  .nom_legion_droite{
    margin-top : 163vh;
    margin-right : 49vw;

    font-size : 5.5vw;
    font-weight : bold;
    white-space:nowrap;
    display : none;
  }
  
  .role_legion_droite{
    margin-top : 170vh;
    margin-right : 49vw;

    font-size : 4.2vw;
    font-style : italic;
    white-space:nowrap;
    display : none;
  }
  

  .nom_legion_milieu{
    margin-top : 90vh;
    font-size : 5.5vw;
    font-weight : bold;
    white-space:nowrap;
    display : none;
  }
  
  .role_legion_milieu{
    margin-top : 97vh;
    font-size : 4.2vw;
    font-style : italic;
    white-space:nowrap;
    display : none;
  }

  .ecart_legion{
    display : flex;
    margin-top:10vh;
  }

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

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

  .hotline_desc_gauche{
    position : absolute;
    z-index: 1;
    width : 45%;
    height : 45%;
    margin-right : 20%;
    margin-top : 65%;
  }
  
  .hotline_gauche{
    position : absolute;
    z-index : 2;
    width : 45%;
    height : 45%;
    margin-right : 20%;
    margin-top : 65%;
  }
  
  .hotline_desc_milieu{
    position : absolute;
    width : 45%;
    height : 45%;
    z-index: 1;
    margin-right : 20%;
  }

  .hotline_milieu{
    position : absolute;
    width : 45%;
    height : 45%;
    z-index : 2;
    margin-right : 20%;
  }
  
  .hotline_desc_droite{
    position : absolute;
    width : 45%;
    height : 45%;
    z-index: 1;
    margin-top : 130%;
    margin-right : 80%;
  }

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

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

  .ecart{
    display : flex;
    margin-top:190%;
  }
  .ecart_fin{
    display : flex;
    margin-top:180%;
  }
  
  .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, rgb(236, 160, 112) 50%, rgb(232, 94, 6)) right;
    background-size : 200%;
    transition : background-position 0.5s;
    font-size :4vw;
    font-family: 'Kabit','Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    align-content : center;
    margin: 0 auto;
    white-space:nowrap;
    text-decoration : none ; /* Supprimes le soulignement par défaut des liens */
  }
  
  .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, rgb(236, 160, 112) 50%, rgb(232, 94, 6)) right;
    background-size : 200%;
    transition : background-position 0.5s;
    font-size : 4vw;
    font-family: 'Kabit','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 */
  }
  
  .section_creation{
    background : url(../assets/img/Reseaux/flowers.jpg);
    background-size : cover;
    background-attachment: fixed;
    zoom: -200px;
  }
  
  .text_navabr{
    font-size:1vh;
  }

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

  }
 

  .navbar {
    z-index: 1000;
    background-color: transparent;
    color: rgb(84,142,104);
    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 {
    color: rgb(84,142,104);
    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;
    margin-right: 20%;
  }
  
  .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-right:5%;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  }

  .fuze_tea{
    position : flex;
    margin-bottom : 3%;
  
  }
  
  .amazon{
    position : flex;
    margin-bottom : 3%;
  }
}