@import "./polices/polices.css";

/* =============================================================================
   Feuille commune · outil de comptage FBMMA-DA · direction « Combat »
   Socle des huit écrans. Portée de « 00 Systeme de design.dc.html ».

   Ce que cette feuille empêche, en une phrase : qu'un officiel se trompe de
   geste, de combat ou de coin parce que l'écran était joli plutôt que clair.
   Chaque bloc ci-dessous dit ce qu'il empêche, pas ce qu'il fait.

   Trois interdits qui traversent tout le fichier :
     · aucune opacité comme signal (un élément fermé s'assombrit, porte une
       forme, et dit pourquoi) ;
     · aucun identifiant technique à l'écran (les articles du Code sportif,
       eux, restent : ils sont opposables) ;
     · aucune @media qui déplace une commande (la mémoire spatiale de la
       formation vaut le jour J) : ce fichier n'en contient aucune.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. JETONS
   Empêche la valeur en dur : une couleur ou une taille écrite deux fois finit
   par diverger, et deux verts différents sur deux écrans se lisent comme deux
   états différents.
   -------------------------------------------------------------------------- */

:root {
  /* Fonds. Du plus profond au plus haut. */
  --profond:            #070D18;   /* fond de scène, admin plein écran */
  --octogone:           #0B1220;   /* fond de page */
  --surface:            #131C2E;   /* cartes, boutons, panneaux */
  --surface-haute:      #182338;   /* blocs neutres, champ vide */
  --surface-pressee:    #2A3550;   /* enfoncé, tiret de code, temps arrêté */
  --marine:             #15294A;   /* barre de tête, bandeau de round */
  --trait:              #3A4860;   /* filets, contour d'un geste fermé */

  /* Encres. */
  --os:                 #F4F1EA;   /* encre principale, 17 : 1 sur octogone */
  --os-douce:           #9AA6B8;   /* mention secondaire, 7,3 : 1 */
  --os-claire:          #C7D0DE;   /* mention sur marine ou sur coin plein */
  --sur-couleur:        #ffffff;   /* encre sur aplat de coin saturé */

  /* Coin rouge. Le rouge de marque n'est jamais une encre sur fond sombre. */
  --rouge:              #D81E27;
  --rouge-encre:        #FF6D74;   /* texte rouge lisible sur sombre */
  --rouge-fond:         #3A1216;

  /* Coin bleu. Distinct du marine d'autorité, jamais confondu avec lui. */
  --bleu:               #10399b;
  --bleu-encre:         #8FB0FF;   /* texte bleu lisible sur sombre */
  --bleu-fond:          #101B3A;
  --bleu-claire:        #C9D6FF;   /* mention sur aplat bleu */

  /* États. Ni rouge ni bleu : une couleur d'état ne vole pas un coin. */
  --vert:               #0A8A43;   /* confirmé, reçu */
  --vert-encre:         #4BD07F;
  --vert-fond:          #0F2A1A;
  --jaune:              #FBD20A;   /* attente, file, régime papier */
  --jaune-encre:        #FBD20A;
  --jaune-fond:         #2E2A10;
  --jaune-sourd:        #B89A08;   /* aplat jaune fermé, lisible en encre sombre */
  --alerte-fond:        #F4F1EA;   /* alerte : bloc os inversé, la seule
                                      surface claire d'un écran sombre */
  --alerte-encre:       #0B1220;

  /* Polices. Embarquées ; aucun appel à fonts.googleapis.com nulle part. */
  --police-titre:       'Anton', 'Barlow', system-ui, sans-serif;
  --police-etiquette:   'Oswald', 'Barlow', system-ui, sans-serif;
  --police-prose:       'Barlow', system-ui, -apple-system, Roboto, sans-serif;

  /* Graisses. */
  --g-normale:          400;
  --g-moyenne:          500;
  --g-forte:            600;
  --g-grasse:           700;

  /* Six tailles de travail. Plancher fonctionnel : 16 px. */
  --t-mention:          16px;
  --t-corps:            17px;
  --t-section:          20px;
  --t-titre:            24px;
  --t-note:             32px;
  --t-chrono:           44px;

  /* Tailles de projection. Bornées en vw pour ne jamais déborder d'un écran
     plus étroit que la régie, sans qu'aucune @media ne déplace quoi que ce
     soit : seule la taille cède, jamais la position. */
  --t-coin:             min(75px, 6.5vw);
  --t-code:             min(96px, 14vw);
  --t-signal:           min(110px, 9vw);
  --t-nom:              min(130px, 11vw);
  --t-geant:            min(260px, 22vw);

  /* Interlignages. */
  --i-signal:           1;
  --i-serre:            1.2;
  --i-dense:            1.3;
  --i-prose:            1.4;

  /* Interlettrages. */
  --e-anton:            .01em;
  --e-definitif:        .02em;
  --e-bouton:           .05em;
  --e-verdict:          .06em;
  --e-etiquette:        .08em;

  /* Grille 8 px. Gouttière 12, marge de page 16. */
  --p0:                 4px;
  --p1:                 8px;
  --p2:                 12px;
  --p3:                 16px;
  --p4:                 24px;
  --p5:                 32px;
  --p6:                 48px;
  --p7:                 64px;

  /* Colonnes. */
  --colonne-tel:        560px;
  --colonne-portable:   720px;
  --colonne-large:      960px;
  --prose-max:          60ch;
  --mention-max:        44ch;

  /* Cibles. 48 px plancher, 64 px pour un geste définitif. */
  --cible:              48px;
  --cible-tete:         56px;
  --cible-encart:       72px;
  --cible-definitive:   64px;
  --cible-chrono:       110px;
  --note-largeur:       76px;
  --note-hauteur:       88px;
  --case-largeur:       44px;
  --case-hauteur:       56px;

  /* Traits et rayons. Le rayon reste minuscule : la charte est anguleuse. */
  --rayon:              2px;
  --rayon-droit:        0;
  --trait-fin:          1px;
  --trait-net:          2px;
  --trait-gras:         3px;
  --trait-epais:        4px;
  --filet-etat:         4px;     /* filet latéral d'un encart */
  --coin-coupe:         12px;    /* entaille du bouton primaire */

  /* Formes d'état. Lisibles sans la couleur. */
  --pastille:           14px;
  --pastille-trait:     3px;
  --cadenas-anse-l:     10px;
  --cadenas-anse-h:     7px;
  --cadenas-corps-l:    14px;
  --cadenas-corps-h:    10px;
  --cran-l:             16px;
  --cran-h:             6px;
  --tiret-l:            12px;
  --tiret-h:            3px;
  --tiret-code-l:       24px;
  --tiret-code-h:       6px;

  color-scheme: dark;
}


