/* =====================================================================
   PRÉINSCRIPTION USFTT — le système visuel.

   CONCEPT : LA TABLE DE PING. Un fond « papier » clair, pour que les
   formulaires se lisent à tout âge ; la table bleue, ses lignes blanches et la
   balle jaune du club pour tout ce qui montre le chemin (schéma du parcours,
   piste des étapes). La balle avance quand l'adhérent avance.

   Polices auto-hébergées (static/fonts, licence OFL) : rien ne dépend d'un
   serveur tiers — au comptoir de la salle, la connexion peut être mauvaise.
     · Barlow Condensed : titres et chiffres (l'esprit tableau de score) ;
     · Atkinson Hyperlegible : texte et champs (dessinée pour la lisibilité).

   Toutes les valeurs passent par les jetons de :root (contrôle
   lint_hardcodes de ux-ui-agent-skills). Tailles en rem : elles suivent la
   taille de texte choisie dans le navigateur. Deux exceptions marquées
   ds-allow-hardcode : les @font-face et les points de rupture (@media
   n'accepte pas var()).
   ===================================================================== */

/* ds-allow-hardcode:start — déclarations de polices */
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;
  src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")}
/* ds-allow-hardcode:end */

:root{
  color-scheme:light;
  /* Couleurs : la table, la balle, le papier */
  --table:#0E2154;
  --table-2:#173F94;
  --table-3:#22489E;
  --balle:#F2C41C;
  --balle-vive:#FFD23A;
  --balle-fonce:#8A6A00;
  --balle-halo:rgba(242,196,28,.25);
  --papier:#F4F2EC;
  --carte:#FFFFFF;
  --blanc:#FFFFFF;
  --encre:#13203F;
  --encre-2:#46526F;
  --encre-3:#5E6884;
  --sur-table:#C9D3EC;
  --sur-table-2:#E1E7F5;
  --ligne-table:rgba(255,255,255,.85);
  --ligne-table-douce:rgba(255,255,255,.2);
  --ligne-table-fine:rgba(255,255,255,.18);
  --trait:#D8DBE3;
  --trait-fort:#B7BDCB;
  --fond-doux:#F7F8FB;
  --survol-ligne:#F7F9FE;
  --danger:#B42318;
  --danger-fond:#FDECEA;
  --danger-bord:#F1B5AE;
  --danger-encre:#5C1410;
  --danger-champ:#FFF8F7;
  --ok:#1D7046;
  --ok-fond:#E7F4EC;
  --info-fond:#EAF0FB;
  --ombre-balle:rgba(0,0,0,.14);
  --ombre-table:0 1.1rem 2.5rem -1.4rem rgba(14,33,84,.65);
  --ombre-feuille:0 1px 0 #D8DBE3, 0 .9rem 1.75rem -1.1rem rgba(14,33,84,.45);
  --ombre-feuille-haut:0 1px 0 #D8DBE3, 0 1.4rem 2.25rem -1.1rem rgba(14,33,84,.55);
  /* La fiche papier garde ses couleurs d'origine */
  --fiche-encre:#111111;
  --fiche-bleu:#173F94;
  --fiche-avert-fond:#FFF3CD;
  --fiche-avert-encre:#5C4400;
  --fiche-avert-bord:#E0B100;
  /* Polices */
  --titre:"Barlow Condensed","Arial Narrow",sans-serif;
  --texte:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fiche-police:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* Tailles de texte */
  --fs-base:1.0625rem;
  --fs-petit:.9rem;
  --fs-mini:.86rem;
  --fs-case:1.06rem;
  --fs-case-2:.95rem;
  --fs-lbl:.98rem;
  --fs-champ:1.05rem;
  --fs-chapeau:1.18rem;
  --fs-h1:clamp(2.2rem,4.4vw,3.4rem);
  --fs-h2:clamp(1.7rem,2.8vw,2.3rem);
  --fs-h3:1.4rem;
  --fs-marque:1.45rem;
  --fs-score:clamp(3rem,9vw,5.6rem);
  --fs-total:3.2rem;
  --fs-chiffre:2.6rem;
  --fs-chiffre-vedette:3.4rem;
  --fs-fiche:.95rem;
  /* Espacements */
  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.5rem; --e6:2rem; --e7:3rem; --e8:4.5rem;
  /* Formes et tailles */
  --r:.625rem;
  --r-l:1rem;
  --r-feuille:.375rem;
  --trait-l:1px;
  --trait-m:1.5px;
  --trait-g:2px;
  --barre-g:4px;
  --focus:3px;
  --barre-l:5px;
  --barre-xl:6px;
  --h-champ:3.125rem;
  --h-champ-court:2.625rem;
  --h-bouton:3rem;
  --h-entete:4.25rem;
  --case:1.375rem;
  --logo:2.75rem;
  --largeur:72.5rem;
  --largeur-fiche:60rem;
  --col-panneau:20.625rem;
  --col-min:15rem;
  --col-recherche:16.25rem;
  --pastille:1rem;
  --pastille-balle:1.75rem;
  --balle-schema:.875rem;
  --case-depart:4.75rem;
  --fleche-h:2rem;
  --fleche-pointe:.4rem;
  --mini-ligne-h:.55rem;
  --vignette:6rem;
  --mini-lbl:4.5rem;
  --t-chute:1.6s;
  --piste-haut:.95rem;
  --piste-texte:2.5rem;
  --barre-piste:.375rem;
  --lettre-titre:.02em;
  --lettre-large:.12em;
  /* Mouvements */
  --t-vite:.12s;
  --t-moyen:.25s;
  --t-entree:.55s;
  --t-etape:.35s;
  --courbe:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--papier); color:var(--encre); font:var(--fs-base)/1.6 var(--texte);
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column}
body > main{flex:1}
a{color:var(--table-2); text-underline-offset:.2em}
a:hover{color:var(--table)}
/* L'anneau de focus doit contraster à 3:1 avec son fond (WCAG 2.2, 1.4.11) :
   bleu nuit sur le papier, jaune sur les surfaces bleues. */
