/* =========================================================
   H&C Executive Education — maquette, hero v4
   Inspiré du hero « Advisory » (Staticmania), poussé vers une scène de
   théâtre : intro blanche épinglée façon affiche (« H&C » puis
   « Executive Education » en très grand — l'ombre portée du titre sur un
   mur qu'un projecteur suspendu éclaire, nette près de la lampe, floue et
   plus claire en s'éloignant, d'après l'affiche IKEA « Stop destroying
   your eyesight »), puis le rideau
   bleu nuit remonte (au défilement) par-dessus, plein cadre ; un projecteur s'allume et
   cherche sur le rideau (le texte en bas, le coin droit) avant de trouver
   le centre, où le dirigeant détouré apparaît ; la lumière suit ensuite
   le pointeur (et le dirigeant se retrouve dans l'ombre quand elle
   s'en éloigne) ;
   nav flottante en verre, accroche en bas à gauche, filet puis preuve
   sociale. Touche H&C : bleu nuit + jaune de la charte, Barlow.
   Page autonome : v1 (hero-v1.html), v2 (index.html) et v3 restent intactes.
   ========================================================= */

/* Puissance du projecteur (0 éteint → 1 allumé) : animée à l'allumage ;
   enregistrée pour être interpolée. */
@property --lit {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
/* Mise au point de l'ombre du titre (0 floue et absente → 1 nette). */
@property --focus {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
/* Rotation de la tête du projecteur vers le pointeur (0 = au repos). */
@property --aim {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

/* ---------- Police : Barlow, hébergée avec le site (sous-ensemble latin,
   le seul que la page utilise ; licence SIL OFL). ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/barlow-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/barlow-300-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens (mêmes couleurs et police que les autres versions) ---------- */
:root {
  --ink: #16213d;          /* bleu nuit : texte sur jaune */
  --night: #0b1626;        /* bas de la scène, fond de page */
  --gold: #e2ae0c;
  --gold-strong: #f0bf24;
  --paper: #ffffff;
  --muted: rgb(255 255 255 / 0.68);
  --faint: rgb(255 255 255 / 0.5);
  --line: rgb(255 255 255 / 0.14);

  --glass: rgb(12 22 40 / 0.42);
  --glass-line: rgb(255 255 255 / 0.14);
  --glass-blur: blur(16px) saturate(1.4);

  --font: "Barlow", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --peek: 38svh;           /* part de la hero visible sous l'intro au chargement */

  --pad-x: clamp(20px, 6vw, 104px);
  --pad-top: clamp(16px, 3.2vh, 32px);
  --pad-bottom: clamp(20px, 3.6vh, 40px);

  /* Scène : position du dirigeant (en % du cadre) et du projecteur */
  --subject-x: 53%;
  --subject-top: 11%;
  --subject-h: 73%;
  --px: 0;                 /* parallaxe pointeur, -1 → 1 */
  --py: 0;
  --lx: 53vw;              /* projecteur, en px depuis le coin haut gauche */
  --ly: 30vh;

  /* Affiche : le mur et la lentille du projecteur suspendu (px posés par le JS) */
  --wall: #e4e8ef;
  --lamp-x: 64%;
  --lamp-y: 12%;
  --lamp-dx: 0px;
  --lamp-dy: 0px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);      /* la toile reste blanche (rebond en haut de page) */
  scroll-snap-type: y proximity; /* on se cale sur la hero quand on en est proche */
}
/* La hero une fois affichée, le snap a fait son travail (amener le visiteur
   jusqu'à elle) : il ne doit plus retenir la page quand on descend vers S2. */
html.is-shown { scroll-snap-type: none; }
/* Défilement doux (JS) : la page est déplacée image par image, ce que le snap
   aimanterait à chaque pas ; le JS fait lui-même le calage sur la hero. */
html.has-glide { scroll-snap-type: none; }
/* Lenis (smooth.js) : règles de la bibliothèque (lenis.css). La page garde sa
   hauteur, un bloc marqué `data-lenis-prevent` garde sa molette, et un iframe
   ne vole pas la molette pendant le glissé. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--paper);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
p, h1 { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

/* =========================================================
   Intro : page blanche épinglée sous la hero
   ========================================================= */
.intro {
  position: sticky;
  top: 0;
  z-index: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100svh;
  /* le bas (--peek) est caché par la carte : le titre se centre dans la partie visible */
  padding: var(--pad-top) var(--pad-x) var(--peek);
  color: var(--ink);
  background: var(--wall);
  scroll-snap-align: start;
  overflow: hidden;
}
/* Le faisceau sur le mur : blanc près de la lentille, qui se fond dans le
   mur ; découpé en cône large ouvert vers le bas et la gauche. */
.intro__beam {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(farthest-corner at var(--lamp-x) var(--lamp-y), #fff 0%, #fff 14%, rgb(255 255 255 / 0.74) 36%, rgb(255 255 255 / 0) 74%);
  -webkit-mask: conic-gradient(from calc(96deg + var(--aim)) at var(--lamp-x) var(--lamp-y), transparent 0deg, #000 28deg, #000 158deg, transparent 194deg);
  mask: conic-gradient(from calc(96deg + var(--aim)) at var(--lamp-x) var(--lamp-y), transparent 0deg, #000 28deg, #000 158deg, transparent 194deg);
  pointer-events: none;
}
/* Le projecteur suspendu : long mât depuis le plafond, corps orienté vers
   le titre, volets, lentille. À la souris il glisse (--lamp-dx/dy) et sa
   tête pivote (--aim) autour de l'axe du mât, comme un vrai projecteur. */
.intro__lamp {
  position: absolute;
  top: 0;
  left: 61%;
  z-index: 2;
  width: clamp(88px, 9.4vw, 150px);
  height: auto;
  overflow: visible;
  fill: var(--night);
  stroke: var(--night);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 18px rgb(11 22 38 / 0.22));
  transform: translate(var(--lamp-dx), var(--lamp-dy));
  will-change: transform;
  pointer-events: none;
}
.intro__lamp-head {
  transform-box: view-box;
  transform-origin: 100px 290px;
  transform: rotate(calc(-34deg + var(--aim)));
}
.intro__lamp-rim { stroke-width: 9; }
.intro__lamp-flap { stroke-width: 6; }
.intro__lens { fill: #fff; stroke: none; }
.intro__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: 48px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #5b6478;
}
/* Logo officiel du site (texte passé en bleu nuit pour le fond blanc). */

/* Le grand titre, façon affiche : « H&C » puis « Executive Education » en
   italique ; le bloc est centré dans la zone claire (légèrement décalé vers
   le rideau), les lignes sont alignées à gauche entre elles. La ligne « Executive Education » fait
   ~8,4 em : le titre déborde des gouttières pour tenir presque toute la
   largeur de l'écran. */
.intro__title {
  position: relative;
  z-index: 1;
  align-self: center;
  margin: 6vh calc(-1 * var(--pad-x)) 0;
  padding: 0 2vw;
  text-align: center;
  font-size: clamp(3rem, 11vw, 13rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transform-origin: 50% 70%;
}
.intro__lines {
  position: relative;
  isolation: isolate;
  display: inline-block;
  text-align: left;
}
.intro__word {
  display: inline-block;
  padding: 0.04em 0.08em 0.12em; /* l'italique déborde de sa boîte */
  margin: -0.04em -0.04em -0.12em;
  vertical-align: top;
}
.intro__word--brand { display: block; }
.intro__word > span {
  display: inline-block;
  padding: 0 0.04em;
  color: transparent; /* la lettre n'est que son ombre */
}
/* Chaque lettre est dessinée par son ombre portée (text-shadow) : décalage
   (`--sx`/`--sy`, en em, à l'opposé de la lampe), flou (`--sb`) et densité
   (`--sa`) posés par le JS selon la distance à la lentille ; `--focus`
   (hérité) ajoute du flou et retire de la densité tant que la mise au point
   n'est pas faite. Sans JS : ombre nette. */
.intro__ch {
  --sx: 0;
  --sy: 0;
  --sb: 0.01;
  --sa: 0.95;
  text-shadow:
    calc(var(--sx) * 1em)
    calc(var(--sy) * 1em)
    calc((var(--sb) + (1 - var(--focus)) * 0.16) * 1em)
    rgb(11 22 38 / calc(var(--sa) * var(--focus)));
}

/* Pendant que le rideau monte (au défilement), le titre recule légèrement. */
@supports (animation-timeline: scroll()) {
  .intro__title {
    animation: recede linear both;
    animation-timeline: scroll(root);
    animation-range: 0 calc(100svh - var(--peek));
  }
}
@keyframes recede { to { transform: scale(0.9) translateY(-6vh); opacity: 0.3; } }
/* Une fois couverte par le rideau (le JS pose .is-covered), l'intro, collée
   en haut sous toute la page, n'est plus dessinée. */
.intro.is-covered { visibility: hidden; }

/* =========================================================
   Hero : le rideau de scène, plein cadre, qui remonte sur l'intro
   ========================================================= */
.hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-height: 100svh;
  margin-top: calc(-1 * var(--peek));
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  box-shadow: 0 -16px 56px rgb(11 22 38 / 0.2);
  overflow: hidden;
  scroll-snap-align: start;
}

/* ---------- Scène : rideau, projecteur, dirigeant, voile ---------- */
.stage {
  --lit: 1;                /* projecteur allumé (0 avant l'entrée en scène) */
  --ls: 1;                 /* ouverture du faisceau (JS : resserré pendant la recherche) */
  --on-actor: 1;           /* part de la lumière qui tombe sur le dirigeant (JS, 0.5 → 1) */
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--night);
}

/* Le rideau respire très lentement (calque à part : le parallaxe est sur l'image).
   Salle dans la pénombre : un voile uniforme, que seul le projecteur perce. */
.stage__drift {
  position: absolute;
  inset: 0;
  animation: breathe 26s ease-in-out infinite alternate;
}
/* Hors de l'écran, la respiration s'arrête (le JS pose .is-away) et reprend où elle en était. */
.hero.is-away .stage__drift { animation-play-state: paused; }
.stage__drift::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(8 15 30 / 0.46);
}
.stage__curtain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  transform: translate3d(calc(var(--px) * -12px), calc(var(--py) * -8px), 0) scale(1.05);
  will-change: transform;
}

/* Projecteur : disque de lumière au bord adouci, en mode « screen »,
   déplacé par transform ; sa puissance suit `--lit`. */
.stage__light {
  position: absolute;
  top: 0;
  left: 0;
  width: 66vmax;
  height: 66vmax;
  margin: -33vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgb(228 236 248 / 0.6) 0%,
    rgb(228 236 248 / 0.54) 46%,
    rgb(228 236 248 / 0.34) 66%,
    rgb(228 236 248 / 0.1) 84%,
    rgb(228 236 248 / 0) 100%);
  mix-blend-mode: screen;
  opacity: var(--lit);
  transform: translate3d(var(--lx), var(--ly), 0) scale(var(--ls));
  will-change: transform, opacity;
  pointer-events: none;
}

/* Le dirigeant : un bloc positionné (parallaxe), la photo dedans, et
   par-dessus sa silhouette d'ombre (masquée par la photo elle-même)
   qui s'efface à mesure que le projecteur l'éclaire. */
.stage__actor {
  position: absolute;
  top: var(--subject-top);
  left: var(--subject-x);
  height: var(--subject-h);
  transform: translate3d(calc(-50% + var(--px) * 9px), calc(var(--py) * 5px), 0);
  will-change: transform;
}
/* <picture> (AVIF, WebP en repli) : sans boîte, l'image reste mesurée sur le bloc. */
.stage__actor > picture { display: contents; }
.stage__subject {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 30px 50px rgb(5 10 20 / 0.45));
}
.stage__dark {
  position: absolute;
  inset: 0;
  background: #050b17;
  /* Seule la transparence de la photo sert : fichier sans couleurs (16 Ko au lieu de 216). */
  -webkit-mask: url("../img/v4/dirigeant-a-masque.webp?v=m1") center / 100% 100% no-repeat;
  mask: url("../img/v4/dirigeant-a-masque.webp?v=m1") center / 100% 100% no-repeat;
  opacity: calc(0.86 * (1 - var(--lit) * var(--on-actor)));
  will-change: opacity;
}

.stage__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(11 22 38 / 0.32), rgb(11 22 38 / 0) 24%),
    linear-gradient(to right, rgb(11 22 38 / 0.3), rgb(11 22 38 / 0) 46%),
    linear-gradient(to bottom, rgb(11 22 38 / 0) 34%, rgb(11 22 38 / 0.55) 54%, rgb(11 22 38 / 0.9) 68%, rgb(11 22 38 / 0.98) 80%, var(--night) 100%);
}

/* ---------- La place de la barre dans la grille de la hero : 48 px.
   La barre elle-même (`.site-head`, fixe) est plus bas dans ce fichier ;
   le logo (`.brand`) et le rond de l'Afrique (`.spot`) se posent par-dessus. ---------- */
.bar { position: relative; height: 48px; }

/* ---------- Le logo, unique (voir le HTML) ----------
   Deux calques superposés : bleu nuit sur les murs, blanc sur les fonds
   sombres. Le bord entre les deux suit celui du rideau quand il monte, puis
   la couleur de la barre (`.is-nav-away` : la hero est passée, le logo repose
   sur une puce de verre comme la gélule, pour rester lisible sur le texte).
   Variables posées par le JS : `--cut` (le bord, en px depuis le haut du logo),
   `--glow` (l'éclat quand le bord passe). Il reste à l'écran et se range avec
   la barre (`.is-nav-hidden`). */
.brand {
  --brand-h: 34px;
  position: absolute;
  top: calc(var(--pad-top) + (48px - var(--brand-h)) / 2);
  left: var(--pad-x);
  z-index: 1;                       /* sans JS : sur le mur, sous le rideau */
  display: block;
  height: var(--brand-h);
  transition: scale 0.3s var(--ease-out), translate 0.45s var(--ease-out), opacity 0.3s;
}
.js .brand {
  position: fixed;
  z-index: 41;
  isolation: isolate;
  will-change: translate;
}
/* la pastille a la hauteur du bouton jaune (46 px) : 6 px d'air au-dessus et
   au-dessous du logo, 18 px sur les côtés */
.brand::before {
  --chip-v: -6px;
  --chip-h: -18px;
  content: "";
  position: absolute;
  inset: var(--chip-v) var(--chip-h);
  z-index: -1;
  border-radius: 999px;
  background: var(--nv-bg);
  border: 1px solid var(--nv-line);
  box-shadow: var(--nv-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  opacity: 0;
  transition: opacity 0.35s, background-color 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.is-nav-away .brand::before { opacity: 1; }
.is-nav-away .brand__ink,
.is-nav-away .brand__paper { transition: clip-path 0.35s var(--ease-out); }
.is-nav-hidden .brand { translate: 0 calc(-100% - 40px); opacity: 0; pointer-events: none; }
.brand:hover { scale: 1.03; }
.brand img { display: block; height: 100%; width: auto; }
.brand__ink { clip-path: inset(-24px -24px calc(100% - var(--cut, 100%)) -24px); }
.brand__paper {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(var(--cut, 100%) -24px -24px -24px);
  /* lisible sur le rideau ; l'éclat quand le bord passe */
  filter: drop-shadow(0 4px 14px rgb(5 10 20 / 0.45))
          drop-shadow(0 0 calc(var(--glow, 0) * 18px) rgb(255 255 255 / calc(var(--glow, 0) * 0.75)));
}

/* ---------- L'Afrique, projetée sur le rideau (voir le HTML) ----------
   `--disc` = diamètre du rond (pas `--spot`, déjà pris par les titres) ; le SVG déborde de 14 % de chaque côté
   (le halo), compensés par la marge. La lumière s'ajoute au rideau
   (« plus-lighter », « screen » à défaut), rythmée par ses plis. */
.spot {
  --disc: 116px;
  position: absolute;
  top: calc(var(--pad-top) - 12px);
  right: var(--pad-x);
  z-index: 0;
  width: calc(var(--disc) * 1.28);
  height: calc(var(--disc) * 1.28);
  margin: calc(var(--disc) * -0.14);
  stroke: none;                     /* (les SVG de la page ont un trait par défaut) */
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

/* =========================================================
   Barre de navigation
   Fixe : posée sur le rideau tant qu'il monte (`--nav-y`, posé par le JS),
   puis à l'écran. Elle se range quand on descend (`.is-nav-hidden` sur <html>)
   et revient dès qu'on remonte. Son ton suit la section dessous : le JS met
   `data-nav-tone="light|dark"` sur <html>, et tout le reste (barre, logo,
   menus) ne dépend que des variables `--nv-*` ci-dessous (verre sombre sur la
   scène, verre blanc sur les murs). `.is-nav-away` : la hero est passée.
   ========================================================= */
:root {
  --nv-fg: var(--paper);
  --nv-dim: var(--muted);
  --nv-bg: var(--glass);
  --nv-line: var(--glass-line);
  --nv-hover: rgb(255 255 255 / 0.1);
  --nv-on: rgb(255 255 255 / 0.15);
  --nv-shadow: 0 8px 30px rgb(5 10 20 / 0.25);
  --nv-panel: rgb(11 22 38 / 0.9);
  --nv-pshadow: 0 28px 70px rgb(5 10 20 / 0.5);
}
:root[data-nav-tone="light"] {
  --nv-fg: var(--ink);
  --nv-dim: rgb(22 33 61 / 0.7);
  --nv-bg: rgb(255 255 255 / 0.76);
  --nv-line: rgb(22 33 61 / 0.11);
  --nv-hover: rgb(22 33 61 / 0.06);
  --nv-on: rgb(22 33 61 / 0.1);
  --nv-shadow: 0 8px 26px rgb(22 33 61 / 0.12);
  --nv-panel: rgb(255 255 255 / 0.94);
  --nv-pshadow: 0 28px 70px rgb(22 33 61 / 0.2);
}
.site-head {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--pad-top) var(--pad-x) 0;
  pointer-events: none;           /* seuls la gélule, le bouton et le menu captent le pointeur */
  translate: 0 var(--nav-y, 0px); /* sur le rideau qui monte ; 0 une fois en haut */
  transition: transform 0.45s var(--ease-out), opacity 0.3s;
}
.site-head > * { pointer-events: auto; }
.is-nav-hidden .site-head { transform: translateY(calc(-100% - 16px)); opacity: 0; }
.is-nav-hidden .site-head > * { pointer-events: none; }

/* La gélule de verre. Le verre est sur un pseudo-élément : un `backdrop-filter`
   sur la gélule elle-même empêcherait les menus (ses enfants) de flouter la page. */
.nav {
  position: relative;
  isolation: isolate;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--nv-bg);
  border: 1px solid var(--nv-line);
  box-shadow: var(--nv-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__item--mega { position: static; }   /* son menu se centre sur la gélule */

.nav__link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--nv-dim);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s, background-color 0.25s;
}
.nav__link:hover,
.nav__item.is-open > .nav__link { color: var(--nv-fg); background: var(--nv-hover); }
.nav__link[aria-current] { background: var(--nv-on); color: var(--nv-fg); }
.nav__chev { width: 13px; height: 13px; stroke-width: 2; opacity: 0.7; transition: transform 0.3s var(--ease-out); }
.nav__item.is-open > .nav__link .nav__chev { transform: rotate(180deg); }

.nav__search {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--nv-dim);
  cursor: pointer;
  transition: color 0.25s, background-color 0.25s;
}
.nav__search:hover { color: var(--nv-fg); background: var(--nv-hover); }
.nav__search svg { width: 18px; height: 18px; stroke-width: 1.8; }

/* Le bouton jaune : à droite de la gélule, une fois la hero passée (sur la hero,
   le rond de l'Afrique tient cette place, et la page a déjà ses boutons). */
.nav__cta {
  grid-column: 3;
  justify-self: start;
  margin-left: 12px;
  min-height: 48px;
  font-size: 0.875rem;
  box-shadow: 0 8px 26px rgb(5 10 20 / 0.22);
  opacity: 0;
  visibility: hidden;
  translate: -10px 0;
  transition: opacity 0.3s, translate 0.4s var(--ease-out), visibility 0s 0.4s, background-color 0.25s, transform 0.3s var(--ease-out);
}
.is-nav-away .nav__cta { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }

/* Le bouton menu (sous 1240 px) : même verre que la gélule. */
.burger { grid-column: 3; justify-self: end; }
.burger,
.icon-btn {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--paper);
  cursor: pointer;
}
.burger svg,
.icon-btn svg { width: 22px; height: 22px; }
.burger {
  border-color: var(--nv-line);
  background: var(--nv-bg);
  color: var(--nv-fg);
  box-shadow: var(--nv-shadow);
  transition: background-color 0.35s, border-color 0.35s, color 0.35s;
}

/* ---------- Les menus déroulants ---------- */
.sub {
  --w: 340px;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: min(var(--w), calc(100vw - 2 * var(--pad-x)));
  padding: 18px;
  border: 1px solid var(--nv-line);
  border-radius: 26px;
  background: var(--nv-panel);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--nv-pshadow);
  color: var(--nv-fg);
  opacity: 0;
  visibility: hidden;
  translate: -50% 8px;
  scale: 0.98;
  transform-origin: 50% 0;
  transition: opacity 0.2s, translate 0.3s var(--ease-out), scale 0.3s var(--ease-out), visibility 0s 0.3s, background-color 0.35s, border-color 0.35s, color 0.35s;
}
.sub::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; } /* pont : le survol ne se perd pas */
.nav__item.is-open > .sub { opacity: 1; visibility: visible; translate: -50% 0; scale: 1; transition-delay: 0s; }
.sub--mega { --w: 940px; }
.sub--pro { --w: 430px; }
.sub--res { --w: 600px; }
.sub--about { --w: 340px; }
.sub--contact { --w: 360px; left: auto; right: -40px; translate: 0 8px; transform-origin: 85% 0; }
.nav__item.is-open > .sub--contact { translate: 0 0; }

.sub__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 22px; }
.sub--res .sub__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sub__title {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nv-dim);
}
.sub__title a { color: inherit; text-decoration: none; transition: color 0.2s; }
.sub__title a:hover { color: var(--gold); }
.sub__list { display: grid; gap: 2px; }
.sub__link,
.sub__row {
  display: grid;
  gap: 1px;
  padding: 9px 10px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s;
}
.sub__link:hover,
.sub__row:hover { background: var(--nv-hover); }
.sub__name { font-size: 0.9375rem; font-weight: 500; line-height: 1.25; }
.sub__desc { font-size: 0.8125rem; line-height: 1.35; color: var(--nv-dim); }
.sub__link:hover .sub__name { color: var(--nv-fg); }
/* Contact : une icône par moyen de joindre */
.sub__row { grid-template-columns: 22px 1fr; align-items: center; gap: 12px; }
.sub__row > svg { width: 20px; height: 20px; color: var(--gold); stroke-width: 1.7; }
.sub__row > span { display: grid; gap: 1px; }

.sub__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 14px;
  padding: 14px 10px 0;
  border-top: 1px solid var(--nv-line);
}
.sub--mega .sub__foot { margin-top: 16px; }
.sub__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nv-fg);
  text-decoration: none;
}
.sub__all:hover { color: var(--gold); }
.sub__arrow { width: 14px; height: 14px; stroke-width: 2; transition: transform 0.3s var(--ease-out); }
.sub__all:hover .sub__arrow { transform: translate(2px, -2px); }
.sub__next { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: inherit; text-decoration: none; min-width: 0; }
.sub__tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.sub__nextname { font-size: 0.875rem; color: var(--nv-dim); }
.sub__nextname strong { font-weight: 500; color: var(--nv-fg); }
.sub__next:hover .sub__nextname strong { color: var(--gold); }
/* Petit bouton jaune dans les menus */
.btn--sm { min-height: 40px; padding: 4px 18px; font-size: 0.875rem; }