/* -----------------------------------------------------------------------------
   2. REMISE À ZÉRO ET CORPS
   Empêche la marge par défaut du navigateur de décaler une cible de quelques
   pixels, le texte de rebondir sous le doigt pendant qu'on vise une note, et
   le navigateur d'agrandir une police au changement d'orientation.
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--octogone);
  color: var(--os);
  font-family: var(--police-prose);
  font-size: var(--t-corps);
  font-weight: var(--g-normale);
  line-height: var(--i-prose);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding-left: var(--p4); }

h1 { font-size: var(--t-titre);   font-weight: var(--g-grasse); line-height: var(--i-serre); }
h2 { font-size: var(--t-section); font-weight: var(--g-grasse); line-height: var(--i-serre); }
h3 { font-size: var(--t-corps);   font-weight: var(--g-grasse); line-height: var(--i-serre); }

/* La prose ne dépasse jamais 60 caractères : au-delà, l'œil perd sa ligne
   entre deux rounds. */
p, li { max-width: var(--prose-max); text-wrap: pretty; }

img, svg { max-width: 100%; }

a { color: var(--bleu-encre); }

/* Empêche un bouton d'hériter d'une police système qui décalerait sa largeur
   d'un écran à l'autre. */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Empêche un focus invisible : un officiel au clavier doit voir où il est.
   Jaune d'attente, jamais rouge ni bleu, pour ne voler aucun coin. */
:focus-visible {
  outline: var(--trait-gras) solid var(--jaune);
  outline-offset: var(--trait-net);
}

/* Empêche qu'une opacité serve de signal, où qu'elle soit tentée. Un élément
   fermé s'assombrit, porte une forme, et dit pourquoi. */
[disabled],
[aria-disabled="true"],
.est-ferme,
.est-verrouille { opacity: 1; }

/* Empêche un chiffre qui change sous les yeux de faire danser sa colonne. */
.chiffres,
.chrono,
.voyant__age,
.champ-code__case,
.code-appairage__chiffres,
.sanctions__chiffres,
.ruban-feuille__pas { font-variant-numeric: tabular-nums; }

/* Empêche une étiquette d'être lue comme une phrase, et une phrase d'être lue
   comme une étiquette. */
.etiquette {
  font-family: var(--police-etiquette);
  font-weight: var(--g-forte);
  font-size: var(--t-mention);
  letter-spacing: var(--e-etiquette);
  text-transform: uppercase;
  color: var(--os-douce);
}

/* Empêche une mention secondaire de se faire prendre pour une action. */
.mention {
  font-size: var(--t-mention);
  color: var(--os-douce);
  max-width: var(--mention-max);
}

.chrono {
  font-family: var(--police-prose);
  font-weight: var(--g-grasse);
  font-size: var(--t-chrono);
  line-height: var(--i-serre);
  letter-spacing: 0;
}


/* -----------------------------------------------------------------------------
   3. FORMES D'ÉTAT
   Empêche la couleur d'être le seul porteur d'un état : au néon, de biais, ou
   pour un œil qui ne distingue pas le vert de l'ambre, la forme reste lisible.
   Rond plein = acquis · anneau = en cours · carré = alerte ·
   anneau pointillé = jamais obtenu · cadenas = verrouillé.
   -------------------------------------------------------------------------- */

