/* ============================================================================
   DRIP — La Gourmand'ice · feuille de la maquette (home + chrome partagés)
   ----------------------------------------------------------------------------
   S'appuie sur tokens.css → base.css → theme.css (chargés AVANT).
   Aucune couleur en dur : tout passe par les tokens du thème
   [data-theme="gourmandice-drip"]. Le re-skin se fait dans theme.css.

   Univers DRIP : rondeurs franches, grands aplats crème, filets « drip »
   crème en respiration de section, photo plein cadre. Le « waouh » tourne
   autour du cornet (signature gelato-stack) — la déco ne touche jamais le texte.
   ============================================================================ */

/* ====== Le motif DRIP : feston crème en bas d'une bande (respiration) ====== *
   Décoratif uniquement (aria-hidden côté markup). Posé en bas d'une section, il
   « dégouline » sur la suivante. Festons réguliers via radial-gradient répété. */
.drip-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(16px, 2.6vw, 30px);
  pointer-events: none;
  z-index: 3;
  --drip-pos-x: 0px;
  background:
    radial-gradient(circle at 50% 0,
      var(--drip-color, var(--surface-page)) 0 55%,
      transparent 56%) var(--drip-pos-x) 100% / clamp(30px, 5vw, 56px) 100% repeat-x;
}
.drip-edge--up {
  bottom: auto;
  top: -1px;
  transform: scaleY(-1);
}

/* ---- Feston (les « drapeaux / ponts ») qui GLISSE selon le SENS du scroll --- *
   Le JS écrit --drift (vw signé, amorti par lerp) sur la section [data-drift-section].
   On le traduit en background-position-x : le motif est en repeat-x → translation
   infinie SANS COUTURE, aucun bord visible quelle que soit la valeur. On descend
   → --drift décroît → festons filent d'un côté ; on monte → ils repartent de
   l'autre. background-position only (pas de translateX du bloc) → aucun risque de
   débordement (la section est en overflow:hidden de toute façon).
   Le coefficient transforme le drift (≈ ±18) en pixels lisibles. */
.drip-edge--slide {
  --drip-pos-x: calc(var(--drift, 0) * 14px);
  transition: none;
}

/* ====================== HEADER PARTAGÉ (pilule flottante) ================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding: var(--space-3) 0;
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.2rem + 1vw, var(--space-3));
  padding: 0.5rem 0.6rem 0.5rem 1.1rem;
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out-expo);
}
/* zone d'actions à droite (langue + CTA) regroupée et insécable */
.site-header__actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 0.2rem + 1vw, var(--space-3));
  margin-left: auto;            /* pousse tout le bloc droit en bout de barre */
  flex: none;
}
.site-header.is-stuck .site-header__bar { box-shadow: var(--shadow-md); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  white-space: nowrap;
}
.brand__badge {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex: none;
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;            /* jamais de retour à la ligne */
  gap: 0.1rem;
  margin-left: auto;            /* colle la nav à la zone d'actions */
  flex: none;                   /* la nav ne se compresse jamais (pas de noms coupés) */
}
.nav__link {
  padding: 0.55rem clamp(0.4rem, 0.1rem + 0.6vw, 0.62rem);
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;          /* chaque item reste sur 1 ligne, jamais coupé */
  color: var(--text-default);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-out-expo);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--accent-text);
  background: var(--accent-soft);
}

/* — Sélecteur de langue — */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.2rem;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
}
.lang__btn {
  min-width: 2.1rem;
  min-height: 36px;
  padding: 0.32rem 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.lang__btn:hover { color: var(--text-strong); }
.lang__btn[aria-pressed="true"] {
  color: var(--text-on-accent);
  background: var(--accent);
}
/* Cibles tactiles : sur appareil sans pointeur fin, on garantit ≥44px (WCAG 2.5.5). */
@media (pointer: coarse) {
  .lang__btn { min-height: 44px; min-width: 44px; }
}

.header-cta { white-space: nowrap; }

/* — Burger mobile — */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-strong);
}

/* ====================== HERO — parti pris B (typo géante) ================= *
   Le titre EST le décor : « GOURM[O]ND » en corail, casse géante. Une vraie
   boule (SVG validé) se loge dans le contre-forme d'un « O » fabriqué en CSS
   (anneau + boule). Fond crème (clair, premium, LCP rapide = texte). Tout le
   contraste reste AA (corail #E8848C en GROS = decor + cacao pour le texte
   lisible ; ici le titre géant est purement décoratif, doublé d'un .sr-only
   accessible). overflow-x clip → la boule peut déborder sans scroll horizontal. */
/* ---- HERO STATIQUE (plus de pin, plus de morph) -------------------------- *
   Bloc normal dans le flux : titre centré, généreux, sans piste de scroll.
   overflow-x: clip → jamais de scroll horizontal même si un glyphe dépasse. */
.hero--type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-x: clip;
  text-align: center;
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem) clamp(3.25rem, 2rem + 8vw, 7rem);
}
.hero--type > .sk-container { position: relative; z-index: 2; }
.hero__eyebrow { display: block; margin-bottom: var(--space-6); }

/* ---- HERO POP en demi-cadre (texte + vraie photo) ------------------------ *
   Desktop : 2 colonnes (copy gauche, photo droite). Le titre géant + le contenu
   s'alignent à GAUCHE (plus de centrage) pour respirer face au visuel. Mobile :
   la photo passe DESSUS le texte (1 colonne), tout reste centré. La photo est la
   candidate LCP. */
.hero--split { text-align: left; padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(2.75rem, 1.5rem + 6vw, 6rem); }
.hero__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 4vw, 4.5rem);
}
.hero--split .hero__eyebrow { margin-bottom: var(--space-4); }
.hero--split .hero__giant { justify-content: flex-start; }
.hero--split .hero__lead { margin-inline: 0; }
.hero--split .hero__actions { justify-content: flex-start; }
.hero--split .hero__proof { align-self: flex-start; }
.hero__copy { min-width: 0; position: relative; z-index: 2; }

