/* Ambiance Football Manager : sombre, dense, fonctionnelle.
   Le sujet de l'application est une INCERTITUDE qui se resserre — c'est donc la jauge de
   fourchette qui porte le design, pas la decoration. */

/* Palette reprise de l'interface de Football Manager : un bleu-noir tres sombre, une barre
   laterale plus noire encore que la zone de contenu, et des titres de section en ambre. */
:root {
  --fond:        #0c1018;   /* zone de contenu */
  --fond-rail:   #06090d;   /* barre laterale : l'element le plus sombre */
  --fond-1:      #131a25;   /* panneaux, cartes, tableaux */
  --fond-2:      #1a222f;
  --fond-3:      #232d3d;
  --trait:       #212b3a;
  --trait-clair: #33415a;

  --texte:       #e6ecf3;
  --texte-2:     #9aabbe;
  --texte-3:     #66788c;

  /* Teinte principale : redefinie au chargement depuis site.json (apparence.couleurAccent).
     --sur-accent est la couleur du texte pose dessus, choisie selon sa luminance. */
  --accent:      #57a8f5;
  --sur-accent:  #08151f;
  --exact:       #52c07a;   /* fourchette reduite a une valeur */
  --etroit:      #e0b13f;   /* fourchette de 2 a 4 valeurs */
  --alerte:      #e2645c;

  --rayon:       6px;
  --ombre:       0 1px 2px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

/* Doit primer sur les display:block du formulaire, sinon les champs conditionnels
   (sens, notes d'encadrement, note du RFJ) restent visibles en permanence. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Fond discret, toujours derriere le contenu : un halo de la teinte du site, plus une image
   facultative definie dans site.json. Il ne doit jamais gener la lecture d'un tableau. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 18% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    radial-gradient(900px 520px at 96% 104%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%);
}
.fond-site {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

h1 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: .01em; }
h2 { font-size: 21px; font-weight: 600; margin: 0 0 3px; letter-spacing: -.01em; }
/* Comme dans FM, les titres de section sont en ambre : ce sont eux qui decoupent l'ecran. */
h3 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--accent); margin: 26px 0 10px;
}

/* ------------------------------------------------------------- disposition -- */

/* Barre laterale a gauche sur toute la hauteur, barre d'identite en haut de la zone de droite,
   contenu au centre — la charpente de l'ecran principal de Football Manager. */
.app { display: grid; grid-template-columns: 212px minmax(0, 1fr); min-height: 100vh; }

.rail {
  background: linear-gradient(180deg, var(--fond-rail), #04060a);
  border-right: 1px solid var(--trait);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rail-marque {
  display: flex; flex-direction: column; text-decoration: none; line-height: 1.15;
  padding: 16px 18px 18px; border-bottom: 1px solid var(--trait);
}
.rail-marque-nom { font-size: 19px; font-weight: 800; color: var(--texte); letter-spacing: -.02em; }
.rail-marque-baseline {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--texte-3); margin-top: 2px;
}
.rail-marque:hover .rail-marque-nom { color: var(--accent); }

.rail-nav { flex: 1; padding: 10px 0; }
.rail-titre {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--texte-3); margin: 16px 18px 6px;
}
.rail-lien {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; text-decoration: none; color: var(--texte-2); font-size: 13px;
  border-left: 2px solid transparent;
}
.rail-lien:hover { background: var(--fond-2); color: var(--texte); }
.rail-lien.actif {
  background: var(--fond-3); color: var(--texte); font-weight: 600;
  border-left-color: var(--accent);
}
.rail-lien.inactif { opacity: .4; cursor: default; }
.rail-puce {
  width: 5px; height: 5px; border-radius: 50%; background: var(--trait-clair); flex: none;
}
.rail-lien.actif .rail-puce { background: var(--accent); }
.rail-pied { padding: 16px 18px; font-size: 11px; color: var(--texte-3); line-height: 1.5;
             border-top: 1px solid var(--trait); margin: 0; }

.zone { display: flex; flex-direction: column; min-width: 0; }

.barre {
  display: flex; align-items: center; gap: 14px;
  padding: 0 26px; height: 68px; flex: none;
  background: linear-gradient(180deg, #141c2a, #0e1420);
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 30;
}
.avatar-cadre {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--fond-3); border: 1px solid var(--trait-clair);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.avatar-cadre.monogramme { font-size: 19px; font-weight: 800; color: var(--accent); }
.avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.barre-identite { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.barre-titre { font-size: 17px; font-weight: 700; color: var(--texte); letter-spacing: -.012em; }
.barre-soustitre { font-size: 12px; color: var(--texte-3); }
.barre-extra { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.zone-contenu { flex: 1; min-width: 0; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center;
          overflow-x: auto; border-right: none; border-bottom: 1px solid var(--trait); }
  .rail-marque { border-bottom: none; border-right: 1px solid var(--trait); white-space: nowrap; }
  .rail-nav { display: flex; align-items: center; padding: 0 8px; }
  .rail-titre { display: none; }
  .rail-lien { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .rail-lien.actif { border-left: none; border-bottom-color: var(--accent); }
  .rail-pied { display: none; }
}

main { padding: 22px 30px 70px; }

.discret { color: var(--texte-3); font-size: 12.5px; margin: 2px 0; }
.erreur  { color: var(--alerte); white-space: pre-line; }

button { font: inherit; }
.lien {
  background: none; border: none; color: var(--accent);
  cursor: pointer; padding: 3px 2px; font: inherit; border-radius: 3px;
}
.lien:hover { text-decoration: underline; }
.lien:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* ------------------------------------------------------------------- barre -- */

/* Barre secondaire : ce qui appartient a l'outil courant. */
.sous-barre {
  display: flex; align-items: center; gap: 18px;
  padding: 0 26px; height: 42px;
  background: var(--fond); border-bottom: 1px solid var(--trait);
  position: sticky; top: 68px; z-index: 25;
}
.sous-barre-titre {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--texte-3); font-weight: 700; flex: none;
}
.promos { display: flex; gap: 3px; flex: 1; flex-wrap: wrap; }
.onglet {
  display: inline-flex; align-items: center;
  border: 1px solid transparent; border-radius: var(--rayon);
}
.onglet:hover { background: var(--fond-2); }
.onglet[aria-current="true"] { background: var(--fond-3); border-color: var(--trait-clair); }
.onglet button { background: none; border: none; color: var(--texte-3); cursor: pointer; font-size: 13px; }
.onglet-nom { padding: 5px 4px 5px 12px; }
.onglet:hover .onglet-nom, .onglet[aria-current="true"] .onglet-nom { color: var(--texte); }

/* Discrete au repos, franchement rouge au survol : on ne supprime pas par inadvertance. */
.onglet-croix {
  padding: 5px 9px 6px; font-size: 15px; line-height: 1;
  color: var(--texte-3); opacity: .35; border-radius: var(--rayon);
}
.onglet:hover .onglet-croix { opacity: .7; }
.onglet-croix:hover { opacity: 1; color: var(--alerte); background: rgba(226, 100, 92, .14); }

button.destructif {
  background: var(--alerte); color: #2b0b09; border: none;
  border-radius: 5px; padding: 8px 20px; font-weight: 700; cursor: pointer;
}
button.destructif:hover { filter: brightness(1.08); }
dialog code {
  background: var(--fond-3); padding: 1px 5px; border-radius: 3px; font-size: 12px;
}

/* ------------------------------------------------------------ consultation -- */

.consultation .entete-section { margin-bottom: 20px; }

/* Le « ? » d'une note dit ce qu'elle mesure en jeu, dans les deux outils qui listent les huit
   notes : le decodeur et la fiche joueur du suivi. */
table.notes td.nom .aide { margin-left: 7px; }

/* Chaque borne avec la regle qui l'a produite : c'est ce que FMTools ne montrait pas. */
.explications { list-style: none; margin: 0; padding: 0; }
.explications li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--trait); font-size: 12.5px;
}
.explications li:last-child { border-bottom: none; }
.exp-note { width: 155px; flex: none; color: var(--texte); font-weight: 600; }
.exp-origine { color: var(--texte-2); }

/* Nombre d'entrees retirees de la liste : sans ce compteur, une liste courte passerait pour
   un oubli plutot que pour un filtrage. */
#c-projets-info:not(:empty) {
  display: block; margin-top: 8px; text-transform: none; letter-spacing: 0; font-weight: 400;
}

#c-reinit { margin-top: 4px; }
.colonne-cote fieldset label { margin-bottom: 10px; }
.colonne-cote fieldset label:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- etoiles du staff --- */

table.categories { width: 100%; border-collapse: collapse; font-size: 13px; }
table.categories tr + tr td { border-top: 1px solid var(--trait); }
table.categories td { padding: 10px 0; vertical-align: middle; }
.cat-nom { color: var(--texte); font-weight: 600; }
.cat-nom .aide { margin-left: 8px; }
.cat-etoiles { width: 130px; text-align: center; }
.cat-score {
  width: 78px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--texte-2);
}
.cat-sur { font-size: 10.5px; font-weight: 400; color: var(--texte-3); }
tr.excellent .cat-score { color: var(--exact); }
tr.faible .cat-score { color: var(--texte-3); }

/* Cinq etoiles : pleine, a moitie (moitie gauche coloree), ou vide. */
.etoiles { display: inline-flex; gap: 2px; font-size: 17px; line-height: 1; }
.etoile { color: var(--fond-3); position: relative; }
.etoile.pleine { color: var(--accent); }
.etoile.moitie { color: var(--fond-3); }
.etoile.moitie::before {
  content: '★'; position: absolute; left: 0; top: 0;
  width: 50%; overflow: hidden; color: var(--accent);
}

.grille-attributs { display: flex; flex-direction: column; gap: 7px; }
.attribut {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 12.5px; color: var(--texte-2);
}
.attribut input { width: 62px; margin: 0; text-align: center; }

.explication-calcul { max-width: 74ch; margin-bottom: 10px; line-height: 1.62; }
.explication-calcul strong { color: var(--texte); }
.explication-calcul em { color: var(--texte-2); font-style: italic; }

/* ------------------------------------------- rapports & infrastructures ----- */

/* Deux tables de lecture pure : rien a saisir, rien a deduire. Le texte du jeu est cite tel
   quel, la fourchette est montree a l'echelle, et c'est tout. */

.intro-outil {
  max-width: 84ch; color: var(--texte-2); font-size: 14px; line-height: 1.65; margin: 0 0 20px;
}
.intro-outil strong { color: var(--texte); font-weight: 600; }
.intro-outil em { color: var(--texte-2); }

/* Restriction d'affichage (« recruteur uniquement », « a partir de 22 ans ») : une precision
   qui appartient au titre, pas au corps du tableau. */
.etiquette {
  font-size: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 10px; padding: 2px 10px; white-space: nowrap;
}

.note-lecture { max-width: 84ch; margin-top: 14px; line-height: 1.6; }

table.table-rapport { width: 100%; border-collapse: collapse; font-size: 13px; }
table.table-rapport th {
  text-align: left; font-weight: 600; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texte-3); padding: 10px 12px 8px;
  border-bottom: 1px solid var(--trait);
}
table.table-rapport td { padding: 9px 12px; vertical-align: middle; }
table.table-rapport tbody tr + tr td { border-top: 1px solid var(--trait); }

