/* ==========================================================================
   MissLath — feuille de styles unique du site
   Architecture fluide, mobile-first, sans JavaScript.
   Sommaire
     01. Jetons de design (custom properties)
     02. Réinitialisation & base
     03. Utilitaires d'accessibilité
     04. Primitives de mise en page
     05. Typographie
     06. En-tête & navigation
     07. Boutons & liens d'action
     08. Médias (cadres photo)
     09. Composants de contenu
     10. Formulaires
     11. Pied de page
     12. Thèmes de page
     13. Préférences utilisateur & impression
     14. Utilitaires
     15. Raffinements
     16. Site personnel
     17. Animations
   ========================================================================== */

/* ---------- 01. Jetons de design ---------- */

:root {
  /* Couleurs — encre */
  --ink: #201f1d;
  --ink-90: rgba(32, 31, 29, .90);
  --ink-72: rgba(32, 31, 29, .72);
  --ink-55: rgba(32, 31, 29, .55);
  --ink-40: rgba(32, 31, 29, .40);
  --ink-24: rgba(32, 31, 29, .24);
  --ink-16: rgba(32, 31, 29, .16);
  --ink-08: rgba(32, 31, 29, .08);

  /* Couleurs — or */
  --gold: #b68235;
  --gold-deep: #7d5411;
  --gold-light: #e1ad66;
  --gold-wash: rgba(182, 130, 53, .07);
  --gold-line: rgba(182, 130, 53, .50);

  /* Couleurs — surfaces */
  --cream: #f3f2f2;
  --night: #1b1a18;
  --night-ink: #e9e5de;
  --night-70: rgba(233, 229, 222, .70);
  --night-45: rgba(233, 229, 222, .45);
  --night-28: rgba(233, 229, 222, .28);

  /* Rôles — redéfinis par les thèmes en §12 */
  --surface: var(--cream);
  --surface-page: var(--cream);
  --surface-raised: #fff;
  --plate-frame: #eae9e9;

  /* Typographie */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle fluide — de 360px à 1240px de viewport */
  --step--1: clamp(.78rem, .74rem + .18vw, .875rem);
  --step-0:  clamp(.9rem, .85rem + .22vw, 1rem);
  --step-1:  clamp(1rem, .93rem + .32vw, 1.18rem);
  --step-2:  clamp(1.3rem, 1.12rem + .8vw, 1.75rem);
  --step-3:  clamp(1.6rem, 1.28rem + 1.4vw, 2.4rem);
  --step-4:  clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
  --step-5:  clamp(2.4rem, 1.3rem + 4.9vw, 5.6rem);

  /* Rythme fluide */
  --space-2xs: clamp(.25rem, .23rem + .1vw, .35rem);
  --space-xs:  clamp(.5rem, .45rem + .22vw, .7rem);
  --space-s:   clamp(.85rem, .75rem + .45vw, 1.2rem);
  --space-m:   clamp(1.3rem, 1.1rem + .9vw, 2rem);
  --space-l:   clamp(2rem, 1.6rem + 1.8vw, 3.2rem);
  --space-xl:  clamp(3rem, 2.3rem + 3vw, 5rem);
  --space-2xl: clamp(4rem, 3rem + 4.4vw, 7rem);

  /* Arrondis — réservés à la boutique : le reste du site garde ses angles vifs. */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  /* Structure */
  --shell-max: 77.5rem;   /* 1240px — plafond, jamais une largeur imposée */
  --gutter: clamp(1.15rem, .6rem + 2.6vw, 3.5rem);
  --measure: 62ch;

  /* Ombres — trois plans plutôt qu'un seul : la lumière réelle ne fait pas
     qu'une tache floue sous l'objet. */
  --shadow-s: 0 1px 2px rgba(45, 35, 25, .06),
              0 4px 10px rgba(45, 35, 25, .07);
  --shadow-m: 0 1px 2px rgba(45, 35, 25, .07),
              0 6px 14px rgba(45, 35, 25, .09),
              0 18px 36px rgba(45, 35, 25, .12);
  --shadow-l: 0 2px 4px rgba(45, 35, 25, .08),
              0 12px 26px rgba(45, 35, 25, .12),
              0 34px 64px rgba(45, 35, 25, .20);

  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .25s;
  --dur: .45s;
  --dur-slow: .55s;
}

/* ---------- 02. Réinitialisation & base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}

p { margin: 0; }
/* Le rythme de prose n'a de sens qu'en flux. Appliqué à tout `p + p`, il
   atteignait aussi les paragraphes qui sont des éléments de grille ou de
   flexbox — la barre de chiffres, le colophon, les cartes du journal — et
   décalait le deuxième et les suivants de --space-s vers le bas : les colonnes
   n'étaient plus alignées entre elles. Dans une grille ou une flexbox,
   l'espacement appartient à `gap`, jamais à une marge de suite.
   Ailleurs la règle était redondante : `.article-body > * + *` porte déjà le
   rythme des articles, et les paragraphes en flux portent une utilitaire
   `mt-*` explicite. Seule la prose des pages légales s'appuyait dessus. */
.legal p + p { margin-block-start: var(--space-s); }

ul, ol { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }

a {
  color: var(--gold-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a:hover { color: var(--gold); }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Le focus clavier doit rester visible partout, y compris sur fond sombre. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

hr {
  border: 0;
  block-size: 1px;
  background: var(--ink-24);
  margin-block: var(--space-m);
}

/* ---------- 03. Utilitaires d'accessibilité ---------- */

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  z-index: 100;
  padding: .7em 1.1em;
  background: var(--ink);
  color: var(--cream);
  font: 600 var(--step--1) / 1 var(--font-body);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--cream); }

/* ---------- 04. Primitives de mise en page ---------- */

.shell {
  inline-size: 100%;
  max-inline-size: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-l); }
.section--flush-top { padding-block-start: 0; }

/* Grille fluide : les colonnes se replient d'elles-mêmes, sans point de rupture. */
.grid {
  display: grid;
  gap: var(--space-m);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
/* Deux colonnes dès 20rem, jamais plus de quatre : le plancher de colonne est
   le plus grand de 9rem et d'un quart de la ligne. `auto-fill` et non
   `auto-fit` : une section de deux produits garde des cartes de taille
   normale au lieu de les étirer sur toute la largeur. */
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(9rem, (100% - 3 * var(--space-m)) / 4)), 1fr)); }

/* Deux colonnes asymétriques qui se replient sous 60rem. */
.split {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: var(--split, 1fr 1fr); }
  .split--text-first { --split: minmax(0, 1.05fr) minmax(0, .95fr); }
  .split--media-first { --split: minmax(0, .85fr) minmax(0, 1.15fr); }
}


.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}
.cluster--between { justify-content: space-between; }

.rule { border-block-start: 1px solid var(--ink-24); }
.rule-b { border-block-end: 1px solid var(--ink-24); }

/* ---------- 05. Typographie ---------- */

.kicker--gold { color: var(--gold-deep); }
.kicker {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0;
}

.title     { font-size: var(--step-4); }
.subtitle  { font-size: var(--step-3); }
.italic-gold { font-style: italic; color: var(--gold-deep); }

.lede {
  font-size: var(--step-1);
  line-height: 1.85;
  max-inline-size: var(--measure);
}

/* Justification uniquement là où la colonne est assez large pour l'absorber. */
.prose { max-inline-size: var(--measure); }
@media (min-width: 48rem) {
  .prose--justify { text-align: justify; hyphens: auto; }
}

.numeral {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 300;
}

.note {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-40);
}

/* Soulignement animé au survol. */
.underline-grow {
  position: relative;
  display: inline-block;
}
.underline-grow::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -.45em;
  block-size: 1px;
  inline-size: 0;
  background: var(--gold);
  transition: inline-size var(--dur) var(--ease);
}
.underline-grow:hover::after,
.underline-grow:focus-visible::after { inline-size: 100%; }

/* ---------- 06. En-tête & navigation ---------- */

.site-header {
  border-block-end: 1px solid var(--ink-24);
  background: var(--surface);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-s);
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  letter-spacing: .3em;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
}
/* Le logo remplace le mot composé en texte : une image, dimensionnée par sa
   hauteur, qui suit l'échelle fluide de l'en-tête. */
.wordmark { display: inline-flex; align-items: flex-end; }
.wordmark img { display: block; inline-size: auto; block-size: clamp(1.75rem, 1.45rem + 1vw, 2.35rem); }
.site-footer .wordmark img { block-size: 2.4rem; }
.wordmark__suffix {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .18em;
  color: var(--gold-deep);
  margin-inline-start: .6em;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.9rem, .3rem + 1.6vw, 1.6rem);
}
.site-nav a {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-55);
  text-decoration: none;
  padding-block-end: .25em;
  transition: color var(--dur-fast) var(--ease);
}
.site-nav a:hover { color: var(--gold-deep); }
.site-nav a[aria-current="page"] {
  color: var(--gold-deep);
  border-block-end: 1px solid var(--gold);
}

.lang {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  color: var(--ink-40);
}
.lang [aria-current] { color: var(--gold-deep); }