.forme {
  width: var(--pastille);
  height: var(--pastille);
  flex: none;
  box-sizing: border-box;
}

.forme--plein     { border-radius: 50%; background: currentColor; }
.forme--anneau    { border-radius: 50%; border: var(--pastille-trait) solid currentColor; }
.forme--carre     { background: currentColor; }
.forme--pointille { border-radius: 50%; border: var(--pastille-trait) dashed currentColor; }

.forme--cadenas {
  width: auto;
  height: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.forme--cadenas::before {
  content: "";
  width: var(--cadenas-anse-l);
  height: var(--cadenas-anse-h);
  border: var(--trait-net) solid currentColor;
  border-bottom: 0;
  border-radius: var(--cadenas-anse-h) var(--cadenas-anse-h) 0 0;
}
.forme--cadenas::after {
  content: "";
  width: var(--cadenas-corps-l);
  height: var(--cadenas-corps-h);
  background: currentColor;
  border-radius: var(--rayon);
}


/* -----------------------------------------------------------------------------
   4. LES QUATORZE COMPOSANTS
   -------------------------------------------------------------------------- */

/* 4.1 · BARRE DE TÊTE, permanente et collante.
   Empêche qu'un juge note sous le compte d'un autre sans que personne le voie :
   le nom de l'officiel et sa fonction du jour ne quittent jamais l'écran. */
.barre-tete {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p2);
  min-height: var(--cible-tete);
  padding: var(--p1) var(--p3);
  background: var(--marine);
  color: var(--os);
  border-bottom: var(--trait-fin) solid var(--trait);
}
/* Le blason tient sa hauteur ici, et une seule fois. La règle vivait dans le
   <style> de chaque page : l'accueil et la feuille du juge la portaient chacun
   de son côté, et toute page qui l'oubliait affichait un logo de 1 600 pixels
   occupant l'écran entier. Constaté en ajoutant la page de présentation. Un
   blason de deux tailles selon l'écran se lit comme deux blasons. */
.barre-tete__logo { height: 28px; width: auto; flex: none; }

.barre-tete__identite {
  display: flex;
  align-items: center;
  gap: var(--p2);
  min-width: 0;
  line-height: var(--i-serre);
}
.barre-tete__textes {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--i-serre);
}
/* Empêche un nom long de pousser le voyant hors de l'écran : c'est le nom qui
   se tronque, jamais l'état de la liaison. */
.barre-tete__nom {
  font-size: var(--t-corps);
  font-weight: var(--g-grasse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barre-tete__contexte {
  font-size: var(--t-mention);
  color: var(--os-claire);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barre-tete .voyant { flex: none; }

/* 4.2 · VOYANT à trois états (quatre en vérité : jamais synchronisé compte).
   Empêche l'écran d'être muet sur la liaison. Jamais masqué, jamais réduit à
   une couleur : forme + mot + âge du dernier signe, toujours écrits. */
.voyant {
  display: inline-flex;
  align-items: center;
  gap: var(--p1);
  min-height: var(--cible);
  padding: 0 var(--p2);
  border-radius: var(--rayon);
  font-size: var(--t-mention);
  font-weight: var(--g-grasse);
  white-space: nowrap;
}
/* L'âge du dernier signe est une mention, jamais un mot d'état. */
.voyant__age { font-weight: var(--g-normale); }

.voyant--en-ligne   { background: var(--vert-fond);    color: var(--vert-encre); }
.voyant--envoi      { background: var(--jaune-fond);   color: var(--jaune-encre); }
.voyant--hors-ligne { background: var(--alerte-fond);  color: var(--alerte-encre); }
.voyant--jamais {
  background: var(--surface-haute);
  color: var(--os-douce);
  border: var(--trait-fin) dashed var(--trait);
}

/* 4.3 · CARTE DE COMBAT.
   Empêche le tableau : sur un téléphone tenu d'une main, une ligne de tableau
   fait confondre deux combats voisins. Une carte, un combat, un seul geste. */
.carte-combat {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--trait-fin) solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
/* Le combat en cours porte un contour os : il se repère sans être lu. */
.carte-combat--en-cours { border: var(--trait-net) solid var(--os); }

.carte-combat__tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--p2);
  padding: var(--p1) var(--p2);
  font-weight: var(--g-grasse);
  border-bottom: var(--trait-fin) solid var(--trait);
}
.carte-combat__categorie {
  font-size: var(--t-mention);
  font-weight: var(--g-normale);
  color: var(--os-douce);
}
/* Deux colonnes fixes : le coin rouge est à gauche à toute largeur. Une
   inversion, même à 320 px, ferait noter le mauvais athlète. */
.carte-combat__coins {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.carte-combat__coin {
  display: flex;
  flex-direction: column;
  gap: var(--p0);
  padding: var(--p2);
  min-width: 0;
}
.carte-combat__athlete {
  font-size: var(--t-section);
  font-weight: var(--g-grasse);
  line-height: var(--i-serre);
  color: var(--os);
}
.carte-combat__etat {
  display: flex;
  align-items: center;
  gap: var(--p1);
  padding: var(--p1) var(--p2);
  font-size: var(--t-mention);
}
.carte-combat__action { padding: 0 var(--p2) var(--p2); }
.carte-combat__action .bouton { width: 100%; }

/* Les deux coins. Aplat sourd, encre claire : le nom reste en os, la couleur
   n'est qu'un repère de côté. Empêche de lire un nom en rouge saturé. */
.coin--rouge { background: var(--rouge-fond); color: var(--rouge-encre); }
.coin--bleu  { background: var(--bleu-fond);  color: var(--bleu-encre); }
.carte-combat__coin.coin--rouge { border-right: var(--trait-fin) solid var(--trait); }

/* 4.4 à 4.6 · LES TROIS BOUTONS.
   Empêche qu'un geste annulable et un geste définitif se ressemblent : trois
   formes, jamais interchangées, reconnaissables à la silhouette. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p1);
  min-height: var(--cible);
  padding: 0 var(--p3);
  border: 0;
  border-radius: var(--rayon-droit);
  background: transparent;
  color: var(--os);
  font-family: var(--police-etiquette);
  font-weight: var(--g-forte);
  font-size: var(--t-mention);
  letter-spacing: var(--e-bouton);
  text-transform: uppercase;
  text-align: center;
  /* Le motif d'un état passe à la ligne au lieu de se ranger à côté du verbe :
     empêche de lire « Valider » sans lire « totaux non servis ». */
  flex-wrap: wrap;
  cursor: pointer;
}
.bouton--bloc { width: 100%; }

/* Primaire · rouge sang, coin coupé. Un seul par écran. */
.bouton--primaire {
  background: var(--rouge);
  color: var(--sur-couleur);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--coin-coupe)),
    calc(100% - var(--coin-coupe)) 100%,
    0 100%
  );
}

