/* Bleu Canin - skin liquid glass pose sur le theme parent (classic).
   Charge sur toutes les pages, y compris la home (nav unifiee, voir
   _partials/header.tpl et index.tpl). On ne touche pas au HTML/JS core
   (variantes, ajout panier AJAX...), seulement a l'habillage visuel.
   Les regles specifiques a la fiche produit (galerie, prix, tabs...)
   restent scopees sous #product plus bas ; fond/blob/nav sont globaux. */

/* Outline de focus du navigateur desactive PARTOUT (choix explicite --
   la plupart des grandes zones cliquables du site n'avaient aucun style
   de focus personnalise, donc l'outline par defaut du navigateur
   s'affichait comme un gros cadre autour de l'element clique). */
*,
*::before,
*::after {
  outline: none !important;
}

/* blockwishlist injecte des modales Vue (add-to-wishlist, create, delete...)
   dans le hook displayFooter. Sans le JS/Vue de PrestaShop (page autonome),
   leurs directives ":class" restent inertes et le fond "modal-backdrop"
   reste affiche en plein ecran, bloquant tous les clics (footer inclus).
   Meme regle que custom.css (home-only), dupliquee ici pour les pages
   autonomes comme la categorie. */
.wishlist-add-to,
.wishlist-modal,
.modal-backdrop {
  display: none !important;
}

/* Bandeau newsletter (ps_emailsubscription, hook displayFooterBefore) --
   deja masque sur la home via custom.css, mais cette regle n'est pas
   chargee sur les pages autonomes (categorie, produit...) qui n'incluent
   que product.css : on la duplique ici pour masquer partout. */
.block_newsletter {
  display: none !important;
}

/* ---------- FOOTER -- meme constat que le newsletter ci-dessus : tout
   le style du footer (bulle glass, couleurs, padding) vit dans
   custom.css, charge uniquement sur la home. Duplique ici pour que le
   footer soit correctement stylee (et ses liens visibles/cliquables)
   sur les pages autonomes comme la categorie. ---------- */

.site-footer {
  position: relative;
  z-index: 2;
  background: transparent;
  color: #000000;
  padding: 60px 5vw 100px;
  pointer-events: auto;
  box-sizing: border-box;
}

.site-footer__bubble {
  max-width: 1300px;
  margin: 0 auto;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  overflow: hidden;
}

.site-footer a,
.site-footer button,
.site-footer input {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.site-footer .footer-container {
  background: transparent;
  padding-bottom: 24px;
}

/* Sur mobile, le theme classic replie chaque colonne du footer dans un
   accordeon Bootstrap (<ul id="footer_sub_menu_X" class="collapse">, ou
   #footer_account_list / #contact-infos) avec un fond gris clair code en
   dur (#f6f6f6) -- une regle en classe (.collapse) ne suffisait pas a
   passer devant, on cible donc directement ces ID (specificite plus
   forte, robuste au nombre de colonnes via l'attribut "commence par"). */
.site-footer [id^="footer_sub_menu_"],
.site-footer #footer_account_list,
.site-footer #contact-infos,
.site-footer .collapse {
  background: transparent !important;
  background-color: transparent !important;
}

.site-footer a,
.site-footer .myaccount-title a,
.site-footer .block-contact-title {
  color: rgba(0, 0, 0, 0.75);
}

.site-footer a:hover {
  color: #2323e0;
}

.site-footer h4,
.site-footer .h4,
.site-footer h3,
.site-footer .h3,
.site-footer .col-title,
.site-footer strong,
.site-footer p,
.site-footer .title,
.site-footer .title span,
.site-footer a,
.site-footer span,
.site-footer .block-contact,
.site-footer #contact-infos {
  color: #000000 !important;
}

.site-footer hr {
  border-color: rgba(255, 255, 255, 0.15);
}

.footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding-top: 24px;
  padding-left: 5vw;
  padding-right: 5vw;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-copyright {
  margin: 0;
  font-size: 12px;
  text-align: left;
  color: rgba(0, 0, 0, 0.5);
}

/* Meme logo que la navbar (recette compacte "cote a cote"), reduit pour
   garder les proportions dans le coin bas-droit du pied de page. */
.footer-logo {
  flex-shrink: 0;
  transform: scale(0.85);
  transform-origin: bottom right;
}

@media (max-width: 700px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-copyright {
    text-align: center;
  }

  .footer-logo {
    transform-origin: center bottom;
  }
}

/* Les listes de liens du footer parent utilisent l'accordion Bootstrap
   (.collapse, replie par defaut, deplie au clic via data-toggle=collapse
   + JS Bootstrap). Sur desktop, le titre ".title" declencheur est masque
   (hidden-md-up) donc on force la liste visible en permanence. Sur
   mobile, on veut le comportement accordion reel (ferme par defaut,
   ouvert au clic) -- sans le JS Bootstrap (pages autonomes), on le
   reimplemente nous-memes en JS (voir custom.js) qui bascule la classe
   ".in" + aria-expanded, seules les regles ci-dessous different donc par
   breakpoint plutot que d'etre forcees globalement. */
@media (min-width: 768px) {
  .site-footer .collapse {
    display: block !important;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  .site-footer .collapse {
    display: none;
  }

  .site-footer .collapse.in {
    display: block;
  }

  .site-footer .title[data-toggle='collapse'] {
    cursor: pointer;
  }
}

/* Le fond vit uniquement sur html (voir Bleucanin_Nav::getThemeColorsCss,
   injecte en <style> dans <head> de chaque page) -- pas sur body, pour ne
   pas dupliquer la meme couleur sur deux elements empiles (html ET body).
   body reste explicitement transparent (pas juste "non declare") : le
   theme parent (classic) pose "body { background-color: #fff; }" dans
   theme.css -- sans cette ligne, ce blanc opaque reapparaitrait et
   cacherait le fond de html. */
html {
  background: #b1bee5;
  /* Meme correctif que custom.css (home) : sans ca, toutes les sections
     full-bleed de ces pages (.catalog-hero, .gamme-grid...) sont decalees
     d'environ -scrollbar/2 vers la gauche (100vw compte la scrollbar,
     100% non) -- ici repere via le fil d'ariane (left:30px calcule juste,
     mais rendu a 22.5px a l'ecran car .catalog-hero lui-meme demarre a
     -7.5px). Ces pages chargent product.css, pas custom.css (qui a deja
     ce correctif), d'ou la duplication. */
  scrollbar-gutter: stable;
}

body {
  background: transparent;
  color: #000000;
  font-family: "Helvetica Neue", Arial, sans-serif;
  position: relative;
  /* overflow-x:hidden pose UNIQUEMENT sur html (voir plus haut), pas ici
     aussi : le poser sur les deux a la fois faisait basculer le
     overflow-y implicite de body en "auto" (regle CSS : des qu'un axe
     est force a autre chose que visible, l'autre axe passe de visible a
     auto), creant un second conteneur de scroll interne sur body -- le
     scroll de la page se faisait alors dedans, plus sur "window", et le
     JS qui ecoute window.scrollY (bulle de la nav au scroll) ne
     detectait plus jamais rien. */
}

.ambient-blob {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(80, 80, 235, 0.55), rgba(35, 35, 224, 0.25) 55%, transparent 75%);
  filter: blur(80px);
  /* z-index negatif (pas 0) : chaque page wrapper (.page/.auth-page/
     .contact-page/...) est deja position:relative + z-index:1, donc
     forme son propre contexte d'empilement -- un z-index negatif ici
     reste confine DANS ce contexte et passe sous TOUT le contenu en
     flux normal de la page (titres, panels...), quel que soit l'ordre
     du DOM. Avec z-index:0 (ou sans z-index), le blob restait "positionne"
     et peinturait donc TOUJOURS au-dessus des elements non-positionnes
     (regle de peinture CSS), meme places avant lui dans le DOM -- voir
     le bug .wide-banner__intro-title corrige plus tot pour la meme
     raison, cote inverse. */
  z-index: -1;
  pointer-events: none;
  animation: product-blob-drift 26s ease-in-out infinite alternate;
}

@keyframes product-blob-drift {
  0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  25% { transform: translate(-50%, -50%) translate(28vw, -22vh) scale(1.15); }
  50% { transform: translate(-50%, -50%) translate(-20vw, 30vh) scale(0.9); }
  75% { transform: translate(-50%, -50%) translate(-30vw, -25vh) scale(1.1); }
  100% { transform: translate(-50%, -50%) translate(22vw, 26vh) scale(0.95); }
}

#wrapper,
#main {
  position: relative;
  z-index: 1;
  background: transparent;
}

.page-content {
  background: transparent;
}

/* Filet de securite si des modules venaient un jour se brancher sur les
   hooks displayLeftColumnProduct / displayRightColumnProduct : on ne
   laisse jamais une colonne vide reserver de l'espace blanc. */
#left-column:empty,
#right-column:empty {
  display: none;
}

/* Nav "Bleu Canin" (voir _partials/header.tpl) : structure HTML propre et
   controlee (comme la home), pas un bricolage CSS par-dessus le header
   classic. Une seule pilule de verre, logo / liens / widgets en flex.
   Non scope a #product : c'est LE header du theme, utilise partout. */

/* Meme recette que sur la home : un degrade sombre fixe en haut de
   viewport, sous la nav (z-index inferieur), pour que le texte clair de
   la pilule reste lisible quel que soit le contenu de la page en
   dessous -- sans avoir besoin d'assombrir le verre lui-meme. */
.nav-scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
  z-index: 900;
}

/* #header ne prend pas de place dans le flux (c'est .bc-nav qui est
   fixed) : l'espace pour la pilule est reserve directement sur le
   contenu qui suit (#wrapper/#main plus haut, .hero sur la home). */
/* #header ne prend pas de hauteur lui-meme (c'est .bc-nav qui est
   fixed, sans contenu en flux normal a l'interieur) : un margin-bottom
   sur #header pousse quand meme son sibling suivant vers le bas, sur
   toutes les pages qui l'incluent, sans regle a dupliquer ailleurs. */
#header {
  padding: 0 24px;
  margin-bottom: 100px;
}

/* Sur la home et la grille catalogue, la nav demarre en bandeau plat
   superpose au contenu (voir plus bas .bc-nav:not(.is-scrolled)) : plus
   besoin de reserver de la place pour elle, le contenu doit commencer
   tout en haut de la page. */
body#index #header,
body#category #header,
body#product-list #header,
body#cms #header,
body#search #header {
  margin-bottom: 0;
}

.header-banner {
  display: none;
}

.bc-nav > .container {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0 auto;
}

/* Meme recette que .nav.is-scrolled sur la home : grille 3 colonnes
   (logo / liens / widgets), centree, flottante par-dessus la page.
   Largeur adaptative (pas un pourcentage fixe) : fit-content se cale sur
   la largeur REELLE du contenu (logo + categories + recherche + icones),
   plafonnee a 90vw (90 pas 92 : retour utilisateur, le basculement en
   burger -- pilote par le contenu reel, voir plus bas -- se declenchait
   vers 822px de large, souhaite plutot vers 840px ; 90vw deplace ce point
   de bascule d'environ ces 18px, meme mecanisme sinon) et plancher a
   60vw (jamais plus etroit que ca meme si le contenu tiendrait dans
   moins) -- si le contenu ne tient toujours pas a 90vw, il deborde
   (scrollWidth > clientWidth) et checkBcNavFit() (custom.js) bascule en
   burger via la classe .bc-nav--force-burger, quelle que soit la largeur
   du viewport (plus fiable qu'un seuil en px fixe, qui laissait des
   tablettes "juste au-dessus" du seuil avec un menu entasse ET illisible,
   ou pire, en dessous, avec un menu burger sur un ecran qui avait en fait
   largement la place). */
.bc-nav {
  position: fixed;
  top: 16px;
  /* Centrage sans transform (left:50%+translateX cassait le
     backdrop-filter du sous-menu niche a l'interieur -- bug Chromium
     connu sur backdrop-filter sous un ancetre transforme). */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 999;
  width: fit-content;
  min-width: 60vw;
  max-width: 90vw;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 32px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  /* Ecriture en couleur de base (plus d'override blanc) : le glass est
     assez clair pour rester lisible en texte sombre. */
  color: #000000;
  transition: top 0.3s ease, width 0.3s ease, border-radius 0.3s ease,
    border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
}

/* Sur la home et la grille catalogue specifiquement : la nav demarre en
   large bandeau plat (100%, sans bulle glass) et ne reprend son format
   "bulle" (60%, glass) qu'une fois qu'on a scrolle un peu -- classe
   .is-scrolled ajoutee en JS (voir _partials/header.tpl). Sur les autres
   pages (fiche produit...), la nav reste en bulle en permanence. */
body#index .bc-nav:not(.is-scrolled),
body#category .bc-nav:not(.is-scrolled),
body#product-list .bc-nav:not(.is-scrolled),
body#cms .bc-nav:not(.is-scrolled),
body#search .bc-nav:not(.is-scrolled) {
  top: 0;
  width: 100%;
  border-radius: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Nav en blanc sur la home ET toutes les vues grille (categorie/
   listing/recherche) / A propos / CMS : leurs heros ont tous desormais
   une photo/video + filtre sombre (meme traitement, voir
   .catalog-hero__overlay dans product.css -- la recherche aussi
   maintenant, elle reutilise la photo de la page A propos, voir
   search.tpl), la nav qui les superpose doit donc etre lisible en blanc
   elle aussi. UNIQUEMENT en format "plat" (:not(.is-scrolled)) -- des
   qu'on scrolle et qu'elle repasse en "bulle" glass (sur le fond clair
   normal de la page), tout redevient noir (couleur de base, .bc-nav a
   plus bas dans ce fichier). */
body#index .bc-nav:not(.is-scrolled) .nav__logo,
body#category .bc-nav:not(.is-scrolled) .nav__logo,
body#product-list .bc-nav:not(.is-scrolled) .nav__logo,
body#cms .bc-nav:not(.is-scrolled) .nav__logo,
body#search .bc-nav:not(.is-scrolled) .nav__logo,
body#index .bc-nav:not(.is-scrolled) .bc-nav__icon-link,
body#category .bc-nav:not(.is-scrolled) .bc-nav__icon-link,
body#product-list .bc-nav:not(.is-scrolled) .bc-nav__icon-link,
body#cms .bc-nav:not(.is-scrolled) .bc-nav__icon-link,
body#search .bc-nav:not(.is-scrolled) .bc-nav__icon-link,
body#index .bc-nav:not(.is-scrolled) .nav__logo-tagline,
body#category .bc-nav:not(.is-scrolled) .nav__logo-tagline,
body#product-list .bc-nav:not(.is-scrolled) .nav__logo-tagline,
body#cms .bc-nav:not(.is-scrolled) .nav__logo-tagline,
body#search .bc-nav:not(.is-scrolled) .nav__logo-tagline {
  color: #ffffff !important;
}

