/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/
@font-face {
  font-family: 'Uniser';
  src: url('/public/fonts/uniser/Uniser-Regular.woff2') format('woff2'),
       url('/public/fonts/uniser/Uniser-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* améliore le rendu et le SEO */
}


@import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
html{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
h1,h2,h3,h4{
  font-weight: 500;
}
/* Définition de l'animation de rotation */
@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* Définition de l'animation de rotation */
@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 1. Conteneur du Lien (Positionnement Fixe et Taille de Base) */
.logo-link {
    /* Positionnement Fixe */
    position: fixed;
    right: 1vw;
    bottom: 1vw;
    z-index: 22;
    z-index: 5555;
    cursor: pointer;
    text-decoration: none;

    /* Taille réactive de l'ensemble du logo */
    width: 12vw; 
    height: 12vw;
    
    /* Conteneur principal pour centrer les cercles */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. Conteneur Intermédiaire (S'assure que les cercles restent dans le lien) */
.logo-lpg-container {
   position: relative; /* CRITIQUE : Permet le positionnement absolu des cercles */
   width: 100%;
   height: 100%;
}

/* 3. Styles de base pour les deux parties du logo */
.circle-1, 
.circle-2 {
    /* Positionnement absolu par rapport au .logo-lpg-container */
    position: absolute;
    
    /* Centrage initial parfait ET définition du point de rotation */
    transform-origin: center center;
}

/* S'assurer que les images remplissent leur conteneur */
.circle-1 img, 
.circle-2 img {
    display: block;
    width: 100%;
    height: 100%;
}

/* 4. Cercle Intérieur (Fixe) */
.circle-1 {
    /* Taille réactive par rapport au Viewport */
    width: 10vw; 
    height: 10vw;
    z-index: 2; 
}

/* 5. Cercle Extérieur (Animé et plus grand) */
.circle-2 {
    /* Taille réactive (Légèrement plus grande que le cercle 1, par exemple 12vw) */
    width: 10vw; 
    height: 10vw; /* Ajusté pour être réactif */
    z-index: 1; 
    
    /* Animation de rotation */
    /* Note : La fonction translate(-50%, -50%) doit rester sur cet élément 
       pour le centrage, même si l'animation utilise rotate(). 
       Le navigateur gère les transforms multiples. */
    animation: rotateCircle 15s linear infinite; 
}

/* Suppression de l'ajustement superflu */
/* La combinaison de top/left/translate sur .circle-2 et .circle-2 img n'est plus nécessaire.
   Le positionnement sur .circle-2 est suffisant. */
/* .circle-2 img { ... } */
small{
  font-size: 0.9vw;
  color: #c94597;
  margin: auto;
  margin-left: 0;
  width: max-content;
  margin-right: 0;
  margin-bottom: 0;
}
.uniserTitle{
  font-family: 'Uniser', sans-serif;
}
.close-lpg{
  z-index: 222;
position: absolute;
}
.samplePicture{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 1vw;
}
#kineBlock{ 
  margin-top: 14vw;
}
#teamObjOsteopathe{
  margin-bottom: 14vw;
}
#massotherapeuteLi{
 min-height: 62vw;  
}
.samplePicture img{
  object-position: top;
  border-radius: 1vw;
}
#synlabSection{
  display: flex;
  text-align: center; 
  flex-direction: column;
  margin-bottom: 8vw;
}
#synlabSection h4{
  width: fit-content;
  margin: auto;
  background-color: #c94597;
  padding: 2vw;
  border-radius: 2vw;
  color: #fff;
}
#synlabSection h2{
width: 95%;
}
.logoSynlab{
  margin: auto;
  width: 28vw;
  margin-bottom: 3vw;
}
.medicBlock{
  display: flex;
  flex-direction: column;
}
.samplePicture,.sampleInfo{
 flex:0 0 46.9vw;
 display: flex;
}
.sampleInfoCenter{
  margin:auto;
}
#teamContainer h1{
    text-align: center;
    width: max-content;
    position: relative;
    margin: auto;
    margin-bottom: 2vw;
}
#teamContainer h1:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1vw;
    bottom: -0.25vw;
    color: ;
    left: 0;
    background-color: #c945978f;
    z-index: -1;
}
#teamObjMedic,.sampleLi{
  display: flex;
  width: 100%;
}
#teamObjMedic{
  height: 87vw;
}
#nom{
  margin-top: 3vw;
}
.sampleInfo h3{
  text-align: center;
}
.custom-button {
  cursor: pointer;
  background-color: #c94597;
  border: none;
  border-radius: 1vw; /* Ajustez ce nombre selon le niveau d'arrondi souhaité */
  margin-top: 2vw; /* Ajustez selon vos besoins */
  transition: 0.3s;
}
.custom-button:hover{
 background-color: #8b2f68;
}
#iframeContainer{
  background-color: #ffffffcf;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 4444;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row-reverse;
}
#closeIframe{
  position: absolute;
  right: 4vw;
  top: 1vw;
  padding-right: 1.1vw;
  padding-left: 1.1vw;
  border-radius: 55vw;
  cursor: pointer;
  font-size: 4vw;
  transition: 0.3s;
  background-color: #c94597;
}
#closeIframe:hover{
  background-color: #96306f;
}
#closeIframe p{
  margin:0;
  font-size: 3vw;
  color:#ffffff;
}
iframe{
  width: 100%;
  margin:auto;
}
body{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #f8f8f8;
}
header{
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
  z-index:464;
  color:#272727;

}
p,h1,h2,h3,h4,label{
font-family: 'Manrope', sans-serif;
}
a{
  color: unset;
  text-decoration: unset;
}
.webagdispo_frame{
  color: #c94597;
}


#headerMain{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*border-bottom: solid #00adf9 0.2vw;*/

}
#headerSub{
  background-color: #c94597;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #ffffff;
    padding-top: 0vw;
    margin-top: 1vw;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    margin: auto;
    margin-top: 1vw;
    border-radius: 0.4vw;
    margin-right: 3vw;
}
#headerUl{
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 4vw;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
  width: -webkit-fill-available;
}
#headerLogo{
  height: 11vw;
}
#headerLogo img{
   width: 100%;
    height: 100%;
    object-fit: contain !important;
}
img{
  width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
.teamImgCont img{
  object-position: top;
}
.lpg-container{
  margin: auto; 
  cursor: pointer;
  width: 20vw;
}
.mini-renata-badge{
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-top: 7vw;
}
.renata-logo-bloc{
  width: 20vw;
  margin: auto;
}
#massotherapeuteLi{
  justify-content: space-around;
}
.mini-renata-info{
    display: flex;
    justify-content: center;
    gap: 1vw;
}
#joinUs{
    width: 41vw;
    position: absolute;
    display: flex;
    bottom: 2vw;
    z-index: 445;
    height: 9vw;
}
#joinUs.fixed {
    position: fixed;
    bottom: 0;
}
#joinUs.absolute {
    position: absolute;
    bottom: 2vw;
}
#joinUsCenter{
  background-color: #c94597;
    border-radius: 1vw;
    display: flex;
    width: 100%;
    height: 15vw;
    margin: auto;
    margin-bottom: 0;
    cursor: pointer;
    box-shadow: 0 0 2vw rgba(0, 0, 0, 0.5);
    color: #ffffff;
    transition: 0.3s;
}
#joinUsCenter:hover{
  background-color: #8b2163;
  box-shadow: 0 0 2vw rgba(0, 0, 0, 0.8);
}
#joinUsCenter span{
position: absolute;
width: 100%;
height: 100%;
bottom: 0vw;
display: flex;
}
#joinUsCenter span a{
display: flex;
margin:auto;

}
#joinUsCenter span p{
  margin: auto;

width: 90%;

}

#joinUsCenter h3{
 margin: auto;
 text-align: center;
}
#postulateForm{
  z-index: 445;
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #0000008a;
}
#postulateFormCenter{
  margin: auto;
  margin-top: 5vw;
}
#postulateFormCenter h1{
  margin: auto;
  width: max-content;
  text-align: center;
  color: #ffffff;
}
#postulateFormCenter h1:after{
  display: inline-block;
  content: '';
  position: relative;
  top: -2.7vw;
  width: 100%;
  height: 1vw;
  bottom: 0.2vw;
  left: 0;
  background-color: #c94597;
  z-index: -1;
}

 #formInside{
  display: flex;
  justify-content: space-between;
}
#formInsideLeft,#formInsideLeft{
  display: flex;
  flex-direction: column;
}
#postulateFormCenter form{
  display: flex;
  flex-direction: column;
  width: 98%;
  padding: 1vw;
}
#closePostulate{
  display: flex;
}
#closePostulate span{
  margin: auto;
  margin-right: 0;
  color: #ffffff;
  background-color: #c94597;
    cursor: pointer;
  border-radius: 0.5vw;
  transition: 0.3s;
}
#closePostulate span:hover{
  background-color: #8b2163;
  display: flex;
}
#closePostulate span p{
  margin: 0;
  padding: 1vw;
}

ul{
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  margin: auto;
}
h1{
  font-size: 2.6vw;
}
h2{
  font-size: 2.2vw;
}
h3{
  font-size: 1.8vw;
}
input{
  font-size: 1vw;
}
h4{
  font-size: 1.5vw;
}
p{
  font-size: 1.25vw;
}
label{
  font-size: 1.1vw;
}
input[type=number]{
  width: max-content;
  font-size: 1vw;
  border: 0;
  width: max-content;
  border-bottom: solid 0.2vw #c94597;
}
input[type=file]{
  width: max-content;
  font-size: 1vw;
}
#lettreMotivation{
  height: 85%;
  width: 44vw;
}
#introBanner{
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    background-color: #c94597;
    flex-direction: column;
}
#backgroundStart{
 width: 100%;
    position: fixed;
    height: 100%;
    background-color: #c94597;
    z-index: 445; 
  opacity: 1;
  transition: opacity 0.7s ease-in-out;  
}
#backgroundStart.fade-out {
  opacity: 0;
}

#submitForm{
  width: max-content;
  margin: auto;
}
#rdvBttn{
z-index: 0;
    background-color: #c94597;
    width: max-content;
    margin: auto;
    cursor: pointer;
    margin-top: 53vw;
    display: flex;
    margin-top: 0;
    color: #ffffff;
    padding-left: 1vw;
    padding-right: 1vw;
    border-radius: 0.3vw;
    transition: 0.3s;
}
#rdvBttn:hover{
 background-color: #862f65;
}
#rdvBttn h2{
    z-index: 444;
    width: max-content;
    margin: auto;
    margin: 0.3vw;
    color: #ffffff;
}
#bannerImg{
  position: absolute;
  opacity: 1;
}
#bannerLogo img{
  object-fit: fill;
}
#bannerLogo{
    margin: auto;
    z-index: 446;
    height: 41vw;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    -webkit-transition-delay: 0.3s;
         -o-transition-delay: 0.3s;
            transition-delay: 0.3s;
    max-height: 64vh;
    margin-bottom: 0;
}
#bannerLogo.visible {
  opacity: 1;
}
.blackFilter{
    -webkit-filter: brightness(50%);
            filter: brightness(50%);
}

.headerLi {
opacity: 1;
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    margin-right: 3vw;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: #00adf9;
    padding-left: 1vw;
    border-radius: 0.7vw;
    padding-right: 1vw;
}
.headerLi h3{
  margin: auto;
  margin-top: 0.3vw;
  margin-bottom: 0.3vw;
}

