/* ==========================================================================
   DanseManager — site marketing V1 — direction « Huit temps »
   tokens.css · 29/09/2026 · à inclure tel quel (aucune dépendance)
   --------------------------------------------------------------------------
   Règles qui ne se lisent pas dans le code :
   · Le crème (#F0EEE9) N'EST JAMAIS un fond de page du site : c'est la couleur
     de l'APP, il ne vit qu'à l'intérieur des recréations d'écran (.screen).
   · Le site = ENCRE (temps forts, ≥ 50 % de la hauteur d'une page) + BLANC.
   · Terracotta = action (boutons, liens, focus). Jamais en aplat > un bouton.
   · Indigo + corail = le couple. Toujours ensemble, toujours avec un libellé
     (« Leader » / « Follower », « L » / « F »). Le corail n'apparaît jamais
     seul hors d'un écran (il est trop proche de l'orange Claude).
   · Zéro dégradé, zéro flou, zéro ombre portée sur les éléments marketing.
   · Les couleurs hors charte (niveaux, bracelets, couleur d'un organisateur)
     n'existent QUE dans les recréations : ce sont des données client.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap");

:root {
  /* ---- Marque ------------------------------------------------------------ */
  --brand: #C1502E;          /* terracotta — boutons, focus. 4,71:1 sur blanc, 4,07 sur crème (pas de petit texte), 3,19 sur encre (composant OK, texte non) */
  --brand-ink: #9E3E22;      /* texte-lien / survol — 6,63:1 sur blanc */
  --brand-soft: #F7E7E1;     /* fond doux ; SUR ENCRE = texte d'accent (12,5:1) */

  /* ---- Neutres (famille encre, froids : pas de gris chauds « papier ») ---- */
  --ink: #26262B;            /* encre — grands aplats, texte principal */
  --ink-raised: #303036;     /* encre + 6 % blanc — carte posée sur encre */
  --white: #FFFFFF;          /* fond de lecture du site */
  --paper: #F0EEE9;          /* crème — RÉSERVÉ à l'app (recréations) */
  --text: #26262B;
  --text-2: #5C5C66;         /* 6,6:1 blanc */
  --text-3: #6B6B74;         /* 5,3:1 blanc — mentions, légendes (plancher) */
  --line: rgba(38, 38, 43, .12);        /* filet décoratif */
  --line-strong: #8A8A93;               /* bord de champ : 3,4:1 (non-texte AA) */

  /* ---- Texte sur encre ----------------------------------------------------- */
  --on-ink: #FFFFFF;
  --on-ink-2: #C2C2C4;       /* 8,5:1 */
  --on-ink-3: #A8A8AA;       /* 6,3:1 — plancher sur encre */
  --on-ink-line: rgba(255, 255, 255, .14);

  /* ---- Rôles (le couple) --------------------------------------------------- */
  --role-leader: #4A5FC1;       /* 5,7:1 blanc · 2,65:1 encre → jamais nu sur encre (voir .piste) */
  --role-leader-soft: #E6E9F7;
  --role-leader-ink: #3A4CA0;   /* texte sur soft 6,4:1 */
  --role-follower: #E8734A;     /* 3,0:1 blanc (graphique OK, texte non) · 5,0:1 encre */
  --role-follower-soft: #FCEAE0;
  --role-follower-ink: #B24A28; /* texte sur soft 4,6:1 */

  /* ---- États --------------------------------------------------------------- */
  --success: #12A67C;  --success-ink: #0B7355;  --success-soft: #E4F3EC;
  --warning: #D9891F;  --warning-ink: #8A5A0B;  --warning-soft: #FBF3E7;
  --error:   #D92D20;  --error-ink:   #B42318;  --error-soft:   #FDECEA;

  /* ---- App (tokens de l'application, pour des recréations fidèles) --------- */
  --app-bg: #F0EEE9;
  --app-surface: #FFFFFF;
  --app-line: #E4DCCF;
  --app-muted: #6B6259;
  --app-radius: 12px;

  /* ---- Typographie ---------------------------------------------------------- */
  --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif; /* 500 / 700 seulement */
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* 500–800 */

  /* Échelle — mobile 375 → bureau 1280. Valeurs px entre parenthèses.
     Révision « proportions » du 01/10 (briefs/proportions.md) : rapport max
     titre / corps ramené de 7,5 à 4,5 ; un seul chiffre-vedette par page. */
  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);     /* 40 → 72 : H1 d'accueil, 2 lignes max   */
  --fs-h1:      clamp(2.25rem, 1.65rem + 2.4vw, 3.5rem);   /* 36 → 56 : H1 de page                   */
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);  /* 28 → 42 : titre de section, 3 lignes max */
  --fs-h3:      clamp(1.25rem, 1.15rem + .4vw, 1.5rem);    /* 20 → 24                                */
  --fs-h4:      1.125rem;                                  /* 18                                     */
  --fs-lead:    clamp(1.0625rem, 1rem + .25vw, 1.1875rem); /* 17 → 19 : chapô, 4 lignes max          */
  --fs-body:    1rem;                                      /* 16 — jamais moins dans un champ (iOS)  */
  --fs-small:   .875rem;                                   /* 14 — légendes, notes                   */
  --fs-micro:   .75rem;                                    /* 12 — étiquettes capitales              */
  --fs-num-xl:  clamp(3.5rem, 2.5rem + 4.2vw, 6rem);       /* 56 → 96 : chiffre-vedette, 1 par page  */
  --fs-step:    clamp(1.75rem, 1.5rem + 1vw, 2.5rem);      /* 28 → 40 : numéro d'étape (1 · 2 · 3)   */
  /* Texte dans les recréations d'écran (px fixes : c'est l'échelle de l'app) */
  --fs-screen:      13px;                                  /* texte courant d'un écran               */
  --fs-screen-min:  12px;                                  /* plancher absolu (avatars, pastilles)   */
  --fs-screen-title: 15px;                                 /* titre d'écran                          */
  --fs-screen-num:  clamp(1.5rem, 1.3rem + .6vw, 2rem);    /* 24 → 32 : chiffre DANS un écran        */

  --lh-display: .96;  --lh-heading: 1.08;  --lh-h3: 1.2;  --lh-body: 1.6;
  --ls-display: -.035em;  --ls-heading: -.025em;  --ls-h3: -.015em;  --ls-micro: .14em;
  --measure: 64ch;           /* texte courant : ~640 px à 16 px */
  --measure-lead: 56ch;      /* chapô : ~560 px à 19 px         */

  /* ---- Espacements (base 4 / 8) -------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  /* Rythme de page : temps fort / temps faible (révision 01/10 : 157 → 96 px et 77 → 64 px à 1280)
     « fort » = 3 sections par page au plus (hero, section différenciante, CTA final). */
  --section-fort:   clamp(56px, 1.5rem + 5.6vw, 96px);   /* 56 → 96 */
  --section-faible: clamp(40px, 1rem + 3.75vw, 64px);    /* 40 → 64 */
  --section-band:   clamp(24px, 1rem + 1.5vw, 32px);     /* bande d'une ligne (« Ils l'utilisent ») */
  --hero-pt:        clamp(40px, 1.5rem + 3vw, 64px);     /* sous l'en-tête */
  /* Espacements internes d'une section */
  --stack-manchette: 12px;                               /* manchette → H2 */
  --stack-head:      clamp(16px, .75rem + .6vw, 20px);   /* H2 → chapô */
  --stack-block:     clamp(32px, 1.5rem + 2vw, 48px);    /* tête de section → contenu ; bloc → bloc */

  /* ---- Gabarits d'écrans recréés ------------------------------------------- */
  --screen-wide-h:  560px;   /* écran large : col. 1–8, hauteur visible max (recadré) */
  --screen-mid-h:   520px;   /* écran moyen : col. 5–8 (ou 4–8), hauteur visible max  */
  --phone-w:        300px;   /* téléphone : largeur fixe                              */
  --phone-h:        560px;   /* téléphone : hauteur visible max (recadré)             */
  --thumb-h:        220px;   /* vignette d'étape : 1/3 de la largeur, hauteur fixe    */
  --screen-max-h-mobile: 480px; /* < 640 px : aucun écran plus haut (recadré)         */

  /* ---- Grille : 8 temps ------------------------------------------------------ */
  --container: 1240px;
  --gutter-x: 16px;          /* marge latérale mobile (16 px, exigence) */
  --col-gap: 16px;
  --cols: 4;                 /* 4 col. < 640 · 8 col. ≥ 640 */

  /* ---- Rayons (pas de 2xl) --------------------------------------------------- */
  --r-0: 0;                  /* sections, bandes, blocs marketing */
  --r-btn: 10px;             /* boutons, champs */
  --r-screen: 12px;          /* recréations d'écran */
  --r-pill: 999px;           /* pastilles et points seulement */

  /* ---- Filets ---------------------------------------------------------------- */
  --rule: 1px solid var(--line);
  --rule-strong: 2px solid var(--ink);

  /* ---- Mouvement ------------------------------------------------------------- */
  --beat: 500ms;             /* 1 temps à 120 BPM — unité de toutes les durées */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-count: 900ms;          /* compteurs qui défilent */
  --ease-out: cubic-bezier(.2, .75, .25, 1);   /* celle du loader du kit */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* ---- Variables de surface (lues par les composants) ------------------------ */
  --bg: var(--white);
  --fg: var(--text);
  --fg-2: var(--text-2);
  --fg-3: var(--text-3);
  --hair: var(--line);
  --link: var(--brand-ink);
  --focus: var(--brand);
}

