/* scroll-common.css — styles partagés du chip-scroll (« scrollable-tabs »).
   Contient désormais la MISE EN PAGE COMPLÈTE (flex horizontal + flèches), identique à
   produits1/css/scroll.css, pour que produits2/produits4/scroll.php (qui ne chargent QUE
   ce fichier) défilent et naviguent correctement :
     - plus de défilement vertical parasite (la liste est en flex horizontal) ;
     - flèches gauche/droite positionnées + bascule .active dans les deux sens ;
     - flèches masquées quand il n'y a rien à défiler (.no-items / pas de débordement). */

/* ===== Chip (item) ===== */
.profile-dropdown-btn a span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}
.badge-small {
  font-size: 0.7rem;
  margin-left: 5px;
  color: #ff6b35;
}

/* ===== Filtrage par catégorie (affichage/masquage des items) ===== */
.scrollable-tabs-container .category-filter-item {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.scrollable-tabs-container .category-filter-item.hidden {
  opacity: 0;
  transform: scale(0.8);
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  display: none !important;
}
.scrollable-tabs-container .category-filter-item.visible {
  opacity: 1;
  transform: scale(1);
  animation: fadeInUp 0.6s ease forwards;
  display: flex !important;
}

/* ===== Conteneur ===== */
.scrollable-tabs-container {
  font-family: "Roboto", sans-serif;
  max-width: 1300px;
  margin: 16px auto;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  min-height: 80px;
  transition: min-height 0.3s ease;
}
/* Ces styles visent les FLÈCHES du carrousel — on les scope à .left-arrow/.right-arrow,
   sinon ils écrasent aussi le SVG du badge de vérification (.wzvb) placé dans les titres
   (svg forcé à 54px, noir, arrondi → icône de certification déformée/masquée). */
.scrollable-tabs-container .left-arrow svg,
.scrollable-tabs-container .right-arrow svg {
  width: 54px;
  height: 54px;
  padding: 8px;
  cursor: pointer;
  color: #000;
  border-radius: 50%;
  pointer-events: auto;
  font-size: xx-large;
}
.scrollable-tabs-container .left-arrow svg:hover,
.scrollable-tabs-container .right-arrow svg:hover {
  background: #333;
}
/* Cadrage du badge de vérification (.wzvb) dans les chips : taille cohérente avec le petit
   texte, aligné verticalement au texte, glow contenu (ne déborde pas la ligne). */
.scrollable-tabs-container .wzvb {
  width: 17px !important;
  height: 17px !important;
  margin: 0 4px !important;
  vertical-align: middle !important;
  position: relative;
  top: -1px;
  flex: 0 0 auto;
}
.scrollable-tabs-container .wzvb svg { width: 17px !important; min-width: 17px !important; height: 17px !important; flex: 0 0 auto !important; }
/* Dans les chips (texte à overflow:hidden + petite hauteur), la LUEUR animée du badge
   (::before + pulse scale) gonflait la ligne et débordait → badge « coupé/désorienté ».
   On la retire ici : seule l'icône (cercle bleu + coche) reste, propre et centrée. */
.scrollable-tabs-container .wzvb::before,
.scrollable-tabs-container .wzvb .wzvb-shine { display: none !important; }
.scrollable-tabs-container .wzvb { vertical-align: middle !important; top: 0 !important; line-height: 0 !important; }
/* Le titre + badge + emojis centrés verticalement (sinon le badge est décalé/coupé
   par la hauteur de ligne gonflée par les emojis). Flex = alignement fiable. */
.scrollable-tabs-container .profile-dropdown-btn a span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px;
}

/* ===== Liste défilante : flex horizontal → fini le scroll vertical ===== */
.scrollable-tabs-container ul {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: scroll;
  overflow-y: hidden;          /* empêche tout défilement vertical parasite */
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  min-height: 60px;
}
.scrollable-tabs-container ul.dragging a { pointer-events: none; }
.scrollable-tabs-container ul.dragging { scroll-behavior: auto; }
.scrollable-tabs-container ul::-webkit-scrollbar { display: none; }