/* Le titre géant se lit GOURMAND’ICE, texte plein corail. Le mot est long
   (12 glyphes) : clamp borné pour tenir sur UNE ligne desktop sans débordement.
   Le retour mobile contrôlé (« GOURMAND’ » / « ICE ») est géré en media query. */
.hero__giant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.02em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.7rem, 0.4rem + 8.4vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--brand-corail);
  text-transform: uppercase;
}
.hero__line { display: inline-block; white-space: nowrap; }
/* « GOURMAND’ » insécable. Sur desktop « ICE » suit sur la même ligne (flex-wrap
   du titre) ; en mobile « ICE » passe proprement sur une 2e ligne centrée. */
.hero__line--1 { white-space: nowrap; }

/* Filet manuscrit/signature sous le titre (rappel du lettrage du logo) */
.hero__script {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.75rem);
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--accent-text);
}

.hero__lead {
  margin: var(--space-8) auto 0;
  max-width: 52ch;
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-8);
}

/* Note de preuve : présentation ORGANISÉE en carte. Mobile = 2 lignes propres
   (distinction / note), chaque groupe insécable. ≥620px = 1 ligne + séparateur. */
.hero__proof {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  margin-top: var(--space-6);
  padding: 0.7rem 1.2rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-small);
  color: var(--text-default);
  font-variant-numeric: tabular-nums;
}
.hero__proof-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.hero__proof-distinction .badge {
  padding: 0.22rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--accent);          /* magenta plein = POP + AA garanti (blanc 5,43) */
  color: var(--text-on-accent);
  font-weight: 700;
}
.hero__proof-year { color: var(--text-muted); font-weight: 600; }
.hero__proof-score { color: var(--text-strong); font-weight: 700; }
.hero__proof-count { color: var(--text-muted); }
.hero__proof-div { display: none; }
.stars { color: var(--brand-magenta); }
.hero__proof .stars { color: #F0A93B; font-size: 1.05em; line-height: 1; letter-spacing: 1px; }
.hero__proof .stars-half {
  background: linear-gradient(90deg, #F0A93B 50%, var(--border) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 620px) {
  .hero__proof {
    flex-direction: row;
    gap: 0.85rem;
    border-radius: var(--radius-pill);
  }
  .hero__proof-div {
    display: block;
    align-self: stretch;
    width: 1px;
    min-height: 1.4em;
    background: var(--border);
  }
}

/* --- MICRO-ANIM D'ENTRÉE (une seule fois) --- *
   État de départ posé seulement quand JS actif ET hors reduced-motion :
   .hero--type.is-armed (classe sur <html>) → les morceaux sont décalés/masqués.
   Le JS ajoute .is-loaded au load → ils se posent, PUIS plus rien ne bouge
   (pas d'animation infinie, transitions one-shot). Sans-JS ou reduced-motion :
   aucune de ces règles ne s'applique (pas de .is-armed) → état final direct. */
html.hero-armed .hero__giant .hero__line {
  opacity: 0;
  transform: translateY(0.18em);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
html.hero-armed .hero__script {
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.6s var(--ease-out-expo) 0.35s, transform 0.6s var(--ease-out-expo) 0.35s;
}
html.hero-armed .hero__lead,
html.hero-armed .hero__actions,
html.hero-armed .hero__proof {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
/* Stagger des morceaux du titre + cadence des blocs sous le titre */
html.hero-armed .hero__giant .hero__line--1 { transition-delay: 0.05s; }
html.hero-armed .hero__giant .hero__line--2 { transition-delay: 0.16s; }
html.hero-armed .hero__lead    { transition-delay: 0.5s; }
html.hero-armed .hero__actions { transition-delay: 0.6s; }
html.hero-armed .hero__proof   { transition-delay: 0.68s; }

html.hero-armed .hero.is-loaded .hero__line,
html.hero-armed .hero.is-loaded .hero__script,
html.hero-armed .hero.is-loaded .hero__lead,
html.hero-armed .hero.is-loaded .hero__actions,
html.hero-armed .hero.is-loaded .hero__proof { opacity: 1; transform: none; }

/* Exposant ordinal PROPRE partout (30ᵉ / 2ᵉ / 4ᵉ) — jamais « 30 e » espacé.
   On neutralise le décalage de baseline natif de <sup> et on cale la taille. */
.ord {
  font-size: 0.58em;
  font-weight: inherit;
  vertical-align: baseline;
  position: relative;
  top: -0.62em;
  margin-left: 0.04em;
  line-height: 1;
}

/* Visuel hero : la VRAIE photo (candidate LCP) + pastille « depuis 2005 » */
.hero__media { position: relative; z-index: 1; }
.hero__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-sunken);
}
.hero__photo picture, .hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* dégradé PARTIEL en bas seulement → la photo reste candidate LCP (pas de voile plein) */
.hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(42,27,20,.28));
  pointer-events: none;
  border-radius: inherit;
}
/* Pastille « depuis 2005 » posée sur le coin du visuel */
.hero__stamp {
  position: absolute;
  right: clamp(-4px, -0.6vw, -12px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(78px, 9vw, 104px);
  height: clamp(78px, 9vw, 104px);
  border-radius: 50%;
  background: var(--brand-corail);
  color: var(--text-strong);
  text-align: center;
  box-shadow: var(--shadow-md);
  transform: rotate(-9deg);
}
.hero__stamp b { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.hero__stamp span { order: -1; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---- GRADING POP des photos ---------------------------------------------- *
   Effet « shooting de marque » : chaleur rosée légère + vibrance, appliqué de
   façon cohérente à toutes les vraies photos via .gx-graded. Filtre seul (pas de
   voile coloré qui masquerait) → AA du texte en surimpression préservé par les
   dégradés/scrims locaux. La photo hero reste candidate LCP. */
.gx-graded { filter: saturate(1.08) contrast(1.02) brightness(1.01); }
.gx-graded::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--brand-corail) 16%, transparent),
    transparent 46%,
    color-mix(in srgb, var(--brand-magenta) 12%, transparent));
  mix-blend-mode: soft-light;
  pointer-events: none;
  border-radius: inherit;
}
.gx-graded img { position: relative; }
@media (prefers-reduced-motion: reduce) { .gx-graded { filter: saturate(1.06); } }