@media (min-width: 640px)  { :root { --gutter-x: 32px; --col-gap: 24px; --cols: 8; } }
@media (min-width: 1280px) { :root { --gutter-x: 40px; } }

/* ==========================================================================
   Reset léger
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 500 var(--fs-body) / var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" off;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--brand-soft); color: var(--ink); }

/* ==========================================================================
   Surfaces — on change de surface, les composants suivent
   ========================================================================== */
.surface-white, .piste, .lane {
  --bg: var(--white); --fg: var(--text); --fg-2: var(--text-2); --fg-3: var(--text-3);
  --hair: var(--line); --link: var(--brand-ink); --link-line: currentColor; --focus: var(--brand);
  background: var(--bg); color: var(--fg);
}
.surface-ink {
  --bg: var(--ink);
  --fg: var(--on-ink);
  --fg-2: var(--on-ink-2);
  --fg-3: var(--on-ink-3);
  --hair: var(--on-ink-line);
  --link: var(--on-ink);
  --link-line: var(--brand-soft);
  --focus: var(--on-ink);
  background: var(--bg);
  color: var(--fg);
}
/* Carte posée sur encre (tarif de lancement, panneau d'auth) */
.surface-ink-raised { background: var(--ink-raised); }

/* ==========================================================================
   Conteneur et grille de 8 temps
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter-x));
  margin-inline: auto;
  padding-inline: var(--gutter-x);
}
.grid-8 {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
}
/* Placement : .span-mobile-4 par défaut plein ; utilitaires ≥ 640 */
.grid-8 > * { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .col-1-5 { grid-column: 1 / 6; }  .col-1-4 { grid-column: 1 / 5; }
  .col-3-9 { grid-column: 3 / 9; }  .col-6-9 { grid-column: 6 / 9; }
  .col-5-9 { grid-column: 5 / 9; }  .col-1-3 { grid-column: 1 / 3; }
  .col-4-9 { grid-column: 4 / 9; }  .col-1-6 { grid-column: 1 / 7; }
}
.section-fort   { padding-block: var(--section-fort); }
.section-faible { padding-block: var(--section-faible); }