.scrollable-tabs-container li {
  display: flex;
  align-items: center;
}
.scrollable-tabs-container li a {
  text-decoration: none;
  color: #000;
  border-radius: 50px;
  cursor: pointer;
  background: #e6eaf0;
  white-space: nowrap;
  transition: all 0.3s ease;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scrollable-tabs-container li a span {
  display: inline-block;
  padding: 8px 12px;
  font-size: 15px;
  border-radius: 50px;
}

/* ===== Carte produit : bouton + IMAGE (manquait → produits invisibles sur produit2/4) ===== */
.profile-dropdown-btn a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e6eaf0;
  padding-right: 1rem;
  font-size: 0.9rem;
  font-weight: 900;
  border-radius: 50px;
  color: #393e46;
  cursor: pointer;
  border: 1px solid #242435;
  text-decoration: none;
  transition: box-shadow 0.2s ease-in, background-color 0.2s ease-in, border 0.3s;
}
.profile-dropdown-btn a:hover {
  background-color: rgba(127, 183, 126, 0.1);
  box-shadow: 0px 2px 8px 0px rgba(34, 124, 112, 0.2);
}
.profile-dropdown-btn a .profile-img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.profile-dropdown-btn a .profile-img i {
  position: absolute;
  right: 0;
  bottom: 0.3rem;
  font-size: 0.5rem;
  color: #82cd47;
}