/* ====================== BANDEAU PREUVE ==================================== */
/* overflow:hidden → le feston glissant ne crée JAMAIS de scroll horizontal. */
.proofbar { background: var(--surface-invert); color: var(--text-on-invert); overflow: hidden; }
.proofbar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;            /* rangées à hauteur égale */
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  align-items: stretch;
}
/* Item en colonne : le chiffre en haut, le label collé en bas → quel que soit
   le nombre de lignes du label, les chiffres restent alignés sur leur rangée. */
.proofbar__item {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.proofbar__num {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  line-height: 1;
  color: var(--brand-vanille);
}
.proofbar__label { margin-top: var(--space-3); font-size: var(--text-small); color: var(--text-on-invert-muted); }
/* Item « distinction » : pas de chiffre (rien d'invérifiable). Un repère ★ de
   même hauteur que .proofbar__num garde l'alignement des rangées intact. */
.proofbar__mark {
  font-size: var(--text-stat);
  line-height: 1;
  color: var(--brand-vanille);
}
.proofbar__label--feature { color: var(--text-on-invert); font-weight: 600; }

/* ====================== SIGNATURE : LE CORNET QUI SE REMPLIT ============== *
   Section HAUTE → piste de scroll. .build__scene est STICKY → le cornet reste
   épinglé à l'écran pendant qu'on traverse, et les boules se posent au scroll.

   PISTE CALÉE (anti-vide) : la hauteur EXTRA sous la scène sticky = exactement
   le « temps » de remplissage. On l'exprime depuis 2 tokens locaux :
     --build-steps  = nombre de boules (4)
     --build-pace   = air vertical par palier (= durée de scroll par boule)
   min-height = 100svh (la scène sticky) + steps × pace. Le JS mappe la
   progression sur CETTE piste : la 4ᵉ boule tombe pile au dernier palier, donc
   à la toute fin de la piste → aucun grand blanc avant la section suivante.   */
.build {
  position: relative;
  --build-steps: 4;
  --build-pace: 50vh;          /* air par goût : rythme AÉRÉ (était ~serré) */
  /* Le padding vertical de .sk-section--page vit HORS de la piste (au-dessus et
     en dessous du layout sticky) : on le réduit pour que l'entrée dans le défilé
     et l'enchaînement vers la section suivante soient serrés (pas de dead-scroll
     ni de blanc en sortie). La respiration utile est portée par .build__copy. */
  padding-block: var(--space-12) var(--space-8);
}
/* La PISTE vit sur le layout : c'est lui le bloc conteneur de la scène sticky.
   Mettre la hauteur sur .build seul ne suffit PAS — une scène sticky ne peut
   défiler QUE dans la hauteur de son PARENT direct (ici .build__layout). On
   donne donc la hauteur de piste au layout pour que le sticky tienne jusqu'au
   bout de la piste (sinon il se décolle après quelques px → vide géant). */
.build__layout {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
  min-height: calc(100svh + var(--build-steps) * var(--build-pace));
}
/* DOM = scene puis copy ; on REPLACE visuellement copy à gauche, scene à droite
   (l'ordre DOM scene-first sert le sticky mobile, pas l'ordre visuel desktop). */
.build__scene { grid-column: 2; grid-row: 1; }
.build__copy  { grid-column: 1; grid-row: 1; }
/* Colonne texte : STICKY elle aussi, épinglée en regard du cornet, pour que les
   goûts ET le fil restent visibles À CÔTÉ des boules pendant tout le défilé
   (sinon le fil/les goûts défileraient hors écran et la synchro serait invisible).
   Centrée verticalement comme la scène → fil et cornet à la même hauteur d'œil. */
.build__copy {
  position: sticky;
  top: 0;
  height: 100svh;
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 6vh;
  max-width: 42ch;
}
.build__title { font-size: var(--text-h1); line-height: 1.02; letter-spacing: var(--tracking-display); margin-top: var(--space-4); }
.build__lead { margin-top: var(--space-6); font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--text-muted); }

/* --------------------------- LES GOÛTS + LE FIL --------------------------- *
   La liste est RELATIVE : le fil (.build__thread) est posé en absolu le long du
   rail des pastilles, et chaque <li> est espacé généreusement (air vertical).  */
.build__flavors {
  position: relative;
  margin-top: var(--space-8);
  display: grid;
  gap: clamp(2.2rem, 1.4rem + 3.4vw, 4.6rem);   /* AÉRÉ : large espace entre goûts */
  list-style: none;
  padding-left: 0;
  --thread-p: 0;                 /* progression du fil 0→1, écrite par le JS ; hérite vers .build__thread */
}
.build__flavor {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.1rem;
  align-items: center;
  border-top: 0;                 /* plus de filet : c'est le fil qui structure */
  opacity: 0.4;
  transform: translateX(-4px);
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
}
.build__flavor.is-active,
.no-js .build__flavor { opacity: 1; transform: translateX(0); }

/* Repère du goût : une VRAIE petite boule de glace vectorisée (jamais un rond
   plat) par laquelle passe le fil. Au repos = boule désaturée + rétractée ;
   à l'allumage (le fil l'atteint) = la boule reprend sa couleur de parfum,
   gonfle légèrement et pose un halo de la teinte (impact « le fil m'a atteint »).
   On anime UNIQUEMENT transform + opacity + filter (compositor / cheap). */