.headerLi:hover {
    opacity: 1; /* Au survol, revenez à l'opacité complète */
    background-color: #2B35AF; /* Changez la couleur du texte en blanc au survol */
}
#centre_pluridisciplinaire{  
  display: -webkit-box;  
  position: relative;
  display: -ms-flexbox;  
  display: flex;
  min-height: 44vw;
}
.txtCont{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.txtCenter{
  width: 83%;
  margin: auto;
}
.txtCenter h1:not(.kineInfos h1){
position: relative;
width: 100%;
z-index: 44;
}
.txtCenter h1:after{
      content: '';
    position: absolute;
    width: 100%;
    height: 1vw;
    bottom: 0.2vw;
    left: 0;
    background-color: #c94597;
    z-index: -1;
}
.vertical-bar {
    position: fixed;
    right: 2vw;
    top: 10vw;
    z-index: 444;
    background-color: #00000075;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border-radius: 2.1vw;
    padding: 0.5vw;
}
/* Styles pour le menu hamburger */
.menuContainer {
  display: flex;
  position: fixed;
  right: 4vh;
  top: 7vw;
  z-index: 444;
}
.menuContainer h4 {
 margin: auto;
 margin-right: 1vw;
 color: #ffffff;
}
.menu-btn {
    cursor: pointer;
    width: 2vw;
    height: 2vw;
    padding: 1vw;
    background-color: #939393;
    border-radius: 55vw;
    transition: 0.3s;
}
.menu-btn:hover {
  background-color: #c94597;
}
.menu-list{
  flex-direction: column;
  font-family: 'Manrope', sans-serif;
  font-size: 1.3vw;
}
.hamburger {
    width: 2vw;
    height: 0.3vw;
    background-color: #ffffff;
    margin: 0.3vw 0;
    transition: 0.4s;
}
.hamburger.active {
position: absolute;
}
.hamburger.active:nth-child(1) {
margin-top: 10%;
}
.hamburger.active:nth-child(3) {
margin-top: 10%;
}

.menu-btn .hamburger.active:nth-child(1) {
    transform: rotate(-45deg) translate(-1%,-1%);
}

.menu-btn .hamburger.active:nth-child(2) {
    opacity: 0;
}

.menu-btn .hamburger.active:nth-child(3) {
        transform: rotate(45deg) translate(-1%, -1%);
}

.menu-btn .hamburger.active {
    background-color: #fff; /* Changement de couleur du hamburger lorsqu'il est activé */
}


.bannerOP{
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
}

.point {
  width: 1vw;
  height: 1vw;
  background-color: #ccc;
  margin-top: 0.4vw;
  margin-bottom: 0.4vw;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.point:hover {
  background-color: #c94597;
}
.menu{
position: fixed;
    right: 3vw;
    display: none;
    top: 11vw;
    flex-direction: column;
    z-index: 446;
}

.triangle-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 444;
}

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  left: -10vw;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 87px solid #c94597c2;
  background-clip: padding-box; /* Ajout de cette propriété pour éviter l'effet de bord */
}
#headerSub h3{
  margin: 0;
  margin-top: 0.3vw;
  margin-bottom: 0.3vw;
}
#equipe,#infrastructure,#kinesitherapie{
  margin-top: 12vw;
}
.activityCont{
  opacity: 0;
position: absolute;
    z-index: 444;
    width: 60vw;
    height: 60vw;

    
right: -26.7vw;
    top: 15vw;
    transform: translate(100%);

}
.activityCont h2{
  color:#ffffff;
}
#headerSub span{
margin-left: 2vw;
margin-right: 2vw;
}
.fixed{
  position: fixed
}
.careBoxHead{
  height: 40vw;
}
.kineInfos{
  height: 0;
  width: 0;
  display: block;
    z-index: -444;
    position: relative;  
}
.kineInfos *{
  height: 0; 
  width: 0;
  font-size: 0;
}
#headerLogo{
  margin: auto;
  margin-left: 2vw;
  z-index: 445; 
  cursor: pointer;
}
#pluriTexts{

  color: #ffffff;
  padding-top: 4vw;
  width: 50vw;
  padding-bottom: 14vw;
  background-color: #373737;
}
#careObj{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.careLi{
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33%;
            flex: 0 0 33.33%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0.3vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

}
.careLi h3,.careLi h4{
margin: auto;

}
.careLi h4{
 -webkit-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;
 cursor: pointer;
}
.careLi h4:hover{
color: #c94597;
font-weight: 800;
}
.careImgBox{
  display: -webkit-box;
  display: -ms-flexbox;
  height: 25vw;
  border-radius: 1vw;
  display: flex;
  overflow: hidden;
  cursor: pointer;
}
#careText{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#soinsContainer{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#soinsContainer h2{
  width: 100%;
}
/* Animations pour les triangles */
.menu-item{
  display: flex;
  flex-direction: row;
  margin-top:1vw;
}
.navTag{
  background-color:#373737b3; 
  color: #ffffff;
  border-radius: 0.7vw;
    top: 165.825px;
    right: 5vw;
    padding: 0.4vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    margin-top: -0.4vw;
    margin-left: 1vw;
    transition: 0.3s;
}
.navTag:hover{
  background-color: #c94597;
}
.careBox{
position: fixed;
    width: 100vw;
    z-index: 448;
    overflow-y: scroll;
    height: 100vh;
    background-color: #ffffff;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.navTag h4{
  margin: 0;
}
        .fade-in {
            opacity: 1;
            visibility: visible;
            animation: fadeIn 1s ease-in-out;
        }
        .fade-out {
            opacity: 0;
            visibility: hidden;
            animation: fadeOut 1s ease-in-out;
        }




.careBoxBody{
  display: -webkit-box;
  padding-bottom: 7vw;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 80vh;
  background-color: #ffffff
}
.careBoxCont{
  width: 90%;
  margin: auto;
margin-top: 0vw;
}
.arrowBlock{
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  width: 5vw;
  display: flex;
  opacity: 0.7;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  padding: 3.5vw;
  transition: 0.3s;
  cursor: pointer;
}
.arrowBlock:hover{
  opacity: 1;
}
/* Ajoutez votre animation fadeInAnimation dans votre fichier CSS */
.fadeInAnimation {
    -webkit-animation: fadeIn 0.5s ease;
            animation: fadeIn 0.5s ease;
}
#teamObjKinesiterapeutes{
    display: flex;
    width: 100%;
    justify-content: space-around;
}
#teamObjKinesiterapeutes .teamLi{
  flex: 0 0 18.9vw;
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.employeDesc{
  width: 0;
  position: absolute;
  height: 0;
  visibility: hidden;
      width: 0;
    height: 0;
}

.sampleTitle:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1vw;
    bottom: -0.25vw;
    color: ;
    left: 0;
    background-color: #c945978f;
    z-index: -1;
}
#teamObj{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.teamLi{
  -webkit-box-flex: 0;
      -ms-flex: 0 0 22.9vw;
          flex: 0 0 22.9vw;
  height: 66vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
#teamPhone{
  margin-top: 2vw;
}
.teamImgCont{
      height: 81vw;
    overflow: hidden;
    border-radius: 1vw;
    cursor :pointer;
        position: relative;
    display: inline-block;
}
.teamInfos{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 12vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.workerBlock{
  margin-bottom: 15vw
}
#teamTitle{
 margin-bottom: 10vw;
  text-align: center;
}
.teamInfos h2{
  font-size: 1.8vw;
}
.teamInfos h3{
  margin:auto;
  margin-bottom: 0;
  font-size: 1.6vw;
}
.sampleTitle{
  position: relative;
}
.sampleTitle:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1vw;
    bottom: -0.25vw;
    left: 0;
    background-color: #c945978f;
    z-index: -1;
}
.teamInfos p{
  margin: 0;
}
#pluriImgs{
  width: 50vw;
}
section h2:not(.actvityCont h2){
  margin: auto;
}
section h2{
  color: #000000;
    position: relative;
  padding:1vw;
  margin-top: 3vw;
  margin-bottom: 3vw;
  width: -webkit-max-content; 
  width: -moz-max-content; 
  width: max-content;
  border-radius: 0.3vw;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #c945976e; /* Couleur bleue semi-transparente */
    opacity: 0; /* L'overlay est initialement transparent */
    pointer-events: none; /* Permet aux événements de souris de passer à travers l'overlay */
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease; /* Animation de l'opacité de 0.3 seconde avec un effet d'atténuation (ease) */
}
.M6-block{
  position: relative;
  display: flex;
  flex-direction: column;
 margin-top: 5vw;
  width: 100vw;
  overflow-y: scroll;
}
.M6-block-vert1 h1,.M6-block-vert1 p{
  text-align: center;
}
.M6-block-vert2{
  display: flex;
  justify-content: space-around;
}

.M6-block-vert-left{
  width: 40vw;
  margin: auto;
}
.M6-block-vert-right{
  width: 40vw;
  margin: auto;
}
.M6-block-vert3{
  margin: auto;
  width: 80vw;
  display: flex;
  flex-direction: column;
}
.M6-block-vert3 p{
 line-height: 4vw;
}
.arrowCont{
      width: -webkit-fill-available;
    height: 6vw;
    display: -webkit-box;
    display: -ms-flexbox;
   margin-top: 8vw;
    display: flex;
    background-color: #ffffff;
}
.teamBoxBody{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-y: scroll;
  flex-wrap: wrap;
  margin-bottom: 14vw;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly; 
}
.teamBoxHead{
    height: 50vw;
    width: 20vw;
    margin-left: 9vw;
}
.teamBoxHead img{
  border-radius:2vw;
}
.lpg-pic-box{
  height: 20vw;
  width: 20vw;
}
.silverMachine{

  margin: auto;
  width: 40vw;
  height: 70vw;
}
.lpg-head h2 {
  position: relative;
  width: 20vw;
}
.lpg-head h2:after {
  content: '';
  position: absolute;
 width: 20vw;
  height: 1vw;
  bottom: -0.25vw;
  color: ;
  left: 0;
  background-color: #c945978f;
  z-index: -1;
}
.lpg-head{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 90vw;
  margin: auto;
margin-top: 4vw;
}
.lpg-section{
  display: flex;
}
.teamBox{
  background-color: #ffffff;
  width: 100%;
    z-index: 448;
    height: 100%;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.teamBoxCont{
      width: 37vw;
}
.teamBoxCont h2{
 position: relative;
 z-index: 3;
}
.teamBoxCont h2:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1vw;
    bottom: -0.25vw;
    color: ;
    left: 0;
    background-color: #c945978f;
    z-index: -1;
}
#locationHead{
  margin-top: 1vw;
}
#locationGallery{
  background-color: #c94597c4;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 449;
  display: flex;
}
#locationImgContainer{
  display: flex;
    margin-top: 1.5vw;
    width: 100%;
    height: 55vw;
}
#locationText{
  margin: auto;
  width: 95vw;
  margin-top:3.5vw;
  color: #ffffff;
}
#locationText p{
  margin: auto;
  text-align: center;
}
#locationClose{
  display: flex;
}
#locationClose span{
  margin: auto;
  margin-right: 7vw;
  width: 4vw;
  height: 4vw;
  display: flex;
  border-radius: 3vw;
  background-color:#ffffffbf;
  transition: 0.3s;
  cursor: pointer;
}
#locationClose span:hover{
 background-color: #ffffff;
}
#locationClose h1{
  margin: auto;
  color: #000000;
}

.thumbnailsLocation{
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: normal;
}
.thumbnailLocation.active {
    border-color: #3498db;
    width: 35vw;
    margin: auto; 
    height: 25vw;
    margin-top: 3vw;
}
.thumbnailLocation img {
border-radius: 3vw;
}

.thumbnailLocation:not(.active) {
    width: 0vw; /* Taille des miniatures inactives */
    height: 0vw; /* Taille des miniatures inactives */
    transition: all 0.3s ease; /* Ajoute une transition pour un effet de lissage */
}

.thumbnailsLocation .thumbnailLocation:not(.active) {
    margin: 0 ; /* Espace entre les miniatures inactives */
}
/******/

.thumbnails {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.thumbnail.active {
    border-color: #3498db;
    width: 50vw;
    height: 30vw;
}

.thumbnail:not(.active) {
    width: 15vw; /* Taille des miniatures inactives */
    height: 15vw; /* Taille des miniatures inactives */
    transition: all 0.3s ease; /* Ajoute une transition pour un effet de lissage */
}

.thumbnails .thumbnail:not(.active) {
    margin: 0 ; /* Espace entre les miniatures inactives */
}

/* Ajoutez d'autres styles au besoin pour les miniatures inactives */

/* Pour centrer les miniatures verticalement */
.gallery-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
    height: 60vh;
    overflow: hidden;
    padding-bottom: 12vw;
    margin: auto;
}
.main-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-image img {
    max-width: 100%;
    max-height: 100%;
}