/* ---------- Menu mobile ---------- */

/* ---------- Accroche ---------- */
.copy {
  position: relative;
  z-index: 1;
  grid-row: 3;
  max-width: 840px;
  padding-top: 24px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.title {
  margin-top: 22px;
  font-size: clamp(2.4rem, 3.9vw, 3.9rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--faint);
}
.title__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em; /* les descendantes ne sont pas coupées par le masque */
  margin-bottom: -0.08em;
}
.title__line > span { display: block; }
.title__line--strong { color: var(--paper); font-weight: 400; }

.lead {
  max-width: 62ch;
  margin-top: 20px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 18px 6px 20px;
  border: 0;   /* un <button> garde sinon son contour de navigateur (2026-10-14) */
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, transform 0.3s var(--ease-out);
}
.btn__arrow { width: 16px; height: 16px; transition: transform 0.35s var(--ease-out); }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }
.btn:active { transform: scale(0.98); }

.btn--gold {
  padding-left: 7px;
  background: var(--gold);
  color: var(--ink);
}
.btn--gold:hover { background: var(--gold-strong); }
.btn__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(22 33 61 / 0.12);
  transition: background-color 0.25s, transform 0.4s var(--ease-out);
}
.btn__icon svg { width: 17px; height: 17px; stroke-width: 1.8; }
.btn--gold:hover .btn__icon { background: rgb(22 33 61 / 0.18); transform: rotate(-10deg); }

.btn--glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--paper);
}
.btn--glass:hover { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.26); }

/* Au trait, sur un mur clair (S8). */
.btn--line { border: 1px solid currentColor; color: inherit; }
.btn--line:hover { background: rgb(22 33 61 / 0.06); }

/* ---------- Filet + preuve sociale ---------- */
.proof {
  position: relative;
  z-index: 1;
  grid-row: 4;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 34px;
  padding-top: 24px;
}
.proof::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left;
}

.proof__rating {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 10px 12px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.faces { display: flex; }
.faces li + li { margin-left: -9px; }
.faces img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgb(240 244 250);
  object-fit: cover;
}
.score {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--muted);
}
.stars { display: inline-flex; gap: 1px; color: var(--gold); }
.stars svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.score strong { font-size: 0.875rem; font-weight: 600; color: var(--paper); }
.score__note { grid-column: 1 / -1; }

.proof__text {
  max-width: 34ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

/* =========================================================
   Entrée en trois temps.
   Au chargement (`.is-ready`) : la barre de l'affiche ; la lentille du
   projecteur s'éclaire, le faisceau se pose sur le mur, et l'ombre du titre
   fait sa mise au point (de floue et absente à nette) ; le rideau dans la
   pénombre, la nav.
   Quand le rideau est posé (`.is-shown`) : le projecteur s'allume et
   cherche sur le rideau (trajet piloté par le JS : le texte en bas, le
   coin droit, le centre).
   Quand il trouve sa place (`.is-found`) : le dirigeant apparaît dans la
   lumière, puis les textes ligne à ligne.
   Avant chaque signal tout est caché (avec JS seulement) ; chaque animation
   part de son état `from` (fill backwards) et se termine sur le style
   normal, qui garde le parallaxe et le projecteur actifs.
   ========================================================= */
.js:not(.is-ready) .stage__curtain,
.js:not(.is-ready) .site-head,
.js:not(.is-ready) .brand { opacity: 0; }
.js:not(.is-shown) .spot { opacity: 0; }
.js:not(.is-ready) .intro__lines { --focus: 0; }
.js:not(.is-ready) .intro__beam { opacity: 0; }
.js:not(.is-ready) .intro__lens { fill: #3b4560; }
.js:not(.is-shown) .stage { --lit: 0; }
.js:not(.is-found) .stage__actor,
.js:not(.is-found) .tag,
.js:not(.is-found) .lead,
.js:not(.is-found) .actions .btn,
.js:not(.is-found) .proof__rating,
.js:not(.is-found) .proof__text { opacity: 0; }
.js:not(.is-found) .title__line > span { transform: translateY(112%); }
.js:not(.is-found) .proof::before { transform: scaleX(0); }

.is-ready .brand { animation: fade 0.8s 0.2s ease-out backwards; }
.is-ready .intro__lens { animation: lamp-on 0.35s 0.4s ease-out backwards; }
.is-ready .intro__beam { animation: fade 0.7s 0.45s ease-out backwards; }
.is-ready .intro__lines { animation: focus 1.5s 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.is-ready .stage__curtain { animation: curtain 1.8s 0.3s var(--ease-out) backwards; }
.is-ready .site-head { animation: drop 0.9s 0.85s var(--ease-out) backwards; }

.is-shown .stage { animation: ignite 0.45s ease-out backwards; }
/* L'Afrique s'allume avec la scène, en grésillant un peu. */
.is-shown .spot { animation: spot-on 0.7s 0.15s linear backwards; }

/* Le dirigeant trouvé, tout suit en une seconde : il entre, puis les
   textes s'empilent serrés (le visiteur ne doit pas attendre). */
.is-found .stage__actor { animation: enter 0.8s var(--ease-out) backwards; }
.is-found .tag { animation: rise 0.6s 0.25s var(--ease-out) backwards; }
.is-found .title__line > span { animation: lift 0.8s var(--ease-out) backwards; }
.is-found .title__line:nth-child(1) > span { animation-delay: 0.3s; }
.is-found .title__line:nth-child(2) > span { animation-delay: 0.4s; }
.is-found .lead { animation: rise 0.6s 0.5s var(--ease-out) backwards; }
.is-found .actions .btn:nth-child(1) { animation: rise 0.6s 0.6s var(--ease-out) backwards; }
.is-found .actions .btn:nth-child(2) { animation: rise 0.6s 0.68s var(--ease-out) backwards; }
.is-found .proof::before { animation: draw 0.9s 0.7s var(--ease-out) backwards; }
.is-found .proof__rating { animation: rise 0.6s 0.85s var(--ease-out) backwards; }
.is-found .proof__text { animation: rise 0.6s 0.95s var(--ease-out) backwards; }

@keyframes curtain { from { opacity: 0; transform: scale(1.12); } }
@keyframes breathe { to { transform: scale(1.035); } }
@keyframes enter { from { opacity: 0; transform: translate3d(-50%, 7%, 0); } }
@keyframes drop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes lift { from { transform: translateY(115%); } }
@keyframes fade { from { opacity: 0; } }
/* La lentille s'éclaire ; l'ombre du titre fait sa mise au point. */
@keyframes lamp-on { from { fill: #3b4560; } }
@keyframes focus { from { --focus: 0; } }
@keyframes draw { from { transform: scaleX(0); } }
/* Allumage du projecteur : montée douce jusqu'à pleine puissance. */
@keyframes ignite { from { --lit: 0; } }
@keyframes spot-on {
  0% { opacity: 0; }
  10% { opacity: 0.75; }
  17% { opacity: 0.12; }
  28% { opacity: 0.9; }
  34% { opacity: 0.35; }
  50%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .js:not(.is-ready) .stage__curtain, .js:not(.is-ready) .site-head, .js:not(.is-ready) .brand, .js:not(.is-shown) .spot,
  .js:not(.is-found) .stage__actor, .js:not(.is-found) .tag, .js:not(.is-found) .lead,
  .js:not(.is-found) .actions .btn, .js:not(.is-found) .proof__rating, .js:not(.is-found) .proof__text { opacity: 1; }
  .js:not(.is-shown) .stage { --lit: 1; }
  .js:not(.is-ready) .intro__lines { --focus: 1; }
  .js:not(.is-ready) .intro__beam { opacity: 1; }
  .js:not(.is-ready) .intro__lens { fill: #fff; }
  .js:not(.is-found) .title__line > span, .js:not(.is-found) .proof::before { transform: none; }
  .is-ready *, .is-shown *, .is-found * { animation: none !important; }
  .intro__title, .stage__drift { animation: none; }
  .btn, .btn__arrow, .btn__icon, .brand, .site-head, .sub, .nav__cta { transition: none; }
}

/* =========================================================
   S2 — Preuves : les chiffres clés, puis les logos clients.
   Un projecteur monté sur rail glisse d'un chiffre à l'autre (chacun sort
   de l'ombre en comptant), puis la salle se rallume : les logos
   apparaissent ; ensuite la lumière suit le pointeur.
   Variables posées par le JS sur `.trust` : --lx (chariot), --tilt (tête ;
   + = vers la droite), --spread (demi-ouverture du faisceau), --bx/--by (la
   lentille), --on (puissance), --house (salle allumée, 0 → 1) ; sur chaque
   `.stat` : --lit (0 dans l'ombre → 1 en pleine lumière ; propriété déjà
   enregistrée plus haut).
   Les valeurs par défaut sont l'état « tout allumé, projecteur posé » : c'est
   ce que voient le mouvement réduit et l'absence de JS.
   ========================================================= */
.trust {
  --dim: #44526c;          /* un chiffre dans l'ombre */
  --lx: 50%;
  --tilt: 0deg;
  --spread: 40deg;
  --bx: 50%;
  --by: 111px;
  --on: 0.45;
  --house: 1;
  --throw: 620px;          /* portée du faisceau */
  --rail-y: 30px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 196px var(--pad-x) clamp(72px, 9vw, 128px);
  background: var(--night);
}
/* La salle rallumée : un voile de lumière douce sur toute la bande. */
.trust::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(90% 75% at 50% 72%, rgb(120 150 210 / 0.11), transparent 72%);
  opacity: var(--house);
}

/* Faisceau : un halo large, un cœur plus étroit et plus dense, découpés en
   cône depuis la lentille (le cône tourne avec la tête du projecteur). */
.trust__beam,
.trust__beam::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.trust__beam {
  z-index: 0;
  opacity: var(--on);
  background: radial-gradient(circle var(--throw) at var(--bx) var(--by), rgb(255 255 255 / 0.34), rgb(255 255 255 / 0.13) 26%, rgb(255 255 255 / 0.045) 62%, transparent);
  mask: conic-gradient(from calc(180deg - var(--tilt) - var(--spread) - 7deg) at var(--bx) var(--by), transparent 0deg, #000 7deg, #000 calc(7deg + 2 * var(--spread)), transparent calc(14deg + 2 * var(--spread)));
}
.trust__beam::after {
  content: "";
  background: radial-gradient(circle calc(var(--throw) * 0.8) at var(--bx) var(--by), rgb(255 255 255 / 0.26), transparent);
  mask: conic-gradient(from calc(180deg - var(--tilt) - var(--spread) * 0.42 - 5deg) at var(--bx) var(--by), transparent 0deg, #000 5deg, #000 calc(5deg + 0.84 * var(--spread)), transparent calc(10deg + 0.84 * var(--spread)));
}

/* Rail et projecteur : le chariot glisse sur le rail, la tête pivote. */
.trust__rail {
  position: absolute;
  top: var(--rail-y);
  left: 0;
  right: 0;
  z-index: 1;
  height: 8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, rgb(255 255 255 / 0.07) 119px 120px),
    linear-gradient(#2c3855, #121b30);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 10px 22px rgb(0 0 0 / 0.5);
}
.trust__lamp {
  position: absolute;
  top: var(--rail-y);
  left: var(--lx);
  z-index: 3;
  width: 100px;
  height: 120px;
  margin-left: -50px;
  overflow: visible;
  pointer-events: none;
  fill: #1a2440;
  stroke: #46557e;
  stroke-width: 1.3;
}
.trust__stem { fill: none; stroke-width: 3; }
.trust__door { fill: none; stroke-width: 2.2; }
.trust__head {
  transform-box: view-box;
  transform-origin: 50px 30px;
  transform: rotate(calc(-1 * var(--tilt)));
}
.trust__lens {
  stroke: none;
  fill: #3a4562;
  fill: color-mix(in srgb, #fff calc(var(--on) * 100%), #3a4562);
  filter: drop-shadow(0 0 7px rgb(255 255 255 / calc(var(--on) * 0.9)));
}

/* Chiffres clés. */
.trust__stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 48px);
  max-width: 1240px;
  margin: 0 auto;
}
.stat {
  position: relative;
  text-align: center;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: calc(clamp(16px, 3vw, 48px) / -2);
  width: 1px;
  background: var(--line);
}
/* Dans l'ombre : bleu-gris et un peu flou ; en pleine lumière : blanc net. */
.stat__n {
  font-size: clamp(2.6rem, 5.6vw, 5.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--paper);
  color: color-mix(in srgb, #fff calc(var(--lit) * 100%), var(--dim));
  text-shadow: 0 0 calc(var(--lit) * 30px) rgb(255 255 255 / calc(var(--lit) * 0.16));
  filter: blur(calc(max(0, 0.5 - var(--lit)) * 5px));
}
/* Le « fantôme » garde la largeur du chiffre final ; le compte s'aligne à droite dessus. */
.stat__v { display: inline-grid; }
.stat__v > * { grid-area: 1 / 1; }
.stat__ghost { visibility: hidden; }
.stat__now { text-align: right; }
.stat__u {
  margin-left: 0.06em;
  font-weight: 400;
  color: var(--gold);
  color: color-mix(in srgb, var(--gold) calc(var(--lit) * 100%), var(--dim));
}
.stat__l {
  max-width: 19ch;
  margin: 16px auto 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--muted);
  color: color-mix(in srgb, var(--muted) calc(30% + var(--lit) * 70%), transparent);
}

/* Logos clients : blancs sur la scène, qui défilent. Sans JS ou en mouvement
   réduit, une grille centrée (le défilement est ajouté par le JS). */
.trust__logos {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: clamp(56px, 7vw, 96px) auto 0;
  padding-top: clamp(32px, 4vw, 48px);
}
.trust__logos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  opacity: var(--house);
}
.trust__eyebrow {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: var(--house);
}
.logos {
  --gap: clamp(48px, 6vw, 88px);
  --logo-k: 1.5;
  margin-top: 28px;
  opacity: var(--house);
  filter: blur(calc((1 - var(--house)) * 6px));
}
.logos__track { display: flex; justify-content: center; }
.logos__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px var(--gap);
  max-width: 1000px;
  margin: 0 auto;
}
.logos__list li { flex: none; }
.logos__list img {
  width: calc(var(--w) * var(--logo-k) * 1px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.78;
}
.logos.is-looping {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.logos.is-looping .logos__track { width: max-content; justify-content: flex-start; }
.logos.is-looping .logos__list {
  flex-wrap: nowrap;
  flex-shrink: 0;
  max-width: none;
  margin: 0;
  justify-content: flex-start;
  padding-right: var(--gap);
  animation: marquee 46s linear infinite;
}
.logos.is-looping:hover .logos__list,
.logos.is-away .logos__list { animation-play-state: paused; }
/* Trois listes identiques, chacune glisse de sa propre largeur : la boucle est sans couture. */
@keyframes marquee { to { transform: translateX(-100%); } }

/* Mobile : deux par deux ; pas de balayage (voir le JS), chaque chiffre
   s'allume en entrant à l'écran. */
.trust.is-reveal .stat { transition: --lit 0.5s var(--ease-out); }
@media (max-width: 759px) {
  .trust { --rail-y: 22px; --on: 0.5; padding-top: 168px; }
  .trust__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 16px; }
  .stat + .stat::before { display: none; }
  .stat:nth-child(even)::before { display: block; left: -8px; }
  .stat__n { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .stat__l { font-size: 0.875rem; }
  .logos { --logo-k: 1.15; }
}
@media (prefers-reduced-motion: reduce) {
  .logos.is-looping .logos__list { animation: none; }
}

/* =========================================================
   Titres de section : un titre simple, et un coup de lumière dessus.
   Le titre attend dans la pénombre (`is-armed`, posé par le JS). Quand il
   entre à l'écran (`is-lit`), le rond d'un projecteur le balaie de gauche à
   droite, son halo glisse sur le mur derrière les lettres, puis les pleins
   feux l'éclairent en entier (1,1 s). Le coup de lumière se rejoue chaque
   fois que le titre revient à l'écran. Les lettres prennent leur couleur d'un
   dégradé (rond éclairé / pénombre) découpé dans le texte ; dessous, une
   seconde couche porte le halo, dans la boîte du titre, élargie d'un
   demi-cadratin de chaque côté sans rien décaler. Le halo suit le rond et
   s'éteint près des bords de la boîte (`--beam` < 10 ou > 90), pour ne
   jamais être coupé net, quelle que soit la longueur du titre.
   Sans JS, en mouvement réduit ou en contraste forcé : titre éclairé d'emblée.
   Sur fond sombre : `--title-on: var(--paper)` et `--title-off: rgb(255 255 255 / 0.22)`.
   ========================================================= */
@property --beam { syntax: "<number>"; inherits: false; initial-value: 104; }
@property --spot { syntax: "<percentage>"; inherits: false; initial-value: 420%; }

.stitle {
  --title-on: var(--ink);
  --title-off: rgb(22 33 61 / 0.2);
  --title-glow: 255 255 255;

  width: fit-content;
  max-width: calc(100% + 1em);
  margin: -0.24em -0.5em;
  padding: 0.24em 0.5em;
  font-size: clamp(2rem, 4.1vw, 3.5rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--title-on);
}
.stitle.is-armed {
  --beam: -30;                         /* centre du rond, en % de la boîte */
  --spot: 24%;                         /* largeur du rond */
  color: transparent;
  background-image:
    radial-gradient(var(--spot) 160% at calc(var(--beam) * 1%) 50%, var(--title-on) 50%, var(--title-off) 100%),
    radial-gradient(2.2em 1em at calc(var(--beam) * 1%) 50%,
      rgb(var(--title-glow) / calc(0.9 * clamp(0, min(var(--beam) - 10, 90 - var(--beam)) / 8, 1))) 0%,
      rgb(var(--title-glow) / 0) 66%);
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
}
.stitle.is-armed.is-lit { animation: stitle-light 1.1s cubic-bezier(0.45, 0, 0.3, 1) both; }
@keyframes stitle-light {
  0%   { --beam: -30; --spot: 24%; }
  62%  { --beam: 104; --spot: 26%; }
  100% { --beam: 104; --spot: 420%; }
}
@media (forced-colors: active) {
  .stitle.is-armed { color: CanvasText; background: none; }
}

/* =========================================================
   S3 — « Vous êtes… » : entrée par profil, sur le mur clair.
   D'après « Signature Keynote Talks(3) » (sunnybonnell.com) : au défilement,
   les cartes montent du bas et s'empilent verticalement (chaque carte couvre
   la précédente, dont le numéro reste visible), puis la pile se déplie sur
   le côté.
   Fond blanc, comme l'intro. Chaque profil (li) porte sa carte (photo,
   numéro, profil ; purement visuelle) et son texte (titre, défi,
   présentation, bouton jaune vers la page la plus pertinente).
   - Sans JS, en mouvement réduit : les profils côte à côte, carte puis texte.
   - Mobile (< 760 px), avec JS : la même scène à la verticale (voir plus
     bas) ; sans JS ou en mouvement réduit : les profils l'un sous l'autre.
   - Écran large (JS, `is-pinned`) : la section reste à l'écran le temps du
     défilement (`--run`, posé par le JS). À gauche, le titre puis le texte
     du profil actif (`is-active`) : seul ce texte change. À droite, la pile
     se forme puis se déplie en rangée ; la rangée glisse sous un projecteur
     sur rail, comme en S2, qui éclaire la carte active (en couleur, les
     autres en noir et blanc, dans l'ombre) ; les cartes déjà vues
     repartent sur la pile, au-dessus. Le JS pose `transform` et
     `--card-lit` sur chaque carte, et sur `.profiles__pin` : --bx/--by (la
     lentille), --spread (demi-ouverture du faisceau), --throw (portée),
     --on (puissance du projecteur).
   ========================================================= */
@property --card-lit { syntax: "<number>"; inherits: true; initial-value: 0; }

.profiles {
  --s3-wall: #edf0f4;      /* le mur dans l'ombre ; sous le faisceau, blanc */
  --s3-text: #4b5569;
  --s3-faint: #7a8295;

  position: relative;
  isolation: isolate;
  overflow: clip;          /* pas `hidden` : le position: sticky doit marcher dedans */
  color: var(--ink);
  background: #fff;
}
.profiles__pin {
  position: relative;
  padding: clamp(88px, 10vw, 144px) var(--pad-x) clamp(80px, 9vw, 128px);
}
.profiles__beam,
.profiles__rail,
.profiles__lamp { display: none; }

.profiles__in {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
}
.profiles__eyebrow,
.tickets__eyebrow,
.dates__eyebrow,
.company__eyebrow {
  display: flex;
  margin-bottom: 20px;
}
.profiles__eyebrow > span,
.tickets__eyebrow > span,
.dates__eyebrow > span,
.company__eyebrow > span {
  padding: 7px 14px;
  border: 1px solid rgb(22 33 61 / 0.14);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.7);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5b6478;
}
.profiles__lead {
  margin-top: 18px;
  max-width: 32ch;
  font-size: 1.0625rem;
  color: var(--s3-text);
}

.profiles__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 56px clamp(20px, 2.4vw, 32px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.profile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 24px;
}

/* La carte : la photo pleine, le numéro en haut, le profil en bas. Dans
   l'ombre, en noir et blanc voilé de bleu nuit ; en lumière (`--card-lit`
   1), en couleur, le numéro au jaune. */
.profile__card {
  position: relative;
  z-index: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  background: var(--night);
  box-shadow: 0 26px 48px -24px rgb(11 22 38 / 0.5), 0 2px 6px rgb(11 22 38 / 0.12);
  cursor: pointer;
  transition: --card-lit 0.5s var(--ease-out);
}
.profile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--crop, 50% 40%);
  filter: grayscale(calc(1 - var(--card-lit))) brightness(calc(0.82 + 0.18 * var(--card-lit))) contrast(1.06);
}
.profile__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(11 22 38 / 0.72) 0%, rgb(11 22 38 / 0.3) 12%, rgb(11 22 38 / 0) 26%, rgb(11 22 38 / 0) 50%, rgb(11 22 38 / 0.86) 100%),
    linear-gradient(rgb(22 33 61 / calc(0.34 * (1 - var(--card-lit)))) 0 0);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  border-radius: inherit;
}
.profile__n {
  position: absolute;
  top: 12px;
  left: 18px;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--gold) calc(var(--card-lit) * 100%), #fff);
}
.profile__label {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #fff;
}
.profile__label > span {
  display: block;
  font-weight: 300;
  color: rgb(255 255 255 / 0.72);
}

/* Le texte du profil. */
.profile__count,
.profile__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.profile__goal {
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}
.profile__text {
  max-width: 46ch;
  margin-top: 10px;
  color: var(--s3-text);
}
.profile__cta {
  margin-top: 22px;
  padding: 6px 7px 6px 22px;
}
.profile__cta:hover .btn__icon { transform: translate(2px, -2px); }
.profiles__steps { display: none; }
.profiles :focus-visible { outline-color: var(--ink); }
.profile__cta:focus-visible { outline-color: var(--gold); }

/* Sans JS (et sans le défilement piloté) : les cartes en couleur. */
html:not(.js) .profile { --card-lit: 1; }
@media (min-width: 760px) {
  .profiles:not(.is-pinned) .profile { --card-lit: 1; }
}

/* ---------- Sans section épinglée, sur mobile : les profils l'un sous l'autre ---------- */
@media (max-width: 759px) {
  .profiles:not(.is-pinned) .profile { --card-lit: 1; }
  .profiles__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .profile__card {
    aspect-ratio: auto;
    height: min(96vw, 44svh);
  }
}