/* ==========================================================================
   Typographie
   ========================================================================== */
.display, .h1, .h2, .h3, .h4, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h1, .h1  { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
h2, .h2  { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
h3, .h3  { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4, .h4  { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.01em; }

.lead  { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); max-width: var(--measure-lead); font-weight: 500; }
.body  { max-width: var(--measure); }
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.muted { color: var(--fg-3); }
strong, b { font-weight: 700; color: var(--fg); }

/* Sur-titre : UN par page au plus (hero). Ailleurs → .manchette */
.overline {
  font: 500 var(--fs-micro) / 1.2 var(--font-display);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--fg-2);
}
/* Manchette : le nom de la section, AU-DESSUS du H2 (révision 01/10 : plus de colonne 1–2 à elle seule) */
.manchette {
  margin-bottom: var(--stack-manchette);
  font: 700 var(--fs-small) / 1.4 var(--font-body);
  color: var(--fg-3);
  padding-top: .55em;           /* s'aligne sur la hauteur de capitale du H2 voisin */
  border-top: 2px solid currentColor;
  width: max-content;
  max-width: 100%;
}

/* Chiffres : toujours Space Grotesk, tabulaires, espace fine insécable avant € */
.num, .num-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.num-xl { font-size: var(--fs-num-xl); line-height: .9; letter-spacing: -.045em; } /* UN par page */
.num-xl .unit { font-size: .4em; letter-spacing: -.02em; vertical-align: .9em; margin-left: .06em; }
/* Numéro d'étape (1 · 2 · 3 / 5 · 6 · 7 · 8) : jamais en chiffre-vedette */
.step-num { font: 700 var(--fs-step) / 1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Mise en page des sections (révision « proportions » du 01/10)
   Toutes les sections occupent les 8 colonnes. Trois têtes possibles :
   .section-head          manchette + H2 + chapô empilés, col. 1–6 (avant un écran large)
   .section-head--split   H2 col. 1–4 | chapô + lien col. 5–8 (section sans visuel, ou écran large dessous)
   .layout-split          texte col. 1–4 | visuel col. 5–8 (écran moyen) ; --dense : 1–3 | 4–8
   ========================================================================== */
.section-head { max-width: calc(6 * (100% - 7 * var(--col-gap)) / 8 + 5 * var(--col-gap)); margin-bottom: var(--stack-block); }
.section-head .lead, .section-head--split .lead { margin-top: var(--stack-head); }
.section-head--split, .layout-split { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--stack-head); align-items: start; }
.section-head--split { margin-bottom: var(--stack-block); }
.section-head--split > *, .layout-split > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
  .section-head--split > :first-child, .layout-split > :first-child { grid-column: 1 / 5; }
  .section-head--split > :last-child,  .layout-split > :last-child  { grid-column: 5 / 9; }
  .section-head--split > :last-child .lead { margin-top: 0; }
  .layout-split--dense > :first-child { grid-column: 1 / 4; }
  .layout-split--dense > :last-child  { grid-column: 4 / 9; }
}
/* Listes de points sous une tête : 3 colonnes sur les 8, jamais 2 colonnes dans un demi-écran */
.points-3 { display: grid; gap: 24px var(--col-gap); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .points-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .points-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   Liens
   ========================================================================== */
a { color: inherit; }
.link {
  color: var(--link);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-thickness var(--t-fast);
}
.link:hover { text-decoration-thickness: 2px; }
.link { text-decoration-color: var(--link-line, currentColor); }
.link-arrow::after { content: "\00a0→"; display: inline-block; transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   Boutons — 48 px, rayon 10, jamais de pilule, jamais de lueur
   ========================================================================== */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  --btn-bd: var(--btn-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 1rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-base) var(--ease-out); }
.btn:hover svg { transform: translateX(2px); }
.btn:active { transform: translateY(1px); }

.btn--primary:hover { --btn-bg: var(--brand-ink); }

.btn--secondary { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--fg); }
.btn--secondary:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); }
/* Sur encre, le secondaire suit la surface (contour blanc → blanc plein) ; le primaire reste terracotta. */
/* Variante forte sur encre (CTA final, carte de lancement) : blanc plein */
.btn--on-ink { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--on-ink:hover { --btn-bg: var(--brand-soft); --btn-bd: var(--brand-soft); }

.btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn--block { width: 100%; }

/* Désactivé : s'il porte la raison du blocage, il tient 4,5:1 (règle du dépôt) */
.btn:disabled, .btn[aria-disabled="true"] {
  --btn-bg: #E9E9EB; --btn-bd: #E9E9EB; --btn-fg: var(--text-2);
  cursor: not-allowed;
}
/* Chargement : la pirouette remplace la flèche */
.btn[aria-busy="true"] { pointer-events: none; }

/* ==========================================================================
   Focus — visible partout, suit la surface
   ========================================================================== */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { border-radius: var(--r-btn); }

/* ==========================================================================
   Pastilles de rôle, badge, signature tempo
   ========================================================================== */
.pill-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-pill);
  font: 700 .8125rem/1.3 var(--font-body);
  white-space: nowrap;
}
.pill-role::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pill-role--leader   { background: var(--role-leader-soft);   color: var(--role-leader-ink); }
.pill-role--follower { background: var(--role-follower-soft); color: var(--role-follower-ink); }
.pill-role--leader::before   { background: var(--role-leader); }
.pill-role--follower::before { background: var(--role-follower); }
/* Version courte « L » / « F » : même composant, libellé d'une lettre + aria-label complet */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  font: 700 .8125rem/1.3 var(--font-body);
  background: #EEEEF0; color: var(--text-2);
}
.badge--brand   { background: var(--brand-soft);   color: var(--brand-ink); }
.badge--success { background: var(--success-soft); color: var(--success-ink); }
.badge--warning { background: var(--warning-soft); color: var(--warning-ink); }
.badge--error   { background: var(--error-soft);   color: var(--error-ink); }
.badge--on-ink { background: var(--ink-raised); color: var(--on-ink-2); }

