/* ================================================================
   BOKONZI ATHLÉ — feuille de style partagée
   index.html (atelier) · blog.html · generateur.html
   ================================================================ */
:root{
  --bg:#0a0d12; --bg-2:#0f141c; --card:#131a24; --card-2:#182130; --line:#232e3e;
  --txt:#e8edf4; --txt-2:#93a3b8; --txt-3:#5f7086;
  --acc:#c8ff3d; --acc-2:#38e8c8; --warn:#ffb03a; --red:#ff6b6b;
  /* LE ROUGE DE REPÉRAGE : « ce que je suis en train de régler ». Il double
     `REPERE` dans js/reglages.js, que le plan 2D et les vraies lumières du stade
     lisent — une feuille de style ne peut pas importer un module. Deux
     définitions, mais SURVEILLÉES : `banc-lumiere.mjs` refuse qu'elles divergent,
     ce qui vaut mieux qu'une seule qu'on croit unique. */
  --repere:#ff3b30;
  --radius:14px; --mono:ui-monospace,"SF Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.15;margin:0}
a{color:var(--acc-2);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------- navigation ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(10,13,18,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:8px;height:58px;overflow-x:auto}
.brand{font-weight:800;letter-spacing:-.02em;white-space:nowrap;font-size:15px;margin-right:16px}
.brand span{color:var(--acc)}
nav a{color:var(--txt-2);font-size:13.5px;white-space:nowrap;font-weight:500;padding:6px 11px;border-radius:8px}
nav a:hover{color:var(--txt);background:var(--card)}
nav a.on{color:var(--acc);background:rgba(200,255,61,.10)}
nav a.cta{color:var(--acc);border:1px solid rgba(200,255,61,.35);margin-left:auto}

/* ---------- en-tête de page ---------- */
header{padding:46px 0 30px}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acc);margin-bottom:12px}
h1{font-size:clamp(28px,4.2vw,42px);letter-spacing:-.03em;font-weight:800;max-width:20ch}
.lede{margin-top:14px;font-size:16px;color:var(--txt-2);max-width:68ch}