.build__dot {
  grid-row: 1 / span 2;
  position: relative;
  z-index: 2;                    /* au-dessus du fil */
  width: 30px; height: 25px;
  display: grid;
  place-items: center;
  transform: scale(0.78);
  filter: saturate(0.25) opacity(0.55);
  transition: transform var(--dur-base) var(--ease-out-back, var(--ease-out-expo)),
              filter var(--dur-base) var(--ease-out-expo);
}
/* halo de teinte parfum derrière la boule, révélé à l'allumage */
.build__dot::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%) scale(0.4);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--scoop-fill, var(--accent)) 38%, transparent) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
  pointer-events: none;
}
.build__dot svg { width: 30px; height: 25px; position: relative; z-index: 1; display: block; }
.build__flavor.is-active .build__dot,
.no-js .build__flavor .build__dot {
  transform: scale(1.05);
  filter: none;
}
.build__flavor.is-active .build__dot::before,
.no-js .build__flavor .build__dot::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.build__fname { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.05; color: var(--text-strong); }
.build__forigin { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dimmed); }

/* --- LE FIL : rail vertical qui relie les pastilles, du 1er au dernier goût --- *
   Posé en absolu sur l'axe des pastilles (les dots font 20px → centre à 10px).
   - track : trace future, très discrète, longueur fixe.
   - fill  : le tracé qui se remplit (scaleY 0→1, origin TOP) = compositor only.
   - comet : la tête lumineuse du tracé, suivie par translateY (= fill × hauteur).
   Le JS écrit --thread-p (0→1) ; CSS en dérive scaleY et la position comète.    */
.build__thread {
  position: absolute;
  left: 15px;                    /* centre des boules-repères (30px / 2) */
  top: 12px;                     /* centre de la 1re boule (~25px / 2) */
  bottom: 12px;                  /* centre de la dernière boule */
  width: 2px;
  transform: translateX(-50%);
  pointer-events: none;
  container-type: size;          /* active 100cqh = hauteur du rail (pour la comète) */
}
.build__thread-track,
.build__thread-fill {
  position: absolute;
  inset: 0;
  width: 2px;
  border-radius: 2px;
}
.build__thread-track { background: var(--border-strong); opacity: 0.5; }
.build__thread-fill {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--accent) 70%, transparent),
    var(--accent));
  transform-origin: 50% 0;
  transform: scaleY(var(--thread-p));   /* tracé piloté par le scroll */
  will-change: transform;
}
.build__thread-comet {
  position: absolute;
  left: 50%;
  top: 0;
  width: 11px; height: 11px;
  margin: -5.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent),
              0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
  /* la comète vit sur toute la hauteur du fil : translateY = p × hauteur rail.
     calc avec % d'un parent en hauteur fixe (top:10..bottom:10) = OK, transform only. */
  transform: translateY(calc(var(--thread-p) * (100cqh)));
  will-change: transform;
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}
.build__flavors.is-tracing .build__thread-comet { opacity: 1; }

/* La scène collante : le cornet épinglé, centré verticalement. svh = stable
   sur mobile (barre d'URL) → pas de saut de calage. */
.build__scene {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;       /* centre la scène H + V dans la colonne sticky */
}
/* Le cornet : centré horizontalement dans sa colonne (place-items gère H), et la
   pile elle-même recentrée. Les boules sont en position:absolute (largeur 120
   du sprite) → la stack reste centrée via margin auto. justify-self center
   verrouille le centrage H même si la colonne grid est plus large que le cornet.
   --scene-shift (px, signé) est posé par le JS pour aligner la POINTE BASSE du
   cornet sur la ligne « Caramel » (dernier goût). 0 par défaut → centrage inchangé
   sans JS. transform only → pas de reflow, n'altère pas le centrage horizontal. */
.build__cone {
  width: clamp(190px, 23vw, 320px);
  justify-self: center;
  transform: translateY(var(--scene-shift, 0px));
}
/* La pile pleine monte au-dessus du cornet (boules en top négatif) : le centre
   visuel de l'ENSEMBLE (cornet + 4 boules) est plus haut que le centre du cornet
   seul. On redescend légèrement la scène pour centrer le groupe complet à l'œil.
   transform only → pas de reflow. */
.build__cone .gice-stack { margin-inline: auto; transform: translateY(7%); }
.build__cone .gice-stack { width: 100%; }
.build__cone .gice-stack .gice-cone,
.build__cone .gice-stack .gice-scoop,
.build__cone .gice-stack .gice-fall,
.build__cone .gice-stack .gice-press,
.build__cone .gice-stack .gice-squash,
.build__cone .gice-stack .gice-art { width: 100%; height: auto; }

/* Reduced-motion ET no-JS : pas de piste de scroll → section compacte, cornet
   déjà plein, fil COMPLET (tracé à 100 %), tous les parfums lisibles. */
@media (prefers-reduced-motion: reduce) {
  .build { min-height: 0; }
  .build__layout { min-height: 0; }      /* coupe la PISTE sticky (sinon grand vide scrollable figé) */
  .build__scene { position: static; height: auto; }
  .build__cone { width: clamp(180px, 24vw, 280px); }
  .build__cone .gice-stack { transform: none; }   /* pas de recentrage vertical hors sticky */
  .build__flavors { gap: clamp(1.4rem, 1rem + 2vw, 2.4rem); }   /* compact, plus de piste */
  .build__thread { --thread-p: 1; }
  .build__thread-comet { display: none; }
}
.no-js .build { min-height: 0; }
.no-js .build__layout { min-height: 0; }
.no-js .build__scene { position: static; height: auto; }
.no-js .build__cone { width: clamp(180px, 24vw, 280px); }
.no-js .build__cone .gice-stack { transform: none; }
.no-js .build__flavors { gap: clamp(1.4rem, 1rem + 2vw, 2.4rem); }
.no-js .build__thread { --thread-p: 1; }
.no-js .build__thread-comet { display: none; }