/* L'echelle 1-20 en miniature : « 15 - 17 » demande de se representer la reglette, la barre
   la montre. Meme code couleur que les fourchettes du reste du site. */
.barre-20 {
  display: block; position: relative; width: 100%; min-width: 74px; height: 5px;
  background: var(--fond-3); border-radius: 3px; overflow: hidden;
}
.barre-20-zone { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }

.ra-icone { width: 46px; }
.ra-icone img { display: block; border-radius: 50%; }
.ra-icone-absente { color: var(--texte-3); }
.ra-texte { color: var(--texte); }
.ra-barre { width: 150px; }
.ra-note {
  width: 82px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--texte-2); white-space: nowrap;
}
/* La tranche que le jeu ne commente pas : elle reste une information, mais elle se distingue
   de ce qui est ecrit noir sur blanc dans le rapport. */
tr.muette td { background: rgba(255, 255, 255, .016); }
tr.muette .ra-texte { color: var(--texte-3); }

/* --- messages de l'adjoint --- */

.table-messages td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.rm-phrase { width: 46%; }
/* Le « ? » se pose au bout de la citation, pas en dessous : sur deux lignes il passerait pour
   une puce. D'ou la rangee flex plutot qu'un simple span a la suite. */
.rm-ligne { display: flex; gap: 10px; align-items: flex-start; }
.rm-citation {
  flex: 1; color: var(--texte); font-style: italic;
  border-left: 2px solid var(--trait-clair); padding-left: 10px;
}
.rm-cause { width: 20%; color: var(--texte-2); }
.rm-effet { color: var(--texte); }
.rm-marque {
  display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 1px 8px; border-radius: 9px;
}
.rm-marque.revele { background: rgba(82, 192, 122, .16); color: var(--exact); }
.rm-marque.cachee { background: var(--fond-3); color: var(--texte-3); }

h3.groupe-positif { color: var(--exact); }
h3.groupe-negatif { color: var(--alerte); }
h3.groupe-neutre  { color: var(--texte-3); }

/* Le « ? » d'une ligne de message : meme pastille que partout ailleurs sur le site, posee au
   bout de la citation plutot que de deplier un paragraphe sous chaque ligne. */
.rm-phrase .aide { margin-left: 8px; vertical-align: baseline; }
.aide-exemple {
  display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center;
  border-radius: 50%; background: var(--fond-3); color: var(--texte-3);
  font-size: 10px; font-weight: 700; vertical-align: middle;
}

/* --- deux barres secondaires empilees : la version, puis les onglets --- */

.promos-version { flex: none; }
.sous-barre-2 { top: 110px; z-index: 24; }

/* --- FM 26 : les cinq notes en un seul tableau --- */

.table-notes-fm26 th.rn-negatif { color: var(--alerte); }
.table-notes-fm26 th.rn-positif { color: var(--exact); }
/* Cinq lignes seulement : elles s'aerent pour occuper l'ecran plutot que de se tasser en haut.
   Selecteur qualifie par `table` : sans ca, `table.table-rapport td` plus haut l'emporterait
   sur la specificite et le padding ne prendrait jamais. */
table.table-notes-fm26 td { vertical-align: middle; padding: 18px 12px; }

.rn-nom { color: var(--texte); font-weight: 600; font-size: 14.5px; }
.rn-nom .aide { margin-left: 9px; }
.rn-inversee {
  display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 1px 7px; border-radius: 9px;
  background: var(--fond-3); color: var(--etroit); cursor: help;
}

.rn-palier { white-space: nowrap; width: 152px; }
.rn-icone { vertical-align: middle; margin-right: 13px; }
/* Pas d'icone fournie pour ce palier : un rond de la bonne couleur tient la place, pour que la
   colonne reste lisible en balayage. */
.rn-pastille {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--fond-3); border: 1px solid var(--trait-clair);
}
.rn-negatif .rn-pastille { background: var(--alerte); border-color: var(--alerte); }
.rn-positif .rn-pastille { background: var(--exact); border-color: var(--exact); }
.rn-note { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14.5px; color: var(--texte-2); }
.rn-negatif .rn-note { color: var(--alerte); }
.rn-positif .rn-note { color: var(--exact); }
.rn-muet .rn-note { color: var(--texte-3); }
.rn-muet .rn-pastille { background: transparent; }
.rn-vide { color: var(--texte-3); width: 128px; }
.rn-qui { text-align: right; }

.etiquette.etiquette-restreinte {
  color: var(--etroit); background: color-mix(in srgb, var(--etroit) 12%, transparent);
  border-color: color-mix(in srgb, var(--etroit) 38%, transparent);
}

/* --- infrastructures --- */

/* Deux colonnes exactement, quelle que soit la largeur : centre d'entrainement / structures,
   puis encadrement / recrutement. Les deux echelles d'une meme ligne se comparent ainsi d'un
   coup d'oeil, et chacune prend la moitie de la place disponible. */
.grille-echelles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 34px; align-items: start;
}
@media (max-width: 900px) { .grille-echelles { grid-template-columns: 1fr; } }
/* Ou trouver l'ecran en jeu. C'est la seule chose a dire avant les tableaux : le reste se lit
   dedans. */
.chemin-jeu {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--texte-3);
  font-weight: 700;
}
.chemin-jeu .etiquette { text-transform: none; letter-spacing: 0; font-weight: 400; }

.echelle-infra h3 { margin-top: 22px; }
.grille-echelles > .echelle-infra:first-child h3,
.grille-echelles > .echelle-infra:nth-child(2) h3 { margin-top: 26px; }
.echelle-resume { margin: 0 0 10px; max-width: 60ch; }

.table-infra td { padding-top: 7px; padding-bottom: 7px; }
.ie-libelle { color: var(--texte); }
.ie-barre { width: 110px; }
.ie-note {
  width: 76px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--texte-2); white-space: nowrap;
}
.ie-gain { width: 132px; text-align: right; white-space: nowrap; color: var(--texte-2); }
.ie-gain strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.ie-gain-detail { display: block; font-size: 11px; color: var(--texte-3); }

/* ----------------------------------------------------------------- accueil -- */

/* La page d'accueil tient sur UNE hauteur d'ecran, sans defilement, et occupe cette hauteur :
   le contenu est centre verticalement plutot que tasse en haut. */
/* Page tenue en une seule vue : pas de defilement sur un ecran de bureau. Les tailles (accroche,
   ronds des reseaux) sont fixees ; c'est donc sur les espacements que se prend la place. */
.accueil-corps {
  padding: 26px 44px 18px; max-width: none;
  min-height: calc(100vh - 68px);
  display: flex; flex-direction: column; justify-content: center; gap: 30px;
}

.bloc-titre {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--texte-3); margin: 0 0 12px;
}

.intro { display: flex; align-items: center; gap: 24px 48px; flex-wrap: wrap; }
.intro .texte-riche { flex: 0 1 76ch; }

/* Le telechargement de l'appli, a cote de la presentation (sur le site seulement). */
.appli-carte {
  flex: 0 1 380px; background: var(--fond-1); border: 1px solid var(--trait);
  border-radius: 14px; padding: 18px 20px;
}
.appli-carte .bloc-titre { margin-bottom: 8px; }
.appli-texte { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--texte-2); }
.appli-bouton { display: inline-block; margin: 0; text-decoration: none; }
.appli-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--texte-3); }
.texte-riche { color: var(--texte-2); }
.texte-riche p { font-size: 16.5px; line-height: 1.56; margin: 0 0 13px; }
.texte-riche p:last-child { margin-bottom: 0; }
.texte-riche strong { color: var(--accent); font-weight: 700; }
/* Premier paragraphe : l'accroche, composee nettement plus grand. */
.texte-riche p.accroche {
  font-size: 27px; line-height: 1.3; color: var(--texte);
  font-weight: 600; letter-spacing: -.018em; margin-bottom: 15px;
}
@media (max-width: 820px) { .texte-riche p.accroche { font-size: 21px; } }

/* Boutons ronds, en ligne : c'est le contenu principal de la page d'accueil. */
/* Rangee elastique : les boutons se partagent la largeur disponible et tiennent sur une seule
   ligne tant que l'ecran le permet, au lieu de deborder des qu'il manque vingt pixels. */
.reseaux { display: flex; flex-wrap: wrap; gap: 20px; }
.reseau {
  flex: 1 1 172px; max-width: 240px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; padding: 20px 14px 16px;
  background: var(--fond-1); border: 1px solid var(--trait); border-radius: 18px;
  transition: border-color .14s, background .14s, transform .14s;
}
.reseau:hover { border-color: var(--accent); background: var(--fond-2); transform: translateY(-5px); }

/* La photo est recadree en cercle, quel que soit son format d'origine. */
.reseau-rond {
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden; margin-bottom: 12px;
  flex: none;
  background: var(--fond-3); border: 2px solid var(--trait);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .14s, box-shadow .14s;
}
.reseau-rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Un logo, lui, doit tenir en entier dans le cercle plutot que d'etre rogne. */
.reseau-rond img.contient { width: 78%; height: 78%; object-fit: contain; }
/* Le fond du cercle epouse celui du logo, sinon son rectangle se detache dans le rond. */
.reseau-rond.fond-clair { background: #fff; }
.reseau-rond.fond-noir { background: #000; }
.reseau-rond.sans-image::before {
  content: attr(data-initiale); font-size: 54px; font-weight: 800; color: var(--accent);
}
.reseau:hover .reseau-rond {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent);
}

.reseau-nom { font-size: 16.5px; font-weight: 700; color: var(--texte); }
.reseau-libelle { font-size: 12.5px; color: var(--texte-3); line-height: 1.38; margin-top: 5px; }

.grille-outils {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px; max-width: 940px;
}
.carte-outil {
  display: block; text-decoration: none; color: inherit;
  background: var(--fond-1); border: 1px solid var(--trait);
  border-radius: 10px; padding: 18px 20px 15px;
  transition: border-color .14s, transform .14s, background .14s;
}
a.carte-outil:hover {
  border-color: var(--accent); background: var(--fond-2); transform: translateY(-2px);
}
.carte-outil.inactive { opacity: .5; }
.outil-nom { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--texte);
             text-transform: none; letter-spacing: -.01em; }
.outil-resume { font-size: 13px; color: var(--texte-2); margin: 0 0 10px; line-height: 1.5; }
.outil-action { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.carte-outil.inactive .outil-action { color: var(--texte-3); }

.pied {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--trait);
  font-size: 11.5px; color: var(--texte-3);
}
#a-signature { font-weight: 600; color: var(--texte-2); }
/* Remerciements : une ligne discrete sous la signature, le lien dans la teinte du site. */
.credits { display: block; margin-top: 4px; line-height: 1.5; }
.credits strong { color: var(--texte-2); }
.credits a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.credits a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- effectif -- */

.entete-section { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }

/* UN SEUL ASCENSEUR VERTICAL : celui de la page.
   Le cadre n'a plus de hauteur plafonnee — il s'etend autant que l'effectif l'exige, seize
   joueurs comme cent. Faire defiler un tableau DANS une page qui defile elle aussi oblige a
   viser la bonne zone avant de tourner la molette, pour un resultat different selon l'endroit
   du curseur : c'est deroutant et ca n'apporte rien.
   `overflow-x` reste, pour les tableaux plus larges que l'ecran. Il force techniquement
   `overflow-y` a `auto`, mais sans hauteur plafonnee la barre verticale n'apparait jamais. */