body#index .bc-nav:not(.is-scrolled) .bc-menu__item > a,
body#category .bc-nav:not(.is-scrolled) .bc-menu__item > a,
body#product-list .bc-nav:not(.is-scrolled) .bc-menu__item > a,
body#cms .bc-nav:not(.is-scrolled) .bc-menu__item > a,
body#search .bc-nav:not(.is-scrolled) .bc-menu__item > a,
body#index .bc-nav:not(.is-scrolled) .bc-search__toggle,
body#category .bc-nav:not(.is-scrolled) .bc-search__toggle,
body#product-list .bc-nav:not(.is-scrolled) .bc-search__toggle,
body#cms .bc-nav:not(.is-scrolled) .bc-search__toggle,
body#search .bc-nav:not(.is-scrolled) .bc-search__toggle,
body#index .bc-nav:not(.is-scrolled) .bc-nav__burger,
body#category .bc-nav:not(.is-scrolled) .bc-nav__burger,
body#product-list .bc-nav:not(.is-scrolled) .bc-nav__burger,
body#cms .bc-nav:not(.is-scrolled) .bc-nav__burger,
body#search .bc-nav:not(.is-scrolled) .bc-nav__burger {
  /* !important necessaire : .bc-nav a (plus bas dans ce fichier) force
     deja noir en !important sur TOUS les liens de la nav. */
  color: #ffffff !important;
}

/* Survol bleu meme en format "fixe"/blanc (retour utilisateur : "peu
   importe son format fixe ou bulle, bleu au survol") -- doit reprendre
   EXACTEMENT les memes prefixes body-id + :not(.is-scrolled) que la
   regle blanche juste au-dessus pour la battre (specificite egale, mais
   placee APRES + :hover/.is-open en plus la rend legerement plus
   specifique). .is-open (posee/retiree en JS, voir plus bas) = memes
   couleur/regle que :hover, mais reste allumee tant que le sous-menu de
   cet item est ouvert (retour utilisateur : "le menu de depart reste
   allume en bleu aussi, comme ca on sait ou on est"). */
body#index .bc-nav:not(.is-scrolled) .bc-menu__item > a:hover,
body#category .bc-nav:not(.is-scrolled) .bc-menu__item > a:hover,
body#product-list .bc-nav:not(.is-scrolled) .bc-menu__item > a:hover,
body#cms .bc-nav:not(.is-scrolled) .bc-menu__item > a:hover,
body#search .bc-nav:not(.is-scrolled) .bc-menu__item > a:hover,
body#index .bc-nav:not(.is-scrolled) .bc-menu__item > a.is-open,
body#category .bc-nav:not(.is-scrolled) .bc-menu__item > a.is-open,
body#product-list .bc-nav:not(.is-scrolled) .bc-menu__item > a.is-open,
body#cms .bc-nav:not(.is-scrolled) .bc-menu__item > a.is-open,
body#search .bc-nav:not(.is-scrolled) .bc-menu__item > a.is-open {
  color: #2323e0 !important;
}

/* Sous-categories (menu deplie au survol d'un item ayant des enfants) :
   deplace en enfant direct de <body> par le JS (voir header.tpl), donc
   PAS un descendant de .bc-nav -- :has() sur le body verifie l'etat de
   la nav (encore "plat" ou deja "bulle") pour suivre la meme regle. */
body#index:has(.bc-nav:not(.is-scrolled)) .bc-menu__submenu-list li a,
body#category:has(.bc-nav:not(.is-scrolled)) .bc-menu__submenu-list li a,
body#product-list:has(.bc-nav:not(.is-scrolled)) .bc-menu__submenu-list li a,
body#cms:has(.bc-nav:not(.is-scrolled)) .bc-menu__submenu-list li a,
body#search:has(.bc-nav:not(.is-scrolled)) .bc-menu__submenu-list li a {
  color: #ffffff !important;
}

/* Ecritures et icones un peu plus grandes en mode "plein" (bandeau plat,
   avant scroll) -- 13px -> 15px pour les titres de categorie (echelle
   x1.154), meme ratio applique aux icones (recherche/compte/panier/
   burger). Le sous-menu au survol n'est PAS concerne (pas demande), ni
   le logo "Bleu Canin" (deja a la bonne taille dans ce mode, voir regles
   .nav__logo-text/-tagline plus bas). */
body#index .bc-nav:not(.is-scrolled) .bc-menu__item > a,
body#category .bc-nav:not(.is-scrolled) .bc-menu__item > a,
body#product-list .bc-nav:not(.is-scrolled) .bc-menu__item > a,
body#cms .bc-nav:not(.is-scrolled) .bc-menu__item > a,
body#search .bc-nav:not(.is-scrolled) .bc-menu__item > a {
  font-size: 15px;
}

body#index .bc-nav:not(.is-scrolled) .bc-search__toggle svg,
body#category .bc-nav:not(.is-scrolled) .bc-search__toggle svg,
body#product-list .bc-nav:not(.is-scrolled) .bc-search__toggle svg,
body#cms .bc-nav:not(.is-scrolled) .bc-search__toggle svg,
body#search .bc-nav:not(.is-scrolled) .bc-search__toggle svg {
  width: 21px;
  height: 21px;
}

body#index .bc-nav:not(.is-scrolled) .bc-nav__icon-link svg,
body#category .bc-nav:not(.is-scrolled) .bc-nav__icon-link svg,
body#product-list .bc-nav:not(.is-scrolled) .bc-nav__icon-link svg,
body#cms .bc-nav:not(.is-scrolled) .bc-nav__icon-link svg,
body#search .bc-nav:not(.is-scrolled) .bc-nav__icon-link svg {
  width: 22px;
  height: 22px;
}

/* Retour utilisateur : texte tape ET placeholder du champ recherche en
   blanc en format "fixe"/plat (photo derriere, voir plus haut) -- reste
   noir une fois repasse en "bulle" (fond clair normal, .bc-search__input
   de base plus bas). */
body#index .bc-nav:not(.is-scrolled) .bc-search__input,
body#category .bc-nav:not(.is-scrolled) .bc-search__input,
body#product-list .bc-nav:not(.is-scrolled) .bc-search__input,
body#cms .bc-nav:not(.is-scrolled) .bc-search__input,
body#search .bc-nav:not(.is-scrolled) .bc-search__input {
  color: #ffffff;
}

body#index .bc-nav:not(.is-scrolled) .bc-search__input::placeholder,
body#category .bc-nav:not(.is-scrolled) .bc-search__input::placeholder,
body#product-list .bc-nav:not(.is-scrolled) .bc-search__input::placeholder,
body#cms .bc-nav:not(.is-scrolled) .bc-search__input::placeholder,
body#search .bc-nav:not(.is-scrolled) .bc-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

body#index .bc-nav:not(.is-scrolled) .bc-nav__burger svg,
body#category .bc-nav:not(.is-scrolled) .bc-nav__burger svg,
body#product-list .bc-nav:not(.is-scrolled) .bc-nav__burger svg,
body#cms .bc-nav:not(.is-scrolled) .bc-nav__burger svg,
body#search .bc-nav:not(.is-scrolled) .bc-nav__burger svg {
  width: 25px;
  height: 25px;
}

/* #header .header-nav{max-height:50px;border-bottom:#f6f6f6 2px solid}
   du theme parent rognait la pilule et cassait l'alignement (les liens
   passaient a la ligne et etaient coupes). On neutralise avec une
   specificite superieure. */
#header .header-nav.bc-nav {
  max-height: none;
  border-bottom: none;
}

.bc-nav__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 24px;
  margin: 0;
}

.bc-nav__logo {
  justify-self: start;
  width: auto;
  padding: 0;
  margin: 0;
  
}

/* Logo texte "Bleu Canin", meme recette que .nav__logo sur la home mais
toujours en taille "compacte" (la pilule ici n'a pas d'etat non-scrolle
   a agrandir, elle est tout le temps docked). Titre et sous-titre l'un
   sous l'autre (colonne), pas cote a cote. */
.nav__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #000000 !important;
  text-decoration: none;
  letter-spacing: -0.01em;
  text-align: left;
  transition: opacity 0.2s ease;
}

.nav__logo:hover {
  opacity: 0.75;
}

.nav__logo:hover .nav__logo-dot {
  background: #2323e0;
}

.nav__logo-text {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
  font-size: 30px;
  line-height: 0.95;
}

.nav__logo-line {
  white-space: nowrap;
}

.nav__logo-tagline {
  font-family: "Spline Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}

/* En mode "plat" (home/grille, avant scroll) : logo beaucoup plus gros,
   "Bleu" / "Canin" sur 2 lignes plutot que cote a cote. */
body#index .bc-nav:not(.is-scrolled) .nav__logo-text,
body#category .bc-nav:not(.is-scrolled) .nav__logo-text,
body#product-list .bc-nav:not(.is-scrolled) .nav__logo-text,
body#cms .bc-nav:not(.is-scrolled) .nav__logo-text,
body#search .bc-nav:not(.is-scrolled) .nav__logo-text {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-size: 54px;
  line-height: 0.92;
}

body#index .bc-nav:not(.is-scrolled) .nav__logo-tagline,
body#category .bc-nav:not(.is-scrolled) .nav__logo-tagline,
body#product-list .bc-nav:not(.is-scrolled) .nav__logo-tagline,
body#cms .bc-nav:not(.is-scrolled) .nav__logo-tagline,
body#search .bc-nav:not(.is-scrolled) .nav__logo-tagline {
  font-size: 12px;
  margin-top: 6px;
}

.nav__logo-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  border-radius: 50%;
  background: #2323e0;
  transition: background 0.2s ease;
}

.bc-nav__links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 24px;
  /* Retour utilisateur : pas assez d'air entre le logo et les categories
     (le "blocage" ressenti en retrecissant la fenetre venait de la, le
     menu centre pouvant venir toucher le logo avant meme que le contenu
     ne deborde vraiment). */
  margin-left: 10px;
}

.bc-nav__links > div {
  width: auto;
  padding: 0;
}

.bc-nav a {
  color: #000000 !important;
}

/* !important necessaire : sans lui, la regle .bc-nav a ci-dessus (aussi
   en !important) gagne quand meme au survol -- entre 2 regles
   !important, c'est la specificite qui tranche, pas juste l'ordre, et
   .bc-nav a (0,1,1) l'emportait sur .bc-nav a:hover (0,2,1) sans son
   propre !important. Couvre le format "bulle" (retour utilisateur : "au
   survol des titres, peu importe le format fixe ou bulle, bleu"). Le
   format "fixe" (texte blanc, voir plus haut) a son propre hover un peu
   plus bas -- meme couleur, mais doit battre une specificite plus
   grande. */
.bc-nav a:hover {
  color: #2323e0 !important;
}

/* Le sous-menu est deplace en dehors de la <li> (voir plus bas), donc
   plus de :hover CSS possible sur le lien une fois le curseur passe
   dedans -- la classe .is-open (posee/retiree en JS en meme temps que le
   sous-menu) prend le relais pour garder le lien surligne tant qu'on
   navigue dans son sous-menu. */
.bc-menu__item > a.is-open {
  color: #2323e0 !important;
}

.bc-nav__right {
  justify-self: end;
  width: auto;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.bc-nav__icon-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #000000 !important;
  transition: color 0.2s ease, transform 0.2s ease;
}

.bc-nav__icon-link:hover {
  color: #2323e0;
  transform: scale(1.1);
}

.bc-nav__cart {
  position: relative;
}

.bc-nav__cart-count {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #2323e0;
  /* Blanc : pastille bleue pleine (voir aussi .catalog-filter-fab__badge). */
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Notification "Ajoute au panier", identique visuellement au bouton
   d'ajout (meme recette liquid glass que .hero__cta), en bas au centre,
   apparait/disparait en fondu. */
.bc-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 2000;
  transform: translate(-50%, 12px);
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.85), rgba(35, 35, 224, 0.65));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.bc-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Menu categories (donnees reelles du module compagnon
   bleucanin_nav, plus de dependance a ps_mainmenu) ---------- */

.bc-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-menu__item {
  position: relative;
}

.bc-menu__item > a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Le sous-menu est deplace en enfant direct de <body> par le JS de
   header.tpl (au lieu de rester imbrique dans .bc-nav, qui a lui-meme
   backdrop-filter -- le blur imbrique ne se declenchait pas de facon
   fiable). Position/ouverture geres en JS (.is-open), plus par CSS
   :hover puisqu'il n'est plus un descendant du declencheur. */
.bc-menu__submenu--portal {
  position: fixed;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top-color: rgba(255, 255, 255, 0.8);
  /* Liquid glass tres clair/tres floute : quasi transparent, le blur
     fait tout le travail visuel. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.18));
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 20px 40px -12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.bc-menu__submenu--portal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bc-menu__submenu-list {
  flex: 0 0 auto;
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: 4px;
}

.bc-menu__submenu-list li a {
  display: block;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
}

.bc-menu__submenu-list li a:hover {
  background: rgba(35, 35, 224, 0.08);
  color: #2323e0;
}

.bc-menu__submenu-all {
  opacity: 0.75;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  margin-bottom: 4px;
  border-radius: 14px 14px 0 0;
}

/* Image de la categorie : son propre bloc liquid glass (bordure/ombre),
   avec de l'air autour grace au gap/padding du conteneur parent. */
.bc-menu__submenu-visual {
  flex: 0 0 220px;
  align-self: stretch;
  width: 220px;
  height: 200px;
  min-height: 200px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top-color: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 20px -8px rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.3);
  background-size: cover;
  background-position: center;
}

/* ---------- Recherche (form simple, pas de widget jQuery UI) ---------- */

.bc-search {
  position: relative;
  display: flex;
  align-items: center;
}

.bc-search__toggle {
  display: flex;
  align-items: center;
  border: none;
  background: none;
  color: #000000;
  cursor: pointer;
  padding: 0;
}

.bc-search__toggle:hover {
  color: #2323e0;
}

.bc-search__form {
  display: flex;
  align-items: center;
}

.bc-search__input {
  width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #000000;
  opacity: 0;
  margin-left: 0;
  transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin 0.25s ease;
}

.bc-search.is-open .bc-search__input {
  width: 180px;
  padding: 6px 12px;
  border-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  margin-left: 8px;
}

.bc-search__input::placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.bc-search__input:focus {
  outline: none;
}