:focus-visible{outline:var(--focus) solid var(--table); outline-offset:var(--trait-g); border-radius:var(--e1)}
header.site :focus-visible, footer.site :focus-visible, .parcours :focus-visible, .piste :focus-visible, .vedette :focus-visible,
.bande-cta :focus-visible, .score :focus-visible, .atout.vedette :focus-visible, .panneau .total :focus-visible{outline-color:var(--balle)}
[hidden]{display:none !important}
img{max-width:100%; height:auto; display:block}

.wrap{max-width:var(--largeur); margin:0 auto; padding:0 var(--e5)}

/* ── En-tête et pied ─────────────────────────────────────────────── */
header.site{background:var(--table); color:var(--blanc); border-bottom:var(--barre-g) solid var(--table-2)}
header.site .wrap{display:flex; align-items:center; gap:var(--e4); min-height:var(--h-entete)}
header.site a.marque{display:flex; align-items:center; gap:var(--e3); color:var(--blanc); text-decoration:none}
header.site .marque img{width:var(--logo); height:var(--logo); border-radius:var(--r-feuille)}
header.site .marque b{font:700 var(--fs-marque)/1 var(--titre); letter-spacing:var(--lettre-titre); text-transform:uppercase}
header.site .saison{margin-left:auto; font:600 var(--fs-champ) var(--titre); letter-spacing:var(--lettre-large); color:var(--sur-table); white-space:nowrap}
header.site .saison .court{display:none}
main{padding:var(--e7) 0 var(--e8)}
footer.site{background:var(--table); color:var(--sur-table); padding:var(--e6) 0; font-size:var(--fs-petit)}
footer.site a{color:var(--blanc); display:inline-block; padding:var(--e1) 0}

/* ── Typographie ─────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--titre); font-weight:700; line-height:1.08; color:var(--table); margin:0}
h1{font-size:var(--fs-h1); margin-bottom:var(--e4)}
h2{font-size:var(--fs-h2); margin-bottom:var(--e4)}
h3{font-size:var(--fs-h3); margin-bottom:var(--e2)}
p{margin:0 0 var(--e4)}
.chapeau{font-size:var(--fs-chapeau); color:var(--encre-2); max-width:58ch}
.surtitre{font:700 var(--fs-lbl) var(--titre); letter-spacing:var(--lettre-large); text-transform:uppercase; color:var(--table-2); margin:0 0 var(--e2)}
.petit, .tiny{font-size:var(--fs-petit); color:var(--encre-3)}
.section{margin-top:var(--e8)}
.section-tete{max-width:62ch; margin-bottom:var(--e5)}

.visuellement-cache{position:absolute; width:var(--trait-l); height:var(--trait-l); overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.insecable{white-space:nowrap}
.lien-discret{font-weight:700; padding:var(--e2) 0}

/* ── Boutons ─────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  min-height:var(--h-bouton); padding:0 var(--e5); border-radius:var(--r); border:var(--trait-g) solid transparent;
  font:700 var(--fs-champ) var(--texte); text-decoration:none; cursor:pointer;
  transition:transform var(--t-vite), background var(--t-vite)}
.btn:active{transform:translateY(var(--trait-l))}
.btn-y, .btn-balle{background:var(--balle); color:var(--table); border-color:var(--balle)}
.btn-y:hover, .btn-balle:hover{background:var(--balle-vive); color:var(--table)}
.btn-table{background:var(--table); color:var(--blanc)}
.btn-table:hover{background:var(--table-2); color:var(--blanc)}
.btn-ghost{background:transparent; color:var(--table); border-color:var(--trait-fort)}
.btn-ghost:hover{border-color:var(--table); color:var(--table)}
.actions{display:flex; flex-wrap:wrap; gap:var(--e3); align-items:center}
button.lien{background:none; border:0; padding:0; font:inherit; color:var(--table-2); text-decoration:underline; cursor:pointer}
button.lien.danger{color:var(--danger)}
form.en-ligne{display:inline}

/* ── Cartes, encarts, messages ───────────────────────────────────── */
.carte, .encart{background:var(--carte); border:var(--trait-l) solid var(--trait); border-radius:var(--r-l); padding:var(--e5)}
.encart{margin:var(--e4) 0}
.encart h3{margin-top:0}
.note{background:var(--info-fond); border-left:var(--barre-l) solid var(--table-2); padding:var(--e4) var(--e5); margin:var(--e4) 0; color:var(--encre)}
.alerte{background:var(--danger-fond); border:var(--trait-l) solid var(--danger-bord); border-left:var(--barre-l) solid var(--danger); padding:var(--e4) var(--e5); margin:0 0 var(--e5); color:var(--danger-encre)}
.succes{background:var(--ok-fond); border-left:var(--barre-l) solid var(--ok); padding:var(--e4) var(--e5); margin:var(--e4) 0}

