/* Le barème de la note de match, au glossaire — design partie 9.
 *
 * 🛑 UNE SEULE feuille pour les DEUX fronts, parce qu'il n'y a qu'UN partiel
 * (`templates/partials/_glossaire_notation.html`). Dupliquer ces règles dans
 * `css/v2/sm-glossaire.css` et dans `css/glossaire.css` créerait deux
 * définitions du même barème, qui divergeraient à la première retouche — la
 * faute exacte que `football/glossaire/notation.py` existe pour interdire côté
 * données. Ce qui vaut pour les coefficients vaut pour leur mise en forme.
 *
 * Les deux fronts ne partagent AUCUN jeton : v2 nomme `--color-*`, v1 nomme
 * `--ef-*`. D'où le pont ci-dessous, résolu par la cascade de `var()` : le
 * corps du fichier ne nomme plus jamais un jeton de front, et les seuls hex
 * qu'il contient sont des troisièmes niveaux de repli, atteints seulement si
 * une page ne charge ni l'un ni l'autre des deux systèmes.
 *
 * Ce fichier est ADDITIF : aucune règle n'en sort de `.glo-notation`,
 * `.glo-bareme`, `.glo-calcul`, `.glo-sr-only` ou `.glo-terme-large`. Les six
 * autres catégories du glossaire et les quarante-sept autres termes ne le
 * voient pas passer.
 */