/* ==========================================================================
   NAVBAR RESPONSIVE (< 900px) : menu burger + panneau coulissant.
   Aucune regle de ce type n'existait avant -- la nav gardait exactement
   la meme mise en page (bulle a 60%, grid 3 colonnes, liens en ligne)
   quelle que soit la largeur d'ecran, ce qui debordait des le mobile.
   ========================================================================== */

.bc-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: #000000;
  cursor: pointer;
}

/* Regles du menu burger : appliquees soit sous 480px (plancher de
   securite pur telephone -- a cette largeur meme le logo compact + le
   bouton burger seuls sont deja serres, jamais assez de place pour le
   menu complet), soit via .bc-nav--force-burger, ajoutee en JS
   (checkBcNavFit dans custom.js) des que le contenu du menu "desktop"
   deborde reellement a sa largeur max (90vw, voir .bc-nav plus haut) --
   quelle que soit la largeur d'ecran. Remplace l'ancien seuil fixe en px
   (900 puis 1180px), qui ne pouvait pas s'adapter au nombre variable de
   categories ni a la longueur de leurs noms. */
@media (max-width: 480px) {
  .bc-menu,
  .bc-search {
    display: none;
  }

  .bc-nav__burger {
    display: flex;
  }

  .bc-nav__row {
    grid-template-columns: 1fr auto;
  }

  .bc-nav__links {
    display: none;
  }

  /* Retour utilisateur : autant de padding a droite du logo que de gap
     entre les icones compte/panier/burger (.bc-nav__right, meme valeur
     18px) -- evite que le logo colle au bord de sa colonne de grille. */
  .bc-nav__logo {
    padding-right: 18px;
  }

  /* Le mode "plat" (bandeau 100% transparent avant scroll, avec le
     degrade .nav-scrim derriere) reste actif sur mobile -- seul le logo
     est reduit, 54px/2 lignes deborderait sur un petit ecran. La bulle
     (apres scroll) reste geree par la regle generique .bc-nav plus bas. */
  body#index .bc-nav:not(.is-scrolled) .nav__logo-text,
  body#category .bc-nav:not(.is-scrolled) .nav__logo-text,
  body#cms .bc-nav:not(.is-scrolled) .nav__logo-text,
  body#search .bc-nav:not(.is-scrolled) .nav__logo-text {
    font-size: 32px;
  }

  body#index .bc-nav:not(.is-scrolled) .nav__logo-tagline,
  body#category .bc-nav:not(.is-scrolled) .nav__logo-tagline,
  body#cms .bc-nav:not(.is-scrolled) .nav__logo-tagline,
  body#search .bc-nav:not(.is-scrolled) .nav__logo-tagline {
    font-size: 10px;
  }
}

/* Meme regles que ci-dessus, mais pilotees par la classe JS plutot qu'un
   seuil de viewport -- voir checkBcNavFit() dans custom.js. */
.bc-nav--force-burger .bc-menu,
.bc-nav--force-burger .bc-search {
  display: none;
}

.bc-nav--force-burger .bc-nav__burger {
  display: flex;
}

.bc-nav--force-burger .bc-nav__row {
  grid-template-columns: 1fr auto;
}

.bc-nav--force-burger .bc-nav__logo {
  padding-right: 18px;
}

.bc-nav--force-burger .bc-nav__links {
  display: none;
}

/* Verrouille le scroll de la page pendant que le panneau mobile est
   ouvert (pose/retiree en JS, voir _partials/header.tpl). overflow:hidden
   seul ne suffit pas sur iOS Safari : le body reste "rubber-bandable" au
   doigt (meme avec overflow:hidden), ce qui declenche quand meme des
   evenements de scroll sur window pendant qu'on scrolle le panneau --
   la nav (position:fixed, voir .bc-nav plus haut) suit ce scroll fantome
   et se retrouve coincee/coupee en haut de l'ecran. position:fixed sur le
   body avec un top negatif (equivalent au scroll courant) bloque
   reellement le scroll, y compris sur iOS ; le JS restaure la position
   de scroll exacte a la fermeture. */
body.bc-mobile-menu-open {
  position: fixed;
  top: var(--bc-scroll-lock-top, 0);
  left: 0;
  right: 0;
  overflow: hidden;
}

.bc-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bc-mobile-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.bc-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1400;
  width: 340px;
  max-width: 88vw;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-sizing: border-box;
  /* Meme verre blanc que .catalog-filter-drawer (deja recale sur le
     theme du site) -- avant, un degrade bleu-violet different. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.35));
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: -20px 0 50px -15px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.bc-mobile-menu.is-open {
  transform: translateX(0);
}

.bc-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.bc-mobile-menu__title {
  color: #000000;
  font-size: 18px;
  font-weight: 700;
}

.bc-mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  color: #000000;
  cursor: pointer;
}

.bc-mobile-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  color: #000000;
}

.bc-mobile-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  color: #000000;
  font-size: 14px;
}

.bc-mobile-search__input::placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.bc-mobile-search__input:focus {
  outline: none;
}

.bc-mobile-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.bc-mobile-accordion__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.bc-mobile-accordion__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bc-mobile-accordion__link {
  flex: 1 1 auto;
  padding: 16px 4px;
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.bc-mobile-accordion__link--toggle {
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.bc-mobile-accordion__see-all {
  font-weight: 700;
}

.bc-mobile-accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: #000000;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.bc-mobile-accordion__item.is-open .bc-mobile-accordion__toggle {
  transform: rotate(180deg);
}

.bc-mobile-accordion__sublist {
  display: none;
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 0 4px;
}

.bc-mobile-accordion__item.is-open .bc-mobile-accordion__sublist {
  display: block;
}

.bc-mobile-accordion__sublist a {
  display: block;
  padding: 10px 4px;
  color: rgba(0, 0, 0, 0.8);
  font-size: 14px;
  text-decoration: none;
}

.bc-mobile-accordion__sublist a:hover {
  color: #000000;
}

.bc-mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.bc-mobile-menu__footer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

@media (min-width: 901px) {
  .bc-mobile-menu,
  .bc-mobile-backdrop {
    display: none;
  }
}

.breadcrumb {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding: 10px 24px;
}

.breadcrumb li,
.breadcrumb a {
  color: rgba(0, 0, 0, 0.75);
}

/* ==================== REWORK CATALOGUE (categorie / recherche / etc.)
   Templates : catalog/listing/product-list.tpl, _partials/category-header,
   products-top, sort-orders, productlist, miniatures/product,
   _partials/pagination. Les filtres a gauche (ps_facetedsearch) restent
   le HTML/JS du theme parent, juste skinnes en CSS plus bas. ==================== */

.catalog-page {
  position: relative;
  z-index: 1;
}

/* La page categorie est un document autonome (pas de .container
   Bootstrap du theme parent) : on gere nous-memes les marges laterales.
   max-width: calc(1300px + 10vw) (pas 1300px tout court) : retour
   utilisateur -- "le bloc est trop fin, prend la meme largeur que le
   footer" (.site-footer__bubble, voir plus haut). Le footer met son
   padding 5vw sur l'ELEMENT PARENT (.site-footer), donc en dehors des
   1300px de .site-footer__bubble -- alors qu'ici le padding 5vw est
   applique DIRECTEMENT sur cette boite, a l'INTERIEUR de son propre
   max-width, ce qui rognait 2*5vw en trop par rapport au footer sur
   grand ecran. +10vw (2*5vw) compense exactement cet ecart pour que le
   contenu utile retombe pile sur la meme largeur que le footer, sans
   toucher au padding lui-meme (toujours utile sur mobile/tablette). */
body#category #main,
body#search #main {
  padding: 0 5vw 60px;
  max-width: calc(1300px + 10vw);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ==================== FICHE PRODUIT -- reconstruction complete depuis
   zero (comme la home et la grille), meme recette liquid glass partout.
   ==================== */

.product-page {
  position: relative;
  z-index: 1;
}

/* Meme correctif de largeur que body#category/#search #main juste
   au-dessus (voir son commentaire) -- retour utilisateur, applique a
   "tout le reste" de la fiche produit (titre, galerie/infos,
   "Completez la gamme", "Vous aimeriez aussi") puisque tous ces blocs
   sont des enfants directs de cette meme boite. */
body#product #main {
  padding: 0 5vw 80px;
  max-width: calc(1300px + 10vw);
  margin: 0 auto;
  box-sizing: border-box;
}

.product-breadcrumb {
  margin: 24px 0 28px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
}

.product-breadcrumb a {
  color: rgba(0, 0, 0, 0.65);
  text-decoration: none;
}

.product-breadcrumb a:hover {
  color: #2323e0;
}

.product-breadcrumb__sep {
  margin: 0 6px;
}

/* Retour utilisateur -- changement de DA : titre en pleine largeur au-
   dessus de tout, avant la grille 70/30 -- meme famille typographique
   que .product-info__name (garde la meme taille/poids, juste sorti de
   la colonne texte). */
.product-title-bar {
  margin: 0 0 24px;
  color: #000000;
  font-size: clamp(28px, 2.2vw + 20px, 42px);
  font-weight: 700;
  line-height: 1.15;
}

.product-layout {
  display: grid;
  /* Retour utilisateur -- format 70/30 (carrousel photo / infos), a la
     place de l'ancien quasi-50/50. */
  grid-template-columns: 7fr 3fr;
  gap: 48px;
  /* stretch (pas start) : .product-gallery (la cellule de grille) doit
     s'etirer a la hauteur de la LIGNE (donc de .product-info, en
     general plus longue) pour que .product-gallery__sticky (voir plus
     bas) ait de la place ou "voyager" en position:sticky -- retour
     utilisateur : "le carrousel me suit jusqu'en bas du bloc, pas de
     cadre vide". Sans stretch, .product-gallery ferait juste la
     hauteur de son propre contenu (l'image), sticky n'aurait litteralement
     nulle part ou se deplacer. */
  align-items: stretch;
  margin-bottom: 48px;
}

@media (max-width: 900px) {
  .product-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Galerie : carrousel plein cadre (retour utilisateur --
   remplace l'ancien cadre + grille 2x2) : un seul scroll horizontal en
   snap, une photo a la fois, fleches + points de pagination en dessous
   (voir le script en fin de page). Meme rupture assumee avec le glass
   que la version precedente -- la photo flotte, sans cadre/ombre/flou,
   coins arrondis portes par l'<img> lui-meme. ---------- */

/* Seul CET element est sticky (pas .product-gallery, voir
   align-items:stretch plus haut) : il "voyage" a l'interieur de la
   hauteur de .product-gallery (etiree a la hauteur de la colonne info)
   et se detache tout seul, sans JS, des que son cadre parent est
   entierement scrolle -- comportement natif du sticky, contenu par son
   propre bloc englobant. 130px = hauteur nav + marge (meme valeur que
   l'ancien sticky sur .product-photo-stack, avant le changement de DA). */
.product-gallery__sticky {
  position: sticky;
  top: 130px;
  /* Retour utilisateur -- "l'image depasse de ma fenetre a cause du
     padding du header" : en carre (1:1) sur une colonne large (7fr),
     la hauteur suit la largeur et peut largement depasser la fenetre
     sur grand ecran. max-width (pas max-height) : comme la photo reste
     1:1, plafonner la LARGEUR plafonne la hauteur du meme coup, sans
     jamais casser le carre. 130px = meme decalage que "top" ci-dessus
     (hauteur nav), -40px de marge confortable sous la photo une fois
     sticky. margin:0 auto pour recentrer la colonne si elle devient
     plus etroite que les 7fr disponibles. */
  max-width: calc(100vh - 170px);
  margin: 0 auto;
}

.product-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 32px;
}

.product-gallery__track::-webkit-scrollbar {
  display: none;
}

.product-gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  border-radius: 32px;
  overflow: hidden;
}

.product-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-gallery__slide:hover img {
  transform: scale(1.06);
}

.js-product-photo-zoom {
  cursor: zoom-in;
}

/* Retour utilisateur -- "les boutons du carrousel doivent etre SUR
   l'image" : flottent desormais en overlay, centres horizontalement,
   colles en bas de la photo -- plus une barre separee sous l'image.
   .product-gallery__sticky (parent, voir plus haut) porte deja
   position:sticky, qui etablit un contexte de positionnement pour cet
   absolute -- se cale donc bien sur LA PHOTO visible (meme hauteur
   qu'un slide, track+photo n'ayant pas de marge entre eux), pas sur
   toute la hauteur etiree de .product-gallery. Fond sombre translucide
   (retour utilisateur, "ajoute du contraste avec un fond sombre") pour
   rester lisible sur une photo claire. */
.product-gallery__pagination {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
}

.product-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.product-gallery__dot {
  width: 24px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s ease, width 0.3s ease;
}

/* Retour utilisateur -- "garde le selectionne en bleu, pas en blanc" :
   seul le point actif reste dans la couleur d'accent du site, les
   points inactifs restent blancs translucides (lisibilite sur le fond
   sombre de la barre). */
.product-gallery__dot.is-active {
  width: 40px;
  background: #2323e0;
}

.product-gallery__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.product-gallery__arrow:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* ---------- LIGHTBOX PHOTO PRODUIT ---------- */

.product-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}

.product-lightbox.is-open {
  display: flex;
}

.product-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.6);
  cursor: default;
}

.product-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.product-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 900px) {
  /* Galerie horizontale scrollable au doigt : cadre principal + chaque
     photo supplementaire deviennent des "slides" cote a cote (au lieu
     d'un cadre principal plein largeur + grille 2x2 en dessous). Le
     wrapper .product-photo-extras (grille sur desktop) passe en
     display:contents : il disparait du flux (plus de boite propre),
     laissant ses tuiles rejoindre directement .product-photo-stack en
     tant qu'enfants flex, au meme niveau que .product-photo-main. */
  .product-photo-stack {
    position: static;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
  }

  .product-photo-extras {
    display: contents;
  }

  .product-photo-main,
  .product-photo-extras__tile {
    flex: 0 0 85%;
    aspect-ratio: 1 / 1;
    scroll-snap-align: center;
  }
}

/* ---------- Infos produit ---------- */

.product-info__variant-name {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

.product-info__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.product-info__price-current {
  font-size: 24px;
  font-weight: 600;
  color: #000000;
}

.product-info__price-old {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.55);
  text-decoration: line-through;
}

.product-info__price-discount {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(224, 64, 42, 0.12);
  color: #e0402a;
  font-size: 12px;
  font-weight: 700;
}

.product-info__description-short {
  margin-bottom: 24px;
  padding-bottom: 24px;
  /* Separateur discret entre le bloc "info produit" (titre/prix/
     description) et le bloc "configuration" (couleur/taille/...) juste
     en dessous -- un vrai repere structurel, pas juste un espacement de
     plus qui se noie avec les autres. */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #000000;
  font-size: 15px;
  line-height: 1.7;
}

