/* ═══════════════════════════════════════════════════════════════════════════
   SCOUTING — Design system « Pitch / terrain »
   Polices : chargées via <link> + preconnect dans base.html (l'ancien @import CSS
   bloquait le rendu et sérialisait les requêtes).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --pitch:      #0B3D2E;
  --pitch-2:    #0F5138;
  --pitch-3:    #14402F;
  --amber:      #F2A900;
  --amber-2:    #C98A00;
  --ink:        #14181A;
  --ink-2:      #4A524D;
  /* #737B75 tombait à ~4,0:1 sur --paper (sous AA) ; assombri pour passer 4,5:1
     tout en restant plus clair que --ink-2. */
  --muted:      #656E68;
  --paper:      #F5F6F3;
  --surface:    #FFFFFF;
  --line:       #E3E7E1;
  --line-2:     #D2D8D0;

  /* Échelle des percentiles. Ces cinq-là sont des FONDS de barre : la couleur
     EST la donnée, on n'y écrit pas. Elles ne bougent donc pas — c'est le
     langage visuel du produit. Pour les rares pastilles pleines qui portent du
     texte par-dessus, voir `--p-*-fg` juste en dessous. */
  --p-elite: #1E9E5A;
  --p-good:  #63B487;
  --p-avg:   #E8B04B;
  --p-low:   #E08748;
  --p-poor:  #C7513B;

  /* Encre à poser SUR chacune de ces pastilles. Le blanc systématique donnait
     1,95:1 sur `--p-avg` et 2,50:1 sur `--p-good` — illisible. Sur les fonds
     clairs c'est l'encre foncée qui passe (7,1 à 9,1:1), sur les fonds soutenus
     le blanc, à condition d'assombrir un peu le fond. */
  /* Variantes TEXTE des paliers : les cinq couleurs de barre écrivent mal
     sur blanc (`--p-low` à 2,72:1 pour un nombre de 30 px). Ces valeurs ne
     sont pas inventées — ce sont exactement celles que composition.css
     emploie déjà pour les notes des jetons, remontées ici pour cesser
     d'exister en double. 4,98 à 6,19:1 sur blanc. */
  --p-elite-tx: #157A45;  --p-good-tx: #14804A;  --p-avg-tx: #8F6410;
  --p-low-tx:   #9C5528;  --p-poor-tx: #A83E2C;

  --p-elite-bg: #157A43;  --p-elite-fg: #FFFFFF;   /* 5,39:1 */
  --p-good-fg:  var(--ink);                        /* 7,15:1 sur --p-good  */
  --p-avg-fg:   var(--ink);                        /* 9,14:1 sur --p-avg   */
  --p-low-fg:   var(--ink);                        /* 6,58:1 sur --p-low   */
  --p-poor-bg:  #A83420;  --p-poor-fg:  #FFFFFF;   /* 6,61:1 */

  --ok:   #1E9E5A;
  --warn: #C98A00;
  /* #C7513B tombait à 4,497:1 sur blanc — sous AA de trois millièmes, et à
     4,15:1 sur --paper. Assombri juste assez pour passer des deux côtés. */
  --bad:  #BC432D;

  /* ── Variantes TEXTE des couleurs d'accent ──
     Les couleurs ci-dessus sont calibrées pour des aplats et des bordures. En
     TEXTE sur fond clair elles échouent toutes : --amber-2 à 2,72:1 (compteur
     de résultats, badges de niveau, jetons), --ok à 3,18:1 (pastille StatsBomb).
     Deux jetons dédiés plutôt qu'un assombrissement global, qui aurait terni
     les bordures et les aplats où la couleur vive est juste. */
  --amber-fg: #8A5E00;   /* 5,26:1 sur --paper, 5,70:1 sur blanc */
  --ok-fg:    #157A43;   /* 4,97:1 sur --paper, 5,39:1 sur blanc */

  /* États de message (succès/erreur/avertissement) — tokens plutôt qu'hex épars */
  --success-bg: #E7F4EC; --success-fg: #14663C; --success-line: #B9E0C9;
  --error-bg:   #FBEAE7; --error-fg:   #9E3122; --error-line:   #F0CFC8;
  --warn-bg:    #FCF4E1; --warn-fg:    #8A5E00; --warn-line:    #EAD8AC;

  /* Couleurs de badge niveau qui n'ont pas d'équivalent dans la palette « pitch » */
  /* ── Échelle des notes 1 → 4 (1 = meilleur) ────────────────────────────
     Trois teintes par palier : fond, encre, bordure. Elle existait déjà, en
     dur, recopiée à l'identique dans TROIS composants — pastilles de note,
     cartes de recommandation, bascule de faisabilité — soit 35 littéraux pour
     douze couleurs. Ce n'était pas de la dérive, c'était une famille
     sémantique sans jetons.
     ⚠️ Volontairement distincte de `--error-*` / `--warn-*`, bien que deux
     valeurs coïncident : une note 4 n'est pas une erreur, et retoucher la
     couleur des messages d'erreur ne doit pas repeindre les notes.

     ⚠️ Le haut de l'échelle est BLEU, plus vert : le vert est la couleur du
     produit — la barre de navigation, le bandeau des fiches, le terrain — et
     l'employer aussi pour « bien noté » faisait lire une bonne note comme un
     élément de décor. Le bleu n'appartient à rien d'autre ici, donc une note 1
     se voit. Le bas de l'échelle (ambre, rouge) ne bouge pas : l'alerte a sa
     couleur, et elle est juste. Les percentiles, eux, restent verts —
     l'échelle StatsBomb n'est pas une notation de scout et les confondre
     effacerait la seule chose que le cloisonnement protège : la différence
     entre ce qu'un homme a vu et ce qu'un modèle a calculé. */
  --n1-bg: #D6E7F8;  --n1-fg: #0F4B87;  --n1-line: #A9CCEC;
  --n2-bg: #EAF2FA;  --n2-fg: #26648F;  --n2-line: #CADDEE;
  --n3-bg: #FCF2DE;  --n3-fg: #7A5300;  --n3-line: #EAD8AC;
  --n4-bg: #F8E6E2;  --n4-fg: #9E3122;  --n4-line: #F0CFC8;

  /* Encre posée SUR le vert (nav, bandeau, terrain). `#fff` y était écrit 37
     fois : c'est un rôle, pas une valeur — `--surface` aurait été un
     contresens sémantique (une surface n'est pas une encre). */
  --on-pitch: #FFFFFF;

  --lvl-n2:  #2C6E9E; --lvl-u19: #7A57B0; --lvl-be: #205A9E;

  --radius: 6px;
  --shadow: 0 1px 2px rgba(11,61,46,.05), 0 4px 16px rgba(11,61,46,.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Barlow', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.cond { font-family: 'Barlow Condensed', sans-serif; }
.tnum { font-variant-numeric: tabular-nums; }

/* Visible des seuls lecteurs d'écran. Vit ICI et pas dans composition.css :
   le tableau de la liste s'en sert (en-têtes des colonnes statut/suivi, libellé
   de la pastille de statut), et composition.css n'est chargé que sur une page —
   le texte serait sorti en clair partout ailleurs. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Lien d'évitement : hors écran jusqu'à ce qu'il reçoive le focus. */
.skip-lien {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amber); color: var(--pitch);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
}
.skip-lien:focus { left: 0; }

/* ── Zone du compte connecté ──────────────────────────────────────────────
   Hors de `.nav-links`, et délibérément dans une AUTRE voix que les onglets :
   Barlow (pas Condensed), bas-de-casse, sans interlettrage. Rangé dans la
   rangée d'onglets et habillé comme eux, le nom se lisait comme un sixième
   onglet cliquable. Le séparateur dit « ceci n'est plus la navigation ». */
.nav-compte {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto; align-self: center;
  margin-left: 14px; padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.nav-qui {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Barlow', sans-serif; font-weight: 500;
  font-size: 13px; letter-spacing: 0; text-transform: none;
  color: rgba(255,255,255,.66);
  white-space: nowrap; cursor: default;
}
/* Pastille d'initiale : repère de coup d'œil, jamais l'identifiant — deux
   comptes peuvent partager leur initiale (cf. le commentaire de base.html). */
.nav-mono {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  color: var(--on-pitch);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 13px; line-height: 1;
}
.nav-nom { color: var(--on-pitch); font-weight: 600; }

/* ── Barre de navigation ── */
.nav {
  background: var(--pitch);
  border-bottom: 3px solid var(--amber);
  color: var(--on-pitch);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: stretch; gap: 8px;
  padding: 0 24px;
  height: 60px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 22px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--on-pitch);
  margin-right: 20px;
}
.brand .mark {
  width: 30px; height: 30px; border-radius: 4px;
  background: var(--amber); color: var(--pitch);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}
.nav-links { display: flex; align-items: stretch; margin-left: auto; }
.nav-links a {
  display: flex; align-items: center; padding: 0 18px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  border-bottom: 3px solid transparent; margin-bottom: -3px;
  transition: color .15s;
}
.nav-links a:hover { color: var(--on-pitch); }
.nav-links a.active { color: var(--on-pitch); border-bottom-color: var(--amber); }

/* Déconnexion (POST requis par Django). Contour explicite : c'est la seule
   commande de la zone compte, elle doit se distinguer au premier regard du
   nom qui la précède — lequel, lui, ne se clique pas. */
.nav-logout { display: flex; margin: 0; }
.nav-logout button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(255,255,255,.82);
  background: none; border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius); cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}
.nav-logout button:hover {
  color: var(--pitch); background: var(--amber); border-color: var(--amber);
}
.nav-logout button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 26px 24px 60px; }

/* ── Titres de section ── */
.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  font-size: 15px; color: var(--pitch);
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px;
}
.section-title::before {
  content: ""; width: 4px; height: 16px; background: var(--amber); border-radius: 2px;
}

/* ── Messages ── */
.msg { padding: 10px 16px; border-radius: var(--radius); margin-bottom: 14px;
       font-weight: 600; font-size: 14px; border: 1px solid transparent; }
.msg.success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-line); }
.msg.error   { background: var(--error-bg);   color: var(--error-fg);   border-color: var(--error-line); }
.msg.warning { background: var(--warn-bg);    color: var(--warn-fg);    border-color: var(--warn-line); }

/* ── Page header ── */
.page-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.page-head h1 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: -.5px;
  font-size: 34px; margin: 0; color: var(--ink);
}
.page-head .count {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  color: var(--amber-fg); font-size: 18px; letter-spacing: .5px;
}

/* ═══ FILTRES ═══ */
/* Repli des filtres. Sur grand écran le résumé n'existe pas visuellement et le
   bloc reste ouvert : rien ne change. Sous 900 px, le résumé devient la barre
   qu'on touche pour ouvrir, et il annonce combien de filtres sont actifs — sans
   ça, replier reviendrait à CACHER l'état du tri, ce qui est pire que le mur. */
.filters-som { display: none; }
@media (max-width: 900px) {
  .filters-som {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 4px 2px; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px; font-size: 15px;
    color: var(--pitch); list-style: none;
  }
  .filters-som::-webkit-details-marker { display: none; }
  /* Chevron maison : le marqueur natif ne se style pas d'un moteur à l'autre. */
  .filters-som::after {
    content: "▾"; margin-left: auto; font-size: 13px; color: var(--muted);
    transition: transform .15s ease-out;
  }
  .filters-pli[open] > .filters-som::after { transform: rotate(180deg); }
  .filters-som:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; }
  .filters-som-n {
    font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 12px;
    text-transform: none; letter-spacing: 0;
    background: var(--amber); color: var(--pitch);
    border-radius: 10px; padding: 1px 9px;
  }
  .filters-som-n:empty { display: none; }
  .filters-pli[open] > .filters-som { margin-bottom: 12px; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .filters-som::after { transition: none; } }
.filters {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px 18px; margin-bottom: 20px;
}
.filters-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 14px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
/* `.field-lab` est l'intitulé d'un CURSEUR : une plage porte une ou deux
   poignées, chacune déjà nommée par son `aria-label`, donc aucun `<label for>`
   ne peut pointer sur « le » contrôle. Un `<label>` sans cible annonce une
   étiquette qui n'en est pas une — d'où le `<span>`, à l'apparence identique. */
.field label, .field-lab {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .8px; font-size: 12px;
  color: var(--muted);
}
/* ── Combobox : la recherche EST la liste ─────────────────────────────────
   Club (~3 800 options) et championnat (335) ne se choisissent pas dans un
   `<select>` natif : sa frappe rapide ne fonctionne qu'en préfixe. Ils avaient
   donc reçu un champ de recherche par-dessus — deux contrôles empilés pour un
   seul geste, et le résultat de sa frappe invisible tant qu'on n'avait pas
   déplié le menu. Un seul champ désormais, la liste s'ouvre dessous.

   Montée par liste.js : sans JavaScript, `.cbx-champ` et `.cbx-liste`
   n'existent pas et c'est le `<select>` d'origine qui s'affiche, intact. */
.cbx { position: relative; }
/* Le `<select>` reste dans le formulaire — il porte le `name`, donc la valeur —
   mais sort de l'écran une fois la combobox posée. Pas `display:none` : un
   contrôle retiré du rendu ne participe plus à la validation ni au focus.

   ⚠️ Sélecteur `.field .cbx-source` (0,2,0) et non `.cbx-source` (0,1,0) :
   `.field select` vaut (0,1,1) et l'emporterait sur la largeur. Le `<select>`
   gardait alors ses 320 px hors écran et faisait déborder la page de 284 px
   en 390 px de large — mesuré. C'est le piège que l'ancien champ de recherche
   documentait déjà quelques lignes plus haut ; il fallait le relire. */
.field .cbx-source {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cbx-liste {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 4px; list-style: none;
  max-height: 268px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 5px; box-shadow: 0 6px 20px rgba(11,61,46,.14);
}
.cbx-liste[hidden] { display: none; }
.cbx-opt {
  padding: 8px 10px; border-radius: 4px; font-size: 14px; cursor: pointer;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Survol ET parcours clavier se ressemblent : c'est le même « où j'en suis ».
   La sélection en cours, elle, est marquée par la graisse et non par un fond —
   sinon deux repères se disputeraient la même surface. */
.cbx-opt:hover, .cbx-opt.est-actif { background: var(--paper); color: var(--pitch); }
.cbx-opt.est-choisi { font-weight: 700; color: var(--pitch); }
.cbx-opt.est-choisi::after { content: " ✓"; color: var(--amber-fg); }
/* La sortie (« Tous ») se lit comme une commande, pas comme un championnat. */
.cbx-tous {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; font-size: 12.5px;
  color: var(--ink-2); border-bottom: 1px solid var(--line); border-radius: 0;
  margin-bottom: 4px; padding-bottom: 9px;
}
.cbx-note { padding: 8px 10px; font-size: 12.5px; color: var(--muted); }

.field select, .field input {
  font-family: 'Barlow', sans-serif; font-size: 14px;
  padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 5px;
  background: var(--surface); color: var(--ink); width: 100%;
}
.field select:focus, .field input:focus {
  outline: none; border-color: var(--pitch); box-shadow: 0 0 0 3px rgba(11,61,46,.08);
}
.filters-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
/* Le `<label>` EST la cible : cliquer le texte coche la case, donc c'est sa
   boîte qu'on mesure, pas les 16 px de la case. Elle tombait quand même à
   22 px de haut sur desktop (la règle tactile ne la remonte qu'à partir de
   900 px). `flex` est sans risque ici, le libellé est un nœud unique. */
.check { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); font-weight: 500; min-height: 24px; }
.check input { width: 16px; height: 16px; }

/* ⚠️ `accent-color` était posé au cas par cas — sur `.check` et sur les cases
   de la comparaison — et nulle part ailleurs : les onze cases de la fenêtre
   d'export sortaient en BLEU système au milieu d'une charte vert et ambre.
   Une déclaration à la racine des contrôles vaut mieux que trois rappels :
   la coche native reste (c'est le meilleur choix d'accessibilité), elle prend
   simplement la couleur de la maison. */
input[type=checkbox], input[type=radio] { accent-color: var(--pitch); }

.btn {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px; font-size: 14px;
  padding: 9px 18px; border-radius: 5px; border: 1px solid transparent;
  cursor: pointer; transition: all .15s;
}
.btn-primary { background: var(--pitch); color: var(--on-pitch); }
.btn-primary:hover { background: var(--pitch-2); }
.btn-amber { background: var(--amber); color: var(--pitch); }
.btn-amber:hover { background: var(--amber-2); color: var(--on-pitch); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--pitch); color: var(--pitch); }
.btn-sm { padding: 5px 11px; font-size: 12px; }