/* Secondaire · contour os. Ne prend jamais la place du primaire. */
.bouton--secondaire {
  background: transparent;
  color: var(--os);
  border: var(--trait-net) solid var(--os);
}

/* Conséquence définitive · os plein, double trait, Anton, 64 px.
   Empêche qu'une validation irréversible passe pour un bouton ordinaire. Ce
   bouton n'est jamais réutilisé pour autre chose, jamais focalisé d'office, et
   porte en toutes lettres ce qu'il confirme. */
.bouton--definitif {
  min-height: var(--cible-definitive);
  background: var(--os);
  color: var(--octogone);
  border: var(--trait-gras) solid var(--os);
  box-shadow: inset 0 0 0 var(--trait-gras) var(--octogone);
  font-family: var(--police-titre);
  font-weight: var(--g-normale);
  font-size: var(--t-section);
  letter-spacing: var(--e-definitif);
}
/* Empêche le pouce de trouver un geste annulable collé au geste définitif :
   24 px de vide, et le retour placé en dessous, décalé, jamais à côté. */
.gestes-definitifs {
  display: flex;
  flex-direction: column;
  gap: var(--p4);
}
.gestes-definitifs > .bouton--secondaire { align-self: flex-start; }

/* 4.7 · CHAMP DE CODE, six positions 3 + 3.
   Empêche la dictée à l'oreille de se perdre : le code se lit par groupes de
   trois, avec un espace réel, et le clavier numérique s'ouvre d'office. */
.champ-code {
  display: flex;
  align-items: center;
  gap: var(--p1);
}
.champ-code__groupe {
  display: flex;
  gap: var(--p0);
}
.champ-code__tiret {
  width: var(--tiret-l);
  height: var(--tiret-h);
  background: var(--surface-pressee);
  flex: none;
}
.champ-code__case {
  width: var(--case-largeur);
  height: var(--case-hauteur);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--trait-net) solid var(--os);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--os);
  font-family: var(--police-prose);
  font-weight: var(--g-grasse);
  font-size: var(--t-note);
  letter-spacing: 0;
  text-align: center;
}
/* Une case encore vide se creuse au lieu de pâlir. */
.champ-code__case--vide {
  border-color: var(--trait);
  background: var(--surface-haute);
}
/* La position courante est la seule bleue : on sait où le chiffre va tomber. */
.champ-code__case--actif { border: var(--trait-gras) solid var(--bleu); }
/* Après un refus, tout est vidé et la cause est nommée ailleurs, en toutes
   lettres : empêche de retaper le même code en croyant s'être trompé de doigt. */
.champ-code--refuse .champ-code__case {
  background: var(--alerte-fond);
  border-color: var(--alerte-fond);
  color: var(--alerte-encre);
}