/* ====================== GRAND MOMENT (phrase-totem) ======================= */
.totem { position: relative; text-align: center; overflow: hidden; }
.totem__phrase {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.3rem, 0.9rem + 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  max-width: 17ch;
  margin: var(--space-6) auto 0;
  color: var(--text-strong);
}
.totem__phrase .hl { color: var(--accent-text); }
.totem__sign {
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ====================== APERÇU CARTE DES PARFUMS ========================== */
.parfums__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
.parfums__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}
.parfum-feature {
  grid-column: span 7;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  box-shadow: var(--shadow-md);
  background: var(--surface-sunken);
}
.parfum-feature picture { position: absolute; inset: 0; }
.parfum-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* grading POP cohérent sur la photo de comptoir (sous la légende, scrim AA conservé) */
.parfum-feature--graded img { filter: saturate(1.08) contrast(1.02) brightness(1.01); }
.parfum-feature--graded::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand-corail) 14%, transparent), transparent 50%);
  mix-blend-mode: soft-light; pointer-events: none;
}
.parfum-feature__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1.25rem, 1rem + 2vw, 2rem);
  background: linear-gradient(180deg, transparent, rgba(42,27,20,.80));
  color: #fff;
}
.parfum-feature__cap h3 { color: #fff; font-size: var(--text-h3); }
.parfum-feature__cap p { margin-top: var(--space-2); color: rgba(255,255,255,.90); max-width: 42ch; }

.parfum-chips {
  grid-column: span 5;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;            /* chaque rangée = hauteur égale */
  gap: clamp(0.7rem, 0.5rem + 1vw, 1.05rem);
  align-content: start;
}
/* Hauteurs ÉGALES : un nom long (« Pistache, ricotta & orange ») ne doit JAMAIS
   produire une chip plus haute que sa voisine de la même rangée. */
.chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 100%;
  min-height: 4.25rem;           /* plancher cohérent même avec 1 ligne de nom */
  padding: 0.7rem 0.9rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo);
}
.chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.chip__art { width: 46px; height: 40px; flex: none; }
.chip__art svg { width: 46px; height: 40px; }
.chip > span:last-child { min-width: 0; }  /* le texte peut wrapper proprement sans pousser */
.chip__name { display: block; font-weight: 600; font-size: var(--text-small); color: var(--text-strong); line-height: 1.15; overflow-wrap: break-word; }
.chip__note { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dimmed); margin-top: 2px; }
.parfums__foot { margin-top: var(--space-12); text-align: center; }

/* ====================== GÂTEAUX & BÛCHES (zig-zag) ======================== */
.cakes { background: var(--surface-sunken); position: relative; }
.cakes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.cakes__media { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-4); }
.cakes__media figure { margin: 0; }
.cakes__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--surface-raised);
  aspect-ratio: 4 / 5;
}
.cakes__photo--tall { aspect-ratio: 3 / 5; }
.cakes__photo img { width: 100%; height: 100%; object-fit: cover; }
.cakes__media figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dimmed);
  text-align: center;
}
.cakes__copy { max-width: 40ch; }
.cakes__seasons { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.season-pill {
  padding: 0.3rem 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;          /* pill toujours sur 1 ligne */
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-default);
}

/* ====================== RÉCOMPENSES / PARCOURS ============================ */
.awards { background: var(--surface-invert); color: var(--text-on-invert); position: relative; overflow: hidden; }
.awards__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.awards__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background: var(--surface-sunken);
}
.awards__photo img { width: 100%; height: 100%; object-fit: cover; }
.awards__title { color: var(--text-on-invert); font-size: var(--text-h2); }
.awards__lead { margin-top: var(--space-4); color: var(--text-on-invert-muted); font-size: var(--text-lead); line-height: var(--leading-snug); max-width: 44ch; }
.timeline { margin-top: var(--space-8); }
.timeline__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-invert);
}
.timeline__row:last-child { border-bottom: 1px solid var(--border-invert); }
.timeline__year { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1; color: var(--brand-vanille); }
.timeline__txt { color: var(--text-on-invert); align-self: center; }
.timeline__txt span { display: block; color: var(--text-on-invert-muted); font-size: var(--text-small); margin-top: 2px; }

/* ====================== BOUTIQUES ========================================= */
.shops__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;          /* les 2 cartes à hauteur égale */
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  margin-top: var(--space-12);
}
.shop {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.shop__name { font-size: var(--text-h3); display: flex; align-items: center; gap: 0.5rem; }
.shop__row { display: flex; gap: 0.6rem; padding: var(--space-3) 0; border-top: 1px solid var(--border); color: var(--text-default); }
.shop__row:first-of-type { border-top: 0; margin-top: var(--space-4); }
.shop__row svg { flex: none; color: var(--accent-text); margin-top: 2px; }
.shop__row b { color: var(--text-strong); }
.shop__note { font-size: var(--text-small); color: var(--text-dimmed); }
.shop__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }

/* ====================== AVIS ============================================== */
.reviews { background: var(--surface-sunken); }
.reviews__head { text-align: center; max-width: 50ch; margin: 0 auto var(--space-12); }
.reviews__score { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: var(--space-4); }
.reviews__score .stars { font-size: 1.6rem; letter-spacing: 3px; line-height: 1; }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}
.review {
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.review__stars { color: var(--brand-magenta); letter-spacing: 2px; font-size: 1.05rem; }
.review__text { margin-top: var(--space-4); color: var(--text-default); line-height: var(--leading-body); flex: 1; }
.review__src { margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dimmed); }

/* ====================== BANDEAU CTA FINAL ================================= */
.cta-band { position: relative; text-align: center; background: var(--surface-corail); overflow: hidden; }
/* Signature DRIP : une boule géante en DÉBORD dans un coin de la bande (décor),
   + halos pop. overflow:hidden de la section → aucun scroll horizontal possible.
   La boule flotte très doucement (transform only, coupée en reduced-motion). */