/* ---------- sections ---------- */
section{padding:40px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.sec-num{font-family:var(--mono);font-size:12px;color:var(--acc);letter-spacing:.1em}
h2{font-size:clamp(21px,2.6vw,27px);letter-spacing:-.02em;font-weight:750}
.sec-sub{color:var(--txt-2);max-width:74ch;margin:8px 0 24px;font-size:15px}

/* ---------- formulaires ---------- */
.field{display:grid;gap:6px;margin-bottom:12px}
label{font-size:11.5px;color:var(--txt-3);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
input,select,textarea{background:var(--bg-2);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
textarea{line-height:1.6;resize:vertical}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
button{background:var(--acc);color:#0a0d12;border:none;border-radius:10px;padding:10px 16px;
  font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit}
button.ghost{background:transparent;color:var(--txt-2);border:1px solid var(--line)}
button.mini{padding:6px 11px;font-size:12px}
button.danger{background:transparent;color:var(--red);border:1px solid rgba(255,107,107,.35)}
button:hover{filter:brightness(1.12)}
button:disabled{opacity:.45;cursor:default}
.btnrow{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.note{font-size:13px;color:var(--txt-3);border-left:2px solid var(--acc);padding-left:12px}

/* ---------- blocs ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.chip{display:inline-block;font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:5px;
  border:1px solid var(--line);color:var(--txt-3)}
.chip.publie{border-color:var(--acc);color:var(--acc)}
.chip.tourne{border-color:var(--acc-2);color:var(--acc-2)}
.chip.scripte{border-color:var(--warn);color:var(--warn)}

/* état vide */
.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:38px 26px;text-align:center;
  background:var(--bg-2)}
.empty h3{font-size:17px;margin-bottom:8px}
.empty p{color:var(--txt-2);font-size:14.5px;max-width:56ch;margin:0 auto 18px}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);
  background:var(--acc);color:#0a0d12;font-weight:700;font-size:13.5px;padding:11px 20px;
  border-radius:10px;transition:transform .25s;z-index:99}
.toast.on{transform:translateX(-50%) translateY(0)}

/* ================================================================
   ÉDITEUR DE COUREURS — studio 3D + panneau (editeur.js)
   ================================================================ */
/* Trois colonnes : la vue, la régie caméra, les réglages. La régie a sa
   colonne parce qu'on y revient sans arrêt — on règle un trait, on tourne, on
   rerègle — et qu'elle n'a rien à faire dans le menu des réglages : elle ne
   change pas le coureur, elle change le point de vue. */
/* La colonne des réglages s'élargit avec l'écran plutôt que de rester figée à
   400 px : c'est elle qui porte les curseurs, les nuanciers et les grilles de
   formes, et c'est elle qu'on lit. Bornée quand même — au-delà de 520 px les
   libellés flottent au bout de lignes vides. */
.editor{display:grid;grid-template-columns:1fr 172px minmax(400px, 27vw);
  height:calc(100vh - 58px)}
@media(min-width:1700px){ .editor{grid-template-columns:1fr 188px minmax(440px, 520px)} }
.ed-view{position:relative;overflow:hidden;background:#0b0f15}
.ed-canvas{position:absolute;inset:0}
.ed-canvas canvas{display:block}
.ed-tabs{position:absolute;top:14px;left:14px;display:flex;gap:6px;z-index:2;flex-wrap:wrap}
.ed-tabs button{display:flex;align-items:center;gap:7px;padding:7px 11px;font-size:12px;
  font-family:var(--mono);background:rgba(8,11,16,.82);border:1px solid var(--line);
  color:var(--txt-2);border-radius:9px;font-weight:500;backdrop-filter:blur(6px)}
.ed-tabs button.on{border-color:var(--acc);color:var(--acc)}
.ed-tabs i{width:10px;height:10px;border-radius:3px;display:block}
/* C0 n'est pas un coureur : il commande les six. Détaché du groupe par une
   marge, et sa pastille est rayée — il n'a pas de maillot. */
.ed-tabs .c0{margin-right:10px;color:var(--acc)}
.ed-tabs .c0 i{background:repeating-linear-gradient(45deg,
  rgba(200,255,61,.85) 0 3px, rgba(200,255,61,.25) 3px 6px)}
.ed-tabs .c0.on{border-color:var(--acc);background:rgba(200,255,61,.12)}
/* LA RÉGIE CAMÉRA, sa colonne à elle */
.ed-cam{overflow-y:auto;background:var(--bg-2);border-left:1px solid var(--line);
  padding:14px 12px 40px}
.ed-cam-t{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:12px;
  display:flex;align-items:center;gap:7px}
.ed-cam-t::before{content:'🎥'}
.ed-cam-g{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-3);margin:14px 0 6px}
.ed-cam-g:first-of-type{margin-top:0}
/* les cadrages en pile : ce sont des destinations, pas des variantes */
.ed-cam-col{display:grid;gap:5px}
/* le tour du modèle en damier : six positions autour de lui, deux par ligne */
.ed-cam-gr{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.ed-cam button{width:100%;justify-content:center}
.ed-cam button.on{border-color:var(--acc);color:var(--acc);background:rgba(200,255,61,.10)}
.ed-cam input[type=range]{width:100%;padding:0;height:20px;border:none;
  background:none;accent-color:var(--acc)}
.ed-cam .ed-zv{font-family:var(--mono);font-size:11.5px;color:var(--acc);
  text-align:right;margin-top:2px}
.ed-cam .check{margin-bottom:5px;font-size:12.5px}
/* Le choix de définition de la photo. La colonne n'avait pas de menu
   déroulant : sans ces règles il arrive avec le gris système du navigateur,
   seul élément clair de toute la page. */
/* Les menus déroulants des panneaux sombres — régie du Stade 3D comprise.
   Sans règle, le navigateur les rend en gris système : le seul élément clair
   d'une page noire, et on ne voit plus que lui. */
.pan select{width:100%;background:var(--card);color:var(--txt);
  border:1px solid var(--line);border-radius:8px;padding:5px 7px;
  font-size:12.5px;font-family:inherit}
.pan select:focus{outline:none;border-color:var(--acc)}
.ed-cam select{width:100%;margin-bottom:6px;background:var(--card);
  color:var(--txt);border:1px solid var(--line);border-radius:8px;
  padding:6px 8px;font-size:12.5px;font-family:inherit}
.ed-cam select:focus{outline:none;border-color:var(--acc)}
/* L'aide passe à GAUCHE : le coin bas-droit revient à la barre flottante, qui
   est un outil et pas un texte à lire. La largeur est bornée pour qu'elle ne
   glisse jamais dessous sur une vue étroite. */
.ed-hint{position:absolute;bottom:14px;left:14px;z-index:2;font-family:var(--mono);font-size:11px;
  color:var(--txt-3);background:rgba(8,11,16,.8);border:1px solid var(--line);border-radius:9px;padding:7px 11px;
  max-width:calc(100% - 210px)}
/* L'étiquette qui suit le curseur quand il survole une partie réglable.
   Elle ne doit jamais intercepter le pointeur : elle est posée sous la
   souris, et le survol s'éteindrait dès qu'elle apparaîtrait. */
.ed-pick{position:absolute;z-index:3;pointer-events:none;display:none;
  transform:translate(14px, 14px);font-family:var(--mono);font-size:11.5px;
  color:var(--acc);background:rgba(8,11,16,.92);border:1px solid rgba(200,255,61,.5);
  border-radius:8px;padding:5px 9px;white-space:nowrap}
.ed-pick.on{display:block}

/* ================================================================
   LES PAGES D'ATELIER 3D — Tribunes et Lumière
   Même page, deux sujets : une vue 3D à gauche, une colonne de réglages à
   droite. Les deux <style> portaient les 27 mêmes lignes ; on ne les
   distinguait qu'à leurs six lignes propres, et il fallait comparer pour le
   savoir. Ce qui reste dans les pages est ce qui leur appartient vraiment.
   ================================================================ */
.tri{display:grid;grid-template-columns:1fr 348px;height:calc(100vh - 58px);
  border-top:1px solid var(--line)}
.tri-vue{position:relative;background:#070a0e;overflow:hidden}
.tri-vue canvas{display:block;width:100%;height:100%}
.tri-hint{position:absolute;left:14px;bottom:12px;font-size:12px;color:var(--txt-3);
  background:rgba(8,11,16,.7);padding:6px 10px;border-radius:9px;pointer-events:none}
.tri-cams{position:absolute;left:14px;top:14px;display:flex;gap:5px;flex-wrap:wrap;
  background:rgba(8,11,16,.78);padding:8px;border:1px solid var(--line);border-radius:11px}
.tri-side{overflow-y:auto;border-left:1px solid var(--line);background:var(--bg-2);
  padding:18px 18px 60px}
.tri-side h2{font-size:19px;letter-spacing:-.02em;margin-bottom:2px}
@media(max-width:900px){
  .tri{grid-template-columns:1fr;height:auto}
  .tri-vue{height:56vh}
  .tri-side{border-left:none;border-top:1px solid var(--line)}
}

/* ---- LA LISTE DE CHOIX ILLUSTRÉS ----
   Un choix qu'on fait des YEUX : chaque ligne porte une pastille de la vraie
   couleur qu'elle donne, et souvent une phrase qui dit à quoi elle sert. Les
   moments de la journée, les types de tribune, les agencements de projecteurs
   — c'est le même objet, et il était écrit trois fois sous trois noms
   (`.mom`, `.tri-mom`, `.tri-types`). Les trois se ressemblaient à deux pixels
   près, ce qui est la pire des situations : ni pareil, ni exprès. */
.choix{display:grid;gap:6px;margin:6px 0 4px}
.choix button{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;
  font-size:13.5px;font-weight:700;background:var(--bg);border:1px solid var(--line);
  color:var(--txt-2);border-radius:11px}
.choix button.on{border-color:var(--acc);color:var(--acc);background:rgba(200,255,61,.12)}
/* la phrase sous le nom : elle explique, elle ne crie pas */
.choix button i{display:block;font-style:normal;font-weight:500;font-size:12px;
  color:var(--txt-3);margin-top:3px;line-height:1.4}
.choix button.on i{color:var(--txt-2)}
.choix .pastille{width:26px;height:26px;border-radius:8px;flex:0 0 26px;
  border:1px solid rgba(255,255,255,.12)}
/* Serré : la même liste quand elle n'a pas de phrase à porter. On la parcourt
   du regard au lieu de la lire, et six lignes doivent tenir sans faire défiler
   le panneau. */
.choix.serre{gap:5px;margin:4px 0 10px}
.choix.serre button{padding:8px 10px;font-size:13px;border-radius:10px;gap:9px}
.choix.serre .pastille{width:22px;height:22px;border-radius:7px;flex:0 0 22px;
  border-color:rgba(255,255,255,.14)}

/* ================================================================
   LES PROFILS DE SPORTIFS ET LA MÉMOIRE — le tiroir
   Posé PAR-DESSUS la page, pas inséré dedans : l'éditeur tient dans la hauteur
   de l'écran au pixel près, et lui prendre quarante pixels pour un panneau
   qu'on ouvre deux fois par séance rognerait la vue en permanence. Un tiroir
   se referme.
   ================================================================ */
.tiroir{position:fixed;z-index:20;top:64px;right:16px;width:min(380px, calc(100vw - 32px));
  max-height:calc(100vh - 96px);overflow-y:auto;display:none;
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.tiroir.on{display:block}
.tiroir h3{font-size:15px;margin:0 0 2px}
.tiroir .ed-lbl:first-of-type{margin-top:0}
.tiroir-x{position:absolute;top:12px;right:12px;width:26px;height:26px;padding:0;
  display:grid;place-items:center;font-size:14px;line-height:1}
/* le voile : cliquer à côté referme, et on ne clique pas dans la 3D par erreur */
.tiroir-voile{position:fixed;inset:0;z-index:19;display:none;background:rgba(4,6,9,.45)}
.tiroir-voile.on{display:block}

/* ---- la barre « nommer et enregistrer » ---- */
.pr-ligne{display:flex;gap:6px;margin:2px 0 6px}
.pr-ligne input{flex:1;min-width:0;background:var(--card);color:var(--txt);
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;font:inherit;font-size:13px}
.pr-ligne input:focus{outline:none;border-color:var(--acc)}
/* le mot du panneau : ce qui vient de se passer. Sans lui, on clique
   « Enregistrer » et rien ne bouge à l'écran — le profil est pourtant rangé. */
.pr-souci{color:var(--warn)}

/* ---- la liste des profils ---- */
.pr-liste{display:grid;gap:5px;margin-top:6px}
.pr-item{display:flex;align-items:stretch;gap:5px}
/* Le NOM est le bouton de chargement, sur toute la largeur : recharger un
   profil est le geste qu'on fait le plus, il ne se met pas derrière une icône. */
.pr-nom{flex:1;min-width:0;text-align:left;padding:7px 10px;border-radius:9px;
  background:var(--bg);border:1px solid var(--line);color:var(--txt-2)}
.pr-nom:hover{border-color:var(--acc);color:var(--acc)}
.pr-nom b{display:block;font-size:13px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-nom i{display:block;font-style:normal;font-size:11px;font-family:var(--mono);
  color:var(--txt-3);margin-top:2px}
.pr-nom:hover i{color:var(--txt-2)}
.pr-outils{display:flex;gap:4px}
.pr-outils button{width:30px;padding:0;justify-content:center}

/* ---- LA CASE À COCHER ----
   Elle vivait dans le <style> du Stade 3D. L'éditeur, `photo.js` et Tribunes
   s'en servaient sans l'avoir : leurs cases sortaient sans mise en forme,
   l'étiquette passée à la ligne sous la case. Un style posé dans une page et
   utilisé par une autre, c'est un bug qui attend son tour. */
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--txt-2);
  margin-bottom:9px;cursor:pointer}
.check input{width:auto;accent-color:var(--acc)}

/* ---- L'AVERTISSEMENT « ouvre la page via XAMPP » ----
   Quatre pages chargent des modules JS, que le navigateur refuse en file://.
   Les quatre portaient le même bloc. Le Stade le pose DANS sa vue, d'où sa
   seule différence — c'est lui qui la déclare, pas les trois autres. */
.warn{position:fixed;inset:58px 0 0;display:grid;place-content:center;text-align:center;
  padding:40px;background:var(--bg);z-index:9}
.warn h2{margin-bottom:12px}
.warn p{color:var(--txt-2);max-width:52ch}

/* ================================================================
   LE PANNEAU DES POSTES DE PROJECTEUR
   Habillage du panneau monté par `PanneauPostes` (js/postes.js). Il vivait en
   double, dans le <style> de lumiere.html et dans celui de stade.html : deux
   feuilles pour un seul panneau, qui finissaient par ne plus se ressembler.
   ================================================================ */
/* le plan du stade, pour poser les projecteurs à la main */
.plan{width:100%;height:190px;display:block;background:#0b0e13;border-radius:11px;
  border:1px solid var(--line);touch-action:none;cursor:crosshair;margin:4px 0 6px}
/* la liste des postes : un bouton par pylône, numéroté comme sur le plan */
.postes{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 8px}
.postes button{display:flex;align-items:center;gap:6px;padding:5px 9px;font-size:11.5px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--txt-2);border-radius:99px}
/* ⚠ Le poste choisi est ROUGE dans la liste aussi. Rouge sur le plan et vert
   dans la liste, ce sont deux repères pour une seule chose : on ne sait plus
   s'ils parlent du même poste. La couleur double celle de REPERE dans
   js/reglages.js — une feuille de style ne peut pas importer un module — et
   banc-lumiere.mjs vérifie que les deux n'ont pas divergé. */
.postes button.on{border-color:var(--repere);color:var(--repere);
  background:rgba(255,59,48,.14)}
.postes button.on b{background:var(--repere);color:#fff}
/* Un poste dont la puissance s'écarte du niveau commun : il affiche son
   pourcentage au lieu de sa hauteur, et son numéro passe en ambre. Sans ce
   repère, on ne voit pas d'un coup d'œil lequel des huit est dosé. */
.postes button.dose b{background:var(--warn);color:#0b0e13}
.postes button b{font-size:10.5px;background:#ffe9b0;color:#0b0e13;border-radius:99px;
  width:15px;height:15px;display:grid;place-content:center;font-weight:800}
.postes button.on b{background:var(--acc)}
/* Un poste dont la puissance est coupée. Le pylône reste dans l'image, mais il
   n'éclaire rien : il doit se lire ici, sinon on cherche longtemps pourquoi un
   côté du stade est sombre. */
.postes button.off{color:var(--txt-3);border-style:dashed;opacity:.75}
.postes button.off b{background:#3a4553;color:var(--txt-3)}
.plan-aide{font-size:11.5px;color:var(--txt-3);line-height:1.5;margin:0 0 8px}

/* ================================================================
   LA BARRE FLOTTANTE : format de sortie et déclencheur
   Posée sur la vue 3D, en bas à droite. Partagée par le Stade et l'éditeur —
   c'est le même geste et le même bandeau (js/photo.js), il n'a donc qu'un
   seul habillage. Dans le Stade c'est le seul coin libre : le chrono tient le
   haut à gauche, le badge d'enregistrement le haut à droite, les mesures le
   bas à gauche.
   ================================================================ */
.flot{position:absolute;bottom:16px;right:16px;z-index:3;display:flex;gap:8px;
  align-items:center}
.flot-g{display:flex;background:rgba(8,11,16,.86);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;backdrop-filter:blur(8px)}
.flot-g button{width:38px;height:34px;border:none;background:none;color:var(--txt-3);
  font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;
  border-right:1px solid var(--line)}
.flot-g button:last-child{border-right:none}
.flot-g button:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.flot-g button.on{color:var(--acc);background:rgba(200,255,61,.12)}
.flot-ph{width:42px;height:36px;border:1px solid var(--line);border-radius:10px;
  background:rgba(8,11,16,.86);backdrop-filter:blur(8px);font-size:16px;line-height:1;
  cursor:pointer;display:grid;place-items:center}
.flot-ph:hover{border-color:var(--acc);background:rgba(200,255,61,.10)}
/* Le déclenchement, visible. Sans cet éclair on ne sait pas si la photo est
   partie : le fichier tombe dans le dossier de téléchargement, hors de la
   page, et rien ne bouge à l'écran. */
.flot-ph.flash{animation:flash .45s ease-out 1}
@keyframes flash{0%{background:rgba(200,255,61,.85);border-color:var(--acc)}
                 100%{background:rgba(8,11,16,.86)}}
@media(max-width:900px){ .flot{bottom:10px;right:10px} }

/* La carte 2D des parties réglables, sous le nom du coureur. Toujours
   visible : elle montre ce qui se règle sans qu'on ait à tourner le modèle
   pour aller cliquer dessus. */
.ed-map{margin:8px 0 10px;background:rgba(8,11,16,.45);border:1px solid var(--line);
  border-radius:10px;padding:8px 8px 4px}
.ed-map svg{display:block;width:100%;height:auto}
.ed-map [data-zone]{cursor:pointer}
.ed-map [data-zone] *{stroke:rgba(10,13,18,.8);stroke-width:1.1;
  vector-effect:non-scaling-stroke;transition:opacity .12s}
.ed-map [data-zone]:hover *{opacity:.72}
/* l'onglet ouvert s'allume : la carte sert aussi de repère */
.ed-map [data-zone].on *{stroke:var(--txt);stroke-width:2.4}
.ed-map-lb{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3);text-align:center;margin-top:4px}

.ed-side{overflow-y:auto;border-left:1px solid var(--line);background:var(--bg-2);padding:18px 18px 60px}
.ed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.ed-head h2{font-size:19px;letter-spacing:-.02em}
.ed-sub{font-size:12.5px;color:var(--txt-3);margin:0 0 6px}
.ed-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-3);margin:18px 0 8px}

/* onglets de section, collés en haut de la colonne */
/* LES DEUX FAMILLES D'ONGLETS.
   Régler une apparence et régler un mouvement sont deux séances de travail :
   l'une à l'arrêt et en gros plan, l'autre en regardant courir, cadré en
   pied. Dix onglets dans une seule rangée mélangeaient les deux, se
   repliaient sur trois lignes, et on n'y trouvait plus rien.
   La famille est collée en haut de la colonne : c'est le repère qui dit
   toujours de quel côté du métier on se trouve. */
.ed-fam{display:grid;grid-template-columns:1fr 1fr;gap:6px;position:sticky;top:-18px;z-index:4;
  background:var(--bg-2);padding:10px 0 0}
.ed-fam button{padding:9px 10px;font-size:13px;font-weight:700;background:var(--bg);
  border:1px solid var(--line);color:var(--txt-2);border-radius:10px}
.ed-fam button.on{border-color:var(--acc);color:var(--acc);background:rgba(200,255,61,.12)}

.ed-secs{display:flex;gap:5px;flex-wrap:wrap;position:sticky;top:28px;z-index:3;
  background:var(--bg-2);padding:8px 0 9px;margin:0;border-bottom:1px solid var(--line)}
.ed-secs button{padding:7px 12px;font-size:12.5px;font-weight:600;background:transparent;
  border:1px solid var(--line);color:var(--txt-2);border-radius:9px}
.ed-secs button.on{border-color:var(--acc);color:var(--acc);background:rgba(200,255,61,.10)}

.swrow{display:grid;grid-template-columns:repeat(10,1fr) 30px;gap:4px;align-items:center}
.swrow.n6{grid-template-columns:repeat(6,1fr) 30px}
.swrow .sw{height:21px;border-radius:6px;border:1px solid rgba(255,255,255,.14);cursor:pointer;
  padding:0;background-clip:padding-box}
.swrow .sw.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.swrow input[type=color]{width:30px;height:23px;padding:0;border:1px solid var(--line);
  border-radius:6px;background:none;cursor:pointer}
.swrow input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.swrow input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}
/* Le choix de couleur libre, nommé et large — celui du nuancier ressemblait
   à une pastille de plus au bout d'une file de huit, et personne ne le
   trouvait. */
.ed-libre{display:grid;grid-template-columns:1fr 52px 78px;gap:10px;align-items:center;
  margin:7px 0 4px}
.ed-libre>span:first-child{font-size:12.5px;color:var(--txt-2)}
.ed-libre input[type=color]{width:52px;height:26px;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:7px;background:none}
.ed-libre input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.ed-libre input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}
.ed-libre .v{font-family:var(--mono);font-size:11.5px;color:var(--acc);text-align:right}