/* 4.8 · ENCART D'ÉTAT, au-dessus de l'action.
   Empêche qu'un officiel réémette une note déjà enregistrée : ce qui s'est
   passé est écrit au-dessus du geste, avec l'heure, jamais en dessous. */
.encart {
  display: flex;
  gap: var(--p2);
  align-items: flex-start;
  min-height: var(--cible-encart);
  padding: var(--p2);
  border-radius: var(--rayon);
  color: var(--os);
  line-height: var(--i-dense);
}
.encart .forme { margin-top: var(--p0); }
.encart__titre { font-weight: var(--g-grasse); }
.encart__detail { font-size: var(--t-mention); }

.encart--ok {
  background: var(--vert-fond);
  box-shadow: inset var(--filet-etat) 0 0 var(--vert);
}
.encart--ok    .encart__titre { color: var(--vert-encre); }
.encart--ok    .forme         { color: var(--vert); }

.encart--attente {
  background: var(--jaune-fond);
  box-shadow: inset var(--filet-etat) 0 0 var(--jaune);
}
.encart--attente .encart__titre { color: var(--jaune-encre); }
.encart--attente .forme         { color: var(--jaune); }

/* L'échec est le seul bloc clair d'un écran sombre : il doit être lu, pas vu. */
.encart--echec {
  background: var(--alerte-fond);
  color: var(--alerte-encre);
  box-shadow: inset var(--filet-etat) 0 0 var(--alerte-encre);
}
.encart--echec .encart__titre { color: var(--alerte-encre); }
.encart--echec .forme         { color: var(--alerte-encre); }

/* 4.9 · BOÎTE DE CONFIRMATION ASYMÉTRIQUE.
   Empêche la validation réflexe : la boîte répète en toutes lettres le combat,
   les deux noms et la note ; l'action définitive domine mais ne reçoit jamais
   le focus initial, et le retour est physiquement écarté. */
.confirmation {
  display: flex;
  flex-direction: column;
  max-width: var(--colonne-tel);
  background: var(--surface);
  border: var(--trait-gras) solid var(--os);
  border-radius: var(--rayon);
  overflow: hidden;
}
.confirmation--rouge { border-color: var(--rouge); }
.confirmation--bleu  { border-color: var(--bleu); }

/* Le bandeau porte la couleur du coin concerné : on sait pour qui on valide
   avant d'avoir lu. */
.confirmation__bandeau {
  padding: var(--p2) var(--p3);
  font-family: var(--police-etiquette);
  font-weight: var(--g-forte);
  font-size: var(--t-mention);
  letter-spacing: var(--e-etiquette);
  text-transform: uppercase;
}
.confirmation__corps {
  display: flex;
  flex-direction: column;
  gap: var(--p1);
  padding: var(--p3);
}
.confirmation__valeur {
  font-family: var(--police-titre);
  font-weight: var(--g-normale);
  font-size: var(--t-note);
  letter-spacing: var(--e-anton);
  line-height: var(--i-serre);
  font-variant-numeric: tabular-nums;
}
.confirmation__phrase {
  font-size: var(--t-section);
  font-weight: var(--g-grasse);
  line-height: var(--i-serre);
}
.confirmation__consequence {
  font-size: var(--t-mention);
  color: var(--os-douce);
}
.confirmation__gestes {
  display: flex;
  flex-direction: column;
  gap: var(--p4);
  padding: 0 var(--p3) var(--p3);
}
.confirmation__gestes > .bouton--definitif { width: 100%; }
.confirmation__gestes > .bouton--secondaire { align-self: flex-start; }

/* 4.10 · RUBAN DE PROGRESSION DE FEUILLE, quatre états.
   Empêche qu'un juge croie avoir noté un round qu'il n'a pas noté, ou qu'il
   espère corriger un round déjà verrouillé. */
.ruban-feuille {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--p1);
}
.ruban-feuille__pas {
  display: flex;
  align-items: center;
  gap: var(--p1);
  padding: var(--p1) var(--p2);
  border-radius: var(--rayon);
  border: var(--trait-net) solid transparent;
  line-height: var(--i-serre);
  min-width: 0;
}
.ruban-feuille__note  { font-size: var(--t-mention); font-weight: var(--g-grasse); }
.ruban-feuille__etat  { font-size: var(--t-mention); }

.ruban-feuille__pas--verrouille {
  background: var(--surface-haute);
  color: var(--os-douce);
  border-color: var(--trait);
}
.ruban-feuille__pas--en-file {
  background: var(--jaune-fond);
  color: var(--jaune-encre);
  border-color: var(--jaune);
}
.ruban-feuille__pas--a-noter {
  background: var(--surface);
  color: var(--os);
  border-style: dashed;
  border-color: var(--os);
}
.ruban-feuille__pas--recu {
  background: var(--vert-fond);
  color: var(--vert-encre);
  border-color: var(--vert);
}