/* Signature « tempo » du kit : deux pastilles, indigo puis corail */
.tempo { display: inline-flex; gap: 5px; vertical-align: middle; }
.tempo::before, .tempo::after { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.tempo::before { background: var(--role-leader); }
.tempo::after  { background: var(--role-follower); }

/* ==========================================================================
   La piste — notation de pas sur 8 temps (le motif du système)
   · Bande BLANCHE, même au milieu d'une section encre : l'indigo y tient 5,7:1,
     contre 2,65:1 sur encre.
   · Un temps = une colonne de la grille. Sur chaque temps, le couple : un point
     Leader, un point Follower, reliés par un trait (la connexion, la tenue).
   · --y déplace le COUPLE (les deux ensemble, comme sur la piste) :
     -1 = en avant, 0 = sur place, 1 = en arrière. Temps vides (4, 8 en salsa) :
     .pair--rest (deux anneaux). Syncope « & » : .pair--and dans la même colonne.
   · Légende obligatoire (pastilles Leader / Follower + nom du pas) : c'est une
     vraie notation, pas un décor.
   ========================================================================== */
.piste { --pair-h: 56px; --pair-dot: 14px; border-block: 1px solid var(--line); }
.piste__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.piste__beat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 136px;
  padding: 18px 0 10px 10px;
  border-left: 1px solid var(--line);
}
.piste__beat:first-child { border-left: 2px solid var(--ink); }
.piste__count { font: 700 .875rem/1 var(--font-display); color: var(--text-3); font-variant-numeric: tabular-nums; }
.pair {
  --y: 0;
  --dot: var(--pair-dot);
  --gap: calc(var(--pair-h) - 2 * var(--dot));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--dot);
  gap: var(--gap);
  transform: translateY(calc(var(--y) * 10px));
}
.pair::before {                       /* la connexion */
  content: "";
  position: absolute;
  left: 50%; top: calc(var(--dot) / 2); bottom: calc(var(--dot) / 2);
  width: 2px; margin-left: -1px;
  background: var(--ink);
}
.pair i { position: relative; width: var(--dot); height: var(--dot); border-radius: 50%; }
.pair i:first-child { background: var(--role-leader); }
.pair i:last-child  { background: var(--role-follower); }
.pair--rest::before { background: var(--line); }
.pair--rest i:first-child, .pair--rest i:last-child { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.pair--and { position: absolute; left: calc(50% + var(--col-gap) / 2 + 10px + (var(--pair-dot) - var(--dot)) / 2); top: 18px; --dot: 9px; } /* à mi-chemin entre deux temps */
.piste__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-block: 12px; font-size: var(--fs-small); color: var(--text-2); }
@media (min-width: 1024px) {
  .piste { --pair-h: 76px; --pair-dot: 20px; }
  .piste__beat { min-height: 164px; padding-top: 24px; }
  .pair--and { top: 24px; --dot: 11px; }
}