.tableau-cadre {
  overflow-x: auto; max-height: none;
  border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--fond-1); box-shadow: var(--ombre);
}

/* Les deux outils ont un tableau d'effectif et doivent se ressembler. Les selecteurs sont
   listes plutot que factorises par une classe : ca evite de toucher au balisage du suivi des
   personnalites pour une raison purement cosmetique. */
table#effectif, table#f-effectif, table#e-effectif, table#s-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#effectif th, #f-effectif th, #e-effectif th, #s-table th {
  text-align: left; font-weight: 600; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texte-3); white-space: nowrap;
  padding: 9px 12px; background: var(--fond-2); border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 10;
}
#effectif td, #f-effectif td, #e-effectif td, #s-table td { padding: 9px 12px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
#effectif tbody tr, #f-effectif tbody tr, #e-effectif tbody tr, #s-table tbody tr { cursor: pointer; transition: background .08s; }
#effectif tbody tr:hover, #f-effectif tbody tr:hover, #e-effectif tbody tr:hover, #s-table tbody tr:hover { background: var(--fond-2); }
#effectif tbody tr:last-child td, #f-effectif tbody tr:last-child td, #e-effectif tbody tr:last-child td, #s-table tbody tr:last-child td { border-bottom: none; }
#effectif .nom-joueur, #f-effectif .nom-joueur, #e-effectif .nom-joueur, #s-table .nom-joueur { font-weight: 600; white-space: nowrap; }
#effectif .secondaire, #f-effectif .secondaire, #e-effectif .secondaire, #s-table .secondaire { color: var(--texte-2); white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Ce qui est deja cerne, en un coup d'oeil : une barre d'avancement + les valeurs trouvees. */
.colonne-cernage { min-width: 268px; }
.cernage { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.cernage-piste {
  flex: 1; max-width: 110px; height: 4px; background: var(--fond-3);
  border-radius: 2px; overflow: hidden;
}
.cernage-piste span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.cernage-pct { font-size: 11px; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.puces { display: flex; flex-wrap: wrap; gap: 4px; }
.puce {
  font-size: 11px; padding: 1px 7px; border-radius: 10px;
  background: var(--fond-3); color: var(--texte-2); white-space: nowrap;
}
.puce.exact { background: rgba(82, 192, 122, .16); color: var(--exact); font-weight: 600; }
.puce.etroit { background: rgba(224, 177, 63, .14); color: var(--etroit); }

/* ------------------------------------------------- tri, selection, actions -- */

/* Colonnes triables. La fleche n'apparait qu'une fois la colonne active : une rangee de fleches
   grises en permanence alourdit l'en-tete sans rien apprendre. */
#effectif th.triable, #f-effectif th.triable, #e-effectif th.triable, #s-table th.triable { cursor: pointer; user-select: none; }
#effectif th.triable:hover, #f-effectif th.triable:hover, #e-effectif th.triable:hover, #s-table th.triable:hover { color: var(--texte); background: var(--fond-3); }
#effectif th.triable:focus-visible, #f-effectif th.triable:focus-visible, #e-effectif th.triable:focus-visible, #s-table th.triable:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
#effectif th[aria-sort="ascending"], #f-effectif th[aria-sort="ascending"],
#effectif th[aria-sort="descending"], #f-effectif th[aria-sort="descending"], #e-effectif th[aria-sort="ascending"], #e-effectif th[aria-sort="descending"], #s-table th[aria-sort="ascending"], #s-table th[aria-sort="descending"] { color: var(--accent); }
#effectif th[aria-sort="ascending"]::after, #f-effectif th[aria-sort="ascending"]::after, #e-effectif th[aria-sort="ascending"]::after, #s-table th[aria-sort="ascending"]::after { content: ' ↑'; }
#effectif th[aria-sort="descending"]::after, #f-effectif th[aria-sort="descending"]::after, #e-effectif th[aria-sort="descending"]::after, #s-table th[aria-sort="descending"]::after { content: ' ↓'; }

/* Poignee de redimensionnement, sur le bord droit de chaque en-tete. Discrete tant qu'on ne la
   cherche pas, franche des qu'on l'approche. */
#effectif th, #f-effectif th, #e-effectif th, #s-table th { position: relative; }
.poignee-colonne {
  position: absolute; top: 0; right: -3px; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 12;
}
/* Le trait est visible AU REPOS, discretement : c'est lui qui apprend que les colonnes se
   taillent. Une poignee invisible ne se decouvre que par hasard. Il ne marque que les en-tetes
   -- quadriller tout le tableau ajouterait du bruit a chaque ligne sans rien apprendre. */
.poignee-colonne::after {
  content: ''; position: absolute; top: 18%; bottom: 18%; left: 3px; width: 1px;
  background: var(--trait-clair); opacity: .5; transition: opacity .12s, background .12s;
}
.poignee-colonne:hover::after { opacity: 1; background: var(--accent); }
/* Pendant le glissement : plus de survol de ligne ni de selection de texte parasites. */
body.en-redimensionnement { cursor: col-resize; user-select: none; }
body.en-redimensionnement .poignee-colonne::after { opacity: 1; background: var(--accent); }

/* Une fois une largeur reglee, les colonnes ne se redistribuent plus toutes seules. */
table.largeurs-figees { table-layout: fixed; }
table.largeurs-figees td { overflow: hidden; text-overflow: ellipsis; }

/* Message d'annulation : en bas a gauche, le temps de le lire. A gauche et non a droite, pour
   ne pas recouvrir le bandeau de mise a jour ni les boutons de fin de ligne. */
.bulle-annulation {
  position: fixed; left: 20px; bottom: 20px; z-index: 96;
  max-width: 380px; padding: 10px 15px; border-radius: 7px;
  background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--trait-clair); border-left: 2px solid var(--exact);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  font-size: 12.5px; line-height: 1.5;
  animation: surgir .16s ease-out;
}
.bulle-annulation.vide { border-left-color: var(--trait-clair); color: var(--texte-3); }
.bulle-annulation.echec { border-left-color: var(--alerte); }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Nationalite : le drapeau seul, le nom au survol. Le liseré rattrape les drapeaux entierement
   blancs ou tres clairs (Japon, Suisse), qui se perdraient sur le fond sombre. */
#effectif .col-nat, #f-effectif .col-nat, #e-effectif .col-nat, #s-table .col-nat { text-align: center; }
.drapeau {
  width: 21px; height: 16px; display: inline-block; vertical-align: middle;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .13);
  object-fit: cover;
}

/* Colonne des cases a cocher : etroite, et elle ne suit pas le clic qui ouvre la fiche. */
#effectif .col-case, #f-effectif .col-case, #e-effectif .col-case, #s-table .col-case { width: 34px; padding-right: 0; text-align: center; }
.case-ligne, .case-toutes {
  width: 14px; height: 14px; margin: 0; cursor: pointer;
  accent-color: var(--accent); vertical-align: middle;
}

/* Ligne retenue. Le liseré a gauche la distingue du simple survol, qui emploie le meme fond. */
#effectif tbody tr.choisie, #f-effectif tbody tr.choisie, #e-effectif tbody tr.choisie, #s-table tbody tr.choisie { background: rgba(240, 180, 41, .10); }
#effectif tbody tr.choisie:hover, #f-effectif tbody tr.choisie:hover, #e-effectif tbody tr.choisie:hover, #s-table tbody tr.choisie:hover { background: rgba(240, 180, 41, .16); }
#effectif tbody tr.choisie td:first-child, #f-effectif tbody tr.choisie td:first-child, #e-effectif tbody tr.choisie td:first-child, #s-table tbody tr.choisie td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Barre d'actions groupees : elle n'existe que lorsqu'il y a une selection. */
.barre-selection {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
  padding: 9px 14px; border-radius: var(--rayon);
  background: rgba(240, 180, 41, .10); border: 1px solid rgba(240, 180, 41, .28);
  font-size: 12.5px;
}
.barre-selection strong { color: var(--accent); }
.barre-selection .pousse { margin-left: auto; display: flex; gap: 8px; }
.barre-selection button {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  border-radius: 5px; padding: 6px 13px; border: none;
}
.btn-retirer { background: rgba(226, 100, 92, .16); color: var(--alerte); }
.btn-retirer:hover { background: rgba(226, 100, 92, .28); }
.btn-annuler-selection { background: var(--fond-3); color: var(--texte-3); }
.btn-annuler-selection:hover { background: var(--trait-clair); color: var(--texte); }

/* Corbeille de fin de ligne : TOUJOURS VISIBLE, et en clair. Un bouton qui n'apparait qu'au
   survol se decouvre par hasard ; celui-la doit se voir sans promener la souris sur le tableau.
   Blanc au repos, rouge au survol -- la couleur n'arrive qu'au moment ou le geste devient
   possible, ce qui evite une colonne d'alertes rouges en permanence. */
#effectif .col-actions, #f-effectif .col-actions, #e-effectif .col-actions, #s-table .col-actions { width: 38px; text-align: center; padding-left: 0; }
.bouton-corbeille {
  border: none; background: none; cursor: pointer; padding: 3px 5px; border-radius: 5px;
  line-height: 0; color: var(--texte);
  transition: background .12s, color .12s;
}
.bouton-corbeille svg { width: 16px; height: 16px; display: block; }
.bouton-corbeille:hover { color: var(--alerte); background: rgba(226, 100, 92, .16); }
.bouton-corbeille:focus-visible { outline: 2px solid var(--accent); }

/* Pastille d'apercu, a cote du nom. */
.bouton-apercu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 7px; padding: 0; border: none;
  border-radius: 50%; background: var(--fond-3); color: var(--texte-3);
  font-size: 9.5px; font-weight: 700; font-family: inherit; font-style: italic;
  cursor: help; vertical-align: middle; user-select: none;
}
.bouton-apercu:hover { background: var(--accent); color: var(--sur-accent); }

/* Carte d'apercu, posee en coordonnees fixes par tableau.js. */
.carte-apercu {
  position: fixed; z-index: 95; width: 300px; max-width: 92vw;
  background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--trait-clair); border-left: 2px solid var(--accent);
  border-radius: 7px; padding: 12px 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  font-size: 12px; line-height: 1.5; pointer-events: none;
}
.ap-nom { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.ap-sous { color: var(--texte-3); font-size: 11px; margin-bottom: 9px; }
.ap-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 1.5px 0; }
.ap-ligne span:first-child { color: var(--texte-3); }
.ap-ligne span:last-child { font-variant-numeric: tabular-nums; }
.ap-titre {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texte-3); margin: 9px 0 3px; font-weight: 700;
}

/* ------------------------------------------------------------ fiche joueur -- */

.retour { margin-bottom: 12px; display: inline-block; }
.entete-joueur {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 26px;
  flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--trait);
}
.influence { text-align: right; }
.influence label { display: block; font-size: 11px; text-transform: uppercase;
                   letter-spacing: .07em; color: var(--texte-3); margin-bottom: 4px; }
.influence input {
  background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait);
  border-radius: 4px; padding: 5px 8px; font: inherit;
}

.colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 34px; align-items: start; }
@media (max-width: 1040px) { .colonnes { grid-template-columns: 1fr; } }

/* --- le panneau de notes : la piece maitresse ------------------------------- */