/* Bandeau promotionnel (page Beauté). */
.ribbon {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  padding-block: var(--space-xs);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- Menu mobile ---------------------------------------------------------
   Une case à cocher et son label, sans script : la case précède le panneau,
   et `:checked ~` l'ouvre. Au-dessus de 52rem le panneau passe en
   `display: contents` — la navigation et la langue redeviennent des enfants
   directs de la barre, exactement comme sans menu. 52rem et non moins : la
   navigation à six entrées, suffixe de marque compris, ne tient plus sur une
   ligne en dessous d'environ 50rem.                                        */

.menu-toggle { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.site-header__menu { display: contents; }

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  min-block-size: 2.75rem;   /* cible tactile de 44px */
  padding-inline: 1em;
  border: 1px solid var(--ink-24);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-72);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu-button:hover { border-color: var(--gold); color: var(--gold-deep); }
.menu-toggle:focus-visible + .menu-button { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Trois traits : celui du milieu est l'élément, les deux autres ses
   pseudo-éléments. Ouverts, ils se croisent en ×. */
.menu-button__icon,
.menu-button__icon::before,
.menu-button__icon::after {
  display: block;
  inline-size: 1.1rem;
  block-size: 1px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.menu-button__icon { position: relative; }
.menu-button__icon::before,
.menu-button__icon::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-button__icon::before { transform: translateY(-5px); }
.menu-button__icon::after  { transform: translateY(5px); }
.menu-toggle:checked + .menu-button { border-color: var(--gold); color: var(--gold-deep); }
.menu-toggle:checked + .menu-button .menu-button__icon { background: transparent; }
.menu-toggle:checked + .menu-button .menu-button__icon::before { transform: rotate(45deg); background: currentColor; }
.menu-toggle:checked + .menu-button .menu-button__icon::after  { transform: rotate(-45deg); background: currentColor; }

@media (width < 52rem) {
  .site-header__menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--space-m);
    padding-block: var(--space-2xs) var(--space-s);
  }
  .menu-toggle:checked ~ .site-header__menu { display: flex; }

  .site-header__menu .site-nav ul {
    flex-direction: column;
    gap: 0;
    border-block-start: 1px solid var(--ink-16);
  }
  .site-header__menu .site-nav li { border-block-end: 1px solid var(--ink-16); }
  .site-header__menu .site-nav a {
    display: block;
    padding: 1.1em 0;
    font-size: .6875rem;
  }
  .site-header__menu .site-nav a::after { content: none; }
  /* Page courante : un filet doré vertical, comme au survol des lignes
     d'index, plutôt qu'un soulignement qui barrerait toute la rangée. */
  .site-header__menu .site-nav a[aria-current="page"] {
    border-block-end: 0;
    box-shadow: inset 2px 0 0 var(--gold);
    padding-inline-start: .9em;
  }
}

@media (min-width: 52rem) {
  .menu-button { display: none; }
}
/* Juste au-dessus du point de bascule, la barre complète est à l'étroit : on
   resserre l'espace entre les liens plutôt que de laisser la langue passer à
   la ligne. Au-delà de 60rem, l'espacement d'origine reprend. */
@media (min-width: 52rem) and (max-width: 60rem) {
  .site-nav ul { gap: .75rem; }
  /* Menu à 8 entrées (boutique) : la langue cède sa place sur petite tablette. */
  .site-header__menu:has(.site-nav li:nth-child(8)) > .lang { display: none; }
}

/* ---------- 07. Boutons & liens d'action ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  padding: .85em 1.5em;
  border: 1px solid currentColor;
  color: var(--gold-deep);
  background: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cream);
  box-shadow: var(--shadow-s);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--quiet { color: var(--ink); border-color: var(--ink-24); }
.btn--quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn--on-night { color: var(--gold-light); }
.btn--on-night:hover { background: var(--gold-light); color: var(--night); }
.btn--ghost-night { color: var(--night-ink); border-color: var(--night-28); }
.btn--ghost-night:hover { background: var(--night-ink); color: var(--night); }

.action {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
}

/* ---------- 08. Médias ---------- */

/* Cadre photo « plate » : double filet du design d'origine. */
.plate {
  position: relative;
  overflow: hidden;
  border: 6px solid var(--plate-frame);
  outline: 1px solid var(--ink-16);
  background: #e9e6e2;
  margin: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.plate img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.plate--thin { border-width: 5px; }
/* Vitrine produit de l'accueil : format portrait, flacon posé sur une scène
   éclairée (le blanc de la photo s'efface en mode multiply), bandeau de
   légende en bas. Sur deux colonnes, elle reste à l'écran pendant la lecture
   du texte voisin plutôt que de s'étirer à sa hauteur. */
.showcase {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(70% 55% at 50% 42%, #fffdf9 0%, rgba(255, 253, 249, 0) 72%),
    linear-gradient(180deg, #efe4cf 0%, #dcc49a 100%);
}
.showcase::after {
  content: "";
  position: absolute;
  inset-inline: 30%;
  inset-block-end: 15%;
  block-size: 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(45, 35, 25, .22), transparent);
}
.plate .showcase__img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  padding: 0 4% 12%;
  mix-blend-mode: multiply;
  filter: brightness(1.04) contrast(1.03);
}
/* Photo mise en scène (fond déjà composé) : elle remplit la vitrine. */
.showcase--photo::after { content: none; }
.plate .showcase--photo .showcase__img,
.showcase--photo .showcase__img { position: absolute; inset: 0; padding: 0; object-fit: cover; mix-blend-mode: normal; filter: none; }

.showcase__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1rem;
  padding: var(--space-s) var(--space-m);
  background: rgba(255, 253, 249, .82);
  backdrop-filter: blur(6px);
  border-block-start: 1px solid var(--gold-line);
}
@media (min-width: 60rem) {
  .split:has(> .showcase-col) { align-items: start; }
  .showcase-col { position: sticky; inset-block-start: var(--space-m); }
}
/* Photo produit détourée ou sur fond blanc : on la montre entière, sur blanc,
   plutôt que recadrée — un flacon coupé ne se reconnaît plus. */
.plate--product { background: #fff; }
.plate--product img { object-fit: contain; padding: 8%; }

/* Ratios fluides : la hauteur suit la largeur, jamais l'inverse. */
.ratio-3-2   { aspect-ratio: 3 / 2; }
.ratio-4-3   { aspect-ratio: 4 / 3; }
.ratio-1-1   { aspect-ratio: 1 / 1; }
.ratio-3-4   { aspect-ratio: 3 / 4; }
.ratio-16-10 { aspect-ratio: 16 / 10; }

/* ---------- 09. Composants de contenu ---------- */

/* --- Éventail de cartes (accueil) ---
   Les trois cartes sont strictement identiques : même colonne de grille,
   étirées sur les deux axes, même ratio d'image.

   Le décalage de l'éventail se fait en `transform`, jamais en `margin`
   négatif : une marge modifie la boîte et élargirait les cartes latérales,
   ce qui est exactement le défaut que l'on corrige ici. Un `transform`
   déplace le rendu sans toucher à la taille calculée.                      */

.fan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: stretch;
  justify-items: stretch;
  gap: var(--space-m);
  padding-block: var(--space-m);
}

.fan__card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--ink-24);
  padding: var(--space-m);
  box-shadow: var(--shadow-m);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease);
}

/* Filet doré intérieur, tracé en pseudo-élément : contrairement à `outline`,
   il suit les coins et ne déborde jamais du cadre. */
.fan__card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--gold-line);
  pointer-events: none;
}

.fan__card:hover,
.fan__card:focus-visible {
  color: inherit;
  box-shadow: var(--shadow-l);
}

.fan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}
.fan__media { margin-block-start: var(--space-s); }
.fan__title {
  font-size: var(--step-2);
  font-weight: 400;
  margin-block: var(--space-s) var(--space-2xs);
}
/* `auto` colle les descriptions au bas de la carte : les trois lignes de
   base s'alignent même si un titre passe sur deux lignes. */
.fan__text {
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-72);
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
}

/* L'éventail ne se déploie qu'à partir de 64rem : en dessous, trois cartes
   côte à côte puis une pile, toujours de taille identique. */
@media (min-width: 64rem) {
  .fan {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, -2rem + 5vw, 2.5rem);
    padding-block: var(--space-l);
  }
  .fan__card:nth-child(1) { transform: rotate(-7deg) translate(1.6rem, .5rem); }
  .fan__card:nth-child(2) { transform: translateY(-1.1rem); z-index: 3; box-shadow: var(--shadow-l); }
  .fan__card:nth-child(3) { transform: rotate(7deg) translate(-1.6rem, .5rem); }
  .fan__card:hover,
  .fan__card:focus-visible {
    transform: translateY(-1.6rem) scale(1.025);
    z-index: 9;
  }
}

/* --- Lignes d'index cliquables --- */
.index-row {
  display: grid;
  gap: var(--space-xs) var(--space-m);
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: var(--space-m) var(--space-xs);
  border-block-end: 1px solid var(--ink-16);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.index-row:hover,
.index-row:focus-visible { background: var(--gold-wash); color: inherit; }
.index-row__num { font-size: var(--step-2); color: var(--gold-deep); }
.index-row__title { font-size: var(--step-3); line-height: 1.15; grid-column: 2; }
.index-row__text { font-size: var(--step-0); color: var(--ink-72); grid-column: 2; }
.index-row__meta {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.index-row__arrow {
  color: var(--gold);
  font-size: 1.1rem;
  transition: transform var(--dur-fast) var(--ease);
}
.index-row:hover .index-row__arrow { transform: translateX(9px); }
.index-row__price { font-family: var(--font-display); font-size: var(--step-2); grid-column: 2; }

.index-row__body { grid-column: 2; }
/* Les enfants sont des <span> : sans `block`, titre et description se
   suivaient sur la même ligne dès que la colonne se rétrécissait. */
.index-row__body > * { display: block; }
.index-row__body > .index-row__text { margin-block-start: var(--space-2xs); }
.index-row--featured { background: rgba(182, 130, 53, .05); }
.index-row__price { font-family: var(--font-display); font-size: var(--step-2); font-variant-numeric: tabular-nums; grid-column: 2; }

@media (min-width: 56rem) {
  .index-row__body { grid-column: auto; }
}

@media (min-width: 56rem) {
  .index-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr) auto; }
  .index-row__title,
  .index-row__text,
  .index-row__meta { grid-column: auto; }
}

/* --- Étapes numérotées --- */
.steps { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.step { padding: var(--space-m); border-block-start: 1px solid var(--ink-16); }
.step__num { font-size: var(--step-3); color: var(--gold-light); }
.step__title { font-size: var(--step-1); font-weight: 600; font-family: var(--font-body); margin-block: var(--space-xs) var(--space-2xs); }
.step__text { font-size: var(--step--1); line-height: 1.7; color: var(--ink-72); }
@media (min-width: 52rem) {
  .steps { border-block: 1px solid var(--ink-24); }
  .step { border-block-start: 0; border-inline-start: 1px solid var(--ink-16); }
  .step:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .step:last-child { padding-inline-end: 0; }
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 300;
  line-height: 1.42;
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-s);
}
.quote__role {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* --- Cartes d'article & de produit --- */
.card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.card:hover { color: inherit; }
.card:hover .card__title { color: var(--gold-deep); }
.card__date {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-block-start: var(--space-s);
}
.card__title {
  font-size: var(--step-2);
  font-weight: 400;
  margin-block: var(--space-2xs);
  transition: color var(--dur-fast) var(--ease);
}
.card__text { font-size: var(--step--1); line-height: 1.7; color: var(--ink-72); }
.card__price {
  font-variant-numeric: tabular-nums;
  font-size: var(--step-0);
  color: var(--ink-72);
  margin-block-start: var(--space-2xs);
}
.card__name {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.35;
  margin-block-start: var(--space-xs);
}

/* --- Blocs sombres --- */
.night {
  background: var(--night);
  color: var(--night-ink);
}
.night h1, .night h2, .night h3 { color: var(--night-ink); }
.night .kicker { color: var(--gold-light); }
.night p { color: var(--night-70); }
.night a { color: var(--gold-light); }

/* Chiffre géant en filigrane. */
.watermark { position: relative; overflow: hidden; }
.watermark > :not(.watermark__letter) { position: relative; }

/* --- Coaching : bandeau d'ouverture --------------------------------------
   Texte à gauche, portrait de la coach dans une arche à droite, sur un halo
   doré. Une carte flottante mène au programme le plus choisi.            */
.chero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(45% 70% at 78% 45%, rgba(182, 130, 53, .28), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(182, 130, 53, .10), transparent 70%),
    var(--night);
}
/* Pleine largeur : le fond court d'un bord à l'autre, le contenu reste
   composé dans 90rem au centre. */
.chero .shell { max-inline-size: 90rem; }
.chero__grid {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding-block: var(--space-xl);
}
@media (min-width: 60rem) {
  .chero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-xl); }
}
.chero__title {
  margin-block: var(--space-s) var(--space-m);
  font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: #fbf6ef;
}
.chero__title em { display: block; font-style: italic; color: var(--gold-light); }
.night .chero__lede { max-inline-size: 48ch; font-size: var(--step-1); line-height: 1.75; color: var(--night-70); }

.chero__steps { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: var(--space-m); }
.chero__steps li {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .55em 1.1em;
  border: 1px solid var(--night-28);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--night-ink);
}
.chero__step-icon { display: inline-grid; place-items: center; color: var(--gold-light); }
.chero__step-icon svg { display: block; }

.chero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-m); }
.night .chero__cta { border-radius: 999px; padding-inline: 2em; background: var(--gold-light); border-color: var(--gold-light); color: #1b1712; }
.night .chero__cta:hover { background: #fbf6ef; border-color: #fbf6ef; color: #1b1712; }
.chero__ghost { border-radius: 999px; padding-inline: 2em; }

.chero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1.4rem;
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--night-28);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--night-45);
}
.chero__proof strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; letter-spacing: 0; color: var(--gold-light); margin-inline-end: .2em; }