/* ---------- Écran large : la section reste à l'écran ---------- */
.profiles.is-pinned { height: calc(100svh + var(--run, 200svh)); }
.profiles.is-pinned .profiles__pin {
  --bx: 70%;
  --by: 80px;
  --spread: 24deg;
  --throw: 800px;
  --on: 0;
  --card-w: min(44svh, 38vw);
  --card-h: calc(var(--card-w) * 1.25);

  position: sticky;
  top: 0;
  display: grid;
  height: 100svh;
  padding: 0 var(--pad-x);
  padding-top: clamp(24px, 5svh, 48px); /* la case un peu sous le milieu : place pour le projecteur */
  overflow: clip;
  background: var(--s3-wall);
}
/* Le faisceau : un halo large, blanc, découpé en cône depuis la lentille,
   et la tache de lumière sur le mur derrière la carte active. */
.profiles.is-pinned .profiles__beam {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  opacity: var(--on);
  pointer-events: none;
  background: radial-gradient(circle var(--throw) at var(--bx) var(--by), #fff 0%, #fff 48%, rgb(255 255 255 / 0.75) 72%, rgb(255 255 255 / 0) 100%);
  -webkit-mask: conic-gradient(from calc(180deg - var(--spread) - 8deg) at var(--bx) var(--by), transparent 0deg, #000 8deg, #000 calc(8deg + 2 * var(--spread)), transparent calc(16deg + 2 * var(--spread)));
  mask: conic-gradient(from calc(180deg - var(--spread) - 8deg) at var(--bx) var(--by), transparent 0deg, #000 8deg, #000 calc(8deg + 2 * var(--spread)), transparent calc(16deg + 2 * var(--spread)));
}
.profiles.is-pinned .profiles__rail {
  position: absolute;
  top: 22px;
  right: 0;
  left: 0;
  z-index: 3;
  display: block;
  height: 7px;
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, rgb(255 255 255 / 0.1) 119px 120px),
    linear-gradient(#2c3855, var(--ink));
  box-shadow: 0 8px 18px -6px rgb(11 22 38 / 0.35);
}
.profiles.is-pinned .profiles__lamp {
  position: absolute;
  top: 22px;
  left: var(--bx);
  z-index: 3;
  display: block;
  width: 84px;
  height: 101px;
  margin-left: -42px;
  overflow: visible;
  pointer-events: none;
  fill: var(--ink);
  stroke: #33405f;
  stroke-width: 1.3;
  filter: drop-shadow(0 10px 14px rgb(11 22 38 / 0.25));
}
.profiles__lamp-stem { fill: none; stroke-width: 3; }
.profiles__lamp-door { fill: none; stroke-width: 2.2; }
.profiles__lamp-lens {
  stroke: none;
  fill: color-mix(in srgb, #fff calc(var(--on) * 100%), #3a4562);
}

/* La grille : à gauche le titre, le texte du profil actif, les numéros ;
   à droite la carte active (la case), la rangée qui part vers la droite.
   Les profils se superposent tous sur toute la grille (subgrid) : leur
   texte dans la colonne de gauche, leur carte dans la case. */
.profiles.is-pinned .profiles__in {
  display: grid;
  grid-template-columns: clamp(300px, 34%, 440px) minmax(0, 1fr);
  grid-template-rows: minmax(64px, 1fr) auto auto auto minmax(32px, 1fr);
  column-gap: clamp(56px, 8vw, 140px);
  width: 100%;
  height: 100%;
}
.profiles.is-pinned .profiles__head { grid-area: 2 / 1; }
.profiles.is-pinned .stitle { font-size: clamp(2rem, 3.2vw, 3rem); }
.profiles.is-pinned .profiles__lead {
  grid-area: 3 / 1;
  align-self: start;
  margin-top: clamp(24px, 4svh, 40px);
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.profiles.is-pinned.has-active .profiles__lead {
  opacity: 0;
  transform: translateY(-10px);
}
.profiles.is-pinned .profiles__list {
  grid-area: 1 / 1 / -1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  gap: normal;             /* les gouttières de la grille parente */
  margin: 0;
  pointer-events: none;
}
.profiles.is-pinned .profile {
  grid-area: 1 / 1 / -1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  gap: normal;
}
.profiles.is-pinned .profile__card {
  grid-area: 1 / 2 / -1 / 3;
  align-self: center;
  justify-self: start;
  width: var(--card-w);
  height: var(--card-h);
  aspect-ratio: auto;
  transform-origin: 50% 0;
  will-change: transform;
  pointer-events: auto;
  transition: none;
}
.profiles.is-pinned .profile__copy {
  grid-area: 3 / 1;
  align-self: start;
  margin-top: clamp(24px, 4svh, 40px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.2s, transform 0.25s;
}
.profiles.is-pinned .profile.is-active .profile__copy {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.45s 0.08s var(--ease-out), transform 0.55s 0.08s var(--ease-out);
}
/* Le texte du profil actif : « 02 / 06 » avec un trait jaune, le profil en
   grand (la première ligne fine), le défi, la présentation, le bouton. */
.profiles.is-pinned .profile__count,
.profiles.is-pinned .profile__name {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}
.profiles.is-pinned .profile__count {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.profiles.is-pinned .profile__count::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
}
.profiles.is-pinned .profile__count > span[aria-hidden] { color: var(--s3-faint); }
.profiles.is-pinned .profile__name {
  margin: 14px 0 0;
  font-size: clamp(1.75rem, 2.5vw, 2.375rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.profiles.is-pinned .profile__pre { font-weight: 300; color: var(--s3-text); }
.profiles.is-pinned .profile__goal { margin-top: 16px; }

/* Les numéros, sous le texte : un clic amène le profil sous la lumière. */
.profiles.is-pinned .profiles__steps {
  grid-area: 4 / 1;
  display: flex;
  gap: 6px;
  margin-top: clamp(28px, 5svh, 48px);
}
.profiles__steps button {
  width: 42px;
  padding: 10px 0 0;
  border: 0;
  border-top: 2px solid rgb(22 33 61 / 0.14);
  background: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: left;
  font-variant-numeric: tabular-nums;
  color: var(--s3-faint);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.profiles__steps button:hover { color: var(--ink); }
.profiles__steps button[aria-current] {
  border-top-color: var(--gold);
  color: var(--ink);
}

/* Écrans bas : on resserre le texte. */
@media (max-height: 780px) {
  .profiles.is-pinned .profiles__in { grid-template-rows: minmax(52px, 1fr) auto auto auto minmax(20px, 1fr); }
  .profiles.is-pinned .stitle { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
  .profiles.is-pinned .profile__name { font-size: clamp(1.5rem, 2.2vw, 2rem); }
  .profiles.is-pinned .profile__goal { font-size: 1.0625rem; }
  .profiles.is-pinned .profile__text { font-size: 0.9375rem; }
}

/* ---------- Mobile : la même scène, à la verticale ----------
   Le projecteur sur son rail est en haut ; dessous, la case : la carte
   active, centrée, avec la bande des cartes déjà vues au-dessus d'elle
   (leurs numéros) et la suivante qui dépasse à droite. Le texte du profil
   est sous la carte ; avant la première carte, le titre y est à sa place
   et lui laisse la leur. La section reste à l'écran le temps du
   défilement, comme sur grand écran. */
@media (max-width: 759px) {
  .profiles.is-pinned .profiles__pin {
    /* la carte prend la place que laissent le haut (150 px) et le texte (≈ 270 px) */
    --card-h: clamp(190px, calc(100svh - 440px), min(46svh, 78vw));
    --card-w: calc(var(--card-h) * 0.9);
    --band: 24px;          /* la bande visible d'une carte déjà vue (le JS la lit) */
    --lamp-room: 78px;     /* le rail et le projecteur */
    --pile-room: calc(3 * var(--band));
    padding: 0 var(--pad-x);
  }
  .profiles.is-pinned .profiles__rail { top: 10px; height: 5px; }
  .profiles.is-pinned .profiles__lamp {
    top: 10px;
    width: 56px;
    height: 67px;
    margin-left: -28px;
  }
  .profiles.is-pinned .profiles__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: calc(var(--lamp-room) + var(--pile-room)) var(--card-h) auto auto minmax(0, 1fr);
    column-gap: 0;
    padding-bottom: 12px;
  }
  .profiles.is-pinned .profiles__head {
    grid-area: 3 / 1;
    margin-top: 20px;
    transition: opacity 0.3s, transform 0.4s var(--ease-out);
  }
  .profiles.is-pinned.has-active .profiles__head {
    opacity: 0;
    transform: translateY(-10px);
  }
  .profiles.is-pinned .profiles__eyebrow { margin-bottom: 12px; }
  .profiles.is-pinned .stitle { font-size: clamp(1.5rem, 6.6vw, 1.875rem); }
  .profiles.is-pinned .profiles__lead {
    grid-area: 4 / 1;
    margin-top: 12px;
    font-size: 1rem;
  }
  .profiles.is-pinned .profile__card {
    grid-area: 2 / 1;
    align-self: start;
    justify-self: center;
  }
  .profiles.is-pinned .profile__n { top: 4px; left: 14px; font-size: 1.0625rem; }
  .profiles.is-pinned .profile__label { right: 14px; bottom: 14px; left: 14px; font-size: 1.25rem; }
  .profiles.is-pinned .profile__copy {
    grid-area: 3 / 1 / 6 / 2;
    margin-top: 20px;
  }
  .profiles.is-pinned .profile__name { margin-top: 10px; font-size: 1.5rem; }
  .profiles.is-pinned .profile__goal { margin-top: 10px; font-size: 1.0625rem; }
  .profiles.is-pinned .profile__text { margin-top: 8px; font-size: 0.9375rem; line-height: 1.45; }
  .profiles.is-pinned .profile__cta { margin-top: 16px; }
  .profiles.is-pinned .profiles__steps { display: none; }
}
/* Téléphone bas (barre d'adresse comprise) : on resserre le haut et le texte. */
@media (max-width: 759px) and (max-height: 700px) {
  .profiles.is-pinned .profiles__pin {
    --band: 20px;
    --lamp-room: 66px;
    --card-h: clamp(150px, calc(100svh - 400px), min(44svh, 78vw));
  }
  .profiles.is-pinned .profiles__lamp { width: 48px; height: 58px; margin-left: -24px; }
  .profiles.is-pinned .profile__copy { margin-top: 14px; }
  .profiles.is-pinned .profile__name { margin-top: 8px; font-size: 1.3125rem; }
  .profiles.is-pinned .profile__goal { margin-top: 8px; font-size: 1rem; }
  .profiles.is-pinned .profile__text { margin-top: 6px; font-size: 0.875rem; line-height: 1.4; }
  .profiles.is-pinned .profile__cta { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .profile__card,
  .profiles__lead,
  .profile__copy { transition: none; }
}

/* =========================================================
   S4 — Quatre façons de progresser : les quatre billets.
   D'après une vidéo de référence (le billet Figma Config pendu à son
   cordon, qu'on attrape et qui se balance ; à côté, la confirmation, puis
   le déroulé de la journée), habillée en scène de théâtre : sur le mur
   clair, une perche des cintres (la barre bleu nuit) ; quatre billets y
   pendent, chacun à son anneau et à son cordon.
   - Les billets descendent des cintres l'un après l'autre quand la scène
     entre à l'écran, se posent et se balancent ; ils y remontent quand on
     remonte la page (JS, transformations en ligne sur .ticket__hang).
   - Billet choisi (`is-open` sur la section, JS) : les trois autres
     remontent, lui glisse à gauche, un peu agrandi ; le texte apparaît à
     droite (sous 760 px : le billet en haut, le texte dessous).
   - La géométrie du billet est en cqw de sa largeur (--tw, convertie en px
     par @property) : tout se met à l'échelle avec lui. Hauteurs, en
     centièmes de largeur : bord 2,6 / tête 40 / infos 27 / affiche 88 /
     talon 20 / code 28 / bord 2,6 = 208,2. Les encoches des côtés sont
     sur les lignes tête|infos (20,46 %) et talon|code (85,30 %).
   - Sans JS : billets posés, textes à la suite. Mouvement réduit : pas de
     balancement ni de glissement, les étapes s'enchaînent sans mouvement.
   Ne pas utiliser --lit, --on, --spot, --open ni --s4-on (déjà pris).
   ========================================================= */
@property --tw {
  syntax: "<length>";
  inherits: true;
  initial-value: 260px;
}

.tickets {
  --tk: var(--night);                       /* le carton des billets : le bleu nuit de la hero (2026-10-06) */
  --tk-ink: var(--paper);                   /* l'encre du billet */
  --tk-soft: rgb(255 255 255 / 0.78);       /* les petites mentions */
  --tk-rule: rgb(255 255 255 / 0.4);        /* les filets entre les cases */
  --tk-line: rgb(255 255 255 / 0.26);       /* les pointillés entre les parties */
  --steel: #4a64a8;
  --s4-text: #4b5569;
  --s4-faint: #7d8597;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(88px, 10vw, 144px) var(--pad-x) clamp(64px, 7vw, 104px);
  color: var(--ink);
  background: var(--wall);
}
.tickets__in {
  max-width: 1240px;
  margin: 0 auto;
  container-type: inline-size;
}
.tickets__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
}
.tickets__lead {
  max-width: 30ch;
  font-size: 1.0625rem;
  color: var(--s4-text);
}

/* ---------- La scène : perche, rangée, panneau ---------- */
.tickets__stage {
  --gap: clamp(20px, 3vw, 48px);
  --rod-h: 6px;
  --hook: 10px;                               /* de l'axe de la perche au cordon */
  --cord: clamp(40px, 7svh, 72px);
  --tw: clamp(140px, min(calc((100cqw - 3 * var(--gap)) / 4), calc((100svh - 300px) / 2.08)), 260px);
  --th: calc(var(--tw) * 2.082);
  --d0: calc(var(--hook) + var(--cord) - var(--tw) * 0.101);  /* de l'axe au haut du billet */
  --focus-x: 0.24;                            /* centre du billet choisi, en part de la largeur */
  --focus-scale: 1.06;

  position: relative;
  min-height: calc(var(--rod-h) / 2 + var(--focus-scale) * (var(--d0) + var(--th)) + var(--tw) * 0.14);
  margin-top: clamp(44px, 5vw, 72px);
  /* Les billets hissés disparaissent derrière la perche, au ras de son bord
     haut ; à gauche, à droite et en bas, rien n'est coupé. */
  clip-path: inset(0 -100vw -100vh);
}
.tickets__rod {
  position: absolute;
  z-index: 3;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: var(--rod-h);
  background: var(--ink);
  box-shadow: 0 3px 8px rgb(11 22 38 / 0.16);
}
/* Un peu de lumière sur le mur derrière le billet choisi. */
.tickets__glow {
  position: absolute;
  z-index: -1;
  top: 0;
  left: calc(var(--focus-x) * 100% - var(--tw) * 1.6);
  width: calc(var(--tw) * 3.2);
  height: 100%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0));
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.tickets.is-open .tickets__glow { opacity: 1; transition-duration: 0.8s; transition-delay: 0.3s; }

.tickets__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, var(--tw));
  justify-content: space-between;
  padding-top: calc(var(--rod-h) / 2);
}
.ticket {
  position: relative;
  z-index: 1;
  /* L'ombre est portée par le li : elle reste vers le bas quand le billet
     tourne et n'est pas coupée par le masque du papier. */
  filter: drop-shadow(0 16px 14px rgb(11 22 38 / 0.17));
  /* La case du li reste à sa place quand le billet bouge : seul le billet
     (déplacé) reçoit les clics, la case vide ne couvre pas le panneau. */
  pointer-events: none;
}
.ticket.is-chosen { z-index: 2; }
.ticket.is-held { z-index: 4; }           /* le dernier attrapé passe devant ses voisins */

.ticket__hang {
  position: relative;
  display: block;
  width: var(--tw);
  margin-top: calc(-1 * var(--drop, 0px));
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  cursor: grab;
  pointer-events: auto;
  transform-origin: 50% 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ticket__hang:active { cursor: grabbing; }
.ticket__hang:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
/* Avant le JS, les billets attendent dans les cintres. */
.js .ticket__hang { transform: translateY(calc(-100% - 80px)); }
.tickets.is-dragging .ticket__hang { cursor: grabbing; }

/* L'anneau passe derrière la perche ; le cordon, deux brins qui se
   rejoignent dans l'œillet du billet. */
.ticket__hook {
  position: absolute;
  top: -4px;
  left: calc(50% - 7px);
  width: 14px;
  height: calc(var(--hook) + 4px);
  border: 2.5px solid var(--ink);
  border-radius: 7px;
}
.ticket__cord {
  position: relative;
  z-index: 2;
  display: block;
  width: 12px;
  height: calc(var(--cord) + var(--drop, 0px) + 3px);
  margin: calc(var(--hook) - 3px) auto 0;
  overflow: visible;
  stroke: var(--ink);
  stroke-width: 1.6;
}
.ticket__cord path { vector-effect: non-scaling-stroke; }

/* ---------- Le billet ---------- */
.ticket__paper {
  --n: calc(var(--tw) * 0.034);              /* rayon des encoches */

  position: relative;
  z-index: 1;
  display: block;
  width: var(--tw);
  margin-top: calc(var(--tw) * -0.101);      /* le cordon finit dans l'œillet */
  container-type: inline-size;
  font-family: var(--font);
  line-height: 1.2;
  color: var(--tk-ink);
  background: linear-gradient(var(--tk) 0 0) 0 calc(var(--tw) * 0.026) / 100% calc(100% - var(--tw) * 0.052) no-repeat;
  -webkit-mask:
    radial-gradient(circle var(--n) at 0 20.46%, #0000 98%, #000),
    radial-gradient(circle var(--n) at 100% 20.46%, #0000 98%, #000),
    radial-gradient(circle var(--n) at 0 85.3%, #0000 98%, #000),
    radial-gradient(circle var(--n) at 100% 85.3%, #0000 98%, #000);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--n) at 0 20.46%, #0000 98%, #000),
    radial-gradient(circle var(--n) at 100% 20.46%, #0000 98%, #000),
    radial-gradient(circle var(--n) at 0 85.3%, #0000 98%, #000),
    radial-gradient(circle var(--n) at 100% 85.3%, #0000 98%, #000);
  mask-composite: intersect;
}
:where(.ticket__paper > span) { display: block; position: relative; }
/* Bords dentelés, en haut et en bas. */
.ticket__edge {
  height: 2.6cqw;
  background: conic-gradient(from 135deg at 50% 0, var(--tk) 90deg, #0000 0) 50% 0 / 3.6cqw 100% repeat-x;
}
.ticket__edge--end {
  background: conic-gradient(from -45deg at 50% 100%, var(--tk) 90deg, #0000 0) 50% 100% / 3.6cqw 100% repeat-x;
}
/* Pointillés entre les parties. */
.ticket__info,
.ticket__poster,
.ticket__stub,
.ticket__code {
  background: repeating-linear-gradient(90deg, var(--tk-line) 0 1.7cqw, #0000 0 3.1cqw) 0 0 / 100% 0.42cqw no-repeat;
}

.ticket__head {
  height: 40cqw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 8cqw 6cqw;
}
.ticket__eyelet {
  position: absolute;
  top: 3.7cqw;
  left: calc(50% - 3.8cqw);
  width: 7.6cqw;
  height: 7.6cqw;
  border-radius: 50%;
  /* un œillet en laiton, qui se voit sur le carton nuit */
  background: radial-gradient(circle, var(--wall) 0 1.9cqw, var(--gold) calc(1.9cqw + 0.5px));
  box-shadow: inset 0 0 0 0.5cqw #a87f06;
}
.ticket__name {
  max-width: 60cqw;
  font-size: 9.4cqw;
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.ticket__name small {
  display: block;
  margin-bottom: 1.2cqw;
  font-size: 3.9cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ticket__pill {
  align-self: flex-start;
  margin-top: 2.6cqw;
  padding: 0.9cqw 3.2cqw 1.1cqw;
  border: 0.5cqw solid currentColor;
  border-radius: 99px;
  font-size: 4.3cqw;
  font-weight: 500;
  white-space: nowrap;
}
/* La toque H&C, à la place du logo de la référence. */
.ticket__mark {
  position: absolute;
  top: 12cqw;
  right: 7cqw;
  width: 19cqw;
  height: 19cqw;
  background: url(../img/favicon-hc.png) center / contain no-repeat;
}

.ticket__info {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  height: 27cqw;
  padding: 4.6cqw 7cqw 0;
  font: 500 3.25cqw/1.32 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tk-soft);
}
.ticket__info > span + span {
  padding-left: 4cqw;
  border-left: 0.35cqw solid var(--tk-rule);
}

.ticket__poster {
  height: 88cqw;
  padding: 4.6cqw 6cqw;
}
.ticket__art {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 2.4cqw;
  background: var(--ink);
  color: var(--paper);
}
/* L'affiche : la photo de la formule (la même que dans le panneau), le
   titre en bas sur un dégradé nuit (2026-10-06). Le nom du programme est
   passé en bas du billet, à la place du code-barres. */
.ticket__pic {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 35%);
}
.ticket__art::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(#0000 42%, rgb(11 22 38 / 0.9) 80%);
}
.ticket__title {
  position: absolute;
  z-index: 1;
  bottom: 5.6cqw;
  left: 6cqw;
  right: 6cqw;
  font-size: 8.8cqw;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.ticket__stub {
  display: grid;
  grid-template-columns: 0.95fr 1.1fr 1.15fr;
  height: 20cqw;
  padding: 3.8cqw 6cqw 0;
  font: 600 3cqw/1.18 var(--mono);
  text-transform: uppercase;
}
.ticket__stub > span + span {
  padding-left: 2.6cqw;
  border-left: 0.35cqw solid var(--tk-rule);
}
.ticket__stub > span:not(:last-child) { padding-right: 1.6cqw; }
.ticket__stub small {
  display: block;
  margin-bottom: 1.3cqw;
  color: var(--tk-soft);
  font-size: 2.3cqw;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.ticket__code {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  height: 28cqw;
  padding: 4.6cqw 6cqw 2.4cqw;
  column-gap: 4cqw;
}
/* Le nom du programme, à la place du code-barres (2026-10-06). */
.ticket__prog {
  grid-row: 1 / 3;
  align-self: center;
  font-size: 5.6cqw;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.ticket__prog small {
  display: block;
  margin-top: 1.5cqw;
  font: 500 3.1cqw/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tk-soft);
}
.ticket__scan {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  padding-left: 3.6cqw;
  border-left: 0.35cqw solid var(--tk-rule);
  font: 600 2.8cqw/1.2 var(--mono);
  text-transform: uppercase;
}
.ticket__scan svg {
  width: 6cqw;
  height: 6cqw;
  margin: 1cqw 0 0 3cqw;
  stroke-width: 2.2;
}
.ticket__scan small {
  margin-top: auto;
  font-size: 2.2cqw;
  letter-spacing: 0.02em;
}

/* ---------- Le panneau, à droite du billet choisi ----------
   La photo de la formule prend tout le panneau ; le texte est posé
   directement dessus, en bas, sur un dégradé nuit (plus de carte blanche,
   2026-10-06). Au déroulé, un voile nuit couvre la photo et les étapes
   prennent toute sa hauteur. */
.tickets__detail {
  position: absolute;
  z-index: 2;
  top: calc(var(--rod-h) + 22px);           /* les onglets à hauteur du bouton retour */
  bottom: 0;
  left: calc(var(--focus-x) * 100% + var(--focus-scale) * var(--tw) / 2 + clamp(28px, 4vw, 64px));
  right: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0s 0.2s;
}
.tickets.is-open .tickets__detail {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0.25s;
}

.tickets__switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  margin-bottom: 14px;
}
.tickets__tab {
  padding: 6px 13px 7px;
  border: 1px solid rgb(22 33 61 / 0.16);
  border-radius: 99px;
  background: rgb(255 255 255 / 0.55);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--s4-text);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.tickets__tab:hover { border-color: rgb(22 33 61 / 0.5); color: var(--ink); }
.tickets__tab[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.offer {
  display: grid;
  flex: 1;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 0;
}
.offer[hidden] { display: none; }
.offer:focus { outline: none; }
.offer:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; }
.offer.is-plan .offer__info,
.offer:not(.is-plan) .offer__plan { display: none; }

/* La photo et le texte occupent la même case : la photo remplit le panneau. */
.offer__photo {
  position: relative;
  grid-area: 1 / 1;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--ink);
}
.offer__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 35%);
  animation: offer-photo-in 0.9s 0.15s var(--ease-out) both;
}
/* Le dégradé qui porte le texte (bas), et le voile du déroulé (toute la photo). */
.offer__photo::before,
.offer__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.offer__photo::after {
  background:
    radial-gradient(90% 65% at 0 100%, rgb(11 22 38 / 0.5), #0000 75%),
    linear-gradient(#0000 30%, rgb(11 22 38 / 0.55) 52%, rgb(11 22 38 / 0.92));
}
.offer__photo::before {
  z-index: 1;
  background: rgb(11 22 38 / 0.78);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.offer.is-plan .offer__photo::before { opacity: 1; }

/* Le texte, en bas de la photo ; au déroulé, sur toute sa hauteur. */
.offer__card {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 32px clamp(24px, 3vw, 40px) 26px;
  color: var(--paper);
  animation: offer-card-in 0.55s 0.2s var(--ease-out) both;
}
.offer.is-plan .offer__card {
  align-self: stretch;
  padding-top: 28px;
}

/* Vue 1 : la formule choisie (la confirmation de la vidéo). */
.offer__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.offer__badge {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  stroke: none;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.3));
}
.offer__rosette { fill: var(--gold); }
.offer__check { fill: none; stroke: var(--ink); stroke-width: 3.4; }
.offer__ok {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}
.offer__title {
  max-width: 24ch;
  margin: 6px 0 0;
  font-size: clamp(1.5rem, 0.9rem + 1.4vw, 2.25rem);
  font-weight: 400;
  line-height: 1.12;
  color: rgb(255 255 255 / 0.86);
  text-wrap: balance;
}
.offer__title strong { font-weight: 600; color: var(--paper); }
.offer__text {
  max-width: 54ch;
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.84);
}
.offer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-top: 20px;
}
.offer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 28px;
  border: 0;
  border-radius: 99px;
  background: var(--gold);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, transform 0.3s var(--ease-out);
}
.offer__btn:hover { background: #f0bf22; }
.offer__btn:active { transform: scale(0.98); }
.offer__link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s;
}
.offer__link:hover { text-decoration-color: var(--paper); }
.offer__link span { display: inline-block; transition: transform 0.3s var(--ease-out); }
.offer__link:hover span { transform: translateX(3px); }
.offer__note {
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: stretch;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.72);
}
.offer__note svg { flex: none; width: 15px; height: 15px; }

/* Vue 2 : le déroulé (le planning de la vidéo). */
.offer__plan {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.offer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(255 255 255 / 0.18);
}
.offer__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 6px 9px;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.12);
  font-size: 1rem;
  font-weight: 500;
}
.offer__chip-mark {
  width: 18px;
  height: 18px;
  background: url(../img/favicon-hc.png) center / contain no-repeat;
}
.offer__when {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
}
.offer__when svg { width: 19px; height: 19px; color: rgb(255 255 255 / 0.6); }
.offer__when span { margin: 0 2px; color: rgb(255 255 255 / 0.6); }
.offer__steps {
  --tcol: 7.6rem;                             /* la colonne des moments */
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 18px 0 8px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: none;
  overscroll-behavior: contain;
  -webkit-mask: linear-gradient(#000 calc(100% - 22px), #0000);
  mask: linear-gradient(#000 calc(100% - 22px), #0000);
}
.offer__steps::-webkit-scrollbar { display: none; }
.offer__steps li {
  position: relative;
  display: grid;
  grid-template-columns: var(--tcol) 1fr;
  column-gap: 36px;
  padding-bottom: 14px;
}
.offer__steps li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: calc(var(--tcol) + 10px);
  width: 15px;
  height: 15px;
  border: 3px solid rgb(255 255 255 / 0.32);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.5);
}
.offer__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 2px;
  left: calc(var(--tcol) + 17px);
  border-left: 1.5px solid rgb(255 255 255 / 0.22);
}
.offer__steps li:first-child::before { border-color: rgb(226 174 12 / 0.45); background: var(--gold); }
.step__time {
  grid-row: span 2;
  padding-top: 3px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}
.step__title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}
.step__sub {
  margin-top: 2px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.75);
}
.offer__plan .offer__btn {
  flex: none;
  align-self: flex-start;
  margin-top: 12px;
}

/* Apparition : la photo s'allume, le texte monte, élément
   après élément ; plus vif quand on change de vue sur place (`is-quick`, JS). */
.offer__info > *,
.offer__plan > * { animation: offer-in 0.45s calc(0.36s + var(--k, 0) * 45ms) var(--ease-out) both; }
.tickets__detail.is-quick .offer__info > *,
.tickets__detail.is-quick .offer__plan > * { animation-delay: calc(var(--k, 0) * 40ms); }
.offer__info > :nth-child(2), .offer__plan > :nth-child(2) { --k: 1; }
.offer__info > :nth-child(3), .offer__plan > :nth-child(3) { --k: 2; }
.offer__info > :nth-child(4) { --k: 3; }
.offer__info > :nth-child(5) { --k: 4; }
.offer__info > :nth-child(6) { --k: 5; }
@keyframes offer-in {
  from { opacity: 0; transform: translateY(8px); }
}
@keyframes offer-card-in {
  from { opacity: 0; transform: translateY(18px); }
}
@keyframes offer-photo-in {
  from { opacity: 0; transform: scale(1.06); filter: brightness(0.35); }
}

/* Le bouton retour, en haut à gauche (comme dans la vidéo). */
.tickets__back {
  position: absolute;
  z-index: 4;
  top: calc(var(--rod-h) + 22px);
  left: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgb(22 33 61 / 0.08);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 6px 18px rgb(11 22 38 / 0.1);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.3s var(--ease-out), visibility 0s 0.3s;
}
.tickets.is-open .tickets__back {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s 0.3s, transform 0.4s 0.3s var(--ease-out), background-color 0.2s;
}
.tickets__back:hover { background: #f6f3ec; }
.tickets__back svg { width: 20px; height: 20px; stroke-width: 2; }

.tickets__more {
  position: relative;
  margin-top: clamp(20px, 3vw, 36px);
  font-size: 0.9375rem;
  text-align: center;
  color: var(--s4-text);
}
.tickets__more a {
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s;
}
.tickets__more a:hover { text-decoration-color: var(--ink); }
.tickets__more a:focus-visible { outline-color: var(--ink); }

/* Tablette : le billet choisi un peu plus grand. */
@media (max-width: 1023px) {
  .tickets__stage { --focus-scale: 1.12; }
}
/* Moins de place : la carte se resserre. */
@media (max-width: 1023px), (max-height: 820px) {
  .tickets__switch { margin-bottom: 10px; }
  .offer__card { padding: 24px 24px 18px; }
  .offer__badge { width: 40px; height: 40px; margin-bottom: 10px; }
  .offer__title { font-size: 1.5rem; }
  .offer__text { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; }
  .offer__actions { margin-top: 16px; }
  .offer__btn { min-height: 46px; padding: 10px 24px; }
  .offer__note { margin-top: 14px; padding-top: 10px; }
  .offer.is-plan .offer__card { padding-top: 20px; }
  .offer__head { padding-bottom: 10px; }
  .offer__steps { --tcol: 7.6rem; padding-top: 14px; }
  .step__time { letter-spacing: 0.05em; }
  .offer__steps li { column-gap: 32px; padding-bottom: 10px; }
}
/* Tablette en portrait : étapes sur une colonne ; billet ouvert, la scène
   grandit pour que la photo garde le visage au-dessus du texte. */
@media (min-width: 760px) and (max-width: 1023px) {
  .tickets__stage { transition: min-height 0.5s var(--ease-out); }
  .tickets.is-open .tickets__stage {
    min-height: max(calc(var(--rod-h) / 2 + var(--focus-scale) * (var(--d0) + var(--th)) + var(--tw) * 0.14), 640px);
  }
  .offer__steps { --tcol: 0px; }
  .offer__steps li { grid-template-columns: 1fr; padding-left: 30px; column-gap: 0; }
  .offer__steps li::before { left: 0; }
  .offer__steps li:not(:last-child)::after { left: 7px; }
  .step__time { grid-row: auto; padding-top: 0; }
}

/* Mobile : deux billets par ligne. Ceux du bas pendent à la même perche,
   au bout d'un cordon plus long qui passe derrière ceux du haut. Billet
   choisi en haut, au centre ; le texte dessous, dans le flux. */
@media (max-width: 759px) {
  .tickets__head { gap: 14px; }
  .tickets__stage {
    --gap: 18px;
    --row-gap: 22px;
    --cord: 30px;
    --tw: calc((100cqw - var(--gap)) / 2);
    --focus-x: 0.5;
    --focus-scale: 1.2;

    min-height: 0;
    margin-top: 36px;
  }
  .tickets__row {
    grid-template-columns: repeat(2, var(--tw));
    row-gap: var(--row-gap);
  }
  .ticket:nth-child(-n + 2) { z-index: 2; }
  .ticket:nth-child(n + 3) { --drop: calc(var(--d0) + var(--th) + var(--row-gap)); }
  .ticket.is-chosen { z-index: 3; }

  .tickets__detail {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    display: none;
    height: auto;
    /* Le texte commence sous le billet agrandi (les billets du bas sont
       remontés dans les cintres). */
    margin-top: calc((var(--focus-scale) - 2) * (var(--d0) + var(--th)) + 28px - var(--row-gap));
  }
  .tickets.is-open .tickets__detail { display: flex; }
  .tickets__switch {
    flex-wrap: nowrap;
    min-height: 0;
    margin: 0 calc(-1 * var(--pad-x)) 12px;
    padding: 2px var(--pad-x);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tickets__switch::-webkit-scrollbar { display: none; }
  .tickets__tab { flex: none; }
  /* La photo garde une hauteur de portrait ; elle s'allonge si le texte (ou le déroulé) est plus long. */
  /* Sur téléphone, le haut de la photo reste dégagé (--ph) ; le texte commence sur son dégradé. */
  .offer { --ph: min(88vw, 400px); grid-template-rows: minmax(min(118vw, 540px), auto); }
  .offer__photo { background: var(--night); }
  .offer__photo img { bottom: auto; height: calc(var(--ph) + 140px); }
  .offer__photo::after {
    background: linear-gradient(#0000 calc(var(--ph) - 170px), rgb(11 22 38 / 0.72) calc(var(--ph) - 20px), var(--night) calc(var(--ph) + 130px));
  }
  .offer__card { padding: calc(var(--ph) - 60px) 20px 20px; }
  .offer__btn { flex: 1 1 auto; }
  .offer__steps {
    flex: none;
    overflow: visible;
    -webkit-mask: none;
    mask: none;
  }
  .offer__steps li { grid-template-columns: 1fr; padding-left: 30px; column-gap: 0; }
  .offer__steps li::before { left: 0; }
  .offer__steps li:not(:last-child)::after { left: 7px; }
  .step__time { grid-row: auto; padding-top: 0; }
  .tickets__back { top: calc(var(--rod-h) + 16px); width: 42px; height: 42px; }
}

/* Sans JS : billets posés, toutes les formules décrites à la suite. */
html:not(.js) .tickets__stage { min-height: 0; }
html:not(.js) .tickets__detail {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 48px 40px;
  height: auto;
  margin-top: 56px;
  opacity: 1;
  visibility: visible;
}
html:not(.js) .offer { grid-template-rows: minmax(420px, auto); }
html:not(.js) .offer__card { animation: none; }
html:not(.js) .offer .offer__plan { display: flex; margin-top: 28px; }
html:not(.js) .offer__steps { overflow: visible; -webkit-mask: none; mask: none; }
html:not(.js) .offer__photo img { animation: none; }
html:not(.js) .tickets__switch,
html:not(.js) .tickets__back,
html:not(.js) [data-s4-plan] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tickets__stage *,
  .tickets__stage *::before,
  .tickets__stage *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   S5 — Les prochaines dates : le globe.
   D'après une référence « We are worldwide » (un panneau gris clair : quatre
   cartes de chiffres en haut, un grand globe coupé dessous, régions en
   couleur et points de présence, légende, carte vitrée en bas avec le
   titre et la liste des pays), habillée en scène de théâtre :
   - les quatre cartes sont les quatre prochaines dates (le grand chiffre
     devient la date, le « + » rouge le mois, en pastille jaune) ; la carte
     choisie (`aria-pressed`) passe en blanc, soulignée de jaune ;
   - le globe (canvas, JS) : pays où H&C intervient en jaune, villes des
     dates en points blancs ; il tourne vers la ville de la date choisie,
     qu'un projecteur éclaire ; sa photo s'y épingle (carte postale `.pc`,
     posée par le JS : --x/--y = la ville, en px dans la scène) ;
   - la carte vitrée du bas de la référence est retirée (2026-10-03) : le
     bouton de l'agenda et le lien du calendrier passent dans l'en-tête, à
     droite, sous le chapô ; la légende reste en bas de la scène, à droite.
   - Arrivée (`is-lit`, JS) : le globe tourne depuis l'Atlantique, les pays
     se colorent, les cartes montent ; tout repart à zéro hors de l'écran.
   - Le panneau s'ouvre sur toute la largeur de l'écran (2026-10-06) : il
     est posé bord à bord (marges de -`--bleed`) et découpé à la colonne
     (`clip-path: inset(0 var(--clip0))`, rectangulaire), ses coins arrondis
     sont deux caches couleur du fond (`.dates__corner`). Au défilement, le
     JS desserre la découpe jusqu'aux bords de l'écran (les caches suivent
     et s'effacent) et le globe grandit autour du point de mire ; il se
     referme en sortant, dans les deux sens.
   - Sous 1024 px : les cartes défilent sur une ligne, au-dessus du globe.
   - Sans JS : pas de globe ; cartes et photos à la suite.
   ========================================================= */
@property --bleed {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --clip0 {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.dates {
  --s5-text: #4b5569;
  --s5-faint: #7d8597;
  /* du bord de l'écran au bord de la colonne ; replié, le panneau est découpé à --clip0 */
  --bleed: max(var(--pad-x), (100vw - 1240px) / 2);
  --clip0: round(var(--bleed), 1px);
  --s5-r: 28px;                               /* le rayon des coins, replié */
  --s5-inset: clamp(16px, (100vw - 2 * var(--clip0)) * 0.046, 64px);

  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(88px, 10vw, 144px) var(--pad-x) clamp(72px, 8vw, 120px);
  color: var(--ink);
  background: #fff;
}
.dates__in {
  max-width: 1240px;
  margin: 0 auto;
}
.dates__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
}
.dates__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.dates__lead {
  max-width: 32ch;
  font-size: 1.0625rem;
  color: var(--s5-text);
}

/* ---------- Le panneau : le mur, le globe, les cartes, la carte vitrée ---------- */
.dates__stage {
  position: relative;
  height: clamp(600px, 52vw, 680px);
  margin: clamp(32px, 4vw, 56px) calc(-1 * var(--bleed)) 0;
  background: var(--wall);
  overflow: hidden;
  clip-path: inset(0 var(--clip0));
}
/* Les coins arrondis : un cache de la couleur du fond, à gauche et à droite. */
.dates__corner {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  left: var(--clip0);
  width: var(--s5-r);
  background: #fff;
  pointer-events: none;
  -webkit-mask:
    radial-gradient(circle at 100% 100%, #0000 calc(var(--s5-r) - 0.5px), #000 var(--s5-r)) 0 0 / 100% var(--s5-r) no-repeat,
    radial-gradient(circle at 100% 0, #0000 calc(var(--s5-r) - 0.5px), #000 var(--s5-r)) 0 100% / 100% var(--s5-r) no-repeat;
  mask:
    radial-gradient(circle at 100% 100%, #0000 calc(var(--s5-r) - 0.5px), #000 var(--s5-r)) 0 0 / 100% var(--s5-r) no-repeat,
    radial-gradient(circle at 100% 0, #0000 calc(var(--s5-r) - 0.5px), #000 var(--s5-r)) 0 100% / 100% var(--s5-r) no-repeat;
  will-change: translate, opacity;
}
.dates__corner--r {
  left: auto;
  right: var(--clip0);
  scale: -1 1;
}
.dates__globe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s;
  will-change: scale;
}
.dates__globe.is-ready { opacity: 1; }
/* Hors de l'écran (le JS pose .is-away) : le canvas est caché, le défilement plus léger. */
.dates__stage.is-away .dates__globe { visibility: hidden; }

/* ---------- Les trois dates (calendrier workshops 2027) ---------- */
.dates__list {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: calc(var(--clip0) + var(--s5-inset));
  right: calc(var(--clip0) + var(--s5-inset));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.date { display: flex; }
.date__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 18px 20px 16px;
  border: 1px solid rgb(255 255 255 / 0.8);
  border-radius: 18px;
  background: rgb(255 255 255 / 0.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 1px 2px rgb(22 33 61 / 0.05);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.4s, transform 0.4s var(--ease-out);
}
.date__btn:hover { background: rgb(255 255 255 / 0.85); }
.date__btn[aria-pressed="true"] {
  background: #fff;
  box-shadow: 0 18px 36px -16px rgb(22 33 61 / 0.32);
}
.date__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.date__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s5-text);
}
.date__icon { flex: none; width: 18px; height: 18px; stroke-width: 1.6; }
/* La date en grand, comme les chiffres de la référence ; le mois en pastille. */
.date__when {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: clamp(2.5rem, 4.3vw, 3.875rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.date__month {
  margin-top: 0.1em;
  padding: 5px 9px 4px;
  border-radius: 99px;
  background: var(--gold);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.date__sub {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--s5-text);
}
.date__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.8125rem;
  font-weight: 500;
}
.date__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- La carte postale, épinglée sur la ville ---------- */
.dates__photos { display: contents; }
.pc {
  --ox: 30px;                       /* à droite du point */
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: clamp(210px, 20vw, 256px);
  margin: 0;
  padding: 7px 7px 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 44px -20px rgb(22 33 61 / 0.5), 0 2px 6px rgb(22 33 61 / 0.08);
  transform: translate(var(--x, -999px), var(--y, 0px)) translate(var(--ox), -50%);
  rotate: -2.5deg;
  scale: 0.9;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, scale 0.4s var(--ease-out), visibility 0s 0.3s;
}
.pc.is-on {
  scale: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s, scale 0.6s var(--ease-out), visibility 0s;
}
/* Le fil, du point à la carte. */
.pc::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: calc(var(--ox) - 8px);
  height: 1.5px;
  background: var(--ink);
  transform-origin: right;
}
.pc img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 9px;
}
.pc figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
  margin: 9px 4px 0;
  font-size: 0.875rem;
  color: var(--s5-text);
}
.pc strong { font-weight: 600; color: var(--ink); }
.pc__link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.pc__link:hover { text-decoration-color: var(--ink); }

/* ---------- La légende, en bas de la scène ---------- */
.dates__legend {
  position: absolute;
  z-index: 3;
  right: calc(var(--clip0) + var(--s5-inset));
  bottom: 16px;
  display: flex;
  gap: 18px;
  margin: 0;
  /* sur une pastille : le globe ouvert passe dessous (2026-10-06) */
  padding: 6px 12px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.78);
  font-size: 0.75rem;
  color: var(--s5-text);
}
.dates__legend span { display: inline-flex; align-items: center; gap: 7px; }
.dates__key {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}
.dates__key--dot {
  background: #fff;
  box-shadow: 0 0 0 1.5px rgb(22 33 61 / 0.45);
}

/* ---------- Le bouton de l'agenda et le lien du calendrier (en-tête) ---------- */
.dates__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
}
.dates__more {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.dates__more:hover { text-decoration-color: var(--ink); }

/* ---------- Arrivée (JS) ---------- */
.dates.is-armed .date,
.dates.is-armed .dates__legend {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.3s, transform 0.3s;
}
.dates.is-armed.is-lit .date {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s calc(0.15s + var(--i) * 0.08s), transform 0.7s calc(0.15s + var(--i) * 0.08s) var(--ease-out);
}
.dates.is-armed.is-lit .dates__legend {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s 0.5s, transform 0.8s 0.5s var(--ease-out);
}

/* ---------- Moins de largeur : les dates sur une ligne qui défile ---------- */
@media (max-width: 1023px) {
  .dates__stage { height: auto; padding-bottom: clamp(380px, 56vw, 460px); }
  .dates__list {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: flex;
    gap: 12px;
    padding: 18px calc(var(--clip0) + var(--s5-inset)) 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 calc(var(--clip0) + var(--s5-inset));
    scrollbar-width: none;
  }
  .dates__list::-webkit-scrollbar { display: none; }
  .date { flex: 0 0 clamp(230px, 38%, 300px); scroll-snap-align: start; }
}
@media (max-width: 759px) {
  /* Replié, le panneau déborde d'une demi-marge de chaque côté. */
  .dates { --clip0: round(var(--pad-x) / 2, 1px); --s5-r: 22px; --s5-inset: 12px; }
  .date { flex-basis: 78%; }
  .date__btn { padding: 16px 16px 14px; }
  .date__when { font-size: 2.75rem; }
  .pc { --ox: 22px; width: 172px; padding: 5px 5px 8px; border-radius: 12px; }
  .pc img { border-radius: 8px; }
  .pc figcaption { margin: 7px 3px 0; font-size: 0.8125rem; }
  .pc__link { font-size: 0.75rem; }
  .dates__stage { padding-bottom: 370px; }
  .dates__legend { left: calc(var(--clip0) + var(--s5-inset)); right: auto; bottom: 12px; gap: 14px; font-size: 0.6875rem; }
  .dates__aside { width: 100%; }
  .dates__actions { width: 100%; }
  .dates__actions .btn { flex: 1 1 auto; justify-content: flex-start; }
}

/* ---------- Sans JS : les dates, les photos et la liste, à la suite ---------- */
html:not(.js) .dates__stage { height: auto; display: grid; gap: 18px; padding: 18px calc(var(--clip0) + var(--s5-inset)); }
html:not(.js) .dates__globe,
html:not(.js) .dates__legend,
html:not(.js) .pc::before { display: none; }
html:not(.js) .dates__list { position: relative; inset: auto; margin: 0; padding: 0 0 4px; }
html:not(.js) .dates__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
html:not(.js) .pc { position: relative; width: auto; transform: none; rotate: none; scale: none; opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .dates *,
  .dates *::before { transition: none !important; }
}

/* =========================================================
   S6 — La méthode H&C : le zoom à travers le décor.
   D'après « Layered Zoom Scroll Effect » / « Telescope Zoom » (Joffrey
   Spitzer, Codrops), choisie par H&C le 2026-10-04 (planche « waouh »,
   piste 4). Sur grand écran comme sur mobile, la section reste à l'écran le
   temps de `--run` (`.is-pinned`, sticky) ; le JS calcule l'avancement et
   pose les variables, donc tout se rejoue à l'envers quand on remonte :
   - la plongée : la fenêtre (`.method__frame`, la photo de l'étape 01)
     naît dans le creux du titre, d'abord pastille aux bouts ronds, et
     grandit jusqu'à l'écran entier (découpe `clip-path`, la photo dedans
     à l'échelle de sa hauteur) ; les deux moitiés du titre longent ses
     bords et sortent ; le chapô s'efface ; les photos éparpillées volent
     vers nous (translateZ, perspective = une hauteur d'écran) et
     s'effacent en nous dépassant ;
   - les étapes : une photo par étape (`.method__plate--1` à `--5`), et le
     même geste à chaque fois (retour H&C du 2026-10-05) : on ressort
     complètement (zoom arrière jusqu'à la vue de départ, titre et photos
     éparpillées revenus), puis on replonge dans une des photos éparpillées
     (`.method__shot--step`, `data-step`), qui montre en vignette la photo
     de l'étape suivante (`.method__mini`, même cadrage que la fenêtre :
     le relais de l'une à l'autre ne se voit pas). Pendant ces plongées,
     le titre (avec la photo 01 posée dans son creux, `.method__dot`) passe
     sous la fenêtre (`.is-far`) et s'envole avec le décor.
   - l'arrivée, le triptyque (choix H&C du 2026-10-06, la photo plein
     écran prenait trop de place et le texte se lisait mal) : sur grand
     écran, la fenêtre s'arrête en hauteur au milieu, nette, sur le mur de
     la section, sans lumière ni voile ; le grand numéro est sur le mur à
     sa gauche, le titre et la phrase à sa droite, en bleu
     (`.mstep.is-wall`). Les photos en largeur glissent pour amener leur
     sujet (`--fx`) au milieu de la fenêtre.
   - les numéros et le texte (retour H&C du 2026-10-05) : chaque photo porte
     le numéro de son étape (`.method__badge`, la 01 dans le creux du
     titre) ; à l'arrivée, l'étape s'écrit sur le mur (voir le triptyque) :
     plus de réglette en bas, seul reste le lien « Découvrir H&C ».
   Tablette et mobile (texte trop serré sur le mur) : la fenêtre prend la
   largeur de la photo et l'étape s'écrit dessus, en bas à gauche, sur un
   voile sombre (`.method__scrim`). Mobile (< 760 px) : le titre est sur
   deux lignes et s'ouvre en hauteur ; le texte de l'étape prend toute la
   largeur, sans le lien.
   Sans JS, en mouvement réduit ou sur un écran trop bas : pas d'épinglage,
   la scène est posée, nette, sous le titre, et les étapes en dessous.
   ========================================================= */
.method {
  --s6-text: #4b5569;
  --s6-faint: #7d8597;
  --s6-r: 18px;
  --run: 630svh;

  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--ink);
  background: var(--wall);
}
.method__pin { position: relative; }

/* ---------- La pastille de surtitre ---------- */
.method__eyebrow { display: flex; margin: 0; }
.method__eyebrow > span {
  padding: 7px 14px;
  border: 1px solid rgb(22 33 61 / 0.14);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.78);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5b6478;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------- La scène : le fond nuit et les photos des étapes ---------- */
.method__scene { pointer-events: none; }
/* La fenêtre (`.method__frame`) prend sa taille par le JS, par une découpe
   rectangulaire (`clip-path: inset(…)`), et ses coins ronds par quatre
   petits caches couleur mur (`.method__corner`) que le JS pose et met à
   l'échelle : rien n'est redessiné pendant le mouvement (un `inset(… round …)`
   obligerait à redessiner un masque à chaque image). Dedans, la photo et
   son fond nuit (`.method__zoom`, mis à l'échelle par le JS) ; les
   vignettes (`.method__mini`) en sont des copies réduites. */
.method__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.method__zoom::before,
.method__mini::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 70% at 50% 26%, rgb(52 72 108 / 0.55), rgb(52 72 108 / 0) 72%),
    linear-gradient(#0a1422, var(--night) 55%, #07101c);
}
.method__zoom {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}
/* Un coin : un carré couleur mur percé d'un quart de cercle (96 px, mis à
   l'échelle du rayon par le JS ; assez grand pour rester net quand le
   morphe l'agrandit). */
.method__corner { display: none; }
.method.is-pinned .method__corner {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 96px;
  transform-origin: 0 0;
  background: radial-gradient(circle at var(--at), transparent calc(70.71% - 0.6px), var(--wall) 70.71%);
  visibility: hidden;
  will-change: transform;
}
.method__corner--tl { --at: 100% 100%; }
.method__corner--tr { --at: 0 100%; }
.method__corner--bl { --at: 100% 0; }
.method__corner--br { --at: 0 0; }
/* Une photo par étape, nette, sans lumière ni voile (retour H&C du
   2026-10-06) : à l'arrivée, la fenêtre s'arrête en hauteur au milieu et
   autour, c'est le mur de la section. Les photos en largeur (01 à 03) sont
   à la taille de l'image (au moins celle de l'écran), centrées ; `--fx`
   dit où est leur sujet (en part de la largeur), le JS l'amène au milieu
   de la fenêtre. Les photos en hauteur (04, 05) sont posées au milieu.
   Le JS n'en montre qu'une à la fois (`opacity`) ; sans lui, la 05. */
.method__plate {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
}
.method__plate--1,
.method__plate--2,
.method__plate--3 {
  inset: 0 auto auto 50%;
  height: 100%;
  min-width: 100%;
  aspect-ratio: 1100 / 734;
  translate: -50% 0;
}
.method__plate--1 { --fx: 0.36; background-image: url("../img/v4/methode/dossiers-1100.webp?v=m1"); }
.method__plate--2 { --fx: 0.66; background-image: url("../img/v4/methode/tableau-1100.webp?v=m1"); }
.method__plate--3 { --fx: 0.7; background-image: url("../img/v4/methode/cap-1100.webp?v=m1"); background-position: 50% 30%; }
.method__plate--4 {
  inset: -2% auto auto 50%;
  height: 108%;
  translate: -50% 0;
  background-size: 100% 100%;
  aspect-ratio: 1400 / 2100;
  background-image: url("../img/v4/methode/atelier-1000.webp?v=m1");
  background-image: image-set(url("../img/v4/methode/atelier-1000.webp?v=m1") 1x, url("../img/v4/methode/atelier-1400.webp?v=m1") 2x);
}
.method__plate--5 {
  inset: -2% auto auto 50%;
  height: 108%;
  aspect-ratio: 1400 / 2165;
  translate: -50% 0;
  background-size: 100% 100%;
  background-image: url("../img/v4/methode/scene-900.webp?v=m1");
  background-image: image-set(url("../img/v4/methode/scene-900.webp?v=m1") 1x, url("../img/v4/methode/scene-1400.webp?v=m1") 2x);
  opacity: 1;
}
/* Le voile sombre du bas de la photo, sous le texte de l'étape. Il est dans la
   fenêtre, à côté du calque zoomé et non dedans : une boîte de la taille de l'écran
   (bas 64 %), que le JS pose en coordonnées d'écran (`width`, `height`, `transform`)
   et dont l'opacité varie ; la fenêtre le recoupe. Avant (retour H&C du
   2026-10-14, « un masque à droite »), il était dans le calque qui glisse pour
   centrer le sujet, donc 4 fois plus large que l'écran, soit près de 8 Mpx de
   calque sur un téléphone (2026-10-18, « ça sacade de fou sur mobile »). */
.method__scrim { display: none; }
.method.is-pinned .method__scrim {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(rgb(7 16 28 / 0), rgb(7 16 28 / 0.4) 45%, rgb(7 16 28 / 0.8));
  opacity: 0;
}

/* ---------- Les photos qui volent ---------- */
.method__shots { pointer-events: none; }
.method__shot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  border-radius: 10px;
  box-shadow: 0 18px 36px -22px rgb(11 22 38 / 0.55);
  backface-visibility: hidden;
}
/* Celles des étapes 02 à 05 : la vignette de la photo de l'étape. */
.method__shot--step { aspect-ratio: 3 / 2; overflow: hidden; }
.method__shot--tall { aspect-ratio: 2 / 3; }
/* Une vignette : la photo et son fond nuit à la taille de l'écran (posée
   par le JS), réduite à la taille de la photo éparpillée (ou de la
   pastille), comme la fenêtre la montrera au départ de la plongée. */
.method__mini {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
}
.method__mini .method__plate { opacity: 1; }
/* La photo 01 dans le creux du titre, quand la fenêtre est ailleurs. */
.method__dot { display: none; }
.method.is-pinned .method__dot {
  display: block;
  position: absolute;
  visibility: hidden;
}
.method__pane {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
/* Le numéro de l'étape sur sa photo : en haut à gauche des vignettes, au
   bout gauche de la pastille du titre ; et sur la fenêtre au départ de la
   plongée (`.method__tag`, posé par le JS), le temps que le texte prenne
   le relais. */
.method__badge {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  padding: 3px 7px 2px;
  border-radius: 999px;
  background: var(--gold);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  box-shadow: 0 4px 10px -4px rgb(11 22 38 / 0.5);
}
.method__dot .method__badge {
  top: 0;
  bottom: 0;
  left: 6px;
  height: fit-content;
  margin-block: auto;
}
.method__tag { display: none; }
.method.is-pinned .method__tag {
  display: block;
  top: 0;
  left: 0;
  visibility: hidden;
}

/* ---------- Le titre (deux moitiés) et le chapô ---------- */
.method__title {
  margin: 0;
  font-size: clamp(2rem, 4.1vw, 3.5rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.method__half { white-space: nowrap; }
.method.is-pinned .method__zoom,
.method.is-pinned .method__shot,
.method.is-pinned .method__half { will-change: transform; }
.method.is-pinned .method__shot { will-change: transform, opacity; }
/* Calques à part, pour que ce qui change à chaque image ne fasse pas
   redessiner la photo ou le chapô : le voile (opacité), le numéro de la
   fenêtre et le texte des étapes (place et opacité). */
.method.is-pinned .method__scrim { will-change: transform, opacity; }
.method.is-pinned :is(.method__tag, .mstep) { will-change: transform, opacity; }
.method__half + .method__half.is-lit { animation-delay: 0.42s; }
.method__lead {
  max-width: 34em;
  margin: 0;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.6;
  color: var(--s6-text);
  text-wrap: pretty;
}

/* ---------- La réglette des étapes ---------- */
.method__rail {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding: 16px clamp(16px, 1.8vw, 24px) 18px;
  border-radius: var(--s6-r);
  background: rgb(255 255 255 / 0.95);
  box-shadow: 0 1px 0 rgb(22 33 61 / 0.04), 0 24px 48px -28px rgb(11 22 38 / 0.5);
}
.method__steps {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mstep {
  --fill: 0;
  position: relative;
  min-width: 0;
  padding-top: 14px;
}
.mstep__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgb(22 33 61 / 0.1);
}
.mstep__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: 0 50%;
  scale: var(--fill) 1;
}
.mstep__num {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin: 0 0 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgb(22 33 61 / 0.06);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--s6-faint);
  transition: background-color 0.3s, color 0.3s;
}
.mstep__title {
  margin: 0;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.25;
  color: rgb(22 33 61 / 0.62);
  transition: color 0.3s;
}
.mstep__tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gold);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 0.12em;
  color: var(--ink);
  white-space: nowrap;
}
.mstep__line {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--s6-faint);
  transition: color 0.3s;
}
.method__more {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid rgb(22 33 61 / 0.1);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  white-space: nowrap;
  transition: text-decoration-color 0.2s;
}
.method__more:hover { text-decoration-color: var(--ink); }
.method__more:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

/* ---------- Section posée (sans JS, mouvement réduit, écran bas) ---------- */
.method:not(.is-pinned) .method__pin {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(88px, 10vw, 144px) var(--pad-x) clamp(72px, 8vw, 120px);
  box-sizing: content-box;
}
.method:not(.is-pinned) .method__eyebrow { order: 0; }
.method:not(.is-pinned) .method__head { order: 1; display: grid; gap: 18px; }
.method:not(.is-pinned) .method__title { display: flex; flex-wrap: wrap; column-gap: 0.25em; }
.method:not(.is-pinned) .method__scene { order: 2; position: relative; height: clamp(340px, 52vw, 620px); }
.method:not(.is-pinned) .method__frame { border-radius: var(--s6-r); }
.method:not(.is-pinned) .method__plate:not(.method__plate--5) { display: none; }
.method:not(.is-pinned) .method__zoom::before { content: none; }
.method:not(.is-pinned) .method__plate--5 { inset: 0 auto auto 50%; height: 100%; border-radius: var(--s6-r); }
.method:not(.is-pinned) .method__shots { display: none; }
.method:not(.is-pinned) .method__rail { order: 3; }
.method:not(.is-pinned) .mstep__num { background: var(--gold); color: var(--ink); }
.method:not(.is-pinned) .mstep__title { color: var(--ink); }
.method:not(.is-pinned) .mstep__line { color: var(--s6-text); }
.method:not(.is-pinned) .mstep__bar::after { scale: 1 1; }

/* ---------- Section épinglée (JS) ---------- */
.method.is-pinned { height: calc(100svh + var(--run)); }
.method.is-pinned .method__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
}
.method.is-pinned .method__eyebrow {
  position: absolute;
  top: clamp(20px, 4.5svh, 44px);
  left: var(--pad-x);
  z-index: 4;
}
.method.is-pinned .method__scene { position: absolute; inset: 0; z-index: 0; }
/* La fenêtre est une boîte rectangulaire dont le JS pose `left`, `top`, `width` et
   `height` à chaque image (bords sur les pixels de l'écran), qui recoupe son
   contenu (`overflow`) : plus de `clip-path` animé, que Safari et les
   téléphones d'entrée de gamme refont en masque à chaque image. Le calque
   zoomé a une taille fixe (celle de l'écran, posée par le JS) et suit la
   fenêtre par `transform`. */
.method.is-pinned .method__frame {
  inset: auto;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  contain: layout paint;
}
.method.is-pinned .method__zoom { inset: auto; top: 0; left: 0; }
.method.is-pinned .method__shots {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 100svh;
  will-change: transform;
}
.method.is-pinned .method__head {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
/* Plongée dans une photo éparpillée : le titre passe sous la fenêtre. */
.method.is-far .method__head { z-index: -1; }
.method.is-pinned .method__title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  translate: 0 -50%;
}
.method.is-pinned .method__half:first-child { justify-self: end; }
.method.is-pinned .method__half:last-child { justify-self: start; }
.method.is-pinned .method__lead {
  position: absolute;
  top: calc(50% + clamp(40px, 4.8vw, 66px));
  left: 50%;
  width: min(34em, 84%);
  text-align: center;
  translate: -50% 0;
}
/* Plus de réglette : chaque étape est écrite sur sa photo en plein écran,
   en bas à gauche, et suit le bord de la fenêtre (le JS pose sa place et
   son opacité) ; le lien reste en bas à droite. */
.method.is-pinned .method__rail {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
.method.is-pinned .method__rail::before { content: none; }
.method.is-pinned .method__steps { display: block; }
.method.is-pinned .mstep {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(28px, 7svh, 72px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(14px, 1.5vw, 22px);
  width: min(38rem, 100% - 2 * var(--pad-x) - 240px);
  padding: 0;
  color: #fff;
  text-shadow: 0 1px 16px rgb(7 16 28 / 0.55);
  opacity: 0;
  visibility: hidden;
}
.method.is-pinned .mstep__bar { display: none; }
.method.is-pinned .mstep .mstep__num {
  grid-row: 1 / 3;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  font-size: clamp(3.5rem, 6.4vw, 6rem);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--gold);
}
.method.is-pinned .mstep .mstep__title {
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  line-height: 1.12;
  color: #fff;
}
.method.is-pinned .mstep .mstep__line {
  margin-top: 6px;
  font-size: clamp(0.9375rem, 1.15vw, 1.125rem);
  color: rgb(255 255 255 / 0.86);
}
.method.is-pinned .mstep__tag { text-shadow: none; }
/* Le triptyque, sur grand écran (choix H&C du 2026-10-06) : la photo en
   hauteur au milieu (`--band`, posé par le JS), le grand numéro sur le mur
   à sa gauche, le titre et la phrase à sa droite. */
.method.is-pinned .mstep.is-wall {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  grid-template-columns: minmax(0, 1fr) var(--band) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: start;
  column-gap: var(--cgap);
  padding: 0 var(--pad-x);
  text-shadow: none;
}
.method.is-pinned .mstep.is-wall .mstep__num {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  font-size: clamp(5rem, 24svh, 14rem);
}
.method.is-pinned .mstep.is-wall .mstep__title {
  grid-column: 3;
  grid-row: 1;
  max-width: 12em;
  font-size: clamp(1.75rem, 3.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.method.is-pinned .mstep.is-wall .mstep__line {
  grid-column: 3;
  grid-row: 2;
  max-width: 21em;
  margin-top: clamp(10px, 1.4svh, 16px);
  font-size: clamp(1rem, 1.45vw, 1.5rem);
  color: var(--s6-text);
}
.method.is-pinned .method__more {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(28px, 7svh, 72px);
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 14px 30px -16px rgb(11 22 38 / 0.6);
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: none;
  pointer-events: auto;
  transition: background-color 0.2s;
}
.method.is-pinned .method__more:hover { background: var(--gold); }

/* Les photos éparpillées (grand écran) : en haut et sur les côtés, jamais
   sur le titre, le chapô ou le lien. */
/* #8 et #5 gardent toujours 12 px de marge avec le bord droit (sur tablette,
   leur largeur plancher les ferait sortir). */
.method__shot:nth-child(1) { --x: -1.5%; --y: 24%; --w: clamp(150px, 15vw, 270px); }
.method__shot:nth-child(2) { --x: 18%;   --y: 10%; --w: clamp(104px, 10vw, 180px); }
.method__shot:nth-child(3) { --x: 33%;   --y: 19%; --w: clamp(140px, 13vw, 236px); }
.method__shot:nth-child(4) { --x: 63%;   --y: 8%;  --w: clamp(150px, 14.4vw, 260px); }
.method__shot:nth-child(5) { --x: min(86%, calc(100% - var(--w) - 12px)); --y: 15%; --w: clamp(104px, 10vw, 180px); }
.method__shot:nth-child(6) { --x: 6%;    --y: 60%; --w: clamp(150px, 14.4vw, 260px); }
.method__shot:nth-child(7) { --x: 77%;   --y: 60%; --w: clamp(150px, 15vw, 270px); }
.method__shot:nth-child(8) { --x: min(88%, calc(100% - var(--w) - 12px)); --y: 44%; --w: clamp(124px, 11.2vw, 200px); }

@media (max-width: 1099px) {
  .method:not(.is-pinned) .method__more { display: none; }
}
/* Tablette : les photos, dont la largeur plancher pèse davantage, se
   répartissent un peu autrement pour rester au-dessus du titre. */
@media (min-width: 760px) and (max-width: 1099px) {
  .method__shot:nth-child(1) { --y: 26%; }
  .method__shot:nth-child(2) { --x: 20%; --y: 9%; }
  .method__shot:nth-child(3) { --x: 36%; --y: 21%; }
  .method__shot:nth-child(5) { --y: 12%; }
  .method__shot:nth-child(8) { --y: 34%; }
}
@media (max-width: 759px) {
  .method.is-pinned .method__eyebrow { top: 18px; }
  /* Un flou d'arrière-plan sur un décor qui bouge, c'est une passe de rendu en
     plus à chaque image : sur mobile, la pastille est simplement plus opaque. */
  .method.is-pinned .method__eyebrow > span {
    background: rgb(255 255 255 / 0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .method.is-pinned .method__title { grid-template-columns: 1fr; justify-items: center; }
  .method.is-pinned .method__half { font-size: clamp(1.5rem, 7.2vw, 2.25rem); }
  .method.is-pinned .method__half:is(:first-child, :last-child) { justify-self: center; }
  .method.is-pinned .method__lead { top: calc(50% + 70px); width: calc(100% - 2 * var(--pad-x)); font-size: 0.9375rem; }
  /* Le texte de l'étape sur toute la largeur, sans le lien. */
  .method.is-pinned .mstep { left: 16px; width: calc(100% - 32px); bottom: 22px; column-gap: 12px; }
  .method.is-pinned .mstep .mstep__num { font-size: 3.25rem; }
  .method.is-pinned .mstep .mstep__title { font-size: 1.25rem; }
  .method.is-pinned .mstep .mstep__line { font-size: 0.9375rem; }
  .method.is-pinned .method__more { display: none; }
  .method:not(.is-pinned) .method__steps { grid-template-columns: 1fr; }
  .method__shot:nth-child(1) { --x: -4%;  --y: 14%; --w: 30vw; }
  .method__shot:nth-child(2) { --x: 30%;  --y: 8%;  --w: 20vw; }
  .method__shot:nth-child(3) { --x: 64%;  --y: 11%; --w: 34vw; }
  .method__shot:nth-child(4) { --x: 8%;   --y: 27%; --w: 26vw; }
  .method__shot:nth-child(5) { --x: 79%;  --y: 26%; --w: 19vw; }
  .method__shot:nth-child(6) { --x: 2%;   --y: 69%; --w: 32vw; }
  .method__shot:nth-child(7) { --x: 62%;  --y: 68.5%; --w: 34vw; }
  .method__shot:nth-child(8) { --x: 37%;  --y: 75%; --w: 24vw; }
}
/* Téléphone court : le titre et le chapô prennent plus de place en hauteur,
   les photos du bas descendent et celles du haut se serrent. */
@media (max-width: 759px) and (max-height: 760px) {
  .method__shot:nth-child(2) { --y: 10%; }
  .method__shot:nth-child(3) { --y: 9%; }
  .method__shot:nth-child(4) { --y: 29%; }
  .method__shot:nth-child(5) { --y: 24%; }
  .method__shot:nth-child(6) { --y: 75%; }
  .method__shot:nth-child(7) { --y: 75%; }
  .method__shot:nth-child(8) { --x: 36%; --y: 79%; }
}
@media (max-width: 759px) and (max-height: 620px) {
  .method__shot:nth-child(3) { --y: 6%; }
  .method__shot:nth-child(5) { --y: 21%; }
  .method__shot:nth-child(6) { --y: 80%; }
  .method__shot:nth-child(7) { --y: 80%; }
  .method__shot:nth-child(8) { --y: 84%; }
}

@media (prefers-reduced-motion: reduce) {
  .method * { transition: none !important; }
}

/* =========================================================
   Projecteurs des sections sombres (S7, S10) : le même rail et le même
   projecteur que la S2 et la S3. La lumière part de la lentille : un halo
   blanc découpé en cône (`.cone`, comme le faisceau de la S2), jamais une
   lueur qui sort du bord de l'écran.
   Réglages, sur la section : --rig-x (position du projecteur), --rig-y
   (hauteur du rail), --rig-w (taille du projecteur), --rig-tilt (la tête
   pivote, le cône suit) ; sur `.cone` : --spread (demi-ouverture) et
   --throw (portée).
   ========================================================= */
/* sous le contenu de la section, au-dessus de sa lumière */
.rig { position: absolute; inset: 0 0 auto; z-index: 0; height: 0; pointer-events: none; }
.rig__rail {
  position: absolute;
  top: var(--rig-y);
  left: 0;
  right: 0;
  height: 8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, rgb(255 255 255 / 0.07) 119px 120px),
    linear-gradient(#2c3855, #121b30);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 10px 22px rgb(0 0 0 / 0.5);
}
.rig__lamp {
  position: absolute;
  top: var(--rig-y);
  left: var(--rig-x);
  width: var(--rig-w);
  height: calc(var(--rig-w) * 1.2);
  translate: -50% 0;
  overflow: visible;
  fill: #1a2440;
  stroke: #46557e;
  stroke-width: 1.3;
}
.rig__stem { fill: none; stroke-width: 3; }
.rig__head { transform-box: view-box; transform-origin: 50px 30px; transform: rotate(calc(-1 * var(--rig-tilt))); }
/* le corps : un fût évasé aux coins adoucis, cerclé de trois nervures, et la
   bague de la lentille un ton plus clair (plus de volets en « pattes ») */
.rig__body { stroke-linejoin: round; }
.rig__rib { fill: none; stroke: #2f3c60; stroke-width: 1.4; }
.rig__rim { fill: #232e4f; stroke: #5a6a96; stroke-width: 1.6; }
.rig__lens { stroke: none; fill: #3a4562; }
/* la lentille allumée : sa luminosité suit celle du faisceau */
.rig__glow { stroke: none; fill: #fff; filter: drop-shadow(0 0 7px rgb(255 255 255 / 0.9)); }

.cone,
.cone::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cone {
  --spread: 24deg;
  --throw: 900px;
  /* la lentille (50, 81 dans le dessin) tourne avec la tête autour du pivot (50, 30) :
     --lx / --ly suivent son centre */
  --lx: calc(var(--rig-x) + var(--rig-w) * 0.51 * sin(var(--rig-tilt)));
  --ly: calc(var(--rig-y) + var(--rig-w) * (0.3 + 0.51 * cos(var(--rig-tilt))));
  /* le faisceau sort de toute la largeur de la lentille (demi-largeur 0,17) : la pointe
     du cône est en retrait derrière elle, sur l'axe de la tête, et on ne garde que ce
     qui est au-delà de la lentille */
  --back: calc(var(--rig-w) * 0.17 / tan(var(--spread)));
  --cx: calc(var(--lx) - var(--back) * sin(var(--rig-tilt)));
  --cy: calc(var(--ly) - var(--back) * cos(var(--rig-tilt)));
  background: radial-gradient(circle var(--throw) at var(--cx) var(--cy), rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.12) 26%, rgb(255 255 255 / 0.04) 62%, transparent);
  -webkit-mask:
    conic-gradient(from calc(180deg - var(--rig-tilt) - var(--spread) - 7deg) at var(--cx) var(--cy), transparent 0deg, #000 7deg, #000 calc(7deg + 2 * var(--spread)), transparent calc(14deg + 2 * var(--spread))),
    radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--back) - 1px), #000 calc(var(--back) + 2px));
  mask:
    conic-gradient(from calc(180deg - var(--rig-tilt) - var(--spread) - 7deg) at var(--cx) var(--cy), transparent 0deg, #000 7deg, #000 calc(7deg + 2 * var(--spread)), transparent calc(14deg + 2 * var(--spread))),
    radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--back) - 1px), #000 calc(var(--back) + 2px));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* le cœur du faisceau, plus étroit et plus dense */
.cone::after {
  content: "";
  background: radial-gradient(circle calc(var(--throw) * 0.8) at var(--cx) var(--cy), rgb(255 255 255 / 0.2), transparent);
  -webkit-mask:
    conic-gradient(from calc(180deg - var(--rig-tilt) - var(--spread) * 0.45 - 5deg) at var(--cx) var(--cy), transparent 0deg, #000 5deg, #000 calc(5deg + 0.9 * var(--spread)), transparent calc(10deg + 0.9 * var(--spread))),
    radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--back) - 1px), #000 calc(var(--back) + 2px));
  mask:
    conic-gradient(from calc(180deg - var(--rig-tilt) - var(--spread) * 0.45 - 5deg) at var(--cx) var(--cy), transparent 0deg, #000 5deg, #000 calc(5deg + 0.9 * var(--spread)), transparent calc(10deg + 0.9 * var(--spread))),
    radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--back) - 1px), #000 calc(var(--back) + 2px));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* =========================================================
   S7 — Témoignages, d'après « Hello, I'm Labi Joshua » (réf. 10) : un
   témoin par écran. En haut, la pastille de la section et la pagination en
   carrés ; à gauche, le titre en petit, la phrase forte du témoin en très
   grand, l'extrait dans une bulle, puis la pastille du nom (ni contour
   pointillé ni flèche dessinée depuis le 2026-10-05) ; à droite, le portrait en
   portrait détouré en couleur, sans contour, qui sort par le bas
   de l'écran. En bas : le lien vers tous les témoignages et « Suivant ».
   Habillage H&C : le mur peint passe du vert au bleu nuit (uni, sans grain), un
   projecteur sur rail (`.rig`, comme en S2) éclaire le portrait et baisse le temps du changement de témoin,
   accents jaunes (guillemets, initiales, carré actif).
   - Sans JS : les six témoins côte à côte, en défilement horizontal
     (carrés = ancres).
   - JS (`is-live`) : les témoins se superposent ; `is-current` le rend
     visible, `is-active` le fait entrer (mots qui montent, bulle, pastille,
     flèche qui se trace, autocollant posé avec un léger rebond),
     `is-leaving` le fait sortir. `is-in` : section à l'écran (le témoin
     entre, la lumière s'allume ; hors de l'écran tout se remet à zéro).
     Défilement auto (`is-auto`) : le carré actif se remplit de jaune ; à la
     fin, témoin suivant. En pause quand on lit (survol du texte, focus) ;
     arrêté au premier geste (carré, Suivant, flèches du clavier, glissé).
     Changement net, sans surimpression : le texte s'efface, l'autocollant
     tombe par le bas, puis le suivant arrive de la droite et se pose.
   - Mouvement réduit : pas de défilement auto, changements sans animation.
   ========================================================= */
.voices {
  --s7-wall: var(--night);     /* le même bleu nuit que la hero, S2, S9 et S10 */
  --s7-text: rgb(255 255 255 / 0.7);
  --s7-paper: #f3f4f6;          /* le papier de la bulle */
  --s7-h: clamp(720px, 100svh, 1000px);
  --s7-photo-x: 73%;            /* centre de l'autocollant, en % de la largeur utile */
  --rig-x: 70%;                 /* le projecteur, au-dessus du portrait */
  --rig-y: 12px;
  --rig-w: 84px;
  --rig-tilt: 0deg;

  position: relative;           /* au-dessus de l'intro, collée en haut sous toute la page */
  isolation: isolate;
  overflow: clip;
  display: grid;
  min-height: var(--s7-h);
  padding: clamp(24px, 4vh, 40px) var(--pad-x) 0;
  color: var(--paper);
  background: var(--s7-wall);
}
/* La lumière : le faisceau qui part de la lentille du projecteur (`.cone`)
   et la flaque qu'il pose derrière le portrait. */
.voices__light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(34% 44% at 70% 54%, rgb(255 255 255 / 0.15), rgb(255 255 255 / 0.05) 58%, rgb(255 255 255 / 0) 100%);
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: opacity;
}
.voices .cone { --spread: 19deg; --throw: 1000px; }
.voices .rig__glow { opacity: 0; transition: opacity 0.9s ease; }
html:not(.js) :is(.voices__light, .voices .rig__glow),
.voices.is-in :is(.voices__light, .rig__glow) { opacity: 1; }
.voices.is-in.is-swapping :is(.voices__light, .rig__glow) { opacity: 0.5; transition-duration: 0.22s; }

.voices__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto 1fr;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
.voices__top {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.voices__eyebrow { margin: 0; }
/* Pastille pleine, sans contour, l'icône dans sa pastille ronde : le dessin
   des boutons H&C (« Voir tout l'agenda »), demande H&C du 2026-10-06. */
.voices__eyebrow > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px 6px 6px;
  border-radius: 999px;
  background: var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.9);
}
.voices__eyebrow svg {
  box-sizing: content-box;
  width: 17px;
  height: 17px;
  padding: 7px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

/* Pagination : un carré par témoin ; l'actif en jaune (il se remplit en défilement auto). */
.voices__dots { display: flex; gap: 6px; }
.voices__dots a { display: block; padding: 2px; border-radius: 8px; }
.voices__dots i {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.14);
  transition: background-color 0.25s;
}
.voices__dots i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.voices__dots a:hover i { background: rgb(255 255 255 / 0.3); }
.voices__dots a[aria-current] i { background: rgb(226 174 12 / 0.3); }
.voices__dots a[aria-current] i::after { transform: none; }
.voices.is-auto .voices__dots a[aria-current] i::after {
  animation: voices-tick var(--s7-tick, 8s) linear both paused;
}
.voices.is-auto.is-in:not(:has(.voice__text:hover, :focus-visible)) .voices__dots a[aria-current] i::after {
  animation-play-state: running;
}
@keyframes voices-tick { from { transform: scaleX(0); } to { transform: none; } }
.voices :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.voices .stitle {
  --title-on: var(--paper);
  --title-off: rgb(255 255 255 / 0.22);
  position: relative;
  z-index: 3;
  /* le groupe (titre, phrase, bulle, nom) descend avec la hauteur de l'écran : il se centre entre la barre du haut et le pied, au lieu de laisser un trou au milieu (2026-10-10) */
  margin-top: calc(clamp(32px, 8vh, 96px) + clamp(0px, (100svh - 640px) * 0.38, 130px) - 0.24em);
  font-size: clamp(1.5rem, 2.3vw, 2.125rem);
}

.voices__list {
  display: flex;
  margin: clamp(8px, 1.4vh, 16px) 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.voice {
  position: relative;           /* l'autocollant se place sur le témoin */
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  align-items: flex-start;
  min-height: 560px;
  padding-bottom: clamp(92px, 13vh, 120px);
  overflow: clip;
  scroll-snap-align: start;
}
.voices.is-live .voices__list { display: grid; overflow: visible; touch-action: pan-y; }
.voices.is-live .voice { grid-area: 1 / 1; overflow: visible; visibility: hidden; }
.voices.is-live .voice.is-current,
.voices.is-live .voice.is-leaving { visibility: visible; }

.voice__text {
  position: relative;
  z-index: 3;
  width: min(50%, 620px);
  margin: 0;
}
.voice__punch {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.25rem); /* réduite le 2026-10-06 (demande H&C) */
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.voice__punch::before,
.voice__punch .w.is-first > span::before { content: "«\00a0"; color: var(--gold); }
.voice__punch::after,
.voice__punch .w.is-last > span::after { content: "\00a0»"; color: var(--gold); }
.voices.is-live .voice__punch::before,
.voices.is-live .voice__punch::after { content: none; }
.voice__punch .w {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0.16em;
  vertical-align: top;
}
.voice__punch .w > span { display: inline-block; }

/* La bulle : l'extrait, sur papier. */
.voice__more {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 30rem;
  margin-top: clamp(26px, 4.4vh, 46px);
  padding: 14px 26px 16px 14px;
  border-radius: 30px;
  background: var(--s7-paper);
  color: var(--ink);
}
.voice__more p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: #2c3550; }
.voice__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
}
.voice__icon svg { width: 18px; height: 18px; fill: var(--ink); }

/* La pastille du nom, sous la bulle, alignée sur elle. */
.voice__who {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: clamp(20px, 3.4vh, 32px) 0 0;   /* juste sous la bulle (collée au bas de l'écran avant le 2026-10-10 : trou au milieu) */
  padding: 7px 24px 7px 7px;
  border-radius: 999px;
  background: var(--ink);
}
.voice__init {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.voice__id { display: grid; gap: 2px; line-height: 1.2; }
.voice__name { font-size: 1.0625rem; }
.voice__name b { font-weight: 600; }
.voice__role { font-size: 0.8125rem; color: var(--s7-text); }

/* L'autocollant : posé en bas, il sort de l'écran par le bas (et un peu à droite). */
.voice__photo {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: var(--s7-photo-x);
  width: auto;
  max-width: none;
  height: min(calc(var(--s7-h) * 0.58), 36vw); /* écran bas et étroit : il laisse la place au texte (réduit le 2026-10-09 : « trop big ») */
  translate: -50% 0;
  transform-origin: 50% 100%;
  pointer-events: none;
  user-select: none;
}
/* Sans JS, chaque témoin garde son autocollant dans sa case du défilement horizontal. */
.voices:not(.is-live) .voice__photo { height: 100%; }

.voices__foot {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: clamp(20px, 4vh, 40px);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
.voices__foot > * { pointer-events: auto; }
.voices__all { margin: 0; font-size: 0.9375rem; color: var(--s7-text); }
.voices__all a {
  font-weight: 500;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s;
}
.voices__all a:hover { text-decoration-color: var(--paper); }
/* « Suivant » : le bouton jaune H&C (comme « Voir tout l'agenda »). */
.voices__next { border: 0; cursor: pointer; }
.voices__next[hidden] { display: none; }
.voices__next:hover .btn__arrow { transform: translateX(3px); }

/* ---- Entrée / sortie d'un témoin (JS) ---- */
.voices.is-live .voice__punch .w > span { transform: translate3d(0, 128%, 0); }
.voices.is-live .voice__more,
.voices.is-live .voice__who { opacity: 0; transform: translate3d(0, 16px, 0); }
.voices.is-live .voice__photo { opacity: 0; transform: translate3d(42%, 6%, 0) rotate(9deg) scale(0.96); }

.voices.is-live .voice.is-active .voice__punch .w > span {
  transform: none;
  transition: transform 0.7s var(--ease-out) calc(0.24s + var(--i) * 34ms);
}
.voices.is-live .voice.is-active .voice__more {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s 0.44s, transform 0.7s var(--ease-out) 0.44s;
}
.voices.is-live .voice.is-active .voice__who {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s 0.58s, transform 0.7s var(--ease-out) 0.58s;
}
.voices.is-live .voice.is-active .voice__photo {
  opacity: 1;
  transform: none;
  transition: opacity 0.16s 0.2s, transform 0.75s cubic-bezier(0.3, 1.25, 0.5, 1) 0.2s;
}
/* Sortie : le texte s'efface d'un bloc (avant que le suivant monte), l'autocollant
   tombe par le bas, opaque : jamais deux portraits l'un sur l'autre en transparence. */
.voices.is-live .voice.is-leaving .voice__text,
.voices.is-live .voice.is-leaving .voice__who {
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  transition: opacity 0.2s, transform 0.3s ease-in;
}
.voices.is-live .voice.is-leaving .voice__punch .w > span,
.voices.is-live .voice.is-leaving .voice__more { opacity: 1; transform: none; }
.voices.is-live .voice.is-leaving .voice__photo {
  opacity: 1;
  transform: translate3d(-4%, 104%, 0) rotate(-5deg);
  transition: transform 0.34s cubic-bezier(0.5, 0, 0.75, 0);
}

@media (max-width: 1023px) {
  .voice__text { width: min(56%, 560px); }
  .voice__more { max-width: 26rem; }
}

/* Mobile (et tablette en portrait) : la réf. est déjà un format portrait. Le
   texte en haut, puis la pastille du nom, puis l'autocollant, qui remplit le reste de
   l'écran et sort par le bas. */
@media (max-width: 759px), (max-width: 1023px) and (orientation: portrait) {
  /* le projecteur se glisse entre la pastille et les carrés, la tête tournée vers le portrait */
  .voices { --s7-h: 100svh; min-height: max(100svh, 700px); padding-top: 20px; --rig-x: 50%; --rig-y: 4px; --rig-w: 60px; --rig-tilt: 5deg; }
  .voices__light { background: radial-gradient(60% 34% at 62% 76%, rgb(255 255 255 / 0.15), rgb(255 255 255 / 0.05) 58%, rgb(255 255 255 / 0) 100%); }
  .voices .cone { --spread: 17deg; --throw: 900px; }
  .voices__eyebrow > span { gap: 8px; padding: 5px 16px 5px 5px; font-size: 0.6875rem; }
  .voices__eyebrow svg { width: 15px; height: 15px; padding: 6px; }
  .voices__dots { gap: 4px; }
  .voices__dots i { width: 16px; height: 16px; border-radius: 5px; }
  .voices .stitle { margin-top: calc(26px - 0.24em); font-size: 1.375rem; }
  .voice {
    display: grid;
    grid-template-rows: auto auto minmax(300px, 1fr);
    grid-template-columns: 100%;
    min-height: 0;
    padding-bottom: 0;
  }
  .voice__text { width: 100%; }
  .voice__punch { font-size: clamp(1.75rem, 7.6vw, 2.75rem); }
  .voice__more { margin-top: 24px; padding: 12px 18px 14px 12px; border-radius: 24px; }
  .voice__more p { font-size: 0.875rem; }
  .voice__icon { width: 34px; height: 34px; }
  .voice__icon svg { width: 15px; height: 15px; }
  .voice__who { justify-self: start; margin: 26px 0 0; padding-right: 18px; }
  .voice__init { width: 40px; height: 40px; font-size: 0.875rem; }
  .voice__name { font-size: 0.9375rem; }
  .voice__role { font-size: 0.75rem; }
  /* Placé en absolu dans la dernière rangée de la grille : il prend la place qui
     reste, sans l'agrandir. */
  .voice__photo {
    grid-area: 3 / 1;
    top: auto;
    bottom: 0;
    right: calc(-1 * var(--pad-x));
    left: auto;
    width: calc(100% + var(--pad-x));
    height: 68%;                  /* 86 % avant le 2026-10-09 : « trop big » */
    object-fit: contain;
    object-position: 100% 100%;
    translate: none;
  }
  .voices__foot { bottom: 16px; }
  .voices__all { padding: 9px 16px; border-radius: 999px; background: rgb(22 33 61 / 0.82); font-size: 0.8125rem; }
  .voices__count { display: none; }
  .voices__next { min-height: 42px; padding: 5px 16px 5px 5px; font-size: 0.875rem; }
  .voices__next .btn__icon { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .voices *,
  .voices *::before,
  .voices *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* =========================================================
   S8 — Entreprises, d'après J60 (« Choose your perfect legal professional »,
   essai 9 de la planche S8) : une rangée d'onglets, un par public, du CODIR
   au personnel non manager ; une grande carte bleu nuit (nom, promesse,
   format en pastilles, lien du parcours, « 1 / 5 » et flèches) ; la photo
   noir et blanc dans une arche de scène qui déborde du haut de la carte
   (sans ligne pointillée depuis le 2026-10-05). Mur blanc.
   - Sans JS : les cinq fiches les unes sous les autres, sans onglets.
   - JS (`is-live`) : les fiches se superposent ; `is-active` désigne le
     public affiché (onglet, fiche, photo). `is-in` : section à l'écran (les
     onglets puis la carte montent, l'arche se dessine) ; hors de l'écran,
     tout revient au premier public et l'entrée se rejouera au retour.
     Défilement auto (un public toutes les 6 s), en pause au survol de la
     carte ou au focus, arrêté au premier choix (onglet, flèches, clavier).
   - Mouvement réduit : pas de défilement auto, changements sans animation.
   ========================================================= */
.company {
  --s8-text: #4b5569;
  --s8-arch: clamp(52px, 8vh, 76px);     /* débord de l'arche au-dessus de la carte */

  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: clamp(720px, 100svh, 1000px);
  padding: clamp(48px, 7vh, 96px) var(--pad-x) clamp(32px, 4.5vh, 72px);
  color: var(--ink);
  background: #fff;
}
.company__in { width: 100%; max-width: 1160px; margin: 0 auto; }
.company__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 20px 32px;
}
.company .stitle { font-size: clamp(2rem, 3.4vw, 3.125rem); }
.company__lead { max-width: 44ch; margin: 0; font-size: 1.0625rem; color: var(--s8-text); }

/* Les onglets : des pastilles, l'onglet du public affiché en bleu nuit. */
.company__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.company__tab {
  flex: none;
  padding: 10px 18px;
  border: 1px solid rgb(22 33 61 / 0.22);
  border-radius: 999px;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, opacity 0.5s ease, transform 0.6s var(--ease-out);
}
.company__tab:hover { border-color: var(--ink); }
.company__tab.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* La carte */
.company__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38%;
  min-height: clamp(300px, 40vh, 380px);
  margin-top: calc(var(--s8-arch) + 20px);
  border-radius: 28px;
  color: var(--paper);
  background:
    radial-gradient(60% 90% at 78% 30%, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 70%),
    linear-gradient(120deg, #16213d, #22305a);
  transition: opacity 0.6s ease, transform 0.8s var(--ease-out);
}
.company__body { display: grid; grid-template-rows: auto 1fr auto; padding: clamp(24px, 3vw, 40px); }
.company__count { display: none; margin: 0 0 10px; font-size: 0.875rem; color: var(--muted); }
.company__count b { font-weight: 600; color: var(--gold); }
.company__panels { display: grid; gap: 40px; }
.company__name { margin: 0; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 400; line-height: 1.08; }
.company__prom { max-width: 34ch; margin: 10px 0 0; font-size: 1.0625rem; color: rgb(255 255 255 / 0.84); }
.company__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.company__chips li {
  padding: 6px 12px;
  border: 1px solid rgb(226 174 12 / 0.55);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--gold);
}
.company__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-underline-offset: 3px;
}
.company__link .btn__arrow { width: 14px; height: 14px; }
.company__link:hover .btn__arrow { transform: translate(2px, -2px); }
.company__nav { display: flex; gap: 8px; margin-top: 22px; }
.company__nav button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s;
}
.company__nav button:hover { background: rgb(255 255 255 / 0.1); }

/* L'arche : la photo déborde du haut de la carte. */
.company__photo { position: relative; }
.company__img {
  position: absolute;
  left: 0;
  right: 12%;
  bottom: 0;
  width: 88%;
  height: calc(100% + var(--s8-arch));
  object-fit: cover;
  border-radius: 999px 999px 0 0;
  filter: grayscale(1) contrast(1.06);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.7s var(--ease-out);
}
.company__img.is-active,
.company:not(.is-live) .company__img[data-i="0"] { opacity: 1; transform: none; }

/* Sous la carte : les boutons et la note à gauche, le besoin ponctuel à droite. */
.company__actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 32px;
  margin-top: 24px;
}
.company__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.company__note { margin: 12px 0 0; font-size: 0.8125rem; color: var(--s8-text); }
.company__more { grid-area: 1 / 2; justify-self: end; margin: 0; font-size: 0.875rem; text-align: right; color: var(--s8-text); }
.company__more a { font-weight: 500; white-space: nowrap; color: var(--ink); text-underline-offset: 3px; }

/* JS : les fiches se superposent, celle du public affiché se lève. */
.company__tabs[hidden],
.company__nav[hidden] { display: none; }
.company.is-live .company__count { display: block; }
.company.is-live .company__panels { gap: 0; }
.company.is-live .company__panel {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.5s var(--ease-out);
}
.company.is-live .company__panel.is-active { opacity: 1; transform: none; transition-delay: 0.12s; }

/* Entrée : les onglets montent l'un après l'autre, puis la carte. */
.company.is-live:not(.is-in) .company__tab { opacity: 0; transform: translateY(16px); }
.company.is-live:not(.is-in) .company__card { opacity: 0; transform: translateY(48px); }
.company.is-in .company__tab:nth-child(2) { transition-delay: 0s, 0s, 0s, 0.05s, 0.05s; }
.company.is-in .company__tab:nth-child(3) { transition-delay: 0s, 0s, 0s, 0.1s, 0.1s; }
.company.is-in .company__tab:nth-child(4) { transition-delay: 0s, 0s, 0s, 0.15s, 0.15s; }
.company.is-in .company__tab:nth-child(5) { transition-delay: 0s, 0s, 0s, 0.2s, 0.2s; }
.company.is-in .company__card { transition-delay: 0.15s; }

/* Écran large mais bas (portable 13", 1024 × 768) : la carte serre ses marges
   pour que la section tienne dans l'écran. */
@media (min-width: 760px) and (max-height: 860px) and (orientation: landscape) {
  .company { --s8-arch: 44px; }
  .company__eyebrow { margin-bottom: 14px; }
  .company__tabs { margin-top: 20px; }
  .company__card { min-height: 0; }
  .company__body { padding: 24px 32px; }
  .company__chips,
  .company__link,
  .company__nav { margin-top: 14px; }
  .company__actions { margin-top: 20px; }
}

/* Mobile (et tablette en portrait) : tout en colonne ; les onglets défilent
   de côté ; la photo, plus petite, se pose au-dessus de la carte. */
@media (max-width: 759px), (max-width: 1023px) and (orientation: portrait) {
  .company { min-height: 0; padding-top: 64px; padding-bottom: 72px; }
  .company .stitle { font-size: clamp(1.75rem, 7.4vw, 2.25rem); }
  .company__head { grid-template-columns: 1fr; gap: 18px; }
  .company__actions { grid-template-columns: minmax(0, 1fr); }
  .company__more { grid-area: auto; justify-self: start; margin-top: 18px; text-align: left; }
  .company__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: calc(-1 * var(--pad-x));
    padding-right: var(--pad-x);
    scrollbar-width: none;
  }
  .company__tabs::-webkit-scrollbar { display: none; }
  .company__card { grid-template-columns: 1fr; margin-top: clamp(150px, 21vw, 200px); }
  .company__photo { order: -1; width: min(64%, 320px); height: clamp(190px, 26vw, 250px); margin: calc(-1 * clamp(130px, 18vw, 180px)) auto 0; }
  .company__img { left: 0; right: 0; width: 100%; height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .company *,
  .company *::before,
  .company *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* =========================================================
   S9 — Nos derniers articles, d'après B41 (« Saint Antönien », piste 8 de
   la planche S9) : la photo de l'article affiché en plein cadre ; à gauche,
   un filet jaune, la catégorie en pastille, le titre en très grand, une
   phrase, l'auteur (initiales dans un rond jaune, comme en S7), la durée
   de lecture et « Lire l'article » ; à droite, les cartes des deux autres
   articles posées sur la photo, puis la carte « Tous les articles » ;
   dessous, les flèches, la ligne de progression et le numéro de l'article.
   En haut, la pastille de la section, le titre et le chapô, à la place du
   menu de la référence.
   Habillage H&C : un changement de décor de théâtre. La carte choisie
   grandit jusqu'au plein cadre pendant que l'ancien décor passe au noir,
   puis elle devient le décor ; accents jaunes.
   - Sans JS : le premier article en grand, les deux autres en cartes (liens).
   - JS (`is-live`) : les textes se superposent ; `is-active` désigne
     l'article affiché ; sa carte est retirée de la rangée (`is-current`),
     les autres se rangent dans l'ordre des suivants (`--slot`). Pendant un
     changement (`is-changing`), la photo choisie (`is-grow`) part du cadre
     de sa carte (clip-path + transform posés par le JS) et s'ouvre en
     plein cadre. `is-in` : section à l'écran (entrée en cascade) ; hors de
     l'écran, retour au premier article. Défilement auto (`is-auto`), un
     article toutes les 8 s, en pause au survol ou au focus clavier, arrêté
     au premier choix.
   - Mouvement réduit : pas de défilement auto, changements sans animation.
   ========================================================= */
.blog {
  --s9-cw: clamp(148px, 13.2vw, 206px);   /* largeur d'une carte */
  --s9-gap: clamp(12px, 1.3vw, 18px);
  --s9-step: calc(var(--s9-cw) + var(--s9-gap));
  --s9-radius: 12px;

  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  min-height: clamp(700px, 100svh, 960px);
  padding: clamp(40px, 6.4vh, 80px) var(--pad-x) clamp(28px, 4.6vh, 56px);
  color: var(--paper);
  background: var(--night);
}

/* Le décor : une photo par article, empilées ; le noir de scène ; les ombrages. */
.blog__scene { position: absolute; inset: 0; z-index: -1; }
.blog__slide { position: absolute; inset: 0; visibility: hidden; }
.blog__slide.is-active { z-index: 1; visibility: visible; }
.blog__slide.is-grow { z-index: 3; visibility: visible; }
.blog__slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform-origin: 0 0;
}
.blog__dim { position: absolute; inset: 0; z-index: 2; background: var(--night); opacity: 0; }
.blog.is-changing .blog__dim { opacity: 0.62; transition: opacity 0.7s ease; }
.blog__shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(130% 100% at 62% 42%, rgb(11 22 38 / 0) 52%, rgb(11 22 38 / 0.5) 100%),
    linear-gradient(90deg, rgb(11 22 38 / 0.86) 0%, rgb(11 22 38 / 0.62) 30%, rgb(11 22 38 / 0.12) 58%, rgb(11 22 38 / 0) 72%),
    linear-gradient(180deg, rgb(11 22 38 / 0.62) 0%, rgb(11 22 38 / 0) 28%),
    linear-gradient(0deg, rgb(11 22 38 / 0.72) 0%, rgb(11 22 38 / 0) 40%);
}

.blog__in {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
.blog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
}
.blog__eyebrow { margin: 0 0 18px; }
.blog__eyebrow > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px;
  background: rgb(11 22 38 / 0.32);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.9);
}
.blog__eyebrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.blog .stitle {
  --title-on: var(--paper);
  --title-off: rgb(255 255 255 / 0.22);
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
}
.blog__lead { max-width: 34ch; margin: 0 0 4px; font-size: 1rem; line-height: 1.45; color: rgb(255 255 255 / 0.8); }