.panneau {
  background: var(--fond-1); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 4px 16px; box-shadow: var(--ombre);
}

table.notes { width: 100%; border-collapse: collapse; font-size: 13px; }
table.notes tr + tr td { border-top: 1px solid var(--trait); }
table.notes td { padding: 9px 0; vertical-align: middle; }
table.notes td.nom { color: var(--texte-2); width: 160px; }
table.notes td.val {
  width: 62px; text-align: right; padding-right: 16px;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texte-2);
}
tr.exact  td.nom { color: var(--texte); }
tr.exact  td.val { color: var(--exact); }
tr.etroit td.val { color: var(--etroit); }

/* Echelle 1-20 : la zone encore possible est mise en avant, le reste est elimine. */
.echelle { position: relative; height: 22px; }
.echelle-piste {
  position: absolute; inset: 8px 0; background: var(--fond-3);
  border-radius: 3px; overflow: hidden;
}
.echelle-zone {
  position: absolute; top: 0; bottom: 0; background: var(--accent);
  border-radius: 3px; transition: left .25s, width .25s;
}
tr.exact  .echelle-zone { background: var(--exact); box-shadow: 0 0 7px rgba(82, 192, 122, .5); }
tr.etroit .echelle-zone { background: var(--etroit); }
/* Graduations tous les 5 points, pour situer la fourchette sans lire les chiffres.
   Elles sont posees SUR la piste, pas dedans : celle-ci rogne ce qu'elle contient. */
.echelle-grad {
  position: absolute; top: 4px; bottom: 4px; width: 1px;
  background: var(--trait-clair); opacity: .75; pointer-events: none;
}

.cernage-titre {
  float: right; font-weight: 600; letter-spacing: .04em;
  color: var(--accent); text-transform: none; font-size: 11px;
}

details { margin-top: 16px; }
summary {
  cursor: pointer; color: var(--texte-3); font-size: 12px; padding: 5px 0;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
summary:hover { color: var(--texte-2); }
details[open] summary { margin-bottom: 8px; }

/* ---------------------------------------------------------------- timeline -- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  border-left: 2px solid var(--trait); padding: 0 0 20px 20px;
  position: relative; margin-left: 5px;
}
.timeline li::before {
  content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--fond); border: 2px solid var(--trait);
}
.timeline li.avec-gain::before { border-color: var(--exact); background: var(--exact); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 4px; }

.tl-entete { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.tl-date {
  font-variant-numeric: tabular-nums; color: var(--texte-3); font-size: 12px;
  font-weight: 600; letter-spacing: .02em;
}
.tl-affichage { font-size: 13.5px; font-weight: 600; }
.tl-age { font-size: 11.5px; color: var(--texte-3); }
.tl-evenement {
  display: inline-block; margin: 5px 0 0; font-size: 11.5px;
  background: var(--fond-3); color: var(--texte-2);
  padding: 2px 9px; border-radius: 10px;
}
.tl-gains { font-size: 12px; color: var(--exact); margin: 6px 0 0; }
.tl-rien  { font-size: 12px; color: var(--texte-3); margin: 6px 0 0; font-style: italic; }
/* Une fourchette qui bouge sans se resserrer : ni une information gagnee, ni rien. */
.tl-neutre { font-size: 12px; color: var(--texte-2); margin: 4px 0 0; }
.tl-actions { margin: 7px 0 0; display: flex; gap: 16px; }
.tl-actions button { font-size: 12px; padding: 0; }
.tl-supprimer { color: var(--alerte); }
.tl-detail { margin-top: 6px; }
.tl-detail summary { font-size: 11px; }
.tl-detail .panneau { margin-top: 6px; padding: 0 14px; }

/* -------------------------------------------------------------- formulaire -- */

.colonne-cote form {
  background: var(--fond-1); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre);
}
form label {
  display: block; margin-bottom: 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texte-3); font-weight: 600;
}
form input, form select {
  display: block; width: 100%; margin-top: 5px; padding: 7px 9px;
  background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--trait); border-radius: 4px;
  font: 13px/1.4 inherit; text-transform: none; letter-spacing: 0;
}
form select:hover, form input:hover { border-color: var(--trait-clair); }
/* Les textes d'aide sont dans le <label> : sans ca ils heritent de sa casse forcee. */
form label .discret, form legend + .discret {
  display: block; text-transform: none; letter-spacing: 0; font-weight: 400; margin-top: 5px;
}
form fieldset {
  border: 1px solid var(--trait); border-radius: 5px;
  padding: 10px 12px; margin: 0 0 12px;
}
form legend {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texte-3); padding: 0 5px; font-weight: 700;
}
form button[type="submit"] {
  width: 100%; padding: 10px; margin-top: 6px; cursor: pointer;
  background: var(--accent); color: var(--sur-accent); border: none;
  border-radius: 5px; font-weight: 700; font-size: 13px;
}
form button[type="submit"]:hover { filter: brightness(1.08); }
form hr { border: none; border-top: 1px solid var(--trait); margin: 18px 0 12px; }
form .section { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
                color: var(--texte-3); font-weight: 700; margin: 0 0 10px; }

.grille-notes { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; }
.grille-notes .nom { font-size: 12.5px; color: var(--texte); text-transform: none; letter-spacing: 0; }
.grille-notes select { width: auto; margin: 0; padding: 3px 7px; font-size: 12px; }
.grille-cases label {
  display: flex; gap: 9px; align-items: flex-start; color: var(--texte);
  font-size: 12.5px; margin-bottom: 7px; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.grille-cases input { width: auto; margin: 3px 0 0; accent-color: var(--accent); }

.saisie-manuelle { margin-top: 4px; max-width: 500px; }
.saisie-manuelle .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.saisie-manuelle label.case {
  display: flex; gap: 9px; align-items: flex-start; color: var(--texte);
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px;
}
.saisie-manuelle label.case input { width: auto; margin: 3px 0 0; accent-color: var(--accent); }
.saisie-manuelle button[type="submit"] { width: auto; padding: 7px 20px; }

/* Pastille « ? » : elle s'ouvre et se ferme au clic, pas au survol — voir activerAides()
   dans disposition.js. D'ou le curseur de bouton et l'etat ouvert bien visible. */
.aide {
  display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center;
  border-radius: 50%; background: var(--fond-3); color: var(--texte-3);
  font-size: 10px; cursor: pointer; vertical-align: middle; font-weight: 700;
  border: none; padding: 0; font-family: inherit; user-select: none;
}
.aide:hover { background: var(--trait-clair); color: var(--texte); }
.aide[aria-expanded="true"] { background: var(--accent); color: var(--sur-accent); }
.aide:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bulle-aide {
  position: fixed; z-index: 90; max-width: 360px;
  background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--trait-clair); border-left: 2px solid var(--accent);
  border-radius: 6px; padding: 11px 14px;
  font-size: 12.5px; line-height: 1.6; font-weight: 400;
  text-transform: none; letter-spacing: 0; font-style: normal;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}

.alerte {
  background: rgba(226, 100, 92, .11); border: 1px solid rgba(226, 100, 92, .5);
  color: #f2b5b0; padding: 11px 14px; border-radius: var(--rayon);
  margin: 16px 0 0; font-size: 13px;
}
.bandeau-edition {
  background: rgba(87, 168, 245, .1); border: 1px solid rgba(87, 168, 245, .45);
  border-radius: var(--rayon); padding: 8px 12px; margin: 0 0 12px; font-size: 12.5px;
}
.bandeau-edition button { margin-left: 6px; }

.accueil { color: var(--texte-2); max-width: 54ch; margin-top: 48px; line-height: 1.65; }

dialog {
  background: var(--fond-1); color: var(--texte); border: 1px solid var(--trait-clair);
  border-radius: 9px; padding: 24px 26px; max-width: 580px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
dialog::backdrop { background: rgba(4, 7, 11, .72); }
dialog h3 { margin: 0 0 18px; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--texte); }
dialog label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 400; color: var(--texte-2); }
dialog menu { display: flex; gap: 10px; justify-content: flex-end; padding: 0; margin: 20px 0 0; }
.zone-depot {
  border: 1.5px dashed var(--trait-clair); border-radius: var(--rayon);
  padding: 26px 18px; text-align: center; margin-bottom: 16px;
  background: var(--fond-2); transition: border-color .12s, background .12s;
}
.zone-depot.survol { border-color: var(--accent); background: rgba(87, 168, 245, .09); }
.zone-depot.rempli { border-style: solid; border-color: var(--exact); }
.zd-titre { margin: 0 0 4px; font-weight: 600; color: var(--texte-2); }
.zone-depot p { margin: 0; }
.zd-choisi {
  margin-top: 10px !important; font-size: 12.5px; color: var(--exact); font-weight: 600;
}

/* --- tutoriel de reglage de la vue FM --- */

/* Notice de reglage : elle contient une capture d'ecran de tableau FM, illisible en vignette.
   Elle prend donc tout l'ecran disponible plutot que la largeur par defaut des dialogues. */
/* Titre et croix figes, contenu defilant : la sortie reste atteignable meme sur un petit
   ecran ou la notice ne tient pas entierement. */
/* [open] est indispensable : sans lui, ce `display: flex` l'emporte sur le `display: none` que
   le navigateur applique a un <dialog> ferme, et la fenetre reste affichee en permanence. */
dialog.dlg-plein[open] {
  width: min(1720px, 95vw); max-width: none;
  height: min(1040px, 92vh); max-height: none;
  overflow: hidden; padding: 22px 30px 20px;
  display: flex; flex-direction: column;
}
.dlg-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex: none; }
.dlg-tete h3 { margin: 0; }
.dlg-corps { flex: 1; min-height: 0; overflow: auto; padding-top: 16px; }

.dlg-fermer {
  flex: none; width: 30px; height: 30px; margin: -4px -6px 0 0; padding: 0;
  background: none; border: none; border-radius: 6px; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--texte-3);
}
.dlg-fermer:hover { background: var(--fond-3); color: var(--texte); }
dialog h4.titre-tuto {
  margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--accent); font-weight: 700;
}
.dlg-entete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 30px; margin-bottom: 16px; flex-wrap: wrap;
}
.dlg-chapeau { max-width: 92ch; margin: 0; }
.dlg-versions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Sous-etapes de l'export : numerotees dans la numerotation de l'etape parente. */
.sous-etapes { margin: 6px 0 0; padding-left: 18px; }
.sous-etapes li { margin-bottom: 3px; }
.sous-note { display: block; margin-top: 8px; }

/* Trois colonnes cote a cote : marche a suivre, liste des colonnes, capture d'ecran. La capture
   prend la part la plus large — c'est un plein ecran 1920x1080, sous 700px il devient illisible.
   Les trois tiennent alors sur une hauteur d'ecran, sans que rien ne defile. */
.tuto-grille {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, .85fr) minmax(0, 1.5fr);
  gap: 30px; align-items: start;
}
@media (max-width: 1500px) { .tuto-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 1000px) { .tuto-grille { grid-template-columns: 1fr; } }

.etapes-tuto { margin: 0; padding-left: 20px; color: var(--texte-2); font-size: 13px; }
.etapes-tuto li { margin-bottom: 7px; line-height: 1.55; }
.tuto-etapes .note-lecture { margin-top: 10px; }
.etapes-tuto strong { color: var(--texte); }
.etapes-tuto em { color: var(--texte-2); }
kbd {
  background: var(--fond-3); border: 1px solid var(--trait-clair); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; font: 600 11.5px/1.7 inherit; color: var(--texte);
}