/* ═══ TABLEAU JOUEURS ═══ */
/* Filtrer / trier / paginer ne remplace que #resultats (cf. players/liste.js).
   Le temps de la requête, on estompe le tableau et on neutralise les clics :
   assez pour signaler que ça travaille, sans faire sauter la mise en page —
   un vrai indicateur de chargement à la place ferait clignoter l'écran à
   chaque frappe dans la recherche. `transition-delay` évite d'ailleurs que
   l'estompe apparaisse sur les réponses très rapides (~60 ms). */
#resultats { transition: opacity .12s ease; }
#resultats.est-charge {
  opacity: .5; pointer-events: none;
  transition-delay: .15s;
}
.table-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
/* Défilement horizontal du tableau sur écran étroit : sans lui, `overflow:hidden`
   de .table-card ROGNAIT les colonnes de droite (Valeur, SB…) sur mobile. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid { width: 100%; border-collapse: collapse; min-width: 720px; }
table.grid thead th {
  background: var(--pitch); color: var(--on-pitch);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .7px; font-size: 12px;
  text-align: left; padding: 11px 14px; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
/* 24 px de haut au MINIMUM, à toute largeur (WCAG 2.2, SC 2.5.8). Le lien
   faisait 16 px : sous 900 px la règle tactile le remontait à 36 px, mais
   au-dessus il restait à 16 — et un en-tête de tri, contrairement au nom d'un
   joueur, n'a AUCUNE autre zone équivalente à viser (la ligne entière est
   cliquable, pas l'en-tête). `inline-block` pour que le padding vertical
   compte réellement dans la boîte. */
table.grid thead th a {
  color: rgba(255,255,255,.85);
  display: inline-block; padding-top: 4px; padding-bottom: 4px;
}
table.grid thead th a:hover { color: var(--amber); }
table.grid thead th.sorted a { color: var(--amber); }
table.grid tbody tr {
  border-top: 1px solid var(--line); cursor: pointer; transition: background .12s;
}
table.grid tbody tr:hover { background: #F0F5F1; }
table.grid td { padding: 10px 14px; vertical-align: middle; }
table.grid td.name { font-weight: 600; }
table.grid td.name .first { color: var(--muted); font-weight: 500; }
/* Lien clavier-accessible : la ligne entière reste cliquable à la souris (onclick),
   mais le nom porte le vrai <a> pour la navigation clavier / lecteur d'écran.
   Porté à 24 px comme les en-têtes de tri. Ici la ligne (45 px) offrait déjà
   une cible équivalente, donc SC 2.5.8 était tenu ; on l'aligne quand même,
   parce qu'un lien qu'on vise à la souris n'a pas à être plus fin que le
   reste. La hauteur de ligne ne bouge pas : le padding des cellules la fixait
   déjà au-dessus de 24 px. */
.name-link { color: inherit; display: inline-block; padding-top: 3px; padding-bottom: 3px; }
.name-link:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; border-radius: 2px; }
.val { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; }
.empty { padding: 40px; text-align: center; color: var(--muted); }
/* Un état vide sans issue laisse l'utilisateur relire ses 16 filtres pour
   trouver lequel a tout mangé. La page Rapports proposait déjà la sortie ;
   la liste, non. */
.empty-reset {
  display: inline-block; margin-left: 10px; padding: 7px 14px;
  min-height: 34px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); color: var(--pitch); font-weight: 600;
}
.empty-reset:hover { border-color: var(--pitch); }

/* ── Pagination ── */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; flex-wrap: wrap; }
.pager-info { font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px; font-size: 13px; color: var(--muted); }
.pager-btns { display: flex; gap: 6px; }

/* ── Badges niveau ── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase;
  border: 1px solid currentColor; white-space: nowrap;
}
.lvl-l1 { color: var(--pitch); } .lvl-l2 { color: var(--bad); }
.lvl-n { color: var(--amber-fg); } .lvl-n2 { color: var(--lvl-n2); }
.lvl-n3 { color: var(--p-elite); } .lvl-u19 { color: var(--lvl-u19); }
.lvl-be { color: var(--lvl-be); } .lvl-other { color: var(--muted); }

/* ── Pastille poste ── */
.pos {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 2px 7px; border-radius: 3px;
  background: var(--pitch-3); color: var(--on-pitch);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: .5px;
}

/* ── Dot statut rapport ──
   ⚠️ La classe est `.dot-a_ecarter`, PAS `.dot-ecarter` : le gabarit rend
   `dot-{{ st }}` et `st` vaut la valeur de STATUT_CHOICES, soit `a_ecarter`.
   L'ancien nom raccourci ne s'appliquait à rien — la pastille sortait
   entièrement transparente pour 3 263 joueurs sur les 4 891 notés, c'est-à-dire
   que le statut le PLUS fréquent, et le plus décisif (« celui-là, c'est non »),
   était le seul invisible dans la première colonne du tableau.
   Les trois valeurs sont écrites en toutes lettres pour que le lien avec
   STATUT_CHOICES saute aux yeux si l'énumération bouge. */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dot-vu        { background: var(--ok); }
.dot-a_ecarter { background: var(--bad); }
.dot-non_vu    { background: var(--line-2); border: 1px solid var(--line); }
/* `--ok` en texte donne 3,18:1 ; `--line-2` sur blanc, 1,45:1 — un rond gris
   sur fond blanc, invisible. La pastille « pas de données » passe en gris
   lisible, et sa signification est aussi portée par le `title` du gabarit. */
.sb-yes { color: var(--ok-fg); font-weight: 700; } .sb-no { color: var(--muted); }

/* ═══ FICHE JOUEUR ═══ */
.back-link { font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.6px; font-size:13px; color: var(--muted); display:inline-block; margin-bottom:14px; }
.back-link:hover { color: var(--pitch); }