.teamNavCenter{
  height:-webkit-fill-available;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width:95%;
-webkit-box-pack: inherit;
    -ms-flex-pack: inherit;
        justify-content: inherit;
margin: auto;

}
.teamNavCenter span{
border: solid 0.3vw;
    height: 2vw;
    width: 2vw;
    padding: 1vw;
    border-radius: 3vw;
    display: flex;
    cursor: pointer;
    opacity: 0.7;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.teamNavCenter span:hover{
opacity: 1;
}
#teamNav{
    bottom: 1vw;
    width: 100%;
      height: 6vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: absolute;
}
#contact{
  background-color: #373737;
}
#contactContainer{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#contactContainer label{
  color: #fff;
}
#contactContainer h1{
  padding-bottom: 8vw;
}
#contactContainer form{
  margin: auto;
  padding: 1vw;
  color: white;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#contactContainer h2{
  position: relative;
  color: #ffffff;
  z-index: 44;
  margin-top: 9vw;
}
#contactContainer h1{
 margin: auto;
 color:#ffffff;
}
#contactContainer h2:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1vw;
    bottom: 0.75vw;
    color: ;
    left: 0;
    background-color: #c94597;
    z-index: -1;
}
/* CSS pour les champs de saisie */
label{
  color: #000000;
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    background-color: #ffffff;
    border: none;
    border-bottom: 0.2vw solid #c94597;
    color: #000000;
    padding: 0.5vw;
    -webkit-transition: border-bottom 0.3s ease, -webkit-box-shadow 0.3s ease;
    transition: border-bottom 0.3s ease, -webkit-box-shadow 0.3s ease;
    -o-transition: border-bottom 0.3s ease, box-shadow 0.3s ease;
    transition: border-bottom 0.3s ease, box-shadow 0.3s ease;
    transition: border-bottom 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;
}
textarea {
    border: 0.2vw solid #c94597;
    border-radius: 0.2vw;
    resize: none;
}

/* CSS pour les champs de saisie lorsqu'ils sont en focus */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    border-bottom: 0.3vw solid #8b2163;
    -webkit-box-shadow: 0 0 1vw rgba(55, 55, 55, 0.5);
            box-shadow: 0 0 1vw rgba(55, 55, 55, 0.5);
    outline: none;
}

/* Autres styles de formulaire (à personnaliser selon vos besoins) */
form:not(#registerForm) {
    border-radius: 1vw;
}


input[type="submit"] {
    background-color: #c94597;
    color: white;
    border: none;
    border-radius: 0.3vw;
    padding: 1vw 2vw;
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
    background-color: #8b2163;
}
#contactContainer{
  padding-bottom: 8vw;
}
/* CSS pour le pied de page */
footer {
    background-color: #373737;
    color: white;
    padding: 30px;
    padding-bottom: 19vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}

/* Styles pour la section contact-info */
.contact-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 20px;
    width: 40%;
}

.contact-item {
    margin-bottom: 10px;
}

/* Styles pour la section sitemap */

footer h4{
  color: #c94597;
}
.productUploadForm{
  background-color: #fff;
  margin-top: 3vw;
}

.sitemap ul {
    list-style: none;
    padding: 0;
}

.sitemap ul li {
    margin-bottom: 10px;
}

.sitemap a {
    color: white;
    text-decoration: none;
}

/* Styles pour la section copyright */
.copyright {
    width: 95%;
    text-align: center;
}
#sitemapList{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#sitemapList li{
  cursor: pointer;
}
#sitemapList li p{
  margin-top: 0vw;
  margin-bottom: 0vw;
}
#sitemapList li:hover{
 -webkit-text-decoration: underline #c94597;
         text-decoration: underline #c94597;
}

#copyrightLogo{
  width: 12vw;
  margin: auto;
}
#guardBlock{
  display: flex;
  margin-top: 5vw;
}
#guardBlock p{
  margin: auto;
  text-align: center;
}
.onlineRdv{
  color: #ffffff; 
  cursor: pointer;
  transition: color 0.3s; 
}

.onlineRdv h3{
  font-size: 1.3vw;
  margin-left: 1vw;
  margin-right: 1vw;
}
/*webshop CSS*/
.shopBody{
  background-color: #EFEBE6;
}
#adminDashboardContent{
  display: flex;
  flex-direction: column;

}
#adminProductsContainer{
  display: flex;
  flex-direction: column;
  width: 85%;
  margin: auto;
  margin-bottom: 10vw;
}
.mini-header{
  position: fixed;
  width: 100%;
  justify-content: space-between;
  top: 0;
  flex-direction: column;
  left: 50%;
  transform: translate(-50%);
  display: none;
  border-radius: 2vw;
}
.promo-item{
  display: flex;
  flex-direction: column;
  margin: auto;
}
.promo-code-btn{
  margin-bottom: 2vw;
  border: 0;
  background-color: #c94597;
  color: #fff;
  border-radius: 1vw;
}
#promoBannerContainer{
  display: flex;
  color: #fff;
  background-color: #000000;
  width: 100%;
}
.FadeWrapper{
  display: none;
}
.shopBttn{
  background-color: #fff;
  padding: 1vw;
  border-radius: 1vw;
  left: 2vw;
  z-index: 22222;
  top: 6vw;
  cursor: pointer;
  display: flex;
  position: fixed;
}
.header-icons{
  background-color: #fff;
  display: flex;
  margin: auto;
  justify-content: space-around;
  padding: 1vw;
  border-radius: 1vw;
}
.inputObj{display: flex;}
.header-icons > span{
  width: 1.5vw;
  height: 1.5vw;
  margin: auto;
}
.img_uploadInput{
 width: 2vw;
 height: 2vw;
}
#clientFileCont{
  display: flex;
}
.productUnit{
  display: flex;
  flex-direction: row-reverse;
  margin: auto;
  margin-left: 0;
  width: 100%;
  gap: 3vw;
  justify-content: start;
  position: relative;
}
.product-command{
  display: flex;
  margin: auto;
  margin-right: 0;
  margin-top: 0;
}
.productUnitDesc{
  text-align: justify;
  line-height: 2vw;
}
.formController{
  display: flex;
  width: 100%;
}
.formRetract{
  display: flex;
  flex-direction: column;
}
.formControllerBttn{
  margin: auto;
  margin-right: 1vw;
  margin-top: 1vw;
  margin-bottom: 1vw;
  display: flex;
  height: 1.5vw;
}
.removeAdminProduct{
  width: 3vw;
  height: 3vw;
}
.product-info{
  display:flex;
  flex-direction: column;
  width: 45vw;
}
.imgContainer{
  width: 10vw;
  height: 10vw;
}
.previewerCont{
  margin: auto;
  width: 95%;
  margin-top: 2vw;
}
.previewer{
  display: flex;
  gap: 2vw;
  flex-wrap: wrap;
}
progress{
  width: 100%;
}
.previewer li{
  display: flex;
  flex-direction: column;
}
.modal {
  display: none; /* caché par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  text-align: center;
}

.modal-actions button {
  margin: 10px;
  padding: 8px 16px;
  cursor: pointer;
}
.product-images-ul{
  position: relative;
  display: flex;
  gap: 2vw;
  width: 30vw;
  height: 30vw;
  margin: initial;
}
.product-images-ul li{
  width: 30vw;
  height: 30vw;
  position: absolute;
  border-radius: 2vw;
}
.product-images-ul li img{
  border-radius: 2vw;
}
.adminProductList{
  margin-top: 3vw;
  width: 85vw;
  gap: 3vw;
}
.homeBttn{
  background-color: unset;
  border-radius: 35vw;
  border: unset;
  background-color: #ffffff;
  height: 4vw;
  width: 4vw;
  padding: 1vw;
}
#adminDashboardNav{
  display: flex;
  margin: auto;
  margin-top: 3vw;
  width: 85%;
}
#adminDashboardNav ul{
  display: flex;
  width: 100%;
  gap: 2vw;
  justify-content: right;
}

#adminDashboardNav ul li:first-child {
  margin-right: auto; /* pousse les suivants à droite */
}
.adminNavBttn span,#adminLogout span {
  height: 3vw;
  width: 3vw;
  margin: auto;
}
.adminNavBttn:not(.homeBttn) {
  background-color: #ffffff;
  border-radius: 1vw;
  border:unset;

  height: 4vw;
  display: flex;
  transition: 0.3s;
}

.adminNavBttn:hover {
  background-color: #c94597;
}
.adminNavBttn p {
  margin: auto;
}

#adminLogout{
  background-color: #ffffff;
  border-radius: 1vw;
  border: unset;
  height: 4vw;
  width: 4vw;
  transition: 0.3s;
  display: flex;
}
#adminLogout:hover {
  background-color: #c94597;
}

.baskerville-regular {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: italic;
}
.duoTitle{
  position: relative;
    color: #c94597;
    display: flex;
}
.lil-duo{
  font-size: 8vw;
  margin: auto;
}
.big-duo{
  margin-top: 0;
  position: absolute;
  opacity: 0.2;
}
.favoritesDuo{
  position: relative;
}
.favoritesDuo .big-duo{
  font-size: 23.4vw;
  text-align: center;
  top: -7vw;
  z-index: -1;
  position: fixed;
  color: #c94597;
}
.favoritesDuo .lil-duo{
 text-align: center;
 color: #c94597;
}
.shopDuo,.productDuo{
  position: relative;
}
.shopDuo .big-duo,.productDuo .big-duo{
  font-size: 46vw;
  text-align: center;
  top: -7vw;
  z-index: -1;
  position: fixed;
  color: #c94597;
}
.productDuo .big-duo{
  font-size: 25vw;
  text-align: center;
  top: -5vw;
  z-index: -1;
  position: fixed;
  color: #c94597;
}
.shopDuo .lil-duo,.productDuo .lil-duo {
 text-align: center;
 color: #c94597;
}
.adminDuo .big-duo{
  font-size: 32vw;
  color: #c94597;;
}
.adminDuo .lil-duo{
  margin-top: 10vw;
}

.admin-login{
  margin: auto;
  width: 45%;
  padding-bottom: 18vw;
  z-index: 22;
  position: relative;
}
#adminLoginForm{
  background-color: unset;
  box-shadow:unset;
  display: flex;
  flex-direction: column;
  gap: 3vw;
}
#adminLoginForm .inputObj{
  flex-direction: column;
  gap: 1vw;

}
#adminLoginForm label{
  display: flex;
}
#adminLoginForm input{
  border: 0;
  border-radius: 3vw;
  padding: 1.5vw;
}
#adminLoginForm h3,
.productPriceLabel,
.productUnitTitle
.cartUnitTitle
{
  font-family: 'Uniser', sans-serif; 
  font-weight: 100;
  width: max-content;
}
.productUnitTitle{
  font-size: 3vw;
  margin-top: 0;
  margin-bottom: 0;
}
.productUnitPrice
{
  font-family: monospace; 
  width: max-content;
}
#loginForm,#registerForm{
  flex-direction: column;
}
#loginForm{
  margin: auto;
}
#registerForm{
  margin: auto;
  margin-top: 3vw;
}

.registerSplit{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
#adminLoginForm h3{
  margin: auto;
  margin-left: 0;
  font-weight: 100;
  font-size: 2vw;
}
#adminLoginForm button,.submitFormAdmin{
 background-color: #c94597;
 border: unset;
 border-radius: 2vw;
 color: #ffffff;
 padding: 1vw;
 transition: 0.3s;
}
#adminLoginForm button:hover,.submitFormAdmin:hover{
  background-color: #862f65;
  
 }
.searchBar{
  background-color: #ffffff;
  border-radius: 1vw;
  height: 4vw;
  display: flex;
  margin-top: 3vw;
}
.search-icon{
  display: flex;
}
.search-icon img{
  height: 70%;
  margin: auto;
}
input.search-input{
  width: 100%;
  border-bottom: none;
  background-color: unset;
}
#productForm{
  margin-top: 4vw;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.formCentProduct{
  display: flex;
  width: 85vw;
}
.uploadImageCont{
  display: flex;
  flex-direction: column;
  width: 30vw;
}
#productFileCont{
  margin: auto;
  width: 15vw;
  height: 15vw;
  margin-top: 0;
  border: solid black 0.2vw;
  border-radius: 1vw;
}
#img_productFile{
  margin: auto;
  width: 10vw;
  height: 10vw;
}
input#productPrice,input#productReduction{
  border: solid black 0.2vw;
  border-radius: 1vw;
  height: 2vw;
  margin: auto;
  margin-left: 0;
  margin-top:0;
  margin-bottom: 0;
}
.adminProductSymbol{
  font-size: 1.25vw;
}
#productPriceCont,#productReductionCont{
  gap: 2vw;
  display: flex;
}
#productPriceCont label{
  height: 2vw;
  display: flex;
  margin: auto;
}
.productReductionLabel{
  margin: auto;
  display: flex;
}
.reductionMerge{
  margin-top: 2vw;
  margin-bottom: 2vw;
}
.priceContMerge,.reductionMerge{
  display: flex;
}
.priceContMerge h3,.reductionMerge h3{
  font-size: 1.25vw;
  margin: auto;
}
.priceContMerge h1{
  margin: auto;
  margin-left: 0;
  margin-right: 0;
  width: auto;
}
#productTitle{
  font-size: 2vw;
}
.uploadDescCont{
  display: flex;
  flex-direction: column;
  height: 100%;
}
#productDescription{
  margin-top: 3vw;
  width: 90%;
  font-size: 1vw;
}
.uploadWrap{
  width: 70%;
}
#productDescriptionCont{
  height: inherit;
}
textarea#productDescription{
  border: 0.2vw solid #000000;
  border-radius: 1vw;
}
.submitFormAdmin{
  margin: auto;
  margin-bottom: 2vw;
  padding-left: 2vw;
  padding-right: 2vw;
}
.adminProductList{
  display: flex;
  flex-direction: column;
}
#productLitrageCont{
  margin-top: 3vw;
}
.productUnitCategory {
  margin-top: 0;
  margin-bottom: 0;
  width: max-content;
}
.productUnitLitrage {
  margin-top: 0;
  width: max-content;
}
.product-images-ul {
  position: relative;
  width: 200px;  /* ajuste selon ta maquette */
  height: 200px;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
/*
Sliders CSS
*/
.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
  position: relative;
}