/* Meme regle globale du theme parent que .cms-page__content (voir about.css) --
   un "p { color: #7a7a7a; }" pose directement sur l'element gagne toujours
   sur une valeur heritee. */
.product-info__description-short p,
.product-info__description-short ul,
.product-info__description-short li {
  color: inherit;
}

.product-info__variants {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

.product-variant-group__label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
}

.product-variant-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-variant-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 68px;
  text-decoration: none;
}

.product-variant-tile__media {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(26, 26, 26, 0.15);
  background: rgba(255, 255, 255, 0.5);
}

.product-variant-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.product-variant-tile__label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.product-variant-tile:hover .product-variant-tile__media {
  border-color: rgba(35, 35, 224, 0.4);
}

.product-variant-tile.is-active .product-variant-tile__media {
  border: 2px solid #2323e0;
}

.product-variant-tile.is-active .product-variant-tile__label {
  color: #2323e0;
  font-weight: 700;
}

/* ---------- Selection en 2 etapes : 1. couleur, 2. taille ---------- */

.product-variant-steps {
  display: flex;
  flex-direction: column;
  /* Retour utilisateur (inspiration Apple) : plus d'air entre chaque
     groupe d'options -- une page dense en blocs colles les uns aux
     autres se lit comme un formulaire, pas comme une fiche produit
     soignee. */
  gap: 28px;
}

.product-variant-step__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
  transition: color 0.2s ease;
}

/* Champ obligatoire pas encore rempli (retour utilisateur -- voir
   product.tpl, $field.required && !$field.is_customized) : le libelle
   passe dans la meme couleur d'alerte que .product-customization__notice
   (coherence -- c'est exactement ce message qui explique pourquoi),
   avec un "*" qui pulse doucement pour attirer l'oeil sans etre
   agressif. Redevient un simple libelle neutre des que rempli (la
   classe est posee cote serveur, recalculee a chaque rechargement --
   voir le JS de personnalisation, qui soumet le formulaire au clic). */
.product-variant-step--required .product-variant-step__label {
  color: #b23b3b;
}

/* Retour utilisateur (inspiration Apple) : le nom de l'option choisie
   s'affiche directement a cote du libelle du groupe ("TAILLE · S"),
   confirmation immediate sans remonter les yeux vers le titre en haut
   de page. Poids normal (pas majuscule/gras comme le libelle) pour
   rester clairement secondaire. */
.product-variant-step__active-value {
  text-transform: none;
  font-weight: 600;
  letter-spacing: normal;
  color: #2323e0;
}

.product-variant-step__required-mark {
  display: inline-block;
  animation: bc-required-pulse 1.6s ease-in-out infinite;
}

@keyframes bc-required-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.product-variant-step1 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Meme recette "liquid glass" que .product-info__addtocart/.product-qty
   (retour utilisateur -- "les selecteurs ne parlent pas le meme langage
   que le reste du site") : fond degrade translucide + flou + reflet
   haut, au lieu du plat blanc/bordure fine d'avant. La pastille garde
   sa propre couleur en background-color (pose en style inline, voir
   product.tpl) -- le glass s'applique via une ombre/bordure autour,
   pas par-dessus la couleur elle-meme, qui doit rester lisible. */
.product-variant-step1__swatch {
  display: inline-block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 10px -4px rgba(0, 0, 0, 0.35);
  padding: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.product-variant-step1__swatch:hover {
  transform: scale(1.08);
}

.product-variant-step1__swatch.is-active {
  border: 2px solid #2323e0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(35, 35, 224, 0.18);
}

.product-variant-step2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-variant-step2__size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 14px -8px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  color: #000000;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.product-variant-step2__size:hover {
  border-color: rgba(35, 35, 224, 0.4);
  transform: translateY(-1px);
}

.product-variant-step2__size.is-active {
  border-color: #2323e0;
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.85), rgba(35, 35, 224, 0.65));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 18px -10px rgba(35, 35, 224, 0.45);
}

.product-variant-step2__size.is-unavailable {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.product-variant-step2__size--empty {
  border-style: dashed;
  color: rgba(0, 0, 0, 0.3);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: default;
}

.product-info__actions {
  margin-bottom: 8px;
}

.product-info__buyrow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Selecteur de quantite ---------- */

.product-qty {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  overflow: hidden;
}

.product-qty__step {
  width: 40px;
  height: 52px;
  border: none;
  background: transparent;
  color: #000000;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.product-qty__step:hover {
  background: rgba(255, 255, 255, 0.15);
}

.product-qty__input {
  width: 44px;
  height: 52px;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}

.product-qty__input::-webkit-outer-spin-button,
.product-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-qty__input:focus {
  outline: none;
}

/* ---------- Bandeau de reassurance compact ---------- */

.product-reassurance {
  display: flex;
  flex-wrap: wrap;
  /* flex-start (pas center) : le reste de la colonne (titre, prix,
     options, bouton) est aligne a gauche -- un bandeau centre au milieu
     d'une colonne alignee a gauche flottait bizarrement, sans lien
     visuel avec ce qui l'entoure. */
  justify-content: flex-start;
  gap: 20px;
  margin-top: 24px;
  padding-top: 24px;
  /* Plus visible qu'avant (rgba(255,255,255,0.15) etait quasi invisible
     sur le fond degrade clair de la page, pas blanc) -- un vrai
     separateur, pas juste de l'espace en plus qui se noie dans le
     reste. */
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.product-reassurance__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(0, 0, 0, 0.75);
  font-size: 12.5px;
  font-weight: 500;
}

.product-reassurance__item svg {
  flex: 0 0 auto;
}

.product-info__addtocart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px -10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.product-info__addtocart:hover {
  transform: translateY(-2px);
  border-color: rgba(35, 35, 224, 0.5);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
  /* Blanc, pas noir : fond bleu plein au survol, meme exception que
     .hero__cta:hover (illisible en noir dessus). */
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 26px -10px rgba(0, 0, 0, 0.3);
}

/* ---------- Personnalisation produit (voir product.tpl,
   $product.customizations.fields) -- meme habillage que les selecteurs
   couleur/taille juste au-dessus (.product-variant-step/__label,
   .product-variant-step2/__size, deja definis plus haut) : integration
   coherente avec le reste de la fiche plutot qu'un style a part (retour
   utilisateur). Un champ precis (voir data-field-label + le script en
   fin de page) est re-habille en boutons pill identiques a ceux des
   tailles ; tout AUTRE champ de personnalisation reste le textarea
   natif ci-dessous. */
.product-customization__field {
  margin-bottom: 20px;
}

.product-customization__textarea {
  width: 100%;
  min-height: 70px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

/* Retour utilisateur -- "le bouton Ajouter au panier est carrement
   absent" tant qu'un champ requis manque : avant, un simple texte sans
   poids visuel prenait la place du bouton, facile a manquer. Reprend
   maintenant le meme gabarit "pilule" que .product-info__addtocart
   (padding/rayon/hauteur comparables), juste en verre DESACTIVE (gris,
   pas bleu, cursor not-allowed) -- l'espace ou "il y a une action a
   faire ici" reste donc toujours visible, meme quand elle n'est pas
   encore disponible. */
.product-customization__notice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px 24px;
  max-width: 420px;
  border-radius: 24px;
  border: 1px solid rgba(178, 59, 59, 0.25);
  background: linear-gradient(180deg, rgba(178, 59, 59, 0.1), rgba(178, 59, 59, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  color: #b23b3b;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: not-allowed;
}

.product-customization__notice svg {
  flex: 0 0 auto;
}

/* "Allume" au clic sur une taille (voir le script en fin de
   product.tpl) : le bouton passe en bleu plein et grossit, pour
   confirmer visuellement qu'une combinaison precise est prete a etre
   ajoutee -- pas juste au survol, un etat qui reste tant qu'on ne
   change pas de taille. */
.product-info__addtocart.is-ready {
  transform: scale(1.08);
  padding: 20px 40px;
  font-size: 17px;
  border-color: rgba(35, 35, 224, 0.6);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.85), rgba(35, 35, 224, 0.65));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 34px -12px rgba(35, 35, 224, 0.45);
}

.product-info__addtocart.is-ready:hover {
  transform: scale(1.08) translateY(-2px);
}

.product-info__unavailable {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid rgba(224, 64, 42, 0.4);
  background: rgba(224, 64, 42, 0.12);
  color: #000000;
  font-size: 14px;
  font-weight: 500;
}

.product-info__unavailable svg {
  flex: 0 0 auto;
  color: #e0402a;
}

/* ---------- Description longue : .product-description-panel retire,
   Description et Details du produit utilisent maintenant
   .product-text-block (accordeon), voir plus bas. ---------- */

/* ---------- Details produit (caracteristiques back-office) ---------- */

.product-details-table {
  width: 100%;
  border-collapse: collapse;
}

.product-details-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.product-details-table tr:last-child {
  border-bottom: none;
}

.product-details-table th,
.product-details-table td {
  padding: 14px 0;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
}

.product-details-table th {
  width: 40%;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 600;
}

.product-details-table td {
  color: #000000;
}

/* ---------- Blocs de texte configurables (accordeon) ----------
   Meme recette liquid-glass que .product-description-panel, un panneau
   par bloc (pas 1 grosse bulle partagee) pour bien les dissocier
   visuellement. */

.product-text-blocks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.product-text-block {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  overflow: hidden;
}

.product-text-block__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  color: #000000;
  /* Meme taille que .product-description-panel__title (h2, 21px rendus
     -- pas de font-size en dur dessus, herite du style de base h2) :
     sans ca, les titres des blocs "Description"/"Details du produit" et
     ceux des blocs configurables ne s'alignaient pas visuellement. */
  font-size: 21px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.product-text-block__toggle svg {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.product-text-block.is-open .product-text-block__toggle svg {
  transform: rotate(180deg);
}

/* grid-template-rows 0fr -> 1fr : anime l'ouverture/fermeture sans JS ni
   hauteur figee en dur (le contenu riche peut faire n'importe quelle
   taille) -- .product-text-block__inner porte le padding (pas
   __content), sinon le padding s'ajoute a la hauteur meme a 0fr et
   laisse un espace residuel visible quand ferme. */
.product-text-block__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.product-text-block.is-open .product-text-block__content {
  grid-template-rows: 1fr;
}

.product-text-block__inner {
  overflow: hidden;
  padding: 0 24px 24px;
  color: #000000;
  font-size: 15px;
  line-height: 1.8;
}

.product-text-block__inner p,
.product-text-block__inner ul,
.product-text-block__inner li {
  color: inherit;
}

/* ---------- Produits associes ---------- */

/* Meme bulle liquid-glass que .product-description-panel : le carrousel
   reste dedans, overflow:hidden pour que son defilement horizontal (et
   les cartes partiellement visibles en bord de piste) soit coupe net
   par les bords arrondis de la bulle plutot que de deborder par-dessus. */
/* Retour utilisateur -- "je veux plus le cadre liquid glass" : plus de
   padding/bordure/fond/flou, la section flotte directement dans le flux
   de la page comme .product-groups plus bas (meme rupture assumee). */
.product-accessories {
  margin-bottom: 48px;
}

.product-accessories__title {
  margin: 0 0 24px;
  color: #000000;
  font-size: clamp(20px, 1.2vw + 16px, 26px);
  font-weight: 700;
}

/* ---------- "Completez la gamme" -- bandeau large par Gamme, meme
   systeme visuel (markup/CSS/JS) que le carrousel "Gammes pensees" de la
   page "Decouvrir" (voir cms/page.tpl et custom.css .wide-banner__panel/
   .discover-photo-title/.wide-banner__spot*) : photo pleine largeur,
   titre/sous-titre en overlay, une pastille cliquable par produit membre
   (voir Bleucanin_Nav::getProductGroupBanners, product.tpl). Remplace
   l'ancienne vitrine "+"-tuiles (retour utilisateur -- "un bandeau large
   de gamme", "mix" du bloc-tuiles et du bandeau "Decouvrir"). ---------- */

.product-groups {
  /* 88px (pas 48px) -- retour utilisateur : l'ombre du bandeau (portee
     ~55px, voir .product-groups__panel) doit pouvoir se dissiper en
     fondu AVANT de toucher les tuiles opaques de "Vous aimerez aussi"
     juste en dessous, sinon elle est coupee net (moche) au lieu de
     deborder proprement comme voulu. */
  margin-bottom: 88px;
}

/* Retour utilisateur -- "aussi gros que le titre du produit" : meme
   taille/graisse que .product-title-bar. */
.product-groups__title {
  font-size: clamp(28px, 2.2vw + 20px, 42px);
  font-weight: 700;
}

/* product.tpl est un template autonome (pas d'extends Smarty, voir
   convention du theme) : il ne charge QUE theme.css + product.css (voir
   <head> de product.tpl), jamais custom.css/about.css ou la page
   "Decouvrir" ne definit pas .wide-banner__panel ni .discover-photo-title.
   Les regles ci-dessous sont donc une DUPLICATION VOLONTAIRE du meme
   systeme visuel (voir custom.css .wide-banner__panel et ses spots, et
   about.css .discover-photo-title et .discover-photo-overlay) -- a
   garder synchronisee si ce systeme evolue ailleurs sur le site. */

.product-groups__panel {
  position: relative;
  width: 100%;
  /* 16:9 (retour utilisateur -- "format original, pour eviter de
     cropper un element") : les photos de gamme sont deja fournies en
     16:9 par l'admin (voir renderCropField, 1260/680 -- ratio ~1,85,
     proche de 16:9), 21:9 forcait un rognage supplementaire non voulu. */
  aspect-ratio: 16 / 9;
  margin-top: 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  /* Retour utilisateur -- l'ombre doit deborder visiblement (voulu,
     pas un defaut) : reduire sa portee (tente puis annule) la rendait
     juste plus terne/coupee court, pas plus propre. Le vrai probleme
     n'etait pas la TAILLE de l'ombre mais l'espace insuffisant sous ce
     bandeau -- voir margin-bottom de .product-groups, agrandie pour que
     cette ombre (portee ~55px d'origine) puisse se dissiper naturellement
     AVANT de toucher les tuiles opaques de "Vous aimerez aussi" (qui la
     coupaient net au lieu de la laisser s'estomper en fondu). */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  overflow: visible;
}

.product-groups__panel:first-of-type {
  margin-top: 0;
}

@media (max-width: 700px) {
  .product-groups__panel {
    aspect-ratio: 4 / 3;
  }
}

.product-groups__panel .wide-banner__panel-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.product-groups__panel .wide-banner__panel-media .crop-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.product-groups__panel .wide-banner__panel-media img {
  display: block;
  max-width: none;
  transform-origin: center center;
}

.product-groups__panel .discover-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

.product-groups__panel .discover-photo-title {
  position: absolute;
  top: clamp(20px, 4vw, 40px);
  left: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  margin: 0;
  z-index: 2;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.product-groups__panel .discover-photo-title__sub {
  display: block;
  margin-top: 8px;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 400;
  line-height: 1.4;
}

.product-groups__panel .wide-banner__spot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 3;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.product-groups__panel .wide-banner__spot:focus,
.product-groups__panel .wide-banner__spot:focus-visible {
  outline: none;
  box-shadow: none;
}

.product-groups__panel .wide-banner__spot-dot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12));
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-top-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px) saturate(1.5);
  -webkit-backdrop-filter: blur(6px) saturate(1.5);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.product-groups__panel .wide-banner__spot:hover .wide-banner__spot-dot {
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
  border-color: rgba(35, 35, 224, 0.85);
}