/* ── Champs ─────────────────────────────────────────────────────── */
label{display:block; margin:0 0 var(--e2); font-weight:700; font-size:var(--fs-lbl)}
.champ{margin:0 0 var(--e5)}
input[type=text], input[type=date], input[type=email], input[type=tel], input[type=password], select{
  width:100%; min-height:var(--h-champ); padding:var(--e2) var(--e4); font:inherit; font-size:var(--fs-champ);
  background:var(--carte); color:var(--encre); border:var(--trait-m) solid var(--trait-fort); border-radius:var(--r)}
input:hover, select:hover{border-color:var(--encre-3)}
input:focus, select:focus{border-color:var(--table); outline:var(--focus) solid var(--table-2); outline-offset:0}
input[type=checkbox], input[type=radio]{width:var(--case); height:var(--case); accent-color:var(--table-2); margin:0; flex:none}
.aide{margin:var(--e2) 0 0; font-size:var(--fs-petit); color:var(--encre-3)}
.msg-err{margin:var(--e2) 0 0; font-size:var(--fs-fiche); color:var(--danger); font-weight:700}
.en-erreur input[type=text], .en-erreur input[type=date], .en-erreur input[type=email],
.en-erreur input[type=tel], .en-erreur select{border-color:var(--danger); background:var(--danger-champ)}
.en-erreur .aide{display:none}
.en-erreur .radios label, .en-erreur .choix label{border-color:var(--danger)}
.question{display:block; font-weight:700; font-size:var(--fs-lbl); margin:0 0 var(--e2)}
.radios{display:flex; flex-wrap:wrap; gap:var(--e2)}
.radios label, .choix label{display:flex; align-items:center; gap:var(--e3); margin:0; font-weight:400;
  min-height:var(--h-champ); padding:var(--e2) var(--e4); background:var(--carte);
  border:var(--trait-m) solid var(--trait-fort); border-radius:var(--r); cursor:pointer}
.radios label:hover, .choix label:hover{border-color:var(--table-2)}
.radios label:has(input:checked), .choix label:has(input:checked){border-color:var(--table-2); background:var(--info-fond); box-shadow:inset 0 0 0 var(--trait-l) var(--table-2)}
.choix{display:grid; gap:var(--e2)}
.choix label.formule{align-items:flex-start}
.choix label.formule input{margin-top:var(--e1)}
.formule .prix{font-size:var(--fs-petit); color:var(--table-2); font-weight:700; margin-left:var(--e1); white-space:nowrap}
.formule .formule-txt{display:block; font-size:var(--fs-petit); color:var(--encre-3); margin-top:var(--e1)}
.choix.deux{grid-template-columns:repeat(auto-fit,minmax(var(--col-min),1fr))}
.ligne2{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--e5)}
.ligne3{display:grid; grid-template-columns:repeat(3,1fr); gap:0 var(--e5)}
.ligne-q{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--e2) var(--e4);
  border-bottom:var(--trait-l) solid var(--trait); padding:var(--e3) 0; margin:0}
.ligne-q .question{margin:0; font-weight:400}
.ligne-q .radios label{min-height:var(--h-champ-court); padding:var(--e1) var(--e4)}
.piege{position:absolute; left:-100vw; width:var(--trait-l); height:var(--trait-l); overflow:hidden}
fieldset{border:0; padding:0; margin:0; min-width:0}
legend{padding:0}