.pill{display:flex;flex-wrap:wrap;gap:6px}
.pill button{padding:6px 10px;font-size:12px;font-weight:500;background:var(--card);
  border:1px solid var(--line);color:var(--txt-2);border-radius:8px}
.pill button.on{border-color:var(--acc);color:var(--acc);background:rgba(200,255,61,.09)}

/* Rangée des familles, au-dessus des formes : plus discrète que les formes
   elles-mêmes, sinon on ne sait plus laquelle des deux rangées porte le choix.
   Le point signale la famille où se trouve la forme active, même en visitant
   une autre famille. */
.pill.fam{margin-bottom:7px}
.pill.fam button{padding:4px 9px;font-size:11px;border-radius:99px;background:transparent;
  color:var(--txt-3)}
.pill.fam button.on{border-color:var(--acc);color:var(--acc);background:rgba(200,255,61,.06)}
.pill.fam button.ici::after{content:' •';color:var(--acc)}

.sl{display:grid;grid-template-columns:74px 1fr 60px;gap:10px;align-items:center;margin-bottom:7px}
.sl span:first-child{font-size:12.5px;color:var(--txt-2)}
.sl input{padding:0;height:20px;border:none;background:none;accent-color:var(--acc);width:100%}
.sl .v{font-family:var(--mono);font-size:12px;color:var(--acc);text-align:right}
/* Le curseur DÉSIGNÉ par un clic sur le modèle. L'onglet Muscles en montre
   huit : sans ce repère, on clique une cuisse et on cherche lequel des huit
   correspond à ce qu'on vient de désigner. L'animation s'éteint toute seule —
   c'est un coup de projecteur, pas un état. */