/* Pastille "Cet article" (produit courant, pas un lien -- voir
   product.tpl) : meme dot mais teinte neutre (pas le bleu d'accent des
   pastilles cliquables), pour la distinguer d'un coup d'oeil sans
   dupliquer tout le style de .wide-banner__spot-dot. */
.product-groups__panel .wide-banner__spot--current .wide-banner__spot-dot {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
  border-color: rgba(255, 255, 255, 0.5);
}

.product-groups__panel .wide-banner__spot-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translate(-50%, 8px);
  width: clamp(160px, 90vw, 220px);
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 20px 40px -12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  text-align: left;
}

.product-groups__panel .wide-banner__spot-tooltip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #000000;
}

.product-groups__panel .wide-banner__spot-tooltip p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.75);
}

.product-groups__panel p.wide-banner__spot-variant {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
}

.product-groups__panel .wide-banner__spot-tooltip p + .wide-banner__spot-price {
  margin-top: 8px;
}

.product-groups__panel .wide-banner__spot-price {
  font-weight: 700;
  color: #000000;
}

.product-groups__panel .wide-banner__spot-link {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 10px;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 800;
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.product-groups__panel .wide-banner__spot-link:hover {
  color: #2323e0;
  border-color: #2323e0;
}

.product-groups__panel .wide-banner__spot-link span {
  transition: transform 0.2s ease;
}

.product-groups__panel .wide-banner__spot-link:hover span {
  transform: translateX(3px);
}

.product-groups__panel .wide-banner__spot.is-open .wide-banner__spot-tooltip,
.product-groups__panel .wide-banner__spot-tooltip.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Pop-up deplacee en enfant de <body> en JS (voir custom.js, meme
   carabistouille backdrop-filter imbrique que sur les autres pages) --
   ce cas n'a PAS de prefixe .product-groups__panel puisqu'il n'est plus
   dans le panel a ce moment-la. */
.wide-banner__spot-tooltip--portal {
  position: absolute;
  bottom: auto;
  right: auto;
  transform: translate(-50%, calc(-100% - 6px));
  z-index: 998;
}

.wide-banner__spot-tooltip--portal.is-open {
  transform: translate(-50%, calc(-100% - 14px));
}

.wide-banner__spot.is-open .wide-banner__spot-dot {
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
  border-color: rgba(35, 35, 224, 0.85);
}

/* ---------- Carrousel "Vous aimeriez aussi" ---------- */

/* Full-bleed comme le carrousel de bulles de la home : deborde de
   #main (contraint a 1300px) sur toute la largeur de l'ecran. */
.product-carousel {
  position: relative;
}

/* Retour utilisateur -- "meme systeme de carrousel que la home" : scroll
   natif + scroll-snap (comme .bubble-carousel__track, custom.css),
   duplique ici car product.tpl ne charge pas custom.css. Plus de
   boucle infinie a base de clones + transform pilote a la main
   (ancienne version) : momentum/trackpad/molette/swipe gratuits, geres
   par le navigateur -- voir initProductCarousel, product.tpl, meme
   logique que initBubbleCarousel (custom.js). Contrairement au
   carrousel de bulles de la home (section plein ecran, edge-to-edge),
   ce carrousel reste DANS le cadre glass de .product-accessories (voir
   son padding:32px) -- pas de centrage base sur 100vw ici, juste un
   scroll-padding egal au gap pour que la 1ere/derniere tuile puisse
   toujours atteindre une position de repos valide en bord de cadre. */
.product-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 20px;
  overflow-x: auto;
  /* overflow-y: visible ESSAYE puis abandonne : la spec CSS force
     overflow-y a "auto" des que overflow-x n'est pas "visible" (les 2
     axes restent lies, impossible a decoupler en CSS pur -- verifie,
     le navigateur ignore silencieusement le "visible" explicite). Seule
     option reelle : agrandir le padding vertical du track pour que
     l'ombre des tuiles au survol (0 20px 40px -14px, portee ~46px, +
     le soulevement -6px) tienne ENTIEREMENT dans la zone encore
     "visible" avant le bord clippe -- meme technique que
     .bubble-carousel__track (custom.css, meme retrait de marge pour la
     meme raison). Retour utilisateur : "les ombres sont coupees". */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
  padding: 16px 4px 50px;
  margin-bottom: -38px;
  scroll-padding-left: 4px;
  scroll-padding-right: 4px;
}

.product-carousel__track::-webkit-scrollbar {
  display: none;
}

.product-carousel__item {
  flex: 0 0 260px;
  width: 260px;
  scroll-snap-align: start;
  /* Sans ca, un flex-item garde par defaut min-width:auto -- son
     contenu reprendrait le dessus sur le flex-basis/width fixes
     ci-dessus, agrandissant chaque carte au-dela de la taille voulue
     (bug classique de flexbox). */
  min-width: 0;
}

/* Vignette par declinaison (pas par produit) -- retour utilisateur :
   "reprend la DA carrousel de la home" (voir custom.css .glass-bubble,
   duplique ici car product.tpl ne charge pas custom.css) -- photo nue
   sans cadre glass (juste l'ombre portee), meme filtre image legerement
   desature/assombri, meme scrim sombre en bas pour la legende en blanc.
   Taille INCHANGEE (retour utilisateur -- "on garde cette taille de
   vignettes") : 260px/1:1 deja carre, voir .product-carousel__item. */
.product-carousel__tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background-color: #c9c2b8;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-carousel__tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.4);
}

.product-carousel__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  filter: saturate(0.9) brightness(0.95);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-carousel__tile:hover img {
  transform: scale(1.06);
}

/* Scrim sombre (meme recette que .glass-bubble__text--v-bottom::before
   sur la home) pour garder la legende blanche lisible sur une photo
   claire. */
.product-carousel__tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
}

.product-carousel__tile-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
}

.product-carousel__tile-price {
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
}

/* Retour utilisateur -- "meme carrousel que la home, avec les boutons a
   cote des indicateurs de position" : rangee unique centree sous le
   track (fleches + points), exactement comme .bubble-carousel__pagination
   (custom.css) -- plus de fleches flottant par-dessus les bords de
   l'image. */
.product-carousel__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 12px auto 0;
}

.product-carousel__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  color: rgba(0, 0, 0, 0.55);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.product-carousel__arrow:hover {
  border-color: #2323e0;
  color: #2323e0;
}

.product-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.product-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.product-carousel__dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: #2323e0;
}

@media (max-width: 700px) {
  .product-carousel__item {
    flex-basis: 200px;
    width: 200px;
  }
}

/* ---------- "Avis clients" -- premier jet (retour utilisateur, meme
   veine visuelle que le reste : titre + point bleu comme les autres
   sections, cartes "glass" comme .product-text-block/.cart-summary).
   Etoiles en 2 rangees superposees (contour Unicode "★★★★★" +
   rangee pleine identique tronquee via width%, voir product.tpl) : un
   seul element HTML par rangee, gere nativement les moyennes non
   entieres (ex. 4.3) sans code JS/SVG. ---------- */

.product-reviews {
  margin-top: 48px;
}

.product-reviews__title {
  font-size: clamp(20px, 1.2vw + 16px, 26px);
  margin-bottom: 20px;
}

.product-reviews__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.product-reviews__average {
  font-size: 28px;
  font-weight: 700;
  color: #000000;
}

.product-reviews__stars,
.product-reviews__card-stars {
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 2px;
}

.product-reviews__stars-outline {
  color: rgba(0, 0, 0, 0.2);
}

.product-reviews__stars-filled {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #2323e0;
}

.product-reviews__count {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
}

.product-reviews__notice {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14px;
}

.product-reviews__notice--success {
  background: rgba(35, 35, 224, 0.1);
  color: #2323e0;
}

.product-reviews__notice--error {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.product-reviews__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.product-reviews__header .product-reviews__title {
  margin-bottom: 0;
}

/* Grille "masonry" (retour utilisateur -- inspire de North Deco/Fera
   Reviews) -- retour utilisateur (v2) : 3 vraies colonnes en flex,
   chacune deja EQUILIBREE cote PHP (voir Bleucanin_Nav::getProductReviews,
   repartition round-robin) plutot que le CSS `columns` utilise au
   premier jet (qui remplissait une colonne entiere avant de passer a
   la suivante -- resultat visuellement desequilibre des que les avis
   n'ont pas tous la meme hauteur). Chaque .product-reviews__col est
   juste une pile verticale simple. */
.product-reviews__grid {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.product-reviews__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 600px) {
  /* Sous 600px, une seule colonne visible a l'ecran : les 3 colonnes
     PHP restent en DOM mais s'empilent les unes sous les autres (voir
     flex-direction) -- l'ordre n'est alors plus strictement
     chronologique (colonne 1 entiere, puis colonne 2, puis colonne 3)
     mais reste un choix raisonnable vu le peu d'espace disponible. */
  .product-reviews__grid {
    flex-direction: column;
  }
}

.product-reviews__card--hidden {
  display: none;
}

.product-reviews__more {
  display: block;
  margin: 24px auto 32px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.5);
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.product-reviews__more:hover {
  border-color: #2323e0;
  color: #2323e0;
}

.product-reviews__empty {
  margin: 0 0 32px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
}

/* Meme recette "glass" que .product-text-block. Plus besoin de
   inline-block/break-inside (necessaires avec le CSS `columns` du
   premier jet) : chaque carte est un bloc normal, simplement empile
   dans son .product-reviews__col (flex column, voir plus haut). */
.product-reviews__card {
  box-sizing: border-box;
  padding: 20px 24px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.product-reviews__card-photo {
  margin: -20px -24px 14px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.product-reviews__card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-reviews__card-date {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

.product-reviews__card-title {
  margin: 10px 0 4px;
  font-weight: 700;
  color: #000000;
}

.product-reviews__card-author {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
}

.product-reviews__card-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2323e0;
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
}

.product-reviews__card-content {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.8);
}

.product-reviews__form {
  max-width: 520px;
  margin: 40px auto 0;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.product-reviews__form-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #000000;
}

/* Etoiles cliquables en pur CSS -- radios places 5..1 en DOM (voir
   product.tpl), conteneur en row-reverse pour l'ordre visuel 1..5.
   "~" (frere general suivant EN DOM) sur un radio coche allume son
   propre label ET tous les suivants en DOM -- donc, une fois
   retourne visuellement, toutes les etoiles A SA GAUCHE (note <=
   celle cliquee). Le hover (survol direct + ses freres suivants en
   DOM) donne le meme apercu avant clic. */
.product-reviews__form-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 16px;
  font-size: 26px;
}

.product-reviews__form-rating input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product-reviews__form-rating label {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.25);
  transition: color 0.15s ease;
}

.product-reviews__form-rating input:checked ~ label,
.product-reviews__form-rating label:hover,
.product-reviews__form-rating label:hover ~ label {
  color: #2323e0;
}

.product-reviews__form-input {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 14px;
  color: #000000;
  resize: vertical;
}

.product-reviews__form-input:focus {
  outline: none;
  border-color: #2323e0;
}

.product-reviews__form-submit {
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  background: #2323e0;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.product-reviews__form-submit:hover {
  background: #1a1ab0;
}

.product-reviews__form-photo-label {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
}

.product-reviews__form-photo-label input {
  display: block;
  margin-top: 6px;
}

.product-reviews__form-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

.catalog-empty {
  text-align: center;
  padding: 80px 24px;
  color: rgba(0, 0, 0, 0.75);
}

.catalog-empty h4 {
  margin: 0 0 8px;
  color: #000000;
}

/* ---------- Sous-categories (partiel herite du theme parent, pas encore
   reconstruit) : on retire juste le fond blanc "card" Bootstrap pour
   qu'il se fonde dans la grosse bulle glass qui l'englobe desormais. ---------- */

#subcategories.card {
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 24px;
  padding: 0;
}

/* ---------- Grosse bulle hero : photo de la categorie + nom en gros,
   meme largeur/gabarit que la bulle du footer (inspire d'une reference
   "simply furniture" fournie par l'utilisateur). ---------- */

/* Meme systeme que le hero de la home (voir .hero__left/.hero__right
   dans custom.css) : colonne de texte a gauche sur fond plein, colonne
   photo/video a droite (~70%) decoupee en vague sur son bord gauche. */
/* Meme traitement que le hero plein cadre de la home (voir .hero dans
   custom.css) : photo/video pleine page, filtre sombre, texte centre en
   blanc par-dessus, seule la vague du bas (#hero-bottom-wave) decoupe le
   bord -- plus de colonne 70%/mask lateral, plus de mise en page
   distincte desktop/mobile. */
.catalog-hero {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 28px;
  min-height: 46vh;
  box-sizing: border-box;
}

/* Vue grille categorie : un peu plus de hauteur que les autres pages
   secondaires (recherche, A propos, CGV...), meme raison qu'avant. */
#category .catalog-hero {
  min-height: 62vh;
}

/* Hero reduit sur la page recherche (pas d'image de couverture ni de
   description a montrer, juste le "Resultats pour ..."). */
.catalog-hero--search {
  min-height: 34vh;
}

.catalog-hero__left {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 4vw;
  box-sizing: border-box;
  text-align: center;
  color: #ffffff;
}

.catalog-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  /* Repli photo de couverture native (categorie sans photo/video
     configure -- voir category.tpl) : background-image inline sans
     enfant img/video, a besoin de ces 3 proprietes pour couvrir le
     cadre au lieu de se repeter a sa taille naturelle. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Vague du bas uniquement (#hero-bottom-wave, defini en inline <svg>
     dans chaque template -- category.tpl / cms/page.tpl), meme trace
     (amplitude reduite) que le hero de la home. Plus de decoupage
     lateral (#catalog-hero-wave, retire). */
  clip-path: url(#hero-bottom-wave);
}