/* Portrait en arche */
.chero__portrait { position: relative; margin: 0; max-inline-size: 26rem; justify-self: center; inline-size: 100%; }
.chero__arch {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px var(--radius-m) var(--radius-m);
  outline: 1px solid rgba(225, 173, 102, .55);
  outline-offset: 10px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45);
}
.chero__arch img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 12%; }
.chero__badge {
  position: absolute;
  inset-block-start: 58%;
  inset-inline-start: -1.2rem;
  display: grid;
  padding: .7rem 1rem;
  border-radius: var(--radius-s);
  background: rgba(20, 17, 15, .82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--night-28);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--night-70);
}
.chero__badge strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; letter-spacing: 0; text-transform: none; color: #fbf6ef; }
.night .chero__offer {
  position: absolute;
  inset-block-end: -1.4rem;
  inset-inline-end: -1rem;
  display: grid;
  gap: .15rem;
  padding: .9rem 1.2rem;
  border-radius: var(--radius-m);
  background: #fbf6ef;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-l);
  transition: transform var(--dur) var(--ease);
}
.night .chero__offer:hover { color: var(--ink); transform: translateY(-3px); }
.chero__offer-kicker { font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.chero__offer-name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.chero__offer-price { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (width < 34rem) {
  .chero__badge { inset-inline-start: .6rem; }
  .night .chero__offer { inset-inline-end: .6rem; }
}

/* --- Réseau : section d'ouverture ----------------------------------------
   Pleine largeur sur fond crème doré (le pendant clair du bandeau Coaching) :
   texte et quatre avantages à gauche, photo encadrée à droite avec deux
   cartes flottantes — la marraine, et l'accès aux étapes.              */
.rhero {
  background:
    radial-gradient(50% 70% at 80% 40%, rgba(182, 130, 53, .16), transparent 70%),
    radial-gradient(40% 60% at 0% 0%, rgba(182, 130, 53, .08), transparent 70%),
    var(--surface);
  border-block-end: 1px solid var(--ink-16);
}
.rhero .shell { max-inline-size: 90rem; }
.rhero__grid { display: grid; gap: var(--space-xl); align-items: center; padding-block: var(--space-xl); }
@media (min-width: 60rem) {
  .rhero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.rhero__title {
  margin-block: var(--space-s) var(--space-m);
  font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.rhero__title em { font-style: italic; color: var(--gold-deep); }
.rhero__title--long { font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.2rem); line-height: 1.06; }
.rhero__lede { max-inline-size: 50ch; font-size: var(--step-1); line-height: 1.75; color: var(--ink-72); }

.rhero__perks { display: grid; gap: .6rem; margin-block-start: var(--space-m); }
@media (min-width: 34rem) { .rhero__perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rhero__perks li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .8rem;
  padding: .85rem 1rem;
  border: 1px solid var(--ink-16);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.rhero__perks li:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.rhero__perk-num { grid-row: span 2; align-self: center; font-family: var(--font-display); font-size: var(--step-2); color: var(--gold); line-height: 1; }
.rhero__perks strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; line-height: 1.2; }
.rhero__perks span:last-child { font-size: var(--step--1); color: var(--ink-55); }

.rhero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-m); }
.rhero__actions .btn--shop { flex: 0 1 auto; padding-inline: 2.2em; }
.rhero__ghost { border-radius: 999px; padding-inline: 2em; }

.rhero__visual { position: relative; margin: 0; padding: 1.5rem 0 2rem; }
.rhero__frame {
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  outline: 1px solid var(--gold-line);
  outline-offset: 10px;
}
.rhero__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.rhero__card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.1rem;
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  box-shadow: var(--shadow-m);
  color: inherit;
  text-decoration: none;
}
.rhero__card--top { inset-block-start: 0; inset-inline-start: -1rem; }
.rhero__card--top img { inline-size: 2.8rem; block-size: 2.8rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-light); }
.rhero__card--top p { display: grid; font-size: var(--step--1); color: var(--ink-55); line-height: 1.3; }
.rhero__card--top strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; color: var(--ink); }
.rhero__card--bottom { inset-block-end: 0; inset-inline-end: -1rem; flex-direction: column; align-items: flex-start; gap: .1rem; background: var(--ink); color: var(--cream); transition: transform var(--dur) var(--ease); }
.rhero__card--bottom:hover { color: var(--cream); transform: translateY(-3px); }
.rhero__card-kicker { font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); }
.rhero__card-title { font-family: var(--font-display); font-size: var(--step-1); }
@media (width < 34rem) {
  .rhero__card--top { inset-inline-start: .5rem; }
  .rhero__card--bottom { inset-inline-end: .5rem; }
}

/* --- Business Connect : présentation de la fondatrice --------------------
   Portrait en arche, nom en grand, citation en exergue avec un filet doré. */
.founder { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 56rem) {
  .founder { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-xl); }
}
.founder__photo {
  margin: 0;
  inline-size: 100%;
  max-inline-size: 24rem;
  justify-self: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px var(--radius-m) var(--radius-m);
  outline: 1px solid var(--gold-line);
  outline-offset: 10px;
  box-shadow: var(--shadow-l);
}
.founder__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 12%; }
.founder__name {
  margin-block: var(--space-xs) var(--space-s);
  font-size: var(--step-5);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.03em;
}
.founder__quote {
  margin: 0;
  padding-inline-start: var(--space-s);
  border-inline-start: 2px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.25;
  color: var(--gold-deep);
}
.founder__body { margin-block-start: var(--space-m); max-inline-size: 56ch; font-size: var(--step-1); line-height: 1.8; color: var(--ink-72); }
.founder__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: var(--space-m); }
.founder__tags li {
  padding: .45em 1em;
  border: 1px solid var(--ink-16);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-72);
  background: var(--surface-raised);
}

/* --- Coaching : « Développer son potentiel » -------------------------------
   Intro à gauche, les huit thèmes en cartes numérotées à droite, et la
   promesse en pleine largeur dessous. */
.potentiel { display: grid; gap: var(--space-l); }
@media (min-width: 60rem) {
  .potentiel { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--space-xl); align-items: start; }
  .potentiel__promesse { grid-column: 1 / -1; }
}
.themes { display: grid; gap: .6rem; margin-block-start: var(--space-s); counter-reset: none; }
@media (min-width: 34rem) { .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.themes li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--ink-16);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.themes li:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.themes__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--gold-deep);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.themes li:hover .themes__icon { background: var(--gold); color: #fff; }
.themes__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; }
.potentiel__promesse {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius-l);
  background: var(--night);
  color: var(--night-ink);
}
.potentiel__non { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--night-70); }
.potentiel__promesse .signature { color: var(--gold-light); }

/* --- Pastille d'icône : remplace partout les numéros de liste ------------- */
.icon-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--gold-deep);
  font-size: 0;
  line-height: 0;
}
.icon-badge svg { display: block; }
.fan__icon { inline-size: 2rem; block-size: 2rem; }
.night .icon-badge, .deep .icon-badge { color: var(--gold-light); background: rgba(225, 173, 102, .08); }
.scent__icon { inline-size: 1.9rem; block-size: 1.9rem; margin-inline-end: .5rem; vertical-align: middle; }
.step__num.icon-badge { margin-block-end: var(--space-xs); }

/* Liste de thèmes sur une seule colonne (Business Connect). */
@media (min-width: 34rem) { .themes--col { grid-template-columns: minmax(0, 1fr); } }

/* --- Accueil : manifeste « Trois univers. Une seule vision. » -------------- */
.vision__card {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-m);
  border-radius: var(--radius-l);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(182, 130, 53, .22), transparent 70%),
    var(--night-deep, #171512);
  color: var(--night-ink);
}
@media (min-width: 60rem) {
  .vision__card { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: var(--space-xl); padding: var(--space-xl); }
  .vision__card > .kicker, .vision__title, .vision__eqs { grid-column: 1; }
  .vision__text { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .vision__sign { grid-column: 1 / -1; }
}
.vision__card .kicker { color: var(--gold-light); }
.vision__title { font-size: var(--step-4); font-weight: 300; line-height: 1.05; color: #fbf6ef; }
.vision__title em { display: block; font-style: italic; color: var(--gold-light); }
.vision__eqs { display: grid; gap: .6rem; }
.vision__eq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr);
  align-items: center;
  gap: var(--space-s);
  padding: .8rem 1rem;
  border: 1px solid var(--night-28);
  border-radius: var(--radius-m);
}
.vision__term { display: flex; align-items: center; gap: .8rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--night-ink); }
.vision__card .themes__icon { color: var(--gold-light); background: rgba(225, 173, 102, .1); border-color: rgba(225, 173, 102, .4); }
.vision__arrow { color: var(--gold-light); font-size: 1.2rem; }
.vision__value { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--gold-light); }
.vision__text { display: grid; gap: var(--space-s); }
.t-paper .vision__text p, .vision__text p { color: rgba(239, 233, 223, .78); font-size: var(--step-0); line-height: 1.8; }
.t-paper .vision__text .vision__adn, .vision__text .vision__adn { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; color: #fbf6ef; }
.vision__sign { display: grid; gap: .3rem; justify-items: center; text-align: center; padding-block-start: var(--space-m); border-block-start: 1px solid var(--night-28); }
.vision__brand { font-family: var(--font-display); font-size: var(--step-3); letter-spacing: .12em; text-transform: uppercase; color: #fbf6ef; }
.vision__tagline { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(239, 233, 223, .6); }
.vision__sign .signature { margin-block-start: var(--space-xs); color: var(--gold-light); line-height: 1.45; }
@media (width < 34rem) {
  .vision__eq { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .vision__arrow { display: none; }
  .vision__value { padding-inline-start: 3.4rem; }
}

/* --- Questions fréquentes --- */
.faq__item { border-block-end: 1px solid var(--ink-16); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--gold);
  font-size: 1.1rem;
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq__answer {
  padding-block-end: var(--space-s);
  font-size: var(--step-0);
  color: var(--ink-72);
  max-inline-size: var(--measure);
}

/* --- Article long --- */
.article-body { max-inline-size: 40rem; margin-inline: auto; }
.article-body > * + * { margin-block-start: var(--space-s); }
.article-body h2 { font-size: var(--step-3); margin-block-start: var(--space-l); }
.article-body h3 { font-size: var(--step-2); margin-block-start: var(--space-m); }
.article-body > .kicker { font-size: .625rem; margin-block-start: 0; }  /* étiquette de section, pas un intertitre */
.article-body ul { list-style: disc; padding-inline-start: 1.3em; }
.article-body li + li { margin-block-start: var(--space-xs); }
.article-body blockquote {
  margin: var(--space-m) 0;
  padding-inline-start: var(--space-s);
  border-inline-start: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.42;
}

.legal { max-inline-size: 45rem; }
.legal h2 { font-size: var(--step-2); margin-block-start: var(--space-l); }
.legal h3 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 600; margin-block-start: var(--space-m); }
.legal dl { margin: 0; }
.legal dt { font-weight: 600; margin-block-start: var(--space-s); }
.legal dd { margin: 0; color: var(--ink-72); }

/* Zone à compléter par le client — visible, jamais silencieuse. */
.todo {
  border-inline-start: 2px solid var(--gold);
  background: var(--gold-wash);
  padding: var(--space-s);
  font-size: var(--step--1);
  color: var(--ink-72);
}
.todo strong { color: var(--gold-deep); }

.breadcrumb {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .6em; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: .6em; color: var(--ink-40); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-deep); }

/* --- Boutique ------------------------------------------------------------ */
/* Sauts de section en tête de rayon. */
.jumpnav ul { gap: var(--space-2xs) var(--space-m); }
.jumpnav .note { margin-inline-start: .3em; }

/* Vues supplémentaires d'un produit, sous la photo principale. */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }

.product__price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---------- 10. Formulaires ---------- */