.slide {
  min-width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2vw;
}

.slider-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}

.slider-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  border:solid #c94597 0.1vw;
}
.product-price{
  margin-top: 0;
}

.slider-dots .dot.active {
  background: #c94597;
}
.shopBannerLow{
  position: absolute;
  bottom: 2vw;
  left: 2vw;
  display: flex;
  flex-direction: column;
}
.shopBanner{
  position: relative;
  height: 100vh;
}
.secondTitle{ 
  font-size: 9vw;
  margin-bottom: 0;
  margin-top: 0;
  color: #c94597;
}
.shopBannerLow .uniserTitle{
  color: #ffffff;
  margin-bottom: 0;
  font-size: 7vw;
  margin-left: 1vw;
}
.shopMainFootrightUl{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1vw;
  width: 97vw;
}
.shopMain,.productMain{
  margin-top: 3vw;
}
.productMain{
  display: flex;
  flex-direction: column;
}
.productContainer{
  display: flex;
  gap: 4vw;
}

.productUnitShop{
  text-align: center;
  flex: 0 0 calc(25% - 1vw);
  box-sizing: border-box;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.productUnitShop .slider{
  position: relative;
  display: flex;
  width: 100%;
}
.product-images-ul-shop{
    position: relative;
    width: 100%;
    height: 23vw;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: auto;
    margin-top: 0;
    margin-bottom: 0;
}
.productUnitTitleShop{
  margin-bottom: 0;
  font-weight: 100;
}
.productUnitPriceShop{
  margin-top: 0;
  font-family: monospace;
  display: flex;
  flex-direction: column;
}
.productUnitPrice{
  font-size: 2vw;
}
.shopMainHead{
  margin-bottom: 3vw;
}
.productMainHead{
  height: 16vw;
}
.titleShop p{
  text-align: center;
}
.favoriteProductCase{
  position: absolute;
}
.favoriteProduct {
  width:2.5vw;
  height: 2.5vw;
  right: 1vw;
  top: 1vw;
  z-index: 2;
  position: absolute;
}

.favoriteProductCase {
  position: relative;
  width: 100%;
  height: 100%;
}

.favoriteProductCase img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* États initiaux */
.heartLineBlack {
  opacity: 1;
  transform: scale(1);
}
.heartLinePink,
.heartFull {
  opacity: 0;
  transform: scale(0.9);
}

/* Hover = petit effet "rose" */
.favoriteProductCase:hover .heartLineBlack {
  opacity: 0;
  transform: scale(1.2);
}
.favoriteProductCase:hover .heartLinePink {
  opacity: 1;
  transform: scale(1);
}

/* État actif (favori ajouté) */
.favoriteProductCase.active .heartLineBlack,
.favoriteProductCase.active .heartLinePink {
  opacity: 0;
}
.favoriteProductCase.active .heartFull {
  opacity: 1;
  transform: scale(1);
}
.authPopup{
  position: fixed;
  background-color: #c9459663;
  display: flex;
  width: 100%;
  min-height: 100%;
  height: max-content;
  z-index: 444;
}
.authPopupContent{
  margin: auto;
  display: flex;
  flex-direction: column;
  width: 43vw;
  max-height: 80vh;
  background-color: #EFEBE6;
  border-radius: 2vw;
  position: relative;
}
.closeAuthPopup{
  position: absolute;
  top:1vw;
  right: 1vw;
  width: 1vw;
  height: 1vw;
  background-color: white;
  border-radius: 13vw;
  display: flex;
  transition: 0.3s;
  padding: 1vw;
}
.closeAuthPopup:hover{
  background-color: #c94597;
}
.authPopup form{
  display: flex
  ;
  width: 85%;
}
.registerLeft,.registerRight{
  gap: 2vw;
  display: flex;
  flex-direction: column;
}
.registerSplit form{
  flex-direction: column;
}
.formSection{
  margin-bottom: 2vw;
      display: flex;
    flex-direction: column;
    gap: 3vw;
}
.formCont{
  overflow-y: scroll;
  border-top: solid #c94597;
}
.authFormCont{
  height: 50vw;
}
.authPopupContent h2{
  margin: auto;
  color: #c94597;
  margin-top: 2vw;
  margin-bottom: 2vw;
  font-size: 3vw;
}
.authPopup form{
  background-color: unset;
  box-shadow: unset;
}
.authPopup form p{
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
.authPopup form .formTitle{
  font-size: 2.7vw;
}
.authPopup form h3 {
  margin: auto;
  margin-left: 0;
  font-weight: 100;
  font-size: 2vw;
  font-family: 'Uniser', sans-serif;
  font-weight: 100;
}
.authPopup form button {
  background-color: #c94597;
  border: unset;
  border-radius: 2vw;
  color: #ffffff;
  padding: 1vw;
  transition: 0.3s;
  margin-bottom: 1vw;
  margin-top: 1vw;
}
.authPopup form button:hover {
  background-color: #8b2163;
}
.authPopup form .inputObj {
  flex-direction: column;
  gap: 1vw;
}
.authPopup form input {
  border: none;
  border: 0;
  border-radius: 3vw;
  padding: 1.5vw;
}
.clientConnexion,.clientRegister{
  margin-top: 3vw;
}
.editorMsgAnim {
  animation-duration: 0.25s;
  animation-name: msgAnimKey;
  animation-timing-function: ease-in;
  animation-iteration-count: 2;
}
body .editorMsg {
  position: fixed;
  bottom: 2vw;
  z-index: 555;
  display: none;
  border-radius: 1.4vw;
  right: 2vw;
  color: rgb(0, 0, 0);
  background-color: #EFEBE6;
}
body .editorMsg .editorMsgMove {
  display: flex;
  margin-left: 2vw;
  margin-right: 2vw;
}
body .editorMsg .editorMsgMove .msgAlertIcon {
  display: flex;
}
body .editorMsg .editorMsgMove .msgAlertIcon img {
  height: 2vw !important;
  margin: auto;
}
.popupContent {
  position: absolute; /* ou fixed si tu veux toujours au centre écran */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  /* ton style */
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border:solid  #c94597;
}
.popupHeader{
  text-align: center;
}
.popupHeader h3{
  font-size: 4vw;
  color: #c94597;
  margin-bottom: 0;
  margin-top: 0;
}
.popupBody p{
  text-align: center;
}
.popupFooter{
  display: flex;
}
.popupOk{
  background-color: #c94597;
  border: unset;
  border-radius: 1vw;
  color: #ffffff;
  margin: auto;
  padding: 1vw;
  transition: 0.3s;
}
.popupOk:hover{
  background-color:  #8b2163;

}
.p-Block .Block{
  display: none;
}
.dropContainer{
  background-color: #fff;
  border-radius: 1vw;
  position: fixed;
  display: flex;
  right: 2vw;
  top: 3vw;
  z-index: 22222;
}
.accountDropdown{
  width: 100%;
  display: flex;
  flex-direction: column;
   background-color: #fff;
   position: absolute;
   border-bottom-left-radius: 1vw;
  border-bottom-right-radius: 1vw;
  margin-top: 2.5vw;
}
.accountDropdown h3{
  font-family: monospace; 
  text-align: center;
  transition: 0.3s;
  font-size: 1vw;
}
.accountDropdown h3:hover{
  transition: 0.3s;
  color: #c94597;
}
#loginForm #clientPasswordCont{
  margin-top: 1.5vw;
  margin-bottom: 1.5vw;
}
.favoriteMain{
  margin-top: 17vw;
}
.favoriteMainHead{
  display: flex;
  flex-direction: column;
}
.favoriteCategoryMenu{
 margin: auto;
 display: flex;
 width: 95%;
}
.not-logged-in{
  display: flex;
  flex-direction: column;
  margin: auto;
  margin-bottom: 10vw;
}
.not-logged-in .openLogin{
  margin: auto;
  background-color: #c94597;
  border: unset;
  border-radius: 1vw;
  color: #ffffff;
  margin: auto;
  padding: 1vw;
  transition: 0.3s;
}
.promoBox{
  margin-top: 3vw;
}
.not-logged-in .openLogin:hover{
  background-color:  #8b2163;
}
.favoriteCategoryMenuList{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  gap:3vw
}
.favoriteUnit,.cartUnit{
  
  display: flex;
  position: relative;
}
.favoriteUnit{
  flex-direction: column;
  width: 28vw;
}
.cartUnit{
  gap: 3vw;
  border-bottom: solid 0.1vw #c94597;
  padding-bottom: 2vw;
  padding-top: 2vw;
}

.heartFullFav{
  position: absolute;
  width: 3vw;
  height: 3vw;
  right: 1vw;
  top: 1vw;
}
.favoriteUnit-info,.cartUnit-info{
  display: flex;
  justify-content: center;
  text-align: center;
}
.cartUnit-info{
  gap: 6vw;
}
.favoriteUnit-info{
  flex-direction: column;
}
.favoriteUnit-info h1{
  margin-bottom: 0;
}
.favoriteUnit-info h3{
  margin-top: 0;
}
.favoriteUnitUnitPrice,.cartUnitUnitPrice{
  margin-top: 0;
}
.favoriteUnitUnitPrice{
  display: flex;
  flex-direction: column;
}
.favoriteUnit-images-ul,.cartUnit-images-ul{
  position: relative;
  width: 13vw;
  height: 13vw;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
.favoriteUnit-images-ul{
  width: 28vw;
  height: 28vw;
}

.product-view{
  display: flex;
  margin: auto;
  flex-direction: column;
}
.product-left{
  position: relative;
  width: 28vw;
  height: 28vw;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-right{
    width: 32vw;
}

.add-to-cart,.shipping-bttn,#validateShipping{
  background-color: #c94597;
  border: unset;
  border-radius: 2vw;
  font-size: 1.5vw;
  color: #ffffff;
  padding: 1vw;
  transition: 0.3s;
  margin-bottom: 1vw;
  margin-top: 1vw;
  transition: 0.3s;
  margin-bottom: 10vw;
}
#validateShipping{
  font-family: sans-serif;
  cursor: pointer;
  margin: auto;
  width: max-content;
  margin-top: 2vw;
  font-size: 1vw;
  margin-bottom: 7vw;
  margin-left: 0;
}
.add-to-cart:hover,.shipping-bttn:hover,#validateShipping:hover{
  background-color:  #8b2163;
}
input[type=number].quantity-input{
  width: 4vw;
  height: 4vw;
  border-radius: 1vw;
  border: unset;
  text-align: center;
}
.product-quantity button,.cartUnit-quantity-control button{
  width: 4vw;
  height: 4vw;
  border: 0;
  background-color: #d3d3d3;
  border-radius: 1vw;
}
.product-description{
  text-align: justify;
  font-size: 1.25vw;
}
.add-to-cart{
  margin-top: 3vw;
}
.navtime{
  transition: 0.3s;
}
.navtime:hover{
  color: #c94597;
}
#cartButton{
  position: relative;
}
.cart-notif{
  position: absolute;
  background-color: #c94597;
  border-radius: 4vw;
  text-align: center;
  top: -1vw;
  right: -1vw;
  width: 2vw;
  color: #ffffff;
  font-family: 'Manrope', sans-serif;
  font-size: 1.5vw;
}
.giftBoxLine{font-family: 'Manrope', sans-serif; }
.cartMain,.ordersMain{
  display: flex;
  flex-direction: column;
  margin-top: 13vw;
}
.ordersMain,.orderMain{
  margin-top: 22vw;
}
.cartMainFoot,.shippingMainFoot,.paymentMainFoot {
  width: 85%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.cartTitle,.shippingTitle,.paymentTitle,.ordersTitle{
  color: #c94597;
  font-size: 5vw;
  width: 85%;
  margin: auto;
  text-align: left;
  border-bottom: solid;
}
.cartMainFootright{
 display: flex;
 margin-top: 3vw;
}
.remove-from-cart{
  height: max-content;
  border: unset;
  background-color: unset;
  border-bottom: 2px solid #c94597; 
  font-size: 2.5vw;
}
.cartUnitTitle{
  font-size: 2.5vw;
  font-weight: 100;
  margin-top: 0;
  text-align: left;
  margin-bottom: 0;
}
.shippingMainFootRight .cartUnitTitle,.paymentMainFootRight .cartUnitTitle{
  font-size: 2vw;
}
.shippingMainFootRight,.paymentMainFootRight{
  margin-top: 0;
}
.shippingMainFootRight .cartUnit-images-ul,.paymentMainFootRight .cartUnit-images-ul{
 width: 8vw;
 height: 8vw;
}
.shippingMainFootRight h4, .paymentMainFootRight  h4{
  margin-bottom: 0;
  font-size: 1.4vw;
 }
 .shippingMainFootRight h3,.paymentMainFootRight h3{
  text-align: left;
 }
 .shippingMainFootRight .cartUnit-info, .paymentMainFootRight .cartUnit-info{
  gap: 1vw;
 }
 .shippingMainFootRight .cartUnit-quantity-control button,.shippingMainFootRight input[type=number].quantity-input{
  width: 2.5vw;
  height: 2.5vw;
 }
.cartUnit-quantity-control{
  display: flex;
  gap: 0.3vw;
}
.shipping-block label{
  margin-bottom: 1vw;
}
.cartUnitPrice,.cartUnitTotal{
  font-family: monospace; 
  font-size: 1.5vw;
  text-align: left;
  font-weight: 100;
  margin-top: 0;
}
.cartUnit-quantity{
  display: flex;
  gap: 2vw;
}
.cartMainFootLeftUl{
  flex-direction: column;
}
.checkoutSteps{
  display: flex;
  gap: 3vw;
  margin: auto;
}
.shippingMain,
.paymentMain{
  display: flex;
  flex-direction: column;
  margin-top: 13vw;
}
.shippingMainFootLeft{
  width: 60%;
  display: flex;
  flex-direction: column;
}
.shippingMainFootLeft h1,.shippingMainFootLeft h2{
  font-weight: 100;
  font-size: 2.5vw;
  font-family: 'Uniser', sans-serif;
}
.shipping-options{
  display: flex;
  flex-direction: column;
  gap:2vw
}
.cartUnit-center{
    display: flex;
    flex-direction: column;
    gap: 0.3vw;
}
.shippingMainFootLeft h3{
  font-family: 'Manrope', sans-serif;
  font-weight: 100;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5vw;
}
.shippingMainFootLeft a{
  text-align: center;
}
.shipping-address{
  border-radius: 1.5vw;
}
.shipping-address{
  display: flex;
  flex-direction: column;
}
.shipping-block{
  gap: 3vw;
  display: flex;
  flex-direction: column;
}
.shipping-block .inputObj{
  flex-direction: column;
}
.shipping-row{
  display: flex;
  gap: 2vw;
}
.shipping-row input{
  border-radius: 1.5vw;
}
#shippingPickup{
  display: none;
}
.shipping-details{
  display: flex;
  flex-direction: column;
}
.password-hints {
  margin-top: 5px;
  color: #f36; /* rose clair pour ton thème */
}
.password-hints .valid {
  color: #0a0; /* vert quand c’est bon */
}
.shippingMainFootRightUl,.paymentMainFootRightUl{
  flex-direction: column;
  margin-right: 0;
}
.sousTotal,.shippingFee,.totalTotal{
  display: flex;
  justify-content: space-between;
}
.totalTotal h3{
  font-size: 3vw;
}
.paymentMainFoot {
  display: flex;
  margin-bottom: 6vw;
}
.payment-option{
  display: flex;
  border: solid #c94597 0.1vw;
  border-radius: 2vw;
  transition: 0.3s;
}
.payment-option:hover{
  background-color: #c94597;
}
#paiementMode{
  display: flex;
  flex-direction: column;
  gap: 1vw;
}
.payment-option img{
  width: 1.5vw;
  margin: auto;
  margin-left: 1vw;
  margin-right: 1vw;
  height: 1.5vw;
}
.payment-option h2{
  font-size: 1.5vw;
}
#validateOrder{ 
  background-color: #c94597;
  display: none;
  transition: 0.3s;
  border-radius: 1vw;
  margin-bottom: 7vw;
  margin-top: 3vw;
  cursor: pointer;
}
#validateOrder h3{
  margin: auto;
  font-weight: 100;
  padding: 1vw;
  font-family: 'Manrope', sans-serif;
}
#validateOrder:hover{
  background-color: #8b2163;
}
#paymentPopupBody{
  display: flex;
  flex-direction: column;
}
#paymentSection{
  margin-top: 3vw;
}
#ordersList{
  display: flex;
  flex-direction: column;
  width: 85%;
  margin: auto;
}
.orderCard-unit{
  display: flex;
  margin-top: 3vw;
  padding-bottom: 3vw;
  gap: 3vw;
  border-bottom: solid #c94597;
  width: 100%;
}
.orderCard-left{
  width: 10vw;
  height: 10vw;
}
.orderCard-left img{
 border-radius: 1vw ;
}
.orderCard-info h3{
  margin-top: 0;
}
#orderDetailContainer{
  display: flex;
  flex-direction: column;
  width: 85%;
  margin: auto;
}
.orderDetail-items{
  display: flex;
  flex-direction: column;
  margin-left: 0;
  width: 100%;
}
.orderDetail-item{
  display: flex;
  border-bottom: solid #c94597;
  padding-bottom: 1vw;
  margin-top: 1vw;
  gap: 3vw;
}
.orderDetail-image{
  height: 10vw;
  width: 10vw;
  position: relative;
  overflow: hidden;
}
.orderDetail-info h2 {
  margin-top: 0;
}
.orderDetail-image .slider{
  position: relative;
  display: flex;
  width: 100%;
}
.bakcOrderBttn{
  position: absolute;
  top: 14vw;
  left: 1vw;
  height: 4vw;
  opacity: 0.7;
  transition: 0.3s;
}
.bakcOrderBttn:hover{
  opacity: 1;
}
.shopBttn p{
  font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.5vw;
    margin-top: 0;
    color: #c94597;
    margin: auto;
}
.accountDropdown li{
  cursor: pointer;
}
.adminOrderList{
  width: 85%;
  display: flex;
  flex-direction: column;
}
.reduction{
  display: flex;
}
.orderAddress{
  border-top: solid #555;
  padding-top: 1vw;
}
.userInfos{
  padding-top: 1vw;
}
.orderAddress, .userInfos{
  margin-top: 5px;
  font-size: 1.25vw;
  color: #555;
  font-family: 'Manrope', sans-serif;
}
.shopBackBttn{
  cursor: pointer;
  background-color: #fff;
  border-radius: 1vw;
  width: max-content;
  display: flex;
  padding-left: 1vw;
  padding-right: 1vw;
  margin-bottom: 2vw;
}

