/* ================== NAVBAR ================== */

#navBar{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;               /* > contenu pour rester cliquable */
  width: 15vw;
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  

  
  overflow: visible;
}

#navBar > div{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;      /* aligné à droite */
  text-align: left;
  height: 60%;
  margin-top: 0;
  padding-right: 0vw;
  font-size: 2.3vw;           /* taille de base des liens (en vw) */
  
    overflow: visible;
    
    
      border-left: none;          /* pas de bordure à droite */
  border-right: none;         /* on s'assure de ne pas avoir de conflit */
  border-left: 3px solid black; /* trait noir côté gauche */
  
  margin-left : 10%;
}

#navBar > div a,
#navBar > div a.catalogue_mark{
  color: black;               /* une seule couleur (avant conflit avec blanc) */
  text-decoration: none;
  display: block;
  width: 55%;
  margin: 10px 0;

  /* Effet : scale + translateX + opacité pilotés par variables CSS */
  transform-origin: left center;
  transform: translateX(var(--tx, 0)) scale(var(--scale, 1));
  opacity: var(--opacity, .75);
  transition: transform 500ms cubic-bezier(.22,1,.36,1),
              opacity 350ms ease,
              color 350ms ease;
  will-change: transform;
  
      overflow: visible;
}

#navBar > div a.catalogue_mark.is-active{
  font-weight: 700;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  #navBar > div a.catalogue_mark{ transition: none; }
}

/* ================== CATALOGUE LAYOUT ================== */

#catalogue_container{
  display: flex;
  flex-direction: row;
  justify-content: end;
  width: 100%;
  min-height: 100vh;
}

#catalogue{
  width: 75%;
  min-height: 100vh;
  margin-right: 3vw;
}

.catalogue_section{
  min-height: 100vh;
  font-size: 2em;
  margin-top: 3vw;

  /* ancre qui s’arrête un peu au-dessus du titre */
  scroll-margin-top: 12vh;
  padding-top: 10vh;  /* tu as choisi padding : ok */
}

.titre_section_vestiaire{
    font-size : 4vw;
    font-style: italic;
}

.intro_vestiaire {
    margin-top : 3vw;
    font-style: italic;
    font-size : 1.2vw;
}


.divArticleCatalogue .button_details{
    display : none;
}





.price_block {
  display:flex;
  flex-direction:column;
  align-items:flex-start; /* ou center selon ton design */
  gap: 2px;
}

/* ancien prix barré */
.old_price {
  text-decoration: line-through;
  opacity: .6;
  font-size: .9em;
  margin:0;
  padding:0;
}

/* prix actuel : ton h3 déjà stylé */
.current_price {
  margin:0;
}

/* ================== CARTES / GRILLE ================== */

.rowCatalogue{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin-top: 5vw;
}

.divArticleCatalogue{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 28vw;
  width: 32%;
  overflow: visible;
  align-items: center;
}

.divImageCatalogue{
  height: 60%;
  width: 77%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.imgWrapper{
  width: auto;
  height: 100%;
  border-radius: 2vw;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
}

.imgWrapper img{
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}

.divArticleCatalogue h3,
.divArticleCatalogue p{
  font-size: 2vw;
  overflow: hidden;
}

/* ================== PAGE DÉTAIL PRODUIT ================== */

.container{
  display: flex;
  flex-direction: row;
  width: 92vw;
  margin: 2vw auto;
  gap: 5vw;
}

.visuel{
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  padding-bottom: 30px;
}

.slideshow{
  width: auto;
  max-width: 70%;
  position: relative;
  overflow: visible;
  border-radius: 1vw;
  background: white;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  height: 60%;
  margin: 20px;
}

.slideshow img{
  width: 100%;
  height: 100%;
  border-radius: 1vw;
  object-fit: contain;
  display: none;
}

.slideshow img.active{ display: block; }

/* La loupe */
.img-zoom-lens {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  width: 15vw;   /* taille horizontale */
  height: 15vw;  /* taille verticale */
  background-repeat: no-repeat;
  background-size: 200% 200%;
  pointer-events: none;
  display: none;
  z-index: 10;
}



.dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 3vw;
}

.dot {
  width: 20px;
  height: 20px;
  background: grey;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  transition: all 0.25s ease; /* anime taille + couleur */
  overflow: hidden;
}

.dot:hover {
  background: white;
}

.dot.active{ background: black; }

.info{
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.product-title{
  font-size: 2em;
  font-weight: bold;
}

.price{
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
}

.toggle-section{
  border-top: 1px solid #ccc;
  padding-top: 1vw;
}

.toggle-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
}

.toggle-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.toggle-section.open .toggle-content{
  max-height: 300px;
  margin-top: 10px;
}

.add-to-cart{ font-size: 1.8vw; }


/*------------------ FILTRES ------------------------*/