.newsletter { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.newsletter input {
  flex: 1 1 10rem;
  font-family: inherit;
  font-size: var(--step--1);
  color: var(--night-ink);
  background: transparent;
  border: 1px solid var(--night-28);
  padding: .75em .8em;
}
.newsletter input::placeholder { color: var(--night-45); }

/* --- Carte de contact ------------------------------------------------------
   Deux volets : à gauche un panneau sombre et personnel (médaillon, promesses,
   WhatsApp direct), à droite le formulaire. Étiquettes flottantes en CSS pur :
   chaque champ porte `placeholder=" "`, et `:placeholder-shown` indique s'il
   est vide — l'étiquette se loge alors dans le champ, sinon elle remonte.   */
.contact-wrap { max-inline-size: 64rem; margin-inline: auto; }
.contact-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--ink-16);
  border-radius: var(--radius-l);
  background: var(--surface-raised);
  box-shadow: var(--shadow-m);
}
@media (min-width: 56rem) {
  .contact-card { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}

.contact-card__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-l) var(--space-m);
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(182, 130, 53, .22), transparent 70%),
    var(--night);
  color: var(--night-ink);
}
.contact-card__aside .kicker { color: var(--gold-light); margin-block-start: var(--space-s); }
.contact-card__avatar {
  inline-size: 5.5rem;
  block-size: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-light);
  box-shadow: 0 0 0 5px rgba(225, 173, 102, .15);
}
.contact-card__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.08;
  color: #fbf6ef;
}
.contact-card__intro { font-size: var(--step--1); line-height: 1.7; color: var(--night-70); }
.contact-card__promises { display: grid; gap: .5rem; margin-block-start: var(--space-xs); }
.contact-card__promises li { display: flex; gap: .7em; align-items: baseline; font-size: var(--step--1); color: var(--night-ink); }
.contact-card__promises li::before { content: "✦"; color: var(--gold-light); font-size: .8em; }
.contact-card__direct {
  margin-block-start: auto;
  padding-block-start: var(--space-m);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--night-45);
}
.contact-card__direct a {
  display: block;
  margin-block-start: .3rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-light);
}

.contact-form { display: grid; gap: var(--space-s); min-inline-size: 0; padding: var(--space-l) var(--space-m); }
.contact-form__row { display: grid; gap: var(--space-s); }
@media (min-width: 34rem) {
  .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Champ à étiquette flottante */
.float { position: relative; }
.float input,
.float textarea {
  display: block;
  inline-size: 100%;
  padding: 1.45rem 1rem .55rem;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-16);
  border-radius: var(--radius-s);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.float textarea { min-block-size: 9rem; resize: vertical; line-height: 1.6; }
.float label {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
  font-size: var(--step-0);
  color: var(--ink-55);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), inset-block-start var(--dur-fast) var(--ease);
}
.float__hint { font-size: .8em; color: var(--ink-40); font-style: italic; }
.float input:focus,
.float textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surface-raised);
  box-shadow: 0 0 0 4px var(--gold-wash), 0 0 0 1px var(--gold);
}
.float input:focus + label,
.float input:not(:placeholder-shown) + label,
.float textarea:focus + label,
.float textarea:not(:placeholder-shown) + label {
  inset-block-start: .45rem;
  transform: scale(.72);
  color: var(--gold-deep);
  letter-spacing: .04em;
}

/* Sujet : pastilles */
.chips { border: 0; margin: 0; padding: 0; }
.chips legend {
  padding: 0;
  margin-block-end: var(--space-xs);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.chips__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips__list input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.chips__list label {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .65em 1.15em;
  border: 1px solid var(--ink-24);
  border-radius: 999px;
  font-size: var(--step--1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chips__list label::before {
  content: "";
  inline-size: .55em;
  block-size: .55em;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background var(--dur-fast) var(--ease);
}
.chips__list label:hover { border-color: var(--gold); color: var(--gold-deep); }
.chips__list input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chips__list input:checked + label::before { background: var(--gold-light); border-color: var(--gold-light); }
.chips__list input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Envoi */
/* Bouton et note calés à droite du formulaire, la note sous le bouton. */
.contact-form__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
  margin-block-start: var(--space-2xs);
  text-align: end;
}
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  padding: .95em 1.7em;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn-wa__icon { color: #25d366; flex: none; }
.btn-wa:hover { background: #1b1a18; box-shadow: var(--shadow-m); transform: translateY(-1px); }
.btn-wa:active { transform: none; box-shadow: none; }
/* La note tient sur une ligne : à côté du bouton s'il y a la place, sinon
   en dessous. Sur téléphone, en police de texte, plus petite, pour tenir dès
   360px ; en dessous, elle revient à la ligne plutôt que d'être coupée. */
.contact-form__foot .note { white-space: nowrap; }
@media (width < 34rem) {
  .contact-form__foot .note {
    white-space: normal;
    font-family: var(--font-body);
    font-size: .75rem;
    letter-spacing: 0;
    text-transform: none;
  }
}

@media (min-width: 56rem) {
  .contact-card__aside { padding: var(--space-l); }
  .contact-form { padding: var(--space-l); }
}

/* ---------- 11. Pied de page ---------- */

.site-footer {
  background: var(--night);
  color: var(--night-ink);
  padding-block: var(--space-xl);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
@media (min-width: 64rem) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; }
}
.site-footer h2 {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 400;
}
.site-footer ul { display: flex; flex-direction: column; gap: var(--space-xs); margin-block-start: var(--space-s); }
.site-footer a { color: var(--night-70); text-decoration: none; font-size: var(--step--1); }
.site-footer a:hover { color: var(--gold-light); text-decoration: underline; }
.site-footer p { font-size: var(--step--1); line-height: 1.75; }
/* Mention en bas de page (livraison de la boutique). */
.footer-note {
  margin-block-start: var(--space-l);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--night-28);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--night-70);
}
.footer-note strong { color: var(--gold-light); font-weight: 600; }
.site-footer .footer-note a { font-size: inherit; color: var(--gold-light); text-decoration: underline; text-underline-offset: .2em; }

.colophon {
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--night-28);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--night-45);
}

/* ---------- 12. Thèmes de page ---------- */

/* Pages intérieures : même fond papier que l'accueil (couleur et trame, §16).
   Les cartes et panneaux gardent un blanc net, qui détache les produits. */
.t-cream {
  --surface: #e7e3da;
  --surface-page: #e7e3da;
  --surface-raised: #fff;
  --plate-frame: #f4f1ea;
}

/* Le contenu est cadré par une largeur maximale, jamais par une largeur fixe.
   Seul <main> est plafonné : l'en-tête et le pied de page courent d'un bord à
   l'autre de la fenêtre, fonds, filets et contenus compris. */
.page-body > main {
  display: block;
  max-inline-size: var(--shell-max);
  margin-inline: auto;
  background: var(--surface);
}
.site-header .shell,
.site-footer .shell { max-inline-size: none; }
/* Page à bandeau pleine largeur (Beauté) : <main> n'est plus plafonné ; chaque
   section reste cadrée par sa propre `.shell`, seul le carrousel s'étend. */
.page-body > main.main--wide { max-inline-size: none; }

/* ---------- 14. Utilitaires ----------
   Jeu court et fermé : uniquement le rythme vertical et deux ou trois
   ajustements récurrents. Tout le reste appartient à un composant nommé.   */

.mt-xs { margin-block-start: var(--space-xs); }
.center { text-align: center; }
.center > .lede { margin-inline: auto; }  /* la mesure est un plafond : sans marge auto, le bloc resterait calé à gauche */
.mt-s  { margin-block-start: var(--space-s); }
.mt-m  { margin-block-start: var(--space-m); }
.mt-l  { margin-block-start: var(--space-l); }
.mb-s  { margin-block-end: var(--space-s); }
.mb-m  { margin-block-end: var(--space-m); }
.my-s  { margin-block: var(--space-s); }

.pt-s  { padding-block-start: var(--space-s); }
.pb-s  { padding-block-end: var(--space-s); }

.section-title { margin-block: var(--space-s) var(--space-m); }
.measure-short { max-inline-size: 30ch; }
.on-night      { color: var(--night-ink); }

/* ---------- 15. Raffinements ----------
   Le « premium » tient au détail, pas à l'effet : des filets plus fins, une
   hiérarchie plus tranchée, des transitions plus courtes. Rien ici n'ajoute
   de requête ni de script.                                               */

/* --- Ligne d'index : accent doré au survol ------------------------------ */
.index-row {
  position: relative;
  border-inline-start: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              padding-inline-start var(--dur-fast) var(--ease);
}
.index-row:hover,
.index-row:focus-visible {
  border-inline-start-color: var(--gold);
  padding-inline-start: var(--space-s);
}

/* --- Carte de journal ---------------------------------------------------- */
.card .plate { transition: box-shadow var(--dur) var(--ease); }
.card:hover .plate { box-shadow: var(--shadow-m); }
.card__title { text-wrap: pretty; }

/* --- Carte produit « vitrine » -------------------------------------------
   Le flacon est posé sur une scène éclairée dont la teinte suit l'univers
   (poudré pour Femme, fumé pour Homme, ambré pour Mixte, champagne pour le
   Luxe). Les photos sont sur fond blanc : `mix-blend-mode: multiply` rend ce
   blanc transparent, si bien que la lumière de la scène — et le grand numéro
   en filigrane — passent derrière le flacon sans détourage.              */