.capture-lien { display: block; text-decoration: none; }
.capture-lien img {
  display: block; width: 100%; border: 1px solid var(--trait); border-radius: var(--rayon);
  transition: border-color .14s;
}
.capture-lien:hover img { border-color: var(--accent); }
.tuto-capture p { margin-top: 7px; }

/* Bouton de telechargement de la vue toute faite, dans le bandeau de raccourci. */
.bouton-telecharger {
  display: inline-block; margin-left: 10px; padding: 6px 16px; border-radius: 5px;
  background: var(--accent); color: var(--sur-accent); font-weight: 700; font-size: 12.5px;
  text-decoration: none; white-space: nowrap;
}
.bouton-telecharger:hover { filter: brightness(1.08); }

/* Douze lignes dans une colonne : on serre pour que la notice tienne sur une hauteur d'ecran.
   Selecteur par id, sinon `table.table-rapport td` l'emporterait sur la specificite. */
#tuto-colonnes td, #tuto-colonnes th { padding-top: 6px; padding-bottom: 6px; }

.tuto-rang { width: 26px; text-align: right; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.tuto-nom { color: var(--texte); font-weight: 600; white-space: nowrap; }
.tuto-role { color: var(--texte-2); font-size: 12.5px; }
.marque-oblig {
  display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 1px 7px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}

/* ------------------------------------------------------------------ parties -- */

/* Choix de la carriere : plusieurs peuvent tourner en parallele, chacune avec ses promotions
   et sa propre date en jeu. On ouvre l'une d'elles avant de voir quoi que ce soit. */
.grille-parties {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px; max-width: 1100px;
}
.carte-partie {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; cursor: pointer; font: inherit;
  background: var(--fond-1); border: 1px solid var(--trait);
  border-radius: 10px; padding: 16px 18px 15px;
  transition: border-color .14s, background .14s, transform .14s;
}
.carte-partie:hover {
  border-color: var(--accent); background: var(--fond-2); transform: translateY(-2px);
}
.cp-nom { font-size: 15.5px; font-weight: 700; color: var(--texte); letter-spacing: -.01em; }
.cp-detail { font-size: 12.5px; color: var(--texte-2); }
.cp-date { font-size: 12px; color: var(--texte-3); margin-top: 4px; }
/* Version de l'opus sur lequel la carriere est jouee : elle decide de la lecture des exports. */
.cp-version {
  margin-top: 7px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 1px 8px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.cp-etapes {
  margin-top: 7px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 1px 8px; border-radius: 9px;
  background: rgba(82, 192, 122, .16); color: var(--exact);
}
.carte-partie.nouvelle { border-style: dashed; justify-content: center; }
.cp-plus { font-size: 22px; line-height: 1; color: var(--accent); font-weight: 700; }

/* La croix de suppression est a COTE du bouton de la carte, pas dedans : un bouton imbrique
   dans un bouton n'est pas du HTML valide et rend le clic imprevisible. */
.carte-cadre { position: relative; display: flex; }
.carte-cadre .carte-partie { flex: 1; }
.carte-croix {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px;
  background: none; color: var(--texte-3); font-size: 16px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.carte-cadre:hover .carte-croix { opacity: .65; }
.carte-croix:hover { opacity: 1; color: var(--alerte); background: rgba(226, 100, 92, .14); }
.carte-croix:focus-visible { opacity: 1; outline: 2px solid var(--accent); }

/* Sauvegarde de la partie. Meme traitement que la croix, decale a sa gauche — et en accent
   plutot qu'en rouge : c'est un geste qu'on veut encourager, pas un geste qu'on redoute. */
.carte-exporter {
  position: absolute; top: 8px; right: 36px;
  width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px;
  background: none; color: var(--texte-3); font-size: 14px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.carte-cadre:hover .carte-exporter { opacity: .65; }
.carte-exporter:hover { opacity: 1; color: var(--accent); background: rgba(240, 180, 41, .14); }
.carte-exporter:focus-visible { opacity: 1; outline: 2px solid var(--accent); }

/* Barre de la partie ouverte : son nom, sa date en jeu, et la sortie. */
.nom-partie { font-size: 13.5px; font-weight: 700; color: var(--texte); }
.date-jeu {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texte-3); font-weight: 700;
}
.date-jeu input {
  margin: 0; width: auto; padding: 4px 8px; font-size: 12.5px;
  background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--trait); border-radius: 4px; text-transform: none; letter-spacing: 0;
}
.date-jeu input:hover { border-color: var(--trait-clair); }
#date-etat { font-size: 11.5px; }
#date-etat.ok { color: var(--exact); }
.lien-alerte { margin-left: auto; color: var(--texte-3); }
.lien-alerte:hover { color: var(--alerte); }

/* ------------------------------------------------------ evolution des notes -- */

/* Ecran d'un suivi encore vide : il explique ce que l'outil attend et donne de quoi commencer. */
.f-demarrage { max-width: 62ch; margin-top: 40px; }
.f-demarrage h2 { margin-bottom: 12px; }
.f-demarrage p { color: var(--texte-2); font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
.f-demarrage strong { color: var(--texte); }
.bouton-principal {
  margin-top: 10px; padding: 10px 22px; cursor: pointer;
  background: var(--accent); color: var(--sur-accent); border: none;
  border-radius: 5px; font-weight: 700; font-size: 13px;
}
.bouton-principal:hover { filter: brightness(1.08); }

/* Quelles dates ce joueur a traversees. Une pastille par releve, pleine s'il y figurait.
   Les pastilles sont dans un <div> INTERIEUR a la cellule : un `display: flex` pose sur le <td>
   lui-meme remplace son `display: table-cell` et desaligne toute la ligne. */
.f-puces-releves { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.f-puce {
  font-size: 10.5px; padding: 1px 7px; border-radius: 9px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.f-puce.presente { background: rgba(82, 192, 122, .16); color: var(--exact); font-weight: 600; }
.f-puce.absente { background: var(--fond-2); color: var(--texte-3); }

.f-choix-dates { display: flex; gap: 18px; align-items: flex-start; }
.f-choix-dates label {
  display: block; margin: 0;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texte-3); font-weight: 700;
}
.f-choix-dates select {
  display: block; margin-top: 5px; padding: 6px 9px; width: auto; min-width: 130px;
  background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait);
  border-radius: 4px; font: 13px/1.4 inherit; text-transform: none; letter-spacing: 0;
}

/* Ce que le jeu affichait a CETTE date. Montre, jamais interprete : le decodage appartient a
   l'autre outil. */
.f-affichage {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline;
  margin: 18px 0 0; font-size: 13.5px; color: var(--texte);
}
.f-info { display: inline-flex; align-items: baseline; gap: 8px; }
.f-etiq {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texte-3); font-weight: 700;
}

/* Anciennete : un compteur de releves, pas une donnee du jeu. Zero a l'arrivee. */
.f-anciennete { font-weight: 700; color: var(--texte-2); }
/* Options de prolongation : « — » ou un nombre d'annees. Colonnes etroites. */
.f-option { color: var(--texte-2); }
/* La valeur sort de FM sous forme de fourchette (« 7,6M € - 8,4M € ») : on la garde telle quelle. */
.f-valeur { white-space: nowrap; text-align: right; color: var(--texte-2); font-variant-numeric: tabular-nums; }

/* Les colonnes de l'ecran du jeu, cote a cote. Une colonne peut porter plusieurs blocs :
   FM 26 detache les coups de pied arretes, les deux opus mettent la technique du gardien sous
   son bloc physique. */
/* LARGEUR PLAFONNEE. En `1fr`, chaque colonne s'etirait sur un grand ecran et le chiffre partait
   se coller au bord droit, a des centimetres de son libelle : l'oeil devait traverser du vide
   pour relier les deux. Une colonne large de 300 px au plus garde le couple lisible, et les
   colonnes se serrent a gauche au lieu de s'ecarteler. */
/* Le nombre de colonnes se calcule sur la largeur MINIMALE : avec un maximum fixe, le navigateur
   compte sur lui et n'en posait que trois a 1440 px -- la colonne d'infos passait a la ligne.
   Le plafond de largeur empeche les colonnes de s'etirer sur un grand ecran. */
.f-colonnes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 1290px;
  gap: 4px 26px; align-items: start; margin-top: 4px;
}
@media (max-width: 900px) { .f-colonnes { grid-template-columns: 1fr; } }
.f-colonne h3 { margin-top: 22px; }

table.f-notes { width: 100%; border-collapse: collapse; font-size: 13px; }
table.f-notes tr + tr td { border-top: 1px solid var(--trait); }
table.f-notes td { padding: 7px 0; }
.f-attr { color: var(--texte-2); }

/* Colonne d'infos : des textes, pas des notes sur 20. Ils peuvent tenir sur deux lignes
   (« Apprécié des médias, Réservé ») sans desaligner le reste. */
table.f-infos .f-attr { white-space: nowrap; padding-right: 12px; vertical-align: top; }
.f-info-val {
  text-align: right; color: var(--texte); font-weight: 600;
  line-height: 1.45; vertical-align: top;
}
/* Empreintes de pied. Le gauche est le droit retourne : un seul trace pour les deux. */
.f-pied { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; color: var(--accent); }
.f-pied.gauche { transform: scaleX(-1); }
.f-pied + .f-pied { margin-left: -3px; }
.f-val {
  width: 44px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--texte);
}
/* L'ecart avec la date comparee : c'est lui qu'on vient chercher. */
.f-ecart {
  width: 46px; text-align: right; padding-right: 2px;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texte-3);
}
tr.monte .f-ecart { color: var(--exact); }
tr.baisse .f-ecart { color: var(--alerte); }
tr.monte .f-val { color: var(--exact); }
tr.baisse .f-val { color: var(--alerte); }

.f-repli-corps { columns: 2; column-gap: 34px; padding: 4px 0; }
@media (max-width: 700px) { .f-repli-corps { columns: 1; } }

/* --- etoiles reglables dans l'effectif --- */

.cellule-etoiles { padding: 6px 8px !important; white-space: nowrap; }

/* Chaque etoile porte deux boutons invisibles, gauche et droite : c'est ce qui donne le pas de
   la demi-etoile sans champ de saisie. Le glyphe reste le meme que partout ailleurs. */
.etoiles.reglable { font-size: 14px; gap: 1px; border-radius: 4px; padding: 2px 3px; }
.etoiles.reglable .etoile { cursor: pointer; }
.etoiles.reglable .demi {
  position: absolute; top: -3px; bottom: -3px; width: 50%;
  padding: 0; border: none; background: none; cursor: pointer;
}
.etoiles.reglable .demi.gauche { left: 0; }
.etoiles.reglable .demi.droite { right: 0; }
.etoiles.reglable .demi:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

.etoiles.reglable.enregistre { box-shadow: 0 0 0 1px var(--exact); }
.etoiles.reglable.echec { box-shadow: 0 0 0 1px var(--alerte); }
/* Jamais renseigne : les etoiles s'eclaircissent pour se signaler comme une case a remplir,
   sans crier pour autant. */
.etoiles.reglable[data-valeur=""] .etoile { color: var(--trait-clair); }