.sl.vise{background:rgba(200,255,61,.10);border-radius:8px;
  box-shadow:0 0 0 1px rgba(200,255,61,.35);padding:3px 6px;margin:-3px -6px 4px;
  animation:vise 1.6s ease-out 1 forwards}
.sl.vise span:first-child{color:var(--acc)}
@keyframes vise{ from{background:rgba(200,255,61,.24)} to{background:transparent;
  box-shadow:0 0 0 1px transparent} }

/* En dessous de 1200 px la régie repasse en bandeau sous la vue : trois
   colonnes ne tiennent plus, et c'est la vue qui doit garder la place. */
@media(max-width:1200px){
  .editor{grid-template-columns:1fr 380px;grid-template-rows:1fr auto}
  .ed-view{grid-row:1}
  .ed-side{grid-row:1/3;grid-column:2}
  .ed-cam{grid-row:2;grid-column:1;border-left:none;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px}
  .ed-cam-t{margin:0 6px 0 0}
  .ed-cam-g{margin:0 2px}
  .ed-cam-col,.ed-cam-gr{display:flex;gap:5px;flex-wrap:wrap}
  .ed-cam button{width:auto}
  .ed-cam input[type=range]{width:96px}
  .ed-cam .check{margin-bottom:0}
}
@media(max-width:900px){
  .editor{grid-template-columns:1fr;grid-template-rows:52vh auto 1fr;height:auto}
  .ed-side{grid-row:3;grid-column:1}
  .ed-cam{grid-row:2;grid-column:1}
}