/* ── Pont de jetons ─────────────────────────────────────────────────────── */
.glo-notation, .glo-bareme {
  --glo-surface:  var(--color-surface,     var(--ef-surface,      #ffffff));
  --glo-fond:     var(--color-neutral-100, var(--ef-surface-alt,  #f7f9fc));
  --glo-texte:    var(--color-text,        var(--ef-text,         #101722));
  --glo-libelle:  var(--color-neutral-700, var(--ef-text-muted,   #48505d));
  --glo-na:       var(--color-neutral-600, var(--ef-text-muted,   #67707f));
  --glo-filet:    var(--color-divider,     var(--ef-border,       rgba(16,23,34,.13)));
  --glo-groupe:   var(--color-accent-700,  var(--ef-primary,      #143caa));
  --glo-plus:     var(--sm-win-text,       var(--ef-success,      #0c6446));
  --glo-moins:    var(--sm-loss-text,      var(--ef-danger,       #9c332b));
  --glo-focus:    var(--color-accent,      var(--ef-primary,      #1b4fd8));
  --glo-r:        var(--r-sm, 12px);
  --glo-pad:      var(--sp-4, 10px);
  --glo-fs:       var(--fs-body-sm, 13.5px);
  --glo-fs-cap:   var(--fs-cap, 12px);
  --glo-fs-val:   var(--fs-body, 14px);
  /* Géométrie du barème — les deux seules mesures neuves du lot, et les deux
     seules à retoucher. 128 + 4 × 50 = 328 px pour 332 px disponibles à 360 px
     de fenêtre : aucun défilement horizontal sur le téléphone type. */
  --glo-col-lib: 128px;
  --glo-col-cel: 50px;
}

/* ⚠️ `--glo-bareme-pad` (le padding horizontal de la carte hôte) n'est PAS
   déclaré ici. Le design le posait à `0px` sur `.glo-bareme` en guise de valeur
   par défaut : or une propriété personnalisée déclarée SUR l'élément bat celle
   qu'il hérite. La valeur du front aurait donc été écrasée, et le panneau
   n'aurait jamais repris les marges de sa carte. Le repli est porté par le
   `var(…, 0px)` au point d'usage : même défaut sûr, sans casser l'héritage. */

/* ── Utilitaire : masqué à l'œil, lu par les technologies d'assistance ──── */
/* `sm-sr-only` n'existe que dans les jetons du front v2 ; le partiel, lui, est
   servi aux DEUX fronts. La `<caption>` du tableau s'affichait donc en clair
   sur la page v1. Cette feuille étant la seule que les deux fronts partagent,
   c'est ici que vit l'utilitaire dont le partiel partagé a besoin. */
.glo-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Sections de la fiche de notation ───────────────────────────────────── */
.glo-notation { margin-top: var(--sp-9, 22px); }
.glo-notation-titre {
  margin: 0 0 var(--sp-2, 6px);
  font-size: var(--fs-body, 14px); line-height: 1.3;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--glo-groupe);
}
.glo-notation-chapeau {
  margin: 0 0 var(--sp-4, 10px);
  font-size: var(--glo-fs); line-height: 1.5;
  color: var(--glo-libelle); text-wrap: pretty;
}

/* ── Le panneau du barème ───────────────────────────────────────────────── */
.glo-bareme {
  /* Reprend les marges de la carte hôte : +36 px de largeur utile à 360 px. */
  margin-inline: calc(-1 * var(--glo-bareme-pad, 0px));
}
.glo-bareme-boite {
  overflow-x: auto;
  scrollbar-width: thin;
  background: var(--glo-surface);
  border-block: 1px solid var(--glo-filet);
  /* L'ombre de bord dit qu'il reste quelque chose à droite, et disparaît quand
     on atteint la fin (`background-attachment: local`). Elle ne se voit donc
     que dans les cas où le tableau déborde réellement — 320 px, zoom à 200 %. */
  background-image:
    linear-gradient(to right, var(--glo-surface) 30%, transparent),
    linear-gradient(to left,  var(--glo-surface) 30%, transparent),
    linear-gradient(to right, rgba(0,0,0,.10), transparent 12px),
    linear-gradient(to left,  rgba(0,0,0,.10), transparent 12px);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* Conteneur focalisable (WCAG 2.1.1) : l'anneau ne doit pas être rogné par
   l'`overflow`, d'où `outline-offset: 0`. */
.glo-bareme-boite:focus-visible {
  outline: 3px solid var(--glo-focus);
  outline-offset: 0;
}

.glo-bareme-table {
  border-collapse: separate; border-spacing: 0;
  table-layout: fixed; width: 100%; min-width: min-content;
  font-size: var(--glo-fs);
}

/* Colonne des critères : collante, et seule colonne qui passe à la ligne. */
.glo-bareme-lib {
  position: sticky; left: 0; z-index: 2;
  width: var(--glo-col-lib);
  min-width: var(--glo-col-lib);
  max-width: var(--glo-col-lib);
  text-align: left; font-weight: 400; color: var(--glo-libelle);
  background: var(--glo-surface);
  border-right: 1px solid var(--glo-filet);
  padding: var(--sp-3, 8px) var(--glo-pad);
  line-height: 1.35; text-wrap: pretty; hyphens: auto;
}
/* Colonnes de ligne de terrain : largeur figée, jamais dépendante du contenu
   ni de la langue — GK/DEF/MIL/ATT sont des constantes de `note_match`, pas
   des chaînes traduites. C'est ce qui rend la grille sûre en anglais. */
.glo-bareme-col, .glo-bareme-val {
  width: var(--glo-col-cel); min-width: var(--glo-col-cel);
  text-align: center; padding: var(--sp-3, 8px) var(--sp-2, 6px);
}
.glo-bareme-table thead th {
  border-bottom: 1px solid var(--glo-filet);
  font-size: var(--glo-fs-cap); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--glo-libelle); background: var(--glo-surface);
}
.glo-bareme-table thead .glo-bareme-lib { z-index: 3; }

/* Titre de bloc — motif repris de `.sm-cmp-groupe` (écran Compare). */
.glo-bareme-bloc > th {
  text-align: left; background: var(--glo-fond);
  padding: var(--sp-4, 10px) var(--glo-pad);
  font-size: var(--glo-fs-cap); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--glo-groupe);
  border-block: 1px solid var(--glo-filet);
  text-wrap: pretty;
}
/* Rappel des colonnes sous les titres des blocs B et C : le `<thead>` unique
   est loin des yeux au bas d'un tableau de vingt-quatre lignes. */
.glo-bareme-rappel td {
  text-align: center; padding: var(--sp-2, 6px);
  font-size: var(--glo-fs-cap); font-weight: 700; letter-spacing: .05em;
  color: var(--glo-libelle); border-bottom: 1px solid var(--glo-filet);
}
.glo-bareme-rappel td:first-child {
  position: sticky; left: 0; background: var(--glo-surface);
  border-right: 1px solid var(--glo-filet);
}

/* Les valeurs. `--font-heading` (Anton) est condensée : cinq signes tiennent
   dans 34 px de contenu utile. `tabular-nums` aligne les virgules d'une ligne
   à l'autre. */
.glo-bareme-val {
  font-family: var(--font-heading, var(--ef-font, system-ui));
  font-size: var(--glo-fs-val); font-variant-numeric: tabular-nums;
  color: var(--glo-texte); white-space: nowrap;
}
/* 🛑 La couleur ne porte AUCUNE information seule : le signe + / − est déjà
   dans la chaîne produite par `_decimal_fr(signe=True)`. La teinte le répète. */
.glo-bareme-val[data-signe="+"], .glo-calcul-val[data-signe="+"] {
  color: var(--glo-plus);
}
.glo-bareme-val[data-signe="-"], .glo-calcul-val[data-signe="-"] {
  color: var(--glo-moins);
}
.glo-bareme-val[data-signe="\2014"] {
  color: var(--glo-na); font-family: inherit;
}

.glo-bareme-table tbody tr + tr > * { border-top: 1px solid var(--glo-filet); }

/* ── Légende dépliable ──────────────────────────────────────────────────── */
.glo-bareme-legende { margin-top: var(--sp-4, 10px); font-size: var(--glo-fs); }
.glo-bareme-legende > summary {
  cursor: pointer; min-height: var(--sm-tap-min, 44px);
  display: flex; align-items: center;
  color: var(--glo-groupe); font-weight: 600;
}
.glo-legende-grille {
  display: grid; grid-template-columns: 3.4em 1fr;
  gap: var(--sp-2, 6px) var(--sp-4, 10px);
  margin: var(--sp-3, 8px) 0 0;
}
.glo-legende-grille dt { font-weight: 700; }
.glo-legende-grille dd { margin: 0; color: var(--glo-libelle); text-wrap: pretty; }

/* ── La fiche de calcul de l'exemple chiffré ────────────────────────────── */
/* Aucune largeur fixe, aucune colonne : immunisée par construction à la
   longueur des libellés anglais, lisible à 320 px comme à 1120 px. */
.glo-calcul { list-style: none; margin: 0; padding: 0; }
.glo-calcul li {
  display: flex; align-items: baseline; gap: var(--sp-3, 8px);
  padding: var(--sp-3, 8px) 0; border-bottom: 1px solid var(--glo-filet);
  font-size: var(--glo-fs);
}
.glo-calcul-lib { flex: 1; min-width: 0; color: var(--glo-libelle); text-wrap: pretty; }
.glo-calcul-val {
  flex: none; font-family: var(--font-heading, var(--ef-font, system-ui));
  font-size: var(--glo-fs-val); font-variant-numeric: tabular-nums;
  color: var(--glo-texte);
}
.glo-calcul-bloc {
  background: var(--glo-fond);
  padding-inline: var(--glo-pad);
  font-size: var(--glo-fs-cap); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--glo-groupe);
}
.glo-calcul-neant { color: var(--glo-na); font-style: italic; }
.glo-calcul-alpha .glo-calcul-lib { color: var(--glo-texte); font-weight: 600; }
.glo-calcul-total {
  margin: var(--sp-4, 10px) 0 0; font-size: var(--fs-h4, 18px);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3, 8px);
}
.glo-calcul-total > strong {
  font-family: var(--font-heading, var(--ef-font, system-ui));
  font-size: var(--fs-num-lg, 26px); color: var(--glo-texte);
}

/* ── Termes continus, exclusions, version ───────────────────────────────── */
.glo-continus, .glo-exclusions dl { margin: 0; }
.glo-continus dt, .glo-exclusions dt {
  font-weight: 700; font-size: var(--glo-fs); margin-top: var(--sp-4, 10px);
}
.glo-continus dt:first-child, .glo-exclusions dt:first-child { margin-top: 0; }
.glo-continus dd, .glo-exclusions dd {
  margin: 2px 0 0; font-size: var(--glo-fs); line-height: 1.5;
  color: var(--glo-libelle); text-wrap: pretty;
}
.glo-exclusions {
  background: var(--glo-fond); border-radius: var(--glo-r);
  padding: var(--sp-6, 14px) var(--sp-7, 16px);
}
.glo-exclusions-titre { margin-top: 0; }
.glo-version {
  margin: var(--sp-6, 14px) 0 0; font-size: var(--glo-fs-cap); line-height: 1.5;
  color: var(--glo-libelle); border-top: 1px solid var(--glo-filet);
  padding-top: var(--sp-4, 10px); text-wrap: pretty;
}

/* ── Contraste : correctif STRICTEMENT LOCAL au barème ──────────────────── */
/* `--color-accent-700` sur `--color-neutral-100` mesure 8,83:1 en clair mais
   6,54:1 en sombre — AA, pas AAA. C'est le couple DÉJÀ en production dans
   `.sm-cmp-groupe` : le corriger globalement toucherait la palette produit,
   donc tous les écrans de statistiques. On le corrige ici seulement. 9,78:1. */
html[data-sm-theme="dark"] .glo-bareme-bloc > th,
html[data-sm-theme="dark"] .glo-calcul-bloc,
html[data-sm-theme="dark"] .glo-notation-titre {
  color: var(--color-accent-800);
}

/* ── Points de rupture ──────────────────────────────────────────────────── */
/* ≥ 480 px : la carte respire, on élargit sans toucher au tableau lui-même. */
@media (min-width: 480px) {
  .glo-notation, .glo-bareme { --glo-col-lib: 190px; --glo-col-cel: 62px; }
}
/* ≥ 760 px : la fiche est pleine largeur (`column-span`), le libellé cesse de
   se casser en trois lignes et les colonnes se répartissent le reste. */
@media (min-width: 760px) {
  .glo-notation, .glo-bareme { --glo-col-lib: 300px; --glo-col-cel: 92px; }
  .glo-bareme-boite { border: 1px solid var(--glo-filet); border-radius: var(--glo-r); }
  .glo-bareme { margin-inline: 0; }   /* plus besoin de reprendre les marges */
}
/* Impression — la page se télécharge en PDF depuis le glossaire. Un tableau
   qui défile n'existe pas sur papier. */
@media print {
  .glo-bareme { margin-inline: 0; }
  .glo-bareme-boite { overflow: visible; background-image: none; border: 1px solid #000; }
  .glo-bareme-lib, .glo-bareme-rappel td:first-child { position: static; }
  .glo-bareme-groupe { break-inside: avoid; }
  .glo-bareme-legende, .glo-bareme-legende[open] { display: block; }
  .glo-bareme-legende > summary { list-style: none; }
  .glo-terme-large { column-span: all; }
}