/* ── Tableaux ───────────────────────────────────────────────────── */
.defile{overflow-x:auto; border:var(--trait-l) solid var(--trait); border-radius:var(--r); background:var(--carte)}
table.grille{border-collapse:collapse; width:100%; font-size:var(--fs-fiche)}
table.grille th, table.grille td{border-bottom:var(--trait-l) solid var(--trait); padding:var(--e3) var(--e3); text-align:left; vertical-align:top}
table.grille th{font:700 var(--fs-fiche) var(--titre); letter-spacing:var(--lettre-large); text-transform:uppercase; color:var(--encre-2); background:var(--fond-doux)}
table.grille tr:last-child td{border-bottom:0}
table.grille .nb{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
table.liste tr:hover td{background:var(--survol-ligne)}
table.liste td a{font-weight:700}
table.liste td:first-child, table.liste td:nth-child(3){white-space:nowrap}
details.tarifs{margin:var(--e3) 0 var(--e5)}
details.tarifs summary{cursor:pointer; color:var(--table-2); font-weight:700}
details.tarifs[open] summary{margin-bottom:var(--e3)}

/* =====================================================================
   L'ACCUEIL
   ===================================================================== */
.hero{max-width:52rem}
.hero h1{margin-bottom:var(--e4)}
.hero .actions{margin-top:var(--e5)}

/* Le schéma : la table de ping. HTML et non SVG — le texte suit la taille
   du navigateur, et le parcours s'empile sur téléphone sans devenir une liste. */
.parcours{margin-top:var(--e6); background:var(--table); border-radius:var(--r-l); padding:var(--e5);
  box-shadow:var(--ombre-table); position:relative; outline:var(--trait-g) solid var(--ligne-table); outline-offset:calc(-1 * var(--e3))}
.parcours::before{content:""; position:absolute; top:var(--e3); bottom:var(--e3); left:50%; width:var(--trait-l); background:var(--ligne-table-douce)}
.voies{position:relative; display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--e4); padding:var(--e3) var(--e3) 0}
.voie, .branche{position:relative; display:flex; flex-direction:column; align-items:stretch}
.branches{display:grid; grid-template-columns:1fr 1fr; gap:var(--e4); flex:1}
.case{display:block; position:relative; z-index:1; background:var(--table-2); color:var(--blanc); text-decoration:none;
  border:var(--trait-m) solid var(--blanc); border-radius:var(--r); padding:var(--e3) var(--e4); text-align:center}
.case b{display:block; font:700 var(--fs-case)/1.25 var(--texte)}
.case span{display:block; font-size:var(--fs-case-2); line-height:1.35; color:var(--sur-table); margin-top:var(--e1)}
a.case:hover, a.case:focus-visible{background:var(--table-3); border-color:var(--balle); color:var(--blanc)}
.case.depart{background:var(--table-3); min-height:var(--case-depart); display:flex; flex-direction:column; justify-content:center}
.voie > .case:not(.depart), .branche > .case{flex:1; display:flex; flex-direction:column; justify-content:center}
.case.arrivee{display:block; margin:0 var(--e3); background:var(--balle); border-color:var(--balle); color:var(--table)}
.case.arrivee span{color:var(--table)}
a.case.arrivee:hover, a.case.arrivee:focus-visible{background:var(--balle-vive); color:var(--table); border-color:var(--blanc)}
.fleche{position:relative; display:block; height:var(--fleche-h); width:var(--trait-g); margin:0 auto; background:var(--blanc)}
.fleche::after{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  border:var(--fleche-pointe) solid transparent; border-top-color:var(--blanc); border-bottom:0}
.fleche-lbl{position:absolute; left:calc(100% + var(--e2)); top:50%; transform:translateY(-50%); white-space:nowrap;
  font-size:var(--fs-case-2); color:var(--sur-table); background:var(--table)}
.parcours .visuellement-cache{color:var(--blanc)}
.fleche.pointillee{background:none; border-left:var(--trait-g) dashed var(--blanc); width:0}
.boucle{display:flex; flex-direction:column; align-items:flex-start; padding:0 var(--e3)}
.boucle .fleche{margin:0 0 0 var(--e7)}
.boucle .case{min-width:min(100%, 24rem); text-align:left}
/* Les balles : une seule chute par chemin, au chargement, jusqu'à l'arrivée. */
.balle-tombe{position:absolute; z-index:2; left:50%; top:0; width:var(--balle-schema); height:var(--balle-schema);
  margin-left:calc(var(--balle-schema) / -2); border-radius:50%; background:var(--balle); opacity:0; pointer-events:none}
.balle-tombe{z-index:0}