/* 4.11 · COMPTEUR DE SANCTIONS PAR COIN, permanent.
   Empêche la troisième sanction d'arriver par surprise : les crans sont
   dessinés, et la conséquence du prochain est écrite avec son article. */
.sanctions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--p2);
}
.sanctions__coin {
  display: flex;
  flex-direction: column;
  gap: var(--p0);
  padding: var(--p2);
  border-radius: var(--rayon);
  border: var(--trait-net) solid currentColor;
}
.sanctions__coin.coin--rouge { border-color: var(--rouge); }
.sanctions__coin.coin--bleu  { border-color: var(--bleu); }
.sanctions__titre {
  font-family: var(--police-etiquette);
  font-weight: var(--g-forte);
  font-size: var(--t-mention);
  letter-spacing: var(--e-etiquette);
  text-transform: uppercase;
}
.sanctions__chiffres {
  display: flex;
  gap: var(--p2);
  color: var(--os);
}
.sanctions__nombre { font-size: var(--t-titre); font-weight: var(--g-grasse); }
.sanctions__unite  { font-size: var(--t-mention); color: var(--os-douce); }
.sanctions__jauge {
  display: flex;
  align-items: center;
  gap: var(--p0);
}
/* Un cran porté est plein, un cran libre est creux : jamais une nuance. */
.sanctions__cran {
  width: var(--cran-l);
  height: var(--cran-h);
  flex: none;
  border: var(--trait-fin) solid currentColor;
}
.sanctions__cran--porte { background: currentColor; }
/* Le cran garde la couleur saturée du coin, pas son encre claire : la jauge
   se lit de loin, le nom de l'athlète reste en os. */
.sanctions__coin.coin--rouge .sanctions__cran { color: var(--rouge); }
.sanctions__coin.coin--bleu  .sanctions__cran { color: var(--bleu); }
.sanctions__consequence {
  font-size: var(--t-mention);
  color: var(--os-douce);
  margin-left: var(--p0);
}
/* Quand le prochain cran déclenche une disqualification à proposer, la phrase
   cesse d'être une mention. */
.sanctions__consequence--imminente {
  color: var(--os);
  font-weight: var(--g-grasse);
}

/* 4.12 · BANDEAU DE RÉGIME PAPIER.
   Empêche qu'une bascule papier passe pour une panne : c'est un chemin de
   l'outil, déclaré par un délégué nommé, à une heure écrite, et il reste
   affiché tant que le régime dure. */
.bandeau-papier {
  display: flex;
  gap: var(--p2);
  align-items: flex-start;
  padding: var(--p2) var(--p3);
  background: var(--jaune-fond);
  color: var(--os);
  box-shadow: inset var(--filet-etat) 0 0 var(--jaune);
  line-height: var(--i-dense);
}
.bandeau-papier .forme { color: var(--jaune); margin-top: var(--p0); }
.bandeau-papier__titre { font-weight: var(--g-grasse); color: var(--jaune-encre); }
.bandeau-papier__detail { font-size: var(--t-mention); }
/* Sur une ligne saisie à la table, la provenance papier reste lisible à côté
   de la valeur : empêche de recompter une déduction déjà portée. */
.provenance-papier {
  background: var(--jaune-fond);
  color: var(--jaune-encre);
  font-size: var(--t-mention);
  font-weight: var(--g-grasse);
}

/* 4.13 · CODE D'APPAIRAGE, remis en main propre.
   Empêche la liste de codes : un seul à l'écran, lisible à trois mètres,
   groupé 3 + 3 pour être dicté sans erreur, avec son compte à rebours. */
.code-appairage {
  display: flex;
  flex-direction: column;
  max-width: var(--colonne-portable);
  background: var(--surface);
  border: var(--trait-gras) solid var(--os);
  border-radius: var(--rayon);
  overflow: hidden;
}
.code-appairage__tete {
  padding: var(--p2) var(--p4);
  background: var(--surface-haute);
  font-family: var(--police-etiquette);
  font-weight: var(--g-forte);
  font-size: var(--t-mention);
  letter-spacing: var(--e-etiquette);
  text-transform: uppercase;
  color: var(--os-douce);
}
.code-appairage__corps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p3);
  padding: var(--p4);
  text-align: center;
}
.code-appairage__porteur {
  font-size: var(--t-titre);
  font-weight: var(--g-grasse);
  line-height: var(--i-serre);
}
.code-appairage__chiffres {
  display: flex;
  align-items: center;
  gap: var(--p4);
  font-family: var(--police-prose);
  font-weight: var(--g-grasse);
  font-size: var(--t-code);
  letter-spacing: 0;
  line-height: var(--i-serre);
}
.code-appairage__tiret {
  width: var(--tiret-code-l);
  height: var(--tiret-code-h);
  background: var(--surface-pressee);
  flex: none;
}
/* Le retour est à gauche, l'acte fort à droite, séparés de 24 px : empêche de
   révoquer un code en visant « fermer ». */