@media (max-width: 900px) {
  /* Meme correctif que .hero__right (home, custom.css) : #hero-bottom-wave
     est pense pour une largeur desktop, se retrouve trop resserre/agite
     sur une largeur mobile sans amplitude adaptee (retour utilisateur).
     #hero-bottom-wave-mobile (meme <svg>, voir chaque template listing/
     category/cms) : moitie moins de vaguelettes, amplitude doublee. */
  .catalog-hero__media {
    clip-path: url(#hero-bottom-wave-mobile);
  }
}

.catalog-hero__media .crop-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.catalog-hero__media img,
.catalog-hero__media video {
  display: block;
  max-width: none;
  transform-origin: center center;
}

/* Filtre sombre par-dessus la photo/video -- meme recette que
   .hero__overlay sur la home, ameliore le contraste du texte blanc
   centre par-dessus. */
.catalog-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
  /* Meme decoupage que .catalog-hero__media (voir #hero-bottom-wave) :
     sur la home, l'equivalent .hero__overlay est un ENFANT de
     .hero__right (deja clippee), donc herite automatiquement de la
     forme. Ici .catalog-hero__overlay est un FRERE de .catalog-hero__media
     (pas un descendant -- 2 branches if/elseif possibles pour le media),
     donc sans son propre clip-path le filtre restait un rectangle plein,
     visible en dehors de la vague. */
  clip-path: url(#hero-bottom-wave);
}

@media (max-width: 900px) {
  .catalog-hero__overlay {
    clip-path: url(#hero-bottom-wave-mobile);
  }
}

.catalog-breadcrumb {
  font-size: 12px;
  color: #ffffff;
}

/* Vue grille categorie -- et Nouveautes/Meilleures ventes/Promotions/
   Marque/Fournisseur/Recherche, qui partagent la meme .gamme-grid
   full-bleed a 30px de padding lateral (retour utilisateur, "deplace
   aussi le fil d'ariane en bas a gauche comme pour les autres vues
   hero") : le fil d'ariane sort du flux centre de .catalog-hero__left
   (position:absolute la sort du flex) pour rester cale en bas a gauche
   du hero, avec le meme padding lateral que les vignettes produits juste
   en dessous (.gamme-grid { padding: 0 30px }). */
#category .catalog-breadcrumb,
#product-list .catalog-breadcrumb,
#search .catalog-breadcrumb {
  position: absolute;
  left: 30px;
  /* Remonte (etait 24px) : au-dela de ce point, la vague du bas
     (#hero-bottom-wave) peut couper l'image et laisser voir le fond de
     page clair derriere -- le fil d'ariane blanc y serait illisible. A
     64px il reste bien sur la photo. */
  bottom: 64px;
  z-index: 3;
}

/* Meme principe que #category ci-dessus (sorti du flux centre de
   .catalog-hero__left, remonte au-dessus de la vague), mais la vue
   grille categorie aligne sur le bord GAUCHE fixe de sa grille produits
   (30px) -- les pages "A propos"/CMS, elles, ont un contenu CENTRE
   (pas cale a gauche), donc le fil d'ariane doit l'etre aussi, sur la
   MEME largeur de contenu que le bloc juste en dessous. */
.about-page .catalog-breadcrumb,
.cms-page .catalog-breadcrumb {
  /* .catalog-hero__left (parent) est en text-align:center pour le
     titre/texte centres du hero -- sans l'ecraser ici, le fil d'ariane
     (width:100%, voir plus bas) heritait ce centrage et son contenu se
     retrouvait au milieu de la page au lieu d'aligne a gauche. */
  text-align: left;
}

.about-page .catalog-breadcrumb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 64px;
  z-index: 3;
  /* Meme systeme que .about-page__content (about.css) : max-width:1300px
     (aligne sur le footer/#main, voir chantier d'alignement general),
     padding 0 5vw, centre -- calc() compense le padding propre a cet
     element (que .about-page__content lui, n'a pas) pour que la zone de
     texte utile tombe pile sur 1300px, meme technique deja utilisee
     pour aligner .bubble-carousel-intro sur .wide-banner__intro. */
  width: 100%;
  max-width: calc(1300px + 10vw);
  box-sizing: border-box;
  padding: 0 5vw;
}

.cms-page .catalog-breadcrumb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 64px;
  z-index: 3;
  /* Meme systeme que .cms-page__panel (about.css) : max-width:900px EN
     border-box (son padding clamp(28px,4vw,48px) est DEJA inclus dans
     ces 900px, pas ajoute par-dessus -- contrairement a
     .about-page__content plus haut, qui n'a pas de padding propre).
     Reprendre max-width et padding a l'identique (sans calc() ici)
     donne donc le meme bord exterieur ET le meme retrait de texte. */
  width: 100%;
  max-width: 900px;
  box-sizing: border-box;
  padding: 0 clamp(28px, 4vw, 48px);
}

.catalog-breadcrumb a {
  color: #ffffff;
  text-decoration: none;
}

.catalog-breadcrumb a:hover {
  opacity: 0.75;
}

.catalog-breadcrumb__sep {
  margin: 0 6px;
}

/* Titre puis sous-titre en dessous, centres (meme placement que
   .hero__content sur la home). */
.catalog-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.catalog-hero__title {
  margin: 0;
  /* Plus de max-width:90% : forcait certains titres (plus longs) sur 2
     lignes des qu'ils depassaient cette largeur, alors que rien
     n'empechait de laisser le titre utiliser toute la largeur
     disponible (.catalog-hero__content, deja pleine largeur/centre). */
  width: 100%;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(32px, 6vw, 64px);
  text-align: center;
}

/* Point bleu de signature, meme recette que le hero de la home
   (.hero__title-dot dans custom.css) -- classe generique partagee ici
   puisque product.css est charge par toutes les pages "secondaires"
   (categorie, recherche, CMS, panier, connexion/inscription, suivi de
   commande...), contrairement a custom.css (home uniquement) ou
   about.css (page A propos uniquement). */
.hero-dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: #2323e0;
  vertical-align: baseline;
}

.catalog-hero__description {
  max-width: 500px;
  margin: 0 auto;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
}

.catalog-hero__description p {
  margin: 0;
  color: #ffffff;
  font-size: inherit;
  line-height: inherit;
}

/* ---------- Grille automatique "gamme" : une seule grille continue,
   plus de decoupage en lignes/hero. Chaque tuile porte son propre format
   (1x1 par defaut, ou 2x1/1x2/2x2 choisi par le marchand en fiche
   produit -- voir Bleucanin_Nav::getGammeFormat) et occupe 1 ou 2
   colonnes/lignes en consequence. grid-auto-flow: dense comble les trous
   laisses par les tuiles larges/hautes en reordonnant localement les
   tuiles suivantes -- l'ordre du tri actif (prix, nom...) reste globalement
   respecte, seules quelques tuiles proches peuvent etre permutees pour
   eviter un trou. ---------- */

/* Meme technique full-bleed que .catalog-grid, pour laisser assez de
   place aux 4 colonnes fixes (300px = 430px -30%, echelle a conserver
   telle quelle, pas de redimensionnement responsive en fr). */
.gamme-grid {
  display: grid;
  /* 1fr (pas un 350px fixe) : les 4 colonnes se partagent l'espace
     disponible a parts EGALES, donc ne peuvent jamais depasser la
     fenetre quelle que soit sa largeur -- corrige un vrai trou de
     responsive entre 1200px (bascule 3 colonnes ci-dessous) et ~1565px
     (largeur minimale pour loger 4 colonnes fixes de 350px + gaps +
     padding), ou les tuiles debordaient purement et simplement de
     l'ecran. (minmax(0, 1fr) plutot que min(1fr, 350px) : ce dernier
     produisait des colonnes inegales dans ce moteur de rendu -- 1fr pur
     est le calcul de repartition le plus fiable, meme technique que les
     breakpoints tablette/mobile ci-dessous.) */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* --gg-cell = la taille (largeur ET hauteur) d'UNE case carree, seule
     source de verite pour les 2 dimensions -- essentiel pour ne jamais
     perdre le carre : avant, la largeur de colonne (1fr, fonction de la
     largeur dispo) et la hauteur de ligne (calc en vw, plafonnee en vh)
     etaient 2 formules INDEPENDANTES qui ne coincidaient que tant que le
     plafond vh n'etait pas atteint -- des qu'il l'etait, les tuiles
     devenaient rectangulaires (largeur toujours dictee par la fenetre,
     hauteur bridee par l'ecran). Ici, max-width RECALE la largeur du
     conteneur (donc celle de chaque colonne 1fr) sur --gg-cell des que
     le plafond vh est actif, donc largeur = hauteur = --gg-cell dans
     tous les cas. Plafond applique a la PLUS GRANDE tuile (2x2, qui
     occupe 2 lignes + 1 gap) a 80vh, pas a la ligne elle-meme (une 2x2
     ferait alors 2x80vh) : 1 ligne = (80vh - gap 35px) / 2 = 40vh -
     17.5px. */
  --gg-cell: min(calc((100vw - 165px) / 4), calc(40vh - 17.5px));
  grid-auto-rows: var(--gg-cell);
  grid-auto-flow: dense;
  gap: 35px;
  width: 100vw;
  /* 4 cases + 3 gaps (35px*3) + le padding du conteneur (30px*2) -- vaut
     exactement 100vw quand --gg-cell n'est pas bride (la formule se
     simplifie), donc aucun effet tant que le plafond vh n'est pas actif. */
  max-width: calc(4 * var(--gg-cell) + 105px + 60px);
  /* margin-left/right:calc(50% - 50vw) cale le bord GAUCHE de la boite
     pile sur le bord gauche du viewport (x=0), independamment de sa
     propre largeur (une valeur de margin ne depend pas de la largeur
     qu'elle finit par produire) -- exactement comme avant. Seul
     probleme : des que max-width retrecit la boite, elle reste "collee"
     a gauche au lieu d'etre centree (tout l'espace libere se retrouve a
     droite). Le transform ci-dessous corrige ca EN PLUS, sans toucher au
     flux : translateX de (100vw - 100%) / 2 -- ou 100% dans un transform
     se base sur la largeur REELLE, deja retrecie par max-width -- recule
     la boite exactement de ce qu'il faut pour la centrer. Quand
     max-width n'est pas actif (100% = 100vw), ce decalage vaut 0 :
     aucun effet sur le comportement plein ecran d'origine. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  transform: translateX(calc((100vw - 100%) / 2));
  margin-bottom: 48px;
  padding: 0 30px;
  box-sizing: border-box;
  justify-content: center;
}

/* Photo + nom/prix EN DESSOUS (sur le fond de la page, plus incrustes
   sur la photo) -- mais la case de grille (.gamme-tile) garde exactement
   la meme taille/position qu'avant (aucun decalage de grille) : c'est la
   photo elle-meme qui rogne une bande en bas pour laisser la place a la
   legende, via .gamme-tile__media en flex:1 1 auto dans une colonne. */
.gamme-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border-radius: 0;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  /* Sans ca, un item de grille garde min-width:auto par defaut : si son
     contenu (ex. legende + prix "A partir de X e" sur une seule ligne)
     depasse la largeur de sa colonne 1fr, la colonne entiere s'agrandit
     pour l'accueillir ("grid blowout"), ce qui fait deborder toute la
     grille -- visible en mobile ou justify-content:center decale alors
     les tuiles hors ecran. */
  min-width: 0;
}

.gamme-tile:hover {
  transform: translateY(-6px);
}

.gamme-tile--1x1 {
  grid-column: span 1;
  grid-row: span 1;
}

.gamme-tile--2x1 {
  grid-column: span 2;
  grid-row: span 1;
}

.gamme-tile--1x2 {
  grid-column: span 1;
  grid-row: span 2;
}

.gamme-tile--2x2 {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1 / 1;
}

.gamme-tile__media {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
}

.gamme-tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.gamme-tile:hover .gamme-tile__media img {
  transform: scale(1.08);
}

/* 2 lignes (nom puis prix) au lieu de cote a cote -- nom et prix tous
   les 2 alignes a gauche (retour utilisateur : le prix a droite via
   align-self:flex-end ne convenait pas). */
.gamme-tile__caption {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  /* 4px -> 1px (retour utilisateur) : nom/prix plus resserres maintenant
     qu'ils sont sur 2 lignes. */
  gap: 1px;
  padding: 10px 0 0;
  min-width: 0;
}

.gamme-tile__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gamme-tile__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000000;
  font-size: 13px;
  font-weight: 600;
}

.gamme-tile__price {
  flex: 0 0 auto;
  align-self: flex-start;
  white-space: nowrap;
  color: #000000;
  font-size: 12px;
  font-weight: 600;
}

.gamme-tile--2x2 .gamme-tile__caption,
.gamme-tile--2x1 .gamme-tile__caption {
  padding-top: 14px;
}

@media (max-width: 1200px) {
  /* Tablette : 3 colonnes. Le placement explicite (colonne/ligne calcule
     en PHP, voir Bleucanin_Nav::placeGammeTiles) suppose 4 colonnes fixes
     -- invalide des qu'on change ce nombre. On neutralise le style
     inline (!important, seule facon de passer devant un style inline en
     CSS) pour retomber sur l'auto-placement du navigateur (grid-auto-
     flow:dense deja pose sur .gamme-grid) avec les tailles de la classe
     .gamme-tile--*, qui redimensionnent donc les vignettes pour
     correspondre a la nouvelle grille. */
  .gamme-grid {
    grid-template-columns: repeat(3, 1fr);
    /* Meme principe que la regle desktop plus haut : --gg-cell pilote a
       la fois la largeur de colonne (via max-width, qui recale le
       conteneur donc chaque 1fr) et la hauteur de ligne -- garantit des
       tuiles carrees meme quand le plafond vh est actif. Hauteur de
       ligne = largeur reelle d'une colonne, pas un aspect-ratio fixe par
       tuile (essaye puis abandonne : avec grid-auto-rows:auto, chaque
       ligne peut avoir une hauteur differente selon son contenu, ce qui
       desaligne les tuiles entre colonnes -- et un aspect-ratio du style
       "2/1" ignore le gap entre les colonnes qu'un span-2 traverse). */
    --gg-cell: min(calc((100vw - 130px) / 3), calc(40vh - 17.5px));
    grid-auto-rows: var(--gg-cell);
    max-width: calc(3 * var(--gg-cell) + 70px + 60px);
  }

  .gamme-tile {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .gamme-tile--2x1,
  .gamme-tile--2x2 {
    grid-column: span 2 !important;
  }

  .gamme-tile--1x2,
  .gamme-tile--2x2 {
    grid-row: span 2 !important;
  }
}

@media (max-width: 700px) {
  /* Telephone : 2 colonnes (meme neutralisation heritee de la regle
     ci-dessus, seul le nombre de colonnes change). Meme calcul que la
     regle tablette, mais avec un seul gap entre 2 colonnes. */
  .gamme-grid {
    grid-template-columns: repeat(2, 1fr);
    --gg-cell: min(calc((100vw - 95px) / 2), calc(40vh - 17.5px));
    grid-auto-rows: var(--gg-cell);
    max-width: calc(2 * var(--gg-cell) + 35px + 60px);
  }
}

/* ---------- Barre de filtres en pilules -- remplace la sidebar.
   "Categorie"/"Prix"/"Disponibilite" restent un placeholder visuel (voir
   commentaire dans catalog/listing/category.tpl), "Trier" est le seul
   pilule fonctionnelle pour l'instant. ---------- */

.catalog-filterbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.catalog-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px -10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #000000;
  cursor: pointer;
}