/* ===== Flèches de navigation ===== */
.scrollable-tabs-container .right-arrow,
.scrollable-tabs-container .left-arrow {
  position: absolute;
  height: 100%;
  width: 100px;
  top: 0;
  display: none;
  align-items: center;
  padding: 0 10px;
  pointer-events: none;
  z-index: 2; /* au-dessus des chips, qui créent un stacking context via transform */
}
.scrollable-tabs-container .right-arrow.active,
.scrollable-tabs-container .left-arrow.active {
  display: flex;
}
.scrollable-tabs-container .right-arrow {
  right: 0;
  background: linear-gradient(to left, #e6eaf0 50%, transparent);
  justify-content: flex-end;
}
.scrollable-tabs-container .left-arrow {
  background: linear-gradient(to right, #e6eaf0 50%, transparent);
}

/* ===== Flèches masquées quand il n'y a rien à défiler ===== */
.scrollable-tabs-container.no-items .left-arrow,
.scrollable-tabs-container.no-items .right-arrow {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   #7 — RESPONSIVE (ce fichier n'avait AUCUN @media → chips/flèches trop
   gros sur mobile). On réduit chips, textes et flèches par palier.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .scrollable-tabs-container { margin: 10px auto; min-height: 64px; }
  .scrollable-tabs-container ul { gap: 10px; min-height: 48px; }
  .scrollable-tabs-container li a { font-size: 12.5px; }
  .scrollable-tabs-container li a span { font-size: 13px; padding: 6px 10px; }
  .scrollable-tabs-container .profile-dropdown-btn a { font-size: 0.8rem; padding-right: .7rem; }
  .scrollable-tabs-container .profile-dropdown-btn a .profile-img { width: 2.4rem; height: 2.4rem; }
  .scrollable-tabs-container .left-arrow,
  .scrollable-tabs-container .right-arrow { width: 62px; padding: 0 6px; }
  .scrollable-tabs-container .left-arrow svg,
  .scrollable-tabs-container .right-arrow svg { width: 42px; height: 42px; padding: 6px; }
}
@media (max-width: 400px) {
  .scrollable-tabs-container li a span { font-size: 12px; padding: 5px 9px; }
  .scrollable-tabs-container .left-arrow svg,
  .scrollable-tabs-container .right-arrow svg { width: 38px; height: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════
   #7 — THÈME SOMBRE : les chips (fond #e6eaf0 clair + texte #000) et les
   flèches (#000, dégradé clair) restaient CLAIRS en mode sombre → adaptés.
   ═══════════════════════════════════════════════════════════════════ */
body.dark-mode .scrollable-tabs-container li a,
html[data-wz-theme="dark"] .scrollable-tabs-container li a,
body[data-theme="dark"] .scrollable-tabs-container li a,
body.dark-mode .scrollable-tabs-container .profile-dropdown-btn a,
html[data-wz-theme="dark"] .scrollable-tabs-container .profile-dropdown-btn a,
body[data-theme="dark"] .scrollable-tabs-container .profile-dropdown-btn a {
  background: rgba(255, 255, 255, 0.06);
  color: #e8eaf0;
  border-color: rgba(255, 255, 255, 0.14);
}
body.dark-mode .scrollable-tabs-container .left-arrow svg,
html[data-wz-theme="dark"] .scrollable-tabs-container .left-arrow svg,
body[data-theme="dark"] .scrollable-tabs-container .left-arrow svg,
body.dark-mode .scrollable-tabs-container .right-arrow svg,
html[data-wz-theme="dark"] .scrollable-tabs-container .right-arrow svg,
body[data-theme="dark"] .scrollable-tabs-container .right-arrow svg {
  color: #e8eaf0;
}
body.dark-mode .scrollable-tabs-container .left-arrow svg:hover,
html[data-wz-theme="dark"] .scrollable-tabs-container .left-arrow svg:hover,
body[data-theme="dark"] .scrollable-tabs-container .left-arrow svg:hover,
body.dark-mode .scrollable-tabs-container .right-arrow svg:hover,
html[data-wz-theme="dark"] .scrollable-tabs-container .right-arrow svg:hover,
body[data-theme="dark"] .scrollable-tabs-container .right-arrow svg:hover {
  background: rgba(255, 255, 255, 0.12);
}
body.dark-mode .scrollable-tabs-container .right-arrow,
html[data-wz-theme="dark"] .scrollable-tabs-container .right-arrow,
body[data-theme="dark"] .scrollable-tabs-container .right-arrow {
  background: linear-gradient(to left, #10131f 45%, transparent);
}
body.dark-mode .scrollable-tabs-container .left-arrow,
html[data-wz-theme="dark"] .scrollable-tabs-container .left-arrow,
body[data-theme="dark"] .scrollable-tabs-container .left-arrow {
  background: linear-gradient(to right, #10131f 45%, transparent);
}


/* =============================================================================
   Barre de puces sur telephone — vue sur l'ecran reel de l'appareil
   -----------------------------------------------------------------------------
   Capture de l'ecran (adb screencap, pas une capture DevTools) : la deuxieme
   puce etait TRANCHEE NET au bord droit, laissant un aplat blanc dur, et la
   barre touchait les deux bords de l'ecran alors que la carte produit est
   centree — d'ou une impression de decalage.

   Mesure : chaque puce fait 239 px de large sur un ecran de 360, parce qu'elle
   s'adapte a son contenu (vignette + nom complet + badges) sans aucune limite.
   Deux puces ne peuvent donc pas coexister a l'ecran.

   On plafonne la largeur d'une puce, on coupe proprement le nom trop long, et
   on aligne la barre sur l'encart de la carte. Le fondu remplace la coupe
   franche : on comprend qu'il y a de quoi faire defiler au lieu de croire a un
   defaut d'affichage.
   ========================================================================== */
@media (max-width: 620px) {
    .scrollable-tabs-container {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        /* Fondu au bord droit : la puce suivante s'efface au lieu d'etre coupee. */
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
                mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
    }
    .scrollable-tabs-container li { max-width: 58vw; }
    .scrollable-tabs-container li .profile-dropdown-btn { max-width: 100%; }

    /* NE PAS toucher au « display » du lien. Premiere version : j'y avais pose
       « display: flex », ce qui a transforme ses enfants en elements flex — la
       vignette est passee a 196 x 0 et le libelle a 18 px de large. Les puces
       apparaissaient VIDES a l'ecran (constate sur une capture de l'appareil,
       pas en supposant). On se contente donc de borner le lien et de couper
       proprement le texte, sans changer son mode de mise en page. */
    .scrollable-tabs-container li .profile-dropdown-btn > a {
        max-width: 100%;
        overflow: hidden;
    }
    .scrollable-tabs-container li .profile-dropdown-btn > a > span {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
}