.code-appairage__pieds {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--p4);
  align-items: center;
  padding: 0 var(--p4) var(--p4);
}

/* 4.14 · SIGNAL IMPÉRATIF, pleine largeur.
   Empêche qu'une salle entière cherche l'information : un mot par bandeau,
   lisible du fond de la salle, jamais une opacité, jamais un pictogramme seul. */
.signal {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Interlignage 1 pour la masse du mot, mais un cran de vide au-dessus et
     en dessous : empêche qu'une capitale accentuée (ARRÊTÉ) sorte de son
     aplat quand le bandeau passe à deux lignes. */
  padding: var(--p1) var(--p4);
  background: var(--alerte-fond);
  color: var(--alerte-encre);
  font-family: var(--police-titre);
  font-weight: var(--g-normale);
  font-size: var(--t-signal);
  letter-spacing: var(--e-etiquette);
  line-height: var(--i-signal);
  min-height: var(--cible-chrono);
  text-wrap: balance;
}
.signal--attente { background: var(--jaune);            color: var(--alerte-encre); }
.signal--arret   { background: var(--surface-pressee);  color: var(--os); }
.signal--inverse { background: var(--octogone);         color: var(--os); }
/* Le verdict nomme l'issue avant le nom, et garde la couleur du coin. */
.signal--verdict { letter-spacing: var(--e-verdict); }
.signal--coin-rouge { background: var(--rouge); color: var(--sur-couleur); }
.signal--coin-bleu  { background: var(--bleu);  color: var(--sur-couleur); }


/* -----------------------------------------------------------------------------
   5. LES SEPT ÉTATS D'UN BOUTON
   repos · pressé · parti · confirmé · refusé · fermé · verrouillé.
   Empêche l'opacité de dire quoi que ce soit : chaque état a un fond, une
   forme et une phrase. Un officiel doit pouvoir dire à voix haute ce que
   l'écran affiche, sans interpréter une nuance de gris.
   -------------------------------------------------------------------------- */

/* Repos : l'état par défaut, celui des trois formes ci-dessus. Rien à écrire. */

/* Pressé : le fond s'assombrit et le bouton s'enfonce d'un pixel. Empêche le
   double appui, sans jamais faire pâlir la cible sous le doigt. */
.bouton:active,
.est-presse {
  background: var(--surface-pressee);
  color: var(--sur-couleur);
  border: var(--trait-net) solid var(--os);
  border-radius: var(--rayon);
  clip-path: none;
  transform: translateY(var(--trait-fin));
}

/* Parti : ambre, anneau. Empêche de retaper une note déjà en route. */
.est-parti {
  background: var(--jaune-fond);
  color: var(--jaune-encre);
  border: var(--trait-net) solid var(--jaune);
  border-radius: var(--rayon);
  clip-path: none;
}

/* Confirmé : vert, rond plein, et l'heure de réception. Empêche le doute qui
   fait renvoyer la même note deux fois. */
.est-confirme {
  background: var(--vert-fond);
  color: var(--vert-encre);
  border: var(--trait-net) solid var(--vert);
  border-radius: var(--rayon);
  clip-path: none;
}

/* Refusé : bloc os inversé, carré. Empêche qu'un refus se lise comme une
   attente : rien n'est écrit, et la phrase le dit. */
.est-refuse {
  background: var(--alerte-fond);
  color: var(--alerte-encre);
  border: var(--trait-net) solid var(--alerte-fond);
  border-radius: var(--rayon);
  clip-path: none;
}

/* Fermé : contour pointillé, fond sourd, et le motif en toutes lettres.
   Empêche de confondre « interdit ici » et « momentanément impossible ». */
.est-ferme,
.bouton[disabled] {
  background: var(--surface-haute);
  color: var(--os-douce);
  border: var(--trait-net) dashed var(--trait);
  border-radius: var(--rayon);
  clip-path: none;
  cursor: not-allowed;
  transform: none;
}

/* Verrouillé : contour plein et cadenas de forme. Empêche d'espérer une
   correction en ligne : la phrase dit depuis quand, et pourquoi. */
.est-verrouille {
  background: var(--surface-haute);
  color: var(--os-douce);
  border: var(--trait-net) solid var(--trait);
  border-radius: var(--rayon);
  clip-path: none;
  cursor: not-allowed;
  transform: none;
}

/* Le motif d'un état tient sur une deuxième ligne, en prose : empêche
   l'abréviation, le code, et le pictogramme muet. */
.bouton__motif {
  flex-basis: 100%;
  display: block;
  font-family: var(--police-prose);
  font-weight: var(--g-normale);
  font-size: var(--t-mention);
  letter-spacing: 0;
  text-transform: none;
}