.catalog-pill:disabled {
  cursor: default;
  opacity: 0.55;
}

.catalog-pill__chevron {
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}

.catalog-pill--menu {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.catalog-pill__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px -10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #000000;
  cursor: pointer;
}

.catalog-pill__toggle:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: #000000;
  opacity: 0.85;
}

.catalog-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2323e0;
}

.catalog-pill__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top-color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 20px 40px -12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.catalog-pill--menu.is-open .catalog-pill__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.catalog-pill__option {
  display: block;
  padding: 8px 14px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  color: #000000;
  white-space: nowrap;
}

.catalog-pill__option:hover,
.catalog-pill__option.current {
  background: rgba(255, 255, 255, 0.18);
  color: #000000;
}

.catalog-pill__panel--form {
  padding: 14px;
  min-width: 220px;
}

.catalog-pill__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: inherit;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: 10px;
}

.catalog-pill__field input {
  width: 90px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  color: #000000;
}

.catalog-pill__panel--swatches {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 10px;
  max-width: 220px;
}

.catalog-pill__panel--swatches .catalog-pill__option {
  flex: 0 0 100%;
  margin-bottom: 4px;
}

.catalog-pill__swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(26, 26, 26, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.catalog-pill__swatch.is-active {
  border: 2px solid #2323e0;
}

.catalog-pill__submit {
  width: 100%;
  border: none;
  border-radius: 999px;
  background: #1a1a1a;
  color: #000000;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.catalog-pill__submit:hover {
  background: #2323e0;
}

.catalog-count {
  margin: 0 0 20px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
}

/* ---------- Drawer de filtres : bulle flottante fixe + panneau lateral
   glass (remplace les pilules Prix/attributs empilees dans la barre).
   ---------- */

.catalog-filter-fab {
  position: fixed;
  /* top RESTE FIXE (la position "pinned", voir --fab-pinned-top mise a
     jour en JS juste au resize/chargement, jamais au scroll) -- avant,
     le JS changeait "top" directement a CHAQUE scroll (voir
     initFabPosition dans category.tpl), ce qui force un recalcul de
     mise en page (reflow) a chaque frame et donnait le lag ressenti
     (retour utilisateur). Le suivi pendant le scroll (avant d'atteindre
     cette position pinned) passe maintenant par --fab-follow-offset
     ci-dessous, en transform (compositeur seul, pas de reflow). */
  top: var(--fab-pinned-top, 32px);
  right: 32px;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 48px;
  padding: 0 20px 0 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 30px -10px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  color: #000000;
  cursor: pointer;
  transform: translateY(var(--fab-follow-offset, 0px));
  transition: background 0.15s ease, color 0.15s ease;
}

.catalog-filter-fab:hover {
  /* Compose avec le suivi de scroll (--fab-follow-offset) plutot que de
     l'ecraser -- sinon le bouton "sauterait" a translateY(-2px) pile en
     cas de survol pendant le scroll, perdant sa position de suivi. */
  transform: translateY(calc(var(--fab-follow-offset, 0px) - 2px));
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
  /* Blanc, pas noir : fond bleu plein au survol, meme exception que
     .hero__cta:hover -- du texte noir y serait illisible. */
  color: #ffffff;
}

.catalog-filter-fab__label {
  font-family: 'Spline Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.catalog-filter-fab__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2323e0;
  /* Blanc : pastille bleue pleine, meme exception que .bc-nav__cart-count. */
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.catalog-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.catalog-filter-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

#js-catalog-results {
  transition: opacity 0.15s ease;
}

#js-catalog-results.is-loading {
  opacity: 0.45;
  pointer-events: none;
}

.catalog-filter-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1400;
  width: 380px;
  max-width: 90vw;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  /* Meme recette "verre" que les autres panneaux du site (product-description-panel,
     auth-panel, cms-page__panel...) -- avant, un degrade bleu-violet
     different de partout ailleurs, hors theme. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.35));
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.25);
}

.catalog-filter-drawer.is-open {
  transform: translateX(0);
}

.catalog-filter-drawer__form {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.catalog-filter-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.catalog-filter-drawer__title {
  margin: 0;
  color: #000000;
  font-weight: 700;
  font-size: 20px;
}

.catalog-filter-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #000000;
  cursor: pointer;
}

.catalog-filter-drawer__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.catalog-filter-drawer__body {
  flex: 1 1 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.catalog-filter-drawer__section-title {
  margin: 0 0 14px;
  color: #000000;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.catalog-filter-drawer__price {
  display: flex;
  gap: 12px;
}

.catalog-filter-drawer__price .catalog-pill__field {
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: rgba(0, 0, 0, 0.75);
}

.catalog-filter-drawer__price .catalog-pill__field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.catalog-filter-drawer__price .catalog-pill__field input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.75);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12));
}

.catalog-filter-drawer__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog-filter-drawer__options--swatches .catalog-pill__swatch {
  cursor: pointer;
}

.catalog-filter-drawer__chip {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  color: #000000;
}

.catalog-filter-drawer__chip:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

.catalog-filter-drawer__chip.current {
  background: #ffffff;
  border-color: #1a1a1a;
  color: #2323e0;
}

.catalog-filter-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.catalog-filter-drawer__reset {
  color: rgba(0, 0, 0, 0.75);
  font-size: 13px;
  text-decoration: underline;
}

.catalog-filter-drawer__reset:hover {
  color: #000000;
}

.catalog-filter-drawer__footer .catalog-pill__submit {
  flex: 1 1 auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px -8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  color: #000000;
  transition: background 0.2s ease, color 0.2s ease;
}

.catalog-filter-drawer__footer .catalog-pill__submit:hover {
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
  color: #000000;
}

/* ---------- Grille produits ---------- */

/* padding de 30px depuis le VRAI bord d'ecran (pas depuis #main, deja
   retreci a 90%/1300px) : meme technique full-bleed que .catalog-hero. */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 350px);
  justify-content: center;
  row-gap: 32px;
  column-gap: 24px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 32px;
  padding: 0 30px;
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .catalog-grid {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
}

/* ---------- Carte produit en 2 elements : la bulle glass (image pleine
   taille) et, en dessous, le nom + bouton "Decouvrir". ---------- */

.catalog-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Le theme parent classic force .product-miniature en
   display:flex;justify-content:center (pense pour son ancien wrapper
   .product a largeur fixe) : ca compressait notre carte (bulle image +
   footer) cote a cote au lieu de les empiler. On le neutralise ici. */
.catalog-card .product-miniature {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

.catalog-card__media {
  position: relative;
  width: 450px;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 30px -12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.catalog-card:hover .catalog-card__media {
  transform: translateY(-6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 40px -14px rgba(0, 0, 0, 0.4);
}

.catalog-card:hover .catalog-card__thumb img {
  transform: scale(1.06);
}

.catalog-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* <picture> (utilise pour le visuel de secours du produit) est inline
   par defaut et ne remplissait pas le cadre -- seul l'<img> a l'interieur
   avait width/height:100%, mais relatif a une boite qui ne prenait pas
   toute la place. On force le wrapper lui-meme a occuper tout le cadre. */
.catalog-card__thumb picture {
  display: block;
  width: 100%;
  height: 100%;
}

.catalog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Badges "Neuf"/"Promo"/etc (product-flags.tpl du theme parent) --
   remplaces par des pastilles rondes liquid glass, icone seule (le
   texte core est masque), empilees en haut a gauche de l'image. */
.catalog-card__thumb .product-flags {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Bulle produit plus grande que les vignettes de la grille : les
   pastilles ont plus de respiration par rapport au coin. */
.product-gallery__cover .product-flags {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-gallery__cover .product-flags .product-flag,
.catalog-card__thumb .product-flags .product-flag {
  position: relative;
  flex: 0 0 32px;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  cursor: default;
}

.product-gallery__cover .product-flags .product-flag::before,
.catalog-card__thumb .product-flags .product-flag::before {
  content: "\e54e";
  font-family: "Material Icons";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #000000;
}

.product-gallery__cover .product-flags .product-flag.new::before,
.catalog-card__thumb .product-flags .product-flag.new::before {
  content: "\e838";
}

.product-gallery__cover .product-flags .product-flag.discount::before,
.catalog-card__thumb .product-flags .product-flag.discount::before,
.product-gallery__cover .product-flags .product-flag.on-sale::before,
.catalog-card__thumb .product-flags .product-flag.on-sale::before {
  content: "\e54e";
}

.product-gallery__cover .product-flags .product-flag.online-only::before,
.catalog-card__thumb .product-flags .product-flag.online-only::before {
  content: "\e894";
}

.product-gallery__cover .product-flags .product-flag.pack::before,
.catalog-card__thumb .product-flags .product-flag.pack::before {
  content: "\e8b8";
}

/* Pastilles de variantes couleur -- deplacees en overlay sur la bulle
   image (plus de barre blanche en dessous), rendues rondes (le theme
   parent les rend carrees par defaut). */
.catalog-card__variants {
  position: absolute;
  left: 12px;
  top: 48px;
  z-index: 2;
}

.catalog-card__variants .variant-links {
  position: static;
  top: auto;
  width: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
}

.catalog-card__variants .variant-links .color {
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.catalog-card__variants .variant-links .color.active,
.catalog-card__variants .variant-links .color:hover {
  border: 2px solid #ffffff;
}

.catalog-card__variants .variant-links .js-count.count {
  display: none;
}

/* Pastille "Ajouter" -- petite pilule glass en bas a droite de l'image,
   meme recette que .hero__cta ("Decouvrir" de la home), pas un bandeau
   pleine largeur. Cachee par defaut, apparait au survol de la carte. */
.catalog-card__addtocart {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  color: #f2ede2;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, color 0.15s ease;
}

.catalog-card:hover .catalog-card__addtocart {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.catalog-card__addtocart:hover {
  border-color: rgba(35, 35, 224, 0.5);
  border-top-color: rgba(88, 88, 235, 0.7);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.55), rgba(35, 35, 224, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  color: #000000;
}

.catalog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}

.catalog-card__info {
  min-width: 0;
}

.catalog-card__name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.catalog-card__name a {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000000;
  text-decoration: none;
}

.catalog-card__name a:hover {
  color: #2323e0;
}

.catalog-card__variant {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.catalog-card__tile-price {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
}

.catalog-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
}

.catalog-card__price-current {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
}

.catalog-card__price-old {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  text-decoration: line-through;
}


/* ---------- Pagination ---------- */

.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.catalog-pagination__summary {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}

.catalog-pagination__list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 24px -10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.catalog-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  color: #000000;
  font-size: 13px;
  text-decoration: none;
}

.catalog-pagination__link:hover {
  background: rgba(35, 35, 224, 0.1);
  color: #2323e0;
}

li.is-current .catalog-pagination__link {
  background: #2323e0;
  color: #ffffff;
}

.catalog-pagination__link.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.catalog-pagination__spacer {
  padding: 0 4px;
  color: rgba(0, 0, 0, 0.4);
}

/* ---------- GALERIE IMAGES ---------- */

#product .images-container {
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  padding: 20px;
}

#product .product-cover {
  border-radius: 24px;
  overflow: hidden;
}

#product .product-images .thumb-container {
  border-radius: 16px;
  overflow: hidden;
}

#product .product-images .thumb {
  border-radius: 16px;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

#product .product-images .thumb.selected,
#product .product-images .thumb:hover {
  border-color: #2323e0;
  transform: translateY(-2px);
}

/* ---------- BLOC D'ACHAT (titre, prix, variantes, ATC) ---------- */

#product h1.h1 {
  color: #000000;
  font-weight: 700;
}

#product .product-prices,
#product .product-actions,
#product .tabs {
  position: relative;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  padding: 24px 28px;
  margin-bottom: 24px;
}

#product .current-price-value {
  color: #2323e0;
  font-weight: 700;
  font-size: 1.4em;
}

#product .product-variants-item .control-label {
  font-weight: 600;
  color: #000000;
}

#product .product-variants select.form-control-select {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.5);
  padding: 8px 16px;
}

#product .product-variants .color,
#product .product-variants .radio-label {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#product .product-variants input:checked + .color,
#product .product-variants input:checked ~ .radio-label {
  box-shadow: 0 0 0 2px #2323e0;
  transform: scale(1.08);
}

#product .product-quantity .qty input {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.5);
  padding: 10px 16px;
  text-align: center;
}

#product .btn.add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.9), rgba(35, 35, 224, 0.75));
  color: #f2ede2;
  font-weight: 600;
  padding: 14px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#product .btn.add-to-cart:hover {
  transform: scale(1.03);
  box-shadow: 0 14px 30px -10px rgba(35, 35, 224, 0.5);
}

#product .product-availability .alert {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.4);
}

/* ---------- TABS DESCRIPTION / DETAILS ---------- */

#product .tabs .nav-tabs {
  border: none;
  gap: 8px;
  margin-bottom: 16px;
}

#product .tabs .nav-tabs .nav-link {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.3);
  color: rgba(0, 0, 0, 0.7);
  padding: 8px 20px;
}

#product .tabs .nav-tabs .nav-link.active {
  background: #2323e0;
  border-color: #2323e0;
  color: #f2ede2;
}

/* ---------- PRODUITS ACCESSOIRES ---------- */

#product .product-accessories .product-miniature {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 30px -12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  overflow: hidden;
  transition: transform 0.2s ease;
}

#product .product-accessories .product-miniature:hover {
  transform: translateY(-4px);
}

#product .product-accessories .thumbnail-container {
  padding: 12px;
}

#product .product-accessories .product-title a {
  color: #000000;
}

#product .product-accessories .price {
  color: #2323e0;
  font-weight: 700;
}