/* L'article affiché (à gauche) et la rangée de cartes (à droite), en bas. */
.blog__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px clamp(32px, 4vw, 72px);
  margin-top: auto;
  padding-top: clamp(40px, 9vh, 120px);
}
.blog__stories { display: grid; }
.blog__story { grid-area: 1 / 1; max-width: 640px; }
.blog__story:not(.is-active) { display: none; }
.blog__cat { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin: 0; }
.blog__cat::before { content: ""; width: 30px; height: 2px; background: var(--gold); }
.blog__cat span {
  padding: 6px 12px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 999px;
  background: rgb(11 22 38 / 0.3);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog__title {
  margin: 18px 0 0;
  font-size: clamp(2.375rem, 4.1vw, 3.75rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  text-wrap: balance;
}
.blog__sum { max-width: 46ch; margin: 18px 0 0; font-size: 1.0625rem; line-height: 1.45; color: rgb(255 255 255 / 0.84); }
.blog__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 26px; }
.blog__who { display: flex; align-items: center; gap: 12px; }
.blog__by { display: grid; gap: 2px; margin: 0; font-size: 0.9375rem; line-height: 1.2; }
.blog__logo { display: block; width: auto; height: 34px; margin: 0 0 4px; }
.blog__by span { font-size: 0.8125rem; color: rgb(255 255 255 / 0.72); }
.blog__read {
  min-height: 44px;
  padding: 6px 18px 6px 20px;
  border: 1px solid rgb(255 255 255 / 0.55);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
}
.blog__read:hover { border-color: var(--paper); background: rgb(255 255 255 / 0.12); }

.blog__side { display: grid; gap: clamp(18px, 3vh, 28px); }
.blog__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, var(--s9-cw));
  gap: var(--s9-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog__card { aspect-ratio: 2 / 3; }
.blog:not(.is-live) .blog__card[data-i="0"] { display: none; }
.blog__card a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 14px;
  overflow: hidden;
  border-radius: var(--s9-radius);
  box-shadow: 0 22px 44px -20px rgb(0 0 0 / 0.7);
  color: inherit;
  text-decoration: none;
  transition: translate 0.4s var(--ease-out);
}
.blog__card a:hover { translate: 0 -6px; }
.blog__card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--card, 50% 50%);
}
.blog__card a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgb(11 22 38 / 0.9) 0%, rgb(11 22 38 / 0.45) 42%, rgb(11 22 38 / 0) 66%);
}
.blog__ccat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 0.82);
}
.blog__ccat::before { content: ""; width: 16px; height: 2px; background: var(--gold); }
.blog__cname {
  margin-top: 6px;
  font-size: clamp(0.875rem, 1.05vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.06;
  text-transform: uppercase;
  text-wrap: balance;
}
.blog__card--all a {
  justify-content: space-between;
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(22 33 61 / 0.82);
}
.blog__card--all a::before { content: none; }
.blog__card--all .blog__cname { font-size: clamp(1rem, 1.3vw, 1.25rem); }
.blog__all-ico {
  display: grid;
  place-items: center;
  align-self: flex-end;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  transition: transform 0.4s var(--ease-out);
}
.blog__all-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.blog__card--all a:hover .blog__all-ico { transform: rotate(45deg); }

/* Flèches, progression, numéro. */
.blog__nav { display: flex; align-items: center; gap: 10px; }
.blog__nav[hidden] { display: none; }
.blog__nav button {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  background: rgb(11 22 38 / 0.2);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}
.blog__nav button:hover { border-color: var(--paper); background: rgb(255 255 255 / 0.14); }
.blog__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.blog__bar { position: relative; flex: 1; height: 1px; margin: 0 14px 0 18px; background: rgb(255 255 255 / 0.36); }
.blog__bar i { position: absolute; inset: -0.5px 0; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.blog.is-auto .blog__bar i.is-tick { animation: blog-tick 8s linear both paused; }
.blog.is-auto.is-in:not(:has(.blog__story:hover, .blog__cards:hover, :focus-visible)) .blog__bar i.is-tick { animation-play-state: running; }
@keyframes blog-tick { from { transform: scaleX(0); } to { transform: none; } }
.blog__num { margin: 0; overflow: hidden; font-size: clamp(2rem, 2.8vw, 2.75rem); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.blog__num b { display: block; font-weight: inherit; }
.blog__num b.is-flip { animation: blog-num 0.6s var(--ease-out) both; }
@keyframes blog-num { from { opacity: 0; transform: translate3d(0, 60%, 0); } }
.blog :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* JS : les textes se superposent, les cartes se placent par leur rang. */
.blog.is-live .blog__story { display: block; visibility: hidden; transition: visibility 0s linear 0.3s; }
.blog.is-live .blog__story.is-active { visibility: visible; transition-delay: 0s; }
.blog.is-live .blog__story > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.28s ease, transform 0s linear 0.3s; }
.blog.is-live .blog__story.is-active > * { opacity: 1; transform: none; transition: opacity 0.5s ease 0.34s, transform 0.75s var(--ease-out) 0.34s; }
.blog.is-live .blog__story.is-active > :nth-child(2) { transition-delay: 0.4s; }
.blog.is-live .blog__story.is-active > :nth-child(3) { transition-delay: 0.48s; }
.blog.is-live .blog__story.is-active > :nth-child(4) { transition-delay: 0.56s; }

.blog.is-live .blog__card:not(.blog__card--all) {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s9-cw);
  transform: translate3d(calc(var(--slot, 0) * var(--s9-step)), 0, 0);
  transition: transform 0.85s var(--ease-out), translate 0.7s var(--ease-out), opacity 0.45s ease;
}
.blog.is-live .blog__card--all { grid-column: 3; }
.blog.is-live .blog__card.is-current { visibility: hidden; opacity: 0; transition: none; }
.blog.is-live .blog__card.is-back { opacity: 0; translate: 0 34px; transition: none; }
.blog.is-live .blog__card.is-return { transition-delay: 0s, 0.5s, 0.5s; }

/* Entrée : le texte, puis les cartes l'une après l'autre, puis la barre. */
.blog.is-live:not(.is-in) .blog__head { opacity: 0; transform: translate3d(0, 18px, 0); }
.blog.is-live:not(.is-in) .blog__story.is-active > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: none; }
.blog.is-live:not(.is-in) .blog__card { opacity: 0; translate: 0 48px; transition: none; }
.blog.is-live:not(.is-in) .blog__nav { opacity: 0; }
.blog.is-live .blog__head { transition: opacity 0.6s ease, transform 0.8s var(--ease-out); }
.blog.is-live .blog__nav { transition: opacity 0.6s ease 0.7s; }
.blog.is-in .blog__card:nth-child(1) { transition-delay: 0s, 0.3s, 0.3s; }
.blog.is-in .blog__card:nth-child(2) { transition-delay: 0s, 0.38s, 0.38s; }
.blog.is-in .blog__card:nth-child(3) { transition-delay: 0s, 0.46s, 0.46s; }
.blog.is-in .blog__card:nth-child(4) { transition-delay: 0.54s; }
.blog.is-in .blog__card--all { transition: translate 0.7s var(--ease-out) 0.54s, opacity 0.45s ease 0.54s; }
/* Après un premier changement : les cartes attendent que la photo choisie
   ait commencé à s'ouvrir avant de glisser ; l'ancienne revient ensuite. */