.photos-images-ul-shop {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh; /* ou ajuste selon tes besoins */
  margin: 0;
  padding: 0;
}

.slider-big {
  display: flex;
  flex-direction: row;
  width: 100%;
  transition: transform 0.8s ease-in-out;
}

.slide-photo {
  flex: 0 0 100vw; /* chaque slide prend 100% de la largeur viewport */
  height: 100%;
  position: relative;
}

.slide-photo img.thumb {
  width: 100%;
  height: 100%;
  object-fit: cover; /* garde les proportions tout en remplissant l’écran */
  display: block;
}

/* Dots de navigation */
.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.slider-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dots .dot.active {
  background-color: white;
  transform: scale(1.2);
}
.discountedPrice{
  display: flex;
  margin: auto;
}
#promoCodeCont{
  display: flex;
  flex-direction: column;
  font-size: 2.8vw;
}
#promoCodeCont h3{
  font-family: 'Uniser', sans-serif;
  margin-top: 0;
  margin-bottom: 0;
    margin: auto;
}
.shipping-bttn{
  text-align: center;
  font-family: sans-serif;
  cursor: pointer;
}
.totalOrderBox{
  display: flex;
  flex-direction: column;
}
.bttnPromo{
  background-color: white;
  border: solid;
  border-radius: 2vw;
  padding: 1vw;
  margin-top: 1vw;
  cursor: pointer;
}
.promo-form{
  width: 85%;
  margin: auto;
  display: flex;
  flex-direction: column;
}
.promo-form .inputObj{
  display: flex;
  flex-direction: column;
}
.promo-form h3{
  font-size: 1.3vw;
}
#promoStart , #promoEnd,#promoCode{
  width: 22vw;
}
#createPromoBtn{
  background-color: #fff;
  border-radius: 2vw;
  padding: 1vw;
  width: max-content;
  border: solid #c94597;
  margin-top: 3vw;
}
#bankOption,#cardOption{
  cursor: pointer;
}
.paymentMainFootRightUl .slider-dots{
  visibility: hidden;
}
.promoListContainer{
  width: 85%;
  margin: auto;
  margin-bottom: 3vw;
  background-color: #fff;
  padding: 3vw;
  margin-top: 3vw;
  border-radius: 3vw;
  border: solid #c94597;
}
.promoList{
  display: flex;
  flex-direction: column;
  gap: 3vw;
}
.promoItem{
  font-family: 'Manrope', sans-serif;
  font-size: 1.7vw;
  border-bottom: solid #c94597;
  margin-top: 1vw;
  padding-bottom: 1vw;
  display: flex;
  flex-direction: column;
  gap: 1vw;
}
.modalOverlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999;
}
.modalContent {
    background: #fff; padding: 20px; border-radius: 8px;
    width: 350px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.freeShippingNotice{
  font-family: 'Manrope', sans-serif;
}
.modalButtons { margin-top: 20px; display: flex; justify-content: space-around; }
.btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
.btnConfirm { background-color: #4CAF50; color: white; }
#adminDashboardNav {
    /* Assurez-vous que le conteneur est prêt pour le positionnement */
    position: relative; 
}

/* 1. État Initial du Menu (Masqué) */
#mobileMenuToggle {
    /* Cache l'icône Hamburger sur les grands écrans (sera réactivé dans la media query) */
    display: none; 
    visibility: hidden;
}

/* Le conteneur du menu (la liste <ul>) */
#adminNavList {
    /* Style par défaut pour le bureau : flexible, aligné horizontalement, etc. */
    list-style: none;
    display: flex; 
    align-items: center;
    padding: 0;
    margin: 0;
}

/* 2. Empêcher le Défilement de la Page lors de l'Ouverture */
/* (Appliqué à la balise <body> via JS) */
.no-scroll {
    overflow: hidden;
}
.headerContainer{
  display: flex;
}
.promo-text p {
  margin: auto;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  gap: 3vw;
}
.payNowButton{
  border: solid #c94597 ;
}
#adminDashboardNav .mobileMenuToggle{
  display: none;
}
.cartUnitQuantity{
  text-align: left;
  margin-top: 0;
}
.orderCard-unit.order-cancelled {
    /* Diminuer l'opacité pour indiquer qu'elle n'est plus active */
    opacity: 0.5; 
    
    /* Optionnel : S'assurer que les événements de survol (hover) n'annulent pas l'opacité */
    pointer-events: none;
    
    /* Optionnel : Ajouter un style visuel clair (par exemple, des hachures) */
    /* background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px); */
}
.promo-percentage{
  font-size: 2vw;
  color: #c94597;
}
.giftBoxCheckboxCont{
  flex-direction: row-reverse;
  border: solid #c94597;
  margin-top: 1vw;
  border-radius: 1vw;
  padding: 0.5vw; 
}
.giftBoxCheckboxLabel h3{
  font-size: 1.5vw;
}
.giftBoxThumb{
  height:10vw;
  width:10vw;
}
.giftBoxPhotosContainer{
  display: flex;
  margin-top: 2vw;
  gap: 2vw;
}
/* ================================================= */
/* 1. OVERLAY (Arrière-plan plein écran)             */
/* ================================================= */

