html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body{
  background-color: var(--rouge);
}
img{
  object-fit: cover;
}
/* STYLE DE LA BARRE DE NAVIGUATION */


.nav-bar-fixed{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
}
.nav-bar-fixed nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0px;
}
.nav-bar-fixed nav .btn-wrapper button{
  color: var(--noir);
}
.nav-bar-fixed nav .logo-wrapper img{
  width: 215px;
  height: 30px;
  object-fit: cover;
}
.nav-bar-fixed nav .hamburger{
  width: 3.75rem;
  height: 3.75rem;
  padding: 10px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--blanc);
  cursor: pointer;
}
.nav-bar-fixed nav .hamburger .line{
  width: 100%;
  height: 2px;
  margin: 2px 0px;
  background-color: var(--noir);
}
.nav-bar-fixed nav .btn-wrapper button{
  cursor: pointer;
}
@media screen and (max-width: 992px){
  .nav-bar-fixed nav .btn-wrapper{
    display: none;
  }
}
@media screen and (max-width: 481px){
  .nav-bar-fixed nav .logo-wrapper img{
    width: 185px;
    height: 25px;
  }
}
@media screen and (max-width: 350px){
  .nav-bar-fixed nav .logo-wrapper img{
    width: 145px;
    height: 20px;
  }
}
@media screen and (max-width: 250px){
  .nav-bar-fixed nav .logo-wrapper{
    display: none;
  }
}