.hero {
  position: relative; overflow: hidden;
  background: var(--pitch);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 60px, rgba(255,255,255,0) 60px 120px);
  border-radius: var(--radius); border-left: 4px solid var(--amber);
  padding: 26px 30px; color: var(--on-pitch); margin-bottom: 18px;
}
.hero::after {
  content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px;
  border: 2px solid rgba(255,255,255,.06); border-radius: 50%;
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; position: relative; z-index: 1; }
.hero-lead { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero h1 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: -.5px; line-height: .98;
  font-size: 46px; margin: 0;
}
.hero .sub { color: rgba(255,255,255,.8); font-weight: 500; margin-top: 6px; font-size: 15px; }
.hero-meta { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Les puces du bandeau (« ☆ Suivre », « ＋ Liste », « ⤓ Exporter ») sont des
   commandes, pas des étiquettes : 23 px mesurés, un de moins que le minimum. */
.chip {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  border-radius: 3px; padding: 3px 10px; font-size: 13px; font-weight: 600; color: var(--on-pitch);
  min-height: 24px;
}
button.chip, a.chip, .chip-mdl { display: inline-flex; align-items: center; }

/* ⚠️ Une pastille du bandeau est soit une ÉTIQUETTE inerte (statut, « Prêté
   par », « Hors Transfermarkt »), soit une COMMANDE (Suivre, Liste, Exporter,
   Comparer). Les deux partageaient `.chip` et donc le même dessin : six
   pastilles alignées, une seule cliquable, et rien pour dire laquelle. Les
   commandes prennent un contour net, un survol et une bague de focus ; les
   étiquettes restent plates. Le `style="cursor:pointer;border:none;"` qui
   traînait en ligne sur le bouton « Suivre » compensait exactement ce manque —
   il a disparu avec. */
.chip-cmd {
  border-color: rgba(255,255,255,.45); cursor: pointer;
  font: inherit; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip-cmd:hover { background: var(--amber); border-color: var(--amber); color: var(--pitch); }
.chip-cmd:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.chip.amber { background: var(--amber); border-color: var(--amber); color: var(--pitch); }
.hero .badge { border-color: rgba(255,255,255,.55); color: var(--on-pitch); }
.hero-val { text-align: right; }
.hero-val .big { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:38px; line-height:1; }

/* Mini-terrain du bandeau : poste principal TM (ambré) + postes joués SB (minutes). */
.hero-pitch {
  position: relative; flex: 0 0 auto; align-self: center;
  width: 122px; height: 160px; border-radius: 12px; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 20px, rgba(255,255,255,0) 20px 40px),
    linear-gradient(158deg, #237049 0%, #16542f 55%, #0e3f26 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
              inset 0 0 30px rgba(0,0,0,.30), 0 8px 20px rgba(0,0,0,.24);
}
.hero-pitch .hp-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-pitch .hp-lines * {
  fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hero-pitch .hp-lines .hp-out { stroke: rgba(255,255,255,.62); }
.hero-pitch .hp-lines .hp-spot { fill: rgba(255,255,255,.6); stroke: none; }

.hp-dot {
  position: absolute; transform: translate(-50%,-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.hp-dot .hp-chip {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: var(--pitch);
  background: rgba(255,255,255,.94); border: 1.5px solid #fff;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.hp-dot .hp-min {
  font-size: 8.5px; font-weight: 700; color: var(--on-pitch); line-height: 13px;
  padding: 0 5px; border-radius: 7px; background: rgba(8,22,15,.62);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.hp-dot.hp-main { z-index: 3; }
.hp-dot.hp-main .hp-chip {
  width: 31px; height: 31px; font-size: 14px; color: var(--pitch);
  background: radial-gradient(circle at 34% 28%, #ffdf94, var(--amber) 78%);
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(240,180,50,.22), 0 3px 9px rgba(0,0,0,.38);
}
.hp-dot.hp-main .hp-min { color: var(--pitch); background: rgba(255,255,255,.9); }
.trend { font-size: 13px; font-weight: 600; margin-top: 4px; }
.trend.up { color: #7FE0A6; } .trend.down { color: #F0A98F; } .trend.flat { color: rgba(255,255,255,.7); }
.tm-link { color: var(--amber); font-weight:600; font-size:13px; }

/* ── Cibles d'au moins 24 × 24 px, à TOUTE largeur (WCAG 2.2, SC 2.5.8) ─────
   La règle tactile du bloc ≤ 900 px remontait déjà ces liens à 34 px, mais
   au-dessus ils restaient à 16-22 px de haut : « ↗ lien » des Paramètres à
   33 × 16 (4 432 occurrences), le nom du joueur d'un rapport à 120 × 22, le
   retour à la liste à 119 × 19. Le critère ne dépend pas du pointeur.

   ⚠️ PADDING sur `inline-block`, jamais `inline-flex` : un conteneur flex fait
   de chaque nœud un élément et perd les nœuds de texte purement blancs. Le
   piège n'est pas théorique — mesuré à 760 px, `.back-link` rendait
   « ‹ RETOUR AUX JOUEURS » et « · filtres conservés » sur DEUX lignes, l'espace
   nu qui précède `<span class="back-keep">` ayant disparu. C'est le même défaut
   que le « LamineYAMAL » des noms de joueurs, resté latent dans le bloc
   tactile ; il est corrigé là-bas du même coup. */
.back-link, .fx-joueur, .tm-link, .nj-lien, .fx-lire, .rm-plus {
  display: inline-block; padding-top: 4px; padding-bottom: 4px;
}
/* `min-width` en plus pour les libellés très courts : « Âge » ne fait que
   19 px de large, « Act. » 22 — hauteur conforme, largeur non. */
table.grid thead th a { min-width: 24px; }

/* ── Grille de cartes ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 14px; margin-bottom: 18px; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
/* `h2` autant que `h3` : les cartes placées SOUS un `.section-title` en sont
   les filles (h3), celles qui ouvrent la fiche juste après le nom du joueur
   sont de premier niveau (h2). Même dessin, deux rangs — un titre saute un
   niveau ou pas selon ce qu'il y a au-dessus, pas selon son apparence. */
.card h3, .card h2 {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.7px; font-size: 12px; color: var(--pitch);
  border-left: 3px solid var(--amber); padding-left: 8px; margin: 0 0 12px;
}
.row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; gap: 10px; }
.row:last-child { border-bottom: none; }
.row .k { color: var(--muted); } .row .v { font-weight: 600; text-align: right; }
.contrat-urgent { color: var(--bad); font-weight: 700; }
.contrat-soon { color: var(--warn); font-weight: 700; }
.contrat-expire { color: var(--bad); font-style: italic; }
.contrat-none { color: var(--muted); font-style: italic; }
.big-num { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:30px; text-align:center; padding: 8px 0; }

/* ── Graphe valeur (SVG) ── */
.chart svg { width: 100%; height: auto; display: block; }
.chart .area { fill: rgba(11,61,46,.07); }
.chart .line { fill: none; stroke: var(--pitch); stroke-width: 2.2; }
.chart .dot { fill: var(--amber); stroke: #fff; stroke-width: 1.4; }

/* ── Graphique de valeur marchande : survol ── */
.chart-interactive { position: relative; }
.chart-interactive #vc-hit { cursor: crosshair; }
/* les jalons s'effacent au survol pour laisser lire le point actif */
.chart-interactive .dot { transition: opacity .12s ease-out; }
.chart-interactive.vc-on .dot { opacity: .25; }

.vc-guide, .vc-active { opacity: 0; transition: opacity .12s ease-out; pointer-events: none; }
.vc-on .vc-guide, .vc-on .vc-active { opacity: 1; }
.vc-guide { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.vc-active { fill: var(--amber); stroke: #fff; stroke-width: 2; }

.vc-tip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  background: var(--ink); color: var(--on-pitch); border-radius: 5px;
  padding: 6px 10px; white-space: nowrap; line-height: 1.35;
  box-shadow: 0 6px 20px rgba(11,61,46,.28);
}
.vc-tip b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 800; }
.vc-tip span { display: block; font-size: 11.5px; opacity: .8; }
.vc-tip em { display: block; font-size: 11.5px; font-style: normal; color: var(--amber); }
.vc-tip::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
/* bascule sous le point quand il est trop haut : évite de masquer le grand chiffre */
.vc-tip.below { transform: translate(-50%, 14px); }
.vc-tip.below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .chart-interactive .dot, .vc-guide, .vc-active { transition: none; }
}

/* ── Percentiles SB ── */
.perc-group { margin-bottom: 6px; }
.perc-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.perc-head .t { font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.6px; font-size:14px; color: var(--pitch); }
.perc-head .r { font-size:12px; color: var(--muted); }
/* Trois colonnes : intitulé, barre, valeur. La valeur était POSÉE SUR la
   barre (`position:absolute` dans `.track`), donc à cheval sur la limite du
   remplissage — illisible une ligne sur deux. Elle a sa colonne, alignée à
   droite, en chiffres tabulaires pour que les quarante lignes du bloc se
   comparent verticalement. */
.perc { display: grid; grid-template-columns: 130px 1fr 96px; align-items: center; gap: 10px; margin-bottom: 8px; }
.perc .lbl { font-size: 13px; color: var(--ink-2); font-weight: 500; text-align: right; }
.perc .track { position: relative; height: 22px; background: var(--paper); border-radius: 3px; overflow: hidden; }
.perc .fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; }
.perc .fill.elite { background: var(--p-elite); } .perc .fill.good { background: var(--p-good); }
.perc .fill.avg { background: var(--p-avg); } .perc .fill.low { background: var(--p-low); }
.perc .fill.poor { background: var(--p-poor); }
.perc .val { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  font-family:'Barlow Condensed',sans-serif; font-size: 12px; white-space: nowrap; }
.perc .val b { font-weight: 700; color: var(--ink); }
/* Le rang est un repère, pas la mesure : il passe derrière la valeur. */
.perc .val .rg { font-weight: 600; color: var(--muted); font-size: 11.5px; }
.perc .val sup { font-size: .75em; }

/* Sous 560 px la valeur passe SOUS la barre plutôt que de l'écraser : à trois
   colonnes, 96 px de valeur ne laissent plus rien à la barre. */
@media (max-width: 560px) {
  .perc { grid-template-columns: 110px 1fr; row-gap: 2px; }
  .perc .val { grid-column: 2; justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RAPPORTS DE SCOUTING
   Un rapport se lit comme une ligne de carnet : la date en talon, le fond à
   gauche, le verdict chiffré à droite. Même vocabulaire sur la fiche joueur et
   sur la page Rapports — un scout doit reconnaître la forme d'un coup d'œil.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 22,5 × 23 px mesurés sur le poste de bureau : les trois blocs `@media` les
   remontaient bien à 38 px, mais sous les points d'arrêt mobiles seulement.
   Le critère de taille de cible ne dépend pas du pointeur, et les flèches
   ↑ ↓ des listes n'ont aucune zone équivalente à viser. */
.icon-btn { background:none; border:1px solid var(--line-2); border-radius:4px;
  cursor:pointer; padding:3px 7px; font-size:13px; color: var(--muted);
  min-width:24px; min-height:24px; }
.icon-btn:hover { border-color: var(--pitch); color: var(--pitch); }
.icon-btn:focus-visible { outline: 2px solid var(--pitch); outline-offset: 1px; }
/* 23 px mesurés : `inline-flex` est sans danger ici, ces liens ne portent
   qu'un seul nœud de texte (« ⤓ PDF », « Pièce jointe »). */
.obs-file, .fx-piece {
  background: var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:2px 8px; font-size:11.5px; font-weight:600; color: var(--pitch);
  min-height:24px; display:inline-flex; align-items:center;
}
.fx-piece:hover { border-color: var(--pitch); }

.count-inline {
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:13px;
  color: var(--muted); background: var(--paper); border:1px solid var(--line);
  border-radius: 10px; padding: 0 8px; letter-spacing:.4px;
}

/* Avis de cloisonnement. Délibérément NEUTRE — ni avertissement, ni erreur :
   il ne s'est rien passé d'anormal, la cellule a simplement déjà travaillé ce
   joueur. Un ton d'alerte (rouge, ambre) laisserait croire à un problème et
   pousserait à cliquer pour « régler » quelque chose. */
/* ⚠️ PAS de liseré latéral ici, contrairement à `.bgc` qui lui ressemble.
   Sur `.bgc` le liseré ENCODE le niveau de vigilance : sa couleur est une
   donnée. Ici il n'encoderait rien — ce serait le bandeau décoratif que le
   projet s'interdit ailleurs, et l'exception maison d'`app.css` porte sur
   tout le fichier, donc elle l'aurait couvert en silence. */
.rap-cloison {
  margin: 0 0 14px; padding: 11px 14px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 78ch;
}
.rap-cloison strong { color: var(--ink); }

/* ── Onglets de recommandation (filtres) ── */
.reco-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.reco-tab {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.7px; font-size: 13px;
  color: var(--ink-2); background: var(--surface);
  border:1px solid var(--line-2); border-radius: 4px;
  padding: 7px 13px; transition: border-color .15s, color .15s, background .15s;
}
.reco-tab:hover { border-color: var(--pitch); color: var(--pitch); }
.reco-tab:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; }
.reco-tab-n {
  font-size: 12px; font-weight:700; color: var(--muted);
  background: var(--paper); border-radius: 9px; padding: 0 7px;
}
.reco-tab.on { background: var(--pitch); border-color: var(--pitch); color:var(--on-pitch); }
.reco-tab.on .reco-tab-n { background: rgba(255,255,255,.16); color:var(--on-pitch); }
.reco-tab.on.r-avancer { background: var(--amber); border-color: var(--amber); color: var(--pitch); }
.reco-tab.on.r-avancer .reco-tab-n { background: rgba(11,61,46,.14); color: var(--pitch); }
.reco-tab.on.r-pas_interet { background: var(--bad); border-color: var(--bad); color:var(--on-pitch); }

/* ── Pastille de recommandation ── */
.reco {
  display:inline-block; border-radius:3px; padding:2px 10px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; font-size: 12px;
  border:1px solid transparent; white-space:nowrap;
}
.r-avancer     { background:var(--n3-bg); color:var(--n3-fg); border-color:var(--n3-line); }
.r-suivre      { background:var(--success-bg); color:var(--success-fg); border-color:var(--success-line); }
.r-pas_interet { background:var(--n4-bg); color:var(--n4-fg); border-color:var(--n4-line); }

/* ── Flux de rapports ── */
.flux { display:flex; flex-direction:column; gap:10px; }
.fx, .rap-view {
  display:grid; grid-template-columns: 54px minmax(0,1fr) auto;
  gap: 0 16px; align-items:start;
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px;
}
.rap { background: var(--surface); border-radius: var(--radius); }
/* Même piège que .rf-field : `display:grid` masquerait l'effet de [hidden] et la
   vue resterait affichée sous le formulaire d'édition. */
.rap-view[hidden] { display:none; }

/* Talon de date : le jour porte le repère, le mois le contexte. */
.fx-jour { text-align:center; padding-top:1px; }
.fx-jour b {
  display:block; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size: 26px; line-height:1; color: var(--pitch);
}
.fx-jour i {
  display:block; font-style:normal; font-family:'Barlow Condensed',sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:1px;
  font-size: 11.5px; color: var(--muted); margin-top:2px;
}

.fx-corps { min-width:0; }
.fx-titre { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.fx-joueur {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.3px; font-size:19px;
  color: var(--ink); line-height:1.15;
}
.fx-joueur:hover { color: var(--pitch); text-decoration: underline; text-underline-offset: 3px; }
.fx-prenom { font-weight:500; color: var(--ink-2); }
.fx-ctx {
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.6px; font-size: 12px;
  color: var(--pitch);
}
.fx-club { font-size:13px; color: var(--muted); }
/* Le commentaire est borné à 3 lignes : dans un flux, un rapport bavard ne
   doit pas repousser les suivants hors de l'écran. Le texte entier se lit dans
   la surcouche. */
.fx-texte {
  margin: 7px 0 0; font-size:14px; line-height:1.5;
  white-space:pre-wrap; color: var(--ink); max-width: 72ch;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
/* « Tout lire » : posé par le JS uniquement quand le texte est vraiment coupé. */
/* « Tout lire » faisait 48 × 14 : c'est la commande qui ouvre le rapport
   complet, elle ne peut pas être la plus petite cible de la carte. Le padding
   la porte à 24 px sans déplacer le soulignement, posé par `text-decoration`. */
.fx-lire {
  background:none; border:0; padding:5px 0; cursor:pointer;
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.6px; font-size:12px;
  color: var(--pitch); text-decoration:underline; text-underline-offset:3px;
}
.fx-lire:hover { color: var(--amber-2); }
.fx-lire:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; }
.fx-pied { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.fx-signe {
  margin-left:auto; width:26px; height:26px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--pitch); color:var(--on-pitch); border-radius:50%;
  font-family:'Barlow Condensed',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.5px;
}

/* Carnet de notes : trois mesures alignées, lues verticalement. */
.carnet {
  display:flex; gap:14px; margin:0; padding:0 0 0 16px;
  border-left:1px solid var(--line); flex:none;
}
.carnet > div { display:flex; flex-direction:column; align-items:center; gap:4px; }
.carnet dt {
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.7px; font-size:10.5px;
  color: var(--muted);
}
.carnet dd { margin:0; }
.carnet .n, .carnet .f {
  display:flex; align-items:center; justify-content:center;
  min-width:34px; height:30px; padding:0 8px; border-radius:4px;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px;
  border:1px solid transparent;
}
.carnet .f { font-size:14px; letter-spacing:.5px; text-transform:uppercase; }
.n-1 { background:var(--n1-bg); color:var(--n1-fg); border-color:var(--n1-line); }
.n-2 { background:var(--n2-bg); color:var(--n2-fg); border-color:var(--n2-line); }
.n-3 { background:var(--n3-bg); color:var(--n3-fg); border-color:var(--n3-line); }
.n-4 { background:var(--n4-bg); color:var(--n4-fg); border-color:var(--n4-line); }
.n-x, .f-na { background: var(--paper); color: var(--muted); border-color: var(--line); }
/* ⚠️ La faisabilité n'est PAS une note : c'est un oui/non. Elle empruntait les
   jetons de la note 1 tant que ceux-ci étaient verts ; maintenant qu'ils sont
   bleus, « Faisable : oui » aurait viré au bleu sans que rien ne l'ait décidé.
   Elle passe donc sur les jetons de succès — exactement les valeurs qu'elle
   affichait hier, cette fois nommées pour ce qu'elles disent. */
.f-oui { background:var(--success-bg); color:var(--success-fg); border-color:var(--success-line); }
.f-non { background:var(--n4-bg); color:var(--n4-fg); border-color:var(--n4-line); }

/* ── Surcouche de lecture d'un rapport ──
   Le fond s'assombrit et se floute : la liste reste visible derrière, on lit
   « par-dessus » sans avoir quitté sa place. */
.ovl { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 24px; }
.ovl[hidden] { display: none; }
.ovl-fond {
  position: absolute; inset: 0; background: rgba(11,61,46,.55);
  backdrop-filter: blur(3px); animation: ovl-fondu .18s ease-out;
}
/* Pas de liseré ambré ici : à 3 px sur un coin arrondi il laisse deux moignons
   carrés, et la surcouche est déjà détachée par le fond assombri et l'ombre
   portée. C'est une surface de lecture — rien à y décorer. */
.ovl-boite {
  position: relative; width: min(680px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(11,61,46,.28), 0 2px 8px rgba(11,61,46,.14);
  padding: 24px 28px 26px;
  animation: ovl-monte .22s cubic-bezier(.16,.84,.44,1);
}
@keyframes ovl-fondu { from { opacity: 0; } }
@keyframes ovl-monte { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .ovl-fond, .ovl-boite { animation: none; }
}
.ovl-x {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 1px solid var(--line-2); border-radius: 4px;
  width: 30px; height: 30px; cursor: pointer; font-size: 14px; color: var(--muted);
}
.ovl-x:hover { border-color: var(--pitch); color: var(--pitch); }
.ovl-x:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; }
/* Le fond ne défile plus tant que la surcouche est ouverte. */
body.ovl-ouvert { overflow: hidden; }

.rd-tete { margin: 0 40px 14px 0; }
.rd-joueur {
  display: block; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:-.2px; font-size:26px; line-height:1.1;
  color: var(--ink);
}
a.rd-joueur:hover { color: var(--pitch); text-decoration: underline; text-underline-offset: 4px; }
.rd-club { font-size: 13px; color: var(--muted); }

.rd-meta { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: 10px 16px; margin: 0 0 16px; padding: 14px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.rd-meta > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rd-meta dt {
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.7px; font-size:10.5px; color: var(--muted);
}
.rd-meta dd { margin:0; font-size:14px; font-weight:600; color: var(--ink); }

.carnet.rd-carnet { padding:0; border-left:0; justify-content:flex-start; gap:18px; }
.rd-reco { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }

.rd-bloc { margin-top: 18px; }
.rd-bloc h4 {
  margin: 0 0 6px; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.7px; font-size:12px; color: var(--pitch);
}
.rd-texte {
  margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; max-width: 68ch;
}
.rd-vide { margin: 18px 0 0; font-size: 14px; color: var(--muted); font-style: italic; }

/* ── Dossier du joueur dans la surcouche ──
   Deux séries distinctes (matchs / entretiens) : elles ne se lisent pas de la
   même façon, les mélanger effacerait d'où vient chaque jugement. */
.rd-dossier { border-top: 1px solid var(--line); padding-top: 16px; }
.rd-dossier-t { margin: 0 0 4px; }
.rd-serie { margin-top: 14px; }
.rd-serie h5 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 7px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px; font-size: 12px; color: var(--ink-2);
}
.rd-serie h5 span {
  font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 11.5px;
  color: var(--muted); background: var(--paper); border: 1px solid var(--line);
  border-radius: 9px; padding: 0 7px; letter-spacing: 0; text-transform: none;
}
.rd-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rd-lignes li {
  display: grid;
  /* 86 px et non 58 : la date passe en toutes lettres (« 2 août 2026 »),
     comme le reste de la prose. La colonne suivante est en `minmax(0, 1fr)`,
     c'est elle qui absorbe la différence. */
  grid-template-columns: 86px minmax(0, 1fr) auto auto 24px;
  align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--paper); font-size: 12px;
}
.rd-lignes li.est-courant { background: var(--surface); border-color: var(--amber); }
.rm-date {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px;
  color: var(--pitch);
}
.rm-quoi { font-weight: 600; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rm-notes { display: flex; gap: 4px; }
.rm-notes .n {
  display: flex; align-items: center; justify-content: center;
  min-width: 22px; height: 21px; border-radius: 3px; border: 1px solid transparent;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px;
}
.rm-signe {
  width: 22px; height: 22px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--pitch); color: var(--on-pitch); border-radius: 50%;
  font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 700;
}
.rm-ici {
  grid-column: 1 / -1;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .7px; color: var(--amber-2);
}
/* Borné à 2 lignes, dépliable sur place : on ne quitte pas le dossier pour lire. */
.rm-texte {
  grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; line-height: 1.45;
  color: var(--ink-2); white-space: pre-wrap;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.rm-texte.est-deplie {
  display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible;
}
.rm-plus {
  grid-column: 1 / -1; justify-self: start; margin-top: 2px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px; font-size: 11.5px;
  color: var(--pitch); text-decoration: underline; text-underline-offset: 3px;
}
.rm-plus:hover { color: var(--amber-2); }
.rm-plus:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; }

@media (max-width: 560px) {
  .rd-lignes li { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .rd-lignes .reco, .rm-signe { grid-column: auto; }
}

/* La carte entière ouvre la surcouche : elle doit le dire au survol. */
[data-rapport-carte] { cursor: pointer; }
[data-rapport-carte]:hover { border-color: var(--line-2); box-shadow: 0 2px 6px rgba(11,61,46,.07), 0 8px 22px rgba(11,61,46,.06); }
[data-rapport-carte]:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; }

/* Note A-D en cellule de tableau — même code couleur que le carnet, en compact. */
.tag-n {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:22px; border-radius:3px; padding:0 6px;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:14px;
  border:1px solid transparent;
}

/* Carte de rapport sur la fiche : mêmes règles, plus les actions. */
.rap-view .fx-titre { align-items:center; }
.rap-actions { display:flex; gap:6px; margin-left:auto; }
.rap-actions form { margin:0; }

/* ── État vide ── */
.vide {
  background: var(--surface); border:1px dashed var(--line-2);
  border-radius: var(--radius); padding: 26px 22px; text-align:center;
}
.vide-titre {
  margin:0; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; font-size:16px; color: var(--ink-2);
}
.vide-aide { margin:6px 0 0; font-size:14px; color: var(--muted); }
.vide-aide a { color: var(--pitch); font-weight:600; text-decoration: underline; text-underline-offset: 3px; }

/* ═══ FORMULAIRE DE RAPPORT ═══ */
.rf-adder { margin-bottom: 14px; }
.rf-adder > summary {
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.7px; font-size:14px;
  color: var(--pitch); background: var(--surface);
  border:1px solid var(--line-2); border-radius:5px; padding: 8px 15px;
  transition: border-color .15s, background .15s;
}
.rf-adder > summary::-webkit-details-marker { display:none; }
.rf-adder > summary::before { content:"＋"; color: var(--amber); font-weight:800; font-size:17px; }
.rf-adder > summary:hover { border-color: var(--pitch); background: var(--paper); }
.rf-adder > summary:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; }
.rf-adder[open] > summary { margin-bottom: 12px; }
.rf-adder[open] > summary::before { content:"−"; }

.rf-wrap {
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px 16px;
}
.rap-edit { margin-top: 8px; }

.rf { display:flex; flex-direction:column; gap:16px; }
.rf-row { display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; }
.rf-row-eval { gap:26px; }
.rf-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
/* `display:flex` d'une classe l'emporte sur le `display:none` que le navigateur
   applique à [hidden] : sans ceci, masquer le champ « adversaire » en JS reste
   sans effet à l'écran. Vaut pour tout .rf-field masqué. */
.rf-field[hidden] { display:none; }
.rf-field-date { width:170px; }
.rf-field-adv { flex:1; min-width:200px; max-width:340px; }
.rf-label {
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.8px; font-size:11.5px;
  color: var(--muted);
}
/* `select` compris : la liste des auteurs restait un contrôle natif brut au
   milieu de champs habillés — même règle que `.field select` des filtres. */
.rf input[type=text], .rf input[type=date], .rf select, .rf textarea {
  font-family:'Barlow',sans-serif; font-size:14px; padding:8px 11px;
  border:1px solid var(--line-2); border-radius:5px; background: var(--surface);
  color: var(--ink); width:100%;
}
.rf textarea { min-height:104px; resize:vertical; line-height:1.55; max-width:75ch; }
.rf input:focus, .rf select:focus, .rf textarea:focus {
  outline:none; border-color: var(--pitch); box-shadow: 0 0 0 3px rgba(11,61,46,.08);
}
.rf ::placeholder { color: var(--muted); }

/* Contrôle segmenté (type de rapport, faisabilité) */
.seg { display:inline-flex; border:1px solid var(--line-2); border-radius:5px; overflow:hidden; }
.seg-opt { position:relative; display:flex; }
.seg-opt + .seg-opt { border-left:1px solid var(--line-2); }
.seg-opt input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.seg-opt span {
  display:flex; align-items:center; justify-content:center;
  padding: 8px 16px; min-width:56px;
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.7px; font-size: 13px;
  color: var(--ink-2); background: var(--surface); cursor:pointer;
  transition: background .15s, color .15s;
}
.seg-opt:hover span { background: var(--paper); }
.seg-opt input:checked + span { background: var(--pitch); color:var(--on-pitch); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--pitch); outline-offset: -2px; }
.seg-bool .seg-oui input:checked + span { background: var(--ok); }
.seg-bool .seg-non input:checked + span { background: var(--bad); }

/* Pastilles de note A-D */
.notes { display:inline-flex; gap:6px; }
.note-opt { position:relative; display:flex; }
.note-opt input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.note-opt span {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:38px; border-radius:5px; cursor:pointer;
  border:1px solid var(--line-2); background: var(--surface);
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px;
  color: var(--ink-2); transition: all .15s;
}
.note-opt:hover span { border-color: var(--pitch); color: var(--pitch); }
.note-opt input:focus-visible + span { outline: 2px solid var(--pitch); outline-offset: 2px; }
.note-opt.n-1 input:checked + span { background:var(--n1-bg); border-color:var(--n1-fg); color:var(--n1-fg); }
.note-opt.n-2 input:checked + span { background:var(--n2-bg); border-color:var(--n2-fg); color:var(--n2-fg); }
.note-opt.n-3 input:checked + span { background:var(--n3-bg); border-color:var(--n3-fg); color:var(--n3-fg); }
.note-opt.n-4 input:checked + span { background:var(--n4-bg); border-color:var(--n4-fg); color:var(--n4-fg); }

/* Cartes de recommandation : le choix le plus lourd du formulaire */
.recos { display:flex; gap:8px; flex-wrap:wrap; }
.reco-opt { position:relative; display:flex; flex:1 1 190px; }
.reco-opt input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.reco-opt span {
  display:flex; align-items:center; width:100%; gap:9px; cursor:pointer;
  padding: 11px 14px; border:1px solid var(--line-2); border-radius:5px;
  background: var(--surface); color: var(--ink-2);
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.6px; font-size: 13px;
  transition: all .15s;
}
/* Puce de sélection : elle se remplit, elle ne change pas de taille. */
.reco-opt span::before {
  content:""; flex:none; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--line-2); background: var(--surface);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.reco-opt:hover span { border-color: var(--pitch); color: var(--pitch); }
.reco-opt input:focus-visible + span { outline: 2px solid var(--pitch); outline-offset: 2px; }
.reco-opt input:checked + span { border-color: currentColor; font-weight:700; }
.reco-opt input:checked + span::before { box-shadow: inset 0 0 0 3px var(--surface); }
.reco-opt.r-avancer input:checked + span { background:var(--n3-bg); color:var(--n3-fg); }
.reco-opt.r-avancer input:checked + span::before { background:var(--n3-fg); border-color:var(--n3-fg); }
.reco-opt.r-suivre input:checked + span { background:var(--success-bg); color:var(--success-fg); }
.reco-opt.r-suivre input:checked + span::before { background:var(--success-fg); border-color:var(--success-fg); }
.reco-opt.r-pas_interet input:checked + span { background:var(--n4-bg); color:var(--n4-fg); }
.reco-opt.r-pas_interet input:checked + span::before { background:var(--n4-fg); border-color:var(--n4-fg); }

/* Pied de formulaire */
.rf-foot {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; border-top:1px solid var(--line); padding-top:14px;
}
.rf-foot-left, .rf-foot-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Assez large pour un nom complet — 120 px tronquaient « Alexis Huot-Marchand ».
   `width:auto` annule le 100 % du contrôle : le pied de formulaire est une
   ligne, pas une colonne. */
.rf-scout { width:auto; min-width:200px; max-width:100%; }
.rf-file { position:relative; display:inline-flex; }
.rf-file input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.rf-file-btn {
  display:inline-flex; align-items:center; gap:6px; padding: 8px 13px;
  border:1px dashed var(--line-2); border-radius:5px; cursor:pointer;
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.6px; font-size: 12px; color: var(--ink-2);
}
.rf-file:hover .rf-file-btn { border-color: var(--pitch); color: var(--pitch); }
.rf-file input:focus-visible + .rf-file-btn { outline: 2px solid var(--pitch); outline-offset: 2px; }

@media (max-width: 720px) {
  .fx, .rap-view { grid-template-columns: 44px minmax(0,1fr); gap: 0 12px; }
  .fx-jour b { font-size: 22px; }
  /* Le carnet passe sous le corps, en ligne : il reste lisible sans écraser le texte. */
  .carnet {
    grid-column: 1 / -1; margin-top:12px; padding: 12px 0 0;
    border-left:0; border-top:1px solid var(--line); justify-content:space-around;
  }
  .rf-row, .rf-row-eval { gap:14px; }
  .rf-field-date { width:100%; }
  .reco-opt { flex-basis:100%; }
}

/* ── Puce PPI (bandeau) ── */
.ppi-chip {
  display:inline-block; margin-top:8px;
  background: var(--amber); color: var(--pitch);
  border-radius: 3px; padding: 4px 12px;
  font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:600;
  letter-spacing:.4px;
}
.ppi-chip strong { font-size:18px; font-weight:800; }
.ppi-chip .ppi-proj { font-size: 12px; opacity:.85; }

/* rappel discret : le retour vers la liste rétablit les filtres */
.back-keep { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--muted); font-weight: 500; }

/* ── Échelle de percentile partagée (liste + compatibilité) ──
   `--tc` sert de FOND de barre : inchangé, c'est le langage visuel du produit.
   `--tc-solide` / `--tc-encre` ne servent qu'aux rares pastilles pleines qui
   portent du texte, où le blanc systématique donnait 1,95:1 sur l'ambre. */
.t-elite { --tc: var(--p-elite); --tc-solide: var(--p-elite-bg); --tc-encre: var(--p-elite-fg); --tc-texte: var(--p-elite-tx); }
.t-good  { --tc: var(--p-good);  --tc-solide: var(--p-good);     --tc-encre: var(--p-good-fg);  --tc-texte: var(--p-good-tx); }
.t-avg   { --tc: var(--p-avg);   --tc-solide: var(--p-avg);      --tc-encre: var(--p-avg-fg);   --tc-texte: var(--p-avg-tx); }
.t-low   { --tc: var(--p-low);   --tc-solide: var(--p-low);      --tc-encre: var(--p-low-fg);   --tc-texte: var(--p-low-tx); }
.t-poor  { --tc: var(--p-poor);  --tc-solide: var(--p-poor-bg);  --tc-encre: var(--p-poor-fg);  --tc-texte: var(--p-poor-tx); }

/* ── Bloc "cible de recrutement" (page liste) ── */
.target {
  margin-top: 14px; padding: 14px 16px 4px;
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  background: color-mix(in srgb, var(--pitch) 3%, var(--surface));
}
.target-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.target-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; font-size: 13px; color: var(--pitch);
}
.target-hint { font-size: 12px; color: var(--muted); }
.target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.target select:disabled { opacity: .5; cursor: not-allowed; }

/* pastille de percentile dans le tableau */
.fitpct {
  display: inline-block; min-width: 34px; padding: 2px 8px; border-radius: 20px;
  font-weight: 700; font-size: 13px; color: var(--on-pitch); background: var(--tc, var(--muted));
}
table.grid td .val { white-space: nowrap; }
.fit-na { color: var(--muted); }   /* --line-2 sur blanc = 1,45:1 */
table.grid th.col-fit { background: var(--pitch-3); }

/* ── Compatibilité championnat (fiche joueur) ── */
.fit-card { margin-bottom: 18px; }
.fit-pick { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; font-size: 14px; }
.fit-pick label { color: var(--ink-2); }
.fit-pick select {
  width: auto; min-width: 190px; font-weight: 700; color: var(--pitch);
  padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--surface);
}
.fit-pos { color: var(--muted); }

.fit-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.fit-axis-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.fit-axis-head span {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; font-size: 13px; color: var(--ink-2);
}
/* transition "valeur chez lui -> valeur dans le championnat visé" */
.fit-move { display: flex; align-items: flex-end; gap: 14px; margin: 2px 0 10px; flex-wrap: wrap; }
.fit-move b {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 40px; line-height: .95;
}
.fit-move i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.fit-move .fm-from b { color: var(--muted); font-size: 30px; }
/* Nombre de 30 px : variante TEXTE du palier — `--tc` est une couleur de
   barre et tombait à 2,72:1 sur `--p-low`. */
.fit-move .fm-to b { color: var(--tc-texte, var(--tc, var(--pitch))); }
.fit-move .fm-arrow { font-size: 22px; color: var(--line-2); padding-bottom: 14px; }
.fit-bar { height: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.fit-fill { display: block; height: 100%; background: var(--tc, var(--pitch)); border-radius: 6px; }

/* alerte points faibles */
.fit-alert {
  margin-top: 18px; padding: 13px 15px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--p-poor) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--p-poor) 30%, var(--surface));
}
.fit-alert-head {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; font-size: 13px; color: var(--p-poor-tx); margin-bottom: 9px;
}
.fit-alert ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.fit-alert li { display: grid; grid-template-columns: 1fr 110px 40px; align-items: center; gap: 12px; font-size: 13px; }
.fit-alert .w-lab { color: var(--ink); font-weight: 500; }
/* le rail reste bien visible : une barre à 0 % doit se lire comme "vide", pas comme absente */
.fit-alert .w-bar {
  height: 8px; background: var(--surface); border-radius: 5px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--p-poor) 35%, var(--surface));
}
.fit-alert .w-fill { display: block; height: 100%; background: var(--p-poor); border-radius: 5px 0 0 5px; }
/* Sur le fond teinté de l'encadré, `--p-poor` tombe à 4,05:1 : variante TEXTE. */
.fit-alert .w-pct { text-align: right; font-weight: 800; color: var(--p-poor-tx); font-variant-numeric: tabular-nums; }
.fit-ok {
  margin-top: 18px; padding: 11px 15px; border-radius: var(--radius); font-size: 13px;
  color: var(--p-elite); background: color-mix(in srgb, var(--p-elite) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--p-elite) 25%, var(--surface));
}