/* Conteneur principal qui cache la modale par défaut */
#lightboxOverlay {
    position: fixed; /* Reste fixe même si l'utilisateur fait défiler la page */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Noir semi-transparent */
    z-index: 10000; /* Assure que la Lightbox est au-dessus de tout le reste */
    display: none; /* Cacher par défaut (utilisez fadeIn() en JS) */
    cursor: pointer; /* Indiquer que l'on peut cliquer pour fermer */
}

/* ================================================= */
/* 2. CONTENU (Conteneur de l'image et des contrôles) */
/* ================================================= */

#lightboxContent {
    position: relative;
    /* Centrage de la lightbox au milieu de l'écran */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%; /* Limiter la taille pour les grands écrans */
    max-height: 90%; /* Limiter la hauteur pour les grands écrans */
    text-align: center;
    pointer-events: none; /* Permet aux clics de passer à l'image et aux boutons */
}

/* ================================================= */
/* 3. IMAGE PRINCIPALE                               */
/* ================================================= */

#lightboxImage {
    max-width: 100%;
    max-height: 100vh; /* Limiter à la hauteur de la fenêtre visible */
    height: auto;
    display: block; /* Supprime l'espace blanc sous l'image */
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    pointer-events: auto; /* L'image elle-même est cliquable si vous le souhaitez, mais ici elle est le contenu */
}

/* ================================================= */
/* 4. BOUTON DE FERMETURE (X)                       */
/* ================================================= */

#lightboxClose {
    position: absolute;
    top: -30px; /* Positionner au-dessus de la lightbox */
    right: -30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    opacity: 0.8;
    transition: opacity 0.2s;
    cursor: pointer;
    pointer-events: auto; /* Rendre le bouton cliquable */
    z-index: 10001; /* Doit être au-dessus de tout */
}

#lightboxClose:hover {
    opacity: 1;
}

/* ================================================= */
/* 5. BOUTONS DE NAVIGATION (< et >)                 */
/* ================================================= */

.lightboxNav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000;
    transition: background 0.2s;
    pointer-events: auto; /* Rendre les boutons cliquables */
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    padding: 0;
}

.lightboxNav:hover {
    background: rgba(0, 0, 0, 0.8);
}

#lightboxPrev {
    left: -50px;
}

#lightboxNext {
    right: -50px;
}
#orderDetailContainer .backOrderBttn{
      width: 5vw;
    margin-top: 2vw;
}
.orderDetail-info h3{
  margin-top: 0;
}
.safeMsg{
  width: 40vw;
}
.orderReviewMain{
  width: 85vw;
  margin: auto;
  margin-top: 13vw;
}
.ordersReviewTitle{
      color: #c94597;
    font-size: 5vw;
    width: auto;

    text-align: left;
    border-bottom: solid;
}
.order-review-actions button{
  border: solid;
  border-radius: 2vw;
  padding: 1vw;
  margin-top: 1vw;
  cursor: pointer;
}
#backToShipping{
  background-color: #ffff;
}
#proceedToPayment{
  background-color: #c94597;
  color: #ffff;
}
.order-review-actions{
  margin-bottom: 10vw;
}
.totalContainer{
  position: fixed;
  bottom: 2vw;
  background-color: white;
  padding: 1vw;
  border-radius: 2vw;
  border: solid #c94597;
  z-index: 222;
  display: flex;
  gap: 3vw;
  min-width: 40vw;
  right: 2vw;
}
.holiday-banner-container {
    width: 100%;
    overflow: hidden; /* Important : cache le texte qui sort de l'écran */
    background-color: #fff3cd; /* Couleur de fond jaune attention */
    color: #856404; /* Couleur du texte foncé pour le contraste */
    border-bottom: 2px solid #ffeeba; /* Petite bordure en bas pour le style */
    padding: 12px 0; /* Espace au dessus et en dessous du texte */
    position: relative;
    z-index: 9999; /* S'assure que la bande est au-dessus du reste */
    font-family: sans-serif;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Le texte qui va défiler */
.holiday-banner-text {
    /* Force le texte à rester sur une seule ligne */
    white-space: nowrap;
    /* Nécessaire pour que la transformation fonctionne bien */
    display: inline-block; 
    
    /* Configuration de l'animation */
    /* Nom, durée (plus le chiffre est grand, plus c'est lent), type, répétition */
    animation: scroll-left 30s linear infinite;
    
    padding-left: 100%; /* Astuce pour commencer le défilement depuis la droite */
}

/* L'animation elle-même */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* On déplace le texte de 100% de sa propre largeur vers la gauche */
        transform: translateX(-100%);
    }
}

/* OPTIONNEL : Mettre en pause le défilement au survol de la souris */
.holiday-banner-container:hover .holiday-banner-text {
    animation-play-state: paused;
    cursor: wait;
}
.renata-service-item{
  display: flex;
  justify-content: space-around;
}
/* Inversion 1 sur 2 (le deuxième, le quatrième, etc.) */
.renata-service-item:nth-child(even) {
    flex-direction: row-reverse;
}
.renataCont{
  display: flex;
  flex-direction: column;
  width: +40vw;
}
.renataCont p{
  line-height: 3vw;
}
.renataCont h2{
  color: #c94597;
}
.renata-service-image{
      width: 46.7vw;
}
.renataBlockHead{
  display: flex;
  flex-direction: column;
  text-align: center;
}
.renata-footer{
  text-align: center;
  margin-top: 5vw;
  margin-bottom: 5vw;
  font-size: 2.2vw;
}
.renata-services-grid{
  display: flex;
  flex-direction: column;
  gap: 5vw; 
}
.renata-title{
    position: relative;
    width: max-content;
    margin: auto;
    margin-top: 3vw;
    margin-bottom: 3vw;
}
.renata-title:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1vw;
    bottom: -0.25vw;
    color: ;
    left: 0;
    opacity: 0.5;
    background-color: #c94597;
    z-index: -1;
}
.QRCont{
  width: 40vw;
  margin: auto;
}
.renataFrancaInfosMain{
  margin-top: 10vw;
}
.equipePro{
  position: relative;
}
@media only screen and (max-width:1024px){
h4 {
    font-size: 2.0vw;
}
h3 {
    font-size: 2.3vw;

}
h2 {
    font-size: 2.1vw;
}
h1 {
    font-size: 2.8vw;
}
p{
    font-size: 1.4vw;
}
label{
  font-size: 1.2vw;
}
input{
    font-size: 1.4vw
}
input[type=number]{
  width: max-content;
}
input[type=file]{
  width: max-content;
}
#locationClose span{
 
  width: 6vw;
  height: 6vw;

}
.menu-list{
  font-size: 1.5vw;
}
.thumbnailLocation.active {
    width: 45vw; 
    height: 35vw;
}
.point{
height: 2vw;
width: 2vw;
margin: auto;
margin-left:0;
margin-right:0;
}
.navTag{
  margin-left: 3vw;
}
#rdvBttn h4{
  font-size: 2.4vw;
}
.thumbnail:not(.active) {
    width: 5vw; /* Taille des miniatures inactives */
    height: 45vw; /* Taille des miniatures inactives */
    transition: all 0.3s ease; /* Ajoute une transition pour un effet de lissage */
}
.thumbnail.active {
    border-color: #3498db;
    width: 80vw;
    height: 45vw;
}
.shopBttn p{
  font-size:2.5vw;
}
.header-icons > span{
  height: 2.5vw;
  width: 2.5vw;
}
.accountDropdown{
  margin-top: 3.5vw;
}
}
@media only screen and (max-width:768px){
    iframe{
        
    }
    .onlineRdv h3{
        font-size: 3vw;
    }
.teamLi {
    flex: 0 0 45.9vw;
    padding: 1vw;
    height: 148vw;
    display: flex;
    flex-direction: column-reverse;
}
#teamObjKinesiterapeutes{
    flex-direction: column
}
.M6-block-vert{
    flex-direction: column;
}
.M6-block-vert-right,.M6-block-vert-left{
    width: 80vw;
}
.teamImgCont {
    height: 123vw;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.M6-block-vert2 p,.M6-block-vert3 p {
    line-height: 6vw;
}
.M6-block-vert-right{
    flex-direction: column;
}
.M6-block-vert-left{
    display: flex;
    flex-direction: column;
}
.thumbnailLocation.active {
    width: 40vw; 
    height: 30vw;
}
.thumbnailLocation.active {
    width: 42vw; 
    height: 50vw;
}
#massotherapeuteLi{
    flex-direction: column;
}
.menu-list{
    font-size: 2vw;
  }
#joinUs{
height: max-content;
    min-height: 14vw;
    width: 80%;

}
.samplePicture{
    height: 193vw;
    flex: 100.9vw;
}
.teamInfos{
    height: unset;
}
.sampleInfoCenter h2,.teamInfos h2{font-size: 7vw;}
.sampleInfoCenter h3,.teamInfos h3{font-size: 5vw;}
#medicInfoCenter h2{
    font-size: 7vw;
}
#medicInfoCenter h3{
    font-size: 5vw;
}
#teamObjMedic{
    height: auto;
}
#medicLi,#psychologueLi,#coachLi,#osteopatheLi{
    flex-direction: column;
}
#medicPicture{
    flex:unset;
}
#joinUsCenter {
    /* position: absolute; */
    min-height: 35vw;
    position: relative;
}
#joinUsCenter span{
    bottom: 0vw;
}
#joinUsCenter span p{
margin: auto;
}
.contact-info{
    width: 100%;
}
.sitemap {
    width: 100%;
}
#contactContainer form{
    padding: 5vw;
}
.careBoxHead{
    height: 67vw;
}
.teamBoxHead{
height: 68vw;
    width: 26vw;
    margin-left: 9vw;
}
.thumbnail:not(.active) {
    width: 0vw; /* Taille des miniatures inactives */
    height: 0vw; /* Taille des miniatures inactives */
    transition: all 0.3s ease; /* Ajoute une transition pour un effet de lissage */
}
.thumbnail.active {
    border-color: #3498db;
    width: 90vw;
    height: 60vw;
}   
#equipe,#infrastructureS,#kinesitherapie{
  margin-top: 30vw;
}
#rdvBttn h4{
  font-size: 4.8vw;
}
h1 {
    font-size: 5.1vw;
}
h2 {
    font-size: 3.1vw;
}
h3 {
    font-size: 2.6vw;

}
h4 {
    font-size: 2.3vw;
}
p{
    font-size: 3.3vw;
}
input{
    font-size: 3.3vw;
}
label{
    font-size: 3.3vw;
}
.teamBoxHead{
height: 76vw;
    width: 42%;
    margin: auto;

}
.teamBoxHead img{
object-position: top;
}

.teamBoxCont{
    margin-top: 4vw;
    width: 80%;
    margin: auto;
}
.teamBoxBody{
    flex-wrap: nowrap;
    flex-direction: column;
}