.nav-menu-wrapper{
  position: fixed;
  top: 0;
  left: -100%;
  z-index: 999;
  background: var(--blanc);
  padding: var(--margin-top-bottom);
  height: 100vh;
  width: 40%;
  border-radius: 0 var(--border-radius) 0  0;
}
.nav-menu-wrapper .nav-menu{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  color: var(--noir);
}
.nav-menu-wrapper .nav-menu .en-tete{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-menu-wrapper .nav-menu .en-tete .logo-wrapper img{
  width: 157px;
  height: 22px;
}
.nav-menu-wrapper .nav-menu .en-tete .close{
  cursor: pointer;
}
.nav-menu-wrapper .nav-menu .en-tete .close .line{
  width: 40px;
  height: 2px;
  margin: 5px 0;
  background-color: var(--noir);
}
.nav-menu-wrapper .nav-menu .en-tete .panier-icon{
  cursor: pointer;
  position: relative;
}
.nav-menu-wrapper .nav-menu .en-tete .panier-icon .nb-panier-wrapper{
  position: absolute;
  top: 100%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rouge);
  color: var(--blanc);
  display: flex;
  font-size: var(--p);
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 350px){
  .nav-menu-wrapper .nav-menu .en-tete .panier-icon .nb-panier-wrapper{
    width: 20px;
    height: 20px;
  }
}
.nav-menu-wrapper .nav-menu .en-tete .panier-icon img{
  width: 28px;
  height: 28px;
}
.nav-menu-wrapper .nav-menu .links-wrapper{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-menu-wrapper .nav-menu .links-wrapper ul li{
  text-align: center;
  font-size: var(--menu-li);
  margin: var(--margin-top-bottom) 0;
  overflow: hidden;
  cursor: pointer;
}
.nav-menu-wrapper .nav-menu .links-wrapper ul li span{
  display: inline-flex;
}
.nav-menu-wrapper .nav-menu .pied{
  text-align: center;
  width: 100%;
}
.nav-menu-wrapper .nav-menu .pied p{
  margin-bottom: var(--margin-top-bottom);
  cursor: pointer;
}
.nav-menu-wrapper .nav-menu .pied button{
  background-color: var(--noir);
  color: var(--blanc);
  width: 90%;
  cursor: pointer;
}

@media screen and (max-width: 992px){
  .nav-menu-wrapper{
    width: 100%;
    border-radius: 0 0 0  0;
  }
  .nav-menu-wrapper .nav-menu .pied button{
    width: 50%;
  }
}

@media screen and (max-width: 481px){
  .nav-menu-wrapper .nav-menu .pied button{
    width: 100%;
  }
}

@media screen and (max-width: 350px){
  .nav-menu-wrapper .nav-menu .en-tete .logo-wrapper img{
    width: 100px;
    height: 14px;
  }
  .nav-menu-wrapper .nav-menu .en-tete .panier-icon img{
    width: 20px;
    height: 20px;
  }
}
/* STYLE DE LA BARRE DE NAVIGUATION */

/* Alerte ajout du panier */

.custom-alert-wrapper{
  z-index: 1001;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
  padding: var(--margin-top-bottom);
  background-color: var(--blanc);
  color: var(--noir);
}
.custom-alert-wrapper.show{
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-alert-wrapper .consulter-panier-wrapper{
  margin-left: var(--margin-top-bottom);
}
.custom-alert-wrapper .consulter-panier-wrapper button{
  background-color: var(--rouge);
  color: var(--blanc);
  cursor: pointer;
}
.custom-alert-wrapper .close-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 50%;
  background-color: var(--rouge);
  margin-left: var(--margin-section);
  cursor: pointer;
}

@media screen and (max-width: 768px){
  .custom-alert-wrapper.show{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .custom-alert-wrapper div{
    margin-bottom: var(--margin-top-bottom);
  }
  .custom-alert-wrapper .consulter-panier-wrapper{
    margin-left: 0;
    margin-top: var(--margin-top-bottom);
  }
  .custom-alert-wrapper .close-wrapper{
    margin-left: 0;
  }
}
/* Alerte ajout du panier */


/* Hero Section */
.hero-section{
  min-height: 100vh;
  color: var(--blanc);
  overflow: hidden;
}
.hero-section .abonnement-wrapper-row{
  padding-top: 9.5rem;
  justify-content: space-between;
  align-items: center;
}
.hero-section .abonnement-wrapper-row .left-wrapper{
  height: 30rem;
}
.hero-section .abonnement-wrapper-row .left-wrapper .img-wrapper{
  overflow: hidden;
  height: 100%;
  width: 100%;
  border-radius: var(--border-radius);
}
.hero-section .abonnement-wrapper-row .left-wrapper .img-wrapper img{
  height: 100%;
  width: 100%;
}
.hero-section .abonnement-wrapper-row .right-wrapper div{
  margin-bottom: var(--margin-top-bottom);
}
.hero-section .abonnement-wrapper-row .right-wrapper .titre-wrapper h1{
  font-size: var(--h3);
}
.hero-section .abonnement-wrapper-row .right-wrapper .prix-wrapper p{
  font-size: var(--h4);
}
.hero-section .abonnement-wrapper-row .right-wrapper .desc-wrapper{
  margin-bottom: var(--m-padding);
}
.hero-section .abonnement-wrapper-row .right-wrapper .btn-wrapper{
  cursor: pointer;
}
.hero-section .abonnement-wrapper-row .right-wrapper .btn-wrapper button{
  width: 25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.hero-section .abonnement-wrapper-row .right-wrapper .btn-wrapper button .circle-arrow{
  background-color: var(--rouge);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 5px;
  margin: 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-section .abonnement-wrapper-row .right-wrapper .btn-wrapper-1 button{
  color: var(--noir);
}
.hero-section .abonnement-wrapper-row .right-wrapper .btn-wrapper-2 button{
  background-color: var(--noir);
  color: var(--blanc);
}
.hero-section .abonnement-wrapper-row .right-wrapper .btn-wrapper-2 button .circle-arrow{
  background-color: var(--blanc);
}
.hero-section .logo-anime-wrapper .img-wrapper{
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  margin-top: var(--margin-section);
  opacity: 0.75;
}
.hero-section .logo-anime-wrapper img{
  width: 215px;
  height: 30px;
  object-fit: fill;
  padding-right: var(--m-padding);
  animation: logoSlide  5000ms linear infinite;
}

@keyframes logoSlide{
  0%{
    transform: translate(0);
  }
  100%{
    transform: translate(-100%);
  }
}

@media screen and (max-width: 992px){
  .hero-section{
    height: auto;
    padding-bottom: var(--margin-section);
  }
  .hero-section .abonnement-wrapper-row{
    padding-top: 8rem;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .hero-section .abonnement-wrapper-row .left-wrapper{
    margin-bottom: var(--margin-top-bottom);
  }
  .hero-section .abonnement-wrapper-row .right-wrapper .btn-wrapper button{
    width: 32rem;
  }
}
@media screen and (max-width: 481px){
  .hero-section{
    height: auto;
    padding-bottom: var(--m-padding);
  }
  .hero-section .abonnement-wrapper-row .right-wrapper .btn-wrapper button{
    width: 20rem;
  }
  .hero-section .abonnement-wrapper-row .left-wrapper .img-wrapper{
    height: 25rem;
  }
}
@media screen and (max-width: 350px){
  .hero-section .abonnement-wrapper-row .right-wrapper .btn-wrapper button .circle-arrow{
    display: none;
  }
  .hero-section .abonnement-wrapper-row .right-wrapper .btn-wrapper button{
    width: auto;
  }
}

/* Hero Section */


/* Fonctionnalité setion */

.fonctionnalite-section{
  background-color: var(--blanc);
  padding-top: var(--margin-section);
  color: var(--noir);
}
.fonctionnalite-section .text-content-row{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: var(--margin-section);
}
.fonctionnalite-section .fonctionnalite-wrapper-row{
  height: auto;
}
.fonctionnalite-section .rectangle-col{
  margin-bottom: var(--margin-top-bottom);
}
.fonctionnalite-section .rectangle-col .rectangle{
  width: 100%;
  height: 100%;
  background-color: var(--noir);
  color: var(--blanc);
  padding: var(--margin-top-bottom);
  border-radius: var(--border-radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fonctionnalite-section .rectangle-col .rectangle .left-wrapper .titre-wrapper{
  margin-bottom: var(--margin-top-bottom);
}
.fonctionnalite-section .rectangle-col .rectangle .right-wrapper .img-wrapper{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.fonctionnalite-section .rectangle-col .rectangle .right-wrapper .img-wrapper img{
  height: 28rem;
  width: 100%;
  border-radius: var(--border-radius);
}
@media screen and (max-width: 1024px){
  .fonctionnalite-section .rectangle-col{
    clip-path: inset(0% 0% 0% 0%);
  }
}
@media screen and (max-width: 992px){
  .fonctionnalite-section .rectangle-col .rectangle{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
  }
  .fonctionnalite-section .rectangle-col .rectangle .left-wrapper{
    margin-bottom: var(--margin-top-bottom);
  }
  .fonctionnalite-section .rectangle-col{
    margin-bottom: var(--margin-top-bottom);
  }
}
@media screen and (max-width: 481px){
  .fonctionnalite-section .rectangle-col .rectangle .right-wrapper .img-wrapper img{
    height: 22rem;
  }
  .fonctionnalite-section .rectangle-col .rectangle .right-wrapper{
    display: none;
  }
}
@media screen and (max-width: 350px){
  .fonctionnalite-section .rectangle-col .rectangle .right-wrapper .img-wrapper img{
    height: 18rem;
  }
}


/* Fonctionnalité setion */


/* Espace client */

.espace-client-section{
  background-color: var(--blanc);
  padding: var(--margin-section) 0;
  color: var(--noir);
}
.espace-client-section .text-content{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}
.espace-client-section .text-content div{
  margin-bottom: var(--margin-top-bottom);
}
.espace-client-section .text-content .btn-wrapper button{
  background-color: var(--noir);
  color: var(--blanc);
}

/* Espace client */


/* FAQ Section */

.faq-section{
background-color: var(--rouge);
padding-bottom: var(--margin-section);
padding-top: var(--m-padding);
color: var(--blanc);
}
.faq-section .text-content{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.faq-section .text-content .titre-wrapper{
margin-bottom: var(--margin-section);
}
.faq-section .questions-wrapper-row{
padding-bottom: var(--m-padding);
}
.faq-section .questions-wrapper-row .questions-wrapper-col .question{
background-color: var(--blanc);
padding: var(--margin-top-bottom);
margin-bottom: var(--margin-top-bottom);
border-radius: var(--border-radius);
color: var(--noir);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
height: 25rem;
}
.faq-section .questions-wrapper-row .questions-wrapper-col .question div{
margin-bottom: var(--margin-top-bottom);
}

/* FAQ Section */

/* footer section */

footer{
background-color: var(--rouge);
color: var(--blanc);
}
footer .page-links-row{
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--margin-top-bottom);
}
footer .page-links-row .page-links-col{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
footer .page-links-row .page-links-col .icon-wrapper .calendly{
width: 25px;
height: 25px;
}
footer .page-links-row .page-links-col .icon-wrapper .instagram{
width: 25px;
height: 25px;
}
footer .page-links-row .legal-links-col{
display: flex;
justify-content: flex-end;
align-items: flex-end;
}

footer .logo-wrapper .img-wrapper img{
width: 100%;
}

@media screen and (max-width: 768px){
footer .page-links-row .page-links-col{
  margin-bottom: var(--margin-top-bottom);
}
footer .page-links-row .legal-links-col{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
}
@media screen and (max-width: 481px){
footer .page-links-row .page-links-col{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-bottom: 0;
}
footer .page-links-row .page-links-col div{
margin-bottom: var(--margin-top-bottom);
}
}

/* footer section */