/* =========================================================================
   Glōss Atelier — polish.css
   Couche de finition front (chargée après app.css) : micro-interactions,
   états :focus-visible accessibles, et respect de prefers-reduced-motion.
   N'introduit aucune classe Tailwind nouvelle — cible les classes existantes.
   ========================================================================= */

/* =========================================================================
   ÉTAPE 0 — Refonte « 3 couleurs » (hors hero/3D)
   Ivoire #F7F2EC · Encre #1A1613 · Pulpe #8A2B3B (+ tons dérivés)
   ========================================================================= */
:root {
  /* on replie les teintes hors-palette sur les 3 couleurs (ou un neutre dérivé) */
  --color-nude: #ede3d6;   /* rose nude → neutre sable (tint d'ivoire) */
  --color-or:   #8a2b3b;   /* or → accent unique pulpe */
  --color-greige: #e7ddd0; /* tint d'ivoire un peu plus chaud */
}

/* ── Photos décoratives (background-image) → teinte BERRY (filtre only) ────
      grayscale → sepia → hue-rotate vers le pulpe : fiable sur background-image
      (le blend-mode rendait noir). Toutes les photos déco entrent dans la palette. */
.gl-cat-tile-img, .gl-feature-img, .gl-edito-img, .gl-step-visual {
  /* NE PAS toucher au position : ces spans sont déjà en absolute/inset:0 (app.css) */
  filter: grayscale(1) sepia(.5) saturate(2.4) hue-rotate(300deg) brightness(.97) contrast(1.04);
}
/* voile bas (sans blend) pour asseoir les labels sur les tuiles */
.gl-cat-tile-img::after, .gl-feature-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(26, 22, 19, .5));
}

/* ── Photos produit (img) : désaturées/calmées (restent reconnaissables) ── */
.gl-card-img img, .gl-promo-img img, .woocommerce ul.products li.product img {
  filter: saturate(.62) contrast(1.04) brightness(1.02);
  transition: filter .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.gl-card:hover .gl-card-img img { filter: saturate(.9) contrast(1.05); }

/* ── Reveal un cran plus « hero » (légèrement plus ample) ─────────────── */
[data-reveal] { transform: translateY(34px); }

/* ── Boutons : lift + ombre douce, pression à l'appui ─────────────────── */
.g-btn {
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s cubic-bezier(.16,1,.3,1),
              background-color .3s ease, color .3s ease;
  will-change: transform;
}
.g-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(26, 22, 19, .45);
}
.g-btn:active { transform: translateY(-1px); }

/* Variante claire (sur fond image, ex. hero) : halo nacré au survol */
.g-btn-light:hover {
  box-shadow: 0 14px 34px -10px rgba(255, 255, 255, .35);
}

/* Bouton magnétique : on neutralise la transition pendant le suivi curseur
   (gérée par GSAP quickTo), puis on la restaure au relâchement. */
.g-btn.is-magnetic { transition: box-shadow .35s cubic-bezier(.16,1,.3,1); }