/* Rappel au-dessus de l'effectif, tant qu'il reste des etoiles a poser.
   `inline-flex` : le cadre epouse son contenu. Depuis que l'explication est passee derriere un
   « ? », il ne reste qu'un decompte de trois mots -- un bloc pleine largeur encadrerait surtout
   du vide. */
.rappel {
  display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: var(--rayon); padding: 7px 12px; margin: 0 0 14px;
  font-size: 12.5px; color: var(--texte-2); line-height: 1.5;
}
.rappel[hidden] { display: none; }
.rappel strong { color: var(--texte); }
.rappel-detail { display: block; margin-top: 5px; color: var(--texte-3); font-size: 12px; }
.rappel-compte {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); white-space: nowrap;
}

dialog menu button[value="ok"] {
  background: var(--accent); color: var(--sur-accent); border: none;
  border-radius: 5px; padding: 8px 20px; font-weight: 700; cursor: pointer;
}

/* ---------------------------------------------------- annonce de mise a jour --
   Visible dans l'APPLI INSTALLEE uniquement (voir annoncerMiseAJour() dans
   disposition.js). Pose en bas a droite, au-dessus du contenu mais sans rien bloquer :
   une mise a jour n'est jamais urgente au point d'interrompre une saisie en cours. */
.bandeau-maj {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  max-width: 380px; display: flex; flex-direction: column; gap: 12px;
  background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--trait-clair); border-left: 2px solid var(--accent);
  border-radius: 8px; padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font-size: 12.5px; line-height: 1.55;
}
.bandeau-maj strong { display: block; margin-bottom: 4px; font-size: 13px; }
.bandeau-maj span { color: var(--texte-3); }
.bandeau-maj-actions { display: flex; gap: 8px; justify-content: flex-end; }
.bandeau-maj-lien, .bandeau-maj-plus-tard {
  border-radius: 5px; padding: 7px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; text-decoration: none; border: none;
}
.bandeau-maj-lien { background: var(--accent); color: var(--sur-accent); }
.bandeau-maj-lien:hover { filter: brightness(1.08); }
.bandeau-maj-plus-tard { background: var(--fond-3); color: var(--texte-3); }
.bandeau-maj-plus-tard:hover { background: var(--trait-clair); color: var(--texte); }

/* ======================================================= suivi d'effectif ===
   L'outil qui reunit le suivi des personnalites et l'evolution des notes. Il reprend les
   classes des deux (tableau, fiche f-*, notes, timeline) ; ne figure ici que ce qui lui est
   propre. */

/* Choix de l'import : annee, mois, semaine, et deux pas pour avancer d'un import a l'autre. */
.e-choix-import { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.e-choix-import select {
  background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait);
  border-radius: 4px; padding: 4px 8px; font: inherit; font-size: 13px;
}
.e-pas, .e-supprimer-import {
  background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer;
  color: var(--texte-2); font-size: 17px; line-height: 1; padding: 3px 8px;
}
.e-pas:hover:not(:disabled) { background: var(--fond-2); color: var(--texte); }
.e-pas:disabled { opacity: .3; cursor: default; }
.e-supprimer-import { color: var(--texte-3); margin-left: 4px; }
.e-supprimer-import:hover { color: var(--alerte); background: rgba(226, 100, 92, .14); }
.e-pousse { margin-left: auto; }

/* Bandeaux au-dessus de l'effectif : pleine largeur, contrairement au rappel des etoiles. */
.e-bandeau { display: block; margin: 0 0 12px; line-height: 1.55; }
.e-bandeau .bouton-principal { margin-top: 10px; }
.e-bandeau .lien { padding: 0; font-size: inherit; }
.alerte .rappel-detail { color: #d9a6a1; }
.e-inexact { background: rgba(224, 177, 63, .09); border-color: rgba(224, 177, 63, .45); color: #eed49a; }
.e-inexact .rappel-detail { color: #cdb57e; }

.e-filtres { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.e-filtres input, .e-filtres select {
  background: var(--fond-1); color: var(--texte); border: 1px solid var(--trait);
  border-radius: 5px; padding: 6px 10px; font: inherit; font-size: 13px;
}
.e-filtres input { min-width: 220px; }

/* D'ou vient la fourchette d'une ligne : le suivi ou la seule lecture de l'affichage. */
.e-source {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 1px 5px; border-radius: 3px; margin-left: 2px;
}
.e-source.suivi { background: rgba(82, 192, 122, .16); color: var(--exact); }
.e-source.affichage { background: var(--fond-2); color: var(--texte-3); }

.e-suivi { white-space: nowrap; }
.e-etapes { color: var(--texte-2); font-size: 12.5px; margin-right: 6px; }
.e-badge {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 6px; border-radius: 3px; margin: 1px 4px 1px 0;
}
.e-badge-traiter { background: rgba(224, 177, 63, .18); color: var(--etroit); }
.e-badge-inexact { background: rgba(226, 100, 92, .12); color: #eaa29c; }
.e-badge-alerte  { background: rgba(226, 100, 92, .22); color: var(--alerte); }
tr.e-ligne-traiter td.nom-joueur { box-shadow: inset 2px 0 0 var(--etroit); }

/* Fiche : carte de poste, lecture de l'affichage, saisie a la main. */
.e-trio {
  display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) minmax(240px, 320px);
  gap: 26px; align-items: start; margin-top: 8px;
}
@media (max-width: 1100px) { .e-trio { grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); } }
@media (max-width: 700px)  { .e-trio { grid-template-columns: 1fr; } }
.e-trio h3 { margin-top: 22px; }
.e-trio .saisie-manuelle { padding: 12px 16px; }

.e-carte-poste { padding: 12px; text-align: center; }
.e-terrain { width: 100%; max-width: 190px; display: block; margin: 0 auto; }
.e-terrain-bord { fill: color-mix(in srgb, var(--exact) 7%, var(--fond-1)); stroke: var(--trait-clair); stroke-width: 1; }
.e-terrain-ligne { fill: none; stroke: var(--trait-clair); stroke-width: .8; }
.e-poste-vide { fill: var(--fond-3); }
.e-poste-actif { fill: var(--accent); stroke: var(--fond); stroke-width: 1.5; }
.e-poste-texte { margin: 8px 0 0; font-weight: 600; font-size: 13px; }

.e-titre-suivi {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--trait);
}
.e-sans-suivi { padding: 16px 20px; max-width: 70ch; }
.e-sans-suivi p { margin: 0 0 10px; }
.e-depart { display: block; margin: 12px 0; font-size: 13px; color: var(--texte-2); }
.e-depart select {
  margin-left: 8px; background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait);
  border-radius: 4px; padding: 4px 8px; font: inherit;
}
.e-influence { text-align: left; margin: 18px 0 6px; }

/* L'evenement inconnu se declare en connaissance de cause. */
.e-inconnu {
  background: rgba(224, 177, 63, .08); border: 1px solid rgba(224, 177, 63, .4);
  border-radius: var(--rayon); padding: 10px 12px; margin: 0 0 12px; font-size: 12.5px; line-height: 1.5;
}
.e-inconnu p { margin: 0 0 8px; }
.timeline li.e-etape-inconnue::before { border-color: var(--etroit); background: var(--etroit); }

.e-export { margin: 10px 0 0; line-height: 1.55; }
.e-export .sous-etapes { margin: 6px 0; padding-left: 20px; }
.e-export .sous-note { display: block; margin-top: 4px; }

@media (max-width: 860px) {
  .sous-barre:has(.e-choix-import) { height: auto; flex-wrap: wrap; padding: 8px 16px; gap: 10px; }
  .e-filtres input { min-width: 0; flex: 1; }
}

/* Ce qui a change a l'affichage d'une etape a l'autre : la cause de ce qu'elle resserre.
   La liste vit DANS une ligne de l'historique, qui est elle-meme une liste : sans ces remises a
   zero, chaque changement heriterait du trait vertical et de la pastille des etapes. */
.timeline .tl-changements { list-style: none; margin: 7px 0 0; padding: 0; }
.timeline .tl-changements li {
  border: none; margin: 0; padding: 1px 0 1px 12px; position: relative;
  font-size: 12.5px; color: var(--texte);
}
.timeline .tl-changements li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px;
  border: none; border-radius: 50%; background: var(--accent);
}
.timeline .tl-changements li.discret { color: var(--texte-3); font-size: 12px; margin: 0; }
.timeline .tl-changements li.discret::before { background: var(--trait-clair); }

/* ============================================= fiche joueur du suivi d'effectif ===
   Classes jf-* : propres a cette fiche. Les anciens outils gardent f-*, .colonnes, .timeline ;
   rien de ce qui suit ne les touche.

   TOUT SUR UNE HAUTEUR D'ECRAN, sur un ecran 1080p comme 1440p : Technique, Mental, Physique,
   Notes cachees, Infos, cote a cote comme dans FM. On ne clique que pour changer de date (c'est
   l'historique), comparer, ou ajouter un evenement. Les lignes sont donc plus serrees qu'ailleurs. */

main:has(> #e-vue-joueur:not([hidden])) { padding-bottom: 16px; }

.jf h3 { margin: 14px 0 6px; }

/* --- en-tete : identite, date, comparaison, saisie --- */
.jf-tete {
  display: flex; align-items: flex-end; gap: 12px 26px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--trait);
}
.jf-retour { align-self: center; white-space: nowrap; }
.jf-identite { flex: 1 1 240px; min-width: 0; }
.jf-identite h2 { margin: 0; }
.jf-identite .discret { margin: 0; }
.jf-dates { display: flex; align-items: flex-end; gap: 8px 20px; flex-wrap: wrap; }
.jf-date { display: flex; flex-direction: column; gap: 3px; }
.jf-etiq {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texte-3); font-weight: 700;
}
.jf-date-pas { display: flex; align-items: center; gap: 2px; }
.jf-date-pas .e-pas { border-color: var(--trait); }
.jf-dates select {
  background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait);
  border-radius: 4px; padding: 5px 8px; font-family: inherit; font-size: 13px;
  max-width: 330px; min-width: 150px;
}
.jf-ajouter { margin-top: 0; white-space: nowrap; }

/* --- bandeaux : une ligne, le bouton a droite --- */
.jf-bandeau {
  display: flex; align-items: center; gap: 10px 20px;
  margin: 10px 0 0; padding: 7px 14px; font-size: 12.5px; line-height: 1.5;
}
.jf-bandeau > div { flex: 1; min-width: 0; }
.jf-bandeau .rappel-detail { display: inline; margin-left: 4px; }
.jf-bandeau .bouton-principal { margin: 0; white-space: nowrap; }
.jf-source-attributs { margin: 8px 0 0; font-size: 12px; color: var(--etroit); }

/* --- la grille des cinq colonnes --- */
.jf-grille {
  display: grid; align-items: start; gap: 0 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr) minmax(0, 1fr);
}
/* Les colonnes d'attributs sont construites dans un conteneur : elles prennent place dans la
   grille comme si elles en etaient les enfants directs. */
.jf-attributs { display: contents; }
.jf-colonne, .jf-cachees, .jf-infos { min-width: 0; }
.jf-grille.jf-sans-attributs { grid-template-columns: minmax(0, 560px); }