#pluriImgs{
    width: 100vw;
    height: 78vw;
}
#pluriTexts{
    width: 100vw;
}
.careLi{
	flex: 0 0 49.83%;
    display: flex;
    box-sizing: border-box;
    padding: 0.3vw;
    flex-direction: column;
}
#centre_pluridisciplinaire{
	flex-direction: column;
}
.promo-text p{
    font-size: 1.8vw;
}
.promo-item{
    margin-top: 2vw;
}
.authPopup form h3{
    font-size: 3vw;
}
.authPopup form input{
    font-size: 2.2vw;
}
.no-account{
    font-size: 2.4vw;
}
h3 {
    font-size: 6.09vw;
}
.orderAddress, .userInfos{
    font-size: 2.8vw;
}
.orderCard-unit{
    flex-direction: column;
}
.pendingMsg{
   font-size: 2.8vw;
}
#paiementMode h2{
    font-size: 2.5vw;
}
.paymentMainFootRight .cartUnit-images-ul{
    width: 15vw;
    height: 15vw;
}
.paymentMainFootLeft{
    width: 46%;
}
#paymentPopupBody h2{
    font-size: 2vw;
}
.paymentMainFootRight .cartUnitTitle{
    font-size: 5vw;
}
.totalOrderBody .uniserTitle{
    font-size: 4vw;
}
.header-icons > span {
    width: 5vw;
    height: 5vw;
}
.accountDropdown{
    margin-top:6vw;
}
.accountDropdown h3{
    font-size: 1.8vw;
    padding-left: 1vw;
    padding-right: 1vw;
    
}
.shopMainFootrightUl{
    grid-template-columns: repeat(3, 1fr);
}
.product-images-ul-shop{
    height: 32vw;
}
.discountedPrice small{
    font-size: 2vw;
}
.orderCard-info h3{
    size:3.5vw
}
.orderCard-left,.cartUnit-images-ul{
    width: 20vw;
    height: 20vw;
}
.cartUnitTitle{
    font-size: 5vw;
}
.cartUnitPrice{
    font-size: 3.5vw;
}
.cartUnitTotal{
    font-size: 2.5vw;
}
.shipping-bttn{
    font-size: 3.5vw;
}
.shippingMainFoot{
    flex-direction: column-reverse;
}
.shippingMainFootLeft h2{
    font-size: 5vw;
}
.shippingMainFootLeft h3{
    font-size: 4vw;
    margin-top: 0;
    margin-bottom: 0;
}
.shipping-options{
    gap: 2vw;
    display: flex;
    flex-direction: column; 
}
#validateShipping{
    font-size: 3.5vw;
    margin-bottom: 7vw;
}
.shippingMainFootRight .cartUnitTitle{
    font-size: 6vw;
}
.shippingMainFootRight .cartUnit-images-ul{
    height: 20vw;
    width: 20vw;
}
.shippingMainFootRight h4{
    font-size: 3.5vw;
}
.quantity-input{font-size: 4vw;}
.shippingMainFootRight input[type=number].quantity-input,.shippingMainFootRight .cartUnit-quantity-control button{
    height: 7vw;
    width: 7vw;
    font-size: 4vw;
}
.cartUnit-quantity-control{
    display: flex;
    gap: 1vw;
}
.productUnitDesc{
    font-size: 2.5vw;
    line-height: 3vw;
}
.removeAdminProduct{
    width: 3vw;
    height: 3vw;
}
.adminNavBttn p{
    font-size: 2.3vw;
}
#headerSub h3{
    font-size: 4vw;
}
.logo-link{
    width: 22vw;
    height: 22vw;
}
.circle-1,.circle-2 {
    width: 20vw;
    height: 20vw;

}
#joinUs{
    width:69% ;
}
#joinUs p{
    font-size: 2vw;
}
#joinUsCenter{
    min-height: unset;
}
.product-description{
    font-size: 2.10vw;
}
.productContainer{
    flex-direction: column;
}
.product-left{
    width: 75vw;
    height: 75vw;
}
.product-right{
    display: flex;
    flex-direction: column;
    width: 75vw;
}
.product-title{
    text-align: center;
}
.product-price{
    margin: auto;
}
.product-description{
    font-size: 3.5vw;
}
.product-quantity button, .cartUnit-quantity-control button,input[type=number].quantity-input{
    width: 15vw;
    height: 15vw;
}
.product-quantity .quantity-input{
    font-size: 7vw;
}
.product-quantity{
    display: flex;
    gap: 3vw;
    margin: auto;
}
.add-to-cart{
    font-size: 6.5vw;
}
.orderPriceDetails small{
    font-size: 2vw;
}

}
@media only screen and (max-width:425px){
	.careLi {
	    flex: 0 0 100.1%;
	    display: flex;
	    box-sizing: border-box;
	    padding: 0.3vw;
	    flex-direction: column;
	    margin-top: 3vw;
	    margin-bottom: 3vw;
	}
	h1 {
	    font-size: 5.3vw;
	}
	h2 {
    	font-size: 4.3vw;
	}
	h3 {
    	font-size: 3.6vw;
	}
	h4 {
    	font-size: 3.3vw;
	}
	p{
		font-size: 3.9vw;
	}
	input{
    	font-size: 3.7vw
	}
	.menu-btn {
    cursor: pointer;
    width: 4vw;
    height: 4vw;
    padding: 2vw;

}
.menu-list{
	font-size: 4.3vw;
	gap: 2vw;
  }
.menuContainer{
	right: 2vh;
}
.onlineRdv h3{
    font-size: 4vw;
}
#locationHead{
  margin-top: 14vw;
}
#locationImgContainer{
    margin-top: 14vw;
}
.thumbnailLocation.active {
    width: 60vw; 
    height: 90vw;
}
#closeIframe p{
	font-size: 7vw;
}
#closeIframe {
	top: 4vw;
    padding-right: 2vw;
    padding-left: 2vw;
}
.careBoxHead{
    height: 70vw;
}
.careText{
	    width: 95%;
    margin: auto;
}
#headerLogo{
	height: 21vw !important;
}
#headerSub{
	flex-direction: column;
	margin-right: 21vw;
}
header{
	flex-direction: column-reverse;
	top: 6vw
}
.thumbnail.active {

    width: 100vw;
    height: 100vw;
}
#locationImgContainer{
	height: 80vw;
}

.menu{
	top: 50vw;
	left: 3vw;
	right: unset;
}

