/* ==========================================================================
   CFC — CISSÉ FITNESS CLUB
   Direction : ÉDITORIAL PREMIUM.
   Fond clair, grille stricte, filets 1px, typographie à fort contraste
   (serif de titre / grotesque de texte / mono de données).
   Pas d'ombre portée, pas de carte flottante, pas de dégradé, pas de badge.
   ========================================================================== */

:root{
  /* Direction ATELIER DE FONTE — noir/blanc/jaune, retenue le 2026-08-11 en
     remplacement de "Poster gym" (noir/rouge, 2026-08-04). Meme registre
     affiche/duoton, accent rouge -> jaune signal, inspiree d'un prototype
     externe analyse par l'utilisateur (fonte, magnesie, plateau de
     musculation) puis adaptee/enrichie plutot que copiee telle quelle.
     Voir design-system/MASTER.md pour les ratios de contraste mesures. */
  --bone:#FFFFFF;
  --milk:#FFFFFF;
  --paper:#F7F7F7;
  --paper-2:#ECECEC;
  --ink:#0D0D0D;
  --ink-2:#3A3A3A;
  --ink-3:#6B6B6B;
  --line:rgba(13,13,13,.14);
  --line-2:rgba(13,13,13,.28);

  /* Un seul accent : jaune signal. --accent-2 = or fonce, seul sur pour du
     texte sur fond clair (le jaune plein passe sous 4.5:1 en petite taille,
     mesure ~1.6:1 sur blanc — jamais --accent comme texte sur fond clair). */
  --accent:#F0C21C;
  --accent-2:#7E6310;
  --wa:#157A3F;          /* réservé au bouton WhatsApp */

  /* Sections sombres : noir quasi pur, pas de teintes chaudes — duoton
     strict. Renomme le 2026-08-11 (ex --indigo/--indigo-2/--sun/--sun-2) :
     les classes .sec--charcoal/.sec--charcoal-2 remplacent
     .sec--charcoal/.sec--charcoal-2 (--red et --ochre fusionnes, plus de rouge). */
  --dark:#0D0D0D;
  --charcoal:#17160F;
  --charcoal-2:#000000;
  --gold:#F0C21C;         /* = --accent, jaune sur sur fond sombre, texte inclus */
  --gold-2:#FFD34D;       /* jaune vif decoratif (glow/bordures), pas pour texte seul */

  --ff-display:"Archivo Black",Arial,sans-serif;
  --ff-text:"Inter","Helvetica Neue",Arial,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;

  --gut:22px;
  --maxw:1240px;
  --ease:cubic-bezier(.32,.72,0,1);
  --radius:10px;   /* coins arrondis boutons/cartes — retour utilisateur 2026-08-04 */
  --radius-lg:16px;
}
@media (min-width:768px){ :root{ --gut:44px; } }
@media (min-width:1280px){ :root{ --gut:56px; } }

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* Fond noir pose au niveau html+body (pas seulement sur chaque section) :
   sans ca, une page plus courte que la fenetre (ex. /programmes en desktop
   large) laisse voir une bande blanche sous le footer, et le rubber-banding
   iOS revele du blanc au-dela des bords. Trouve et signale par un agent
   pendant la conversion des pages secondaires (2026-08-11). Les sections
   individuelles gardent leurs propres tons (--dark/--charcoal/--charcoal-2)
   par-dessus ce fond de base. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--dark); }