/* ── Joueurs similaires ── */
.sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.sim-card {
  display: block; border: 1px solid var(--line); border-radius: 6px; padding: 11px 13px;
  background: var(--surface); transition: border-color .15s, transform .12s, box-shadow .15s;
}
a.sim-card:hover { border-color: var(--pitch); transform: translateY(-2px); box-shadow: var(--shadow); }
.sim-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.15; }
.sim-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.sim-prox { height: 5px; background: var(--paper); border-radius: 3px; overflow: hidden; margin: 9px 0 2px; }
.sim-prox-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--amber-2), var(--amber)); border-radius: 3px; }
.sim-foot { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.sim-ppi {
  /* Pastille PLEINE : fond et encre viennent de la paire du palier — le
     `color:var(--on-pitch)` d'origine donnait 1,95:1 sur `--p-avg`. */
  background: var(--tc-solide, var(--tc, var(--pitch))); color: var(--tc-encre, #fff);
  border-radius: 3px; padding: 1px 7px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
}
.sim-inbase { font-size: 11.5px; color: var(--amber-fg); font-weight: 700; margin-left: auto; }

.hint { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 9px 0 0; }
.hint b { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { .sim-card { transition: none; } }

/* ── Paramètres ── */
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--line-2); margin-bottom:18px; }
.tabs a {
  font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.7px;
  font-size:14px; padding:8px 14px; color: var(--muted); border-bottom:3px solid transparent; margin-bottom:-1px;
}
.tabs a.active { color: var(--pitch); border-bottom-color: var(--amber); }
.stat-strip { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:0; border:1px solid var(--line);
  border-radius: var(--radius); overflow:hidden; margin-bottom:20px; background:var(--surface); }
.stat-cell { padding:16px 18px; border-right:1px solid var(--line); }
.stat-cell:last-child { border-right:none; }
.stat-cell .n { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:34px; color: var(--pitch); line-height:1; }
.stat-cell .l { font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.8px;
  font-size:12px; color: var(--muted); margin-top:4px; }

@media (max-width: 720px) {
  .obs-form .grid2 { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 34px; }
  .hero-top { flex-direction: column; }
  .hero-val { text-align: left; }
}

/* ── Bandeau : lecture de droite ──────────────────────────────────────────── */
.hero-val { text-align: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: 14px; }
.hero-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.hero-k { font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: rgba(255,255,255,.75); }
.hero-stat .big { font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 38px; line-height: 1.02; color: var(--on-pitch); }
.hero-stat .trend { font-size: 12px; font-weight: 600; margin: 0; }
.hero-stat-ppi { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16);
  align-self: stretch; align-items: flex-end; }