/* ── Add to cart (carte produit) : pression + accent pulpe ────────────── */
.gl-card-add {
  transition: transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease, color .3s ease;
}
.gl-card-add:hover { transform: translateY(-2px); }
.gl-card-add:active { transform: scale(.96); }
.gl-card-add.added { background-color: var(--color-pulpe); color: #fff; }

/* ── Carte produit : zoom doux du visuel + élévation ──────────────────── */
.gl-card-media { will-change: transform; }
.gl-card-img { transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
@media (hover:hover) {
  .gl-card:hover .gl-card-img { transform: scale(1.06); }
}

/* ── Hero : indice de scroll, léger va-et-vient plus organique ────────── */
.gl-hero-scroll span {
  animation: gl-scroll-cue 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes gl-scroll-cue {
  0%   { transform: translateY(0);   opacity: .35; }
  50%  { transform: translateY(7px); opacity: 1; }
  100% { transform: translateY(0);   opacity: .35; }
}

/* ── Liens du menu : soulignement qui se déploie ──────────────────────── */
.gl-nav-link, .gl-menu a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s cubic-bezier(.16,1,.3,1);
}
.gl-nav-link:hover, .gl-menu a:hover { background-size: 100% 1px; }

/* ── Accessibilité : anneaux de focus clavier cohérents (pulpe) ───────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-pulpe);
  outline-offset: 3px;
  border-radius: 4px;
}
/* on retire l'outline héritée uniquement au survol souris (pas clavier) */
:focus:not(:focus-visible) { outline: none; }

/* =========================================================================
   LOADER — petit flacon de gloss qui se remplit (préchargement)
   ========================================================================= */
.gl-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
  background: radial-gradient(80% 70% at 50% 42%, #fcf9f4 0%, #f4ece2 100%);
  transition: opacity .6s ease, visibility .6s ease;
}
.gl-loader.is-done { opacity: 0; visibility: hidden; }              /* masqué une fois chargé */
.gl-loader-flask { position: relative; width: 50px; height: 96px; }
/* capuchon chromé */
.gl-loader-cap {
  position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  width: 34px; height: 26px; border-radius: 11px 11px 7px 7px;
  background: linear-gradient(150deg, #eef0f2, #c7ccd2 60%, #aeb4bb);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.6), 0 2px 5px rgba(26,22,19,.18);
  z-index: 2;
}
/* flacon en verre */
.gl-loader-glass {
  position: absolute; inset: 0; overflow: hidden;
  border: 2px solid rgba(138, 43, 59, .22);
  border-radius: 22px 22px 25px 25px;
  background: rgba(255, 255, 255, .35);
  box-shadow: inset 0 0 12px rgba(255,255,255,.5);
}
/* le produit (gloss) qui monte et redescend en boucle */
.gl-loader-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 12%;
  background: linear-gradient(180deg, #b4485a, #8a2b3b);
  border-radius: 40% 40% 0 0 / 12px 12px 0 0;
  animation: gl-loader-fill 1.7s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes gl-loader-fill { 0%, 100% { height: 12%; } 50% { height: 88%; } }
.gl-loader-word {
  margin: 0; font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 1rem; letter-spacing: .14em; color: var(--color-encre, #1a1613);
}
.gl-loader-word span { font-style: italic; }
@media (prefers-reduced-motion: reduce) { .gl-loader-fill { animation: none; height: 60%; } }

/* =========================================================================
   HERO 3D (Three.js piloté au scroll) — home-hero.php / hero3d.js
   ========================================================================= */
.gl-hero3d {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(82% 74% at 50% 38%, #fcf9f4 0%, #f3e7dd 56%, #ebdfd2 100%);
}
/* halo coloré derrière le rouge à lèvres */
.gl-hero3d-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 50% 52%, rgba(180, 72, 90, .20), transparent 70%),
    radial-gradient(30% 30% at 68% 30%, rgba(199, 169, 120, .18), transparent 72%);
}
.gl-hero3d-canvas {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
}

/* ── Titres (haut-gauche), empilés ────────────────────────────────────── */
.gl-hero3d-titles {
  position: absolute; z-index: 3; pointer-events: none;
  top: clamp(5rem, 12vh, 9rem);
  left: clamp(1.25rem, 5vw, 5rem);
  width: min(46%, 34rem);
}
.gl-hero3d-title {
  position: absolute; top: 0; left: 0; width: 100%; margin: 0;
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 4.4vw, 4.1rem);
  color: var(--color-encre, #1a1613);
}
.gl-hero3d-title em {
  font-style: italic;
  color: var(--color-pulpe, #8a2b3b);
}

/* ── Descriptions (bas-droite), empilées ──────────────────────────────── */
.gl-hero3d-descs {
  position: absolute; z-index: 3;
  right: clamp(1.25rem, 5vw, 5rem);
  bottom: clamp(4.5rem, 12vh, 8rem);
  width: min(40%, 26rem);
  text-align: right;
  pointer-events: none;
}
.gl-hero3d-desc { position: absolute; right: 0; bottom: 0; width: 100%; }
.gl-hero3d-eyebrow {
  margin: 0 0 .5rem;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-taupe, #8b8077);
}
.gl-hero3d-text {
  margin: 0 0 1.1rem;
  font-size: clamp(.95rem, 1.1vw, 1.08rem); line-height: 1.55;
  color: var(--color-encre, #1a1613);
}
.gl-hero3d-cta { pointer-events: auto; }

/* ── Indicateurs de phase + indice de scroll ──────────────────────────── */
.gl-hero3d-steps {
  position: absolute; z-index: 4; left: 50%; transform: translateX(-50%);
  bottom: clamp(1.5rem, 4vh, 2.4rem);
  display: flex; gap: .5rem;
}
.gl-hero3d-stepdot {
  width: 28px; height: 3px; border-radius: 999px;
  background: rgba(26, 22, 19, .18);
  transition: background-color .4s ease;
}
.gl-hero3d-stepdot.is-on { background: var(--color-pulpe, #8a2b3b); }
.gl-hero3d-cue {
  position: absolute; z-index: 4; left: 50%; transform: translateX(-50%);
  bottom: clamp(3rem, 7vh, 4.6rem);
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-taupe, #8b8077);
}
.gl-hero3d-cue span {
  width: 1px; height: 26px; background: currentColor; display: inline-block;
  transform-origin: top; animation: gl-cue 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes gl-cue { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ── Nuanciers (changement de teinte du rouge à lèvres) ───────────────── */
.gl-hero3d-swatches {
  position: absolute; z-index: 5;
  display: flex; flex-direction: column; gap: .7rem;
  pointer-events: auto;
}
/* groupe gauche remonté : reste visible même avant l'épinglage (sous l'en-tête sticky) */
.gl-hero3d-swatches--left  { left: clamp(1.25rem, 5vw, 5rem); bottom: clamp(7rem, 17vh, 9.5rem); }
.gl-hero3d-swatches--right { right: clamp(1.25rem, 5vw, 5rem); top: clamp(5rem, 12vh, 9rem); }
.gl-hero3d-swatch {
  position: relative;
  width: 54px; height: 54px; padding: 0;
  border: 0; border-radius: 14px; cursor: pointer;
  background: var(--sw-body, #8a2b3b);
  box-shadow: 0 2px 8px rgba(26, 22, 19, .18), inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
}
/* liseré "bouchon assorti" en bas du carré */
.gl-hero3d-swatch::after {
  content: ""; position: absolute; left: 5px; right: 5px; bottom: 5px; height: 5px;
  border-radius: 999px; background: var(--sw-cap, #e7c486);
}
.gl-hero3d-swatch:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(26, 22, 19, .26); }
.gl-hero3d-swatch.is-active {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-pulpe, #8a2b3b), 0 6px 16px rgba(26, 22, 19, .24);
}
/* Nom de la teinte ACTIVE, affiché à côté du carré, VERS L'INTÉRIEUR de la scène */
.gl-hero3d-swatch-name {
  position: absolute; top: 50%; transform: translateY(-50%);
  white-space: nowrap; pointer-events: none; opacity: 0;
  padding: .22rem .6rem; border-radius: 999px;
  background: rgba(247, 242, 236, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: .92rem; letter-spacing: .03em; color: var(--color-encre, #1a1613);
  box-shadow: 0 2px 8px rgba(26, 22, 19, .1);
  transition: opacity .35s ease;
}
/* groupe gauche (bas-gauche) → le nom part vers la DROITE (intérieur) */
.gl-hero3d-swatches--left  .gl-hero3d-swatch-name { left: calc(100% + .55rem); }
/* groupe droit (haut-droite) → le nom part vers la GAUCHE (intérieur) */
.gl-hero3d-swatches--right .gl-hero3d-swatch-name { right: calc(100% + .55rem); }
.gl-hero3d-swatch.is-active .gl-hero3d-swatch-name { opacity: 1; }

/* ── Fallback statique (pas de WebGL / reduced-motion) ────────────────── */
.gl-hero3d.is-static { height: 86vh; }
.gl-hero3d.is-static .gl-hero3d-canvas { display: none; }
.gl-hero3d.is-static .gl-hero3d-title:not(.is-active),
.gl-hero3d.is-static .gl-hero3d-desc:not(.is-active) { display: none; }
.gl-hero3d.is-static .gl-hero3d-title.is-active,
.gl-hero3d.is-static .gl-hero3d-desc.is-active { opacity: 1; }

/* ── Tablette / mobile : textes plus larges, moins serrés ─────────────── */
@media (max-width: 1023px) {
  .gl-hero3d-titles { width: min(72%, 30rem); top: clamp(4.5rem, 11vh, 7rem); }
  .gl-hero3d-descs  { width: min(66%, 22rem); bottom: clamp(5rem, 13vh, 7rem); }
}
@media (max-width: 640px) {
  .gl-hero3d-titles { width: 86%; }
  .gl-hero3d-descs  { width: 84%; }
  .gl-hero3d-title  { font-size: clamp(2rem, 8.5vw, 2.8rem); }
  /* nuanciers (verticaux) plus compacts ; le groupe de droite descend sous le titre */
  .gl-hero3d-swatch { width: 44px; height: 44px; border-radius: 11px; }
  .gl-hero3d-swatches { gap: .55rem; }
  .gl-hero3d-swatches--right { top: auto; bottom: clamp(8.5rem, 26vh, 12rem); }
}

/* ── Coupe-circuit : préférence "moins d'animations" ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .g-btn:hover, .g-btn:active,
  .gl-card-add:hover, .gl-card-add:active,
  .gl-card:hover .gl-card-img { transform: none; box-shadow: none; }
  .gl-hero-scroll span { animation: none; opacity: 1; }
  .gl-nav-link, .gl-menu a { transition: none; background-size: 100% 1px; }
}

/* =========================================================================
   SECTION « LA COIFFEUSE » — coffret 3D (home-coffret.php / coffret3d.js)
   ========================================================================= */
.gl-coffret {
  position: relative;
  min-height: 100vh; min-height: 100svh;        /* section épinglée → centrée pendant l'ouverture */
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 6vh, 5rem) 0;
  background: radial-gradient(90% 80% at 50% 30%, #fcf9f4 0%, #f3ece2 100%);
  text-align: center;
  overflow: hidden;
}
.gl-coffret-head { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem; }
.gl-coffret-eyebrow {
  margin: 0 0 .6rem; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--color-pulpe, #8a2b3b);
}
.gl-coffret-title {
  margin: 0; font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 500; line-height: 1.05; letter-spacing: -.01em;
  font-size: clamp(2rem, 4vw, 3.4rem); color: var(--color-encre, #1a1613);
}
.gl-coffret-title em { font-style: italic; color: var(--color-pulpe, #8a2b3b); }
.gl-coffret-sub {
  margin: .8rem auto 0; max-width: 32rem;
  font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.55; color: var(--color-taupe, #8b8077);
}

/* ── Mallettes 3D (CSS) qui s'ouvrent en escalier ─────────────────────── */
.gl-mallette {
  position: relative; margin: clamp(1.5rem, 4vh, 3rem) auto 0;
  width: 100%; height: clamp(390px, 54vh, 480px);
  overflow: hidden;
  perspective: 1200px;                           /* perspective uniquement pour les épaisseurs */
  --unit: clamp(206px, 21vw, 244px);             /* largeur d'1 tiroir « 1× » (= 2 cards) */
}
/* le COFFRE unique : bloc berry (à droite) d'où sortent tous les tiroirs */
/* le COFFRE : bloc HAUT à droite, z-index élevé → il couvre le bord droit des
   tiroirs (ils paraissent RATTACHÉS / sortir de lui). */
.gl-coffre {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: var(--unit); height: clamp(320px, 42vh, 400px);  /* plus ÉPAIS (≥ largeur du 1er tiroir) */
  transform: translate(250px, -50%);              /* bord gauche du coffre ≈ bord droit des tiroirs */
  border-radius: 20px;
  background: linear-gradient(160deg, #6e2230, #43141d);
  box-shadow: 0 0 34px rgba(26, 22, 19, .22), inset 0 1px 0 rgba(255, 255, 255, .05);  /* ombre douce, 4 côtés */
}
.gl-coffre::after {                               /* épaisseur côté gauche du coffre */
  content: ""; position: absolute; top: 10px; bottom: 10px; right: 100%; width: 26px;
  background: linear-gradient(90deg, #371017, #6e2230);
  border-radius: 16px 0 0 16px;
  transform-origin: 100% 50%; transform: perspective(800px) rotateY(56deg);
}
/* logo du site, centré au MILIEU du coffre, sur 2 lignes */
.gl-coffre-logo {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #f7f2ec; text-align: center;
}
.gl-coffre-logo em {
  font-style: normal; font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 1.5rem; line-height: 1; letter-spacing: .01em;
}
.gl-coffre-logo small {
  font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; opacity: .88;
}

/* origine centrée : les TIROIRS sont placés via --fx/--fy (JS) */
.gl-mallette-track { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
/* TIROIRS : bord DROIT aligné sous le coffre (rattachés), largeur = leurs cards
   (1 / 2 / 3 cards → 1× / 2× / 3×), empilés en cascade vers le bas via --gy. */
.gl-mallette-group {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--span, 1) * var(--unit));      /* 1× / 2× / 3× (agrandissement HORIZONTAL) */
  transform: translate(calc(-100% + 258px), calc(-50% + var(--gy, 0)));  /* bord droit sous le coffre */
}
/* corps clipé (case + cards) ; la POIGNÉE reste dehors (non clipée) */
.gl-drawer-body {
  position: relative; width: 100%;
  clip-path: inset(-12% 0% -12% 100%);           /* rentré → révélé depuis le coffre (droite→gauche) */
  will-change: clip-path;
}
/* corps du TIROIR (bac berry) */
.gl-mallette-case {
  position: absolute; z-index: 0; inset: 0;
  border-radius: 14px;
  background: linear-gradient(160deg, #8a2e3d, #5e1f2a);
  box-shadow: 0 0 24px rgba(26, 22, 19, .24), inset 0 1px 0 rgba(255, 255, 255, .08);  /* ombre douce, 4 côtés */
}
/* poignée chromée du tiroir (façade gauche = sens de sortie) */
.gl-drawer-handle {
  position: absolute; z-index: 4; top: 50%; left: -15px; transform: translateY(-50%);  /* DEHORS du tiroir, à gauche */
  width: 12px; height: 50px; border-radius: 6px; opacity: 0;
  background: linear-gradient(90deg, #d8dade, #aeb4bb);
  box-shadow: 0 0 8px rgba(0, 0, 0, .2);
}
/* cards normales debout, posées dans le tiroir (2 cards, largeur constante) */
.gl-mallette-cards {
  position: relative; z-index: 1; padding: 12px;
  display: flex; gap: 8px; align-items: flex-end; justify-content: flex-start;  /* cards au BOUT GAUCHE */
}
.gl-mc {
  width: calc((var(--unit) - 40px) / 2);          /* 2 cards tiennent dans « 1× » (avec marge → pas coupées) */
  background: var(--color-ivoire, #f7f2ec);
  border-radius: 13px; overflow: hidden; box-shadow: 0 0 16px rgba(26, 22, 19, .2);  /* ombre douce, 4 côtés */
  text-align: left; will-change: transform, opacity;
}
.gl-mc-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.gl-mc-badge {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  background: var(--color-pulpe, #8a2b3b); color: #fff;
  font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: .18rem .44rem; border-radius: 999px;
}
.gl-mc-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.66) contrast(1.04); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.gl-mc:hover .gl-mc-media img { transform: scale(1.06); }
.gl-mc-cat { margin: .55rem .8rem 0; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-taupe, #8b8077); }
.gl-mc-name { margin: .15rem .8rem 0; font-family: var(--font-display, "Fraunces", Georgia, serif); font-weight: 500; font-size: .95rem; line-height: 1.15; }
.gl-mc-name a { color: var(--color-encre, #1a1613); text-decoration: none; }
.gl-mc-foot { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin: .4rem .7rem .7rem; }
.gl-mc-price { color: var(--color-pulpe, #8a2b3b); font-weight: 600; font-size: .85rem; line-height: 1.1; }
.gl-mc-price del { color: var(--color-taupe, #8b8077); font-weight: 400; font-size: .72rem; margin-right: .25rem; text-decoration: line-through; }
.gl-mc-price ins { color: var(--color-pulpe, #8a2b3b); font-weight: 600; text-decoration: none; }
.gl-mc-add {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  background: var(--color-encre, #1a1613); color: #f7f2ec; text-decoration: none; font-size: 1.1rem; line-height: 1;
  transition: background .25s ease, transform .25s ease;
}
.gl-mc-add:hover { background: var(--color-pulpe, #8a2b3b); transform: translateY(-2px); }

.gl-coffret-hint {
  position: absolute; z-index: 4; left: 50%; bottom: 1rem; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-taupe, #8b8077); transition: opacity .4s ease;
}

/* Fallback statique (pas de 3D / reduced-motion) : grille simple */
.gl-coffret-fallback { display: none; }
.gl-coffret.is-static .gl-mallette { display: none; }
.gl-coffret.is-static .gl-coffret-fallback {
  display: grid; gap: 1rem; max-width: 1100px; margin: 2rem auto 0; padding: 0 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.gl-coffret-fb-item { text-decoration: none; color: var(--color-encre, #1a1613); display: block; }
.gl-coffret-fb-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; filter: saturate(.65); }
.gl-coffret-fb-name { display: block; margin-top: .5rem; font-family: var(--font-display, "Fraunces", Georgia, serif); }
.gl-coffret-fb-price { display: block; color: var(--color-pulpe, #8a2b3b); font-size: .9rem; }

@media (max-width: 860px) {
  .gl-mallette-case { transform: rotateX(46deg); }
  .gl-mc { width: clamp(124px, 30vw, 150px); }
}

/* =========================================================================
   ÉTAPE 1 — CATÉGORIES : hover premium (zoom visuel, label, flèche)
   ========================================================================= */
.gl-cat-tile { overflow: hidden; }
.gl-cat-tile-img { transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .5s ease; will-change: transform; }
@media (hover: hover) {
  .gl-cat-tile:hover .gl-cat-tile-img { transform: scale(1.08); }
}
/* voile qui se renforce un peu au survol (lisibilité du label) */
.gl-cat-tile-veil { transition: opacity .5s ease; }
.gl-cat-tile:hover .gl-cat-tile-veil { opacity: .9; }
/* nom qui se lève légèrement */
.gl-cat-tile-name { transition: transform .45s cubic-bezier(.16,1,.3,1); }
.gl-cat-tile:hover .gl-cat-tile-name { transform: translateY(-3px); }
/* « Découvrir → » : la flèche glisse + apparition au survol */
.gl-cat-tile-go {
  display: inline-flex; align-items: center; gap: .35rem;
  opacity: .85; transition: gap .4s cubic-bezier(.16,1,.3,1), opacity .4s ease, transform .45s cubic-bezier(.16,1,.3,1);
  transform: translateY(2px);
}
.gl-cat-tile:hover .gl-cat-tile-go { gap: .85rem; opacity: 1; transform: translateY(-2px); }

/* =========================================================================
   ÉTAPE 3 — LE RITUEL : ligne de progression + focus sur l'étape active
   ========================================================================= */
/* ligne de progression verticale à gauche des étapes (se remplit au scroll) */
.gl-rituel .gl-steps { position: relative; padding-left: 2.1rem; }
.gl-rituel .gl-steps::before,
.gl-rituel .gl-steps::after {
  content: ""; position: absolute; left: .55rem; top: .5rem; width: 2px; border-radius: 2px;
}
.gl-rituel .gl-steps::before { bottom: .5rem; background: rgba(138, 43, 59, .16); }
.gl-rituel .gl-steps::after {
  height: calc(var(--steps-p, 0) * (100% - 1rem));
  background: var(--color-pulpe, #8a2b3b);
  transition: height .35s cubic-bezier(.16, 1, .3, 1);
}
/* étapes : l'active ressort, les autres s'estompent */
.gl-rituel .gl-step { opacity: .4; transition: opacity .45s ease; }
.gl-rituel .gl-step.is-active { opacity: 1; }
/* numéro : pulpe quand actif */
.gl-rituel .gl-step-num {
  color: rgba(26, 22, 19, .26);
  transition: color .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.gl-rituel .gl-step.is-active .gl-step-num { color: var(--color-pulpe, #8a2b3b); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .gl-rituel .gl-step { opacity: 1; }
}

/* ── Accessibilité : contrastes conformes WCAG AA (22/09/2026) ─────────────── */
/* Le taupe d'origine (#8b8077) plafonnait à 3,46:1 sur l'ivoire : sous le seuil de 4,5:1. */
:root { --color-taupe: #766c65; }

/* Les étapes inactives du rituel étaient à 40 % d'opacité : le texte tombait à 1,56:1.
   On garde l'effet d'atténuation, mais au-dessus du seuil de lisibilité. */
.gl-rituel .gl-step { opacity: .72; }
.gl-rituel .gl-step:not(.is-active) .gl-step-desc { color: #433d39; }