/* ==========================================================================
   PAGE PANIER (checkout/cart.tpl, checkout/cart-empty.tpl)
   ========================================================================== */

/* Meme correctif de largeur que body#product #main (voir son commentaire
   plus haut) -- alignement avec le footer. */
body#cart #main {
  padding: 0 5vw 80px;
  max-width: calc(1300px + 10vw);
  margin: 0 auto;
  box-sizing: border-box;
}

.cart-page__title {
  margin: 32px 0 28px;
  color: #000000;
  font-weight: 700;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Lignes produit ---------- */

.cart-lines {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-line {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.cart-line__media {
  position: relative;
  flex: 0 0 96px;
  width: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.5);
}

.cart-line__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
}

.cart-line__body {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-line__name {
  display: block;
  margin-bottom: 4px;
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-line__name:hover {
  color: #2323e0;
}

.cart-line__attrs {
  margin: 0 0 8px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cart-line__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cart-line__price-old {
  color: rgba(0, 0, 0, 0.45);
  font-size: 13px;
  text-decoration: line-through;
}

.cart-line__price-current {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
}

.cart-line__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}

.cart-line__gift {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
}

.cart-line__total {
  min-width: 80px;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  text-align: right;
}

.cart-line__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.6);
  transition: color 0.15s ease, background 0.15s ease;
}

.cart-line__remove:hover {
  color: #000000;
  background: rgba(224, 64, 42, 0.35);
}

/* Version compacte de .product-qty (fiche produit) pour les lignes de
   panier -- memes classes de base, juste plus petite et en liens <a>
   plutot qu'un input (up/down_quantity_url du coeur, +/-1 direct). */
.product-qty--cart {
  height: 40px;
}

.product-qty--cart .product-qty__step {
  width: 32px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
}

.product-qty--cart .product-qty__input {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 40px;
}

.cart-continue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.cart-continue:hover {
  color: #000000;
}

/* ---------- Recapitulatif (sticky, meme bulle que .product-description-panel) ---------- */

.cart-summary {
  position: sticky;
  top: 130px;
  padding: 32px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.cart-summary__title {
  margin: 0 0 20px;
  color: #000000;
  font-weight: 700;
}

.cart-summary__lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.cart-summary__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: rgba(0, 0, 0, 0.8);
  font-size: 14px;
}

.cart-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 24px;
  color: #000000;
  font-size: 20px;
  font-weight: 700;
}

.cart-summary__warning {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(224, 64, 42, 0.4);
  background: rgba(224, 64, 42, 0.12);
  color: #000000;
  font-size: 13px;
}

.cart-summary__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px -10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.cart-summary__checkout:hover {
  transform: translateY(-2px);
  border-color: rgba(35, 35, 224, 0.5);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
  color: #000000;
}

.cart-summary__checkout--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.product-reassurance--cart {
  justify-content: center;
  margin-top: 24px;
  padding-top: 20px;
}

/* ---------- Bon de reduction ---------- */

.cart-voucher {
  margin: 20px 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.cart-voucher__applied {
  margin-bottom: 8px;
  color: #000000;
}

.cart-voucher__applied a {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.cart-voucher__toggle {
  background: none;
  border: none;
  padding: 0;
  color: rgba(0, 0, 0, 0.75);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.cart-voucher__toggle:hover {
  color: #000000;
}

.cart-voucher__form {
  display: none;
  gap: 8px;
  margin-top: 12px;
}

.cart-voucher__form.is-open {
  display: flex;
}

.cart-voucher__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  color: #000000;
  font-size: 13px;
}

.cart-voucher__input::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.cart-voucher__input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.75);
}

.cart-voucher__submit {
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: #1a1a1a;
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cart-voucher__submit:hover {
  background: #2323e0;
}

/* ---------- Panier vide ---------- */

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 120px 24px;
  text-align: center;
  color: rgba(0, 0, 0, 0.75);
}

.cart-empty svg {
  color: rgba(0, 0, 0, 0.5);
}

.cart-empty h1 {
  margin: 0;
  color: #000000;
  font-weight: 700;
}

/* ---------- Responsive mobile ---------- */

@media (max-width: 640px) {
  .cart-page__title {
    margin: 24px 0 20px;
  }

  /* .cart-line etait une seule rangee flex (photo + infos + qte/prix/
     suppression) qui ne retombait jamais a la ligne -- sur un ecran
     etroit, ca forcait la carte a s'elargir bien au-dela du viewport
     (540px de large pour un ecran de 390px, scroll horizontal sur toute
     la page). flex-wrap: la 2e partie (qte/total/suppr) passe sous la
     photo+nom des que la place manque, sans jamais depasser. */
  .cart-line {
    flex-wrap: wrap;
    padding: 16px;
    gap: 12px 16px;
  }

  .cart-line__media {
    flex: 0 0 72px;
    width: 72px;
  }

  .cart-line__body {
    flex: 1 1 auto;
  }

  .cart-line__actions {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .cart-summary {
    position: static;
    padding: 24px;
  }
}

/* ==========================================================================
   PAGE COMMANDE (checkout/*.tpl du theme PARENT, HTML/JS du coeur
   PrestaShop conserves tels quels -- habillage visuel seulement, decision
   explicite : trop critique/complexe (etapes, formulaires d'adresse,
   transporteurs, paiement, tout pilote par checkout.js) pour etre
   reconstruit de zero comme les pages catalogue. Tout scope sous
   "body#checkout" (page_name du OrderController), sans effet ailleurs. ---
   La feuille de style elle-meme est deja chargee sur cette page via la
   condition generique de _partials/head.tpl ($page.page_name != 'index').
   ========================================================================== */

body#checkout {
  font-family: "Spline Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Nav + footer simplifies du tunnel de commande (markup
   Bootstrap du theme parent, pas notre nav custom -- re-skin visuel
   seulement, structure/hooks/JS conserves). ---------- */

body#checkout .header-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

body#checkout .header-nav a,
body#checkout .header-nav i,
body#checkout .header-top,
body#checkout .header-top a {
  color: #000000 !important;
}

body#checkout #footer,
body#checkout .page-footer {
  background: transparent !important;
  color: rgba(0, 0, 0, 0.8) !important;
}

body#checkout #footer a {
  color: rgba(0, 0, 0, 0.8) !important;
}

/* ---------- Structure generale : "cards" Bootstrap -> bulles liquid
   glass (etapes du checkout, recap panier). ---------- */

/* Meme correctif de largeur que body#product #main (voir son commentaire
   plus haut) -- alignement avec le footer. */
body#checkout #main {
  padding: 40px 5vw 80px;
  max-width: calc(1300px + 10vw);
  margin: 0 auto;
  box-sizing: border-box;
}

body#checkout .card,
body#checkout .checkout-step {
  /* !important : le theme parent pose .card/.checkout-step{background-color:#fff}
     a la MEME specificite (une seule classe) -- sans ca, le fond blanc
     du coeur pouvait continuer a gagner selon l'ordre de chargement
     effectif (ex: CSS combinee/cachee par la fonctionnalite "Combiner/
     Compresser" de PrestaShop), laissant le texte blanc illisible
     dessus. */
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-top-color: rgba(255, 255, 255, 0.55) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  margin-bottom: 20px;
  padding: 24px 28px;
  overflow: hidden;
}

body#checkout .checkout-step.-current {
  border-color: rgba(35, 35, 224, 0.5);
}

body#checkout .step-title {
  color: #000000;
  font-weight: 700;
}

body#checkout .step-title .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 13px;
}

body#checkout .checkout-step.-complete .step-title .done {
  color: #2323e0;
}

body#checkout .step-edit {
  color: rgba(0, 0, 0, 0.6) !important;
}

body#checkout p,
body#checkout span,
body#checkout label,
body#checkout .h4,
body#checkout .h5,
body#checkout .h6 {
  color: rgba(0, 0, 0, 0.85);
}

body#checkout a {
  color: #000000;
}

body#checkout a:hover {
  color: #2323e0;
}

/* ---------- Formulaires (adresse, promo, message de commande...) ---------- */

body#checkout input[type="text"],
body#checkout input[type="email"],
body#checkout input[type="password"],
body#checkout input[type="tel"],
body#checkout input[type="number"],
body#checkout select,
body#checkout textarea {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  color: #000000;
  padding: 10px 14px;
}

body#checkout input::placeholder,
body#checkout textarea::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

body#checkout input:focus,
body#checkout select:focus,
body#checkout textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.75);
}

body#checkout .form-control-label {
  color: rgba(0, 0, 0, 0.75);
}

/* ---------- Boutons ---------- */

body#checkout .btn-primary,
body#checkout .continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px -10px rgba(0, 0, 0, 0.25);
  color: #000000 !important;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body#checkout .btn-primary:hover,
body#checkout .continue:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
  color: #ffffff !important;
}

body#checkout .btn-primary.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- Adresses ---------- */

body#checkout .address-item {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.06) !important;
}

body#checkout .address-item.selected {
  border-color: #2323e0;
  background: rgba(35, 35, 224, 0.12);
}

body#checkout .address-item hr {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ---------- Transporteurs (livraison) ---------- */

body#checkout .delivery-option {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.06) !important;
  overflow: hidden;
  /* Retour utilisateur : la bulle semblait "coupee" a droite -- cet
     element porte LUI-MEME la classe Bootstrap ".row" (voir le HTML :
     <div class="row delivery-option js-delivery-option">), qui pose
     margin-left/right:-15px. Sans neutraliser cette marge negative ICI
     (overflow:hidden seul ne suffit pas -- c'est l'element ENTIER,
     bordure comprise, qui deborde de 15px a droite de son conteneur,
     pas juste un enfant qui deborde de lui), le cadre arrondi se fait
     couper par le conteneur parent. */
  margin-left: 0;
  margin-right: 0;
}

body#checkout .js-delivery-option:has(input:checked) {
  border-color: #2323e0;
  background: rgba(35, 35, 224, 0.12);
}

body#checkout .carrier-price,
body#checkout .carrier-name {
  color: #000000;
}

body#checkout .carrier-delay {
  color: rgba(0, 0, 0, 0.65);
}

/* ---------- Paiement ---------- */

body#checkout .payment-option {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.06) !important;
}

body#checkout .additional-information {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  padding: 14px 16px;
  margin-bottom: 10px;
}

/* ---------- Recapitulatif panier (colonne droite) ---------- */

body#checkout .cart-summary,
body#checkout .cart-grid-right .card {
  position: sticky;
  top: 24px;
}

body#checkout .cart-summary-line .label,
body#checkout .cart-summary-line .value {
  color: rgba(0, 0, 0, 0.85);
}

body#checkout .cart-summary-line.cart-total .label,
body#checkout .cart-summary-line.cart-total .value {
  color: #000000;
  font-weight: 700;
  font-size: 18px;
}

body#checkout .cart-summary-products .media-body a,
body#checkout .product-name {
  color: #000000 !important;
}

body#checkout hr {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   PAGE CONFIRMATION DE COMMANDE (checkout/order-confirmation.tpl)
   Reprend les recettes glass de la page panier (.cart-line, .cart-summary)
   -- meme famille visuelle, pas de nouveau systeme.
   ========================================================================== */

body#order-confirmation #main {
  padding: 0 5vw 80px;
  /* calc(1300px + 10vw) (pas 1300px tout court) : meme correctif de
     largeur que les autres pages "autonomes" (panier, categorie,
     produit, checkout) -- voir le commentaire de body#product #main
     plus haut -- pour retomber exactement sur la largeur du footer.
     Cette page a aussi un carrousel "produits populaires" en bas qui
     reutilise les memes classes de grille que les autres pages,
     prevues pour cette largeur. */
  max-width: calc(1300px + 10vw);
  margin: 0 auto;
  box-sizing: border-box;
}

.confirmation-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin: 48px 0 40px;
}

/* Meme recette glass que .cart-summary, en cercle -- badge de succes. */
.confirmation-hero__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.22), rgba(35, 35, 224, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 30px -12px rgba(35, 35, 224, 0.35);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  color: #2323e0;
  margin-bottom: 8px;
}

.confirmation-hero__title {
  margin: 0;
  color: #000000;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 36px);
}

.confirmation-hero__text {
  margin: 0;
  max-width: 520px;
  color: rgba(0, 0, 0, 0.75);
  font-size: 15px;
  line-height: 1.6;
}

.confirmation-hero__link {
  color: #2323e0;
  font-weight: 600;
}

.confirmation-hero__ref {
  margin: 4px 0 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(35, 35, 224, 0.08);
  color: #2323e0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Contenu de hooks (modules de paiement...) : garde une largeur/marge
   coherente avec le reste, sans imposer de style au HTML injecte par les
   modules tiers (qui a deja le sien la plupart du temps). */
.confirmation-hook {
  margin: 0 0 32px;
}

.confirmation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 32px;
}

@media (max-width: 900px) {
  .confirmation-layout {
    grid-template-columns: 1fr;
  }
}

.confirmation-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Reutilise .cart-line (panier) telle quelle pour l'image/nom/prix -- ne
   change que la fin de ligne (total, pas de bouton +/-/suppression ici,
   la commande est deja passee). */
.confirmation-items .cart-line {
  justify-content: space-between;
}

.confirmation-items__custom {
  display: block;
  margin: 2px 0;
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
}

.confirmation-items__total {
  flex: 0 0 auto;
  color: #000000;
  font-weight: 700;
  font-size: 15px;
}

.confirmation-summary {
  /* .cart-summary est en position:sticky (pertinent sur une longue page
     panier qu'on scrolle en modifiant les quantites) -- ici la page est
     figee (commande deja passee), le sticky n'a plus lieu d'etre. */
  position: static;
}

.confirmation-details {
  margin: 20px 0 24px;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(0, 0, 0, 0.8);
  font-size: 14px;
}

.confirmation-details em {
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  font-style: normal;
}

/* ---------- Creation de compte ---------- */

.confirmation-account {
  padding: 32px;
  margin-bottom: 32px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.confirmation-account__title {
  margin: 0 0 14px;
  color: #000000;
  font-weight: 700;
  font-size: 18px;
}

.confirmation-account__perks {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
}

.confirmation-account__perks li {
  position: relative;
  padding-left: 16px;
}

.confirmation-account__perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2323e0;
}

.confirmation-account__label {
  display: block;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 13px;
  font-weight: 600;
}

.confirmation-account__row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.confirmation-account__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.5);
  color: #000000;
  font-size: 14px;
  box-sizing: border-box;
}

.confirmation-account__input:focus {
  outline: none;
  border-color: #2323e0;
}

.confirmation-account__submit {
  flex: 0 0 auto;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px -10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.confirmation-account__submit:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
  color: #ffffff;
}