.cta-band__blob {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: clamp(160px, 24vw, 320px);
  filter: drop-shadow(0 18px 30px rgba(42,27,20,.22));
  opacity: 0.96;
}
.cta-band__blob svg { width: 100%; height: auto; display: block; }
.cta-band__blob--left  { left: clamp(-90px, -6vw, -50px); bottom: clamp(-50px, -4vw, -30px); transform: rotate(-12deg); animation: gx-blob-float 7s ease-in-out infinite; }
.cta-band__blob--right { right: clamp(-90px, -6vw, -50px); top: clamp(-46px, -4vw, -26px); transform: rotate(14deg); animation: gx-blob-float 8.5s ease-in-out infinite reverse; }
@keyframes gx-blob-float {
  0%, 100% { transform: translateY(0) rotate(-12deg); }
  50%      { transform: translateY(-12px) rotate(-9deg); }
}
.cta-band__blob--right { animation-name: gx-blob-float-r; }
@keyframes gx-blob-float-r {
  0%, 100% { transform: translateY(0) rotate(14deg); }
  50%      { transform: translateY(10px) rotate(11deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-band__blob--left  { animation: none; transform: rotate(-12deg); }
  .cta-band__blob--right { animation: none; transform: rotate(14deg); }
}
@media (max-width: 620px) {
  .cta-band__blob--right { display: none; }   /* une seule boule en mobile (sobriété) */
  .cta-band__blob--left { width: clamp(120px, 38vw, 180px); }
}
.cta-band__title { font-size: var(--text-h1); color: var(--text-strong); max-width: 20ch; margin-inline: auto; line-height: 1.04; }
.cta-band__lead { margin: var(--space-6) auto 0; max-width: 46ch; color: var(--text-strong); opacity: 0.86; font-size: var(--text-lead); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); }
/* sur le corail (clair), le ghost garde un texte cacao + bordure cacao (jamais blanc fantôme) */
.cta-band .sk-btn--ghost { color: var(--text-strong); border-color: var(--text-strong); }
.cta-band .sk-btn--ghost:hover { background: var(--text-strong); color: var(--surface-corail); border-color: var(--text-strong); }

/* ====================== FOOTER ============================================ */
.site-footer { background: var(--surface-invert); color: var(--text-on-invert); padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--space-12); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.footer__brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.3rem; color: var(--text-on-invert); }
.footer__brand img { width: 40px; height: 40px; border-radius: 50%; }
.footer__tag { margin-top: var(--space-4); color: var(--text-on-invert-muted); max-width: 32ch; }
.footer__col h4 { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-vanille); margin-bottom: var(--space-4); }
.footer__col li { padding: 0.3rem 0; }
.footer__col a, .footer__col span { color: var(--text-on-invert-muted); transition: color var(--dur-fast); }
.footer__col a:hover { color: var(--text-on-invert); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center;
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-invert);
  font-size: var(--text-small);
  color: var(--text-on-invert-muted);
}
.footer__social { display: flex; gap: var(--space-3); }
.footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-invert); color: var(--text-on-invert-muted); transition: color var(--dur-fast), border-color var(--dur-fast); }
.footer__social a:hover { color: var(--brand-vanille); border-color: var(--brand-vanille); }

/* ====================== MENU MOBILE (drawer) ============================== */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--space-6) var(--gutter);
  background: var(--surface-page);
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-out-expo);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__nav { display: grid; align-content: center; gap: var(--space-2); }
.mobile-menu__nav a {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 4vw, 2.6rem);
  color: var(--text-strong);
  padding: var(--space-2) 0;
}
.mobile-menu__nav a:hover { color: var(--accent-text); }
.mobile-menu__foot { display: grid; gap: var(--space-4); }
.mobile-menu__lang { justify-self: start; }
.close-x { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--text-strong); }

/* ============================================================================
   MOTION V2 — curseur boule · reveals enrichis · feston glissant · givre hero
   ----------------------------------------------------------------------------
   transform/opacity/background-position only · 60fps · reduced-motion coupe
   tout · jamais de débordement horizontal (overflow:hidden sur les sections).
   ============================================================================ */

/* ---- 3) CURSEUR PERSO « boule de glace » (desktop pointeur fin) ----------- *
   Le JS ajoute .has-gx-cursor sur <html> SEULEMENT si (hover:hover) +
   (pointer:fine) + pas de reduced-motion. La boule SUIT le pointeur (translate
   écrit par le JS), en trailing. Quand elle est active, on MASQUE le curseur
   système (cursor:none) pour ne voir QUE la boule — y compris sur les éléments
   interactifs, où le retour de cible est porté par la boule (.is-hot : elle
   grossit). Tactile / reduced-motion : .has-gx-cursor n'est pas posée → curseur
   système normal partout (utilisabilité intacte). */
html.has-gx-cursor,
html.has-gx-cursor * { cursor: none; }
.gx-cursor { display: none; }
.has-gx-cursor .gx-cursor {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: calc(var(--z-overlay) + 10);
  pointer-events: none;            /* ne capte jamais les clics → utilisabilité intacte */
  /* translate posé par le JS (--gx-cx/--gx-cy) ; scale géré ici pour l'état hover.
     translate(-50%,-50%) recentre la boule sous la pointe. */
  transform: translate(var(--gx-cx, -100px), var(--gx-cy, -100px))
             translate(-50%, -50%) scale(var(--gx-cs, 1));
  transition: transform 0.08s linear, opacity var(--dur-fast) var(--ease-out-expo);
  opacity: 0;
  will-change: transform;
  filter: drop-shadow(0 3px 5px rgba(42,27,20,.28));
}
.has-gx-cursor .gx-cursor.is-visible { opacity: 1; }
.has-gx-cursor .gx-cursor svg { display: block; }
/* Overlay ouvert (menu mobile / modale) : on rend le curseur système et on
   masque la boule custom — sinon elle reste « garée » derrière le panneau. */