.blog.is-in.is-moved .blog__card { transition-delay: 0.28s, 0s, 0s; }
.blog.is-in.is-moved .blog__card.is-return { transition-delay: 0s, 0.5s, 0.5s; }

@media (hover: hover) and (pointer: fine) {
  .blog.is-live .blog__card:not(.blog__card--all) { will-change: transform; }
}

/* Écran large mais bas (portable 13", 1024 × 768) : tout se resserre. */
@media (min-width: 760px) and (max-height: 860px) and (orientation: landscape) {
  .blog { --s9-cw: clamp(136px, 12vw, 176px); }
  .blog__eyebrow { margin-bottom: 14px; }
  .blog__body { padding-top: 32px; }
  .blog__title { font-size: clamp(2.125rem, 3.6vw, 3.125rem); }
  .blog__sum { margin-top: 14px; }
  .blog__meta { margin-top: 20px; }
}

/* Mobile (et tablette en portrait) : tout en colonne ; la photo se voit
   entre le titre et l'article ; trois petites cartes sur une ligne. */
@media (max-width: 759px), (max-width: 1023px) and (orientation: portrait) {
  .blog {
    --s9-gap: 10px;
    --s9-cw: calc((min(100vw, 1240px + 2 * var(--pad-x)) - 2 * var(--pad-x) - 2 * var(--s9-gap)) / 3);
    --s9-radius: 10px;
    --s9-band: clamp(440px, 66svh, 620px);
    min-height: 0;
    padding-top: 64px;
    padding-bottom: 44px;
  }
  /* La photo n'occupe qu'une bande en haut, qui se fond dans le bleu nuit. */
  .blog__slide img { height: var(--s9-band); object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .blog__shade {
    background: linear-gradient(180deg,
      rgb(11 22 38 / 0.86) 0px,
      rgb(11 22 38 / 0.6) 200px,
      rgb(11 22 38 / 0.1) calc(var(--s9-band) * 0.56),
      rgb(11 22 38 / 0.88) calc(var(--s9-band) * 0.86),
      var(--night) var(--s9-band));
  }
  .blog__head { flex-direction: column; align-items: flex-start; }
  .blog .stitle { font-size: clamp(1.75rem, 7.4vw, 2.25rem); }
  .blog__lead { max-width: 40ch; }
  .blog__body { grid-template-columns: minmax(0, 1fr); padding-top: clamp(160px, 30svh, 300px); }
  .blog__title { font-size: clamp(2rem, 8.6vw, 2.75rem); }
  .blog__sum { font-size: 1rem; }
  .blog__meta { gap: 16px 24px; }
  .blog__side { gap: 18px; }
  .blog__card a { padding: 10px; }
  .blog__ccat { gap: 6px; font-size: 0.5625rem; }
  .blog__ccat::before { width: 12px; }
  .blog__cname { font-size: 0.75rem; }
  .blog__card--all .blog__cname { font-size: 0.875rem; }
  .blog__all-ico { width: 34px; height: 34px; }
  .blog__all-ico svg { width: 15px; height: 15px; }
  .blog__nav button { width: 42px; height: 42px; }
  .blog__num { font-size: 1.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .blog *,
  .blog *::before,
  .blog *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; }
}

/* =========================================================
   S10 — Le calendrier (CTA final), essai 19 « le projecteur » (d'après
   F29), objet B « le calendrier de bureau » : la scène bleu nuit (même
   fond et même lumière blanche que la hero, S2, S7 et S9) ; le projecteur
   sur rail (`.rig`) est accroché en haut, au centre ; un
   projecteur au-dessus du cadre éclaire le titre, puis un calendrier de
   bureau posé au sol (chevalet, spirale). Une page par date (les vraies
   dates de S5) ; à gauche les 3 points, à droite le bouton jaune.
   - Entrée (`is-in`, posée par le JS, retirée quand la section est sortie
     en entier : l'entrée se rejoue au retour) : le projecteur grésille et
     s'allume (1 s), le calendrier sort de l'ombre en se tournant vers soi.
   - Puis la page du dessus se soulève vers soi toutes les 3,2 s et passe
     sous la pile (garde → déc. → févr. → juil. → sept. → garde…).
   - Sans JS ou en mouvement réduit : scène éclairée, page de garde fixe.
   Le calendrier est en em : sa taille suit --w.
   ========================================================= */
.final {
  position: relative;
  isolation: isolate;
  overflow: clip;
  --rig-x: 50%;
  --rig-y: 12px;
  --rig-w: 84px;
  --rig-tilt: 0deg;
  min-height: max(100svh, 820px);
  padding: clamp(124px, 16vh, 160px) var(--pad-x) clamp(48px, 8vh, 90px);
  color: var(--paper);
  background: var(--night);
}
.final__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* la salle : le même voile bleuté que la S2 */
.final__light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 50% 68%, rgb(120 150 210 / 0.11), transparent 72%);
}
/* le faisceau : il part de la lentille du projecteur, traverse le titre et descend sur le calendrier */
.final .cone { --spread: 26deg; --throw: 1050px; }
.final__in { position: relative; display: grid; justify-items: center; max-width: 1180px; margin: 0 auto; text-align: center; }
.final__eyebrow { margin: 0 0 18px; }
.final__eyebrow > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.9);
}
.final__eyebrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.final .stitle {
  --title-on: var(--paper);
  --title-off: rgb(255 255 255 / 0.22);
  margin: -0.24em auto;
  max-width: 30ch;
  font-size: clamp(2rem, 3.4vw, 3.125rem);
}
.final__lead { max-width: 54ch; margin: 20px 0 0; font-size: 1.0625rem; line-height: 1.55; color: rgb(255 255 255 / 0.8); }
.final__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
  margin-top: clamp(28px, 5vh, 56px);
}
.final__points { display: grid; gap: 10px; justify-self: end; margin-bottom: 18px; text-align: left; }
.final__points li { display: flex; align-items: baseline; gap: 12px; font-size: 1rem; line-height: 1.4; }
.final__points li::before { content: ""; flex: none; width: 16px; height: 2px; background: var(--gold); transform: translateY(-5px); }
.final__go { justify-self: start; margin-bottom: 18px; text-align: left; }
.final__note { margin: 12px 0 0; font-size: 0.8125rem; color: rgb(255 255 255 / 0.62); }
.final__obj { position: relative; }
/* le rond de lumière au sol, sous le calendrier */
.final__obj::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -60px;
  width: min(900px, 90vw);
  height: 140px;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.09) 55%, transparent);
}