body{
  font-family:var(--ff-text); font-size:1rem; line-height:1.62;
  color:var(--milk); background:var(--dark);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-feature-settings:"kern" 1,"liga" 1;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
[hidden]{ display:none !important; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
a,button,[role="button"]{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
ul,ol{ list-style:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
::selection{ background:var(--ink); color:var(--milk); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* --- Typographie ---------------------------------------------------------
   Barlow Condensed en 700 fait le registre "poster gym" : massif, direct.
   Chargé en 600/700/800 uniquement (voir <link> Google Fonts) — ne jamais
   utiliser un poids non chargé, le navigateur synthétiserait un faux gras. */
h1,h2,h3,.display{
  font-family:var(--ff-display); font-weight:700; letter-spacing:-.01em;
  text-transform:uppercase; line-height:.98; color:var(--ink);
}
h1{ font-size:clamp(2.375rem,4.5vw,4rem); }
h2{ font-size:clamp(2rem,4.6vw,3.5rem); line-height:1.04; }
h3{ font-size:clamp(1.375rem,2.4vw,1.75rem); line-height:1.12; }
h4{ font-family:var(--ff-text); font-size:1rem; font-weight:600; letter-spacing:-.005em; }
em{ font-style:italic; }
p{ max-width:64ch; }
.lead{ font-size:clamp(1.0625rem,1.7vw,1.3125rem); line-height:1.5; color:var(--ink-2); max-width:52ch; }
.muted{ color:var(--ink-2); }

/* Étiquettes en mono : signal « données », très sobre */
.tag{
  font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
}
.tag--ink{ color:var(--ink); }
.tag--accent{ color:var(--accent); }
.num{ font-variant-numeric:tabular-nums lining-nums; }

/* --- Grille --------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:clamp(64px,8.5vw,140px); }
.sec--tight{ padding-block:clamp(48px,5vw,80px); }
.sec--paper{ background:var(--paper); }
.sec--dark{ background:var(--dark); color:var(--milk); }
.sec--dark h1,.sec--dark h2,.sec--dark h3{ color:var(--milk); }
.sec--dark .muted,.sec--dark .lead{ color:#B7BCC2; }
.rule{ border:0; border-top:1px solid var(--line); }
.sec--dark .rule{ border-color:rgba(251,250,248,.18); }

/* --- Déclinaison sombre des composants -------------------------------------
   Le fond encre + trame bogolan sert de respiration : il découpe la page en
   mouvements. Tout ce qui repose sur des filets clairs doit être décliné,
   sinon les séparateurs disparaissent. */
.sec--dark{ --line:rgba(251,250,248,.2); --line-2:rgba(251,250,248,.34); }
.sec--dark .head__no,.sec--dark .tag,.sec--dark .list__no,.sec--dark .list__m,
.sec--dark .prog__no,.sec--dark .spec dt,.sec--dark .quote .res,
.sec--dark .ev__d span,.sec--dark .ev__s{ color:#AEB4BB; }
.sec--dark .list__t,.sec--dark .spec dd,.sec--dark .quote cite,
.sec--dark .ev__t,.sec--dark .ev__d{ color:var(--milk); }
.sec--dark .list__d,.sec--dark .prog__item > p,.sec--dark .quote p,
.sec--dark .ev__x,.sec--dark .muted{ color:#B7BCC2; }
.sec--dark .list,.sec--dark .list__item,.sec--dark .spec,.sec--dark .spec div,
.sec--dark .prog__item,.sec--dark .quote,.sec--dark .quote footer,
.sec--dark .prog__ex li,.sec--dark .agenda,.sec--dark .ev{ border-color:rgba(251,250,248,.2); }
.sec--dark .list__item::after,.sec--dark .ev::after{ background:var(--milk); }
.sec--dark .list__item:hover .list__no{ color:var(--gold); }
.sec--dark .prog__ex span:last-child{ color:#AEB4BB; }
.sec--dark .bogo-mark{ filter:brightness(1.9) saturate(.75); }
.sec--dark .stars{ color:var(--gold); }
.sec--dark .btn{ border-color:rgba(253,246,227,.45); color:var(--milk); }
.sec--dark .btn:hover{ background:var(--milk); color:var(--ink); border-color:var(--milk); }
.sec--dark .btn--wa{ background:#157A3F; border-color:#157A3F; color:#fff; }
.sec--dark .btn--wa:hover{ background:#0F5C2F; border-color:#0F5C2F; color:#fff; }
.sec--dark .lk{ border-color:rgba(251,250,248,.34); }
.sec--dark .lk:hover{ border-color:var(--milk); }

/* --- Variantes vives (texte clair) : charbon et noir extreme ------------------
   Elles héritent du système texte-clair de .sec--dark, seul le fond change,
   et l'accent passe au jaune signal — deux profondeurs de noir pour varier
   le rythme entre sections, renommees le 2026-08-11 (ex indigo/rouge). */
.sec--charcoal{ background:var(--charcoal); }
.sec--charcoal-2{ background:var(--charcoal-2); }
.sec--charcoal .bogo-mark,.sec--charcoal-2 .bogo-mark{ filter:none; }
.sec--charcoal .list__item:hover .list__no,.sec--charcoal-2 .list__item:hover .list__no,
.sec--charcoal .stars,.sec--charcoal-2 .stars{ color:var(--gold); }
.sec--charcoal .qz__verdict{ color:var(--gold); }

/* --- Variante soleil (texte encre) ---------------------------------------------
   Fond jaune plein, texte encre : la plus vive des trois. Les filets passent
   en encre translucide, les étiquettes en brun profond lisible (≥ 4,5:1). */
.sec--sun{ background:var(--bone); color:var(--ink); }
.sec--sun h1,.sec--sun h2,.sec--sun h3{ color:var(--ink); }
.sec--sun{ --line:rgba(21,23,27,.28); --line-2:rgba(21,23,27,.44); }
.sec--sun .head{ border-color:rgba(21,23,27,.5); }
.sec--sun .head__no,.sec--sun .tag,.sec--sun .list__no,.sec--sun .list__m,
.sec--sun .quote .res,.sec--sun .ev__d span,.sec--sun .ev__s{ color:#4A3410; }
.sec--sun .head__aside,.sec--sun .list__d,.sec--sun .quote p,
.sec--sun .lead,.sec--sun .muted,.sec--sun .ev__x{ color:#33270F; }
.sec--sun .list,.sec--sun .quotes,.sec--sun .quote,.sec--sun .quote footer,
.sec--sun .agenda,.sec--sun .ev{ border-color:rgba(21,23,27,.3); }
.sec--sun .list__item::after,.sec--sun .ev::after{ background:var(--ink); }
.sec--sun .stars{ color:var(--charcoal-2); }
.sec--sun .btn{ border-color:var(--ink); color:var(--ink); }
.sec--sun .btn:hover{ background:var(--ink); color:var(--gold); }
.sec--sun .btn--solid{ background:var(--ink); color:var(--milk); }
.sec--sun .bogo-mark{ filter:brightness(.4); }
.sec--sun.bogo-field::before{ opacity:.1; }

/* En-tête de section : numéro + titre, alignés sur la même ligne de base */
.head{
  display:grid; gap:18px; margin-bottom:clamp(36px,4.5vw,64px);
  padding-top:20px; border-top:1px solid var(--line);
}
@media (min-width:900px){
  .head{ grid-template-columns:120px minmax(0,1fr) minmax(0,26ch); gap:36px; align-items:start; }
}
.sec--dark .head{ border-color:rgba(251,250,248,.2); }
.head__no{ font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.11em; color:var(--ink-3); padding-top:.5em; }
.head__aside{ font-size:.9375rem; color:var(--ink-2); padding-top:.55em; }
.sec--dark .head__aside{ color:#B7BCC2; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:14px; top:14px; z-index:500; background:var(--ink); color:var(--milk); padding:12px 18px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* --- Liens et boutons ------------------------------------------------------
   Le lien souligné avec un filet qui se déplace : sobre, jamais gadget. */
.lk{
  display:inline-flex; align-items:center; gap:9px; font-size:.9375rem; font-weight:500;
  padding-bottom:3px; border-bottom:1px solid var(--line-2); transition:border-color .3s var(--ease);
}
.lk:hover{ border-color:var(--ink); }
.lk svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.lk:hover svg{ transform:translateX(4px); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:15px 28px; border:1px solid var(--ink); border-radius:var(--radius);
  font-size:.9375rem; font-weight:500; letter-spacing:-.005em;
  background:transparent; color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover{ background:var(--ink); color:var(--milk); }
.btn--solid{ background:var(--ink); color:var(--milk); }
/* Le fond passe au jaune : le texte DOIT repasser en encre. Hérité tel quel,
   le `color:var(--milk)` de l'état au repos donnait 1,69:1 (mesuré). */
.btn--solid:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.btn--wa{ background:var(--wa); border-color:var(--wa); color:#fff; border-radius:999px; }
.btn--wa:hover{ background:#0F5C2F; border-color:#166F39; color:#fff; }
.btn--light{ border-color:rgba(253,246,227,.5); color:var(--milk); }
.btn--light:hover{ background:var(--milk); color:var(--ink); border-color:var(--milk); }
.btn--block{ width:100%; }
.btn svg{ width:18px; height:18px; flex:none; }

/* --- Barre utilitaire ------------------------------------------------------ */
.util{
  background:var(--ink); color:var(--milk);
  font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  padding:10px var(--gut);
  display:flex; gap:26px; justify-content:center; flex-wrap:wrap;
}
.util span{ opacity:.82; }
.util b{ font-weight:400; color:#E8C9B8; }

/* --- Navigation --------------------------------------------------------------
   Fond sombre translucide + flou, comme la maquette de reference (2026-08-11,
   remplace le fond clair d'origine). Le bouton "Adherer" (.btn--solid) est
   deja jaune/encre, donc deja lisible sur fond sombre sans retouche. */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(13,13,13,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(251,250,248,.14);
}
.nav__in{ display:flex; align-items:center; gap:20px; min-height:74px; }
.logo{ display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-display); font-size:1.625rem; letter-spacing:-.03em; line-height:1; color:var(--milk); }
.logo__mark{ height:34px; width:auto; display:block; flex:none; border-radius:3px; }
.logo__text{ display:flex; flex-direction:column; }
.logo__sub{ font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(251,250,248,.6); display:block; margin-top:5px; font-style:normal; }
.nav__links{ display:none; gap:30px; margin-inline:auto; }
@media (min-width:1040px){ .nav__links{ display:flex; } }
.nav__links a{
  font-size:.9375rem; color:rgba(251,250,248,.72); padding-block:6px;
  border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.nav__links a:hover{ color:var(--milk); border-color:rgba(251,250,248,.34); }
.nav__links a[aria-current="page"]{ color:var(--accent); border-color:var(--accent); }
.nav__end{ margin-left:auto; display:flex; align-items:center; gap:12px; }
@media (min-width:1040px){ .nav__end{ margin-left:0; } }
.nav__tog{ width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(251,250,248,.34); border-radius:var(--radius); color:var(--milk); }
@media (min-width:1040px){ .nav__tog{ display:none; } }
.nav__drop{ display:none; border-top:1px solid rgba(251,250,248,.14); background:#111110; }
.nav__drop.open{ display:block; }
.nav__drop a{ display:block; padding:15px var(--gut); border-bottom:1px solid rgba(251,250,248,.14); font-size:.9375rem; color:var(--milk); }
.nav__drop a:last-child{ border-bottom:0; }

/* ==========================================================================
   HERO PLEIN CADRE
   Image plein écran, voile dégradé, texte en pied de cadre. Le titre reste
   lisible même si l'image ne charge pas : le voile est un dégradé CSS,
   pas une propriété de l'image.
   ========================================================================== */
.stage{
  /* 74px = hauteur de la barre de navigation collante, sinon le pied
     du hero (bandeau de faits) passe sous la ligne de flottaison. */
  position:relative; min-height:calc(100svh - 74px); display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; background:var(--dark);
  padding-bottom:clamp(28px,4vw,52px);
}
/* Diaporama du hero : les vues se succèdent en fondu croisé.
   Ce n'est pas un carrousel : aucune commande, aucun contenu propre à
   chaque vue — seulement l'atmosphère de la salle qui change. */
/* Spotlight qui suit la souris : un halo jaune tres doux, decoratif, jamais
   au-dessus du texte. Positionne via 2 custom properties mises a jour en JS
   (hero.js), desactive au clavier/tactile (pointer:fine) et sous
   prefers-reduced-motion. Adapte du prototype externe analyse par
   l'utilisateur, pas copie : rayon plus petit, opacite plus basse, couleur
   jaune signal au lieu du glow generique. */
.stage__spot{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    rgba(240,194,28,.16), transparent 70%);
}
@media (hover:hover) and (pointer:fine){
  .stage:hover .stage__spot{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .stage__spot{ display:none; } }

.stage__media{ position:absolute; inset:0; z-index:0; }
.stage__media img,.stage__media video{ position:absolute; inset:0; }
.stage__media [data-slide]{ opacity:0; transition:opacity 1.4s var(--ease); }
.stage__media [data-slide].on{ opacity:1; }

/* Mouvement d'appareil lent sur la vue active : le cadre respire au lieu
   d'être figé. 9 s pour couvrir les 6 s d'affichage sans jamais boucler
   visiblement. Amplitude faible — au-delà, ça devient un diaporama de vacances. */
@media (prefers-reduced-motion:no-preference){
  .stage__media img[data-slide].on{ animation:drift 9s linear both; }
  @keyframes drift{
    from{ transform:scale(1.02) translate3d(0,0,0); }
    to  { transform:scale(1.09) translate3d(-1.4%,-1%,0); }
  }
  /* une vue sur deux dérive dans l'autre sens */
  .stage__media img[data-slide]:nth-child(even).on{ animation-name:drift-alt; }
  @keyframes drift-alt{
    from{ transform:scale(1.09) translate3d(1.2%,-.8%,0); }
    to  { transform:scale(1.02) translate3d(0,0,0); }
  }
}

/* Compteur de vues, en pied de hero */
.stage__dots{
  display:flex; gap:7px; align-items:center; margin-top:20px;
}
.stage__dots button{
  width:26px; height:2px; background:rgba(251,250,248,.32); position:relative;
  transition:background .3s var(--ease);
}
/* Cible tactile réelle 44px sans grossir la barre visuelle (2px) : zone
   invisible étendue autour, cliquable via la remontée d'événement du
   pseudo-élément vers le <button>. */
.stage__dots button::before{ content:""; position:absolute; inset:-21px -6px; }
.stage__dots button:hover{ background:rgba(251,250,248,.6); }
.stage__dots button[aria-current="true"]{ background:rgba(251,250,248,.32); }
.stage__dots button[aria-current="true"]::after{
  content:""; position:absolute; inset:0; background:var(--paper);
  transform-origin:left center; animation:dotFill 6s linear both;
}
@keyframes dotFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){
  .stage__dots button[aria-current="true"]::after{ animation:none; transform:scaleX(1); }
  .stage__media [data-slide]{ transition:none; }
}
.stage__cap{
  margin-left:14px; font-family:var(--ff-mono); font-size:.5625rem;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(251,250,248,.78);
}
.stage__media .ph,.stage__media img,.stage__media video{
  width:100%; height:100%; object-fit:cover; object-position:center 15%;
  /* parallaxe : l'image est plus haute que le cadre et remonte au scroll */
  will-change:transform;
}
/* Portrait du coach : photo verticale, le visage est en haut du cadre */
.stage__media [data-portrait]{ object-position:center top; }
.stage__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,11,13,.94) 0%, rgba(10,11,13,.62) 34%, rgba(10,11,13,.22) 66%, rgba(10,11,13,.5) 100%);
}
.stage__in{ position:relative; z-index:2; width:100%; color:var(--milk); }
.stage__tag{
  font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(251,250,248,.84); margin-bottom:clamp(18px,2.4vw,28px);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.stage__tag::before{ content:""; width:44px; height:1px; background:rgba(251,250,248,.5); flex:none; }
/* Archivo Black est nettement plus large que Barlow Condensed (police
   precedente) a taille egale : clamp() et max-width revus le 2026-08-11
   apres verification visuelle (le reglage Barlow Condensed faisait passer
   ce titre en 5-6 lignes hors ecran avec la nouvelle police). */
.stage h1{
  color:var(--milk); font-size:clamp(2.125rem,4.6vw,4.5rem); line-height:1.02;
  letter-spacing:-.01em; max-width:20ch; text-wrap:balance; margin-bottom:clamp(20px,2.6vw,30px);
}
.stage h1 em{ color:var(--gold); }
.stage__lead{
  font-size:clamp(1rem,1.5vw,1.1875rem); line-height:1.5; color:rgba(251,250,248,.84);
  max-width:46ch; margin-bottom:clamp(26px,3vw,38px);
}
.stage__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:clamp(30px,4vw,46px); }
/* Bandeau de faits en pied de hero, sur un filet clair */
.stage__facts{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid rgba(251,250,248,.26);
}
@media (min-width:860px){ .stage__facts{ grid-template-columns:repeat(4,1fr); } }
.stage__fact{ padding:16px 20px 0 0; }
@media (min-width:860px){
  .stage__fact + .stage__fact{ border-left:1px solid rgba(251,250,248,.26); padding-left:24px; }
}
.stage__fact b{
  display:block; font-family:var(--ff-display); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.125rem); line-height:1; letter-spacing:-.02em; color:var(--milk);
}
.stage__fact span{
  display:block; margin-top:8px; font-family:var(--ff-mono); font-size:.5625rem;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(251,250,248,.78);
}
/* Chiffre qui vient de finir son animation d'entree (voir hero.js) : leger
   coup de pouce visuel, jamais un rebond qui deplace le texte voisin. */
.stage__fact b.is-counted{ animation:factPop .5s var(--ease); }
@keyframes factPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .stage__fact b.is-counted{ animation:none; } }

/* Pouls d'effort sous les chiffres — boucle horizontale pure CSS, viewBox
   double largeur pour une translation -50% sans coupure visible. */
.stage__ecg{
  display:block; width:100%; height:26px; margin-top:10px; overflow:hidden;
  color:var(--gold); opacity:.55;
}
.stage__ecg path{ animation:none; }
@media (prefers-reduced-motion:no-preference){
  .stage__ecg{ }
  .stage__ecg path{
    animation:ecgScroll 8s linear infinite;
    transform-box:fill-box;
  }
}
@keyframes ecgScroll{ from{ transform:translateX(0); } to{ transform:translateX(-600px); } }
@media (prefers-reduced-motion:reduce){ .stage__ecg path{ animation:none; } }
/* Invite au défilement */
.stage__scroll{
  position:absolute; right:var(--gut); bottom:calc(clamp(28px,4vw,52px) + 4px); z-index:3;
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,250,248,.78); display:none; align-items:center; gap:10px;
}
@media (min-width:1040px){ .stage__scroll{ display:flex; } }
.stage__scroll i{
  display:block; width:1px; height:38px; background:rgba(251,250,248,.4); position:relative; overflow:hidden;
}
.stage__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--paper);
  animation:drip 2.1s var(--ease) infinite;
}
@keyframes drip{ 0%{ transform:translateY(-100%);} 55%,100%{ transform:translateY(100%);} }

/* --- HERO éditorial (conservé pour les pages intérieures) ------------------ */
.hero{ padding-block:clamp(48px,6vw,96px) 0; }
.hero__grid{ display:grid; gap:36px; }
@media (min-width:1000px){
  .hero__grid{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:56px; align-items:end; }
}
/* Pas de <br> forcé : la mesure fait les retours, quelle que soit la largeur. */
.hero__title{ margin-bottom:26px; max-width:15ch; text-wrap:balance; }
.hero__title em{ color:var(--accent); }
.hero__meta{
  display:grid; gap:0; margin-top:34px; border-top:1px solid var(--line);
}
.hero__meta div{
  display:grid; grid-template-columns:minmax(0,13ch) minmax(0,1fr); gap:20px;
  padding:13px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.hero__meta dt{ font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.hero__meta dd{ font-size:.9375rem; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero__fig figcaption{
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin-top:11px; display:flex; justify-content:space-between; gap:14px;
}

/* --- Images ----------------------------------------------------------------
   Coins arrondis (retour utilisateur 2026-08-04) — le plein cadre du hero
   (.stage__media) n'utilise pas cette classe et reste bord-a-bord. */
.img{ position:relative; overflow:hidden; background:var(--paper-2); border-radius:var(--radius); }
.img--32{ aspect-ratio:3/2; }
.img--45{ aspect-ratio:4/5; }
.img--11{ aspect-ratio:1/1; }
.img--169{ aspect-ratio:16/9; }
.img > .ph{ position:absolute; inset:0; }
.img img,.img video{ width:100%; height:100%; object-fit:cover; display:block; }

/* Substituts photo — camaïeux minéraux, pas de couleur vive */
.ph{
  background:
    linear-gradient(196deg, rgba(21,23,27,.5) 0%, rgba(21,23,27,.14) 42%, rgba(21,23,27,.62) 100%),
    linear-gradient(140deg,#8E8A80 0%,#5B5852 46%,#2B2C2F 100%);
}
.ph--b{ background:linear-gradient(200deg, rgba(21,23,27,.55), rgba(21,23,27,.2) 48%, rgba(21,23,27,.7)),linear-gradient(160deg,#9A9086 0%,#4E4A44 55%,#232427 100%); }
.ph--c{ background:linear-gradient(180deg, rgba(21,23,27,.42), rgba(21,23,27,.66)),linear-gradient(30deg,#7C7A74 0%,#3A3B3E 100%); }
.ph--warm{ background:linear-gradient(190deg, rgba(21,23,27,.42), rgba(21,23,27,.68)),linear-gradient(150deg,#A98A76 0%,#6A5348 50%,#2A2724 100%); }
.ph--cool{ background:linear-gradient(190deg, rgba(21,23,27,.44), rgba(21,23,27,.7)),linear-gradient(150deg,#8A9299 0%,#4C5257 52%,#24262A 100%); }
.ph::after{
  content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.45'/%3E%3C/svg%3E");
}
.ph__lbl{
  position:absolute; left:0; bottom:0; z-index:2;
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,250,248,.62); padding:10px 12px;
}

.gal{ display:grid; gap:20px; }
@media (min-width:760px){ .gal{ grid-template-columns:repeat(3,1fr); } }

/* --- Bandeau de chiffres ---------------------------------------------------- */
.figures{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }
@media (min-width:900px){ .figures{ grid-template-columns:repeat(4,1fr); } }
.figure{ padding:clamp(26px,3.4vw,44px) 0; border-bottom:1px solid var(--line); padding-right:24px; }
@media (min-width:900px){ .figure{ border-bottom:0; } }
.figure + .figure{ border-left:1px solid var(--line); padding-left:24px; }
@media (max-width:899px){ .figure:nth-child(2n+1){ border-left:0; padding-left:0; } }
.figure__n{
  font-family:var(--ff-display); font-size:clamp(2.75rem,5.6vw,4.25rem); line-height:.94;
  letter-spacing:-.03em; display:block;
}
.figure__n sup{ font-size:.34em; vertical-align:super; letter-spacing:0; }
.figure__l{ font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin-top:12px; }

/* --- Liste éditoriale (remplace les grilles de cartes) ---------------------- */
.list{ border-top:1px solid var(--line); }
.sec--dark .list{ border-color:rgba(251,250,248,.2); }
.list__item{
  display:grid; gap:8px 32px; padding:clamp(22px,2.6vw,32px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
.sec--dark .list__item{ border-color:rgba(251,250,248,.2); }
@media (min-width:820px){
  .list__item{ grid-template-columns:60px minmax(0,20ch) minmax(0,1fr) auto; align-items:baseline; }
}
/* Le survol ne déplace pas le contenu : un filet se trace sous la ligne
   et le numéro passe à l'accent. Déplacer la ligne entière était brouillon. */
.list__item::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--ease);
}
.list__item:hover::after{ transform:scaleX(1); }
.list__no{ font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.1em; color:var(--ink-3); transition:color .3s var(--ease); }
.list__item:hover .list__no{ color:var(--accent); }
.list__t{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; }
.list__d{ font-size:.9375rem; color:var(--ink-2); max-width:56ch; }
.sec--dark .list__d{ color:#B7BCC2; }
.list__m{ font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }

/* --- Programmes : fiches en colonnes, séparées par des filets --------------- */
.prog{ display:grid; gap:0; }
@media (min-width:960px){ .prog{ grid-template-columns:repeat(3,1fr); } }
.prog__item{ padding-block:clamp(28px,3vw,40px); border-top:1px solid var(--line); }
@media (min-width:960px){
  .prog__item{ padding:0 32px clamp(24px,3vw,36px); border-top:0; }
  .prog__item + .prog__item{ border-left:1px solid var(--line); }
  .prog__item:first-child{ padding-left:0; }
  .prog__item:last-child{ padding-right:0; }
}
.prog__no{ font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.1em; color:var(--ink-3); display:block; margin-bottom:14px; }
.prog__item h2{ margin-bottom:12px; font-size:1.375rem; }
.prog__item > p{ font-size:.9375rem; color:var(--ink-2); margin-bottom:22px; }
.spec{ border-top:1px solid var(--line); }
.spec div{ display:flex; justify-content:space-between; gap:18px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.875rem; }
.spec dt{ color:var(--ink-3); }
.spec dd{ font-variant-numeric:tabular-nums; }
.prog__ex{ margin-top:20px; }
.prog__ex li{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:.875rem; border-bottom:1px dotted var(--line-2); }
.prog__ex li:last-child{ border-bottom:0; }
.prog__ex span:last-child{ font-family:var(--ff-mono); font-size:.75rem; color:var(--ink-2); white-space:nowrap; }

/* --- Tarifs : tableau, pas des cartes -------------------------------------- */
.rates{ border-top:1px solid var(--ink); }
.rate{
  display:grid; gap:6px 32px; padding:clamp(24px,2.8vw,34px) 0;
  border-bottom:1px solid var(--line); align-items:baseline;
}
@media (min-width:840px){ .rate{ grid-template-columns:minmax(0,22ch) minmax(0,1fr) minmax(0,15ch); } }
.rate__n{ font-size:1.125rem; font-weight:600; letter-spacing:-.01em; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.rate__n mark{
  background:none; color:var(--accent-2); font-family:var(--ff-mono);
  font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; font-weight:400;
  border:1px solid currentColor; padding:3px 7px;
}
.rate__d{ font-size:.9375rem; color:var(--ink-2); }
.rate__p{ text-align:left; }
@media (min-width:840px){ .rate__p{ text-align:right; } }
.rate__amt{
  font-family:var(--ff-display); font-size:clamp(1.875rem,3.4vw,2.625rem);
  line-height:1; letter-spacing:-.025em; font-variant-numeric:tabular-nums;
}
.rate__amt sup{ font-family:var(--ff-mono); font-size:.3em; vertical-align:super; letter-spacing:.06em; margin-left:5px; }
.rate__u{ font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:7px; }
.rates__note{
  display:flex; gap:14px; align-items:flex-start; padding-top:24px; font-size:.875rem; color:var(--ink-2);
}
.rates__note svg{ width:17px; height:17px; flex:none; margin-top:3px; color:var(--accent); }

/* --- Coach ------------------------------------------------------------------ */
.coach{ display:grid; gap:36px; }
@media (min-width:920px){ .coach{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:64px; align-items:start; } }
.coach__body > p + p{ margin-top:16px; }
.coach__quote{
  font-family:var(--ff-display); font-size:clamp(1.5rem,2.8vw,2.125rem); line-height:1.16;
  letter-spacing:-.015em; margin-bottom:26px; padding-left:22px; border-left:1px solid var(--accent);
}
.cv{ margin-top:32px; border-top:1px solid var(--line); }
.cv li{
  display:grid; grid-template-columns:6ch 1fr; gap:20px; padding:13px 0;
  border-bottom:1px solid var(--line); font-size:.9375rem; align-items:baseline;
}
.cv .y{ font-family:var(--ff-mono); font-size:.6875rem; color:var(--ink-3); letter-spacing:.06em; }

/* --- Témoignages ------------------------------------------------------------ */
.quotes{ display:grid; gap:0; border-top:1px solid var(--line); }
@media (min-width:900px){ .quotes{ grid-template-columns:repeat(3,1fr); } }
.quote{ padding:clamp(26px,3vw,36px) 0; border-bottom:1px solid var(--line); }
@media (min-width:900px){
  .quote{ padding:clamp(26px,3vw,36px) 30px; border-bottom:0; }
  .quote + .quote{ border-left:1px solid var(--line); }
  .quote:first-child{ padding-left:0; } .quote:last-child{ padding-right:0; }
}
.quote p{ font-size:1rem; line-height:1.55; margin-bottom:20px; }
.quote footer{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding-top:14px; border-top:1px solid var(--line); }
.quote cite{ font-style:normal; font-size:.875rem; font-weight:600; }
.quote .res{ font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.stars{ display:flex; gap:2px; color:var(--accent); margin-bottom:14px; }
.stars svg{ width:13px; height:13px; }

/* ==========================================================================
   ÉVÉNEMENTS & ACTIVITÉS
   Deux registres dans une même section : l'agenda (à venir, texte et dates)
   et les archives (déjà fait, photos et vidéos publiées par le coach).
   ========================================================================== */

/* --- Agenda : à venir ----------------------------------------------------- */
.agenda{ border-top:1px solid var(--ink); }
.ev{
  display:grid; gap:6px 28px; padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--line); align-items:baseline; position:relative;
}
@media (min-width:840px){
  /* Colonne de date élargie : Archivo Black est bien plus large qu'une condensée. */
  .ev{ grid-template-columns:minmax(0,15ch) minmax(0,26ch) minmax(0,1fr) minmax(0,13ch); }
}
.ev__d{
  font-family:var(--ff-display); font-size:clamp(1.0625rem,1.6vw,1.3125rem);
  line-height:1.08; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  text-transform:uppercase; overflow-wrap:anywhere;
}
.ev__d span{
  display:block; margin-top:6px; font-family:var(--ff-mono); font-size:.5625rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.ev__t{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; }
.ev__x{ font-size:.9375rem; color:var(--ink-2); }
.ev__s{
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
}
.ev__s[data-s="ouvert"]{ color:var(--accent-2); }
.ev__s[data-s="complet"]{ color:var(--ink-3); text-decoration:line-through; }
.ev::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:left center; transition:transform .45s var(--ease);
}
.ev:hover::after{ transform:scaleX(1); }

/* --- Archives : galerie photo et vidéo -----------------------------------
   Mosaïque asymétrique. Les vidéos portent un repère explicite et ne
   démarrent jamais seules : lecture à la demande (WCAG 2.2.2). */
.gal-filter{ display:flex; flex-direction:column; gap:4px; max-width:260px; margin-bottom:24px; }
.empty{ padding:72px 0; text-align:center; color:var(--ink-2); }
.gal-filter label{
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.gal-filter select{
  min-height:44px; width:100%; padding:8px 4px; background:transparent; border:0; border-bottom:1px solid var(--line-2);
  font-family:var(--ff-text); font-size:.9375rem; color:var(--ink); border-radius:0; cursor:pointer;
}
.gal-filter select:focus{ outline:none; border-color:var(--ink); }

.arch{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
@media (min-width:780px){ .arch{ grid-template-columns:repeat(4,1fr); gap:18px; } }
.arch figure{ position:relative; margin:0; }
.arch .img{ width:100%; }
/* Pas de `grid-row: span` : il laisse des cellules vides et écrase la
   dernière rangée. Le rythme vient des largeurs, les hauteurs restent égales. */
@media (min-width:780px){
  .arch__big{ grid-column:span 2; }
  .arch__wide{ grid-column:span 2; }
}
.arch .img{ aspect-ratio:4/3; }
@media (min-width:780px){
  .arch__big .img,.arch__wide .img{ aspect-ratio:16/9; }
}
.arch figcaption{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  margin-top:10px; font-size:.8125rem;
}
.arch figcaption span:last-child{
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}

/* Repère « vidéo » : pastille discrète, pas un gros bouton play centré */
.vid{ position:relative; }
.vid__mark{
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:inline-flex; align-items:center; gap:7px; padding:6px 10px;
  background:rgba(10,11,13,.78); color:var(--paper);
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.11em; text-transform:uppercase;
}
.vid__mark svg{ width:11px; height:11px; }
.vid__len{
  position:absolute; right:12px; bottom:12px; z-index:2;
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.09em;
  color:var(--paper); background:rgba(10,11,13,.78); padding:6px 8px;
}
.arch a:hover .img .ph,.arch a:hover .img img,
.arch .gal-open:hover .img .ph,.arch .gal-open:hover .img img{ transform:scale(1.03); }
.arch .img .ph,.arch .img img{ transition:transform .6s var(--ease); }

.gal-pending{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--paper-2); color:var(--ink-3); border-radius:var(--radius);
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.09em; text-transform:uppercase;
}

.gal-open{
  display:block; width:100%; padding:0; margin:0; border:0; background:transparent;
  cursor:pointer; text-align:left;
}
.gal-open:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.gal-more-wrap{ display:flex; justify-content:center; margin-top:clamp(28px,3.4vw,44px); }

.gal-pager{ display:flex; align-items:center; gap:20px; }
.gal-pager__nav{
  min-height:44px; display:inline-flex; align-items:center; padding:0 18px;
  border:1px solid var(--ink); font-family:var(--ff-mono); font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink); border-radius:var(--radius);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.gal-pager__nav:hover{ background:var(--ink); color:var(--milk); }
.gal-pager__nav.is-disabled{ opacity:.35; pointer-events:none; }
.gal-pager__status{
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}

/* --- Visionneuse (lightbox) : plein écran, sans dépendance externe --------- */
.lightbox{
  position:fixed; inset:0; z-index:200; max-width:none; max-height:none; width:100%; height:100%;
  padding:0; border:0; background:rgba(0,0,0,.96); color:var(--paper);
  overscroll-behavior:contain;
}
.lightbox::backdrop{ background:transparent; }
.lightbox[open]{ display:flex; align-items:center; justify-content:center; }
.lightbox figure{ margin:0; max-width:min(92vw,1100px); max-height:88vh; display:flex; flex-direction:column; gap:14px; }
.lightbox img{ max-width:100%; max-height:74vh; width:auto; height:auto; margin-inline:auto; object-fit:contain; }
.lightbox figcaption{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding-inline:4px; }
.lightbox figcaption span:last-child{
  font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase; color:var(--accent);
  white-space:nowrap;
}
.lightbox__close,.lightbox__nav{
  position:absolute; display:flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:10px; background:rgba(240,194,28,.1); color:var(--accent);
  border:1px solid rgba(240,194,28,.32); border-radius:var(--radius); cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.lightbox__close:hover,.lightbox__nav:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.lightbox__close{ top:18px; right:18px; z-index:2; }
.lightbox__nav{ top:50%; transform:translateY(-50%); }
.lightbox__nav--prev{ left:18px; }
.lightbox__nav--next{ right:18px; }
@media (max-width:640px){
  .lightbox__nav{ min-width:40px; min-height:40px; }
  .lightbox__nav--prev{ left:8px; } .lightbox__nav--next{ right:8px; }
}

/* Bandeau d'information : comment le coach publie */
.howto{
  margin-top:clamp(28px,3.4vw,44px); padding-top:22px; border-top:1px solid var(--line);
  display:grid; gap:14px;
}
@media (min-width:820px){ .howto{ grid-template-columns:repeat(3,1fr); gap:36px; } }
.howto div{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.howto svg{ width:15px; height:15px; color:var(--accent); margin-top:4px; }
.howto p{ font-size:.875rem; color:var(--ink-2); }
.sec--dark .howto p{ color:#B7BCC2; }
.sec--dark .howto p strong{ color:var(--milk); }

/* --- FAQ : accordéons en filets ---------------------------------------------- */
.faq{ border-top:1px solid var(--ink); max-width:860px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:grid; grid-template-columns:44px minmax(0,1fr) 24px; gap:18px; align-items:baseline;
  padding:clamp(16px,2.2vw,24px) 0; cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover .faq__q{ color:var(--accent); }
.faq__no{ font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.1em; color:var(--ink-3); }
.faq__q{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; transition:color .25s var(--ease); }
.faq__x{
  font-family:var(--ff-display); font-size:1.375rem; line-height:1; color:var(--accent);
  transition:transform .3s var(--ease); transform-origin:center; justify-self:end;
}
.faq details[open] .faq__x{ transform:rotate(45deg); }
.faq details > p{
  padding:0 0 clamp(18px,2.4vw,26px) 62px; font-size:.9375rem; color:var(--ink-2); max-width:60ch;
}
@media (max-width:600px){
  .faq summary{ grid-template-columns:32px minmax(0,1fr) 20px; gap:12px; }
  .faq details > p{ padding-left:44px; }
}

/* --- Bloc final -------------------------------------------------------------- */
.closing{ display:grid; gap:32px; }
@media (min-width:900px){ .closing{ grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:64px; align-items:end; } }
.checklist{ border-top:1px solid rgba(251,250,248,.2); }
.checklist li{ display:grid; grid-template-columns:auto 1fr; gap:14px; padding:13px 0; border-bottom:1px solid rgba(251,250,248,.2); font-size:.9375rem; }
.checklist svg{ width:16px; height:16px; margin-top:4px; color:#E8C9B8; }

/* --- Carte de localisation -------------------------------------------------- */
.map{
  display:grid; gap:24px; margin-top:56px; padding-top:40px;
  border-top:1px solid rgba(251,250,248,.2);
}
@media (min-width:900px){ .map{ grid-template-columns:minmax(0,1fr) minmax(0,.55fr); gap:48px; align-items:center; } }
.map__frame{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2);
  border:1px solid rgba(251,250,248,.2); filter:grayscale(.15) contrast(1.05);
}
.map__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map__aside .lk{ color:var(--milk); border-color:rgba(251,250,248,.34); }
.map__aside .lk:hover{ border-color:var(--milk); }
.map__aside p:not(.tag){ color:#B7BCC2; max-width:34ch; }

/* --- Pied de page -------------------------------------------------------------- */
.foot{ background:var(--charcoal-2); color:var(--milk); border-top:1px solid var(--ink); padding-block:clamp(48px,6vw,80px) 28px; }
.foot h2{ color:var(--gold) !important; }
.foot .muted{ color:#C6C9DA; }
.foot .logo{ color:var(--milk); }
.foot .logo__sub{ color:#9FA6C9; }
.foot .foot__legal{ color:#9FA6C9; }
.foot a:hover{ color:var(--gold); }
.hrs dt{ color:#C9CCE0 !important; }
.foot__grid{ display:grid; gap:36px; }
@media (min-width:820px){ .foot__grid{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; } }
.foot h2{ font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px; font-weight:400; }
.foot ul{ display:grid; gap:11px; font-size:.9375rem; }
.foot a{ border-bottom:1px solid transparent; }
.foot a:hover{ border-color:var(--ink); }
.hrs div{ display:flex; justify-content:space-between; gap:18px; font-size:.9375rem; padding:5px 0; }
.hrs dt{ color:var(--ink-2); } .hrs dd{ font-variant-numeric:tabular-nums; }
.foot__legal{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(253,246,227,.25);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
}

/* ==========================================================================
   BULLE DE CONVERSATION WHATSAPP
   Pré-rédige le message et ouvre WhatsApp. Ce n'est pas une messagerie
   intégrée : rien n'est envoyé depuis le site, et le libellé le dit.
   Registre éditorial : filets fins, pas de vert criard hors bouton d'envoi.
   ========================================================================== */

.wa{ position:fixed; right:20px; bottom:20px; z-index:400; }
@media (max-width:1039px){ .wa{ right:16px; bottom:16px; } }

/* --- Le déclencheur ---------------------------------------------------------
   Fond vert WhatsApp (--wa) plutôt que noir : la bulle EST le bouton
   WhatsApp, elle doit se reconnaître comme tel au premier coup d'œil,
   pas comme un bouton générique du site.
   Pulsation douce en repos (bouton fermé) : signale que la bulle est vivante
   sans être une alerte agressive — un "souffle" plutôt qu'un clignotement.
   Sur l'anneau (box-shadow), pas sur scale/opacity du bouton lui-même, pour
   ne jamais faire vaciller le pictogramme ou le libellé. */
.wa__btn{
  display:flex; align-items:center; gap:11px; margin-left:auto;
  min-height:54px; padding:0 22px 0 18px; border-radius:999px;
  background:var(--wa); color:var(--milk); border:1px solid var(--wa);
  font-family:var(--ff-text); font-size:.9375rem; font-weight:500;
  transition:background .3s var(--ease), transform .2s var(--ease);
}
@media (prefers-reduced-motion:no-preference){
  .wa:not([data-open="true"]) .wa__btn{ animation:waBreathe 3.4s ease-in-out infinite; }
  @keyframes waBreathe{
    0%,100%{ box-shadow:0 0 0 0 rgba(21,122,63,.55); }
    50%{ box-shadow:0 0 0 9px rgba(21,122,63,0); }
  }
}
.wa__btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.wa__btn svg{ width:22px; height:22px; flex:none; color:var(--milk); }
.wa__btn:hover svg{ color:var(--ink); }
.wa__btn-label{ display:none; }
@media (min-width:1040px){ .wa__btn-label{ display:inline; } }
/* Cercle plein en dessous du breakpoint desktop — aligné sur le seuil du
   menu burger (1040px, cfc.css l.252/261) : entre 700 et 1039px le site
   est déjà en UX mobile partout ailleurs, la bulle doit suivre. */
@media (max-width:1039px){ .wa__btn{ width:54px; padding:0; justify-content:center; border-radius:50%; } }
.wa[data-open="true"] .wa__btn{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.wa[data-open="true"] .wa__btn svg{ color:var(--ink); }

/* pastille de disponibilité */
.wa__dot{
  position:absolute; top:-4px; left:-4px; width:11px; height:11px; border-radius:50%;
  background:#166F39; border:2px solid var(--bone);
}
.wa__dot[data-state="closed"]{ background:var(--ink-3); }
.wa__btn{ position:relative; }

/* --- Le panneau --------------------------------------------------------------
   Registre "carte premium" : plus de bordure dure pleine teinte, une ombre
   douce et un filet à faible opacité suffisent à détacher le panneau du
   fond de page. Hiérarchie en 4 zones nettes : identité (tête sombre),
   accueil + réponses rapides (corps clair), rédaction (pied), mention légale. */
.wa__panel{
  width:min(92vw,368px); margin-bottom:var(--space-md);
  background:var(--milk); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 22px 48px -16px rgba(13,13,13,.32), 0 6px 18px -6px rgba(13,13,13,.14);
  display:none; flex-direction:column; overflow:hidden;
}
.wa[data-open="true"] .wa__panel{ display:flex; animation:waIn .28s var(--ease) both; }
@keyframes waIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.wa__head{
  display:flex; align-items:center; gap:var(--space-md);
  padding:var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  background:var(--ink); color:var(--milk);
}
.wa__ava{
  width:42px; height:42px; flex:none; border-radius:50%; overflow:hidden;
  background:var(--charcoal); border:1px solid rgba(251,250,248,.14);
  display:grid; place-items:center;
  font-family:var(--ff-display); font-size:.875rem; color:var(--accent);
}
.wa__ava img{ width:100%; height:100%; object-fit:cover; }
.wa__who{ flex:1; min-width:0; }
.wa__who b{ display:block; font-size:.9375rem; font-weight:700; letter-spacing:-.005em; }
.wa__who small{
  display:flex; align-items:center; gap:6px; margin-top:4px; font-family:var(--ff-mono);
  font-size:.5625rem; letter-spacing:.1em; text-transform:uppercase; color:#AEB4BB;
}
.wa__who small::before{
  content:''; width:6px; height:6px; flex:none; border-radius:50%; background:currentColor;
}
.wa__who small[data-state="open"]{ color:#4ADE80; }
.wa__close{
  width:36px; height:36px; flex:none; display:grid; place-items:center;
  color:var(--paper); opacity:.72; border-radius:50%; cursor:pointer;
  transition:opacity .2s var(--ease), background .2s var(--ease);
}
.wa__close:hover,
.wa__close:focus-visible{ opacity:1; background:rgba(251,250,248,.12); }
.wa__close:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.wa__close svg{ width:15px; height:15px; }

/* fil de discussion */
.wa__body{ padding:var(--space-lg) var(--space-md); background:var(--paper); display:grid; gap:var(--space-md); }
.wa__msg{
  background:var(--milk); color:var(--ink); border:1px solid var(--line); border-radius:4px var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow:0 1px 2px rgba(13,13,13,.04), 0 6px 14px -8px rgba(13,13,13,.18);
  padding:14px 16px; font-size:.90625rem; line-height:1.55; max-width:92%;
}
.wa__msg p + p{ margin-top:9px; }
.wa__time{
  display:block; margin-top:10px; font-family:var(--ff-mono);
  font-size:.5625rem; letter-spacing:.09em; color:var(--ink-3);
}

/* réponses rapides */
.wa__quick{ display:flex; flex-wrap:wrap; gap:8px; }
.wa__quick button{
  padding:8px 14px; border:1px solid var(--line-2); border-radius:999px; background:var(--milk);
  font-size:.8125rem; font-weight:500; color:var(--ink-2); text-align:left; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.wa__quick button:hover{ border-color:var(--accent-2); background:var(--paper-2); color:var(--ink); }
.wa__quick button:focus-visible{ outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(126,99,16,.2); }
.wa__quick button[aria-pressed="true"]{ border-color:var(--ink); background:var(--ink); color:var(--paper); }

/* zone de rédaction */
.wa__form{ border-top:1px solid var(--line); background:var(--milk); }
.wa__form textarea{
  width:100%; min-height:76px; max-height:150px; resize:vertical;
  padding:var(--space-md) var(--space-lg); border:0; background:transparent; color:var(--ink);
  font-size:.90625rem; line-height:1.5; font-family:var(--ff-text);
  transition:background .2s var(--ease), box-shadow .2s var(--ease);
}
.wa__form textarea:focus{
  outline:none; background:var(--paper);
  box-shadow:inset 0 0 0 2px rgba(126,99,16,.28);
}
.wa__form textarea::placeholder{ color:var(--ink-3); }
.wa__send{
  display:flex; align-items:center; justify-content:center; gap:9px; width:calc(100% - 32px);
  margin:0 16px 16px; min-height:50px; background:var(--wa); color:#fff; border-radius:var(--radius);
  font-size:.9375rem; font-weight:600; font-family:var(--ff-text); cursor:pointer;
  transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa__send:hover{ background:#0F5C2F; transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(21,122,63,.55); }
.wa__send:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wa__send svg{ width:17px; height:17px; }
.wa__note{
  padding:0 var(--space-lg) var(--space-md); font-size:.6875rem; line-height:1.45; color:var(--ink-3);
  background:var(--milk);
}

@media (prefers-reduced-motion:reduce){
  .wa[data-open="true"] .wa__panel{ animation:none; }
  .wa__send:hover{ transform:none; }
  .wa__close,
  .wa__quick button,
  .wa__form textarea,
  .wa__send{ transition:none; }
}

/* --- Barre mobile — retiree (2026-08-12) ---------------------------------
   Doublait la bulle WhatsApp flottante (redondant + superposition visuelle
   genante sur mobile, signale par l'utilisateur). La bulle .wa seule suffit
   desormais sur tous les breakpoints, avec sa pulsation douce en repos. */

/* ==========================================================================
   BOGOLAN SPORTIF — frises fabriquées pour CFC
   Le bogolanfini encode des messages par répétition de signes géométriques.
   On reprend ce principe avec un vocabulaire d'entraînement, en trait fin
   monochrome : registre éditorial, pas décoration folklorique.
   ========================================================================== */

/* 1 — « Comptage » : traits groupés par cinq, entre des points.
   Le geste du carnet (compter les répétitions) rejoint celui du pagne
   (répéter un signe). C'est la frise principale, entre les sections. */
.frieze{
  height:26px; width:100%; border-block:1px solid var(--line);
  background-repeat:repeat-x; background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='24' viewBox='0 0 72 24'%3E%3Cg stroke='%2315171B' stroke-width='1.1' stroke-linecap='round' opacity='.42'%3E%3Cpath d='M6 7v10M12 7v10M18 7v10M24 7v10M30 7v10'/%3E%3Cpath d='M40 12h6M50 12h6M60 12h6'/%3E%3C/g%3E%3Ccircle cx='36' cy='12' r='1.6' fill='%2315171B' opacity='.42'/%3E%3C/svg%3E");
}
.frieze--dark{
  border-color:rgba(251,250,248,.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='24' viewBox='0 0 72 24'%3E%3Cg stroke='%23FBFAF8' stroke-width='1.1' stroke-linecap='round' opacity='.4'%3E%3Cpath d='M6 7v10M12 7v10M18 7v10M24 7v10M30 7v10'/%3E%3Cpath d='M40 12h6M50 12h6M60 12h6'/%3E%3C/g%3E%3Ccircle cx='36' cy='12' r='1.6' fill='%23FBFAF8' opacity='.4'/%3E%3C/svg%3E");
}

/* 2 — « Barre & disques » : le module haltère traité en signe bogolan.
   Employé en filet vertical, le long des colonnes de texte. */
.bogo-edge{ position:relative; padding-left:26px; }
.bogo-edge::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:9px;
  background-repeat:repeat-y; background-position:top left; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='40' viewBox='0 0 9 40'%3E%3Cg stroke='%2315171B' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M4.5 4v32'/%3E%3Cpath d='M1 8h7M1 32h7'/%3E%3Cpath d='M2.5 11h4M2.5 29h4'/%3E%3C/g%3E%3C/svg%3E");
}

/* 3 — « Chevrons » : le mouvement. Trame de fond, très basse opacité. */
.bogo-field{ position:relative; isolation:isolate; }
.bogo-field::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%2315171B' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18l6-6 6 6M30 18l6-6 6 6M6 42l6-6 6 6M30 42l6-6 6 6'/%3E%3C/g%3E%3Ccircle cx='24' cy='6' r='1.3' fill='%2315171B'/%3E%3Ccircle cx='0' cy='30' r='1.3' fill='%2315171B'/%3E%3Ccircle cx='48' cy='30' r='1.3' fill='%2315171B'/%3E%3C/svg%3E");
}
/* Sur fond terre brûlée : trame OCRE, à opacité franche. À 7,5 % en blanc,
   le motif était introuvable — un signe qu'il faut chercher n'identifie rien. */
.bogo-field--dark::before{
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23F0C21C' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18l6-6 6 6M30 18l6-6 6 6M6 42l6-6 6 6M30 42l6-6 6 6'/%3E%3C/g%3E%3Ccircle cx='24' cy='6' r='1.4' fill='%23F0C21C'/%3E%3Ccircle cx='0' cy='30' r='1.4' fill='%23F0C21C'/%3E%3Ccircle cx='48' cy='30' r='1.4' fill='%23F0C21C'/%3E%3C/svg%3E");
}

/* --- Bande Faso Dan Fani ------------------------------------------------------
   Le pagne national est tissé en bandes étroites cousues ensemble : rayures
   rythmées, largeurs inégales. Une seule bande, sous le hero — l'endroit où
   l'on coud le premier lé. Terracotta / ocre / encre sur crème. */
.fdf-band{
  height:22px; border-block:1px solid var(--ink); background-color:var(--paper-2);
  background-image:repeating-linear-gradient(90deg,
    var(--accent)   0 6px,  var(--paper-2) 6px 10px,
    var(--ink)      10px 12px, var(--paper-2) 12px 16px,
    var(--accent-2)    16px 24px, var(--paper-2) 24px 28px,
    var(--ink)      28px 30px, var(--paper-2) 30px 34px,
    var(--accent)   34px 36px, var(--paper-2) 36px 46px);
  opacity:.85;
}

/* --- Frise Tiébélé --------------------------------------------------------------
   Le zigzag du boa des façades kassena : triangles pleins alternés,
   rouge (endurance) et encre (bravoure) sur crème (pureté). */
.frieze--tiebele{
  border-block:1px solid var(--ink); height:30px; background-color:var(--paper-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 24 14 6l14 18z' fill='%23F0C21C'/%3E%3Cpath d='M28 24 42 6l14 18z' fill='%230D0D0D' opacity='.85'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:center;
}
/* Variante « chevrons » — meme famille de motif que .bogo-field (progression),
   rejouee ici en bande fine pour varier le rythme entre .frieze--tiebele. */
.frieze--chevron{
  border-block:1px solid var(--ink); height:30px; background-color:var(--paper-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%230D0D0D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16l6-8 6 8M26 16l6-8 6 8'/%3E%3C/g%3E%3Ccircle cx='16' cy='4' r='1.6' fill='%23F0C21C'/%3E%3Ccircle cx='38' cy='4' r='1.6' fill='%23F0C21C'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:center;
}

/* --- Bande defilante ("marquee") --------------------------------------------
   Repere visuel emprunte a une bande soeur du meme serveur (blackurbanchic.com)
   — meme technique (CSS pur, boucle infinie), palette et contenu propres a CFC.
   Un seul passage, jamais deux, pour ne pas alourdir la page (regle simplicite). */
.marquee{
  overflow:hidden; background:var(--accent); border-block:1px solid var(--ink);
  padding-block:12px;
}
.marquee__track{
  display:inline-flex; white-space:nowrap; animation:marqueeScroll 26s linear infinite;
  will-change:transform;
}
.marquee__item{
  display:inline-flex; align-items:center; gap:22px; padding-inline:22px;
  font-family:var(--ff-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  /* Fond jaune plein → encre obligatoire. Le `--milk` d'origine donnait
     1,68:1 (relevé par Lighthouse sur du 12px, seuil 4,5:1). */
  color:var(--ink);
}
.marquee__item::after{ content:"◆"; font-size:.5625rem; color:rgba(13,13,13,.55); }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none; overflow-x:auto; }
}

/* 4 — « Échelle » : progression. Séparateur court, sous les titres. */
.bogo-mark{
  width:76px; height:12px; margin-bottom:22px;
  background-repeat:repeat-x; opacity:.85;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='12' viewBox='0 0 19 12'%3E%3Cg stroke='%23F0C21C' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 6h19M5 2.5v7M14 2.5v7'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   ANIMATIONS PILOTÉES PAR LE SCROLL
   API native `animation-timeline: view()` : exécutée sur le thread de
   composition, aucun JS, aucun observer. `animation-fill-mode: both` est
   obligatoire — sans lui l'animation se réinitialise quand on remonte.
   Sous @supports : les navigateurs sans support affichent l'état final.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){

    /* Parallaxe du hero : l'image remonte, le contenu s'estompe en sortie */
    .stage__media .ph{
      animation:parallax linear both;
      animation-timeline:scroll(root);
      animation-range:0 100svh;
    }
    @keyframes parallax{ to{ transform:translateY(14%) scale(1.06); } }

    .stage__in{
      animation:heroExit linear both;
      animation-timeline:scroll(root);
      animation-range:30svh 100svh;
    }
    @keyframes heroExit{ to{ opacity:0; transform:translateY(-28px); } }

    /* Images : ouverture d'un masque, pas un fondu.
       Le clip-path évite le « fade-in » générique. */
    .reveal-img{
      animation:unmask linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 34%;
    }
    @keyframes unmask{
      from{ clip-path:inset(0 0 100% 0); }
      to{ clip-path:inset(0 0 0 0); }
    }

    /* Filets qui se tracent de gauche à droite */
    .draw{
      animation:draw linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 26%;
      transform-origin:left center;
    }
    @keyframes draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

    /* Lignes de liste : arrivée séquencée, très courte amplitude */
    .list__item{
      animation:liftIn linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 22%;
    }
    @keyframes liftIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

    /* Frises bogolan : le motif défile légèrement au passage */
    .frieze{
      animation:friezeShift linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes friezeShift{ to{ background-position-x:96px; } }
  }
}

/* ==========================================================================
   TROIS MOMENTS FORTS
   Le reste de la page est sobre : c'est ce qui permet à ces trois-là de
   frapper. Tous pilotés par le scroll natif, tous neutralisés en
   prefers-reduced-motion, aucun ne masque une information.
   ========================================================================== */

/* ---- 1. LE RIDEAU — retiré (2026-08-11) -----------------------------------
   Le hero restait épinglé (position:sticky) pendant que la section suivante
   défilait par-dessus. Retour utilisateur constant et répété : donne
   l'impression que le hero est figé/ne répond pas au scroll — exactement le
   reproche qui avait déjà fait abandonner le hero narratif au scroll
   (2026-08-04). Le hero défile désormais normalement avec le reste de la
   page, sans épinglage. Bug annexe corrigé au passage : `.curtain` était
   resté en fond blanc (var(--bone)) malgré le passage du site en noir
   intégral — un rideau blanc se serait révélé sous le hero sombre. */

/* ---- 2. LA BANDE DÉFILANTE -------------------------------------------------
   Le scroll vertical fait défiler la salle à l'horizontale. C'est le moment
   où l'on montre le lieu en entier, sans demander un clic. */
.reel{ position:relative; height:340vh; background:var(--dark); color:var(--milk); }
.reel__stick{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.reel__head{
  position:absolute; top:clamp(72px,11vh,120px); left:0; right:0; z-index:3;
  pointer-events:none;
}
.reel__head .wrap{ display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; }
.reel__head h2{ color:var(--milk); font-size:clamp(1.75rem,4vw,3rem); }
.reel__head p{
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:#AEB4BB;
}
.reel__track{
  display:flex; gap:clamp(16px,2.4vw,32px); align-items:center;
  padding-inline:var(--gut); width:max-content;
  will-change:transform;
}
/* Hauteur commune, largeurs variables : les images s'alignent sur une même
   ligne d'horizon, comme un accrochage. Des ratios libres donnaient un
   escalier et faisaient déborder les portraits. */
.reel__item{ flex:none; }
.reel__item .img{
  height:clamp(260px,50vh,520px); width:auto; overflow:hidden;
  aspect-ratio:3/4;
}
.reel__item:nth-child(even) .img{ aspect-ratio:4/3; }
.reel__item:nth-child(3n) .img{ aspect-ratio:1/1; }
.reel__item img{ width:100%; height:100%; object-fit:cover; }
.reel__item figcaption{
  display:flex; justify-content:space-between; gap:14px; margin-top:12px;
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.11em;
  text-transform:uppercase; color:#AEB4BB;
}
/* une carte de texte au milieu de la bande, pour rompre la série d'images */
.reel__say{
  flex:none; width:clamp(240px,30vw,380px); padding-inline:clamp(8px,2vw,24px);
}
.reel__say p{
  font-family:var(--ff-display); font-size:clamp(1.5rem,2.6vw,2.25rem);
  line-height:1.14; color:var(--milk); letter-spacing:-.015em;
}
.reel__say span{
  display:block; margin-top:16px; font-family:var(--ff-mono); font-size:.5625rem;
  letter-spacing:.12em; text-transform:uppercase; color:#AEB4BB;
}
/* progression de la bande */
.reel__bar{
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(28px,5vh,56px); z-index:3;
  height:1px; background:rgba(251,250,248,.22);
}
.reel__bar i{
  display:block; height:100%; background:var(--milk);
  transform-origin:left center; transform:scaleX(0);
}
@media (prefers-reduced-motion:reduce){
  .reel{ height:auto; }
  .reel__stick{ position:static; height:auto; padding-block:64px; }
  .reel__track{ flex-wrap:wrap; width:auto; justify-content:center; }
  .reel__head{ position:static; margin-bottom:32px; }
  .reel__bar{ display:none; }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .reel{ view-timeline-name:--reel; }
    .reel__track{
      animation:reelSlide linear both;
      animation-timeline:--reel; animation-range:cover 12% cover 88%;
    }
    @keyframes reelSlide{ to{ transform:translateX(calc(-100% + 100vw - var(--gut) * 2)); } }
    .reel__bar i{
      animation:draw linear both;
      animation-timeline:--reel; animation-range:cover 12% cover 88%;
    }
  }
}

/* ---- 3. LA PHRASE QUI SE COMPOSE -------------------------------------------
   Une seule phrase dans toute la page, révélée mot par mot au défilement.
   Employée deux fois, l'effet perd tout son poids. */
.statement{
  font-family:var(--ff-display); font-size:clamp(2rem,5.4vw,4.5rem);
  line-height:1.08; letter-spacing:-.02em; max-width:19ch;
}
.statement em{ font-style:italic; color:var(--accent-2); }
.sec--dark .statement em{ color:var(--gold); }
/* L'état de départ doit rester LISIBLE : à 14 % d'opacité le contraste
   tombait à 1,33:1. Le mot non encore révélé reste au-dessus de 4,5:1 ;
   c'est le flou et le décalage qui portent l'effet, pas l'effacement. */
.statement .w{ display:inline-block; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    /* La timeline est portée par la PHRASE, pas par chaque mot : la phase
       d'entrée d'un mot de 80 px est franchie en 80 px de défilement, donc
       l'effet passait inaperçu. Ancrée sur le bloc et calée sur `cover`,
       la révélation s'étale sur toute la traversée de l'écran.
       Le calc() ne porte que sur le pourcentage — `calc(cover 30% + …)`
       serait invalide, le mot-clé de phase doit rester en dehors. */
    .statement{ view-timeline-name:--say; }
    .statement .w{
      animation:wordIn linear both;
      animation-timeline:--say;
      animation-range-start:cover calc(26% + var(--i) * 1.5%);
      animation-range-end:cover calc(44% + var(--i) * 1.5%);
    }
    @keyframes wordIn{
      from{ filter:blur(7px); transform:translateY(.14em); }
      to  { filter:blur(0);   transform:none; }
    }
  }
}

/* Indicateur de progression de lecture */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:300;
  background:var(--accent); transform-origin:left center; transform:scaleX(0);
}
@supports (animation-timeline: scroll()){
  .progress{
    animation:draw linear both;
    animation-timeline:scroll(root block);
  }
}

/* Colonne collante : le portrait reste pendant que le texte défile */
@media (min-width:920px){
  .sticky{ position:sticky; top:110px; }
}

/* ==========================================================================
   ENTRÉE DU HERO
   Une seule séquence, au chargement. Le titre se dévoile par un masque qui
   remonte (comme une affiche qu'on décolle), le reste suit en cascade.
   Rien ne se rejoue ensuite : le mouvement sert l'arrivée, pas la décoration.
   ========================================================================== */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes unveil{
  from{ opacity:0; transform:translateY(30px); clip-path:inset(0 0 100% 0); }
  to  { opacity:1; transform:none;            clip-path:inset(0 0 -8% 0); }
}
@keyframes lineGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.js .stage__tag,.js .stage h1,.js .stage__lead,
.js .stage__acts,.js .stage__facts,.js .stage__dots{
  animation:rise .8s var(--ease) both;
}
.js .stage__tag  { animation-delay:.10s; }
.js .stage h1    { animation:unveil 1.05s var(--ease) both; animation-delay:.18s; }
.js .stage__lead { animation-delay:.52s; }
.js .stage__acts { animation-delay:.64s; }
.js .stage__facts{ animation-delay:.74s; }
.js .stage__dots { animation-delay:.84s; }
/* le filet de l'étiquette se trace au lieu d'apparaître */
.js .stage__tag::before{ animation:lineGrow .7s var(--ease) both; animation-delay:.26s; transform-origin:left center; }
/* le média entre en fondu depuis un léger zoom */
.js .stage__media img[data-slide].on{ animation:rise 1.1s var(--ease) both, drift 9s linear both; }

/* Anciens sélecteurs du hero éditorial (pages intérieures) */
.js .hero__title,.js .hero__lead,.js .hero__meta,.js .hero__acts,.js .hero__fig{
  animation:rise .7s var(--ease) both;
}
.js .hero__lead{ animation-delay:.07s; }
.js .hero__meta{ animation-delay:.14s; }
.js .hero__acts{ animation-delay:.2s; }
.js .hero__fig{ animation-delay:.1s; }

@media (prefers-reduced-motion:reduce){
  .js .stage__tag,.js .stage h1,.js .stage__lead,.js .stage__acts,
  .js .stage__facts,.js .stage__dots,.js .stage__tag::before,
  .js .stage__media img[data-slide].on{ animation:none !important; opacity:1; clip-path:none; transform:none; }
}

.mockflag{
  position:fixed; left:0; top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; z-index:400; background:var(--ink); color:var(--paper);
  padding:11px 5px; font-family:var(--ff-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
}
@media (max-width:1560px){ .mockflag{ display:none; } }

/* --- Programmes : flip cards 3D (index) -----------------------------------
   Ajouté 2026-08-11, direction « Atelier de fonte ». Face arrière jaune plein
   → texte noir obligatoire (--accent en fond, jamais de texte blanc dessus).
   Les deux faces sont empilées dans une même cellule de grille : la carte
   prend la hauteur de la plus haute, aucun clamp de hauteur à maintenir. */
.prog--flip{ gap:clamp(14px,1.8vw,22px); }
@media (min-width:960px){
  .prog--flip{ grid-template-columns:repeat(3,1fr); }
}
.flip-card{ perspective:1400px; }
.flip-inner{
  display:grid; height:100%;
  transition:transform 700ms var(--ease);
  transform-style:preserve-3d;
}
@media (hover:hover){
  .flip-card:hover .flip-inner{ transform:rotateY(180deg); }
}
/* Au clavier, on ne retourne la carte que quand le focus atteint la face
   arrière — un :focus-within global masquerait le lien de la face avant au
   moment même où il reçoit le focus. */
.flip-card:has(.flip-face--back :focus-visible) .flip-inner,
.flip-card.flipped .flip-inner{ transform:rotateY(180deg); }
.flip-face{
  grid-area:1/1; display:flex; flex-direction:column;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--line); border-radius:var(--radius);
}
/* Le hit-testing d'une face retournée est inégal selon les moteurs : on le
   pilote explicitement pour que seule la face visible reçoive les clics. */
.flip-face--back{ pointer-events:none; }
@media (hover:hover){
  .flip-card:hover .flip-face--front{ pointer-events:none; }
  .flip-card:hover .flip-face--back{ pointer-events:auto; }
}
.flip-card.flipped .flip-face--front,
.flip-card:has(.flip-face--back :focus-visible) .flip-face--front{ pointer-events:none; }
.flip-card.flipped .flip-face--back,
.flip-card:has(.flip-face--back :focus-visible) .flip-face--back{ pointer-events:auto; }
.flip-face--front{ background:var(--paper); color:var(--ink); }
.flip-face--back{
  transform:rotateY(180deg);
  background:var(--accent); color:var(--ink); border-color:var(--ink);
}
/* Archivo Black est bien plus large que l'ex-Barlow Condensed : titre plus
   petit et interlettrage neutre pour éviter les retours à la ligne hachés. */
.flip-face h2{ font-size:clamp(1.0625rem,1.5vw,1.25rem); letter-spacing:0; margin-bottom:12px; }
.flip-face h2 a{ color:inherit; }
.flip-face--front > p{ font-size:.9375rem; color:var(--ink-2); margin-bottom:20px; }
.flip-face .spec{ margin-top:auto; }
.flip-face--back .prog__no{ color:#4A3410; margin-bottom:12px; }
.flip-face--back .prog__ex{ margin-top:0; margin-bottom:20px; }
.flip-face--back .prog__ex li{ border-bottom-color:rgba(13,13,13,.3); }
.flip-face--back .prog__ex span:last-child{ color:#3A3A3A; }
.flip-face--back .lk{ margin-top:auto; color:var(--ink); border-color:rgba(13,13,13,.42); }
.flip-face--back .lk:hover{ border-color:var(--ink); }
.flip-hint{
  margin-top:16px; font-family:var(--ff-mono); font-size:.625rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
@media (prefers-reduced-motion:reduce){
  .flip-inner{ transition:none; }
}


/* --- Galerie : duoton noir/jaune ---------------------------------------------
   Au repos la vignette est en niveaux de gris teintés jaune ; au survol ou au
   focus clavier elle revient en couleur réelle. Le duoton sert d'affordance
   « cliquez pour agrandir », il n'est donc appliqué qu'aux vignettes cliquables
   (.gal-open) — pas aux vidéos ni aux emplacements en attente de validation. */
.arch .gal-open .img img{
  filter:grayscale(1) contrast(1.08) brightness(1.04);
  transition:transform .6s var(--ease), filter .45s var(--ease);
}
.arch .gal-open .img::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--accent); mix-blend-mode:multiply; opacity:.46;
  transition:opacity .45s var(--ease);
}
.arch .gal-open:hover .img img,
.arch .gal-open:focus-visible .img img{ filter:none; }
.arch .gal-open:hover .img::after,
.arch .gal-open:focus-visible .img::after{ opacity:0; }

/* Sans survol (tactile), rien ne peut révéler la couleur : on garde une teinte
   résiduelle pour le style mais la photo doit rester lisible. */
@media (hover:none){
  .arch .gal-open .img img{ filter:grayscale(.35) contrast(1.03); }
  .arch .gal-open .img::after{ opacity:.16; }
}
@media (prefers-reduced-motion:reduce){
  .arch .gal-open .img img,
  .arch .gal-open .img::after{ transition:none; }
}

/* Titre de la visionneuse : display Archivo Black, taille contenue pour ne pas
   pousser la date hors du cadre sur les titres longs. */
.lightbox figcaption span:first-child{
  font-family:var(--ff-display); font-size:.9375rem; line-height:1.25; letter-spacing:0;
}
/* ==========================================================================
   MICRO-INTERACTIONS "ATELIER DE FONTE" (equip.js)
   Tilt, poussiere de craie, clank, tapis de course. Tout est decoratif :
   la regle globale prefers-reduced-motion (haut du fichier) coupe deja
   animations et transitions, et equip.js coupe le tilt et la craie en amont.
   ========================================================================== */

/* Tilt : la rotation est posee en inline par le JS, on ne gere ici que
   le retour a plat et l'absence de scale (aucun decalage de mise en page). */
[data-tilt]{
  transform-style:preserve-3d;
  /* 150ms ease-out : valeur prescrite par MASTER.md pour le tilt precisement.
     --ease (sortie tres lente) rendrait le suivi de souris caoutchouteux. */
  transition:transform 150ms ease-out;
  will-change:transform;
}

/* Poussiere de craie : particules ephemeres injectees sur <body>. */
.chalk{
  position:fixed; z-index:9999; pointer-events:none;
  width:var(--cs,3px); height:var(--cs,3px); border-radius:50%;
  background:rgba(253,246,227,.9);
  animation:chalkBurstDrift 650ms var(--ease) forwards;
}
@keyframes chalkBurstDrift{
  from{ transform:translate(0,0) scale(1); opacity:.9; }
  to{ transform:translate(var(--cx,0),var(--cy,0)) scale(.35); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .chalk{ display:none; } }

/* Clank : impact de fonte, 1.5px maximum, sinon ca devient un gadget. */
@keyframes clankShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-1.5px); }
  40%{ transform:translateX(1.5px); }
  60%{ transform:translateX(-1px); }
  80%{ transform:translateX(1px); }
}
.clank{ animation:clankShake .26s var(--ease); }
/* Sur une carte inclinee, le shake ecraserait la rotation inline : on le
   limite aux boutons, qui n'ont pas de transform concurrent. */
[data-tilt].clank{ animation:none; }

/* Tapis de course : filet defilant sous la ligne "Cardio" de la liste. */
/* Pas d'overflow:hidden sur la ligne : il rognerait le filet de survol
   existant (.list__item::after, pose a bottom:-1px). */
.belt-strip{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  overflow:hidden; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.list__item[data-belt]:hover .belt-strip{ opacity:1; }
.belt-strip::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:200%;
  background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 16px);
  animation:beltRun .6s linear infinite;
}
@keyframes beltRun{ from{ transform:translateX(0); } to{ transform:translateX(-16px); } }
@media (prefers-reduced-motion:reduce){
  .list__item[data-belt]:hover .belt-strip{ opacity:1; }
  .belt-strip::before{ animation:none; }
}

/* ==========================================================================
   ATELIER DE FONTE — GRAIN + POUSSIÈRE DE CRAIE (fonds sombres)
   Ajouté 2026-08-11, Phase 3. Deux couches ambiantes en CSS pur, aucun
   markup supplémentaire.

   Contrainte de départ : sur les sections sombres, `::before` est déjà pris
   par `.bogo-field` (trame chevrons). Les deux couches sont donc empilées
   dans un seul `::after`, sous forme de calques de `background-image` :
     - calque du bas  = bruit `feTurbulence` désaturé, statique, alpha baked
                        dans le SVG (~10 %) → grain de fonte brossée ;
     - calques du haut = 5 dégradés radiaux très diffus (le flou est dans le
                        dégradé lui-même, pas dans un `filter:blur()`, qui
                        coûterait une passe de compositing par section).

   Le `z-index:-1` reproduit celui de `.bogo-field::before` : la couche passe
   au-dessus du fond de section et de la trame, jamais au-dessus du texte.
   ========================================================================== */
/* En pratique toutes les sections sombres portent déjà `.bogo-field`, qui pose
   `position:relative; isolation:isolate`. On le redit ici pour que la couche
   reste ancrée si une section sombre est un jour utilisée sans la trame. */
.sec--dark,.sec--charcoal,.sec--charcoal-2{ position:relative; isolation:isolate; }

.sec--dark::after,
.sec--charcoal::after,
.sec--charcoal-2::after,
.stage::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(251,250,248,.10) 0%, transparent 68%),
    radial-gradient(circle, rgba(251,250,248,.08) 0%, transparent 68%),
    radial-gradient(circle, rgba(240,194,28,.10)  0%, transparent 66%),
    radial-gradient(circle, rgba(251,250,248,.07) 0%, transparent 70%),
    radial-gradient(circle, rgba(240,194,28,.07)  0%, transparent 66%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
  background-size:120px 120px,74px 74px,96px 96px,58px 58px,84px 84px,200px 200px;
  background-position:12% 108%,34% 116%,61% 104%,79% 120%,91% 110%,0 0;
}
/* Le hero a déjà une photo, un voile dégradé et le spotlight : le grain y est
   discret et se place entre le média (z0) et le contenu (z2). */
.stage::after{ z-index:1; opacity:.7; }

/* Dérive ascendante. Une seule animation pilote les 5 calques : chacun
   parcourt une distance différente, ce qui suffit à casser la synchronie sans
   cinq pseudo-éléments. `linear` est délibéré (pas `--ease`) : sur une boucle
   infinie de 34 s, une courbe d'accélération produit un à-coup visible à
   chaque redémarrage. Le calque de bruit reste à `0 0`, donc immobile.

   Réservé au pointeur fin : animer `background-position` sur une surface
   pleine section repeint à chaque frame — coût inutile sur mobile, où seul le
   grain statique est conservé. */
@media (prefers-reduced-motion:no-preference) and (min-width:900px) and (hover:hover){
  .sec--dark::after,
  .sec--charcoal::after,
  .sec--charcoal-2::after,
  .stage::after{ animation:chalkDrift 34s linear infinite; }
}
@keyframes chalkDrift{
  from{ background-position:12% 108%,34% 116%,61% 104%,79% 120%,91% 110%,0 0; }
  to  { background-position:16% -14%,30% -22%,58% -12%,83% -26%,88% -18%,0 0; }
}
@media (prefers-reduced-motion:reduce){
  .sec--dark::after,
  .sec--charcoal::after,
  .sec--charcoal-2::after,
  .stage::after{ animation:none; }
}
/* Sur la ligne Cardio, le tapis remplace le filet de survol : les deux
   superposes (1px noir + 3px jaune) faisaient sale. */
.list__item[data-belt]:hover::after{ transform:scaleX(0); }

/* ==========================================================================
   FIDÉLITÉ MAQUETTE — disque 3D, hold-to-load, ripple, rail
   Ajouté 2026-08-11 sur demande explicite : reprise à l'identique des 4
   derniers effets de la maquette externe, après une premiere passe qui les
   avait volontairement écartés. Décision assumée par l'utilisateur malgré
   le compromis UX documenté (hold-to-load sur le CTA WhatsApp).
   ========================================================================== */

/* --- Disque de fonte 3D (hero, décoratif) --------------------------------- */
.plate-stage{
  position:absolute; right:-40px; top:18%; width:280px; height:280px;
  perspective:1000px; z-index:1; cursor:grab; touch-action:none;
}
.plate-stage:active{ cursor:grabbing; }
.plate-shadow{
  position:absolute; left:50%; bottom:6%; width:150px; height:24px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  transform:translateX(-50%);
}
/* Scopé sous .plate-stage (pas juste .plate) : "plate" est un nom generique
   deja pris par la planche de demonstration des exercices (aujourd'hui
   renommee .demo pour lever la collision — decouverte par un agent, le
   disque de fonte tournait alors sur toute la fiche). Le scope evite qu'une
   future reutilisation du nom .plate reparte en rotation par accident. */
.plate-stage .plate{
  width:100%; height:100%; transform-style:preserve-3d;
  animation:plateSpin 16s linear infinite;
}
@keyframes plateSpin{ from{ transform:rotateY(0deg) rotateX(6deg); } to{ transform:rotateY(360deg) rotateX(6deg); } }
.plate-stage .plate svg{ width:100%; height:100%; filter:drop-shadow(0 14px 22px rgba(0,0,0,.5)); }
.plate-hint{
  position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  font-family:var(--ff-mono); font-size:.5625rem; color:rgba(251,250,248,.6);
  text-transform:uppercase; letter-spacing:.08em;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.plate-hint svg{ width:12px; height:12px; stroke:rgba(251,250,248,.6); fill:none; }
@media (max-width:900px){ .plate-stage{ display:none; } }
.plate-stage,.plate-stage:active{
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><circle cx="13" cy="13" r="10" fill="%230D0D0D" stroke="%23F0C21C" stroke-width="2"/><circle cx="13" cy="13" r="4" fill="%23F0C21C"/></svg>') 13 13, grab;
}
.plate-stage.dragging{
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><circle cx="13" cy="13" r="10" fill="%23F0C21C" stroke="%230D0D0D" stroke-width="2"/><circle cx="13" cy="13" r="4" fill="%230D0D0D"/></svg>') 13 13, grabbing;
}
@media (prefers-reduced-motion:reduce){ .plate-stage .plate{ animation:none; } }

/* --- Hold-to-load (CTA WhatsApp du hero) -----------------------------------
   Reste un <a href> natif à tout instant : un clic/tap rapide ouvre wa.me
   immédiatement (comportement natif du lien, jamais intercepté). La charge
   n'est qu'un habillage qui joue pendant l'appui — voir hero.js. */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn.hold{ padding-left:26px; padding-right:26px; }
.btn.hold .fill{
  position:absolute; inset:0; width:0%; background:rgba(0,0,0,.22); z-index:0;
  transition:width .05s linear;
}
.btn.hold .hold__label{ position:relative; z-index:1; display:flex; align-items:center; gap:9px; }
.btn.hold .plates-icon{ display:flex; gap:2px; }
.btn.hold .plates-icon i{
  width:3px; height:13px; background:currentColor; display:block; opacity:.35;
  transition:opacity .1s, transform .15s ease-out;
}
.btn.hold.charging .plates-icon i.lit{ opacity:1; }
.btn.hold.done{ background:#0F5C2F; border-color:#0F5C2F; }
@media (prefers-reduced-motion:reduce){ .btn.hold .fill,.btn.hold .plates-icon i{ transition:none; } }

/* --- Badge "nouveau record" (fin de charge) -------------------------------- */
.pr-badge{
  position:fixed; transform:translate(-50%,8px) scale(.6); z-index:300;
  background:var(--accent); color:var(--ink); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; padding:7px 14px; white-space:nowrap;
  opacity:0; pointer-events:none; display:flex; align-items:center; gap:6px;
  transition:opacity .35s var(--ease), transform .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 8px 20px rgba(0,0,0,.35); border-radius:999px;
}
.pr-badge svg{ width:12px; height:12px; }
.pr-badge.show{ opacity:1; transform:translate(-50%,0) scale(1); }

/* --- Ripple (retour de clic générique) -------------------------------------
   Rejoue la maquette (ripple + chalk burst = deux effets distincts au clic).
   Couleur jaune à faible opacité — la craie (blanche) reste réservée au
   chalkBurst déjà en place, pour ne pas dupliquer visuellement le même geste. */
.ripple{
  position:absolute; border-radius:50%; background:rgba(240,194,28,.32);
  transform:scale(0); animation:rippleAnim .6s ease-out forwards; pointer-events:none; z-index:0;
}
@keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }
[data-tilt]{ position:relative; overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .ripple{ display:none; } }

/* --- Rail de navigation (scroll-spy, accueil desktop) ---------------------- */
.rail{
  position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; gap:14px;
}
.rail-dot{
  width:8px; height:8px; border-radius:50%; border:1.5px solid rgba(13,13,13,.35);
  transition:all .3s var(--ease); display:block;
}
.rail-dot.active{ background:var(--accent); border-color:var(--accent); transform:scale(1.3); }
@media (max-width:1100px){ .rail{ display:none; } }

/* ==========================================================================
   PASSAGE INTÉGRAL AU NOIR — sections restées claires
   Ajouté 2026-08-11 : sur demande explicite de fidélité totale à la maquette
   (intégralement sombre, aucune section blanche). `.sec--dark` couvre déjà
   listes/programmes/citations/événements — il manquait les tarifs, la FAQ et
   l'en-tête des pages secondaires (`.phead`), jamais vus sur fond sombre.
   ========================================================================== */

/* --- Tarifs (cartes .rate) -------------------------------------------------- */
.sec--dark .rates{ border-color:rgba(251,250,248,.24); }
.sec--dark .rate{ border-color:rgba(251,250,248,.2); }
.sec--dark .rate__d{ color:#B7BCC2; }
.sec--dark .rate__u{ color:#AEB4BB; }
.sec--dark .rate__n mark{ background:var(--accent); color:var(--ink); }
.sec--dark .rates__note{ color:#B7BCC2; }
.sec--dark .rates__note svg{ color:var(--accent); }

/* --- FAQ ---------------------------------------------------------------- */
.sec--dark .faq{ border-color:rgba(251,250,248,.24); }
.sec--dark .faq details{ border-color:rgba(251,250,248,.2); }
.sec--dark .faq__no{ color:#AEB4BB; }
.sec--dark .faq details > p{ color:#B7BCC2; }

/* --- En-tête de page secondaire (.phead, 6 pages) --------------------------
   N'avait jusqu'ici jamais de fond propre (padding seulement, cf.
   exercices.css) : héritait du blanc du body. Repris en dur ici, partagé
   par toutes les pages qui l'utilisent. Le fil d'Ariane (.crumb) qui le
   précède est fusionné dans le même bloc sombre côté Blade pour éviter une
   bande blanche résiduelle entre la nav et le titre. */
.phead{
  background:var(--dark); color:var(--milk);
  --line:rgba(251,250,248,.2); --line-2:rgba(251,250,248,.34);
}
.phead .tag{ color:rgba(251,250,248,.6); }
.phead .muted{ color:#B7BCC2; }
.phead .bogo-mark{ filter:brightness(1.9) saturate(.75); }
.phead .crumb{ color:rgba(251,250,248,.6); }
.phead .crumb a:hover{ border-color:rgba(251,250,248,.5); }
.phead .crumb [aria-current="page"]{ color:var(--milk); }

/* Le titre restait noir sur noir : h1/h2/h3 sont forcés en var(--ink) globalement
   et .phead n'est pas une .sec--dark. */
.phead h1,.phead h2,.phead h3{ color:var(--milk); }

/* Géométrie de base du .phead et du fil d'Ariane. Elle vivait uniquement dans
   exercices.css, que les pages événements / galerie / boutique ne chargent pas :
   elles se retrouvaient sans padding ni grille. Valeurs identiques à
   exercices.css, donc sans conflit sur les pages qui chargent les deux. */
.phead{ padding-block:clamp(40px,5vw,72px) clamp(28px,3vw,44px); }
.phead__grid{ display:grid; gap:22px; }
@media (min-width:900px){
  .phead__grid{ grid-template-columns:minmax(0,1fr) minmax(0,28ch); gap:56px; align-items:end; }
}
.crumb{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-block:18px;
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.crumb a{ border-bottom:1px solid transparent; }
.crumb a:hover{ border-color:var(--ink-3); }
/* Fil d'Ariane fusionné dans l'en-tête : le padding haut vient déjà du .phead. */
.phead .crumb{ padding-block:0 20px; }

/* --- Galerie sur fond sombre ------------------------------------------------
   Le duoton des vignettes est inchangé : seuls le filtre, les légendes,
   l'emplacement « en attente » et la pagination supposaient un fond clair. */
.sec--dark .gal-filter label{ color:rgba(251,250,248,.6); }
.sec--dark .gal-filter select{ color:var(--milk); }
.sec--dark .gal-filter select:focus{ border-color:var(--milk); }
/* Le menu déroulant natif est peint par l'OS : sans color-scheme, les options
   restent en texte clair sur fond clair une fois le champ ouvert. */
.sec--dark .gal-filter select option{ color:var(--ink); background:var(--paper); }
.sec--dark .arch figcaption span:last-child{ color:#AEB4BB; }
.sec--dark .gal-pending{ background:rgba(251,250,248,.06); color:#AEB4BB; }
.sec--dark .gal-open:focus-visible{ outline-color:var(--accent); }
.sec--dark .gal-pager__nav{ border-color:rgba(251,250,248,.34); color:var(--milk); }
.sec--dark .gal-pager__nav:hover{ background:var(--milk); color:var(--ink); border-color:var(--milk); }
.sec--dark .gal-pager__status{ color:#AEB4BB; }

/* --- Programmes : flip cards sur fond sombre --------------------------------
   La face avant était en --paper (#F7F7F7) : sur la page Programmes désormais
   intégralement noire, elle apparaissait comme une carte blanche. Passée en
   --charcoal, à peine détaché du --dark de la section, pour que la carte reste
   lisible comme surface sans rouvrir un fond clair.
   La face arrière garde son jaune plein + texte noir : c'est le contraste du
   retournement, il doit rester brutal. */
.sec--dark .flip-face--front{ background:var(--charcoal); color:var(--milk); }
.sec--dark .flip-face--front > p{ color:#B7BCC2; }
.sec--dark .flip-hint{ color:#AEB4BB; }

/* --- Timeline événements ----------------------------------------------------
   Remplace le rendu en liste (.agenda/.ev) par la timeline verticale du
   prototype : filet vertical, point par événement, point jaune pulsant pour
   les rendez-vous à venir, point sourd pour les passés. */
.timeline{ position:relative; max-width:760px; padding-left:32px; }
.timeline::before{
  content:''; position:absolute; left:5px; top:6px; bottom:6px;
  width:1px; background:var(--line);
}
.tl-item{ position:relative; padding-bottom:36px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{
  position:absolute; left:-32px; top:4px; width:11px; height:11px;
  border-radius:50%; background:var(--charcoal); border:2px solid var(--ink-3);
}
.tl-item.upcoming .tl-dot{ background:var(--accent); border-color:var(--accent); }
.tl-item.upcoming .tl-dot::after{
  content:''; position:absolute; inset:-6px; border:1px solid var(--accent);
  border-radius:50%; animation:tlPulse 2s var(--ease) infinite;
}
@keyframes tlPulse{ 0%{ transform:scale(.6); opacity:.8; } 100%{ transform:scale(1.8); opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .tl-item.upcoming .tl-dot::after{ animation:none; opacity:.45; transform:scale(1); }
}
.tl-date{
  font-family:var(--ff-mono); font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--accent-2);
  margin-bottom:6px;
}
.tl-item.past .tl-date{ color:var(--ink-3); }
.tl-item h3{
  font-family:var(--ff-text); font-size:1.125rem; font-weight:800;
  line-height:1.25; text-transform:none; letter-spacing:normal; margin-bottom:6px;
}
.tl-item.past h3{ font-weight:700; }
.tl-item p{ color:var(--ink-2); font-size:.875rem; max-width:520px; }
.tl-badge{
  display:inline-block; margin-top:10px; font-family:var(--ff-mono);
  font-size:.6875rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:4px 10px; border:1px solid var(--accent-2);
  color:var(--accent-2);
}
.sec--dark .tl-dot{ background:var(--charcoal); border-color:#6F7479; }
.sec--dark .tl-date{ color:var(--gold); }
.sec--dark .tl-item.past .tl-date,
.sec--dark .tl-item p{ color:#AEB4BB; }
.sec--dark .tl-item.past h3{ color:#D6DADE; }
.sec--dark .tl-badge{ border-color:rgba(240,194,28,.55); color:var(--gold); }

/* --- Tarifs : grille de 4 cartes bordées -------------------------------------
   Remplace la liste de lignes `.rates` (le tableau) par la grille du prototype :
   4 cartes, la mensuelle mise en avant en jaune plein + texte noir (jamais de
   texte blanc sur --accent, cf. design-system/MASTER.md). */
.price-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:640px){ .price-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .price-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.price-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(22px,2.2vw,28px);
  background:var(--paper); border:1px solid var(--line);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
@media (hover:hover){ .price-card:hover{ transform:translateY(-8px); border-color:var(--line-2); } }
@media (prefers-reduced-motion:reduce){ .price-card{ transition:none; } .price-card:hover{ transform:none; } }

.price-card__tag{
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent-2); margin-bottom:14px;
}
.price-card__n{ font-family:var(--ff-text); font-size:1.0625rem; font-weight:700; letter-spacing:-.01em; margin-bottom:10px; }
.price-card__d{ font-size:.875rem; color:var(--ink-2); flex:1; margin-bottom:22px; }
.price-card__amt{
  font-family:var(--ff-display); font-size:clamp(1.75rem,2.6vw,2.125rem);
  line-height:1; letter-spacing:-.025em;
}
.price-card__per{ font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:9px; }

.bogolan-corner{ position:absolute; top:10px; right:10px; opacity:.55; pointer-events:none; }

/* Carte mise en avant : jaune plein, texte noir. Les tons secondaires sont des
   noirs transparents pour rester lisibles sur l'accent (un gris fixe y vire au
   sale). */
.price-card--pop{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.price-card--pop .price-card__n{ color:var(--ink); }
.price-card--pop .price-card__tag{ color:rgba(13,13,13,.72); }
.price-card--pop .price-card__d{ color:rgba(13,13,13,.78); }
.price-card--pop .price-card__per{ color:rgba(13,13,13,.68); }
@media (hover:hover){ .price-card--pop:hover{ border-color:var(--accent); } }

/* Sections sombres */
.sec--dark .price-card{ background:rgba(251,250,248,.05); border-color:rgba(251,250,248,.2); color:var(--milk); }
.sec--dark .price-card__tag{ color:var(--accent); }
.sec--dark .price-card__d{ color:#B7BCC2; }
.sec--dark .price-card__per{ color:#AEB4BB; }
@media (hover:hover){ .sec--dark .price-card:hover{ border-color:var(--accent); } }
.sec--dark .price-card--pop{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.sec--dark .price-card--pop .price-card__tag{ color:rgba(13,13,13,.72); }
.sec--dark .price-card--pop .price-card__d{ color:rgba(13,13,13,.78); }
.sec--dark .price-card--pop .price-card__per{ color:rgba(13,13,13,.68); }

.price-grid + .rates__note{ margin-top:clamp(24px,3vw,34px); }

/* ==========================================================================
   LA SALLE — GRILLE D'ÉQUIPEMENT (.eq-grid)
   Remplace la liste pleine largeur par la grille de cartes du prototype.
   Les filets 1px sont obtenus par `gap:1px` sur un fond de grille coloré :
   aucune bordure par carte, donc aucun doublement de trait entre cellules.
   Corollaire : une cellule vide apparaîtrait comme un bloc de couleur pleine,
   d'où le span 2 sur la 7e carte qui referme la dernière rangée.
   ========================================================================== */
.eq-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(251,250,248,.2); border:1px solid rgba(251,250,248,.2);
  perspective:1000px;
}
.eq-card{
  background:var(--charcoal); padding:28px 22px;
  display:flex; flex-direction:column; align-items:flex-start;
  transition:background .3s var(--ease);
}
.eq-card--wide{ grid-column:span 2; }
.eq-card:hover{ background:#211F16; }
/* Le ripple d'equip.js est injecté en z-index:0 dans la carte : le contenu
   doit passer au-dessus, et translateZ crée le relief pendant le tilt. */
.eq-card > :not(.belt-strip){ position:relative; z-index:1; }
.eq-icon{
  width:30px; height:30px; margin-bottom:14px;
  fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transform:translateZ(20px);
}
.eq-card__no{
  font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.1em;
  color:#AEB4BB; margin-bottom:12px; transform:translateZ(20px);
  transition:color .3s var(--ease);
}
.eq-card:hover .eq-card__no{ color:var(--accent); }
/* Le h3 global est en display condensée + majuscules : ici le titre de carte
   reprend la graisse de texte, comme le .list__t qu'il remplace. */
.eq-card__t{
  font-family:var(--ff-text); text-transform:none;
  font-size:1.0625rem; font-weight:600; letter-spacing:-.01em;
  color:var(--milk); margin:0 0 8px; transform:translateZ(20px);
}
.eq-card__d{ font-size:.9375rem; color:#B7BCC2; margin:0 0 16px; transform:translateZ(10px); }
.eq-card__m{
  font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:#AEB4BB; margin-top:auto;
  transform:translateZ(10px);
}
.eq-card[data-belt]:hover .belt-strip{ opacity:1; }
@media (max-width:900px){
  .eq-grid{ grid-template-columns:repeat(2,1fr); }
  .eq-card--wide{ grid-column:span 2; }
}
@media (max-width:560px){
  .eq-grid{ grid-template-columns:1fr; }
  .eq-card--wide{ grid-column:auto; }
}

/* ==========================================================================
   EN CE MOMENT — bande de vidéos façon Reels (.reel-rail / .reel-card)
   Cartes portrait (9:16), défilement horizontal, lecture muette en aperçu
   au scroll (JS), clic → lecteur plein son dans .reel-player.
   ========================================================================== */
.reel-rail{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gut);
  padding-bottom:6px; margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(251,250,248,.28) transparent;
}
.reel-rail::-webkit-scrollbar{ height:6px; }
.reel-rail::-webkit-scrollbar-thumb{ background:rgba(251,250,248,.28); border-radius:99px; }
.reel-card{
  position:relative; flex:none; width:200px; aspect-ratio:9/16;
  border-radius:var(--radius-lg); overflow:hidden; scroll-snap-align:start;
  background:#000; border:1px solid rgba(251,250,248,.14); cursor:pointer;
  isolation:isolate;
}
@media (min-width:700px){ .reel-card{ width:230px; } }
.reel-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.reel-card__preview{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; transition:transform .5s var(--ease);
}
.reel-card:hover .reel-card__preview{ transform:scale(1.04); }
.reel-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.82) 100%);
  pointer-events:none;
}
.reel-card__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2; width:52px; height:52px; border-radius:50%;
  background:rgba(13,13,13,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; color:var(--milk);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.reel-card[data-playing="true"] .reel-card__play{ opacity:0; transform:translate(-50%,-50%) scale(.8); }
.reel-card__meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px;
  display:flex; flex-direction:column; gap:2px; text-align:left; color:var(--milk);
}
.reel-card__meta span:first-child{ font-size:.875rem; font-weight:600; line-height:1.25; }
.reel-card__meta span:last-child{ font-family:var(--ff-mono); font-size:.6875rem; letter-spacing:.06em; color:rgba(251,250,248,.72); }

/* Meme pattern que .lightbox (galerie) : dialog plein viewport + centrage
   flex interne, plutot que de compter sur le centrage natif margin:auto du
   <dialog> — bug reel trouve en test (bouton fermer hors-viewport) quand le
   dialog n'occupe pas tout l'ecran. */
.reel-player{
  position:fixed; inset:0; z-index:200; max-width:none; max-height:none; width:100%; height:100%;
  padding:0; border:0; background:transparent; overscroll-behavior:contain;
}
.reel-player::backdrop{ background:rgba(0,0,0,.9); }
.reel-player[open]{ display:flex; align-items:center; justify-content:center; animation:reelIn .28s var(--ease) both; }
@keyframes reelIn{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:none; } }
.reel-player figure{
  position:relative; margin:0; background:#000; border-radius:var(--radius-lg); overflow:hidden;
  max-width:min(92vw,420px); max-height:88vh; width:100%;
}
.reel-player video{ width:100%; max-height:74vh; display:block; background:#000; }
.reel-player figcaption{ padding:14px 16px; display:flex; flex-direction:column; gap:2px; color:var(--milk); background:#000; }
.reel-player figcaption span:first-child{ font-weight:600; font-size:.9375rem; }
.reel-player figcaption span:last-child{ font-family:var(--ff-mono); font-size:.6875rem; color:rgba(251,250,248,.6); }
.reel-player__close{
  position:absolute; top:18px; right:18px; z-index:2; min-width:44px; min-height:44px;
  border-radius:50%; background:rgba(13,13,13,.55); color:var(--milk);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease);
}
.reel-player__close:hover{ background:rgba(13,13,13,.8); }
.reel-player__close:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .reel-card__preview{ transition:none; }
  .reel-card:hover .reel-card__preview{ transform:none; }
  .reel-player[open]{ animation:none; }
}