* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    width: 100%;
    font-family: 'Montserrat', sans-serif;
  }
  body{
    overflow-y: auto;
    overflow-x: hidden;
  }
  ::-webkit-scrollbar {
    width: 6px;
    padding: 0 1px;
}

::-webkit-scrollbar-track {
    background: #0b0b0b; 
}

::-webkit-scrollbar-thumb {
    background-color: white;
    width: 4px;
}

.blur-bg {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* pour Safari */
}
  .noscroll {
    overflow: hidden;
    height: 100vh;
  }
  .containerNav{
    width: 100svw;
    height:9svh ;
    background-color: #0B0B0B;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav{
    width: 65.5svw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .containerLeft{
    display: flex;
    align-items: center;
    height: 9svh;

  }
  .containerLeft:hover{
    cursor: pointer;
  }
  .containerLeft img{
    width: 1.5svw;
    margin-right: 0.5svw;
  }

  .textLogo{
    font-family: montserrat;
    color: white;
    font-size: 1svw;
  }
  .textLogo span{
    font-weight: 700;
  }
  .containerRight{
    width: 39.66svw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 9svh;
  }
  .containerRight li{
    display: flex;
    align-items: center;
    height: 9svh;
    color: #545454;
  }
  .containerRight li a{
    color: #545454;
    font-family: montserrat;
    font-size: 0.9svw;
    text-decoration: none;
    transition: all 0.5s;
    /* font-weight: 500; */
  }
  .containerRight li a:hover{
    color: white;
  }
  .containerRight li a.on{
    color: white;
  }

.containerHeader{
    height: 67.7svh;
    width: 100svw;
    position: relative;
    background-image: url(../image/headerHome.png);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.containerHeaderBoutique{
    height: 67.7svh;
    width: 100svw;
    position: relative;
    background-image: url(../image/headerBoutique.png);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.titreHeader{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -3svh;
}
.titreHeader img{
    width: 5svw;
}
.titreHeader h1{
    color: white;
    font-family: montserrat;
    font-size: 3svw;
    font-weight: 500;
}
.titreHeader p{
    color: white;
    font-family: montserrat;
    font-size: 1.2svw;
}
.titreHeaderBoutique{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -3svh;
}
.titreHeaderBoutique h1{
    color: white;
    font-family: montserrat;
    font-size: 4svw;
    font-weight: 500;
}
.titreHeaderBoutique p{
    color: white;
    font-family: montserrat;
    font-size: 1.2svw;
}
.btnHead{
    position: absolute;
    background-color: white;
    width: 10svw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.5svh;
    border-radius: 50svw;
    bottom: 2.75svh;
}
.btnHead:hover{
cursor: pointer;
}
.btnHead p{
    font-family: 'Montserrat';
    color: #0b0b0b;
    margin-right: 0.5svw;
    font-size: 0.8svw;
    font-weight: 500;
}
.btnHead img{
    width: 0.7svw;
}
.btnHeadBoutique{
    position: absolute;
    background-color: white;
    width: 16svw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.5svh;
    border-radius: 50svw;
    bottom: 2.75svh;
}
.btnHeadBoutique:hover{
cursor: pointer;
}
.btnHeadBoutique p{
    font-family: 'Montserrat';
    color: #0b0b0b;
    margin-right: 0.5svw;
    font-size: 0.8svw;
    font-weight: 500;
}
.btnHeadBoutique img{
    width: 0.7svw;
    rotate: -90deg;
}
.elemtLeft{
    background-color: white;
    width: 35svw;
    position: absolute;
    left: 0;
    bottom: -0.2svh;
    height: 6svh;
    clip-path: polygon(
    0 0,         /* top-left */
    85% 0,       /* top-right déplacé vers la gauche */
    100% 100%,   /* bottom-right */
    0 100%       /* bottom-left */
  );
}
.elemtRight{
    background-color: white;
    width: 35svw;
    position: absolute;
    right: 0;
    bottom: -0.2svh;
    height: 6svh;
    clip-path: polygon(
    15% 0,         /* top-left */
    100% 0,       /* top-right déplacé vers la gauche */
    100% 100%,   /* bottom-right */
    0 100%       /* bottom-left */
  );
}
.containerAboutOne{
  width: 100svw;
  position: relative;
  display: flex;
  height: auto;
  padding: 6svh 0;
  flex-direction: column;
  align-items: center;
}
.containerAboutOne h2{
color: #0b0b0b;
font-family: montserrat;
font-size: 1.6svw;
}
.ligneAbout{
  display: flex;
  justify-content: space-between;
  width: 18svw;
  height: 0.3svh;
  margin-bottom: 4svh;
}
.ligneAbout1{
  background-color: #0b0b0b;
  border-radius: 50svw;
  width: 4svw;
}
.ligneAbout2{
  background-color: #0b0b0b;
  border-radius: 50svw;
  width: 13svw;
}
.textAbout1{
display: flex;
align-items: center;
}
.textAbout1 img{
margin-right: 1svw;
width: 31.77svw;
}
.textAbout1 p{
font-family: montserrat;
color: #0b0b0b;
font-size: 1.1svw;
font-weight: 500;
}
.containerAboutTwo{
  width: 100svw;
  position: relative;
  display: flex;
  height: auto;
  padding: 6svh 0;
  flex-direction: column;
  align-items: center;
  background-color: #0b0b0b;
  background-image: url(../image/aboutBack.png);
  background-position: center;
  background-size: cover;
}
.textAbout2{
display: flex;
align-items: center;
}
.textAbout2 img{
margin-left: 1.4svw;
width: 31.77svw;
}
.textAbout2 p{
font-family: montserrat;
color: white;
font-size: 1.17svw;
font-weight: 400;
}
.containerHoraire{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100svw;
  padding: 6svh 0;
}
.containerHoraire img{
width: 64.5svw;
}
.containerHoraire h2{
  color: #0b0b0b;
  font-family: montserrat;
  font-size: 1.6svw;
}
.ligneHoraire{
  display: flex;
  justify-content: space-between;
  width: 29.5svw;
  height: 0.3svh;
  margin-bottom: 4svh;
}
.ligneHoraire1{
  background-color: #0b0b0b;
  border-radius: 50svw;
  width: 24svw;
}
.ligneHoraire2{
  background-color: #0b0b0b;
  border-radius: 50svw;
  width: 4.5svw;
}

.containerFooter{
  background-color: #0b0b0b;
  width: 100svw;
  display: flex;
  justify-content: center;
}
.footer{
  width: 64.5svw;
  display: flex;
  justify-content: space-between;
  padding: 9svh 0;
}
.footer img{
  width: 8.97svw;
}
.contact{
  display: flex;
  flex-direction: column;
}
.contact h3{
  color: white;
  font-family: montserrat;
  font-size: 1.2svw;
  font-weight: 500;
  margin-bottom: 3svh;
}
.tel{
  display: flex;
  align-items: center;
  margin-bottom: 1.4svh;
}
.tel p{
 color: #545454;
 font-size: 1svw;
 font-family: montserrat;
 font-weight: 500;
}
.iconeTel{
  fill: #545454;
  width: 1.2svw;
  margin-right: 0.5svw;
}
.email{
  display: flex;
  align-items: center;
}
.email p{
 color: #545454;
 font-size: 1svw;
 font-family: montserrat;
 font-weight: 500;
}
.iconeEmail{
  fill: #545454;
  width: 1.2svw;
  margin-right: 0.5svw;
}
.navigation{
  display: flex;
  flex-direction: column;
}
.navigation h3{
  color: white;
  font-family: montserrat;
  font-size: 1.2svw;
  font-weight: 500;
  margin-bottom: 3svh;
}
.navigation p{
  color: #545454;
  font-size: 1.1svw;
  font-family: montserrat;
  font-weight: 400;
  margin-bottom: 1svh;
  transition: all 0.5s;
}
.navigation p:hover{
  color: white;
  cursor: pointer;

}
.navigation p.onFooter{
  color: white;
}
.communaute{
  display: flex;
  flex-direction: column;
}
.communaute h3{
  color: white;
  font-family: montserrat;
  font-size: 1.2svw;
  font-weight: 500;
  margin-bottom: 3svh;
}
.containerRS{
  display: flex;
}
.youtube{
  width: 2svw;
  height: 2svw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  margin-right: 0.5svw;
  cursor: pointer;
  transition: all 0.5s;
}
.youtube svg{
  fill: #0b0b0b;
  width: 1svw;
  transition: all 0.5s;
}
.insta{
  width: 2svw;
  height: 2svw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  margin-right: 0.5svw;
  cursor: pointer;
  transition: all 0.5s;
}
.insta svg{
  fill: #0b0b0b;
  width: 1svw;
  transition: all 0.5s;
}
.tiktok{
  width: 2svw;
  height: 2svw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  margin-right: 0.5svw;
  cursor: pointer;
  transition: all 0.5s;
}
.tiktok svg{
  fill: #0b0b0b;
  width: 1svw;
  transition: all 0.5s;
}
.snapchat{
  width: 2svw;
  height: 2svw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  cursor: pointer;
  transition: all 0.5s;
}
.snapchat svg{
  fill: #0b0b0b;
  width: 1svw;
  height: auto;
  transition: all 0.5s;
}
.containerCopyright{
  width: 100svw;
  height: 5svh;
  display: flex;
  justify-content:center;
}
.Copyright{
  width: 64.5svw;
  height: 5svh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Copyright p{
color: #0b0b0b;
font-family: montserrat;
font-size: 0.8svw;
font-weight: 500;
}
.mentions{
  cursor: pointer;
}


.containerBoutique{
  width: 100svw;
  position: relative;
  display: flex;
  height: auto;
  padding: 6svh 0;
  flex-direction: column;
  align-items: center;
}
.containerBoutique h2{
  color: #0b0b0b;
  font-family: montserrat;
  font-size: 1.6svw;
  }
  .ligneBoutique{
    display: flex;
    justify-content: space-between;
    width: 18svw;
    height: 0.3svh;
    margin-bottom: 4svh;
  }
  .ligneBoutique1{
    background-color: #0b0b0b;
    border-radius: 50svw;
    width: 4svw;
  }
  .ligneBoutique2{
    background-color: #0b0b0b;
    border-radius: 50svw;
    width: 13svw;
  }
  .containerProduit{
    width: 64.5svw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .produit{
    cursor: pointer;
    width: 15svw;
    background-color: #D9D9D9;
    border: solid 1px #999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5svw;
  }
  .divproduit{
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .maillot{
    width: 100%;
  }
  #hovermaillot1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0% ;
  }
  #hovermaillot1 p {
font-family: montserrat;
color: white;
font-size: 0.8svw;

  }
  .prixProduit{
    background-color: white;
    width: 100%;
    height: 4svh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5svw;
  }
  .prixProduit p{
color: #535353;
font-family: montserrat;
font-size: 0.7svw;
font-weight: 600;
  }

  .HoverProduit{
    position: absolute;
    background-color: black;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
  }
  .HoverProduit p{
color: white;
font-size: 0.8svw;
font-family: montserrat;
  }

  .lastproduit{
    margin-bottom: 0;
  }

  .boutiqueLeaons{
    display: flex;
    align-items: center;
  }
  .boutiqueLeaons p{
 margin: 0 2svw;
 font-size: 2svw;
 font-family: montserrat;
 color: white;
  }
  .logoPetrus{
    width: 5svw;
  }
  .logoLeons{
    width: 8svw;
  }


  /* /////////CONTACT/////////////////////////////////////// */
  .containerHeaderContact{
    height: 67.7svh;
    width: 100svw;
    position: relative;
    background-image: url(../image/headerContact.png);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
  .btnHeadContact{
    position: absolute;
    background-color: white;
    width: 14svw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.5svh;
    border-radius: 50svw;
    bottom: 2.75svh;
}
.btnHeadContact:hover{
cursor: pointer;
}
.btnHeadContact p{
    font-family: 'Montserrat';
    color: #0b0b0b;
    margin-right: 0.5svw;
    font-size: 0.8svw;
    font-weight: 500;
}
.btnHeadContact img{
    width: 0.7svw;
}
  .containerCoach{
    padding: 6svh 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .textDirecteur{
    display: flex;
    margin-bottom: 3svh;
  }
  .imgPresident{
    width: 28.54svw;
    margin-right: 1.5svw;
  }
  .containertextPresident{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .presidentText h2{
    font-family: montserrat;
    color: #0b0b0b;
    font-size: 2svw;
  }
  .lignePresident{
    width: 20svw;
    height: 0.3svh;
    display: flex;
    justify-content: space-between;
    border-radius: 50svw;
  }
  .lignePresident1{
    background-color: #0b0b0b;
    width: 4svw;
    border-radius: 50svw;
  }
  .lignePresident2{
    background-color: #0b0b0b;
    width: 15svw;
    border-radius: 50svw;
  }
  .textPetrusFlo{
    font-family: montserrat;
    color: #0b0b0b;
    font-size: 1.05svw;
    font-weight: 500;
  }
  .containerHistoire{
    width: 100%;
    display: flex;
    justify-content: end;
  }

  .histoire{
    width: 16.5svw;
    background-color: #0b0b0b;
    display: flex;
    justify-content: center;
    cursor: pointer;
    height: 4svh;
    align-items: center;
    border-radius: 50svw;
  }
  .histoire p{
    font-family: montserrat;
    color: white;
    font-size: 0.8svw;
  }


  .iconYoutubeHistoire{
    width: 1svw;
    fill: white;
    margin-right: 0.7svw;
  }

  .barre{
    width: 100%;
    height: 0.3svh;
    background-color: #C7C7C7;
    margin-bottom: 3svh;
  }
.Coach{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.Coach h2{
  font-family: montserrat;
  font-size: 1.7svw;
  color: #0b0b0b;
}
.ligneCoach{
  width: 11.7svw;
    height: 0.3svh;
    display: flex;
    justify-content: space-between;
    border-radius: 50svw;
    margin-bottom: 2svh;
}
.ligneCoac1{
  background-color: #0b0b0b;
  width: 8.3svw;
  border-radius: 50svw;
}
.ligneCoac2{
  background-color: #0b0b0b;
  width: 3svw;
  border-radius: 50svw;
}
  .imgCoach{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .imgCoach img{
  width: 19.4svw;
  }

    /* /////////MATCHS/////////////////////////////////////// */
    .containerHeaderMatch{
      height: 67.7svh;
      width: 100svw;
      position: relative;
      background-image: url(../image/headerMatch.png);
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
  }
   .containerTitreSection{
    width: 100svw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6svh 0 4svh 0;
   }
   .titreSection{
    width: 64.5svw;
    display: flex;
    flex-direction: column;
    align-items: center;
   }
   .titreSection h2{
    font-family: montserrat;
    font-size: 1.7svw;
    color: #0b0b0b;
  }
   .lignematch{
    width: 23.7svw;
      height: 0.3svh;
      display: flex;
      justify-content: space-between;
      border-radius: 50svw;
      margin-bottom: 3svh;
  }
  .lignematch1{
    background-color: #0b0b0b;
    width: 4.7svw;
    border-radius: 50svw;
  }
  .lignematch2{
    background-color: #0b0b0b;
    width: 18svw;
    border-radius: 50svw;
  }
  .section{
    width: 100%;
    display: flex;
    height: 7svh;
  }
  .prochain{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 7svh;
    cursor: pointer;
    transition: all 0.5s;
    background-color: #EAEAEA;
  }
  .prochain p{
    font-family: montserrat;
    font-size: 1.3svw;
    font-weight: 600;
    transition: all 0.5s;
    color: #969696;
  }
 
  .precedent{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 7svh;
    background-color: #EAEAEA;
    cursor: pointer;
    transition: all 0.5s;
  }
  .precedent p{
    color: #969696;
    font-family: montserrat;
    font-size: 1.3svw;
    font-weight: 600;
    transition: all 0.5s;
  }
  .prochain:hover,
  .precedent:hover {
    background-color: #0b0b0b;
  }
  
  .prochain:hover p,
  .precedent:hover p {
    color: white;
  }
  
  .prochain.active,
  .precedent.active {
    background-color: #0b0b0b;
  }
  
  .prochain.active p,
  .precedent.active p {
    color: white;
  }

  .containerallmatchprochain{
    width: 100svw;
    display: flex;
    justify-content: center;
    padding-bottom: 6svh;

  }
  .matchProchain{
    width: 64.5svw;
    display: flex;
    flex-direction: column;
  }
  .match{
    width: 100%;
    display: flex;
    height: 9svh;
    justify-content: space-around;
    background-color: #0b0b0b;
    border:solid 2px #8F8F8F;
    align-items: center;
    margin-bottom: 1svh;
  }
.categorie{
  font-family: montserrat;
  color: white;
  font-size: 1.5svw;
  font-weight: 600;
}
.dateMatch{
  font-family: montserrat;
  color: #747474;
  font-size: 0.9svw;
  font-weight: 400;
}
.heureMatch{
  background-color: #383838;
  width: 5svw;
  height: 4.5svh;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2svw;
}
.heureMatch p{
  font-family: montserrat;
  color: white;
  font-size: 1.3svw;
  font-weight: 600;
}
.barreMatch{
  background-color: #383838;
  height: 4.5svh;
  width: 0.1svw;
}
.equipeMatch{
  display: flex;
  width: 30svw;
  height: 4.5svh;
  justify-content: space-around;
  align-items: center;
}
.equipe1{
  font-family: montserrat;
  color: white;
  font-weight: 600;
  font-size: 1svw;
}
.logoequipe1{
  width: 1.8svw;
}
.versus{
  background-color: #383838;
  width: 2.8svw;
  height: 2.5svh;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2svw;
}
.versus p{
  font-family: montserrat;
  color: white;
  font-weight: 700;
  font-size: 0.7svw;
}
.logoequipe2{
  width: 3svw;
}
.equipe2{
  font-family: montserrat;
  color: white;
  font-weight: 600;
  font-size: 1svw;
  text-align: center;
  width: 6svw;
}

.containerallmatchprecedent{
  width: 100svw;
  display: none;
  justify-content: center;
  padding-bottom: 6svh;

}
.matchPrecedent{
  width: 64.5svw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.matchprec{
  width: 49.5%;
  display: flex;
  height: 9svh;
  justify-content: space-around;
  background-color: #0b0b0b;
  border:solid 2px #8F8F8F;
  align-items: center;
  margin-bottom: 1svh;
}
.equipeMatchprec{
  display: flex;
  width: 90%;
  height: 4.5svh;
  justify-content: space-around;
  align-items: center;
}
.equipe1precedent{
  font-family: montserrat;
  color: white;
  font-weight: 600;
  font-size: 1svw;
}
.logoequipe1precedent{
  width: 1.8svw;
}
.score{
  background-color: #383838;
  width: 2.8svw;
  height: 2.5svh;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2svw;
}
.score p{
  font-family: montserrat;
  color: white;
  font-weight: 700;
  font-size: 0.7svw;
}
.logoequipe2precedent{
  width: 3svw;
}
.equipe2precedent{
  font-family: montserrat;
  color: white;
  font-weight: 600;
  font-size: 1svw;
  text-align: center;
  width: 6svw;
}
.win{
  color: white;
}
.loose{
  color: #575757;
}

    /* /////////ECOLE/////////////////////////////////////// */
    .containerHeaderEcole{
      height: 67.7svh;
      width: 100svw;
      position: relative;
      background-image: url(../image/headerEcole.png);
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
  }
    .containerHeaderNews{
      height: 67.7svh;
      width: 100svw;
      position: relative;
      background-image: url(../image/headernews.png);
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .containerEcole1{
    width: 100svw;
    display: flex;
    justify-content: center;
    padding: 6svh 0;
  }
  .containerEcole1 img{
    width: 20.31svw;
    margin-right: 4svw;
  }
  .ecole1parag{
    display: flex;
    width: 64.5svw;
    justify-content: space-between;
  }
  .ecole1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
.ecole1 h2{
  font-family: montserrat;
  color: #0b0b0b;
  font-size: 1.5svw;
  font-weight: 700;
  text-transform: uppercase;
}
.ligneEcole{
  display: flex;
  justify-content: space-between;
  width: 28.3svw;
  height: 0.3svh;
  margin-bottom: 2svh;
}
.ligneEcole1{
  background-color: #0b0b0b;
  border-radius: 50svw;
  width: 7.3svw;
}
.ligneEcole2{
  background-color: #0b0b0b;
  border-radius: 50svw;
  width:20svw;
}
.ecole1 p{
  font-family: montserrat;
  color: #0b0b0b;
  font-size: 1.1svw;
  font-weight: 500;
}
.containerpointFort{
  width: 100svw;
  height: 50svh;
  background-color: #0b0b0b;
  background-image: url(../image/backpointfort.png);
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pointfort{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pointfort img{
  margin-bottom: 2svh;
}
.imgEncadrement{
  width: 10.46svw;
}
.imgPeda{
  width: 6.09svw;
}
.imgValeurs{
  width: 11.01svw;
}
.titrePointFort{
  font-family: montserrat;
  color: white;
  font-weight: 600;
  font-size: 1.5svw;
  text-transform: uppercase;
}
.textePointFort{
  font-family: montserrat;
  color: white;
  font-weight: 400;
  font-size: 1svw;
  text-align: center;
}
.pointmilieu{
  margin: 0 3.8svw;
}
.containerEcole2{
  width: 100svw;
  display: flex;
  justify-content: center;
  padding: 6svh 0 3svh 0;
}
.imgjeune2{
  width: 20.31svw;
  margin-left: 4svw;
}

.ligneEcole21{
  display: flex;
  justify-content: space-between;
  width: 25.2svw;
  height: 0.3svh;
  margin-bottom: 2svh;
}
.ligneEcole22{
  background-color: #0b0b0b;
  border-radius: 50svw;
  width:18svw;
}
.ligneEcole23{
  background-color: #0b0b0b;
  border-radius: 50svw;
  width:6.2svw;
}
.texteecole2{
  margin-bottom: 2svh;
}
.btnEcole{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20svw;
  height: 4svh;
  background-color: #0b0b0b;
  border-radius: 50svw;
  cursor: pointer;
}
.btnEcole p{
font-family: montserrat;
font-size: 0.9svw;
margin-right: 0.5svw;
color: white;
font-weight: 400;
}
.btnEcole img{
width: 0.7svw;
}
.containerCarousel{
  width: 100svw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 8svh;
}
.containerCarousel h2{
font-family: montserrat;
color: #0b0b0b;
font-size: 1.5svw;
}
.ligneEcole5{
  display: flex;
  justify-content: space-between;
  width: 17svw;
  height: 0.3svh;
  margin-bottom: 2svh;
}
.ligneEcole6{
  background-color: #0b0b0b;
  border-radius: 50svw;
  width:4svw;
}
.ligneEcole7{
  background-color: #0b0b0b;
  border-radius: 50svw;
  width:12svw;
}
/* .carousel-container {
  width: 46.145svw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  margin-bottom: 2svh;
}

.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.carousel img {
  width: 13.28svw;
  filter: blur(2px);
  transition: all 0.3s ease;
  opacity: 1;
}

.carousel img.active {
  width: 15.52svw;
  filter: none;
  opacity: 1;
} */

.carousel-wrapper {
  width: 46.145svw;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 2svh;
}

.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  align-items: center;
  justify-content: space-around;
}

.carousel img {
  width: 13.28svw;
  flex-shrink: 0;
  filter: blur(2px);
  transition: all 0.3s ease;
}

.carousel img.active {
  width: 15.52svw;
  filter: none;
}


.containerbouton{
  width: 10svw;
  height: 4svh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.containerbouton p{
font-family: montserrat;
font-size: 0.7svw ;
color: #0b0b0b;
}
.Arrowleft{
  width: 4svh;
  height: 4svh;
  background-color: #0b0b0b;
  cursor: pointer;
  display: flex;
justify-content: center;
align-items: center;
}
.Arrowleft img{
  width: 1svh;
}
.ArrowRight{
  width: 4svh;
  height: 4svh;
  background-color: #0b0b0b;
  cursor: pointer;
  display: flex;
justify-content: center;
align-items: center;
}
.ArrowRight img{
  width: 1svh;
  transform: rotate(180deg);
}


/* ../////////////////////test loader */

.main-fader {
  width: 100svw;
  height: 100svh;
  position: absolute;
  background-color: #0b0b0b;
  top: 0;
  left: 0;
  display: block;
  transition: all 0.5s;
}

.main-fader .loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s;
}

.main-fader .loader svg {
  width: 20svh;
  display: block;
  margin: 0 auto;
}

.main-fader .loader svg path {
  animation-duration: 1s;
  animation-name: pulse;
  animation-iteration-count: infinite;
  color: #fff;
}

.main-fader .loader svg .path-0 { animation-delay: -0.125s; }
.main-fader .loader svg .path-1 { animation-delay: -0.25s; }
.main-fader .loader svg .path-2 { animation-delay: -0.375s; }
.main-fader .loader svg .path-3 { animation-delay: -0.5s; }
.main-fader .loader svg .path-4 { animation-delay: -0.625s; }
.main-fader .loader svg .path-5 { animation-delay: -0.75s; }
.main-fader .loader svg .path-6 { animation-delay: -0.875s; }
.main-fader .loader svg .path-7 { animation-delay: -1s; }

@keyframes pulse {
  0%   { opacity: 0.1; }
  30%  { opacity: 1; }
  100% { opacity: 0.1; }
}

.loaderLogo{
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100svw;
  height: 100svh;
  flex-direction: column;
  transition: all 0.5s;
  opacity: 0;
}
.loaderLogo img{
width: 8svw;
margin-bottom: 2svh;
}
.textLoader{
font-family: montserrat;
color: white;
font-size: 1.5svw;
height: 3.5svh;
}
.spanLoader{
font-weight: 700;
}

/* ////////////////NEWS///////////////////// */
.containerNews{
  width: 100svw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6svh 0;
}
.news{
  width: 67svw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.news1{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20.83svw;
  border: solid 1px #BCBCBC;
}
.news1 img{
width: 100%;
}
.containerTextNews{
  width: 90%;
  padding: 1svh 0 2svh 0;
}
.titreNews{
  font-family: montserrat;
  font-weight: 700;
  color: #0b0b0b;
  font-size: 1.1svw;
  margin-bottom: 1svh;
}
.debutArticle{
  font-family: montserrat;
  color: #0b0b0b;
  font-size: 0.9svw;
  font-weight: 400;
}
.voirNews{
  width: 19.33svw;
  height: 5svh;
  background-color: #0b0b0b;
  display: flex;
  justify-content: center;
  align-items: center;
 margin-bottom: 0.5svw;
 cursor: pointer;
}
.voirNews p{
  font-family: montserrat;
  color: white;
  font-size: 0.9svw;
  font-weight: 400;
}
.newsMargin{
  margin-bottom: 4svh;
}