/* Pourquoi en ligne ? — une seule promesse, montrée plutôt que répétée. */
.pourquoi{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--e5); align-items:start}
.pourquoi > *{min-width:0}
.vedette{background:var(--table); color:var(--blanc); border-radius:var(--r-l); padding:var(--e6)}
.vedette h2{color:var(--blanc)}
.vedette p{color:var(--sur-table-2); max-width:52ch}
.vedette .surtitre{color:var(--sur-table)}
.pourquoi .carte h3 + p{margin-bottom:var(--e5)}
.avant-apres{display:flex; align-items:center; gap:var(--e4); margin-top:var(--e5)}
.mini-fiche{flex:1; min-width:0; max-width:15rem; background:var(--blanc); color:var(--encre); border-radius:var(--r-feuille); padding:var(--e3) var(--e4)}
.mini-titre{display:block; font:700 var(--fs-lbl) var(--titre); letter-spacing:var(--lettre-titre); text-transform:uppercase; color:var(--encre-2); margin-bottom:var(--e2)}
.mini-ligne{display:flex; align-items:center; gap:var(--e2); font-size:var(--fs-mini); padding:var(--e1) 0}
.mini-ligne i{font-style:normal; width:var(--mini-lbl); flex:none; color:var(--encre-3)}
.mini-ligne em{flex:1; height:var(--mini-ligne-h); border-bottom:var(--trait-l) dotted var(--trait-fort)}
.mini-fiche.remplie .mini-ligne em{border:0; border-radius:var(--e1); background:var(--info-fond); position:relative}
.mini-fiche.remplie .mini-ligne em::after{content:""; position:absolute; right:var(--e2); top:50%; width:var(--e2); height:var(--e3);
  border:solid var(--ok); border-width:0 var(--trait-g) var(--trait-g) 0; transform:translateY(-60%) rotate(45deg)}
.mini-fleche{font:700 var(--fs-h2) var(--titre); color:var(--sur-table)}

/* Les formulaires vierges : de grandes miniatures. */
.vierges{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e5)}
.vierge{display:flex; flex-direction:column; gap:var(--e3); text-decoration:none; color:inherit}
.vierge .feuille{background:var(--blanc); border:var(--trait-l) solid var(--trait); border-radius:var(--r-feuille); padding:var(--e2);
  box-shadow:var(--ombre-feuille); transition:transform var(--t-moyen) var(--courbe), box-shadow var(--t-moyen)}
.vierge:hover .feuille, .vierge:focus-visible .feuille{transform:translateY(calc(-1 * var(--e1))) rotate(-.4deg); box-shadow:var(--ombre-feuille-haut)}
.vierge-txt{display:flex; flex-direction:column; gap:var(--e1)}
.vierge .titre{font:700 var(--fs-h3)/1.15 var(--titre); color:var(--table)}
.vierge .meta{font-size:var(--fs-petit); color:var(--encre-3)}
.vierge .dl{font-weight:700; color:var(--table-2)}

/* Arrivée : ce qu'on remet aux entraîneurs. */
.arrivee-bloc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e6); align-items:start}
.coches{list-style:none; margin:0; padding:0}
.coches li{display:flex; gap:var(--e3); padding:var(--e3) 0; border-bottom:var(--trait-l) solid var(--trait)}
.coches li::before{content:""; flex:none; width:var(--case); height:var(--case); margin-top:var(--e1); border-radius:50%;
  background:var(--balle); box-shadow:inset 0 calc(-1 * var(--e1)) 0 var(--ombre-balle)}
.bande-cta{background:var(--table); color:var(--blanc); border-radius:var(--r-l); padding:var(--e6);
  display:flex; flex-wrap:wrap; gap:var(--e4); align-items:center; justify-content:space-between}
.bande-cta h2{color:var(--blanc); margin:0}

/* Entrée en scène : un seul mouvement, au chargement. */
@keyframes apparait{from{opacity:0; transform:translateY(var(--e3))} to{opacity:1; transform:none}}

/* =====================================================================
   LE FORMULAIRE EN ÉTAPES (Pattern 3 — Form, assistant)
   ===================================================================== */
.assistant{display:grid; grid-template-columns:minmax(0,1fr) var(--col-panneau); gap:var(--e6); align-items:start}

/* La piste : la ligne blanche de la table, la balle à l'étape en cours. */
.piste{background:var(--table); border-radius:var(--r-l); padding:var(--e5) var(--e5) var(--e4); margin:0 0 var(--e6); color:var(--blanc)}
.piste ol{list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:relative}
.piste ol::before{content:""; position:absolute; left:0; right:0; top:var(--piste-haut); height:var(--trait-g); background:var(--ligne-table)}
.piste li{position:relative; text-align:center; font-size:var(--fs-mini); line-height:1.25; color:var(--sur-table)}
.piste li::before{content:""; pointer-events:none; position:absolute; top:calc(var(--piste-haut) - var(--pastille) / 2 + var(--trait-l)); left:50%;
  width:var(--pastille); height:var(--pastille); transform:translateX(-50%); border-radius:50%; background:var(--table); border:var(--trait-g) solid var(--blanc)}