.has-gx-cursor.overlay-open,
.has-gx-cursor.overlay-open * { cursor: auto; }
.has-gx-cursor.overlay-open .gx-cursor { opacity: 0 !important; }
/* Au survol d'un élément interactif : la boule grossit légèrement (repère clair
   de cible), le curseur natif pointer reste affiché par-dessous. */
.has-gx-cursor .gx-cursor.is-hot { --gx-cs: 1.5; }

/* ---- 4) REVEALS ENRICHIS (chorégraphie + profondeur douce) ---------------- *
   On NE touche pas .sk-reveal global (base.css partagé). On ajoute des variantes
   LOCALES opt-in qui poussent un peu plus la profondeur + un stagger marqué, et
   on s'appuie sur --reveal-delay déjà écrit par le JS pour le stagger de groupe.
   Tout est coupé par le @media reduced-motion plus bas. */
.build__copy.sk-reveal,
.build__title.sk-reveal { will-change: opacity, transform; }

/* Léger « lift + scale » sur les médias photo au reveal → profondeur sans bouger
   le layout (transform only). Opt-in via .gx-rise sur l'élément déjà .sk-reveal. */
.gx-rise {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  transition: opacity var(--dur-reveal) var(--ease-out-expo),
              transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.gx-rise.is-in { opacity: 1; transform: none; }
.no-js .gx-rise { opacity: 1; transform: none; }

/* ---- 5) SECTIONS À FESTON GLISSANT (proofbar + cta-band) ----------------- *
   Plus de blobs : le décor mobile est le BORD FESTONNÉ DU HAUT (.drip-edge--slide)
   qui glisse selon le sens du scroll (cf. plus haut). On garde juste le contexte
   de positionnement + on s'assure que le contenu passe au-dessus du feston. */
.proofbar,
.cta-band { position: relative; }       /* overflow:hidden déjà sur ces 2 sections */
.proofbar .sk-container,
.cta-band .sk-container { position: relative; z-index: 4; }   /* > z-index:3 du feston */

/* ACCESSIBILITÉ — reduced-motion : pas de curseur custom, pas de glisse du
   feston (figé à sa position de repos), reveal enrichi neutralisé. */
@media (prefers-reduced-motion: reduce) {
  .gx-cursor { display: none !important; }
  .gx-rise { opacity: 1 !important; transform: none !important; transition: none; }
  .drip-edge--slide { --drip-pos-x: 0px !important; }   /* festons figés, plus de glisse */
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand-col { grid-column: 1 / -1; }
}

/* Chrome (navbar complète) : bascule au menu condensé DÈS que la barre risque
   de serrer. Le cluster complet (marque + 5 onglets + langue + CTA) a besoin
   de ~1090px de contenu + le padding du conteneur → on bascule au burger sous
   1200px pour garder de l'air : jamais d'item qui wrappe, qui se coupe, ni de
   CTA qui sort de la pilule. */
@media (max-width: 1200px) {
  .nav,
  .site-header__actions { display: none; }
  .burger { display: grid; place-items: center; }
}

@media (max-width: 880px) {
  .proofbar__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-6); }

  /* SIGNATURE mobile : allégée. Le cornet est sticky EN HAUT (pas centré plein
     écran), généreux mais pas plein cadre, et les goûts + le fil défilent
     dessous. 1 colonne. La piste reste calée : la scène sticky occupe ~52svh,
     donc min-height = 52svh + steps × pace, sans grand blanc final. */
  /* SIGNATURE mobile : 1 colonne. Le cornet (scene) est sticky EN HAUT (~52svh),
     les goûts + le fil défilent DESSOUS. La piste (min-height) vit sur le layout
     — comme en desktop — pour que _progress mesure la même boîte. */
  .build {
    --build-pace: 42vh;
    padding-block: var(--space-8);
  }
  /* BLOCK 1 colonne : DOM = scene puis copy → le cornet est EN HAUT, sticky, et
     les goûts + le fil défilent dessous DANS LA MÊME PISTE (le bloc, haut de
     52svh + steps×pace). En flux block, le cornet vient avant le texte → il a de
     quoi rester collé tout le long (le texte sous lui est l'extent scrollable). */
  .build__layout {
    display: block;
    min-height: calc(52svh + var(--build-steps) * var(--build-pace));
  }
  .build__scene,
  .build__copy { grid-column: auto; grid-row: auto; }   /* annule le placement desktop */
  /* le cornet est sticky en haut et reste épinglé tant qu'on traverse la piste */
  .build__scene { position: sticky; top: 4.5rem; height: 52svh; padding-top: 1vh; }   /* top défini (clear le header) — un token vide = top:auto = sticky cassé */
  /* la colonne texte REDEVIENT un flux normal (plus de sticky desktop) */
  .build__copy {
    position: static;
    height: auto;
    display: block;
    padding-block: 2vh 4vh;
    max-width: none;
  }
  .build__cone { width: clamp(180px, 56vw, 250px); }   /* généreux, pas riquiqui */
  .build__flavors {
    margin-top: var(--space-8);
    gap: clamp(1.8rem, 1.2rem + 3vw, 3.2rem);          /* aéré, sans déborder */
  }
  .parfum-feature, .parfum-chips { grid-column: 1 / -1; }
  .parfum-feature { min-height: 260px; }
  .cakes__grid, .awards__grid, .shops__grid { grid-template-columns: 1fr; }
  .awards__photo { max-width: 420px; }
  .reviews__grid { grid-template-columns: 1fr; }

  /* HERO demi-cadre → 1 colonne : la photo passe AU-DESSUS du texte, tout centré.
     La photo reste appétissante (pas riquiqui) sans pousser le contenu trop bas. */
  .hero--split { text-align: center; }
  .hero__split { grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 3vw, 2.5rem); }
  .hero__media { order: -1; max-width: 440px; margin-inline: auto; width: 100%; }
  .hero__photo { aspect-ratio: 16 / 11; }
  .hero--split .hero__giant { justify-content: center; }
  .hero--split .hero__lead { margin-inline: auto; }
  .hero--split .hero__actions { justify-content: center; }
  .hero--split .hero__proof { align-self: center; }
}