/* -----------------------------------------------------------------------------
   6. LES CINQ ÉTATS D'ÉCRAN
   chargement · hors ligne · non servi · verrouillé · régime papier.
   Empêche qu'un écran affirme une cause qu'il n'a pas vérifiée : « aucun
   combat » et « je n'ai pas joint le serveur » sont deux phrases différentes,
   et cette feuille leur donne deux apparences différentes.
   -------------------------------------------------------------------------- */

.etat-ecran {
  display: flex;
  flex-direction: column;
  gap: var(--p0);
  padding: var(--p2);
  border-radius: var(--rayon);
  line-height: var(--i-dense);
}
.etat-ecran__titre  { font-weight: var(--g-grasse); }
.etat-ecran__detail { font-size: var(--t-mention); color: var(--os-douce); }

/* Chargement : la structure et ce qu'on sait déjà s'affichent d'abord, avec
   l'âge de l'essai. Empêche l'écran blanc, qui ne dit rien à personne. */
.etat-ecran--chargement {
  background: var(--surface-haute);
  box-shadow: inset var(--filet-etat) 0 0 var(--trait);
}

/* Hors ligne : bloc os inversé. Empêche qu'une coupure se lise comme un vide
   de données ; le dernier signe est daté et la conduite à tenir est écrite. */
.etat-ecran--hors-ligne {
  background: var(--alerte-fond);
  color: var(--alerte-encre);
  box-shadow: inset var(--filet-etat) 0 0 var(--alerte-encre);
}
.etat-ecran--hors-ligne .etat-ecran__detail { color: var(--alerte-encre); }

/* Non servi : ambre. Empêche l'outil d'inventer un round, une horloge ou un
   format ; il l'écrit, et ferme l'action qui en dépend. */
.etat-ecran--non-servi {
  background: var(--jaune-fond);
  box-shadow: inset var(--filet-etat) 0 0 var(--jaune);
}
.etat-ecran--non-servi .etat-ecran__titre { color: var(--jaune-encre); }
.etat-ecran--non-servi .etat-ecran__detail { color: var(--os); }

/* Verrouillé : fond sourd, contour pointillé, cadenas et phrase d'officiel.
   Empêche l'opacité nue, qui laisse croire à un défaut d'affichage. */
.etat-ecran--verrouille {
  background: var(--surface-haute);
  color: var(--os-douce);
  border: var(--trait-net) dashed var(--trait);
}
.etat-ecran--verrouille .etat-ecran__titre { color: var(--os-douce); }

/* Régime papier : contour jaune plein, pas de filet d'alerte. Empêche que le
   repli papier soit rangé parmi les pannes. */
.etat-ecran--papier {
  background: var(--jaune-fond);
  border: var(--trait-net) solid var(--jaune);
}
.etat-ecran--papier .etat-ecran__titre { color: var(--jaune-encre); }
.etat-ecran--papier .etat-ecran__detail { color: var(--os); }

/* Hauteur réservée pour un encart d'état qui apparaît et disparaît. Empêche
   que l'arrivée d'un message pousse une cible sous le doigt au moment de
   l'appui : la place est tenue avant que le message existe. */
.place-reservee { min-height: var(--cible-encart); }


/* -----------------------------------------------------------------------------
   7. UTILITAIRES, le strict nécessaire
   -------------------------------------------------------------------------- */

/* Page : fond octogone plein écran, la barre de tête collée en haut. */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--octogone);
}

/* Colonne de lecture. Trois largeurs, jamais davantage. */
.contenu {
  width: 100%;
  max-width: var(--colonne-tel);
  margin: 0 auto;
  padding: var(--p4) var(--p3) var(--p7);
}
.contenu--portable { max-width: var(--colonne-portable); }
.contenu--large    { max-width: var(--colonne-large); }

/* Empilements et rangées à gouttière de grille. Empêche les marges au jugé,
   qui finissent par décaler une cible d'un écran à l'autre. */
.pile   { display: flex; flex-direction: column; gap: var(--p2); }
.pile--serree { gap: var(--p1); }
.pile--large  { gap: var(--p4); }
.rangee { display: flex; align-items: center; gap: var(--p2); }

/* Zone du pouce : l'action dominante vit en bas du bloc, et rien d'informatif
   ne se glisse sous elle. Empêche de devoir lire après avoir agi. */
.zone-pouce { margin-top: auto; padding-top: var(--p4); }

/* Une proposition de l'outil reste plus faible que le geste de l'officiel :
   ni plus verte, ni plus grosse, jamais une couleur d'état. L'outil propose,
   il ne prononce pas. */
.proposition {
  font-size: var(--t-mention);
  font-weight: var(--g-normale);
  color: var(--os-douce);
  background: transparent;
  border: 0;
}

/* Un article du Code sportif n'est pas un identifiant technique : il est
   opposable, les officiels le citent, il reste écrit. */
.article { font-size: var(--t-mention); color: var(--os-douce); }

/* Empêche d'avoir à choisir entre une étiquette lisible à l'écran et une
   étiquette lisible par un lecteur d'écran. */
.lecture-seule-vocale {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}