.piste li.faite{color:var(--blanc)}
.piste li.faite::before{background:var(--blanc)}
.piste li.courante{color:var(--balle); font-weight:700}
.piste li.courante::before{width:var(--pastille-balle); height:var(--pastille-balle); top:calc(var(--piste-haut) - var(--pastille-balle) / 2 + var(--trait-l));
  background:var(--balle); border-color:var(--balle); box-shadow:inset -.25rem -.3rem 0 var(--ombre-balle), 0 0 0 .3rem var(--balle-halo)}
.piste li.sautee{opacity:.55}
.piste li.sautee .lbl::after{content:" — sans objet"; display:block; font-size:var(--fs-mini)}
.piste li.sautee::before{border-style:dashed}
/* Le bouton couvre la pastille ET le libellé : une cible d'au moins 24 px (WCAG 2.5.8). */
.piste button{all:unset; cursor:pointer; display:block; width:100%; text-align:center; box-sizing:border-box; padding:var(--piste-texte) var(--e1) 0}
.piste button[aria-disabled=true]{cursor:default}
.piste button:focus-visible{outline:var(--focus) solid var(--balle); outline-offset:var(--focus); border-radius:var(--e1)}
.piste .etape-txt{display:none; font:700 var(--fs-h3) var(--titre); letter-spacing:var(--lettre-titre); margin-bottom:var(--e3)}

.etape{background:var(--carte); border:var(--trait-l) solid var(--trait); border-radius:var(--r-l); padding:var(--e6); margin:0 0 var(--e5)}
/* La légende d'un fieldset se pose sur sa bordure : on la fait flotter pour
   qu'elle redevienne un titre ordinaire, dans le cadre. */
.etape > .etape-titre{float:left; width:100%; display:flex; align-items:baseline; gap:var(--e3); margin:0 0 var(--e5)}
.etape > .etape-titre + *{clear:both}
.form-tete h1{font-size:var(--fs-h2); margin-bottom:var(--e2)}
.form-tete{margin-bottom:var(--e5)}
.form-tete p{max-width:70ch}
.etape > .etape-titre .no{font:700 var(--fs-lbl) var(--titre); letter-spacing:var(--lettre-large); color:var(--balle-fonce); text-transform:uppercase}
.etape > .etape-titre h2{margin:0}
.etape h3{font-size:var(--fs-chapeau); margin:var(--e5) 0 var(--e3)}
.js .etape{display:none}
.js .etape.active{display:block}
.nav-etapes{display:none}
html:not(.js) .piste{display:none}
.js .nav-etapes{display:flex; gap:var(--e3); justify-content:space-between; align-items:center; margin-top:var(--e6); padding-top:var(--e5); border-top:var(--trait-l) solid var(--trait)}
.nav-etapes #suivant{margin-left:auto}
.js .envoi-sans-js{display:none}

/* Le panneau latéral : la cotisation, toujours sous les yeux. */
.panneau{position:sticky; top:var(--e5); display:grid; gap:var(--e4)}
.panneau .total{background:var(--table); color:var(--blanc); border-radius:var(--r-l); padding:var(--e5)}
.panneau .total-lib{font:700 var(--fs-lbl) var(--titre); letter-spacing:var(--lettre-large); text-transform:uppercase; color:var(--sur-table)}
.panneau .total-val{font:700 var(--fs-total)/1.05 var(--titre); color:var(--blanc); margin:var(--e2) 0; font-variant-numeric:tabular-nums}
.panneau .total-val:empty{display:none}
/* Sur téléphone, le total suit l'adhérent : une barre en bas de l'écran. */
.total-barre{display:none}
.panneau .total-detail{font-size:var(--fs-petit); color:var(--sur-table-2)}
.panneau .rappel{background:var(--carte); border:var(--trait-l) solid var(--trait); border-radius:var(--r-l); padding:var(--e5); font-size:var(--fs-fiche)}
.panneau .rappel h3{font-size:var(--fs-chapeau)}
.panneau .rappel ul{margin:0; padding-left:1.1em}
.recap{display:grid; grid-template-columns:max-content 1fr; gap:var(--e2) var(--e5); margin:0}
.recap dt{color:var(--encre-3)}
.recap dd{margin:0; font-weight:700}
.recap .modifier{font-weight:400; font-size:var(--fs-petit); margin-left:var(--e2)}