.ppi-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 30px; line-height: 1.05; color: var(--amber); }
/* `rgba(255,255,255,.5)` sur le vert du bandeau composite à #859E97, soit
   4,26:1 — sous AA pour du 12-14 px. Relevé à .62, ce qui donne 5,5:1 sans
   ramener ces mentions au premier plan : elles restent en retrait du chiffre. */
.ppi-num i { font-style: normal; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.62); margin-left: 1px; }
.hero-proj { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.78); }
.hero-proj i { font-style: normal; color: rgba(255,255,255,.62); font-weight: 500; }

/* ── Trajectoire & projection ─────────────────────────────────────────────── */
.traj-card { padding: 16px 18px 14px; }
.traj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px; }
.traj-fig { margin: 0; min-width: 0; }
.traj-fig figcaption { display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px; flex-wrap: wrap; }
.traj-t { font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; font-size: 14px; color: var(--ink); }
.traj-s { font-size: 11.5px; color: var(--ink-2); }

.traj-chart { position: relative; }
.traj-svg { width: 100%; height: auto; display: block; overflow: visible; }
.traj-hit { fill: transparent; }
.traj-gy { stroke: var(--line); stroke-width: 1; }
.traj-sep { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }
/* 10 px : --muted plafonne à 4,6:1 sur blanc, trop juste pour du texte aussi
   petit. --ink-2 monte à ~7,6:1 sans alourdir la grille. */
.traj-lab-y, .traj-lab-x { font-size: 10.5px; fill: var(--ink-2);
  font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.traj-lab-y { text-anchor: end; }
.traj-lab-x { text-anchor: middle; }

.traj-line { fill: none; stroke-width: 2.2; stroke-linejoin: round;
  stroke-linecap: round; }
.traj-proj { stroke-dasharray: 5 4; }
.traj-band { opacity: .13; }
.traj-dot { fill: var(--surface); stroke-width: 2; }
.traj-dot.is-proj { fill: currentColor; }
.traj-ppi .traj-line, .traj-ppi .traj-dot { stroke: var(--pitch); color: var(--pitch); }
.traj-ppi .traj-band { fill: var(--pitch); }
.traj-val .traj-line, .traj-val .traj-dot { stroke: var(--amber-2); color: var(--amber-2); }
.traj-val .traj-band { fill: var(--amber); opacity: .2; }

.traj-guide, .traj-actif { opacity: 0; transition: opacity .16s ease-out; }
.traj-chart.is-on .traj-guide, .traj-chart.is-on .traj-actif { opacity: 1; }
.traj-guide { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.traj-actif { fill: var(--surface); stroke-width: 2.5; }
.traj-ppi .traj-actif { stroke: var(--pitch); }
.traj-val .traj-actif { stroke: var(--amber-2); }
.traj-actif.is-proj { fill: currentColor; }

.traj-tip { position: absolute; top: 2px; transform: translateX(-50%);
  background: var(--ink); color: var(--on-pitch); border-radius: 4px; padding: 4px 9px;
  font-size: 11.5px; line-height: 1.45; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .16s ease-out; }
.traj-chart.is-on .traj-tip { opacity: 1; }
.traj-chart.tip-bas .traj-tip { top: auto; bottom: 26px; }
.traj-tip b { font-weight: 700; }
.traj-tip span { display: block; color: rgba(255,255,255,.7); }

.traj-cards { display: flex; gap: 10px; margin: 18px 0 4px; flex-wrap: wrap; }
.traj-h { flex: 1 1 130px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 11px; }
.traj-h-t { font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; font-size: 12px; color: var(--ink-2); }
.traj-h-t span { color: var(--muted); font-weight: 500; }
.traj-h-v { font-family: 'Barlow Condensed', sans-serif; font-size: 26px;
  font-weight: 700; line-height: 1.1; color: var(--pitch); margin-top: 3px; }
.traj-h-v small { font-size: 11.5px; color: var(--ink-2); margin-left: 4px;
  font-family: 'Barlow', sans-serif; font-weight: 500; }
.traj-h-v2 { font-size: 17px; color: var(--amber-fg); margin-top: 6px; }
.traj-h-ic { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.traj-note { font-size: 12px; color: var(--ink-2); line-height: 1.55;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  max-width: 78ch; }
.traj-note strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .traj-guide, .traj-actif, .traj-tip { transition: none; }
}

/* ── Lecture à un autre poste ─────────────────────────────────────────────── */
.poste-card { padding: 14px 18px 12px; }
.poste-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.poste-item { flex: 1 1 128px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); }
.poste-item.est-naturel { border-color: var(--pitch); background: var(--surface); }
.poste-n { font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.poste-n span { color: var(--pitch); font-weight: 700; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: .4px; }
.poste-v { font-family: 'Barlow Condensed', sans-serif; font-size: 26px;
  font-weight: 700; color: var(--ink); line-height: 1.1; margin-top: 2px; }
.poste-item.est-naturel .poste-v { color: var(--pitch); }
.poste-v i { font-style: normal; font-size: 11.5px; font-weight: 500;
  color: var(--muted); margin-left: 2px; font-family: 'Barlow', sans-serif; }
.poste-note { font-size: 12px; color: var(--ink-2); line-height: 1.55;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  max-width: 78ch; }
.poste-note strong { color: var(--ink); }

/* ── Effet du club, dans la carte compatibilité ───────────────────────────── */
/* Un seul nombre : l'ÉCART. Afficher deux niveaux absolus juxtaposerait deux
   échelles (celle du championnat visé et l'échelle mondiale) — le lecteur les
   comparerait et se tromperait. */
.fit-ctx { display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); }
.fit-ctx-d { font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 24px; line-height: 1; color: var(--ink-2);
  font-variant-numeric: tabular-nums; min-width: 2.4ch; text-align: right; }
.fit-ctx-t { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.fit-ctx-t b { color: var(--ink); font-weight: 600; }
.fit-ctx.est-bon { background: #F1F8F3; border-color: #C9E4D3; }
/* `--ok` / `--bad` sont calibrés pour des aplats : en TEXTE sur le fond
   teinté de l'encadré, ils plafonnent à ~4,05:1. Variantes texte. */
.fit-ctx.est-bon .fit-ctx-d { color: var(--ok-fg); }
.fit-ctx.est-mauvais { background: #FDF3F1; border-color: #F0D3CC; }
.fit-ctx.est-mauvais .fit-ctx-d { color: var(--p-poor-tx); }

/* ── Lecture par poste ────────────────────────────────────────────────────── */
.fit-postes { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
.fit-postes-k { font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; font-size: 12px;
  color: var(--ink-2); margin-bottom: 9px; }
.poste-bar { height: 4px; border-radius: 2px; background: var(--line);
  overflow: hidden; margin-top: 7px; }
.poste-bar span { display: block; height: 100%; border-radius: 2px; }
.poste-bar .t-elite { background: var(--p-elite); }
.poste-bar .t-good  { background: var(--p-good); }
.poste-bar .t-avg   { background: var(--p-avg); }
.poste-bar .t-low   { background: var(--p-low); }
.poste-bar .t-poor  { background: var(--p-poor); }
/* l'encadré des points faibles n'a qu'une ou deux lignes : il n'a pas besoin
   d'occuper autant de place que les deux axes réunis */
.fit-alert { padding: 11px 13px; }
.fit-alert .hint { margin-bottom: 0; }

/* ── Curseur à double poignée (âge, valeur marchande) ─────────────────────── */
.field-range { gap: 8px; }
.field-range label, .field-range .field-lab { display: flex; justify-content: space-between; align-items: baseline; }
.range-out { font-family: 'Barlow', sans-serif; font-weight: 600; text-transform: none;
  letter-spacing: 0; font-size: 13px; color: var(--pitch);
  font-variant-numeric: tabular-nums; }
/* la piste et les deux <input range> se superposent exactement */
/* 26 px et non 22 : la POIGNÉE passe à 24 px (WCAG 2.2, SC 2.5.8), et il lui
   faut la place. Ce n'est pas cosmétique — `.field .range-h` porte
   `pointer-events: none` pour que deux curseurs superposés (min/max) ne se
   bloquent pas l'un l'autre, donc la seule surface qui capte le pointeur EST
   la poignée. Elle faisait 16 × 16 px, à toutes les largeurs, sur les huit
   curseurs de la liste : la mesure de la boîte de l'`input` (22 px) ne le
   montrait pas, seule la lecture du CSS le disait. */
.range { position: relative; height: 26px; }
.range-track { position: absolute; top: 11px; left: 0; right: 0; height: 4px;
  background: var(--line-2); border-radius: 2px; }
.range-fill { position: absolute; top: 0; height: 100%; background: var(--pitch);
  border-radius: 2px; }
/* `.field input` (0,1,1) l'emportait sur `.range-h` (0,1,0) et habillait les
   curseurs en champs texte : on remonte la spécificité. */
.field .range-h { position: absolute; top: 0; left: 0; width: 100%; height: 26px;
  margin: 0; padding: 0; background: none; border: none; border-radius: 0;
  -webkit-appearance: none; appearance: none; pointer-events: none; }
.field .range-h:focus { outline: none; box-shadow: none; border: none; }
/* seules les poignées captent la souris, pas toute la barre */
.range-h::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  pointer-events: auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--pitch); cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); margin-top: 1px; transition: transform .1s; }
.range-h::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.range-h::-moz-range-thumb { pointer-events: auto; width: 24px; height: 24px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--pitch);
  cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* ⚠️ INDICATEUR DE FOCUS des curseurs — il existait, mais à 18 % d'opacité :
   ~1,3:1 sur fond clair, c'est-à-dire rien de perceptible. Or ces poignées sont
   le seul moyen de régler âge, valeur et moyennes au clavier (Tab 16 à 22 sur
   la liste) : sans repère visible on ne sait pas ce qu'on est en train de
   déplacer. La bague passe en vert plein, doublée d'un halo blanc qui la
   détache aussi bien du rail vert foncé que du fond clair — WCAG 2.4.11 exige
   3:1 contre les couleurs adjacentes, quelles qu'elles soient.
   ⚠️ Firefox n'avait AUCUNE règle de focus : `::-moz-range-thumb` est ajouté.
   Les deux moteurs veulent des sélecteurs séparés — groupés, ils invalident
   toute la règle. */
.range-h:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--pitch);
}
.range-h:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--pitch);
}
.range-h::-webkit-slider-runnable-track { background: none; }
.range-h::-moz-range-track { background: none; }

/* Curseur inactif : tant qu'aucun championnat n'est visé, il n'y a rien à
   filtrer. Le champ reste lisible (on doit comprendre ce qu'il fera), il n'est
   simplement pas manipulable. */
.field-range.est-inactif { opacity: .55; }
.field-range.est-inactif label { color: var(--muted); }
.range-h:disabled { cursor: not-allowed; }
.range-h:disabled::-webkit-slider-thumb { cursor: not-allowed; border-color: var(--line-2); }
.range-h:disabled::-moz-range-thumb { cursor: not-allowed; border-color: var(--line-2); }


/* ── Navigation : trois entrées ne tiennent plus sur un téléphone ──
   Le libellé de marque s'efface avant les liens : le logo suffit à situer
   l'app, les liens sont la seule chose sur laquelle on peut cliquer. */