/* ---------- Le calendrier de bureau ---------- */
.desk {
  --w: clamp(300px, 27vw, 400px);
  position: relative;
  width: var(--w);
  aspect-ratio: 1.42 / 1;
  margin-top: 1.4em;                   /* place pour la spirale */
  font-size: calc(var(--w) / 22);
  line-height: 1.2;
  text-align: left;
  perspective: 1500px;
  perspective-origin: 50% 20%;
}
/* ombre de contact au sol */
.desk::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8%;
  right: -18%;
  bottom: -1.2em;
  height: 2.6em;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.22) 55%, transparent);
}
.desk__body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(-20deg);
  transform-origin: 50% 100%;
}
/* le chevalet vu de côté : un triangle de carton bleu nuit */
.desk__side {
  position: absolute;
  bottom: 0;
  left: 100%;
  width: calc(var(--w) / 1.42 * 0.42);
  height: calc(var(--w) / 1.42 * 0.98);
  background: linear-gradient(90deg, #26365f, #101a35 70%);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  transform-origin: 0 100%;
  transform: rotateY(90deg);
}
.desk__side::after { content: ""; position: absolute; inset: 0; background: var(--night); opacity: 0; }
/* la face avant penche en arrière, comme un chevalet posé ; sa boîte monte
   d'1em au-dessus du carton pour que la spirale y tienne entière (sinon
   Chrome la rogne pendant qu'une page tourne) */
.desk__front {
  position: absolute;
  inset: -1em 0 0;
  transform-origin: 50% 100%;
  transform: rotateX(12deg);
}
.desk__front::before { content: ""; position: absolute; inset: 1em 0 0; border-radius: 0.2em; background: #0e1730; }
.desk__stack {
  position: absolute;
  inset: 1.55em 0.35em 0.5em;
  perspective: 1100px;
  perspective-origin: 50% 0;
}
/* tranche des pages restantes, sous la page du dessus */
.desk__stack::after {
  content: "";
  position: absolute;
  left: 0.1em;
  right: 0.1em;
  bottom: -0.32em;
  height: 0.32em;
  border-radius: 0 0 0.12em 0.12em;
  background: repeating-linear-gradient(180deg, #ebe5d6 0 1px, #c4bca9 1px 2px);
}
.desk__page {
  position: absolute;
  inset: 0;
  z-index: var(--z);
  transform-style: preserve-3d;
  transform-origin: 50% 0;
}
.desk__face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 47% minmax(0, 1fr);
  overflow: hidden;
  border-radius: 0.14em;
  background: #fbf8f1;
  color: var(--ink);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 0.06em 0.12em rgb(0 0 0 / 0.18);
}
.desk__photo { position: relative; margin: 0; overflow: hidden; }
.desk__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.desk__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(11 22 38 / 0.82), rgb(11 22 38 / 0) 62%); }
.desk__photo figcaption {
  position: absolute;
  z-index: 1;
  left: 0.8em;
  right: 0.8em;
  bottom: 0.55em;
  display: grid;
  font-size: 0.46em;
  line-height: 1.3;
  color: rgb(255 255 255 / 0.82);
}
.desk__photo figcaption b { font-size: 1.5em; font-weight: 600; color: var(--paper); }
.desk__status {
  position: absolute;
  z-index: 1;
  top: 0.6em;
  right: 0.6em;
  padding: 0.35em 0.75em 0.32em;
  border-radius: 99em;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.desk__lower {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 0.8em;
  padding: 0.6em 0.8em 0.55em;
}
.desk__month { display: grid; grid-template-rows: auto auto 1fr; align-content: start; min-width: 0; }
.desk__name { display: grid; margin: 0; font-size: 1.2em; font-weight: 600; line-height: 0.95; letter-spacing: -0.01em; }
.desk__name span { margin-top: 0.1em; color: var(--gold); font-weight: 300; }
.desk__when { margin: 0.6em 0 0; font-size: 0.5em; font-weight: 600; letter-spacing: 0.04em; }
.desk__when sup { font-size: 0.7em; line-height: 0; }
.desk__mark { align-self: end; width: 3.6em; height: auto; opacity: 0.85; }
.desk__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-content: start;
  row-gap: 0.12em;
  font-size: 0.48em;
  font-weight: 500;
  line-height: 1.75;
  text-align: center;
}
.desk__grid b { font-size: 0.86em; font-weight: 600; color: rgb(22 33 61 / 0.5); }
.desk__grid .we { color: rgb(22 33 61 / 0.42); }
.desk__grid .on { background: var(--gold); color: var(--ink); font-weight: 600; }
.desk__grid .s { border-radius: 99em 0 0 99em; }
.desk__grid .e { border-radius: 0 99em 99em 0; }
/* la page de garde : bleu nuit, années en feuille d'or, le dirigeant */
.desk__page--cover .desk__face {
  grid-template-rows: none;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  background: var(--ink);
  color: var(--paper);
}
.desk__cover { position: relative; z-index: 1; display: grid; align-content: end; padding: 0.95em 0 0.95em 1em; }
.desk__logo { position: absolute; top: 0.95em; left: 1em; width: 4.6em; height: auto; }
.desk__kicker { margin: 0; color: var(--gold); font-size: 0.5em; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.desk__years { display: grid; margin: 0.12em 0 0; font-size: 2.9em; line-height: 0.92; letter-spacing: -0.02em; }
.desk__years span {
  justify-self: start;
  background: linear-gradient(112deg, #9c7106 0%, #e9c04a 18%, #fff0b3 30%, #e2ae0c 44%, #a87a06 62%, #f3d36e 80%, #c5940b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.desk__years span:first-child { font-weight: 300; }
.desk__years span:last-child { font-weight: 600; }
.desk__sub { margin: 0.8em 0 0; font-size: 0.5em; font-weight: 500; line-height: 1.4; color: rgb(255 255 255 / 0.86); }
.desk__cover-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1) contrast(1.1);
  -webkit-mask: linear-gradient(90deg, transparent, #000 45%);
  mask: linear-gradient(90deg, transparent, #000 45%);
  opacity: 0.85;
}
/* la spirale */
.desk__rings {
  position: absolute;
  z-index: 9;
  top: 0.38em;
  left: 1.1em;
  right: 1.1em;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.desk__rings span { position: relative; width: 0.42em; height: 1.4em; }
.desk__rings span::before {          /* le trou dans le carton */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0.5em;
  height: 0.34em;
  border-radius: 50%;
  background: #050a14;
  translate: -50% 0;
}
.desk__rings span::after {           /* le fil */
  content: "";
  position: absolute;
  inset: 0 0 0.12em;
  border: 0.12em solid #cfd5df;
  border-bottom-color: #8d95a5;
  border-radius: 0.24em;
  box-shadow: 0 0.08em 0.12em rgb(0 0 0 / 0.45), inset 0 0 0.04em rgb(0 0 0 / 0.4);
}
.desk__shade { position: absolute; z-index: 10; inset: 0 -0.1em -0.1em; background: var(--night); opacity: 0; pointer-events: none; }

/* ---------- Mouvement (rejoué à chaque retour) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js :is(.final__beam, .desk__shade) { will-change: opacity; }
  html.js .final__beam, html.js .final .rig__glow, html.js .final__obj::before { opacity: 0; transition: opacity 0.3s; }
  html.js .desk__shade, html.js .desk__side::after { opacity: 0.86; transition: opacity 0.3s; }
  html.js .final.is-in :is(.final__beam, .rig__glow) { animation: final-flicker 1s 0.15s both; }
  html.js .final.is-in .final__obj::before { animation: final-flicker 1s 0.15s both; }
  html.js .final.is-in .desk__shade { animation: final-flicker-off 1s 0.15s both; }
  html.js .final.is-in .desk__side::after { animation: final-flicker-off 1s 0.15s both; }
  /* le calendrier sort de l'ombre en se tournant vers soi */
  html.js .desk__body { transform: translateY(0.6em) rotateY(-34deg); transition: transform 0.4s var(--ease-out); }
  html.js .final.is-in .desk__body { transform: rotateY(-20deg); transition: transform 1.3s 0.35s var(--ease-out); }
  /* la page se soulève vers soi et disparaît derrière la spirale */
  .desk__page.is-flip { animation: desk-flip 0.8s cubic-bezier(0.45, 0, 0.7, 0.55) both; }
}
@keyframes final-flicker {
  0% { opacity: 0; } 14% { opacity: 0.75; } 22% { opacity: 0.12; } 36% { opacity: 0.95; }
  44% { opacity: 0.4; } 62%, 100% { opacity: 1; }
}
@keyframes final-flicker-off {
  0% { opacity: 0.86; } 14% { opacity: 0.3; } 22% { opacity: 0.8; } 36% { opacity: 0.1; }
  44% { opacity: 0.5; } 62%, 100% { opacity: 0; }
}
@keyframes desk-flip { to { transform: rotateX(92deg); } }

@media (max-width: 1023px) {
  .final__stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .final__obj { grid-row: 1; margin-bottom: 8px; }
  .final__points, .final__go { justify-self: center; margin: 0; }
}
@media (max-width: 759px) {
  .final { --rig-w: 64px; min-height: 0; padding-top: clamp(96px, 13vh, 116px); }
  .final .stitle { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .desk { --w: min(84vw, 340px); }
  .final__go { justify-self: stretch; text-align: center; }
}

/* =========================================================
   Pied de page : l'affiche de l'intro, à l'envers (la « coda »)
   Le contenu du pied de page sur le mur (la lettre, « Nous joindre », le
   plan du site, les mentions) puis, en dernier, la signature : le projecteur
   suspendu de l'intro (`.intro__beam`, `.intro__lamp`) au-dessus du vrai
   logo H&C en grand (`.coda__logo`, vectoriel, une pièce par tracé), le tout
   dans `.coda__sign`. Il est collé sous la S10, qui joue le rideau : au bout
   de la page, elle remonte et le découvre, l'inverse de l'intro que la hero
   recouvre en montant. Le projecteur s'allume (`.is-lit`, posé par le JS
   quand le logo, tout en bas, est à moitié à l'écran) et le logo se dessine ;
   tout s'éteint quand on remonte (logo hors écran) ou que le pied de page
   est de nouveau recouvert. La lettre H&C ne s'envoie pas dans la maquette
   (en ligne : Kartra).
   ========================================================= */
/* La S10 et le pied de page : le pied de page ne se colle à l'écran que dans ce bloc. */
.finale { position: relative; }
/* Le rideau : la S10 passe devant le pied de page, et son bord ombre le mur en remontant. */
.finale > .final { z-index: 1; box-shadow: 0 16px 56px rgb(11 22 38 / 0.2); }
.coda {
  position: relative;
  z-index: 0;
  /* colonne : la signature se cale au bas de l'écran quand le contenu est court */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  /* le bas est porté par la signature, pleine largeur */
  padding: calc(var(--pad-top) + 48px) var(--pad-x) 0;
  color: var(--ink);
  background: var(--wall);
  overflow: hidden;
}
/* Avec le JS, qui mesure sa hauteur (`--coda-h`) : collé sous la S10. Pas
   plus haut que l'écran, il est calé en bas ; plus haut, calé en haut le
   temps que le rideau se lève (bas négatif), puis il défile jusqu'au logo.
   Sans JS, il suit simplement la S10. */
.js .coda { position: sticky; bottom: min(0px, calc(100svh - var(--coda-h, 100svh))); }
/* Recouvert par la S10 (ou plus bas que l'écran) : pas dessiné. */
.coda.is-covered { visibility: hidden; }
/* La signature, tout en bas, pleine largeur comme l'affiche : le projecteur
   pend d'une ligne au plafond (le trait du haut), sa lumière tombe sur le
   logo. Le haut laisse la place du projecteur : la lentille est à ~1,45 fois
   sa largeur sous le plafond, le logo démarre un peu en dessous. */
.coda__sign {
  position: relative;
  margin: auto calc(-1 * var(--pad-x)) 0;
  padding: calc(clamp(88px, 9.4vw, 150px) * 1.45 + clamp(56px, 9vh, 104px)) var(--pad-x) calc(var(--pad-bottom) + clamp(12px, 3vh, 32px));
  border-top: 1px solid rgb(22 33 61 / 0.12);
  overflow: hidden;
}
/* Le logo officiel, en grand, à la largeur du contenu ; sous le projecteur. */
.coda__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 1240px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
/* Éteint tant qu'il n'est pas découvert ; l'allumage se rejoue à chaque passage. */
.js .coda:not(.is-lit) .intro__beam { opacity: 0; animation: none; }
.js .coda:not(.is-lit) .intro__lens { fill: #3b4560; animation: none; }
.coda.is-lit .intro__lens { animation: lamp-on 0.35s 0.05s ease-out backwards; }
.coda.is-lit .intro__beam { animation: fade 0.7s 0.1s ease-out backwards; }
/* Le logo se dessine à l'allumage : un trait bleu nuit fait le tour de
   chaque pièce, de gauche à droite (`--x` : place de la pièce, de 0 à 1 ;
   `pathLength="1"` sur chaque tracé), puis la couleur la remplit et le
   trait s'efface. Avant l'allumage, rien (avec JS seulement). */
.coda__logo path {
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-opacity: 0;
}
.js .coda:not(.is-lit) .coda__logo path { fill-opacity: 0; }
.coda.is-lit .coda__logo path { animation: trace 2.1s calc(0.3s + var(--x) * 0.75s) cubic-bezier(0.65, 0, 0.35, 1) backwards; }
@keyframes trace {
  0%   { stroke-dashoffset: 1; stroke-opacity: 1; fill-opacity: 0; }
  58%  { stroke-dashoffset: 0; stroke-opacity: 1; fill-opacity: 0; }
  100% { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; }
}

/* ---------- Le contenu, sur le mur ---------- */
.coda__body, .coda__bar { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin-inline: auto; }
.coda__body { font-size: 0.9375rem; }
.letter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 20px 48px;
  padding-bottom: clamp(32px, 5vh, 52px);
  border-bottom: 1px solid rgb(22 33 61 / 0.12);
}
.letter__title { margin: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.letter__promise { max-width: 48ch; margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.5; color: #5b6478; }
.letter__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; margin: 0; }
.letter__form label { display: block; }
.letter__form input {
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
}
.letter__form input::placeholder { color: #5b6478; opacity: 1; }
.letter__form input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.letter__btn { border: 0; font: inherit; font-weight: 500; cursor: pointer; }
.letter__note { grid-column: 1 / -1; margin: 0; font-size: 0.75rem; color: rgb(22 33 61 / 0.55); }
.foot__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
  gap: clamp(32px, 5vw, 80px);
  padding-top: clamp(32px, 5vh, 52px);
}
/* Le logo et la devise sont déjà en grand au-dessus : ici, la présentation seule. */
.foot__about { max-width: 40ch; margin: 0; font-size: 0.875rem; line-height: 1.6; color: #5b6478; }
.foot__reach { margin-top: clamp(28px, 4vh, 40px); }
.foot__reach .btn { margin-bottom: 18px; }
.foot__reach address { font-size: 0.875rem; font-style: normal; line-height: 1.7; color: #5b6478; }
.foot__reach address a { color: var(--ink); text-decoration: none; }
.foot__reach address a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* l'adresse mène à la carte, mais garde la couleur du texte */
.foot__reach address a[href*="google.com/maps"] { color: inherit; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.45fr); gap: 24px; }
.foot__cols p, .foot__head { margin: 0 0 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(22 33 61 / 0.55); }
.foot__head { margin-bottom: 14px; }
.foot__cols a { display: block; padding: 4px 0; font-size: 0.875rem; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; color: var(--ink); }
.foot__cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Les mentions, sous le plan du site, juste au-dessus de la signature. */
.coda__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(40px, 7vh, 72px);
  margin-bottom: clamp(32px, 6vh, 56px);
  padding-top: 18px;
  border-top: 1px solid rgb(22 33 61 / 0.12);
  font-size: 0.8125rem;
  color: #5b6478;
}
.coda__bar p { margin: 0; }
.coda__bar a { color: var(--ink); text-decoration: none; }
.coda__bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.coda__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.coda__social { display: flex; gap: 8px; }
.coda__social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--night); color: var(--paper); transition: background-color 0.2s, color 0.2s; }
.coda__social a:hover { background: var(--gold); color: var(--ink); text-decoration: none; }
.coda__social svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
/* Crédits des photos (licence gratuite Magnific : auteur + source obligatoires). */
.coda__bar > .coda__credits { flex-basis: 100%; font-size: 0.75rem; line-height: 1.5; color: rgb(22 33 61 / 0.55); }
.coda__bar .coda__credits a { color: inherit; }

@media (max-width: 1023px) {
  .foot__main, .letter { grid-template-columns: minmax(0, 1fr); }
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .foot__id { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .foot__reach { margin-top: 0; }
}
@media (max-width: 759px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .letter__form { grid-template-columns: minmax(0, 1fr); }
  .letter__btn { justify-self: stretch; }
  .coda__bar { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 14px; }
  .coda__bar > .coda__credits { flex-basis: auto; }
}

/* =========================================================
   Menu (mobile) et recherche
   ========================================================= */
.menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 16px 24px 28px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  overflow-y: auto;
}
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: rgb(11 22 38 / 0.6); }
.menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: 46px;
}
.menu__tools { display: flex; gap: 10px; }
.menu .icon-btn { display: grid; }
.menu__logo { width: auto; height: 34px; }
.menu__nav { display: grid; margin-top: 22px; }
.menu__link,
.menu__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.menu__group > summary::-webkit-details-marker { display: none; }
.menu__link:hover,
.menu__group > summary:hover { color: var(--gold); }
.menu__chev { width: 22px; height: 22px; stroke-width: 1.6; opacity: 0.7; transition: transform 0.3s var(--ease-out); }
.menu__group[open] > summary { color: var(--gold); border-bottom-color: transparent; }
.menu__group[open] > summary .menu__chev { transform: rotate(180deg); }
.menu__sub { display: grid; gap: 2px; padding: 0 0 14px 2px; border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.menu__sub a { padding: 7px 0; font-size: 1.0625rem; line-height: 1.3; color: var(--muted); text-decoration: none; }
.menu__sub a:hover { color: var(--gold); }
.menu__label {
  margin: 10px 0 2px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.menu__sub a.menu__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--paper); font-weight: 500; }
.menu__all svg { width: 14px; height: 14px; stroke-width: 2; }
.menu__foot { display: grid; gap: 18px; margin-top: auto; padding-top: 26px; }
.menu .btn--gold { justify-self: start; padding-left: 7px; }
.menu__contact { display: grid; gap: 2px; }
.menu__contact a { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 0.9375rem; color: var(--muted); text-decoration: none; }
.menu__contact a:hover { color: var(--paper); }
.menu__contact svg { width: 18px; height: 18px; color: var(--gold); stroke-width: 1.7; }

/* La recherche : une fenêtre en haut de l'écran. */
.search {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  margin: 12vh auto 0;
  padding: 18px 20px 22px;
  border: 1px solid var(--glass-line);
  border-radius: 28px;
  background: rgb(11 22 38 / 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: var(--paper);
  box-shadow: 0 30px 80px rgb(5 10 20 / 0.5);
}
.search::backdrop { background: rgb(11 22 38 / 0.55); backdrop-filter: blur(3px); }
.search[open] { animation: rise 0.35s var(--ease-out); }
.search__form { display: flex; align-items: center; gap: 12px; }
.search__form > svg { flex: none; width: 22px; height: 22px; margin-left: 4px; color: var(--faint); stroke-width: 1.8; }
.search__input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--paper);
  outline: 0;
}
.search__input::placeholder { color: var(--faint); }
.search .icon-btn { display: grid; width: 40px; height: 40px; flex: none; }
.search__label {
  margin: 14px 4px 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.search__list { display: flex; flex-wrap: wrap; gap: 8px; }
.search__list a {
  display: block;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.search__list a:hover { background: var(--gold); color: var(--ink); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1023px) {
  :root { --subject-h: 66%; --subject-top: 12%; }
  .proof { flex-wrap: wrap; justify-content: flex-start; }
}

/* Sous 1240 px, logo + gélule + bouton ne tiennent plus sur une ligne :
   le bouton menu remplace la gélule (et le bouton jaune, repris dans le menu). */
@media (max-width: 1239px) {
  .nav, .nav__cta { display: none; }
  .burger { display: grid; }
  .brand::before { --chip-v: -7px; }   /* à la hauteur du bouton menu (48 px) */
}
/* Entre 1240 et 1399 px, le bouton jaune se réduit à son icône. */
@media (min-width: 1240px) and (max-width: 1399px) {
  .nav__cta { width: 48px; padding: 0; justify-content: center; }
  .nav__cta .btn__label { display: none; }
  .nav__cta .btn__icon { background: none; }
}
/* Sous 960 px, le rond se met à gauche du bouton menu. */
@media (max-width: 959px) {
  .spot { --disc: 84px; top: calc(var(--pad-top) - 10px); right: calc(var(--pad-x) + 46px + 20px); }
}

@media (max-width: 759px) {
  :root { --subject-x: 52%; --subject-top: 7%; --lx: 50vw; --ly: 22vh; --peek: 30svh; }
  .intro__bar { font-size: 0.75rem; }
  .brand { --brand-h: 30px; }
  .brand::before { --chip-v: -8px; --chip-h: -16px; }
  .spot { --disc: 60px; top: calc(var(--pad-top) - 6px); right: calc(var(--pad-x) + 46px + 16px); }
  /* Pas d'affiche d'intro sur mobile : on arrive directement sur la hero
     (le logo reste en haut à gauche, blanc sur le rideau). */
  .intro { display: none; }
  .hero { margin-top: 0; }
  /* En portrait, le dirigeant se cale sur la largeur : la tête reste grande. */
  .stage__actor { height: auto; width: 132vw; max-width: 560px; }
  .stage__subject { width: 100%; height: auto; }
  .stage__shade {
    background:
      linear-gradient(to bottom, rgb(11 22 38 / 0.42), rgb(11 22 38 / 0) 20%),
      linear-gradient(to bottom, rgb(11 22 38 / 0) 30%, rgb(11 22 38 / 0.6) 48%, rgb(11 22 38 / 0.96) 66%, var(--night) 100%);
  }
  .copy { padding-top: 46vh; }
  .tag__more { display: none; }
  .title { font-size: clamp(2.1rem, 9.6vw, 3rem); }
  .lead { font-size: 0.9375rem; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .btn--gold .btn__label { flex: 1; text-align: left; }
  .proof { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 28px; padding-top: 20px; }
  .proof__text { max-width: none; }
}

@media (min-width: 760px) and (max-height: 700px) {
  :root { --subject-h: 76%; --subject-top: 9%; }
  .copy { padding-top: 12px; }
  .title { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
  .lead { margin-top: 14px; }
  .actions { margin-top: 20px; }
  .proof { margin-top: 22px; padding-top: 16px; }
}

/* ---------- S5 · 2026-10-20 : les dates des académies TATEA, sous le globe ----------
   axe sept. 2026 → juin 2027 ; trait = durée de la cohorte, pastilles jaunes = rassemblements */
.dac { --name: 180px; --line: #e2e7ee; margin-top: clamp(28px, 3.5vw, 44px); }
.dac__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 14px; }
.dac__k { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.dac__k span { font-weight: 400; color: var(--s5-faint); }
.dac__key { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.8125rem; color: var(--s5-text); }
.dac__key i { width: 18px; height: 10px; border-radius: 99px; background: var(--gold); }
.dac__months { display: grid; grid-template-columns: var(--name) 1fr; font-size: 0.75rem; color: var(--s5-faint); }
.dac__months div { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.dac__months div span { padding: 0 0 6px 6px; border-left: 1px solid var(--line); white-space: nowrap; }
.dac__months small { font-size: inherit; opacity: 0.7; }
.dac__rows { margin: 0; padding: 0; list-style: none; }
.dac__r { display: grid; grid-template-columns: var(--name) 1fr; align-items: center; border-top: 1px solid var(--line); }
.dac__r:last-child { border-bottom: 1px solid var(--line); }
.dac__n { font-size: 0.9375rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.dac__n:hover { color: #b98d00; }
.dac__t { position: relative; height: 44px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%); }
.dac__span { position: absolute; top: 50%; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); height: 2px; margin-top: -1px; border-radius: 2px; background: #b9c1cd; }
.dac__run { position: absolute; top: 50%; left: calc(var(--a) * 1%); width: max(12px, calc((var(--b) - var(--a)) * 1%)); height: 14px; margin-top: -7px; border-radius: 99px; background: var(--gold); }
.dac__run span { position: absolute; bottom: calc(100% + 2px); left: 50%; translate: -50% 0; font-size: 0.6875rem; font-weight: 500; white-space: nowrap; color: var(--s5-text); }
.dac__tbc { position: absolute; top: 50%; left: 30%; translate: 0 -50%; font-size: 0.75rem; }
.dac__r:nth-child(3) .dac__tbc { left: 0; }
.dac__r:last-child .dac__tbc { left: 0; }
.dac__m { display: none; }
@media (max-width: 1000px) {
  .dac { --name: 150px; }
  .dac__run span { display: none; }
  .dac__run { margin-top: -7px; }
  .dac__m { display: block; grid-column: 2; margin: -8px 0 8px; font-size: 0.75rem; color: var(--s5-text); }
  .dac__m:empty { display: none; }
}
@media (max-width: 640px) {
  .dac__months, .dac__t { display: none; }
  .dac__r { display: block; padding: 12px 0; }
  .dac__m { margin: 3px 0 0; }
  .dac__r:has(.dac__tbc) .dac__t { display: block; height: auto; margin-top: 4px; background: none; }
  .dac__r:has(.dac__tbc) .dac__t > :not(.dac__tbc) { display: none; }
  .dac__tbc { position: static; translate: none; }
}

/* 2026-10-20 : les dates des académies TATEA rejoignent les cartes du globe (le tableau .dac en dessous est retiré) :
   6 cartes par ordre chronologique, plus compactes sur une seule ligne ; sous 1024 px la ligne défile déjà. */
@media (min-width: 1024px) {
  .dates__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .date__btn { padding: 14px 14px 12px; border-radius: 16px; }
  .date__label { font-size: 0.625rem; letter-spacing: 0.04em; gap: 6px; }
  .date__icon { width: 15px; height: 15px; }
  .date__when { margin-top: 10px; font-size: clamp(1.375rem, 2.3vw, 2.5rem); gap: 5px; }
  .date__month { padding: 4px 7px 3px; font-size: 0.6875rem; }
  .date__sub { font-size: 0.75rem; line-height: 1.35; }
  .date__status { font-size: 0.6875rem; }
}

/* 2026-10-20 : le billet E-learning porte le logo Managersity (blanc sur le carton nuit) à la place du nom */
.ticket__prog--logo { display: flex; align-items: center; }
.ticket__prog--logo img { display: block; width: 100%; max-width: 46cqw; height: auto; }

/* 2026-10-20 : cinq billets (Parcours, TATEA, Workshops internationaux, The Next CEO Day, E-learning).
   Ordinateur et tablette : une rangée de cinq ; mobile : 2 + 2 + 1, le cinquième centré au bout d'un cordon encore plus long. */
.tickets__stage { --tw: clamp(112px, min(calc((100cqw - 4 * var(--gap)) / 5), calc((100svh - 300px) / 2.08)), 236px); }
.tickets__row { grid-template-columns: repeat(5, var(--tw)); }
@media (min-width: 760px) and (max-width: 1023px) { .tickets__stage { --gap: 16px; } }
@media (max-width: 759px) {
  .tickets__stage { --tw: calc((100cqw - var(--gap)) / 2); }
  .tickets__row { grid-template-columns: repeat(2, var(--tw)); }
  .ticket:nth-child(n + 3) { z-index: 1; }
  .ticket:nth-child(n + 5) { --drop: calc(2 * (var(--d0) + var(--th) + var(--row-gap))); grid-column: 1 / -1; justify-self: center; z-index: 0; }
  .tickets__detail { margin-top: calc((var(--focus-scale) - 3) * (var(--d0) + var(--th)) + 28px - 2 * var(--row-gap)); }
}
/* le logo Managersity remplace la toque H&C en haut du billet E-learning */
.ticket__mark--msy { top: 15cqw; width: 34cqw; height: auto; background: none; }
.ticket__mark--msy img { display: block; width: 100%; height: auto; }