/* La page de confirmation : le code, comme un tableau de score. */
.score{background:var(--table); color:var(--blanc); border-radius:var(--r-l); padding:var(--e6); text-align:center}
.score .code{font:700 var(--fs-score)/1 var(--titre); letter-spacing:.08em; color:var(--balle); margin:var(--e3) 0}
.score p{color:var(--sur-table); margin:0}
.deux-voies{display:grid; grid-template-columns:1fr 1fr; gap:var(--e4); margin-top:var(--e5)}

/* =====================================================================
   L'ESPACE CLUB
   ===================================================================== */
.club-barre{background:var(--carte); border:var(--trait-l) solid var(--trait); border-radius:var(--r-l); padding:var(--e4) var(--e5); margin:0 0 var(--e5)}
.club-haut{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e5); align-items:center}
.club-suivi{margin-top:var(--e4); display:flex; flex-direction:column; gap:var(--e3)}
.club-suivi .suivi{display:flex; flex-wrap:wrap; gap:var(--e3) var(--e4); align-items:flex-end}
.club-suivi .suivi label{margin:0; font-weight:400; font-size:var(--fs-fiche)}
.club-suivi .suivi select, .club-suivi .suivi input[type=text]{width:auto; min-height:var(--h-champ-court); padding:var(--e1) var(--e3); font-size:var(--fs-lbl)}
.club-suivi .coche-suivi{display:inline-flex; gap:var(--e2); align-items:center}
.recherche{display:flex; flex-wrap:wrap; gap:var(--e2); margin:var(--e4) 0}
.recherche input[type=text]{flex:1 1 var(--col-recherche); width:auto}
.recherche select{width:auto}

/* Les pastilles de suivi : toujours un mot, jamais la couleur seule. */
.badge{display:inline-block; padding:0 var(--e2); border-radius:var(--r-feuille); font-size:var(--fs-mini); font-weight:700; white-space:nowrap; border:var(--trait-l) solid transparent}
.badge-ok{background:var(--ok-fond); color:var(--ok); border-color:var(--ok)}
.badge-manque{background:var(--danger-fond); color:var(--danger); border-color:var(--danger)}
.badge-info{background:var(--info-fond); color:var(--table-2); border-color:var(--table-2)}
.badge-neutre{color:var(--encre-3); font-weight:400}
details.legende{margin:0 0 var(--e3)}
details.legende summary{cursor:pointer; color:var(--table-2); font-weight:700}
.niveau-declare{border-top:var(--trait-l) solid var(--trait); padding-top:var(--e3)}
.niveau-declare h3{font-size:var(--fs-chapeau)}
.niveau-declare table{max-width:36rem}

/* =====================================================================
   LA FICHE IMPRIMABLE — son apparence papier ne change pas.
   ===================================================================== */
.recap-a4{color:var(--fiche-encre); font-family:var(--fiche-police); font-size:var(--fs-fiche); line-height:1.4}
.recap-a4 a{color:var(--fiche-bleu)}
.recap-a4 .tiny{color:inherit}
.recap-a4 .btn{min-height:var(--h-champ-court); background:var(--blanc); color:var(--fiche-bleu); border:var(--trait-l) solid var(--fiche-bleu); font-family:var(--texte)}
.recap-a4 .btn.primary{background:var(--balle); color:var(--table); border-color:var(--balle)}
.recap-a4 .btn.warn{background:var(--fiche-avert-fond); color:var(--fiche-avert-encre); border-color:var(--fiche-avert-bord)}
.recap-a4 input[type=checkbox], .recap-a4 input[type=radio]{width:auto; height:auto}
.recap-a4 label{font-weight:inherit; font-size:inherit; display:inline; margin:0}
main .wrap:has(.recap-a4){max-width:var(--largeur-fiche)}