.pcard {
  --stage: #efe7da;
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--ink-16);
  border-radius: var(--radius-m);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.pcard--femme { --stage: #f1e2de; }
.pcard--homme { --stage: #e2e0dc; }
.pcard--mixte { --stage: #f0e4cf; }
.pcard--luxe  { --stage: #e9dbbe; }

/* Filet doré intérieur : il s'allume au survol, comme sur l'éventail. */
.pcard::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 3;
  border: 1px solid var(--gold-line);
  border-radius: calc(var(--radius-m) - 5px);
  opacity: 0;
  transform: scale(.985);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}

.pcard__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  background: var(--stage);  /* repli sans color-mix() */
  background:
    radial-gradient(90% 70% at 50% 36%, #fffdf9 0%, rgba(255, 253, 249, 0) 70%),
    linear-gradient(180deg, var(--stage) 0%, color-mix(in srgb, var(--stage) 80%, #b68235) 100%);
}
/* Reflet de sol : une ellipse d'ombre très douce sous le produit. */
.pcard__stage::after {
  content: "";
  position: absolute;
  inset-inline: 22%;
  inset-block-end: 7%;
  block-size: 5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(45, 35, 25, .16), transparent);
  z-index: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}

.pcard__num {
  position: absolute;
  inset-block-start: -.06em;
  inset-inline-start: .06em;
  z-index: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(4.25rem, 2.6rem + 5vw, 7.5rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(182, 130, 53, .2);
  pointer-events: none;
  transition: color var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.pcard__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: 11% 13% 9%;
  mix-blend-mode: multiply;
  /* Certaines photos ont un fond blanc cassé : un léger éclaircissement le
     ramène au blanc pur, que le mode multiply efface. */
  filter: brightness(1.04) contrast(1.03);
  transition: transform var(--dur-slow) var(--ease);
}

.pcard__tag {
  position: absolute;
  inset-block-end: .7rem;
  inset-inline-start: .7rem;
  z-index: 2;
  padding: .4em .75em;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-72);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--ink-08);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* Sceau « Luxe », tamponné de biais ; il se redresse au survol. */
.pcard__seal {
  position: absolute;
  inset-block-start: .7rem;
  inset-inline-end: .7rem;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  outline: 1px solid rgba(182, 130, 53, .4);
  outline-offset: -5px;
  background: rgba(255, 253, 249, .7);
  font-family: var(--font-display);
  font-style: italic;
  font-size: .95rem;
  color: var(--gold-deep);
  transform: rotate(-14deg);
  transition: transform var(--dur-slow) var(--ease);
}

.pcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .3rem;
  padding: var(--space-s);
  border-block-start: 1px solid var(--ink-08);
}
.pcard__ref {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.pcard__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.pcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  margin-block-start: auto;
  padding-block-start: .7rem;
}
.pcard__price {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pcard__from {
  font-family: var(--font-mono);
  font-size: .5625rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-inline-end: .35em;
}
.pcard__cta {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
}
.pcard__arrow { transition: transform var(--dur) var(--ease); }
/* Carte étroite : la flèche seule suffit. La règle suit la largeur de la
   carte, pas celle de l'écran — une carte de quatre colonnes sur tablette est
   aussi étroite qu'une carte de deux colonnes sur téléphone. */
.pcard__body { container-type: inline-size; }
@container (width < 11rem) {
  .pcard__cta-label { display: none; }
}

.pcard:hover,
.pcard:focus-visible {
  color: inherit;
  border-color: transparent;
  box-shadow: var(--shadow-l);
  transform: translateY(-4px);
}
.pcard:hover::before,
.pcard:focus-visible::before { opacity: 1; transform: none; }
.pcard:hover .pcard__img,
.pcard:focus-visible .pcard__img { transform: translateY(-3%) scale(1.05); }
.pcard:hover .pcard__stage::after { transform: scaleX(.82); opacity: .7; }
.pcard:hover .pcard__num,
.pcard:focus-visible .pcard__num { color: rgba(182, 130, 53, .34); transform: translateX(.08em); }
.pcard:hover .pcard__seal { transform: rotate(0deg); }
.pcard:hover .pcard__arrow,
.pcard:focus-visible .pcard__arrow { transform: translateX(5px); }

/* --- Page produit ----------------------------------------------------------
   Même langage que la carte : scène teintée, numéro en filigrane, sceau.
   Trois interactions sans script, toutes sur des boutons radio :
   les vues de la galerie, le choix du format (qui change le prix affiché)
   et, en bas, un rail de produits voisins en défilement horizontal.       */

.pp { display: grid; gap: var(--space-l); margin-block-start: var(--space-m); }
/* Sur ordinateur, la photo et la carte d'achat ont exactement la même taille :
   deux colonnes égales, et la scène s'étire à la hauteur de la carte. Les
   vignettes passent en surimpression dans la scène pour ne pas la décaler. */
@media (min-width: 60rem) {
  .pp { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .pp__media { display: flex; flex-direction: column; }
  .pp__stage { flex: 1; aspect-ratio: auto; min-block-size: 26rem; }
  .pp__thumbs {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-end: 1rem;
    z-index: 3;
    margin: 0;
  }
  .pp__thumbs label { inline-size: 3.75rem; box-shadow: var(--shadow-s); }
}

/* Galerie */
.pp__media { position: relative; }
.pp__vue { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.pp__stage {
  --stage: #efe7da;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-l);
  border: 1px solid var(--ink-08);
  background: var(--stage);
  background:
    radial-gradient(70% 60% at 50% 40%, #fffdf9 0%, rgba(255, 253, 249, 0) 72%),
    linear-gradient(180deg, var(--stage) 0%, color-mix(in srgb, var(--stage) 78%, #b68235) 100%);
}
.pp__stage.pcard--femme { --stage: #f1e2de; }
.pp__stage.pcard--homme { --stage: #e2e0dc; }
.pp__stage.pcard--mixte { --stage: #f0e4cf; }
.pp__stage.pcard--luxe  { --stage: #e9dbbe; }
.pp__stage::after {
  content: "";
  position: absolute;
  inset-inline: 26%;
  inset-block-end: 8%;
  block-size: 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(45, 35, 25, .18), transparent);
}
.pp__num {
  position: absolute;
  inset-block-start: -.1em;
  inset-inline-start: .08em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(7rem, 3rem + 14vw, 15rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(182, 130, 53, .18);
  pointer-events: none;
}
.pp__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: 12%;
  mix-blend-mode: multiply;
  filter: brightness(1.04) contrast(1.03);
  opacity: 0;
  transform: scale(.97);
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.pp__img:only-of-type,
.pp__vue:nth-of-type(1):checked ~ .pp__stage .pp__img:nth-of-type(1),
.pp__vue:nth-of-type(2):checked ~ .pp__stage .pp__img:nth-of-type(2),
.pp__vue:nth-of-type(3):checked ~ .pp__stage .pp__img:nth-of-type(3),
.pp__vue:nth-of-type(4):checked ~ .pp__stage .pp__img:nth-of-type(4) { opacity: 1; transform: none; }
.pp__stage .pcard__seal { inset-block-start: 1.1rem; inset-inline-end: 1.1rem; inline-size: 3.6rem; block-size: 3.6rem; font-size: 1.15rem; z-index: 2; }

.pp__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-s); }
.pp__thumbs label {
  inline-size: 4.75rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: .4rem;
  border: 1px solid var(--ink-16);
  border-radius: var(--radius-s);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pp__thumbs img { inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pp__thumbs label:hover { border-color: var(--gold); }
.pp__vue:nth-of-type(1):checked ~ .pp__thumbs label:nth-of-type(1),
.pp__vue:nth-of-type(2):checked ~ .pp__thumbs label:nth-of-type(2),
.pp__vue:nth-of-type(3):checked ~ .pp__thumbs label:nth-of-type(3),
.pp__vue:nth-of-type(4):checked ~ .pp__thumbs label:nth-of-type(4) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pp__vue:nth-of-type(1):focus-visible ~ .pp__thumbs label:nth-of-type(1),
.pp__vue:nth-of-type(2):focus-visible ~ .pp__thumbs label:nth-of-type(2),
.pp__vue:nth-of-type(3):focus-visible ~ .pp__thumbs label:nth-of-type(3),
.pp__vue:nth-of-type(4):focus-visible ~ .pp__thumbs label:nth-of-type(4) { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Panneau d'informations */
.pp__info {
  padding: var(--space-m);
  border: 1px solid var(--ink-16);
  border-radius: var(--radius-l);
  background: var(--surface-raised);
  box-shadow: var(--shadow-s);
}
.pp__name {
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  margin-block: var(--space-2xs) var(--space-xs);
}
.pp__name--long { font-size: var(--step-3); line-height: 1.08; }
.pp__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--gold-deep);
  line-height: 1.4;
}
.pp__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: var(--space-s); }
.pp__chip {
  padding: .45em .9em;
  border: 1px solid var(--ink-16);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.pp__chip--gold { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-wash); }

.pp__buy { margin-block-start: var(--space-m); padding-block-start: var(--space-m); border-block-start: 1px solid var(--ink-08); }
.pp__price {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Formats : pastilles radio, et le prix qui suit la pastille cochée. */
.pp__formats { border: 0; margin: 0; padding: 0; }
.pp__formats legend { padding: 0; margin-block-end: var(--space-xs); font-family: var(--font-mono); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-55); }
.pp__fmt { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.pp__fmt-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.pp__fmt-list label {
  padding: .7em 1.1em;
  border: 1px solid var(--ink-24);
  border-radius: 999px;
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pp__fmt-list label:hover { border-color: var(--gold); }
.pp__prices { margin-block-start: var(--space-s); }
.pp__prices .pp__price { display: none; }
.pp__fmt:nth-of-type(1):checked ~ .pp__prices .pp__price:nth-of-type(1),
.pp__fmt:nth-of-type(2):checked ~ .pp__prices .pp__price:nth-of-type(2),
.pp__fmt:nth-of-type(3):checked ~ .pp__prices .pp__price:nth-of-type(3),
.pp__fmt:nth-of-type(4):checked ~ .pp__prices .pp__price:nth-of-type(4) { display: block; }
.pp__fmt:nth-of-type(1):checked ~ .pp__fmt-list label:nth-of-type(1),
.pp__fmt:nth-of-type(2):checked ~ .pp__fmt-list label:nth-of-type(2),
.pp__fmt:nth-of-type(3):checked ~ .pp__fmt-list label:nth-of-type(3),
.pp__fmt:nth-of-type(4):checked ~ .pp__fmt-list label:nth-of-type(4) { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-deep); }
.pp__fmt:nth-of-type(1):focus-visible ~ .pp__fmt-list label:nth-of-type(1),
.pp__fmt:nth-of-type(2):focus-visible ~ .pp__fmt-list label:nth-of-type(2),
.pp__fmt:nth-of-type(3):focus-visible ~ .pp__fmt-list label:nth-of-type(3),
.pp__fmt:nth-of-type(4):focus-visible ~ .pp__fmt-list label:nth-of-type(4) { outline: 2px solid var(--gold); outline-offset: 2px; }

.pp__ctas { display: flex; margin-block-start: var(--space-m); }
.pp__ask { margin-block-start: var(--space-s); font-size: var(--step--1); color: var(--ink-72); }
.btn--shop {
  flex: 1 1 12rem;
  text-align: center;
  border-radius: 999px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  letter-spacing: .02em;
}
.btn--shop:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

.pp__promises { display: grid; gap: .55rem; margin-block-start: var(--space-m); padding-block-start: var(--space-s); border-block-start: 1px solid var(--ink-08); }
.pp__promises li { display: flex; gap: .7em; align-items: baseline; font-size: var(--step--1); color: var(--ink-72); }
.pp__promises li::before { content: "✦"; color: var(--gold); font-size: .8em; }

/* Pyramide olfactive — une carte à part entière. Sur ordinateur elle se
   place sous la photo, ce qui équilibre les deux colonnes ; sur mobile elle
   suit le panneau d'achat, pour que le prix reste au premier écran.
   Les trois étages ont la même hauteur (`1fr`) quelle que soit la longueur
   de leurs notes, et s'élargissent à pas réguliers vers le fond.        */
@media (min-width: 60rem) {
  /* Zones nommées seulement quand la pyramide existe : sans le gabarit qui
     les définit, des `grid-area` orphelines superposeraient photo et carte. */
  .pp:has(> .pp__notes) { grid-template-areas: "media info" "notes notes"; }
  .pp:has(> .pp__notes) > .pp__media { grid-area: media; }
  .pp:has(> .pp__notes) > .pp__info { grid-area: info; }
  .pp > .pp__notes { grid-area: notes; }
  .pyramid ol { max-inline-size: 42rem; margin-inline: auto; }
}
.pyramid {
  padding: var(--space-m);
  border: 1px solid var(--ink-16);
  border-radius: var(--radius-l);
  background: var(--surface-raised);
  text-align: center;
}
.pyramid__title {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-55);
}
/* Sommet : un losange doré posé sur un filet, la pointe de la pyramide. */
.pyramid__title::after {
  content: "✦";
  display: block;
  margin-block-start: var(--space-xs);
  color: var(--gold);
  font-size: .9rem;
  line-height: 1;
}
.pyramid ol {
  display: grid;
  grid-auto-rows: 1fr;
  justify-items: center;
  gap: 6px;
  margin-block-start: var(--space-xs);
}
.pyramid li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  inline-size: var(--w);
  padding: .8rem clamp(.75rem, .4rem + 1.5vw, 1.25rem);
  border-radius: var(--radius-s);
  border: 1px solid rgba(182, 130, 53, .24);
  background: linear-gradient(90deg, rgba(182, 130, 53, .05), rgba(182, 130, 53, var(--a)), rgba(182, 130, 53, .05));
}
/* La densité de l'or augmente vers le fond : de la note la plus volatile à la plus tenace. */
.pyramid li:nth-child(1) { --w: 58%; --a: .10; }
.pyramid li:nth-child(2) { --w: 79%; --a: .15; }
.pyramid li:nth-child(3) { --w: 100%; --a: .21; }
.pyramid--dense ol,
.pyramid--prose ol { grid-auto-rows: auto; }
.pyramid--dense li:nth-child(1) { --w: 84%; }
.pyramid--dense li:nth-child(2) { --w: 92%; }
.pyramid--prose li:nth-child(n) { --w: 100%; }
.pyramid--prose .pyramid__notes { font-size: var(--step-0); line-height: 1.5; }
@media (width < 30rem) {
  .pyramid li:nth-child(1) { --w: 72%; }
  .pyramid li:nth-child(2) { --w: 86%; }
  .pyramid--dense li:nth-child(-n + 2),
  .pyramid--prose li:nth-child(-n + 2) { --w: 100%; }
}
.pyramid__tier {
  display: block;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.pyramid__notes {
  display: block;
  margin-block-start: .25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.3;
  text-wrap: balance;
}

/* --- Évolution sur la peau (frise) --------------------------------------
   Les notes racontées dans le temps plutôt qu'empilées : trois étapes sur une
   ligne qui fonce du doré clair au doré profond, des points qui grossissent —
   de la note la plus volatile à la plus tenace — et chaque note en pastille,
   lisible d'un coup d'œil. Horizontale dès 48rem, verticale en dessous.   */
.scent {
  padding: var(--space-m);
  border: 1px solid var(--ink-16);
  border-radius: var(--radius-l);
  background: var(--surface-raised);
}
.scent__head { display: grid; gap: var(--space-2xs); }
.scent__title {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.scent__intro { font-size: var(--step--1); color: var(--ink-72); }  /* une seule ligne dès que la largeur le permet */

.scent__steps {
  --line: linear-gradient(90deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  position: relative;
  display: grid;
  gap: var(--space-m);
  margin-block-start: var(--space-m);
}
/* Mobile : ligne verticale à gauche, étapes empilées. */
.scent__steps::before {
  content: "";
  position: absolute;
  inset-block: .6rem .6rem;
  inset-inline-start: calc(1.1rem / 2 - 1px);
  inline-size: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
}
.scent__step { position: relative; padding-inline-start: 2.2rem; }
.scent__dot {
  position: absolute;
  inset-block-start: .15rem;
  inset-inline-start: calc(1.1rem / 2 - var(--d) / 2);
  inline-size: var(--d);
  block-size: var(--d);
  border-radius: 50%;
  background: var(--surface-raised);
  border: 2px solid var(--c);
  box-shadow: 0 0 0 4px var(--surface-raised);
}
.scent__step:nth-child(1) { --d: .75rem; --c: var(--gold-light); }
.scent__step:nth-child(2) { --d: .95rem; --c: var(--gold); }
.scent__step:nth-child(3) { --d: 1.15rem; --c: var(--gold-deep); }
.scent__step:nth-child(3) .scent__dot { background: var(--gold-deep); }

.scent__when {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.2;
}
.scent__time {
  margin-block-start: .15rem;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.scent__notes { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: var(--space-xs); }
.scent__notes li {
  padding: .35em .85em;
  border: 1px solid rgba(182, 130, 53, .3);
  border-radius: 999px;
  background: rgba(182, 130, 53, .06);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  line-height: 1.3;
}
.scent__step:nth-child(3) .scent__notes li { background: rgba(182, 130, 53, .13); border-color: rgba(182, 130, 53, .45); }
.scent__prose {
  margin-block-start: var(--space-xs);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-72);
}

/* Dès 48rem : frise horizontale, la ligne court sous les points. */
@media (min-width: 48rem) {
  .scent__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
  .scent__steps::before {
    inset-block: auto;
    inset-block-start: calc(1.15rem / 2 - 1px);
    inset-inline: 0;
    inline-size: auto;
    block-size: 2px;
    background: var(--line);
  }
  .scent__step { padding-inline-start: 0; padding-block-start: 1.9rem; }
  .scent__dot { inset-block-start: calc(1.15rem / 2 - var(--d) / 2); inset-inline-start: 0; }
}

/* Histoire du produit + volets */
.pp-story { display: grid; gap: var(--space-l); }
@media (min-width: 60rem) {
  .pp-story { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
  /* Sans mode d'emploi ni ingrédients : le récit prend toute la largeur. */
  .pp-story--solo { grid-template-columns: minmax(0, 1fr); }
}
.pp-story__body { margin-block-start: var(--space-s); }
.pp-story__body > * + * { margin-block-start: var(--space-s); }
.pp-story__body h3 { font-size: var(--step-2); margin-block-start: var(--space-m); }
.pp-story__body ul, .pp-story__body ol { list-style: disc; padding-inline-start: 1.2em; }
.pp-story__body li + li { margin-block-start: var(--space-2xs); }
.pp-story__body > p:first-of-type { font-size: var(--step-1); line-height: 1.8; }
.pp-story__body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: .8;
  float: inline-start;
  margin: .08em .18em 0 0;
  color: var(--gold-deep);
}
.pp-details { border-block-start: 1px solid var(--ink-24); }

/* « Lire la suite » : le récit long est replié, un fondu indique la suite. */
.pp-more__toggle { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.pp-more { max-block-size: 24rem; overflow: hidden; mask-image: linear-gradient(#000 65%, transparent); }
.pp-more__toggle:checked ~ .pp-more { max-block-size: none; mask-image: none; }
.pp-more__btn {
  display: inline-flex;
  margin-block-start: var(--space-s);
  padding: .7em 1.3em;
  border: 1px solid var(--ink-24);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.pp-more__btn:hover { border-color: var(--gold); }
.pp-more__toggle:focus-visible ~ .pp-more__btn { outline: 2px solid var(--gold); outline-offset: 3px; }
.pp-more__close,
.pp-more__toggle:checked ~ .pp-more__btn .pp-more__open { display: none; }
.pp-more__toggle:checked ~ .pp-more__btn .pp-more__close { display: inline; }

/* Un bouton de commande par format : seul celui du format coché s'affiche,
   dans le panneau comme dans la barre mobile. */
.pp__formats .pp__cta,
.pp__formats .pp__bar-price { display: none; }
.pp__fmt:nth-of-type(1):checked ~ .pp__ctas .pp__cta:nth-of-type(1),
.pp__fmt:nth-of-type(2):checked ~ .pp__ctas .pp__cta:nth-of-type(2),
.pp__fmt:nth-of-type(3):checked ~ .pp__ctas .pp__cta:nth-of-type(3),
.pp__fmt:nth-of-type(4):checked ~ .pp__ctas .pp__cta:nth-of-type(4),
.pp__fmt:nth-of-type(1):checked ~ .pp__bar .pp__cta:nth-of-type(1),
.pp__fmt:nth-of-type(2):checked ~ .pp__bar .pp__cta:nth-of-type(2),
.pp__fmt:nth-of-type(3):checked ~ .pp__bar .pp__cta:nth-of-type(3),
.pp__fmt:nth-of-type(4):checked ~ .pp__bar .pp__cta:nth-of-type(4) { display: block; }
.pp__fmt:nth-of-type(1):checked ~ .pp__bar .pp__bar-price:nth-of-type(1),
.pp__fmt:nth-of-type(2):checked ~ .pp__bar .pp__bar-price:nth-of-type(2),
.pp__fmt:nth-of-type(3):checked ~ .pp__bar .pp__bar-price:nth-of-type(3),
.pp__fmt:nth-of-type(4):checked ~ .pp__bar .pp__bar-price:nth-of-type(4) { display: inline; }

/* Barre d'achat fixe, mobile et tablette : le prix et le bouton restent à
   portée de pouce pendant la lecture. Sur ordinateur, le panneau collant
   joue déjà ce rôle. */
.pp__bar { display: none; }
@media (width < 60rem) {
  body:has(.pp__bar) { padding-block-end: 5rem; }
  .pp__bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(12px);
    border-block-start: 1px solid var(--ink-16);
    box-shadow: 0 -8px 24px rgba(45, 35, 25, .08);
  }
  .pp__bar-info { display: flex; flex-direction: column; min-inline-size: 0; flex: 1; line-height: 1.2; }
  .pp__bar-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pp__bar-price { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
  .pp__bar .pp__cta { flex: 0 0 auto; padding: .8em 1.2em; font-size: var(--step--1); }
}

.pp-details .faq__answer { max-inline-size: none; font-size: var(--step--1); }

/* Rail des produits voisins : défilement horizontal aimanté. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(12.5rem, calc((100% - 3 * var(--space-m)) / 4));
  gap: var(--space-m);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-block: var(--space-xs) var(--space-m);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}
.rail > li { scroll-snap-align: start; }

/* --- Page Beauté : carrousel de la collection Luxe --------------------------
   Sans script. Quatre diapositives empilées dans la même cellule de grille :
   - défilement automatique : une animation de 24 s (6 s par parfum) décalée
     d'une diapositive à l'autre, en pause au survol ou au focus ;
   - navigation : points et flèches sont des labels de boutons radio. Cocher un
     radio coupe l'animation et affiche la diapositive choisie ;
   - mouvement réduit : pas de défilement, la première diapositive s'affiche
     et la navigation manuelle reste disponible.
   Les flacons sont des PNG détourés, posés dans le halo de leur couleur.   */
/* Presque bord à bord : une fine marge garde les coins arrondis visibles. */
.hc-wrap { padding: var(--space-s) clamp(.6rem, .2rem + 1.2vw, 1.5rem) 0; }
.hc {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-l);
  background: #14110f;
  color: #f3ece2;
}
.hc__r { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.hc__slides { display: grid; }
.hc__slide {
  --glow: color-mix(in srgb, var(--halo) 58%, transparent);
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-m) 6.5rem;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(55% 65% at 50% 32%, var(--glow), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, color-mix(in srgb, var(--halo) 16%, transparent), transparent 70%),
    #14110f;
}
.hc__slide:first-child { opacity: 1; visibility: visible; }

.hc__visual { position: relative; display: grid; place-items: center; min-block-size: 17rem; }
.hc__num {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(9rem, 5rem + 18vw, 22rem);
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--halo) 60%, #fff);
  opacity: .5;
  pointer-events: none;
}

.hc__photo {
  position: relative;
  inline-size: min(100%, 22rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-l);
  outline: 1px solid color-mix(in srgb, var(--halo) 55%, #fff);
  outline-offset: 10px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 90px color-mix(in srgb, var(--halo) 35%, transparent);
}
.hc__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hc__sub { margin-block-start: -.4rem; margin-block-end: var(--space-s); font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: color-mix(in srgb, var(--halo) 45%, #f3ece2); }

.hc__kicker {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.hc__name {
  margin-block: var(--space-xs) var(--space-s);
  font-size: clamp(2.8rem, 1.6rem + 5vw, 6.2rem);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.035em;
  color: #fbf6ef;
}
.hc__desc { max-inline-size: 46ch; font-size: var(--step-0); line-height: 1.7; color: rgba(243, 236, 226, .74); }
.hc__notes { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: var(--space-s); }
.hc__notes li {
  padding: .35em .9em;
  border: 1px solid rgba(243, 236, 226, .22);
  border-radius: 999px;
  background: rgba(243, 236, 226, .06);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
}
.hc__price { margin-block-start: var(--space-m); display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; }
.hc__price > span:first-child { font-family: var(--font-display); font-size: var(--step-3); font-variant-numeric: tabular-nums; }
.hc__size { font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 236, 226, .55); }
.hc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); margin-block-start: var(--space-s); }
.hc__cta {
  border-radius: 999px;
  padding-inline: 2.2em;
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #1b1712;
}
.hc__cta:hover { background: #fbf6ef; border-color: #fbf6ef; color: #1b1712; }
.hc__link { color: #f3ece2; font-size: var(--step--1); text-underline-offset: .3em; }
.hc__link:hover { color: var(--gold-light); }

/* Flèches (dans chaque diapositive : elles pointent vers ses voisines). */
.hc__arrows { position: absolute; inset-block-end: 1.4rem; inset-inline-end: var(--space-m); display: flex; gap: .5rem; z-index: 2; }
.hc__arrow {
  display: grid;
  place-items: center;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  border: 1px solid rgba(243, 236, 226, .3);
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hc__arrow:hover { background: #f3ece2; border-color: #f3ece2; color: #14110f; }

/* Points : numéro, nom et barre de progression. */
.hc__dots { position: absolute; inset-block-end: 1.4rem; inset-inline-start: var(--space-m); display: flex; gap: .6rem; z-index: 2; }
.hc__dot {
  display: grid;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(243, 236, 226, .6);
  cursor: pointer;
}
.hc__dot:hover { color: #f3ece2; }
.hc__dot-name { display: none; }
.hc__bar { position: relative; display: block; inline-size: 1.6rem; block-size: 2px; background: rgba(243, 236, 226, .2); overflow: hidden; }
.hc__bar::after { content: ""; position: absolute; inset: 0; background: var(--gold-light); transform: scaleX(0); transform-origin: left; }
.hc__dots .hc__dot:first-child .hc__bar::after { transform: scaleX(1); }

/* Navigation manuelle : un radio coché coupe le défilement. */
.hc__r:checked ~ .hc__slides .hc__slide { animation: none; opacity: 0; visibility: hidden; }
.hc__r:checked ~ .hc__dots .hc__bar::after { animation: none; transform: scaleX(0); }
/* Mobile : 7 points sur toute la largeur, flèches au-dessus. */
@media (width < 60rem) {
  .hc__slide { padding-block-end: 8.5rem; }
  .hc__arrows { inset-block-end: 3.6rem; }
}

/* carrousel:debut — bloc écrit par tools/generer_boutique.py, ne pas modifier à la main */
.hc__slide:nth-child(1) { --halo: #d8467f; }
.hc__slide:nth-child(2) { --halo: #d9763a; }
.hc__slide:nth-child(3) { --halo: #2f8fd0; }
.hc__slide:nth-child(4) { --halo: #4caf3a; }
.hc__slide:nth-child(5) { --halo: #d8c21e; }
.hc__slide:nth-child(6) { --halo: #e0782a; }
.hc__slide:nth-child(7) { --halo: #8a6a45; }
.hc__r:nth-of-type(1):checked ~ .hc__slides .hc__slide:nth-child(1),
.hc__r:nth-of-type(2):checked ~ .hc__slides .hc__slide:nth-child(2),
.hc__r:nth-of-type(3):checked ~ .hc__slides .hc__slide:nth-child(3),
.hc__r:nth-of-type(4):checked ~ .hc__slides .hc__slide:nth-child(4),
.hc__r:nth-of-type(5):checked ~ .hc__slides .hc__slide:nth-child(5),
.hc__r:nth-of-type(6):checked ~ .hc__slides .hc__slide:nth-child(6),
.hc__r:nth-of-type(7):checked ~ .hc__slides .hc__slide:nth-child(7) { opacity: 1; visibility: visible; }
.hc__r:nth-of-type(1):checked ~ .hc__dots .hc__dot:nth-child(1),
.hc__r:nth-of-type(2):checked ~ .hc__dots .hc__dot:nth-child(2),
.hc__r:nth-of-type(3):checked ~ .hc__dots .hc__dot:nth-child(3),
.hc__r:nth-of-type(4):checked ~ .hc__dots .hc__dot:nth-child(4),
.hc__r:nth-of-type(5):checked ~ .hc__dots .hc__dot:nth-child(5),
.hc__r:nth-of-type(6):checked ~ .hc__dots .hc__dot:nth-child(6),
.hc__r:nth-of-type(7):checked ~ .hc__dots .hc__dot:nth-child(7) { color: #f3ece2; }
.hc__r:nth-of-type(1):checked ~ .hc__dots .hc__dot:nth-child(1) .hc__bar::after,
.hc__r:nth-of-type(2):checked ~ .hc__dots .hc__dot:nth-child(2) .hc__bar::after,
.hc__r:nth-of-type(3):checked ~ .hc__dots .hc__dot:nth-child(3) .hc__bar::after,
.hc__r:nth-of-type(4):checked ~ .hc__dots .hc__dot:nth-child(4) .hc__bar::after,
.hc__r:nth-of-type(5):checked ~ .hc__dots .hc__dot:nth-child(5) .hc__bar::after,
.hc__r:nth-of-type(6):checked ~ .hc__dots .hc__dot:nth-child(6) .hc__bar::after,
.hc__r:nth-of-type(7):checked ~ .hc__dots .hc__dot:nth-child(7) .hc__bar::after { transform: scaleX(1); }
.hc__r:nth-of-type(1):focus-visible ~ .hc__dots .hc__dot:nth-child(1),
.hc__r:nth-of-type(2):focus-visible ~ .hc__dots .hc__dot:nth-child(2),
.hc__r:nth-of-type(3):focus-visible ~ .hc__dots .hc__dot:nth-child(3),
.hc__r:nth-of-type(4):focus-visible ~ .hc__dots .hc__dot:nth-child(4),
.hc__r:nth-of-type(5):focus-visible ~ .hc__dots .hc__dot:nth-child(5),
.hc__r:nth-of-type(6):focus-visible ~ .hc__dots .hc__dot:nth-child(6),
.hc__r:nth-of-type(7):focus-visible ~ .hc__dots .hc__dot:nth-child(7) { outline: 2px solid var(--gold-light); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  /* 7 diapositives × 6 s = 42 s par tour ; -0,75 s pour que la première soit déjà visible. */
  .hc__slide { animation: hc-show 42s linear infinite both; }
  .hc__bar::after { animation: hc-bar 42s linear infinite both; }
  .hc__slide:nth-child(1), .hc__dot:nth-child(1) .hc__bar::after { animation-delay: -0.75s; }
  .hc__slide:nth-child(2), .hc__dot:nth-child(2) .hc__bar::after { animation-delay: 5.25s; }
  .hc__slide:nth-child(3), .hc__dot:nth-child(3) .hc__bar::after { animation-delay: 11.25s; }
  .hc__slide:nth-child(4), .hc__dot:nth-child(4) .hc__bar::after { animation-delay: 17.25s; }
  .hc__slide:nth-child(5), .hc__dot:nth-child(5) .hc__bar::after { animation-delay: 23.25s; }
  .hc__slide:nth-child(6), .hc__dot:nth-child(6) .hc__bar::after { animation-delay: 29.25s; }
  .hc__slide:nth-child(7), .hc__dot:nth-child(7) .hc__bar::after { animation-delay: 35.25s; }
  .hc:hover .hc__slide, .hc:focus-within .hc__slide,
  .hc:hover .hc__bar::after, .hc:focus-within .hc__bar::after { animation-play-state: paused; }
  .hc__photo { animation: hc-float 6s ease-in-out infinite; }
}
@keyframes hc-show  { 0% { opacity: 0; visibility: hidden; } 1.71%, 14.29% { opacity: 1; visibility: visible; } 16.00%, 100% { opacity: 0; visibility: hidden; } }
@keyframes hc-bar   { 0% { transform: scaleX(0); } 14.29% { transform: scaleX(1); } 14.30%, 100% { transform: scaleX(0); } }
@keyframes hc-float { 50% { transform: translateY(-8px); } }
/* carrousel:fin */

@media (min-width: 60rem) {
  .hc__slide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-block-size: clamp(34rem, 74vh, 48rem);
    /* Sur très grand écran, le contenu reste composé dans 100rem au centre. */
    padding: var(--space-l) max(var(--space-xl), (100% - 100rem) / 2) 6rem;
    background:
      radial-gradient(45% 70% at 74% 50%, var(--glow), transparent 70%),
      radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--halo) 14%, transparent), transparent 70%),
      #14110f;
  }
  .hc__visual { order: 2; min-block-size: 100%; }
  .hc__dot-name { display: inline; }
  .hc__bar { inline-size: 3.6rem; }
  .hc__dots { gap: var(--space-s); }
  .hc__dots { inset-inline-start: max(var(--space-xl), (100% - 100rem) / 2); }
  .hc__arrows { inset-inline-end: max(var(--space-xl), (100% - 100rem) / 2); }
}

/* ---------- 16. Site personnel (accueil « 5a ») ----------
   Palette papier, plus chaude que le reste du site, et trois composants
   interactifs construits sur des contrôles de formulaire natifs plutôt que
   sur du script : onglets en boutons radio, grille en cases à cocher,
   compteur en compteur CSS. Tout fonctionne sans JavaScript.            */

.t-paper {
  --paper: #e7e3da;
  --paper-raised: #f4f1ea;
  --night-deep: #171512;
  --night-warm: #efe9df;

  --surface: var(--paper);
  --surface-page: var(--paper);
  --surface-raised: var(--paper-raised);
  --plate-frame: var(--paper-raised);
  --shell-max: 82.5rem;
}

/* Trame diagonale qui dérive très lentement. `scroll` plutôt que `fixed` :
   l'attachement fixe provoque des à-coups sur iOS et coûte un repaint
   plein écran à chaque frame. */
.t-paper body,
.t-cream body {
  background-image:
    repeating-linear-gradient(45deg, rgba(182, 130, 53, .06) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-45deg, rgba(182, 130, 53, .06) 0 1px, transparent 1px 30px),
    radial-gradient(circle at 50% 0, rgba(182, 130, 53, .05), transparent 60%);
  background-size: auto, auto, 100% 900px;
  background-attachment: scroll;
  background-repeat: repeat, repeat, no-repeat;
  animation: drift 90s linear infinite;
}
@keyframes drift {
  from { background-position: 0 0, 0 0, 50% 0; }
  to   { background-position: 424px 424px, -424px 424px, 50% 0; }
}

.t-paper .page-body > main,
.t-cream .page-body > main { background: transparent; }
.t-paper .site-header,
.t-paper .rule,
.t-paper .rule-b { border-color: var(--ink-24); }

/* --- Une personnelle ----------------------------------------------------- */
.masthead { display: grid; border-block-end: 1px solid var(--ink-24); }
@media (min-width: 62rem) {
  .masthead {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: stretch;
  }
  .masthead__figure { border-inline-start: 1px solid var(--ink-24); }
}
.masthead__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(2.5rem, 1rem + 6vw, 4.5rem);
  padding-inline: var(--gutter);
}
@media (min-width: 62rem) {
  .masthead__text { padding-inline-end: var(--space-l); }
}
/* Le nom occupe toute la largeur disponible sans jamais déborder :
   la taille se cale sur le conteneur, pas sur une valeur en pixels. */
.masthead__name {
  font-size: clamp(3.5rem, 1rem + 12vw, 9.375rem);
  line-height: .9;
  letter-spacing: -.03em;
}
.masthead__figure { position: relative; min-block-size: 20rem; }
.masthead__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-3);
  color: var(--gold-deep);
  line-height: 1.15;
}
/* Phrase de clôture d'un univers : même voix que la signature, un cran plus bas. */
.signature--s { font-size: var(--step-2); line-height: 1.3; }

/* --- Bandeau de chiffres ------------------------------------------------- */
/* Nombre de colonnes explicite plutôt qu'`auto-fit` : les filets de
   séparation dépendent de la position dans la grille, et il faut donc
   savoir où sont les débuts de ligne. */
.statbar {
  display: grid;
  grid-template-columns: 1fr;
  border-block-end: 1px solid var(--ink-24);
}
@media (min-width: 34rem) { .statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .statbar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Colonne centrée : le chiffre au-dessus, le libellé dessous, l'ensemble
   aligné sur l'axe de la colonne. `gap` remplace la marge — les enfants
   sont des <span>, et une marge de bloc n'a aucun effet sur de l'inline. */
.statbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: var(--space-xs);
  padding: var(--space-m) var(--space-s);
  border-block-start: 1px solid var(--ink-16);
}
/* Les filets sautent en début de ligne et sur la première rangée — mais
   jamais le rembourrage : un rembourrage inégal décalerait le centre d'une
   colonne par rapport aux autres, et les chiffres cesseraient d'être
   alignés entre eux. C'est précisément ce qu'on veut éviter. */
.statbar__item:first-child { border-block-start: 0; }

@media (min-width: 34rem) {
  .statbar__item:nth-child(-n + 2) { border-block-start: 0; }
  .statbar__item:not(:nth-child(2n + 1)) { border-inline-start: 1px solid var(--ink-16); }
}
@media (min-width: 52rem) {
  .statbar__item { border-block-start: 0; }
  .statbar__item:not(:first-child) { border-inline-start: 1px solid var(--ink-16); }
}

.statbar__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-weight: 300;
}
.statbar__label {
  display: block;
  max-inline-size: 16ch;
  font-family: var(--font-mono);
  font-size: .625rem;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-40);
}

/* --- Lettrine ------------------------------------------------------------ */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 4.2em;
  line-height: .72;
  float: inline-start;
  margin: .1em .22em 0 0;
  color: var(--gold-deep);
}

/* --- Rangées de liste ---------------------------------------------------- */
.rows { border-block-start: 1px solid var(--ink-24); }
.row-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-s);
  align-items: baseline;
  padding: var(--space-s) var(--space-2xs);
  border-block-end: 1px solid var(--ink-16);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              padding-inline-start var(--dur-fast) var(--ease);
}
.row-item:hover,
.row-item:focus-visible { background: var(--gold-wash); padding-inline-start: var(--space-s); color: inherit; }
.row-item__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 300; }
.row-item__meta {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-40);
}
.row-item--numbered { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
.row-item__num { font-family: var(--font-display); font-size: var(--step-2); color: var(--gold); font-variant-numeric: tabular-nums; }
.row-item__name { display: block; }
.row-item__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-block-start: var(--space-2xs);
}
.row-item__arrow { color: var(--gold); font-size: 1.1rem; transition: transform var(--dur-fast) var(--ease); }
.row-item:hover .row-item__arrow { transform: translateX(10px); }

/* --- Le carnet : onglets en boutons radio --------------------------------
   Les boutons radio précèdent la mise en page : le combinateur `~` permet
   à l'onglet coché de révéler son panneau, sans script et sans `:has()`. */
.needs { border: 0; margin-inline: 0;  /* pas `margin: 0` : il annulait les utilitaires mt-* posées dans le HTML */ padding: 0; }
.needs > legend {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding: 0;
  margin-block-end: var(--space-s);
}
.needs > input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.needs__layout { display: grid; gap: var(--space-m); }
@media (min-width: 64rem) {
  .needs__layout {
    grid-template-columns: 14.375rem minmax(0, 1fr) minmax(0, .75fr);
    gap: 0;
    align-items: stretch;
  }
  .needs__list { padding-inline-end: var(--space-m); }
  .needs__panels {
    border-inline: 1px solid var(--ink-24);
    padding-inline: var(--space-m);
  }
  .needs__figure { padding-inline-start: var(--space-m); }
}
.needs__list { display: flex; flex-direction: column; gap: .625rem; }
.needs__list label {
  display: block;
  padding: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  color: var(--ink-72);
  border: 1px solid var(--ink-24);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.needs__list label:hover { border-color: var(--gold); color: var(--gold-deep); }
.needs__panel { display: none; }
.needs__panel h3 { font-size: var(--step-4); }
.needs__steps { border-block-start: 1px solid var(--ink-16); margin-block-start: var(--space-m); }
.needs__step {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--space-s);
  align-items: baseline;
  padding-block: var(--space-s);
  border-block-end: 1px solid var(--ink-16);
}
.needs__step-num { font-family: var(--font-display); font-size: var(--step-1); color: var(--gold); font-variant-numeric: tabular-nums; }

/* Un onglet actif par bouton radio coché. */
#need-a:checked ~ .needs__layout .needs__list label[for="need-a"],
#need-b:checked ~ .needs__layout .needs__list label[for="need-b"],
#need-c:checked ~ .needs__layout .needs__list label[for="need-c"] {
  border-color: var(--gold);
  background: rgba(182, 130, 53, .12);
  color: var(--gold-deep);
}
#need-a:focus-visible ~ .needs__layout .needs__list label[for="need-a"],
#need-b:focus-visible ~ .needs__layout .needs__list label[for="need-b"],
#need-c:focus-visible ~ .needs__layout .needs__list label[for="need-c"] {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
#need-a:checked ~ .needs__layout .needs__panel--a,
#need-b:checked ~ .needs__layout .needs__panel--b,
#need-c:checked ~ .needs__layout .needs__panel--c { display: block; }

/* --- Parcours : bloc sombre chaud ---------------------------------------- */
.deep { background: var(--night-deep); color: var(--night-warm); }
.deep h2, .deep h3 { color: var(--night-warm); }
.deep p { color: rgba(239, 233, 223, .78); }
.deep .kicker { color: rgba(239, 233, 223, .4); }
.deep .dropcap::first-letter { color: var(--gold-light); }

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  border-block-start: 1px solid rgba(239, 233, 223, .22);
  margin-block-start: var(--space-l);
}
.timeline__item { padding: var(--space-m) var(--space-s) 0; border-inline-start: 1px solid rgba(239, 233, 223, .14); }
.timeline__item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.timeline__year { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }
.timeline__event { font-family: var(--font-display); font-size: var(--step-2); font-weight: 300; margin-block-start: var(--space-xs); }

.watermark__letter {
  position: absolute;
  inset-inline-end: var(--space-m);
  inset-block-end: -.32em;
  font-family: var(--font-display);
  font-size: clamp(9rem, 4rem + 20vw, 17.5rem);
  line-height: .7;
  color: rgba(182, 130, 53, .14);
  pointer-events: none;
  user-select: none;
}

/* --- Témoignages en trois colonnes --------------------------------------- */
.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  border-block-end: 1px solid var(--ink-24);
}
.voices__item { padding: var(--space-l) var(--space-m); border-inline-start: 1px solid var(--ink-16); }
.voices__item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.voices blockquote {
  margin: var(--space-s) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
}
.voices figcaption {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-block-start: var(--space-s);
}

/* ---------- 17. Animations ----------
   Trois garde-fous, dans cet ordre :

   1. `@media (prefers-reduced-motion: no-preference)` — rien ne bouge pour
      qui a demandé que rien ne bouge.
   2. `@supports (animation-timeline: view())` — l'état initial `opacity:0`
      n'est posé QUE si le navigateur sait déclencher l'animation au défilement.
      Sans ce garde-fou, un navigateur sans support laisserait le contenu
      invisible pour toujours. C'est le seul vrai danger de ce fichier.
   3. `animation-fill-mode: both` + une plage `entry` — un élément déjà visible
      au chargement est au-delà de la plage, donc affiché.

   Tout n'anime que `opacity` et `transform` : les deux seules propriétés que
   le compositeur traite sans recalculer la mise en page.                  */

@keyframes rise      { from { opacity: 0; transform: translateY(1.25rem); } }
@keyframes rise-far  { from { opacity: 0; transform: translateY(2.5rem); } }
@keyframes fade      { from { opacity: 0; } }
@keyframes slide-in  { from { opacity: 0; transform: translateX(-1.5rem); } }
@keyframes zoom-out  { from { transform: scale(1.08); } }
@keyframes draw      { from { transform: scaleX(0); } }
@keyframes drift-up  { to   { transform: translateY(-3rem); } }
/* `visibility` aussi : invisible, la barre ne doit pas intercepter les clics. */
@keyframes bar-in    { from { opacity: 0; transform: translateY(100%); visibility: hidden; } }

@media (prefers-reduced-motion: no-preference) {

  /* --- Au chargement : ce qui est déjà à l'écran ------------------------
     Animations temporelles, donc sans dépendance au support du défilement :
     elles se jouent toujours, et ne peuvent pas laisser le contenu caché. */

  .site-header { animation: fade .8s var(--ease) both; }
  .menu-toggle:checked ~ .site-header__menu { animation: fade .3s var(--ease) both; }

  .masthead__name    { animation: rise .9s var(--ease) both; }
  .masthead .signature { animation: rise .9s .1s var(--ease) both; }
  .masthead__text hr { animation: draw .8s .2s var(--ease) both; transform-origin: left center; }
  .masthead__text .lede { animation: rise .9s .28s var(--ease) both; }
  .masthead__text .cluster { animation: rise .9s .38s var(--ease) both; }
  .masthead__figure img { animation: zoom-out 1.6s var(--ease) both; }

  /* --- Au défilement ---------------------------------------------------- */

  @supports (animation-timeline: view()) {

    /* Blocs de section : titre, chapô, média. */
    .section > .kicker,
    .section > .title,
    .section > .subtitle,
    .section > .lede,
    .section > .prose,
    .section > .todo,
    .section > .note,
    .split > *,
    .statbar,
    .voices,
    .timeline,
    .rows,
    .needs {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }

    /* Deux familles, et la distinction n'est pas cosmétique.

       (a) Blocs autonomes — cartes de grille, cartes de l'éventail. Ils
           peuvent monter en décalé : rien ne les relie visuellement.

       (b) Groupes tenus par un filet continu — bandeau de chiffres, frise,
           témoignages, étapes, rangées de liste. Ceux-là ne doivent JAMAIS
           se déplacer en décalé : un `translateY` différent d'un élément à
           l'autre casse l'alignement et brise le filet qui les relie. Le
           bandeau de chiffres en est l'exemple exact — quatre nombres à
           quatre hauteurs pendant toute la durée de l'entrée.
           Ils ne varient donc qu'en opacité. */

    .grid > *,
    .fan__card {
      animation: rise-far linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
    .grid > :nth-child(2), .fan__card:nth-child(2) { animation-range: entry 0% cover 27%; }
    .grid > :nth-child(3), .fan__card:nth-child(3) { animation-range: entry 0% cover 34%; }
    .grid > :nth-child(4) { animation-range: entry 0% cover 41%; }

    .statbar__item,
    .voices__item,
    .timeline__item,
    .steps > *,
    .needs__step,
    .index-row,
    .row-item {
      animation: fade linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
    .statbar__item:nth-child(2),
    .voices__item:nth-child(2),
    .timeline__item:nth-child(2),
    .steps > :nth-child(2),
    .needs__step:nth-child(2),
    .index-row:nth-child(2),
    .row-item:nth-child(2) { animation-range: entry 0% cover 24%; }

    .statbar__item:nth-child(3),
    .voices__item:nth-child(3),
    .timeline__item:nth-child(3),
    .steps > :nth-child(3),
    .needs__step:nth-child(3),
    .index-row:nth-child(3),
    .row-item:nth-child(3) { animation-range: entry 0% cover 30%; }

    .statbar__item:nth-child(4),
    .steps > :nth-child(4),
    .row-item:nth-child(4) { animation-range: entry 0% cover 36%; }

    /* Images : très léger dézoom pendant l'entrée. */
    .plate img {
      animation: zoom-out linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }

    /* Filets qui se tracent. */
    .section > hr {
      animation: draw .6s linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 25%;
      transform-origin: left center;
    }

  }


  @supports (animation-timeline: view()) {
    /* La barre d'achat mobile n'entre qu'une fois le panneau d'achat dépassé. */
    .pp__bar {
      animation: bar-in linear both;
      animation-timeline: scroll(root);
      animation-range: 0 60vh;
    }

    /* Le M du parcours dérive doucement sur toute la traversée du bloc. */
    .watermark__letter {
      animation: drift-up linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* --- Micro-interactions (sans dépendance au défilement) ------------------ */

.site-nav a { position: relative; }
.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  block-size: 1px;
  inline-size: 0;
  background: var(--gold);
  transition: inline-size var(--dur-fast) var(--ease);
}
.site-nav a:hover::after { inline-size: 100%; }
.site-nav a[aria-current="page"]::after { inline-size: 0; }

.site-footer a { transition: color var(--dur-fast) var(--ease), padding-inline-start var(--dur-fast) var(--ease); }
.site-footer a:hover { padding-inline-start: .3rem; }


.statbar__item { transition: background var(--dur-fast) var(--ease); }
.statbar__item:hover { background: var(--gold-wash); }

.voices__item { transition: background var(--dur-fast) var(--ease); }
.voices__item:hover { background: var(--gold-wash); }

.timeline__item { transition: transform var(--dur) var(--ease); }
.timeline__item:hover { transform: translateY(-.25rem); }



.faq summary { transition: color var(--dur-fast) var(--ease); }
.faq summary:hover { color: var(--gold-deep); }
.faq summary::after { transition: transform var(--dur-fast) var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); }

.card__title,
.fan__title { transition: color var(--dur-fast) var(--ease); }
.fan__card:hover .fan__title { color: var(--gold-deep); }

/* ---------- 13. Préférences utilisateur & impression ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .t-paper body,
  .t-cream body { animation: none; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
    scroll-behavior: auto;
  }
  .fan__card:nth-child(1),
  .fan__card:nth-child(2),
  .fan__card:nth-child(3) { transform: none; }
  .fan__card:hover,
  .fan__card:focus-visible { transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --ink-72: rgba(32, 31, 29, .88);
    --ink-55: rgba(32, 31, 29, .75);
    --ink-24: rgba(32, 31, 29, .45);
    --ink-16: rgba(32, 31, 29, .35);
  }
}

@media print {
  .site-header, .site-footer, .skip-link, .ribbon { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .page-body > main { max-inline-size: none; }
  .fan__card { transform: none; box-shadow: none; break-inside: avoid; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  a[href^="#"]::after { content: ""; }
}