.jf .panneau { padding: 2px 12px; }
.jf table.f-notes td { padding: 5px 0; }
.jf .f-ecart { width: 34px; }
.jf .f-val { width: 36px; }
.jf-repli { margin-top: 8px; }
.jf-repli summary { font-size: 11px; }

/* --- notes cachees --- */
.jf-bloc-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 10px;
  flex-wrap: wrap; margin: 14px 0 6px;
}
.jf-bloc-tete h3 { margin: 0; }
.jf-cernage {
  margin-left: 8px; color: var(--texte-2); font-weight: 600;
  letter-spacing: .03em; text-transform: none;
}
.jf-interrupteur {
  display: inline-flex; border: 1px solid var(--trait-clair); border-radius: 5px; overflow: hidden;
}
.jf-interrupteur button {
  background: none; border: none; color: var(--texte-3); cursor: pointer;
  font-size: 11.5px; font-weight: 600; padding: 3px 10px;
}
.jf-interrupteur button + button { border-left: 1px solid var(--trait-clair); }
.jf-interrupteur button:hover:not(:disabled) { color: var(--texte); background: var(--fond-2); }
.jf-interrupteur button[aria-pressed="true"],
.jf-interrupteur button[aria-pressed="true"]:hover { background: var(--accent); color: var(--sur-accent); }
.jf-interrupteur button:disabled { opacity: .4; cursor: default; }
.jf-source { margin: 0 0 6px; font-size: 12px; line-height: 1.45; color: var(--texte-3); }
.jf-source strong { color: var(--texte-2); }

/* Largeurs posees par colonne : la barre prend tout ce qui reste. */
.jf table.notes { table-layout: fixed; }
.jf table.notes td { padding: 7px 0; }
.jf table.notes td.nom { width: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.jf table.notes td.val { width: auto; padding-right: 12px; }
.jf-col-nom { width: 150px; }
.jf-col-val { width: 58px; }
.jf-col-avant { width: 56px; }
.jf table.notes th {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--texte-3);
  text-align: right; padding: 5px 12px 0 0; white-space: nowrap;
}
/* La fourchette de la date comparee : en retrait, pour ne pas se confondre avec celle du jour. */
.jf table.notes td.jf-avant {
  text-align: right; padding-right: 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: 12px; color: var(--texte-3);
}

/* --- l'etape de la date choisie --- */
.jf-etape {
  margin-top: 10px; padding: 8px 12px; font-size: 12.5px;
  border: 1px solid var(--trait); border-left: 2px solid var(--trait-clair);
  border-radius: var(--rayon); background: var(--fond-1);
}
.jf-etape.jf-etape-inconnue { border-left-color: var(--etroit); }
.jf-etape-tete { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.jf-etape-titre { font-weight: 700; font-size: 13px; color: var(--texte); }
.jf-etape-actions { margin-left: auto; display: flex; gap: 12px; }
.jf-etape-actions button { font-size: 12px; padding: 0; }
.jf-etape-ev { margin: 4px 0 0; }
.jf-etape-ev .tl-evenement { margin: 0; }
.jf-etape-affichage { margin: 4px 0 0; font-size: 12px; color: var(--texte-3); }
.jf-changements { list-style: none; margin: 4px 0 0; padding: 0; }
.jf-changements li { position: relative; padding: 1px 0 1px 12px; color: var(--texte); }
.jf-changements li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent);
}
.jf-changements li.discret { font-size: 12px; margin: 0; }
.jf-changements li.discret::before { background: var(--trait-clair); }
.jf-etape .tl-gains, .jf-etape .tl-neutre, .jf-etape .tl-rien { margin: 3px 0 0; }
.jf-etape-vide { margin: 0; color: var(--texte-3); }
.jf-etape-vide strong { color: var(--texte-2); }

/* --- sous les notes : suivre, date d'influence, arreter --- */
.jf-sans-suivi { margin-top: 10px; }
.jf-sans-suivi .bouton-principal { margin: 0 6px 0 0; }
.jf-bas-suivi {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px;
}
.jf-influence {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3);
}
.jf-influence input {
  background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait);
  border-radius: 4px; padding: 2px 6px; font-family: inherit; font-size: 12px;
}
.jf-bas-suivi .discret { margin: 0; font-size: 12px; }
.jf-arreter { margin-left: auto; padding: 0; font-size: 12px; color: var(--texte-3); }
.jf-arreter:hover { color: var(--alerte); }

/* --- infos, postes, saisie a la main --- */
.jf-postes { display: flex; align-items: center; gap: 14px; padding: 8px 12px; }
/* Le terrain : l'herbe en fond (bandes de tonte), le dessin ne porte que des traits et des points
   clairs. Un aplat sombre dessine sortait gris clair sous une extension de mode sombre. */
.jf-pelouse {
  flex: none; width: 100px; aspect-ratio: 120 / 176; max-width: 100%;
  border-radius: 5px; overflow: hidden; border: 1px solid #2e6b45;
  background: repeating-linear-gradient(180deg, #1c5233 0 11%, #205b39 11% 22%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .35);
}
.jf-terrain { display: block; width: 100%; height: 100%; }
.jf-lignes { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: .9; }
.jf-point-central { fill: rgba(255, 255, 255, .6); }
.jf-poste-vide { fill: rgba(255, 255, 255, .28); }
.jf-poste-actif { fill: var(--accent); stroke: #fff; stroke-width: 1.4; }
.jf-poste-halo { fill: var(--accent); opacity: .28; }
.jf-gabarit .f-info-val { white-space: nowrap; }
.jf-postes-texte { min-width: 0; }
.jf-postes-texte .e-poste-texte { margin: 0; }

.jf-manuel { padding: 8px 12px; }
/* Deux par rangee : niveau et potentiel, puis leadership et club prefere. */
.jf-manuel-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; align-items: end; }
.jf-manuel label { margin-bottom: 6px; font-size: 10.5px; }
.jf-manuel input[type="number"] { margin-top: 3px; padding: 4px 6px; }
.jf-manuel label.jf-case {
  display: flex; align-items: center; gap: 8px; min-height: 30px;
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; color: var(--texte);
}
.jf-manuel label.jf-case input { display: inline-block; width: auto; margin: 0; accent-color: var(--accent); }
.jf-manuel-pied { display: flex; align-items: center; gap: 10px; }
.jf-manuel button[type="submit"] { width: auto; margin: 0; padding: 5px 16px; font-size: 12px; }

/* --- fenetre de saisie d'un evenement --- */
dialog.jf-dlg[open] { width: min(860px, 95vw); max-width: none; max-height: 92vh; padding: 16px 22px 18px; overflow: auto; }
.jf-dlg-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.jf-dlg-tete h3 { margin: 0; }
.jf-dlg-fermer {
  background: none; border: none; border-radius: 4px; cursor: pointer;
  color: var(--texte-3); font-size: 16px; padding: 2px 7px;
}
.jf-dlg-fermer:hover { color: var(--texte); background: var(--fond-2); }
.jf-dlg-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.jf-dlg label.case { display: flex; align-items: flex-start; gap: 8px; }
.jf-dlg label.case input { width: auto; margin: 3px 0 0; accent-color: var(--accent); }
.jf-dlg-erreur { margin: 8px 0 0; font-size: 12.5px; }
.jf-dlg-pied { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 10px; }
.jf-dlg-pied button[type="submit"] { width: auto; margin: 0; padding: 9px 26px; }

/* --- autres largeurs --- */
/* Ecran de portable (1366 a 1600 px) : les memes cinq colonnes, resserrees ; la colonne d'infos
   garde de quoi lire ses libelles, et l'en-tete tient sur une ligne. */
@media (max-width: 1600px) {
  .jf-grille { gap: 0 16px; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.55fr) minmax(0, 1.25fr); }
  .jf-date-pas select { max-width: 250px; }
  #j-date-b { max-width: 170px; min-width: 0; }
  .jf-tete { gap: 10px 18px; }
}
/* Ecran etroit (portable) : les attributs sur une rangee, notes cachees et infos dessous. */
@media (max-width: 1180px) {
  .jf-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jf-cachees { grid-column: span 2; }
}
/* Telephone : une colonne, les notes cachees en premier. */
@media (max-width: 700px) {
  .jf-grille { grid-template-columns: minmax(0, 1fr); }
  .jf-cachees { grid-column: auto; order: -1; }
  .jf-dates, .jf-date { width: 100%; }
  .jf-dates select { max-width: 100%; min-width: 0; }
  .jf-date-pas select { flex: 1; }
  .jf-ajouter { width: 100%; }
  .jf-bandeau { flex-direction: column; align-items: stretch; }
  .jf-dlg-colonnes { grid-template-columns: minmax(0, 1fr); }
}
/* Grand ecran (1440p et plus) : la meme fiche, agrandie, pour occuper la place plutot que de
   laisser la moitie de l'ecran vide. */
@media (min-width: 2200px) and (min-height: 1100px) {
  .jf, dialog.jf-dlg { zoom: 1.4; }
}
@media (min-width: 3200px) and (min-height: 1700px) {
  .jf, dialog.jf-dlg { zoom: 1.9; }
}

/* ================================================== recherche de preparateurs ===
   Une liste de staff importee, les etoiles de chacun par atelier, des filtres facon FM 26 et une
   fiche par candidat. Le tableau reprend les regles communes des tableaux d'effectif (#s-table
   figure dans leurs selecteurs, plus haut) ; la fiche reprend celles de la fiche joueur (.jf).
   Ne figure ici que ce qui est propre a l'outil. */

:root {
  /* Etoiles : jaune franc pour celles qu'il a, gris bleute bien visible pour les autres. */
  --etoile-pleine: #ffcc33;
  --etoile-vide:   #56647a;
}

/* Onglets : une rangee qui defile plutot que de passer a la ligne dans la barre de 42 px. */
.s-onglets { flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
.s-onglets .onglet { flex: none; }
.onglet .s-onglet-renommer {
  padding: 5px 3px 6px 6px; font-size: 12px; line-height: 1; opacity: .35; border-radius: var(--rayon);
}
.onglet:hover .s-onglet-renommer { opacity: .7; }
.onglet .s-onglet-renommer:hover { opacity: 1; color: var(--accent); }
.s-onglet-saisie {
  width: 180px; margin: 2px 2px 2px 6px; padding: 3px 7px;
  background: var(--fond-2); color: var(--texte); border: 1px solid var(--accent);
  border-radius: 4px; font: inherit; font-size: 13px;
}

/* Dans la fenetre d'import, le raccourci vers la vue est un paragraphe : `.rappel` en ligne
   eclaterait son texte en colonnes. */
#s-vue { display: block; line-height: 1.6; }
#s-vue .bouton-telecharger { margin: 6px 0 0; }

.s-page { padding-top: 16px; }

/* --- cinq etoiles : les allumees par-dessus les eteintes, coupees a N x 20 % --- */
.s-et {
  position: relative; display: inline-block; vertical-align: middle; white-space: nowrap;
  font-style: normal; font-size: 17px; line-height: 1; letter-spacing: 1px; color: var(--etoile-vide);
}
.s-et-plein {
  position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap;
  font-style: normal; color: var(--etoile-pleine);
}
.s-et-petit { font-size: 13px; }
.s-et-grand { font-size: 24px; letter-spacing: 2px; }

/* --- au-dessus des en-tetes : le bilan a gauche, le bouton Filtrer a droite --- */
.s-outils { display: flex; align-items: center; gap: 8px 18px; margin-bottom: 10px; flex-wrap: wrap; }
.s-bilan { flex: 1 1 420px; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; }
.s-compte { margin: 0; font-size: 13px; color: var(--texte-2); white-space: nowrap; }
.s-compte strong { font-size: 20px; color: var(--texte); font-variant-numeric: tabular-nums; margin-right: 3px; }
.s-regle { margin: 0; font-size: 12.5px; color: var(--texte); line-height: 1.55; }
.s-regle:empty { display: none; }
.s-regle-etiquette {
  margin-right: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-3);
}
.s-regle-ou + .s-regle-ou::before { content: ' OU '; color: var(--accent); font-weight: 700; }
.s-retirer-filtres { font-size: 12px; color: var(--texte-3); }
.s-source { margin: 0; font-size: 11.5px; }