/* Les places : un point = une place d'un rôle (plein = prise, anneau = libre).
   Toujours dans une .lane blanche, toujours avec la pastille du rôle en tête de rangée. */
.lane { padding: 20px 20px 16px; }
.lane-row { display: grid; grid-template-columns: 92px repeat(var(--seats, 15), minmax(0, 1fr)) 56px; align-items: center; gap: 6px; padding-block: 10px; }
.lane-row + .lane-row { border-top: 1px solid var(--line); }
.seat { aspect-ratio: 1; border-radius: 50%; background: var(--c, var(--role-leader)); }
.seat--follower { --c: var(--role-follower); }
.seat.free, .seat--free { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.seat.is-new { animation: beat-on var(--beat) var(--ease-pop) both; }
@media (max-width: 639px) {
  .lane-row { grid-template-columns: repeat(var(--seats, 15), minmax(0, 1fr)); }
  .lane-row > .pill-role, .lane-row > .q { grid-column: 1 / -1; justify-self: start; }
}

/* « La mesure » : les couples s'allument temps par temps, UNE fois (--i = rang) */
.piste.is-playing .pair { animation: beat-on var(--beat) var(--ease-pop) both; animation-delay: calc(300ms + var(--i, 0) * var(--beat)); }
@keyframes beat-on {
  0%   { opacity: 0; transform: translateY(0) scale(.4); }
  100% { opacity: 1; transform: translateY(calc(var(--y) * 10px)) scale(1); }
}

/* ==========================================================================
   Champs de formulaire
   ========================================================================== */
.field { display: grid; gap: 6px; }
.field + .field { margin-top: 20px; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__label { font: 700 .9375rem/1.3 var(--font-body); color: var(--text); }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--text);
  font: 500 1rem/1.3 var(--font-body);   /* 16 px : pas de zoom iOS */
  transition: border-color var(--t-fast);
}
.field__input::placeholder { color: var(--text-3); }
.field__input:hover { border-color: var(--text-2); }
.field__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--ink); border-radius: var(--r-btn); }
.field__help { font-size: var(--fs-small); color: var(--text-2); }
.field__error { display: none; align-items: flex-start; gap: 6px; font: 700 var(--fs-small)/1.4 var(--font-body); color: var(--error-ink); }
.field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--error); color: #fff; font-size: 11px; font-weight: 800; }
.field[data-invalid] .field__input, .field__input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.field[data-invalid] .field__error { display: flex; }