/* Desktop : le wordmark géant doit tenir dans la COLONNE gauche (plus étroite que
   le plein écran) → on borne sa taille en demi-cadre pour éviter tout clip. */
@media (min-width: 881px) {
  .hero--split .hero__giant { font-size: clamp(3rem, 0.5rem + 6vw, 5.6rem); }
}

/* HERO TYPO — mobile : le titre passe en 2 lignes contrôlées « GOURMAND’ » /
   « ICE » pour rester ÉNORME sans déborder. La boule (O) reste dans la 1re ligne.
   On force le break en mettant « ICE » sur 100 % de largeur (le flex-wrap du
   titre le pousse alors sur une nouvelle ligne, centrée). Zéro scroll-x. */
@media (max-width: 680px) {
  .hero--type {
    padding-block: clamp(2.5rem, 1.5rem + 6vw, 4rem) clamp(2rem, 1.5rem + 5vw, 3rem);
  }
  .hero__giant {
    /* borné pour que la 1re ligne INSÉCABLE « GOURMAND’ » tienne dans le
       container (≈5,6× le font-size) sans être clippée par overflow:hidden. */
    font-size: clamp(2.6rem, 0.2rem + 15vw, 4.4rem);
    letter-spacing: -0.035em;
  }
  .hero__line--2 { flex-basis: 100%; text-align: center; }   /* « ICE » sur une 2e ligne, centré */
}

@media (max-width: 520px) {
  .parfum-chips { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Très petits écrans (≤380px) : on borne encore pour garantir 0 scroll-x à 320px.
   « GOURMAND’ » (9 glyphes + boule) sur la 1re ligne, « ICE » sur la 2e. */
@media (max-width: 380px) {
  .hero__giant { font-size: clamp(2.5rem, 0.2rem + 14vw, 3.6rem); }
}

/* ============================================================================
   MOTION — micro-interactions partagées de la home (cohérent FIX 3 / pages.css)
   ----------------------------------------------------------------------------
   La home charge drip.css (pas pages.css) → on y duplique le CTA à remplissage
   et le rebond des boules-chips, à l'identique des pages internes, pour une
   identité de mouvement cohérente sur tout le site. transform/opacity only.
   ============================================================================ */

/* CTA à remplissage qui glisse (sweep d'accent, origin gauche). */
.sk-btn { position: relative; overflow: hidden; isolation: isolate; }
.sk-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.sk-btn--primary::after { background: var(--accent-strong); }
.sk-btn--primary:hover::after,
.sk-btn--primary:focus-visible::after { transform: scaleX(1); }
.sk-btn--ghost::after { background: var(--accent); }
.sk-btn--ghost:hover { color: var(--text-on-accent); border-color: var(--accent); }
.sk-btn--ghost:hover::after,
.sk-btn--ghost:focus-visible::after { transform: scaleX(1); }
/* bande CTA sombre/corail : le ghost se remplit en cacao, texte crème lisible */
.cta-band .sk-btn--ghost:hover { color: var(--surface-corail); }
.cta-band .sk-btn--ghost::after { background: var(--text-strong); }

/* Boules-chips de l'aperçu carte : rebond + rotation douce au survol. */
.chip__art svg { transition: transform var(--dur-base) var(--ease-out-back, var(--ease-spring)); transform-origin: 50% 80%; }
.chip:hover .chip__art svg { transform: translateY(-3px) rotate(-7deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .sk-btn::after { display: none !important; }
  .chip:hover .chip__art svg { transform: none !important; }
}

/* ============================================================================
   HUMEUR POP (A) — énergie rose, rebonds, marquee vif, survols punchy
   ----------------------------------------------------------------------------
   transform/opacity only · 60fps · tout coupé en reduced-motion (bloc final).
   On amplifie le ressort des micro-interactions (boules qui rebondissent plus
   franchement) et on accélère/anime le rythme — sans toucher au markup.
   ============================================================================ */

/* Marquee plus VIF (POP) — défilement plus rapide. */
.flavor-marquee .sk-marquee,
[data-flavor-marquee] .sk-marquee { --marquee-duration: 24s; }

/* Boules-chips : rebond POP plus franc + petit ressort permanent au survol. */
.chip:hover .chip__art svg { transform: translateY(-5px) rotate(-10deg) scale(1.14); }

/* Pastille « depuis 2005 » : elle wiggle gentiment, énergie de marque. */
.hero__stamp { animation: gx-pop-wiggle 4.5s var(--ease-spring) infinite; transform-origin: 60% 40%; }
@keyframes gx-pop-wiggle {
  0%, 88%, 100% { transform: rotate(-9deg) scale(1); }
  92%           { transform: rotate(-4deg) scale(1.06); }
  96%           { transform: rotate(-12deg) scale(1.03); }
}

/* CTA primaire POP : un léger « pop » au survol (en plus du remplissage). */
.sk-btn--primary:hover { transform: translateY(-3px) scale(1.03); }
.sk-btn--primary:active { transform: translateY(0) scale(0.99); }

/* Étoiles d'avis : magenta vif + pulsation douce (énergie, pas clignotement). */
.review__stars, .reviews__score .stars { animation: gx-pop-breathe 3.6s ease-in-out infinite; }
@keyframes gx-pop-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Boules-repères de la signature : halo rose plus présent (POP). */
.build__dot::before { background: radial-gradient(circle,
    color-mix(in srgb, var(--scoop-fill, var(--brand-magenta)) 50%, transparent) 0%,
    transparent 70%); }

@media (prefers-reduced-motion: reduce) {
  .hero__stamp,
  .review__stars,
  .reviews__score .stars { animation: none !important; }
  .sk-btn--primary:hover { transform: none !important; }
  .chip:hover .chip__art svg { transform: none !important; }
}