#filters_container{
    display : flex;
    flex-direction: column;
    align-items: start;
    width : 80%;
    margin-left : 20%;
    margin-top : 5vw;
}

.filter_group {
    display : flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.filter_group label{
    width : auto;
}



/*-------------------------------------------------- RESPONSIVE -------------------------------------------------*/

/* ===== NAV EN BAS - MOBILE ===== */
@media (max-width: 768px){
              :root {
            --nav-mobile-h: clamp(48px, 8vw + 28px, 68px);
          }
        
          /* Conteneur barre de nav : fixed en haut */
        #navBar{
          position: fixed;
          top: 0;
          left: 0;
          transform: none;
          width: 100vw;
          height: var(--nav-mobile-h);
          z-index: 70;
          
          /* 👇 fond translucide + blur */
          background: rgba(255,255,255,0.6);   /* blanc translucide */
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(2px); /* pour Safari */
        
          border-left: none;
          border-bottom: 1px solid #000;
          display: block;
        }
        
        
          /* La liste des liens : horizontale + scrollable */
          #navBar > div{
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 6vw;
            height: 100%;
            margin: 0;
            padding: 0 4vw;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
            border-left: none;
            border-right: none;
          }
        
          /* Liens : en ligne, lisibles, pas de scale */
          #navBar > div a,
          #navBar > div a.catalogue_mark{
            flex: 0 0 auto;
            width: auto;
            margin: 0;
            white-space: nowrap;
              font-size: clamp(14px, 4vw, 18px);
            line-height: 1.2;
            padding: .45em .2em;
            text-decoration: none;
            color: #000;
        
            transform: none !important; /* on garde neutre par défaut */
            opacity: 1 !important;
            will-change: auto;
            transition: color 200ms ease;
        
            scroll-snap-align: start;
          }
          
        
          
          /* --- Mettre l’onglet sélectionné un peu plus grand --- */
        #navBar > div a.catalogue_mark.is-active{
          font-weight: 700;
          text-decoration: underline;
          text-underline-offset: .25em;
        
          /* léger zoom sur l’actif */
          transform: scale(1.12) !important;
          transform-origin: center bottom;
        }
        
        /* évite que le zoom soit rogné */
        #navBar{ overflow: visible; }
        
        
        
          /* Scrollbar horizontal optionnel */
          #navBar > div::-webkit-scrollbar{
            height: 6px;
          }
          #navBar > div::-webkit-scrollbar-thumb{
            background: rgba(0,0,0,.25);
            border-radius: 3px;
          }
        
          /* IMPORTANT : compenser la barre fixe */
          body{
            padding-top: var(--nav-mobile-h);
          }
          .catalogue_section{
            scroll-margin-top: calc(var(--nav-mobile-h) + 8px);
          }
          
          
            #navBar > div::-webkit-scrollbar-thumb{
            background: var(--back_header); /* pouce (thumb) */
            border-radius: 999px;
            border: 2px solid transparent; /* crée un peu d’air autour */
            background-clip: content-box;
          }
          #navBar > div::-webkit-scrollbar-thumb:hover{
            background: rgba(0,0,0,.55);
            background-clip: content-box;
          }
          #navBar > div::-webkit-scrollbar-thumb:active{
            background: rgba(0,0,0,.75);
            background-clip: content-box;
          }
        
          /* Catalogue centré en mobile */
          #catalogue_container{
            justify-content: center;
          }
          #catalogue{
            width: 92vw;
            margin: 0 auto;
          }
          
          
        .intro_vestiaire {
            margin-top : 6vw;
            font-size : 3vw;
        }
        
        
        .catalogue_section{
          font-size: 2vw;
          margin-top: 3vw;
          padding-top: 10vh;  /* tu as choisi padding : ok */
        }
        
        .titre_section_vestiaire{
            font-size : 6vw;
        }
        
        .rowCatalogue{
          margin-top: 5vw;
        }
        
        .divArticleCatalogue{
          height: 25vh;
          width: 100%;
          overflow: visible;
          gap : 2%;
        }
        
        .divArticleCatalogue .button_details{
            display : none;
        }
        
        .divArticleCatalogue p,
        .divArticleCatalogue h3
        {
            font-size: 3.5vw;
        }
        
        .divImageCatalogue{
          height: 60%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: visible;
        }
        
        
        .button_details{
            height: 5vh;
            font-size: 3.5vw;
            border-radius: 2vw;
        }
        
        
                /* La loupe */
        .img-zoom-lens {
          position: absolute;
          border: 2px solid #000;
          border-radius: 50%;
          width:65vw;   /* taille horizontale */
          height: 65vw;  /* taille verticale */
          background-repeat: no-repeat;
          background-size: 200% 200%;
          pointer-events: none;
          display: none;
          z-index: 10;
        }
        
        
        .filter_group select{
                height : 10vw;
                padding-left : 4vw;
                padding-right : 4vw;
                width : 45vw;
                font-size: 3vw;
            }




}