/* ==========================================================================
   Recréation d'écran — .screen
   L'intérieur reprend les tokens de l'APP (crème, gris chauds, 13 px).
   Jamais de chrome navigateur, jamais d'ombre, jamais de transform: scale < .85.
   ========================================================================== */
.screen {
  --bg: var(--app-bg); --fg: var(--ink); --fg-2: var(--app-muted); --fg-3: var(--app-muted); --hair: var(--app-line);
  position: relative;
  background: var(--app-bg);
  color: var(--ink);
  border-radius: var(--r-screen);
  font: 500 13px/1.5 var(--font-body);
  overflow: hidden;
  isolation: isolate;
}
.surface-white .screen, .screen--framed { box-shadow: 0 0 0 1px rgba(38,38,43,.14); } /* un filet, pas une ombre */
.screen__card { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--app-radius); }
/* Recouvrement (satellite, écran à cheval) : un passe-partout de la couleur du fond, pas d'ombre */
.passe-partout { box-shadow: 0 0 0 6px var(--passe, var(--bg)); }
/* Débord : l'écran sort du conteneur par la droite, coupé par le viewport */
.bleed-right { margin-right: calc(-1 * var(--gutter-x)); border-top-right-radius: 0; border-bottom-right-radius: 0; }
@media (min-width: 1320px) { .bleed-right { margin-right: calc((100vw - var(--container)) / -2); } }