footer{padding:40px 0 70px;color:var(--txt-3);font-size:13px;border-top:1px solid var(--line);margin-top:40px}

@media(max-width:900px){
  .g3,.r2,.r3{grid-template-columns:1fr}
}

/* ---- LE BANDEAU D'UNE COURSE REÇUE (js/course.js) -------------------------
   Il est posé PAR le module, donc sa mise en forme est ici et pas dans un
   <style> de page — c'est la leçon de `.check` : une classe définie dans une
   page et utilisée par un module sort sans mise en forme partout ailleurs.

   Fixé en haut, au-dessus de la vue : le plateau vient d'un autre site, et
   c'est la première chose à savoir en ouvrant le stade. Il se ferme, il ne se
   masque pas tout seul — on doit pouvoir relire qui court dans quel couloir
   pendant qu'on regarde la course. */
.course-recue{
  position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:60;
  max-width:min(94vw,980px); display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 14px; padding:10px 40px 10px 16px; border-radius:10px;
  background:rgba(12,18,28,.94); border:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.45); font-size:13px; color:var(--txt);
  backdrop-filter:blur(6px);
}
.course-recue>b{font-size:14px}
.course-recue .cr-src{color:var(--txt-3); font-size:11.5px}
.course-recue .cr-p{display:flex; flex-wrap:wrap; gap:6px; width:100%}
/* Un couloir : le numéro, le nom, le chrono. `tabular-nums` pour que les
   chronos s'alignent — une colonne de temps qui danse ne se compare pas. */
.course-recue .cr-l{
  display:inline-flex; align-items:center; gap:7px; padding:3px 9px;
  border-radius:7px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); font-size:12px;
}
.course-recue .cr-l b{color:var(--txt-3); font-size:11px}
.course-recue .cr-l i{font-style:normal; color:#4fd67e; font-weight:700;
  font-variant-numeric:tabular-nums}
/* Ce qui a été laissé dehors se dit en entier, sur sa propre ligne : tronqué,
   l'avertissement le plus utile serait le premier à disparaître. */
.course-recue .cr-warn{width:100%; color:#ffd23a; font-size:11.5px; line-height:1.5}
.course-recue .cr-x{
  position:absolute; top:6px; right:8px; width:24px; height:24px; padding:0;
  border:none; background:none; color:var(--txt-3); font-size:19px;
  line-height:1; cursor:pointer;
}
.course-recue .cr-x:hover{color:var(--txt)}