.s-bouton-filtrer {
  display: inline-flex; align-items: center; gap: 7px; flex: none; cursor: pointer;
  padding: 7px 14px; border-radius: 5px; font: inherit; font-size: 13px; font-weight: 700;
  background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait-clair);
}
.s-bouton-filtrer svg { width: 15px; height: 15px; }
.s-bouton-filtrer:hover { border-color: var(--accent); color: var(--accent); }
.s-bouton-filtrer.actif { border-color: var(--accent); }
.s-nb-filtres {
  min-width: 19px; padding: 1px 6px; border-radius: 10px; text-align: center;
  background: var(--accent); color: var(--sur-accent); font-size: 11px; line-height: 17px;
}

.s-bandeau { display: block; margin: 0 0 10px; }
.s-annonce { border-color: color-mix(in srgb, var(--exact) 45%, transparent); background: rgba(82, 192, 122, .08); }

/* --- le tableau : nom, puis une colonne d'etoiles par atelier --- */
#s-table th.s-col-atelier {
  white-space: normal; text-align: center; vertical-align: bottom; line-height: 1.25;
  padding-left: 6px; padding-right: 6px;
}
.s-th-haut, .s-th-bas { display: block; }
.s-th-bas { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; }
/* La fleche de tri se pose dans le coin : a la suite des deux lignes, elle en ferait une troisieme. */
#s-table th.s-col-atelier::after { position: absolute; right: 5px; bottom: 9px; }
#s-table td.s-cel { text-align: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
#s-table td.s-inconnu { color: var(--texte-3); font-weight: 700; }
.s-aucun { margin: 14px 4px; }

/* Apercu : atelier a gauche, etoiles et nombre a droite. */
.s-ap-ligne { align-items: center; }
.s-ap-ligne b { display: inline-block; min-width: 22px; text-align: right; font-weight: 700; color: var(--texte); }

/* --- fenetre de filtres --- */
dialog.s-dlg-filtres { width: min(600px, 94vw); }
.s-dlg-filtres .dlg-tete { margin-bottom: 14px; }
.s-condition-tete, .s-condition {
  display: grid; grid-template-columns: minmax(0, 1fr) 104px 26px; gap: 8px; align-items: center;
}
.s-condition-tete {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texte-3); margin-bottom: 4px;
}
.s-condition select {
  width: 100%; min-width: 0; padding: 6px 8px;
  background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait-clair);
  border-radius: 4px; font: inherit; font-size: 13px;
}
.s-retirer-condition {
  height: 28px; padding: 0; border: none; border-radius: 4px; background: none; cursor: pointer;
  color: var(--texte-3); font-size: 18px; line-height: 1;
}
.s-retirer-condition:hover { color: var(--alerte); background: rgba(226, 100, 92, .14); }

/* L'interrupteur Et / Ou se pose ENTRE deux filtres, la ou il agit. */
.s-lien { display: flex; justify-content: center; margin: 8px 0; }
.s-lien button {
  padding: 3px 16px; cursor: pointer;
  background: var(--fond-2); color: var(--texte-3); border: 1px solid var(--trait-clair);
  font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.s-lien button:first-child { border-radius: 4px 0 0 4px; }
.s-lien button:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.s-lien button:hover { color: var(--texte); }
.s-lien button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }

.s-actions-recherche { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.s-effacer { color: var(--texte-3); }
.s-sans-condition { margin: 0; }
.s-essai { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--trait); }
.s-essai .s-regle { margin-top: 6px; }
.s-essai .s-regle-etiquette { display: block; margin: 0 0 1px; }
.s-essai .s-regle-ou { display: block; }
.s-essai .s-regle-ou + .s-regle-ou::before { content: 'OU '; }
.s-appliquer {
  background: var(--accent); color: var(--sur-accent); border: none;
  border-radius: 5px; padding: 8px 22px; font-weight: 700; cursor: pointer;
}
.s-appliquer:hover { filter: brightness(1.08); }

/* --- fiche preparateur : les notes importees, puis les etoiles par atelier --- */
.sf-parcours { display: flex; align-items: center; gap: 4px; }
.sf-parcours .e-pas { border-color: var(--trait); }
.sf-parcours .discret { min-width: 86px; text-align: center; margin: 0; }
.sf-grille {
  display: grid; align-items: start; gap: 0 26px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
}
.sf-colonne { min-width: 0; }
.sf .f-val.sf-illisible, .sf .sf-illisible { color: var(--texte-3); }
.sf-table-ateliers td { vertical-align: middle; }
.jf table.sf-table-ateliers td { padding: 9px 0; }
.sf-etoiles { text-align: right; white-space: nowrap; }
.sf-nombre {
  display: inline-block; vertical-align: middle; min-width: 34px; margin-left: 12px; text-align: right;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texte);
}

/* Ecran moyen : les notes cote a cote, les etoiles dessous sur toute la largeur. */
@media (max-width: 1180px) {
  .sf-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-ateliers { grid-column: 1 / -1; }
}
/* Telephone : une colonne, les etoiles en premier. */
@media (max-width: 700px) {
  .sf-grille { grid-template-columns: minmax(0, 1fr); }
  .sf-ateliers { order: -1; grid-column: auto; }
  .s-et-grand { font-size: 19px; }
  .s-bilan { flex-basis: 100%; }
}
/* Grand ecran (1440p et plus) : la meme page, agrandie comme la fiche joueur, pour que les etoiles
   se lisent de loin plutot que de flotter dans des colonnes trop larges. */
@media (min-width: 2200px) and (min-height: 1100px) {
  .s-page, dialog#s-dlg-import, dialog#s-dlg-filtres { zoom: 1.25; }
}
@media (min-width: 3200px) and (min-height: 1700px) {
  .s-page, dialog#s-dlg-import, dialog#s-dlg-filtres { zoom: 1.7; }
}

/* =============================================================== tutoriels ===
   Les tutoriels d'export pas a pas : le sommaire a gauche, une etape a la fois a droite, le
   texte a cote de sa capture pour que tout tienne sur un ecran, sans defiler. */

.t-page { padding-top: 18px; padding-bottom: 24px; }
.t-grille { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; }

/* --- sommaire --- */
.t-sommaire { display: flex; flex-direction: column; gap: 8px; }
.t-carte {
  background: var(--fond-1); border: 1px solid var(--trait); border-radius: var(--rayon);
  box-shadow: var(--ombre); overflow: hidden;
}
.t-carte.actif { border-color: var(--trait-clair); border-left: 2px solid var(--accent); }
.t-carte-titre {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 14px; background: none; border: none; color: var(--texte); font: inherit;
  font-size: 13.5px; font-weight: 700;
}
.t-carte-titre:hover { background: var(--fond-2); }
.t-carte-resume { font-size: 12px; font-weight: 400; color: var(--texte-3); line-height: 1.45; }
.t-etapes { margin: 0; padding: 0 10px 10px 30px; }
.t-etapes li { color: var(--texte-3); font-size: 12.5px; padding: 1px 0; }
.t-etapes button {
  background: none; border: none; padding: 3px 4px; cursor: pointer; text-align: left;
  color: var(--texte-2); font: inherit; border-radius: 4px;
}
.t-etapes button:hover { color: var(--texte); background: var(--fond-2); }
.t-etapes button[aria-current="step"] { color: var(--accent); font-weight: 700; }

/* --- l'etape --- */
.t-etape {
  background: var(--fond-1); border: 1px solid var(--trait); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 16px 20px 18px; min-width: 0;
}
.t-tete { margin-bottom: 12px; }
.t-fil {
  margin: 0 0 2px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent);
}
.t-tete h2 { margin: 0; }

.t-corps { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 22px; align-items: start; }
.t-corps.sans-capture { grid-template-columns: minmax(0, 640px); }

.t-texte { display: flex; flex-direction: column; min-width: 0; }
#t-paragraphes p { margin: 0 0 11px; font-size: 14px; line-height: 1.65; color: var(--texte-2); }
#t-paragraphes strong { color: var(--texte); }
#t-paragraphes code, .t-fichier {
  background: var(--fond-3); color: var(--texte); padding: 1px 6px; border-radius: 4px;
  font-size: 12.5px; word-break: break-word;
}
.t-prealable { display: block; margin: 0 0 12px; }
.t-prealable .lien { padding: 0; font-size: inherit; }

.t-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 4px 0 14px; }
.t-actions .t-action { margin: 0; }
.t-suite { flex-basis: 100%; margin: 4px 0 0; font-size: 12.5px; color: var(--texte-3); }

.t-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--trait); }
.t-bouton {
  padding: 8px 16px; border-radius: 5px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait-clair);
}
.t-bouton:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.t-bouton:disabled { opacity: .35; cursor: default; }
.t-suivant { margin-left: auto; background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.t-suivant:hover:not(:disabled) { color: var(--sur-accent); filter: brightness(1.08); }

/* La capture occupe la place restante, sans jamais pousser la page a defiler sur un ecran de bureau. */
.t-capture { margin: 0; min-width: 0; }
.t-capture a { display: block; }
.t-capture img {
  display: block; width: 100%; height: auto; max-height: calc(100vh - 250px); object-fit: contain;
  object-position: left top; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--fond);
}
.t-capture a:hover img { border-color: var(--accent); }
.t-capture figcaption { margin-top: 6px; font-size: 12px; color: var(--texte-3); }
.t-capture .t-agrandir { margin: 2px 0 0; font-size: 11px; color: var(--texte-3); }

/* Lien vers le tutoriel, dans les fenetres d'import. */
.t-lien-tuto { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--accent); text-decoration: none; }
.t-lien-tuto:hover { text-decoration: underline; }
/* Le raccourci vers la vue, dans la fenetre d'import du Suivi d'effectif : un paragraphe, que
   `.rappel` en ligne eclatait en colonnes (meme correction que #s-vue). */
#e-vue-toute-faite { display: block; line-height: 1.6; }
#e-vue-toute-faite .bouton-telecharger { margin: 6px 0 0; }

/* En dessous de 1700 px, cote a cote la capture deviendrait illisible : le texte passe au-dessus. */
@media (max-width: 1700px) {
  .t-corps { grid-template-columns: minmax(0, 1fr); }
  .t-capture img { max-height: none; }
}
@media (max-width: 900px) {
  .t-grille { grid-template-columns: minmax(0, 1fr); }
  .t-etape { padding: 14px; }
}
@media (min-width: 2200px) and (min-height: 1100px) {
  .t-page { zoom: 1.25; }
  .t-capture img { max-height: calc(80vh - 200px); }
}