.screen-caption { margin-top: 12px; font-size: var(--fs-small); color: var(--fg-3); }

/* Gabarits (01/10) : trois tailles d'écran, pas une de plus. Hauteur visible plafonnée,
   le reste est coupé par le bas (coins bas carrés). Texte de l'écran : --fs-screen, plancher 12 px. */
.screen--wide  { width: 100%; max-height: var(--screen-wide-h); }
.screen--mid   { width: 100%; max-height: var(--screen-mid-h); }
.screen--phone { width: var(--phone-w); max-width: 100%; max-height: var(--phone-h); border-radius: 24px 24px 0 0; }
.screen--thumb { width: 100%; height: var(--thumb-h); }
.screen--wide, .screen--mid, .screen--phone { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 639px) {
  .screen--wide, .screen--mid { max-height: var(--screen-max-h-mobile); }
  .screen--phone { max-height: var(--screen-max-h-mobile); }
}

/* Annotations : repère numéroté sur l'écran + note en marge */
.annot {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font: 700 .75rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.surface-ink .annot-note .annot { background: #fff; color: var(--ink); }
.annot-note { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: var(--fs-small); color: var(--fg-2); }
.annot-note b { display: block; color: var(--fg); font-size: 1rem; }

/* ==========================================================================
   Pirouette — le symbole en chargement (dérivé du loader du kit)
   <svg class="pirouette" viewBox="0 0 100 100" aria-hidden="true">
     <g class="pirouette__a"><path d="M50 17 A33 33 0 0 0 50 83"/></g>
     <g class="pirouette__b"><path d="M50 32 A18 18 0 0 1 50 68"/></g>
     <circle cx="50" cy="50" r="9"/></svg>
   ========================================================================== */
.pirouette { width: 20px; height: 20px; overflow: visible; }
.pirouette path { fill: none; stroke: currentColor; stroke-linecap: round; }
.pirouette__a path { stroke-width: 14; }
.pirouette__b path { stroke-width: 12; stroke-opacity: .45; }
.pirouette circle { fill: currentColor; }
.pirouette__a, .pirouette__b { transform-origin: 50px 50px; transform: rotate(-28deg); }
.pirouette.is-spinning .pirouette__a { animation: pir-a calc(var(--beat) * 2) var(--ease-out) infinite; }
.pirouette.is-spinning .pirouette__b { animation: pir-b calc(var(--beat) * 2) var(--ease-out) infinite; }
@keyframes pir-a { to { transform: rotate(332deg); } }   /* un tour, sens horaire */
@keyframes pir-b { to { transform: rotate(-388deg); } }  /* un tour, sens contraire */
/* Entrée du logo (une fois, au chargement de l'auth) = loader du kit */
.pirouette.is-entering .pirouette__a { animation: pir-in-a calc(var(--beat) * 1.7) var(--ease-out) both; }
.pirouette.is-entering .pirouette__b { animation: pir-in-b calc(var(--beat) * 1.7) var(--ease-out) both; }
@keyframes pir-in-a { from { opacity: 0; transform: rotate(-208deg) scale(.55); } }
@keyframes pir-in-b { from { opacity: 0; transform: rotate(152deg) scale(.55); } }

/* Compteur (JS : écrit la valeur finale dans le DOM d'abord, anime ensuite) */
.counter { font-variant-numeric: tabular-nums; }

/* Accès rapide */
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: var(--r-btn); font-weight: 700; }
.skip-link:focus-visible { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   Mouvement réduit : état final immédiat, aucune boucle
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .pirouette.is-spinning .pirouette__a, .pirouette.is-spinning .pirouette__b { animation: none; }
}