/* =====================================================================
   MOUVEMENT ET ÉCRANS — @media n'accepte pas var().
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  .apparait{animation:apparait var(--t-entree) var(--courbe) both}
  .apparait.d1{animation-delay:.08s} /* ds-allow-hardcode — décalage d'entrée */
  .apparait.d2{animation-delay:.16s} /* ds-allow-hardcode */
  .apparait.d3{animation-delay:.24s} /* ds-allow-hardcode */
  .js .etape.active{animation:apparait var(--t-etape) var(--courbe) both}
  .piste li::before{transition:all var(--t-moyen) var(--courbe)}
  .balle-tombe{animation:chute var(--t-chute) cubic-bezier(.5,0,.75,0) .6s 1 forwards} /* ds-allow-hardcode — courbe de chute, délai d'entrée */
  .balle-tombe.d2{animation-delay:.85s} /* ds-allow-hardcode */
  .balle-tombe.d3{animation-delay:1.1s} /* ds-allow-hardcode */
  .balle-tombe.d4{animation-delay:1.35s} /* ds-allow-hardcode */
}
@keyframes chute{0%{top:0; opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:calc(100% + var(--fleche-h)); opacity:0}}
@media (prefers-reduced-motion:reduce){
  .balle-tombe{display:none}
  .vierge .feuille{transition:none}
  .vierge:hover .feuille{transform:none}
}
@media (max-width:980px){ /* ds-allow-hardcode — point de rupture */
  .pourquoi{grid-template-columns:1fr}
  .assistant{grid-template-columns:1fr}
  .panneau{position:static}
  .panneau .total{display:none}
  .total-barre{display:flex; justify-content:space-between; align-items:baseline; gap:var(--e3); position:fixed; z-index:10;
    left:0; right:0; bottom:0; background:var(--table); color:var(--blanc); padding:var(--e3) var(--e4);
    border-top:var(--barre-g) solid var(--table-2); font-size:var(--fs-petit)}
  .total-barre b{font:700 var(--fs-h3) var(--titre); font-variant-numeric:tabular-nums}
  body.avec-total footer.site{padding-bottom:calc(var(--e6) + var(--e8))}
}
@media (max-width:900px){ /* ds-allow-hardcode — point de rupture */
  .fleche-lbl{white-space:normal; width:max-content; max-width:6.5rem; line-height:1.2}
}
@media (max-width:860px){ /* ds-allow-hardcode — point de rupture */
  .vierges{grid-template-columns:1fr 1fr}
  .arrivee-bloc{grid-template-columns:1fr}
}
@media (max-width:760px){ /* ds-allow-hardcode — point de rupture */
  .piste .etape-txt{display:block}
  .piste .lbl{position:absolute; width:var(--trait-l); height:var(--trait-l); overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .piste button{padding-top:var(--e6)}
  .deux-voies{grid-template-columns:1fr}
}
@media (max-width:420px){ /* ds-allow-hardcode — point de rupture */
  .avant-apres{flex-direction:column; align-items:stretch}
  .mini-fiche{max-width:none}
  .mini-fleche{transform:rotate(90deg); text-align:center}
  :root{--mini-lbl:3.5rem}
}
@media (max-width:640px){ /* ds-allow-hardcode — point de rupture */
  .wrap{padding:0 var(--e4)}
  header.site .marque b{font-size:var(--fs-chapeau)}
  header.site .saison{font-size:var(--fs-petit); white-space:nowrap}
  .ligne2, .ligne3{grid-template-columns:1fr}
  .etape{padding:var(--e5) var(--e4)}
  header.site .marque b{font-size:var(--fs-chapeau)}
  header.site .saison .long{display:none}
  header.site .saison .court{display:inline}
  .parcours{padding:var(--e4) var(--e3)}
  .parcours::before{display:none}
  .voies{grid-template-columns:1fr; gap:0; padding:var(--e2) var(--e2) 0}
  .voie + .voie::before{content:"ou"; display:block; text-align:center; font:700 var(--fs-chapeau) var(--titre);
    letter-spacing:var(--lettre-large); text-transform:uppercase; color:var(--sur-table); padding:var(--e3) 0}
  .voie-ligne::after{content:"ou"; display:block; text-align:center; font:700 var(--fs-chapeau) var(--titre);
    letter-spacing:var(--lettre-large); text-transform:uppercase; color:var(--sur-table); padding:var(--e3) 0 0}
  .voie-ligne + .voie::before{content:none}
  .voie .fleche.fin, .branche .fleche.fin{display:none}
  .voie:last-child .fleche.fin{display:block}
  .branches{gap:var(--e3)}
  .branche .fleche{height:calc(var(--fleche-h) * 1.6)}
  .fleche-lbl{left:50%; top:40%; transform:translate(-50%,-50%); background:var(--table); padding:0 var(--e1); z-index:1}
  .balle-tombe{display:none}
  .case.arrivee{margin:0 var(--e2)}
  .ligne-q{flex-direction:column; align-items:flex-start}
  .vierges{grid-template-columns:1fr; gap:var(--e3)}
  .vierge{flex-direction:row; align-items:center; gap:var(--e4); background:var(--carte); border:var(--trait-l) solid var(--trait); border-radius:var(--r); padding:var(--e2)}
  .vierge .feuille{flex:none; width:var(--vignette); padding:var(--e1); box-shadow:none}
  .vierge .titre{font-size:var(--fs-chapeau)}
  .avant-apres{gap:var(--e2)}
}

/* À L'IMPRESSION, IL NE RESTE QUE LE DOCUMENT. */
@media print{
  :root{color-scheme:light}
  html, body{background:var(--blanc) !important; color:var(--fiche-encre); font-size:12pt}
  header.site, footer.site, .no-print{display:none !important}
  main{padding:0}
  .wrap{max-width:none; padding:0}
}