.hamburger {
    width: 4vw;
    height: 0.7vw;
    background-color: #ffffff;
    margin: 0.6vw 0;
    transition: 0.4s;
}
.hamburger.active {
position: absolute;
}
.hamburger.active:nth-child(1) {
margin-top: 8.3%;
}
.hamburger.active:nth-child(3) {
margin-top: 8.3%;
}
	.txtCenter h1{
		width: max-content;
		width: 100%;
	}
	.careImgBox{
		height: 75vw;
	}
	#lettreMotivation{
		width: 100%
	}
	#formInside{
		flex-direction: column;
	}
	#contactContainer form{
		max-width: 80vw;
		padding: 5vw;
	}
	#pluriImgs{
		height: 75vw;
		width: 100vw;
	}
	#pluriTexts{
		width: 100vw;
	}

	#rdvBttn h4{
  		font-size: 6.2vw;
	}
	#equipe{
  margin-top: 52vw;
}
 #infrastructure{
	margin-top: 22vw; 	
 }
	.teamLi{
		/*
 if the rootpack are draw, get the position to netx call and stuff to do
		*/
		margin: auto;
		height: 163vw;
		padding-bottom: 12vw;
		flex: 0 0 95.9vw;
	}
	.teamImgCont{
		height: 223vw;
	}
	.teamInfos{
		height: auto;
	}
	.teamInfos p{
		font-size: 4.7vw;
	}
	.teamInfos h3{
		font-size: 5.6vw;
	}
	#introBanner{
		height: 185vw;
	}
	.thumbnails{
		flex-direction: column;
	}
	/*INIT MEDIA QUERY*/
	.shopBttn p {
        font-size: 7vw;
    }
	.header-icons {
        gap: 1vw;
    }
	.header-icons > span {
        width: 6vw;
        height: 6vw;
    }
	.favoriteProduct {
        height: 10.5vw;
        width: 10.5vw;
    }
	.product-images-ul-shop {
        height: 108vw;
    }
	.shopMainFootrightUl {
        grid-template-columns: repeat(1, 1fr);
    }
	#copyrightLogo{
		width: 20vw;
	}

	.accountDropdown h3 {
        font-size: 3vw;
    }
	    .accountDropdown {
        margin-top: 7vw;
    }
	.favoriteCategoryMenuList{
		grid-template-columns: repeat(1, 1fr);
	}
	.favoriteUnit{
		width: 100%;
	}
	.favoriteUnit-images-ul{
		width: 100%;
    	height: 108vw;
	}
	.discountedPrice small{
		font-size: 3vw;
	}
	.favoriteUnit-info h1{
		font-size: 7vw;
	}
	.cartMainFoot{
		flex-direction: column;
	}
	.shipping-bttn{
		width: max-content;
		font-size: 7.5vw;
	}
	.favoriteUnit-images-ul, .cartUnit-images-ul{
		width: 21vw;
    	height: 21vw;
	}
	.cartUnitTitle{
		font-size: 7vw;
	}
	.cartUnitPrice, .cartUnitTotal{
		font-size: 3.5vw;
	}
	.cartUnitPrice{
		display: flex;
		flex-direction: column;
	}
	.cartUnit-images-ul{
		width: 26vw;
        height: 26vw;
	}
	.orderCard-unit{
		flex-direction: column;
	}
	.orderCard-left{
		width: 40vw;
    	height: 40vw;
	}
	.orderAddress, .userInfos{
		font-size: 4vw;
	}
	.cartTitle, .shippingTitle, .paymentTitle, .ordersTitle{
		font-size: 8vw;
	}
	.orderCard-info{
		width: 100%;
		padding: unset;
	}
	.orderCard-info p{
		margin-top: 0;
		margin-bottom: 0;
	}
	.orderCard-right{
		width: 00%;
	}
	.ordersMain, .orderMain {
    	margin-top: 20vw;
	}
	.favoriteUnit-images-ul, .cartUnit-images-ul {
        width: 100%;
        height: auto;
    }
	.shopBannerLow .uniserTitle {
        font-size: 15vw;
    }
	.secondTitle {
        font-size: 15vw;
    }
	.product-info-shop h1{
		font-size: 10vw;
	}
	.product-info-shop h2{
		font-size: 7vw;
	}
	#adminLoginForm h3{
		font-size: 5.5vw;
	}
	#adminLoginForm{
		margin-top: 3vw;
	}
	#adminLoginForm button, .submitFormAdmin{
		font-size: 5vw;
		margin-bottom: 6vw;
	}
	/* 3. Afficher le Bouton Hamburger */
    #mobileMenuToggle {
        display: block; /* Affiche le déclencheur */
        position: fixed; /* Reste visible même si l'utilisateur scroll */
        top: 20px;
        right: 20px;
        z-index: 1001;
        background: none;
        border: none;
        cursor: pointer;
        /* Ajout d'une icône de hamburger simple ou utilisez l'élément <span> */
        font-size: 24px; 
		visibility: visible;
    }
    
    /* 4. Masquer le Menu par défaut sur Mobile */
    #adminNavList {
        /* Masqué par défaut */
        display: none;
        
        /* Configuration du menu plein écran */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.95); /* Overlay sombre */
        z-index: 1000;
        
        /* Disposition en colonne */
        flex-direction: column;
        justify-content: center; /* Centre verticalement */
        align-items: center; /* Centre horizontalement */
        
        /* Transition pour un déploiement plus fluide (optionnel) */
        transition: opacity 0.3s ease-in-out; 
        opacity: 0;
		visibility: hidden;
    }
    
    /* 5. État Déployé (ajouté par la classe JS 'is-open') */
    #adminNavList.is-open {
        display: flex;
        opacity: 1; /* Rendre visible */
		visibility: visible;
		z-index: 13;
    }
    
    /* 6. Optionnel : Style des liens dans le menu déployé */
    #adminNavList li {
        margin: 20px 0;
    }
    
    #adminNavList .adminNavBttn {
        /* Assurer que les boutons sont grands et lisibles */
        font-size: 1.5rem; 
        color: white; /* Assurez-vous qu'ils sont visibles sur le fond sombre */
        background: none;
        border: none;
		height: auto;
    }
	.mobileMenuToggle{
		display: flex;
        cursor: pointer;
        width: 4vw;
        height: 4vw;
		position: relative;
        padding: 2vw;
		z-index: 22;
		background-color: #c94597;
    	border-radius: 6vw;
    }
	.mobileMenuToggle .hamburger.active{
		position: absolute;
    }
	.mobileMenuToggle .hamburger.active:nth-child(1){
		transform: rotate(-45deg) translate(-1%, -1%);
		        margin-top: 1.5vw;
	}
	.mobileMenuToggle .hamburger.active:nth-child(2){
		opacity: 0;
	}
	.mobileMenuToggle .hamburger.active:nth-child(3){
		    transform: rotate(45deg) translate(-1%, -1%);
			margin-top: 1.5vw;
	}
	#adminLogout{
		width: 10vw;
		height: 10vw;
		
	}
	.adminNavBttn span{
		width: 7vw;
		height: 7vw;
	}
	.adminNavBttn img{
		    filter: invert(1);
	}
	.adminNavBttn p {font-size: 6vw;}
	#adminDashboardNav ul li:first-child{
		margin: auto;
		margin-bottom: 1vw;
    	margin-top: 19vw;
	}
	.homeBttn{
		height: 13vw;
		width: 13vw;
	}
	.productUnitDesc{
		font-size: 3vw;
		line-height: 6vw;
	}
	.adminProductList .productUnit{
		flex-direction: column-reverse;
	}
	.productUnit{
		border-bottom: solid #c94597;
	}
	.adminProductList .product-images-ul{
		width: 100%;
    	height: 92vw;
	}
	.adminProductList .product-info{
		width: 100%;
	}
	.adminProductList .productUnitPrice{
		font-size: 5vw;
	}
	.adminProductList .productUnitTitle{
		text-align: center;
	}
	.priceContMerge h3, .reductionMerge h3{
		font-size: 4.25vw;
	}
	.adminProductSymbol{
		font-size: 4.25vw;
	}
	input#productPrice, input#productReduction{
		margin: auto;
    	height: auto;
		margin-top: 0;
		margin-bottom: 0;
	}
	#productDescription{
		font-size:2.5vw;
	}
	.searchBar{
		height: 9vw;
	}
	#productTitle{
		font-size: 4vw;
	}
	#productPriceCont label{
		height: unset;
	}
	.reductionMerge{
		margin-bottom: unset;
		margin-top: unset;
	}
	.adminProductSymbol,.productReductionLabel{
		margin-top: 0;
    	margin-bottom: 0;
	}
	.uploadDescCont{
		gap: 2vw;
	}
	.productUnitPrice{
		margin: auto;
	}
	.formControllerBttn{
		height: 3.5vw;
		margin-right: 3vw;
    	margin-top: 3vw;
	}
	.reduction,.productUnitCategory,.productUnitLitrage{
		margin: auto;
	}
	.product-command{
		position: absolute;
		z-index: 2;
		top: 2vw;
		left: 2vw;
	}
	.removeAdminProduct{
		width: 7vw;
		height: 7vw;
	}
	.product-command{
		background-color: #c94597;
        position: absolute;
        border-radius: 7vw;
        z-index: 2;
        top: 2vw;
        left: 2vw;
		padding: 1vw;
	}
	.product-command img{
		filter: invert(1);
	}
	#productTitleCont input,#productLitrageCont input{
		width: 70%;
	}
	#adminDashboardNav .mobileMenuToggle{
		display: inline;
	}
	.productUnitPrice{
		display: flex;
		flex-direction: column;
	}
	.originalPrice{
		text-align: center;
	}
	body .editorMsg .editorMsgMove{
		gap: 2vw;
	}
	body .editorMsg .editorMsgMove .msgAlertIcon img{
		height: 8vw !important;
	}
		.authPopupContent{
		width: 93vw;
	}
	.authPopupContent h2{
		font-size: 12vw;
		margin-top: 11vw;
	}
	.authPopupContent {
		padding-bottom: 5vw;
	}
	.authPopup form h3{
		font-size: 6vw;
	}
	.closeAuthPopup{
		width: 6vw;
		height: 6vw;
		padding: 2vw;
	}    
	.authPopup form button{
		margin: auto;
		width: max-content;
		font-size: 4.5vw;
	}
	.authPopup form p{
		margin-top: 3vw;
		font-size: 4vw;
	}
	.popupHeader h3{
		font-size: 6vw;
	}
	.authPopup form input{
		font-size: 4.2vw;
	}
	.promo-text p{
		font-size: 3.8vw;
	}
	.product-info h3{
		font-size: 4vw;
	}
	.productUnitTitle{
		font-size: 6vw;
	}
	.cartUnit{
		flex-direction: column;
	}
	.cartUnit-info{
		flex-direction: column;

	}
	.cartUnit-center h3 ,.cartUnit-center h4{
		text-align: center;
	}
	.remove-from-cart{
		border: unset;
		background-color: #c94597;
		border-radius: 2vw;
	}
	.totalOrderBox{
		margin: auto;
		text-align: center;
	}
	.paymentMainFoot {
		flex-direction: column-reverse;
	}
	.paymentMainFootLeft{
		width: 100%;
	}
	.totallOrderHead h1{
		font-size: 9vw;
		margin-bottom: 0;
	}
	.remove-from-cart {
		font-size: 8vw;
	}
	.totalOrderBody .uniserTitle,.totalOrderFooter .uniserTitle{
		font-size: 7vw;
	}
	.totalOrderFooter h1,.totalDeliveryLine h2,.totalOrderLine h2{
		margin: auto;
	}
	.payment-option img{
		width: 3vw;
		height: 3vw;
	}
	.totalDeliveryLine{
		gap: 2vw;
	}
	 .paymentMainFootRight h4{
		font-size: 3.5vw;
	 }
	.paymentMainFootRight {
		font-size: 3.5vw;
	}
	.totalDeliveryLine{
		display: flex;
	}
	#paymentPopupBody h2{
		font-size: 3.5vw;
	}
	.totalOrderLine{
		display: flex;
	}
	#promoCodeCont h3{
		font-size: 6vw;
	}
	.giftBoxOption{
		border-top: solid #c94597;
    	margin-top: 3vw;
	}
	.giftBoxThumb{
		height: 40vw;
		width: 40vw;
	}
	.giftBoxCheckboxCont{
		justify-content: center;
	}
	.giftBoxCheckboxLabel h3{
		font-size: 4vw;
	}
	.cartUnit-images-ul{margin: auto;}
	.shippingMainFootRight .cartUnit-images-ul{
		margin: auto;
		height: 60vw;
        width: 60vw;
	}
	.orderCard-info small{
		font-size: 3vw;
	}
	.orderCard-left{
		display: flex;
	}
	.orderCard-unit {
		width: 100%;
		padding: 0;
	}
	.cartUnit-quantity-control{
		margin: auto;
		margin-top: 5vw;
		margin-bottom: 5vw;
	}
	.cart-notif{
		width: 4vw;
		font-size: 3.5vw;

	}
	.totalOrderBody{
		display: flex;
	}
	.totalOrderBody h2{
		margin: auto;
	}
	.totalContainer{
		
	}
	.totalOrderBody .uniserTitle, .totalOrderFooter .uniserTitle{
		font-size: 5vw;
		}
	.totalContainer p {
		font-size: 3vw;
	}
	.totalOrderBody{
		gap: 5vw;
	}
	.totalOrderFooter{
		border-top:unset ;
	}
	.cartUnit-images-ul{
		width: 25vw;
        height: 25vw;
	}

}
@media only screen and (max-width:375px){
	h1 {
	    font-size: 6.6vw;
	}
	h2 {
    	font-size: 6.4vw;
	}

	h3 {
    	font-size: 6.09vw;
	}
	h4 {
    	font-size: 5.2vw;
	}
	p{
		font-size: 4.44vw;
	}
	input{
    	font-size: 4.44vw
	}
	html{

	}

	#joinUsCenter{
		min-height: 29vw;
	}
	.careBoxHead{
    height: 72vw;
}
	#headerLogo{
		height: 28vw;
	}
	#headerSub{
		margin-left:  3vw;
		margin-right: auto;
	}
	#locationClose span{
		width: 10vw;
		height: 10vw;
		border-radius: 6vw;


	}
	.thumbnailLocation.active {
    width: 50vw; 
    height: 55vw;
	}
	.menu-list{
		font-size: 6.3vw;
		gap: 3vw;
	}
	.header-icons{
		gap: 4vw;
	}
	.header-icons > span{
		width: 7vw;
		height: 7vw;
	}
	.shopBttn p {
        font-size: 7vw;
    }
		.secondTitle{
		font-size: 15vw;
	}
	.shopBannerLow .uniserTitle{
		font-size: 15vw;
	}
		.shopMainFootrightUl{
		grid-template-columns: repeat(1, 1fr);
	}
		.product-images-ul-shop{
		height: 108vw;
	}
	.favoriteProduct{
		height: 10.5vw;
		width: 10.5vw;
	}
	.discountedPrice small{
		font-size: 4vw;
	}
	.accountDropdown h3{
		font-size: 3vw;
	}
	.accountDropdown{
		margin-top: 9vw;
	}
	.authPopupContent{
		width: 93vw;
	}
	.authPopupContent h2{
		font-size: 12vw;
		margin-top: 11vw;
	}
	.authPopupContent {
		padding-bottom: 5vw;
	}
	.authPopup form h3{
		font-size: 6vw;
	}
	.closeAuthPopup{
		width: 6vw;
		height: 6vw;
		padding: 2vw;
	}    
	.authPopup form button{
		margin: auto;
		width: max-content;
		font-size: 4.5vw;
	}
	.authPopup form p{margin-top: 3vw;}
	.popupHeader h3{
		font-size: 6vw;
	}
	.cartMainFoot{
		flex-direction: column;
	}
	.shipping-bttn{
		width: max-content;
		font-size: 5.5vw;
	}
	.favoriteUnit-images-ul, .cartUnit-images-ul{
		width: 21vw;
    	height: 21vw;
	}
	.cartUnitTitle{
		font-size: 7vw;
	}
	.cartUnitPrice, .cartUnitTotal{
		font-size: 3.5vw;
	}
	#applyPromoBtn{
		margin-top: 7vw;
		padding: 2vw;
    	font-size: 5vw;
	}
	.totallOrderHead h1{
		font-size: 9.5vw;
		margin-bottom: 0;
	}
	.freeShippingNotice{
		font-size: 3vw;
	}
	.totalOrderFooter{
		border-top: unset;
	}
	#promoCode{
		width: 42vw;
	}
	.cartTitle, .shippingTitle, .paymentTitle, .ordersTitle{
		font-size: 7.5vw;
	}
	.shippingMainFootLeft h3{
		font-size: 5.5vw;
	}
	.shippingMainFootLeft h1, .shippingMainFootLeft h2{
		font-size: 7.5vw;
	}
	.shipping-row{
		flex-direction: column;
	}
	.shippingMainFoot{
		flex-direction: column-reverse;
	}
	.shippingMainFootRight .cartUnitTitle, .paymentMainFootRight .cartUnitTitle{
		font-size: 7vw;
	}
	.shippingMainFootRight h4, .paymentMainFootRight h4{
		font-size: 3.5vw;
	}
	.shippingMainFootRight .cartUnit-quantity-control button, .shippingMainFootRight input[type=number].quantity-input{
		width: 8.5vw;
		height: 8.5vw;
	}
	.cartUnit-quantity-control{
		display: flex;
		gap: 3vw;
		margin-top: 3vw;
	}
	input[type=number].quantity-input{
		font-size: 4vw;
		-webkit-appearance: none;
  		margin: 0; /* Important pour Firefox/Safari de ne pas laisser d'espace */
	}
	#shippingPickup{
		display: flex;
    	flex-direction: column;
	}
	#validateShipping{
		font-size: 5.5vw;
		margin-top: 15vw;
		padding-right: 3vw;
        padding-left: 3vw;
	}
	.cartUnit-images-ul{
		width: 26vw;
        height: 26vw;
	}
	#joinUsCenter{
		
	}
	#joinUsCenter p {
		font-size: 3vw;
	}


}
@media only screen and (max-width:320px){
	h1 {
	    font-size: 6.6vw;
	}
	h2 {
    	font-size: 6.4vw;
	}

	h3 {
    	font-size: 6.09vw;
	}
	h4 {
    	font-size: 5.72vw;
	}
	p{
		font-size: 4.80vw;
	}
	input{
    	font-size: 4.80vw
	}
	.shopBttn p {
        font-size: 7.5vw;
    }
	.header-icons{
		gap: 4vw;
	}
	.header-icons > span{
		width: 7.5vw;
		height: 7.5vw;
	}
	.secondTitle{
		font-size: 15vw;
	}
	.shopBannerLow .uniserTitle{
		font-size: 15vw;
	}
	.lil-duo{
		font-size: 13vw;
	}
	.shopMainFootrightUl{
		grid-template-columns: repeat(1, 1fr);
	}
	.product-images-ul-shop{
		height: 108vw;
	}
	.favoriteProduct{
		height: 10.5vw;
		width: 10.5vw;
	}
	.discountedPrice small{
		font-size: 3vw;
	}
	.accountDropdown h3{
		font-size: 3vw;
	}
	.accountDropdown{
		margin-top: 9vw;
	}
		.authPopupContent{
		width: 93vw;
	}
	.authPopupContent h2{
		font-size: 12vw;
		margin-top: 11vw;
	}
	.authPopupContent {
		padding-bottom: 5vw;
	}
	.authPopup form h3{
		font-size: 6vw;
	}
	.closeAuthPopup{
		width: 6vw;
		height: 6vw;
		padding: 2vw;
	} 
	.authPopup form button{
		margin: auto;
		width: max-content;
		font-size: 4.5vw;
	}
	.favoriteUnit-images-ul, .cartUnit-images-ul{
		width: 21vw;
    	height: 21vw;
	}
	.cartUnitTitle{
		font-size: 7vw;
	}
	#shippingPickup{
		display: flex;
    	flex-direction: column;
	}
	
}