@media (max-width: 700px) {
  .nav-inner { padding: 0 14px; }
  .brand { margin-right: 10px; font-size: 19px; }
  .nav-links a { padding: 0 11px; font-size: 13px; letter-spacing: .5px; }
  /* cibles tactiles : les petits boutons passaient sous ~24px, durs au pouce */
  .btn-sm { padding: 9px 14px; }
  .icon-btn { min-width: 38px; min-height: 38px; }
}
@media (max-width: 460px) {
  .brand .libelle { display: none; }
  .nav-links a { padding: 0 9px; font-size: 12px; }
  .wrap { padding-left: 14px; padding-right: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LISTES PAR POSTE · BACKGROUND CHECKS · EXPORT PDF
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Listes par poste ───────────────────────────────────────────────────────
   Huit accordéons, un par groupe. Le rang porte la préférence du scout : il se
   change aux flèches, pas en triant une colonne. */

/* Choix du compte — des cartes, pas une liste déroulante : un menu cachait les
   collègues derrière un clic et ne disait rien du contenu de leurs listes.
   Le liseré gauche reprend le motif maison (bandeau de fiche, titres de carte,
   background checks) : il passe à l'ambre sur le compte consulté. */
.lsel { margin: 0 0 20px; }
.lsel-titre {
  margin: 0 0 8px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted);
}
.lsel-grille {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.lsel-carte {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .12s, transform .12s;
}
.lsel-carte:hover { border-color: var(--line-2); border-left-color: var(--amber); transform: translateY(-1px); }
.lsel-carte:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; }
.lsel-carte.est-courant {
  border-color: var(--pitch); border-left-color: var(--amber);
  background: linear-gradient(180deg, rgba(11,61,46,.05), transparent 60%);
}
.lsel-av {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--pitch);
  border: 1px solid var(--line-2);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .5px;
}
.lsel-carte.est-courant .lsel-av {
  background: var(--pitch); color: var(--on-pitch); border-color: var(--pitch);
}
.lsel-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lsel-nom {
  font-weight: 700; font-size: 14px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lsel-role {
  font-size: 11.5px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.lsel-n { flex: none; text-align: right; line-height: 1.1; }
.lsel-n b {
  display: block; font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; color: var(--pitch);
}
.lsel-n small { font-size: 10.5px; color: var(--muted); }

/* Sommaire : huit postes, huit compteurs — où il y a de la matière, d'un coup d'œil. */
.lsom {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 10px 13px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.lsom-total { font-size: 13px; color: var(--muted); }
.lsom-total b { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; color: var(--pitch); }
.lsom-liens { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.lsom-l {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px;
  font-weight: 700; letter-spacing: .5px; color: var(--pitch);
}
.lsom-l:hover { border-color: var(--pitch); background: var(--paper); }
.lsom-l:focus-visible { outline: 2px solid var(--pitch); outline-offset: 1px; }
.lsom-n {
  min-width: 17px; padding: 0 4px; text-align: center; border-radius: 999px;
  background: var(--pitch); color: var(--on-pitch); font-size: 11.5px;
}
/* Un poste vide reste cliquable — il faut pouvoir aller y déposer un joueur —
   mais ne réclame pas le regard. */
.lsom-l.est-vide { color: var(--muted); border-color: var(--line); }
.lsom-l.est-vide .lsom-n { background: var(--line-2); color: var(--ink-2); }

.lg {
  margin-bottom: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  scroll-margin-top: 14px;
}
.lg-tete {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  font-family: 'Barlow Condensed', sans-serif;
  border-left: 3px solid transparent;
}
.lg-tete::-webkit-details-marker { display: none; }
.lg-tete:hover { background: var(--paper); }
.lg-tete:focus-visible { outline: 2px solid var(--pitch); outline-offset: -2px; }
.lg[open] .lg-tete {
  border-bottom: 1px solid var(--line); border-left-color: var(--amber);
  background: linear-gradient(180deg, rgba(11,61,46,.045), transparent);
}
/* Un poste sans joueur se replie visuellement : six accordéons vides à pleine
   hauteur noieraient les deux qui portent quelque chose. */
.lg.est-vide { margin-bottom: 6px; box-shadow: none; }
.lg.est-vide .lg-tete { background: var(--paper); padding: 8px 14px; }
.lg.est-vide .lg-abbr { background: var(--line-2); color: var(--ink-2); }
.lg.est-vide .lg-nom { color: var(--ink-2); }
.lg-abbr {
  min-width: 40px; padding: 3px 7px; text-align: center;
  background: var(--pitch); color: var(--on-pitch); border-radius: 4px;
  font-weight: 700; font-size: 11.5px; letter-spacing: .6px;
}
.lg-nom {
  flex: 1; min-width: 0; font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--pitch);
}
.lg-fleche { color: var(--muted); font-size: 12px; transition: transform .15s; }
.lg[open] .lg-fleche { transform: rotate(180deg); }
.lg-corps { margin: 0; border: none; box-shadow: none; border-radius: 0; }
.lg-rang { text-align: center; }
.lg-rang span {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 4px;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--muted); font-weight: 700; font-size: 12px;
}
/* Les trois premiers rangs sont la tête de liste : c'est là que se joue la
   préférence du scout, elle doit se voir sans compter les lignes. */
.lg-rang .est-tete {
  background: var(--pitch); border-color: var(--pitch); color: var(--on-pitch);
}
.lg-memo {
  display: block; margin-top: 2px; font-size: 12px; color: var(--muted);
}
.lg-actions { white-space: nowrap; text-align: right; }
.lg-actions form { display: inline; }
.lg-actions .icon-btn:disabled { opacity: .25; cursor: default; }
.lg-vide, .lg-pied { padding: 14px; }
.lg-vide { margin: 0; color: var(--muted); font-size: 13px; }
.lg-vide-titre { display: block; font-weight: 700; color: var(--ink-2); }

/* ── Fenêtres (`<dialog>`) ──────────────────────────────────────────────────
   Rendues avec `open` par le serveur : sans JavaScript ce sont de simples
   blocs en ligne, utilisables tels quels. Le script (cf. _modales.html) les
   referme, pose `js` sur <html> et bascule sur `showModal()`.
   D'où les deux jeux de règles : l'état « bloc » par défaut, l'état « fenêtre »
   sous `:modal`. */
.mdl {
  position: static; display: block; width: auto; max-width: 100%;
  margin: 0 0 18px; padding: 0;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.mdl:not([open]) { display: none; }

.mdl:modal {
  width: min(620px, 100%); margin: auto; max-height: 88vh; overflow: auto;
  box-shadow: 0 18px 50px rgba(11, 61, 46, .28);
}
.mdl::backdrop { background: rgba(11, 61, 46, .42); }

.mdl-tete {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  background: var(--paper); border-radius: var(--radius) var(--radius) 0 0;
}
.mdl-t {
  flex: 1; min-width: 0; margin: 0;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; font-size: 15px;
  color: var(--pitch);
}
.mdl-x {
  width: 30px; height: 30px; flex: 0 0 auto;
  background: none; border: 1px solid transparent; border-radius: 5px;
  cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1;
}
.mdl-x:hover { border-color: var(--line-2); color: var(--ink); }
.mdl-pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.mdl-pied .fa-voir { margin-right: auto; }

/* Sans script, un déclencheur qui n'ouvre rien et une croix qui masquerait
   définitivement le formulaire seraient pires que rien : les deux n'existent
   qu'une fois `js` posée. */
.chip-mdl, .mdl-appel, .mdl-x, .mdl-annuler, .pdfx-presets { display: none; }
.js .pdfx-presets { display: grid; }
.js .chip-mdl { display: inline-flex; }
.js .mdl-appel, .js .mdl-annuler { display: inline-flex; }
.js .mdl-x { display: block; }
/* Le titre de la fenêtre fait double emploi avec le déclencheur tant que le
   bloc est en ligne. */
html:not(.js) .mdl-tete { border-bottom: none; }

/* Puce du bandeau : même dessin que « Suivre », en bouton. */
.chip-mdl { cursor: pointer; font: inherit; }

/* ── Choix du poste dans « Ajouter à une liste » ────────────────────────────
   Huit pastilles plutôt qu'une liste déroulante : on voit les huit postes d'un
   coup, et surtout ceux où le joueur est déjà inscrit. Même grammaire que les
   cartes de recommandation du formulaire de rapport (`.reco-opt`). */
.pg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pg-opt { position: relative; display: flex; }
.pg-opt input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0;
  cursor: pointer;
}
.pg-opt span {
  display: flex; align-items: center; width: 100%; gap: 9px; cursor: pointer;
  padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 5px;
  background: var(--surface); color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s;
}
.pg-abbr {
  flex: none; min-width: 34px; padding: 2px 6px; text-align: center;
  border-radius: 4px; background: var(--paper); color: var(--ink-2);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 11.5px; letter-spacing: .6px; font-style: normal;
  transition: background .15s, color .15s;
}
.pg-nom {
  flex: 1; min-width: 0; font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-tag {
  flex: none; font-style: normal; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
}
/* ⚠️ `--amber-2` est calibré pour des aplats et des bordures : en TEXTE sur
   fond clair il tombe à 2,72:1, mesuré au rendu. `--amber-fg` est la variante
   texte de la même couleur, déjà en place pour le compteur de résultats et les
   badges de niveau. Ce libellé se voit désormais sur PLUSIEURS lignes à la fois
   (un joueur peut tenir deux postes) : autant qu'il soit lisible. */
.pg-tag-sug { color: var(--amber-fg); }

.pg-opt:hover span { border-color: var(--pitch); color: var(--pitch); }
.pg-opt input:focus-visible + span { outline: 2px solid var(--pitch); outline-offset: 2px; }
.pg-opt input:checked + span {
  border-color: var(--pitch); background: var(--paper); color: var(--pitch);
}
.pg-opt input:checked + span .pg-abbr { background: var(--pitch); color: var(--on-pitch); }

/* Poste déjà pris : visible mais hors d'atteinte — proposer un choix qui ne
   ferait rien serait pire que de le montrer barré. */
.pg-deja span { opacity: .5; cursor: not-allowed; }
.pg-deja:hover span { border-color: var(--line-2); color: var(--ink-2); }
.pg-deja input { cursor: not-allowed; }

/* ── Contenu du formulaire d'export ─────────────────────────────────────── */
.fa-liste, .pdfx-form { padding: 14px 16px; }
.fa-liste .rf-field { margin-bottom: 14px; }
.fa-voir { font-size: 12px; color: var(--pitch); text-decoration: underline; }
.pdfx-aide { margin: 0 0 12px; font-size: 12px; color: var(--muted); }

/* Trois destinataires, trois jeux de cases. Le bouton porte le libellé ET ce
   que le préréglage veut dire : « Pour un agent » seul n'apprendrait pas
   qu'on retire l'avis interne. */
.pdfx-presets {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.pdfx-preset {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 9px 12px; min-height: 44px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color .15s, background-color .15s;
}
.pdfx-preset:hover { border-color: var(--pitch); background: var(--paper); }
.pdfx-preset:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; }
.pdfx-preset.est-actif { border-color: var(--amber); background: var(--warn-bg); }
.pdfx-preset-t {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; font-size: 13px;
  color: var(--pitch);
}
.pdfx-preset-a { font-size: 11.5px; line-height: 1.35; color: var(--muted); }

/* Ce qui va réellement sortir, en une phrase, juste au-dessus du bouton.
   Les rubriques qui engagent la cellule à l'extérieur sont en gras : c'est sur
   elles qu'on se trompe, pas sur « identité du joueur ». */
.pdfx-recap {
  margin: 14px 0 0; padding: 10px 12px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12px; line-height: 1.5; color: var(--ink-2);
}
.pdfx-recap:empty { display: none; }
.pdfx-recap strong { color: var(--warn-fg); }
.pdfx-recap.est-vide { color: var(--error-fg); background: var(--error-bg);
  border-color: var(--error-line); }
.pdfx-cases {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px 14px;
}
.pdfx-case {
  display: grid; grid-template-columns: auto 1fr; column-gap: 7px;
  align-items: baseline; padding: 5px 2px; cursor: pointer;
}
.pdfx-case input { margin: 0; }
.pdfx-lib { font-size: 13px; }
.pdfx-sub {
  grid-column: 2; font-size: 11.5px; color: var(--muted); line-height: 1.3;
}

/* ── Background checks ──────────────────────────────────────────────────────
   Les alertes remontent en tête (tri fait par la vue) et se signalent par un
   liseré : une information de vigilance enterrée sous six mois de notes
   anodines ne sert à rien. */
/* Le bloc des rapports qui précède n'a pas de marge basse (`.rap-plus` n'en
   pose pas), et `.section-title` n'a pas de marge haute : sans ces deux
   réglages, le titre colle au bouton « Voir les N autres rapports » et la
   section suivante colle à la dernière carte. */
.section-title#background { margin-top: 26px; }
.bgx { display: grid; gap: 10px; margin-bottom: 26px; }
.bgc {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.bgc-alerte { border-left-color: var(--bad); }
.bgc-surveiller { border-left-color: var(--warn); }
.bgc-ras { border-left-color: var(--ok); }
.bgc-view { padding: 12px 14px; }
/* ⚠️ `display:grid` ci-dessous l'emporterait sur le `display:none` que le
   navigateur applique à [hidden] : la règle est indispensable. */
.bgc-view[hidden], .bgc-edit[hidden] { display: none; }
.bgc-tete {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.bgc-theme {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; font-size: 12px;
  color: var(--pitch);
}
.bgc-vig {
  padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.bgc-vig.v-ras { background: var(--success-bg); color: var(--success-fg); }
.bgc-vig.v-surveiller { background: var(--warn-bg); color: var(--warn-fg); }
.bgc-vig.v-alerte { background: var(--error-bg); color: var(--error-fg); }
.bgc-date { font-size: 12px; color: var(--muted); }
.bgc-tete .rap-actions { margin-left: auto; }
.bgc-texte { margin: 0; font-size: 14px; line-height: 1.5; }
.bgc-pied {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-size: 12px; color: var(--muted);
}
.bgc-src { flex: 1; min-width: 0; }
.bgc-pied .fx-signe { margin-left: auto; }

/* Segmenté de vigilance : mêmes couleurs que les pastilles. */
.seg-v-alerte input:checked + span { background: var(--bad); color: var(--on-pitch); }
.seg-v-surveiller input:checked + span { background: var(--amber-fg); color: var(--on-pitch); }
.seg-v-ras input:checked + span { background: var(--ok-fg); color: var(--on-pitch); }

/* Blessures : une barre chronologique par saison, mêmes tokens que les pastilles
   de vigilance. Segments positionnés en % des vraies dates dans la saison (pas des
   cases fixes par mois) — plusieurs pistes par saison seulement si deux épisodes
   se chevauchent (rare, cf. _injuries_saison). */
.inj-saisons { display: flex; flex-direction: column; gap: 4px; }
.inj-saison-ligne { display: flex; align-items: center; gap: 10px; }
.inj-saison-label { flex: 0 0 48px; font-size: 12px; color: var(--muted); }
.inj-saison-barre { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inj-piste { position: relative; height: 14px; background: var(--line-2); border-radius: 4px; }
.inj-seg { position: absolute; top: 0; bottom: 0; min-width: 4px; border-radius: 3px; }
.inj-seg.v-surveiller { background: var(--warn); }
.inj-seg.v-alerte { background: var(--bad); }
.inj-axe-ligne { margin-bottom: 2px; }
.inj-axe { position: relative; height: 14px; }
.inj-tick { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
/* Cliquer une saison déplie son détail : plus fiable qu'un survol sur un
   segment de 2 px pour une blessure d'un jour. */
.inj-saison-detail summary { cursor: pointer; }
.inj-saison-detail summary::-webkit-details-marker { margin-right: 4px; }
.inj-liste { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px 58px; }
.inj-ep { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.inj-periode, .inj-duree, .inj-niveau { color: var(--muted); }

/* ── Épisode saisi à la main : vue / édition ──
   ⚠️ `.inj-ep-vue` porte `display:flex` : sans la règle `[hidden]` explicite,
   il resterait affiché SOUS son propre formulaire d'édition — le piège déjà
   rencontré sur `.rf-field`, `.rap-view` et `.cp-panel`. */
.inj-ep { display: flex; flex-direction: column; gap: 8px; }
.inj-ep-vue { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inj-ep-vue[hidden], .inj-ep-edit[hidden] { display: none; }
.inj-ep-edit { margin: 2px 0 8px; }
/* L'indisponibilité qui court : c'est l'information qu'on cherche en premier
   sur un joueur qu'on projette d'aller voir samedi. */
.inj-court { color: var(--bad); font-weight: 700; }
.inj-src {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; font-size: 10.5px;
  color: var(--amber-fg);
}
.inj-encours { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13px; color: var(--ink-2); min-height: 34px; }
.inj-encours input { width: 16px; height: 16px; accent-color: var(--pitch); cursor: pointer; }
.rf-field-court { flex: 0 1 150px; }
.rf-note { font-size: 11.5px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   POSTES DU JOUEUR
   Transfermarkt n'en donne qu'un, et il se trompe. La cellule corrige et peut
   en reconnaître plusieurs : le bandeau les affiche, la fenêtre les édite.
   Placé AVANT le bloc « MOBILE ET TABLETTE » — rangé après, chaque règle
   écraserait sa propre surcharge @media.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Ligne d'identité du bandeau ── */
.sub-sep { opacity: .5; margin: 0 1px; }
.sub-poste.est-principal { font-weight: 600; }
.sub-corr {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; font-size: 10.5px;
  vertical-align: 1px;
}
/* Le déclencheur d'édition est posé sur le libellé qu'il modifie, pas dans la
   rangée des puces : c'est le poste qu'on vient corriger, pas une commande de
   plus à choisir parmi six. Discret au repos, net au survol et au focus. */
.sub-editer {
  margin-left: 8px; padding: 2px 9px; min-height: 26px;
  background: transparent; color: inherit;
  border: 1px solid rgba(255,255,255,.32); border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px; font-size: 11px;
  cursor: pointer; opacity: .8;
  transition: opacity .15s, background-color .15s, border-color .15s;
}
.sub-editer:hover { opacity: 1; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); }
.sub-editer:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; opacity: 1; }

/* Avertissement : la note stockée porte encore l'ancien poste. Même grammaire
   que le bandeau de provenance des stats — un fond d'attention, pas une alerte
   rouge : rien n'est cassé, une valeur est simplement en retard. */
.note-perime {
  margin: -4px 0 14px; padding: 9px 13px;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  font-size: 12.5px; line-height: 1.45; color: var(--warn-fg);
}
.note-perime b { font-weight: 700; }

/* ── Colonne « Poste » de la liste : postes ajoutés en retrait ──
   Ils se replient sous le principal quand la colonne est étroite : l'espacement
   doit donc valoir dans les deux sens, d'où le `gap` plutôt qu'une marge. */
.pos-groupe { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.pos-sec { opacity: .62; font-weight: 500; }

/* ── Grille d'édition des postes ──
   Une ligne par poste : la case dit « il peut y jouer », l'étoile dit « c'est
   le sien ». Deux listes de douze auraient fait vingt-quatre lignes dans une
   fenêtre pour exprimer la même chose. */
.fa-postes { padding: 14px 16px; }
.pj-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pj-legende { font-size: 11.5px; color: var(--muted); }
.pj { display: grid; gap: 5px; margin-top: 8px; }
.pj-ligne { display: flex; align-items: stretch; gap: 5px; }
.pj-ligne .pj-opt { position: relative; display: flex; flex: 1; min-width: 0; }
.pj-ligne .pj-opt input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.pj-ligne .pj-opt span {
  display: flex; align-items: center; width: 100%; gap: 9px; cursor: pointer;
  padding: 8px 11px; min-height: 40px;
  border: 1px solid var(--line-2); border-radius: 5px;
  background: var(--surface); color: var(--ink-2);
  transition: border-color .15s, background-color .15s, color .15s;
}
.pj-opt:hover span { border-color: var(--pitch); color: var(--pitch); }
.pj-opt input:focus-visible + span { outline: 2px solid var(--pitch); outline-offset: 2px; }
.pj-opt input:checked + span {
  border-color: var(--pitch); background: var(--paper); color: var(--pitch);
}
.pj-opt input:checked + span .pg-abbr { background: var(--pitch); color: var(--on-pitch); }

/* L'étoile : un choix parmi douze, donc un bouton radio — mais dessiné comme
   la marque qu'il pose, pas comme un rond gris. Éteinte, elle se voit à peine ;
   allumée, elle porte l'ambre du produit. */
.pj-etoile { position: relative; display: flex; flex: none; width: 40px; }
.pj-etoile input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.pj-etoile > span[aria-hidden] {
  display: flex; align-items: center; justify-content: center; width: 100%;
  border: 1px solid var(--line-2); border-radius: 5px;
  background: var(--surface); color: var(--line-2);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.pj-etoile:hover > span[aria-hidden] { color: var(--amber-2); border-color: var(--amber-2); }
.pj-etoile input:focus-visible + span { outline: 2px solid var(--pitch); outline-offset: 2px; }
.pj-etoile input:checked + span {
  color: var(--amber); border-color: var(--amber); background: var(--warn-bg);
}
.pj-ligne.est-principal .pj-opt span { border-color: var(--amber); }

/* ══════════════════════════════════════════════════════════════════════════
   VEILLE TWITTER
   La note réutilise la carte des background checks (.bgc et sa famille) : même
   surface, même liseré sémantique, mêmes pastilles. Ne restent ici que les
   pièces propres à la veille — barre de lancement, grille de faits, citations.
   Placé AVANT le bloc « MOBILE ET TABLETTE », sinon ces règles écraseraient
   leurs propres surcharges @media.
   ══════════════════════════════════════════════════════════════════════════ */

.section-title#veille { margin-top: 26px; }

/* ── Barre de lancement ── */
.vt-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; }
.vt-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; min-height: 34px;
  border: 1px solid var(--pitch); border-radius: var(--radius);
  background: var(--pitch); color: var(--on-pitch);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; font-size: 13px;
  cursor: pointer; transition: background .15s ease;
}
.vt-btn:hover:not(:disabled) { background: var(--pitch-2); }
.vt-btn:disabled { opacity: .65; cursor: progress; }
.vt-meta { font-size: 12px; color: var(--muted); }

/* Attente : deux API en série, une quinzaine de secondes. Le pouls dit que
   quelque chose se passe — sans lui l'utilisateur reclique et repaie. */
.vt-attente .vt-btn::before {
  content: ""; width: 11px; height: 11px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: vt-tourne .7s linear infinite;
}
@keyframes vt-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vt-attente .vt-btn::before { animation: none; opacity: .5; }
}

/* ── Bandeaux d'alerte (échec, homonyme, vigilance) ── */
/* Réutilise les tokens d'état ; `v-*` reprend le vocabulaire des pastilles pour
   qu'une même gravité porte partout la même couleur. */
.vt-alerte {
  padding: 9px 12px; border-radius: var(--radius); margin-bottom: 12px;
  font-size: 13px; line-height: 1.5;
}
.vt-alerte.v-alerte { background: var(--error-bg); color: var(--error-fg);
  border: 1px solid var(--error-line); }
.vt-alerte.v-surveiller { background: var(--warn-bg); color: var(--warn-fg);
  border: 1px solid var(--warn-line); }
.vt-alerte strong { font-weight: 700; }
/* Dans la carte, le bandeau devient un encart : marges resserrées, pas de
   seconde carte imbriquée. */
.vt-inset { margin: 10px 0 2px; }
.vt-inset strong { display: block; margin-bottom: 4px; }
.vt-inset .vt-items li { border-color: var(--error-line); }

/* ── La note ── */
.vt-note { margin-bottom: 10px; }
/* La synthèse est la première chose lue : un cran au-dessus du corps de carte,
   et de l'air avant les faits qui la détaillent. */
.vt-synthese { font-size: 14px; line-height: 1.6; margin-bottom: 14px; }

/* Libellé à gauche, contenu à droite. Volontairement PAS en capitales : une
   seule étiquette capitale par carte (.bgc-theme « Départ »), sinon quatre
   intitulés de même force se neutralisent. */
.vt-faits { display: grid; grid-template-columns: max-content 1fr;
  gap: 10px 16px; margin: 0; align-items: baseline; }
.vt-faits dt { font-size: 12px; font-weight: 600; color: var(--muted);
  white-space: nowrap; padding-top: 1px; }
.vt-faits dd { margin: 0; font-size: 13px; line-height: 1.55;
  min-width: 0; overflow-wrap: anywhere; }

/* Listes sans puces : le filet entre les entrées suffit à les séparer, et les
   puces natives n'existent nulle part ailleurs dans la fiche. */
.vt-items { list-style: none; margin: 0; padding: 0; }
.vt-items li + li { margin-top: 5px; padding-top: 5px;
  border-top: 1px solid var(--line); }

/* Citations : filet neutre et italique. Pas d'ambre — il porte l'emphase dans
   ce système (liseré du bandeau joueur, titres de section) et crierait plus
   fort que le contenu sur quatre citations de routine. */
.vt-verbatims { list-style: none; margin: 7px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.vt-verbatims li { padding-left: 10px; border-left: 2px solid var(--line-2);
  font-style: italic; color: var(--ink-2); }

.vt-club {
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-2);
}

/* Réserves : en pied, sous un filet, plus petites. Ce sont des mises en garde
   sur ce qui précède, pas une rubrique de plus au même rang. */
.vt-reserves { margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--line); }
.vt-reserves-lab { display: block; margin-bottom: 5px; font-size: 12px;
  font-weight: 600; color: var(--warn-fg); }
.vt-reserves .vt-items { font-size: 12px; line-height: 1.5;
  color: var(--ink-2); }

/* ── Historique ── */
.vt-histo { margin-bottom: 26px; }
.vt-histo > summary { cursor: pointer; font-size: 13px; color: var(--muted);
  min-height: 34px; display: flex; align-items: center; gap: 6px; }
.vt-histo-liste { display: flex; flex-direction: column; gap: 8px;
  margin: 4px 0 0 4px; }
.vt-histo-ligne { display: flex; gap: 10px; align-items: baseline;
  flex-wrap: wrap; font-size: 13px; }
.vt-histo-date { color: var(--muted); white-space: nowrap; }
.vt-histo-txt { flex: 1; min-width: 0; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

.vide-aide { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   AJOUT D'UN JOUEUR ABSENT DE LA BASE
   Placé AVANT le bloc « MOBILE ET TABLETTE » : rangé après, ses règles
   écraseraient les surcharges @media, comme cela s'est produit pour .mdl.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le lien sous la recherche : présent sans être bruyant. On le voit au moment
   où l'on vient d'échouer à trouver quelqu'un, pas avant. */
/* 22 px : deux de moins que le minimum. Le trait pointillé descend d'un pixel,
   c'est tout ce que coûte la mise à 24 px. */
.nj-lien{display:inline-block;margin-top:6px;font-size:12px;color:var(--muted);
  text-decoration:none;border-bottom:1px dotted currentColor;padding:3px 0}
.nj-lien:hover,.nj-lien:focus-visible{color:var(--pitch)}
.nj-lien strong{font-weight:600;color:var(--pitch)}

.nj{max-width:820px;margin:0 auto;padding:2px 0 48px}
.nj-retour{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;
  padding:8px 2px;min-height:34px}
.nj-retour:hover{color:var(--pitch)}

.nj-tete{margin:12px 0 26px}
.nj-tete h1{margin:0 0 8px;font-size:26px;line-height:1.15;color:var(--ink)}
.nj-tete p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6;max-width:58ch}

/* LE CHEMIN RAPIDE. Coller un lien est le geste de neuf fois sur dix et il
   remplit tout le reste : il porte donc le vert de la maison et occupe la
   largeur, quand la saisie manuelle reste posée sur le papier. Leur donner le
   même poids laisserait croire à deux chemins équivalents. */
.nj-vite{
  background:var(--pitch); border-radius:14px; padding:20px 22px 18px;
  display:grid; grid-template-columns:1fr auto; gap:12px 14px; align-items:end;
  box-shadow:0 10px 24px -14px rgba(11,61,46,.55);
}
.nj-vite-champ{display:flex;flex-direction:column;gap:8px;min-width:0}
.nj-vite-titre{font-size:13px;font-weight:600;color:#EAF2ED;letter-spacing:.01em}
.nj-vite input{
  width:100%; padding:11px 13px; border-radius:9px; font-size:14px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  color:var(--on-pitch); min-height:42px;
}
/* Le gris par défaut tomberait sous 4,5:1 sur le vert : on teinte depuis la
   couleur de premier plan plutôt que de griser. */
.nj-vite input::placeholder{color:rgba(234,242,237,.62)}
.nj-vite input:focus{outline:none;border-color:var(--amber);background:rgba(255,255,255,.14)}
.nj-vite-aide{grid-column:1/-1;margin:2px 0 0;font-size:12px;line-height:1.5;
  color:rgba(234,242,237,.78)}

/* Jauge de lecture. Indéterminée à dessein : on ne connaît pas la durée, et
   une progression inventée mentirait. Elle occupe la largeur du champ, sous
   lui, là où le regard vient de laisser l'URL. */
.nj-jauge{grid-column:1/-1;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.16);margin-top:2px}
.nj-jauge[hidden]{display:none}
.nj-jauge span{display:block;height:100%;width:38%;border-radius:2px;
  background:var(--amber);animation:nj-va 1.15s cubic-bezier(.65,0,.35,1) infinite}
@keyframes nj-va{
  0%   {transform:translateX(-100%)}
  100% {transform:translateX(300%)}
}
/* Une animation qui tourne en boucle chez qui a demandé moins de mouvement
   devient une gêne : la barre reste alors visible, simplement immobile. */
@media (prefers-reduced-motion:reduce){
  .nj-jauge span{animation:none;width:100%}
}
.nj-btn-lire:disabled{opacity:.6;cursor:progress}
/* Sur un téléphone, garder le bouton à côté ne laissait qu'un tiers de largeur
   au champ : on ne voyait plus le début de l'URL qu'on vient de coller. */
@media (max-width:560px){
  .nj-vite{grid-template-columns:1fr}
  .nj-btn-lire{width:100%}
}

/* Une charnière, pas un titre de section : elle dit le rapport entre les deux
   chemins. Un intitulé capitalisé de plus ferait une grammaire d'eyebrows. */
.nj-sinon{display:flex;align-items:center;gap:14px;margin:22px 0 18px;
  color:var(--muted);font-size: 12px}
.nj-sinon::before,.nj-sinon::after{content:"";flex:1;height:1px;background:var(--line)}

.nj-main{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px}
.nj-main.est-lu{border-color:var(--amber)}
.nj-lu{margin:0 0 16px;font-size:13px;font-weight:600;color:var(--warn-fg);
  background:var(--warn-bg);border:1px solid var(--warn-line);
  border-radius:8px;padding:9px 12px}

/* Deux colonnes qui retombent seules : pas de media query à maintenir en plus
   de celles du bas de fichier. */
/* Grille homogène : faire courir « Nom » sur deux colonnes le laissait SEUL
   sur sa ligne et cassait le rythme. Tous les champs ont la même emprise ;
   l'ordre suffit à dire ce qui compte d'abord. */
.nj-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:16px 18px}

.nj-btn{border:1px solid var(--line-2);border-radius:9px;padding:10px 18px;
  font-size: 13px;font-weight:600;cursor:pointer;background:var(--surface);
  color:var(--ink);min-height:42px;transition:border-color .15s ease,background .15s ease}
.nj-btn:hover{border-color:var(--muted)}
.nj-btn-lire{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:var(--on-pitch)}
.nj-btn-lire:hover{border-color:var(--amber);background:rgba(255,255,255,.18)}
.nj-btn-creer{background:var(--pitch);border-color:var(--pitch);color:var(--on-pitch);padding:12px 22px;
  font-size:14px}
.nj-btn-creer:hover{background:var(--pitch-2);border-color:var(--pitch-2)}

.nj-pied{margin-top:22px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.nj-note{margin:0;font-size: 12px;color:var(--ink-2);line-height:1.6;max-width:66ch}
.nj-note b{color:var(--ink);font-weight:600}

/* Le joueur saisi à la main doit se reconnaître d'un coup d'œil : on ne doit
   jamais lire sa fiche en croyant y voir des données Transfermarkt. */
.chip.hors-tm{border-color:var(--amber-2);color:var(--warn-fg);
  background:var(--warn-bg);cursor:help}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE ET TABLETTE
   L'app se consulte au bord du terrain, sur un téléphone tenu à une main. Trois
   principes : ne jamais faire défiler la page horizontalement, garder des cibles
   tactiles d'au moins 44 px, et sacrifier les colonnes décoratives avant les
   colonnes utiles. Les blocs `@media` plus haut (nav, flux des rapports,
   bandeau) restent en place — ceci les complète.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablette (≤ 900 px) ── */
@media (max-width: 900px) {
  .wrap { padding: 18px 16px 48px; }

  /* ⚠️ LA BARRE D'ONGLETS COMMENCE ICI, PAS À 720 px.
     La nav desktop (marque + 4 liens + Déconnexion) réclame 795 px, mesurés.
     Le passage en onglets défilables était posé à `max-width: 720px` : il
     restait donc une bande de 721 à 794 px où la nav desktop était encore
     active et ne tenait pas — 27 px de défilement horizontal sur TOUTES les
     pages authentifiées. Cette bande contient 768 px, soit l'iPad en portrait,
     c'est-à-dire exactement l'appareil du scout au bord du terrain.
     Le diagnostic d'origine était juste (c'est la nav, pas le tableau) ; seul
     le seuil était trop bas. 900 px laisse 105 px de marge sur le besoin réel.
     `min-width: 0` est indispensable : sans lui un élément flex refuse de
     descendre sous la largeur de son contenu. */
  .nav-inner { padding: 0 12px; gap: 0; overflow: hidden; }
  .brand { margin-right: 10px; flex: 0 0 auto; }
  .nav-links {
    min-width: 0; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: 0 13px; white-space: nowrap; }
  /* La zone compte ne défile PAS avec les onglets : savoir sous quel nom on
     écrit ne doit pas dépendre d'un geste de défilement horizontal. C'est la
     bande d'onglets qui se comprime, elle a `min-width: 0` pour cela. */
  .nav-compte { margin-left: 10px; padding-left: 10px; gap: 8px; }
  .nav-logout button { padding: 0 10px; white-space: nowrap; }
  /* Une tablette est un écran tactile : les mêmes cibles que sur téléphone y
     valent, même si la place ne manque pas. Mesurés avant correction :
     retour à la liste 19 px, jetons 23 px, joueur d'un rapport 22 px. */
  .ovl-x { width: 40px; height: 40px; }
  /* `inline-flex` pour ce qui aligne réellement plusieurs éléments (jeton,
     icône, pastille) : ceux-là ne portent aucun nœud de texte nu. */
  .chip, .cp-dep, .poste-jeton, .cmp-vue, .sb-pos, .fx-piece {
    min-height: 34px; display: inline-flex; align-items: center;
  }
  /* Les liens de TEXTE grandissent par le PADDING — voir l'avertissement de la
     règle 24 px : en `inline-flex`, `.back-link` rendait « · filtres
     conservés » sur une deuxième ligne, l'espace nu ayant été avalé. */
  .back-link, .fx-joueur, .rm-plus, .tm-link, .fx-lire {
    padding-top: 9px; padding-bottom: 9px;
  }
  .icon-btn { min-width: 38px; min-height: 38px; }
  .btn, .btn-sm { min-height: 38px; }
  /* Les liens DU TABLEAU faisaient 16 px de haut : en-têtes de tri (« Act. » :
     21,8 × 16) et noms de joueurs. Ce sont pourtant les cibles les plus visées
     de l'app. La ligne entière reste cliquable par ailleurs, mais un en-tête de
     tri, lui, n'a pas d'autre zone.

     ⚠️ Par du PADDING, surtout pas `inline-flex` : un conteneur flex ignore les
     nœuds de texte purement blancs entre ses enfants. Le nom du joueur s'écrit
     `<span class="first">Lamine</span> YAMAL` — l'espace disparaissait et on
     lisait « LamineYAMAL ». `inline-block` en plus, pour que le padding
     vertical compte réellement dans la boîte. */
  table.grid thead th a, .name-link {
    display: inline-block; padding-top: 9px; padding-bottom: 9px;
  }
  /* La marque de la barre de nav : 30 px de large, sous le seuil. */
  .brand { min-width: 44px; }
  /* Une case à cocher de 16 px se rate une fois sur deux au pouce. */
  .check input[type=checkbox] { width: 20px; height: 20px; }
  .check { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; }
  .hero { padding: 20px 18px; }
  /* Le mini-terrain passe devant le texte plutôt que de l'écraser. */
  .hero-lead { flex-wrap: wrap; gap: 14px; }
  .traj-grid { grid-template-columns: 1fr; }
  .fit-axes { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Téléphone (≤ 720 px) ── */
@media (max-width: 720px) {
  /* La barre d'onglets défilable est déclarée dans le bloc 900 px ci-dessus —
     c'est là que la nav desktop cesse de tenir (795 px mesurés), pas ici. */

  /* Cibles tactiles : ces liens-là ne sont pas dans une ligne cliquable, ils
     sont la seule zone à viser et faisaient 19 à 27 px de haut. */
  /* `inline-flex` pour ce qui aligne réellement plusieurs éléments (jeton,
     icône, pastille) : ceux-là ne portent aucun nœud de texte nu. */
  .chip, .cp-dep, .poste-jeton, .cmp-vue, .sb-pos, .fx-piece {
    min-height: 34px; display: inline-flex; align-items: center;
  }
  /* Les liens de TEXTE grandissent par le PADDING — voir l'avertissement de la
     règle 24 px : en `inline-flex`, `.back-link` rendait « · filtres
     conservés » sur une deuxième ligne, l'espace nu ayant été avalé. */
  .back-link, .fx-joueur, .rm-plus, .tm-link, .fx-lire {
    padding-top: 9px; padding-bottom: 9px;
  }
  .icon-btn { min-width: 38px; min-height: 38px; }
  /* Tableau des joueurs : 13 colonnes sur 720 px imposaient un défilement
     latéral permanent. On retire d'abord ce qui se retrouve sur la fiche —
     nationalité, présence StatsBomb — et la table cesse d'être plus large que
     l'écran. Le scout garde l'essentiel : qui, où, et ses deux notes. */
  .grid .c-nat, .grid .c-sb { display: none; }
  table.grid { min-width: 0; }
  .grid thead th, .grid tbody td { padding: 9px 8px; }

  /* Ligne entière cliquable : elle doit offrir une vraie surface au pouce. */
  .grid tbody td { height: 44px; }

  /* Filtres : une colonne pleine largeur, plus lisible qu'une grille écrasée. */
  .filters-grid { grid-template-columns: 1fr; }
  .filters-grid .field[style*="span 2"] { grid-column: auto !important; }
  .filters-foot { flex-wrap: wrap; gap: 10px; }
  .filters-foot .btn { flex: 1 1 auto; min-height: 44px; }

  /* Champs de formulaire : 16 px minimum, sinon iOS zoome à la sélection et
     laisse la page décalée. */
  .filters input, .filters select,
  .rf input, .rf select, .rf textarea,
  input[type="text"], input[type="date"], select, textarea { font-size: 16px; }
  .filters select, .filters input[type="text"], .rf-scout { min-height: 44px; }

  /* Percentiles : l'étiquette prenait 130 px sur 360 px d'écran. */
  .perc { grid-template-columns: 96px 1fr; gap: 8px; }
  .perc .lbl { font-size: 12px; }

  /* Veille : la grille libellé/contenu passe en une colonne. À 360 px, une
     colonne `max-content` laisserait moins de 200 px au texte, et « Ce qui se
     dit » se briserait sur trois lignes en face d'un paragraphe. */
  .vt-faits { grid-template-columns: 1fr; gap: 3px 0; }
  .vt-faits dt { padding-top: 8px; }
  .vt-faits dt:first-child { padding-top: 0; }
  .vt-faits dd + dt { border-top: 1px solid var(--line); }
  /* La barre : le bouton d'abord, la ligne de contexte dessous. */
  .vt-barre { gap: 8px; }
  .vt-btn { min-height: 40px; }
  .vt-meta { flex: 1 0 100%; }

  /* Surcouche de lecture d'un rapport : marges réduites, croix au pouce.
     `max-width` en plus de `width` : mesurée à 454 px dans un écran de 390, la
     boîte était élargie par la largeur mini de son contenu (les colonnes
     `auto` du dossier du joueur), que `width: min(680px, 100%)` ne borne pas. */
  .ovl { padding: 10px; }
  .ovl-boite {
    padding: 18px 16px 20px; max-height: 92vh;
    max-width: 100%; min-width: 0;
  }
  .ovl-x { width: 44px; height: 44px; top: 8px; right: 8px; }
  .rd-tete { margin-right: 52px; }
  /* Les lignes du dossier cessent d'imposer leur largeur : la recommandation
     passe sous le texte plutôt que d'élargir la boîte. */
  .rd-lignes li { grid-template-columns: 50px minmax(0, 1fr); }
  .rd-lignes .reco, .rm-signe { grid-column: 2; justify-self: start; }
  .rd-meta { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

  /* Comparaison : le radar ne doit pas déborder. */
  .cmp-svg { max-height: 300px; }

  /* Le tableau reste défilable si un écran très étroit l'exige : l'ombre
     latérale dit qu'il y a quelque chose à droite, au lieu de le laisser
     deviner. */
  .table-scroll {
    background:
      linear-gradient(90deg, var(--surface) 30%, rgba(255,255,255,0)),
      linear-gradient(90deg, rgba(255,255,255,0), var(--surface) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(11,61,46,.14), rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(11,61,46,.14), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* Listes, actions de fiche et panneau d'export : une colonne, cibles pleine
     largeur. Rangé DANS ce bloc et non dans un `@media` de plus — un seul
     palier 720 px, sinon la règle des 16 px cesse d'être la dernière lue. */
  .fa { flex-direction: column; align-items: stretch; }
  .fa-liste { flex-direction: column; align-items: stretch; }
  .fa-liste select, .fa-liste button { width: 100%; min-height: 44px; }
  .pdfx-cases { grid-template-columns: 1fr; }
  .pdfx-case { padding: 8px 2px; }
  .mdl-appel, .lg-tete { min-height: 44px; align-items: center; }
  /* La fenêtre occupe l'écran : sur 390 px, une boîte centrée laisserait des
     marges perdues et un formulaire à l'étroit. */
  .mdl:modal { width: 100%; max-height: 94vh; }
  /* Deux colonnes sur 390 px tronquaient « Milieu défensif » dès qu'un jeton
     « son poste » ou « déjà » venait s'ajouter. La fenêtre défile, la hauteur
     n'est pas un problème ; la largeur, si. */
  .pg { grid-template-columns: 1fr; }
  .mdl-pied .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
  .lg-nom { font-size: 15px; }
  /* Une carte de compte par ligne : à 390 px, deux colonnes rognent le nom. */
  .lsel-grille { grid-template-columns: 1fr; }
  .lsel-carte { min-height: 44px; }
  /* Le sommaire passe sous le total plutôt que de le comprimer. */
  .lsom-liens { margin-left: 0; }
  .lsom-l { min-height: 34px; }
}

/* ── Petit téléphone (≤ 480 px) ── */
@media (max-width: 480px) {
  /* Second palier : on garde nom, club, championnat et les deux notes. La
     valeur marchande et le poste se lisent sur la fiche, à un doigt de là. */
  .grid .c-val, .grid .c-poste, .grid .c-age { display: none; }
  .grid thead th, .grid tbody td { padding: 8px 6px; font-size: 13px; }
  .badge { font-size: 10.5px; padding: 2px 5px; }

  .hero h1 { font-size: 26px; }
  .hero-pitch { width: 96px; height: 126px; }
  .cards { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .sim-grid { grid-template-columns: 1fr 1fr; }

  /* Pastilles de note et cartes de recommandation : pleine largeur, sans quoi
     elles tombent sous le seuil du pouce. */
  .note-opt { flex: 1 1 auto; min-width: 44px; }
  .note-opt span { min-height: 44px; }
  .reco-opt { flex-basis: 100%; }
}

/* ── Moyennes des notes (fiche joueur) ──────────────────────────────────────
   Échelle 1→4 avec 1 = meilleur : le curseur à GAUCHE est bon. Contre-intuitif
   pour qui découvre, d'où l'échelle légendée sous la règle. On garde le code
   couleur des pastilles (.n-1 … .n-4) pour que l'œil fasse le lien. */
.moys { margin: 0 0 16px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); }
.moys-tete { margin-bottom: 12px; }
.moys-t { font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px; font-size: 12px; color: var(--pitch); }
.moys-corps { display: grid; gap: 14px; }
.moy { display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 12px; }
.moy-lab { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.moy-regle { position: relative; height: 26px; }
.moy-zone { position: absolute; inset: 11px 0 auto; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--n1-bg) 0%, var(--n2-bg) 33%, var(--n3-bg) 66%, var(--n4-bg) 100%); }
.moy-vide .moy-zone { background: var(--line); }
.moy-curseur { position: absolute; top: 0; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 26px; padding: 0 7px; border-radius: 4px;
  border: 1px solid transparent;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; }
.moy-n { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.moys-echelle { display: flex; justify-content: space-between; margin-top: 10px;
  padding-left: 116px; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; }
.moys-echelle i { font-style: normal; opacity: .75; }

@media (max-width: 560px) {
  .moy { grid-template-columns: 1fr; gap: 4px; }
  .moy-n { justify-self: start; }
  .moys-echelle { padding-left: 0; }
}

/* ── Rapport : description ET conclusion sur la carte ───────────────────────
   Les deux textes sont montrés, chacun étiqueté et borné à trois lignes. Avant,
   la carte n'en affichait qu'un : la conclusion disparaissait dès qu'il y avait
   une description. */
.fx-textes { display: grid; gap: 2px; }
.fx-quoi {
  display: block; margin-bottom: 1px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; font-size: 10.5px;
  color: var(--muted);
}
.fx-ccl { border-left: 2px solid var(--line-2); padding-left: 9px; }
.fx-ccl .fx-quoi { color: var(--pitch); }

/* ── « Voir les N autres rapports » ─────────────────────────────────────────
   Les rapports au-delà des deux plus récents restent dans le DOM (donc
   trouvables par la recherche du navigateur), seulement masqués.
   ⚠️ `.rap` n'a pas de `display` explicite, mais `[hidden]` sur un élément
   qu'une autre règle passerait en flex/grid cesserait d'agir : on l'écrit. */
.rap[hidden] { display: none; }
.rap-plus {
  display: block; width: 100%; margin-top: 10px; padding: 11px 14px;
  background: var(--surface); border: 1px dashed var(--line-2);
  border-radius: var(--radius); cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .7px; font-size: 12px;
  color: var(--pitch); transition: border-color .15s, background .15s;
}
.rap-plus:hover { border-color: var(--pitch); background: var(--surface); }
.rap-plus:focus-visible { outline: 2px solid var(--pitch); outline-offset: 2px; }

/* ── Barre de navigation, écrans étroits ───────────────────────────────────
   La zone compte (pastille + nom + Déconnexion) réclame ~215 px et ne défile
   pas : sous 560 px elle ne laisserait plus qu'une poignée de pixels à la
   bande d'onglets, qui se comprime pour tout le monde. Le mot « Scouting »
   part donc en premier — la pastille ⚽ reste, et elle porte toujours le lien
   vers l'accueil. Placé après le dernier bloc 720 px : voir le commentaire du
   bloc mobile plus haut et `test_champs_a_16px_sur_mobile`. */
@media (max-width: 560px) {
  .brand .libelle { display: none; }
  .brand { margin-right: 6px; }
  .nav-compte { margin-left: 8px; padding-left: 8px; gap: 6px; }
  /* Le libellé quitte l'ÉCRAN, pas l'arbre d'accessibilité : mêmes propriétés
     que `.sr-only`. Un bouton dont l'icône seule reste doit garder son nom. */
  .nav-logout-mot {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .nav-logout button { padding: 0 9px; gap: 0; }
}