/* Composants de l'outil de suivi des joueurs, direction C « Club premium ».
   Version 1.1 du 18/10/2026. N'utilise que les variables de tokens.css :
   aucune couleur écrite en clair ici.
   Les états visuels suivent les attributs d'accessibilité (aria-pressed,
   aria-current, data-etat) : un état visible est aussi un état annoncé. */

/* ---------- Base ---------- */

.app {
  font-family: var(--police-texte);
  font-size: var(--t-texte);
  line-height: 1.45;
  color: var(--encre);
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
}

.app :focus-visible {
  outline: 3px solid var(--focus-anneau);
  outline-offset: 2px;
}

.titre {
  margin: 0;
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.titre--ecran { font-size: var(--t-titre-1); }
.titre--carte { font-size: var(--t-titre-2); }

.chiffre {
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chiffre--heros { font-size: var(--t-heros); font-weight: 800; line-height: 0.85; }
.chiffre--heros-2 { font-size: var(--t-heros-2); font-weight: 800; line-height: 0.85; }
.chiffre--tuile { font-size: var(--t-chiffre); }

.nom-joueur { font-size: var(--t-nom); font-weight: 800; letter-spacing: -0.01em; }
.texte-doux { color: var(--encre-douce); }
.legende { font-size: var(--t-legende); color: var(--encre-douce); }

.icone {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone--petite { width: 16px; height: 16px; stroke-width: 2.4; }

/* ---------- Bandeau du club ---------- */
/* Fond bleu coupé en diagonale, liseré jaune dessous, tracé de terrain discret. */

.bandeau {
  --focus-anneau: var(--club-accent-lisible);
  position: relative;
  padding-bottom: var(--bandeau-lisere);
  color: var(--club-sur-principal);
}
.bandeau__lisere {
  position: absolute;
  inset: 0;
  background: var(--club-accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bandeau-coupe) + 10px), 0 100%);
}
.bandeau__corps {
  position: relative;
  overflow: hidden;
  background: var(--club-principal);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bandeau-coupe)), 0 100%);
  padding-block: var(--e-5) calc(var(--bandeau-coupe) + var(--e-4));
  padding-inline: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.bandeau__motif {
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 100%;
  pointer-events: none;
  fill: none;
  stroke: var(--sur-bandeau-trace);
  stroke-width: 2;
}
.bandeau__haut {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}
.bandeau__sous-titre { margin: 0; font-size: var(--t-petit); color: var(--sur-bandeau-doux); }
.bandeau__heros {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--e-3);
}
.bandeau__heros .chiffre { color: var(--club-accent-lisible); }
.bandeau__heros-libelle {
  padding-bottom: 6px;
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-titre-2);
  line-height: 1.05;
}
/* Une carte qui chevauche le bas du bandeau */
.chevauche { position: relative; margin-top: -28px; }

/* ---------- Boutons ---------- */

.bouton {
  box-sizing: border-box;   /* un lien en forme de bouton ne dépasse pas sa ligne */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--h-toucher);
  padding-inline: 18px;
  border: 0;
  border-radius: var(--r-bouton);
  font: 700 var(--t-texte)/1 var(--police-texte);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree-courte) var(--courbe), transform var(--duree-courte) var(--courbe);
}
.bouton:active { transform: scale(0.98); }
.bouton--principal {
  min-height: var(--h-bouton);
  background: var(--club-principal);
  color: var(--club-sur-principal);
  font-family: var(--police-titre);
  font-style: italic;
  font-size: var(--t-titre-2);
  letter-spacing: 0.01em;
}
.bouton--principal:hover { background: var(--club-principal-fonce); }
.bouton--secondaire { background: var(--champ-appuye); color: var(--club-principal); }
.bouton--fantome { background: transparent; color: var(--club-principal); }
.bouton--accent {
  border-radius: var(--r-pastille);
  background: var(--club-accent);
  color: var(--club-sur-accent);
  font-weight: 800;
  font-size: var(--t-petit);
}
.bouton--calque {
  background: var(--sur-bandeau-calque);
  color: var(--club-sur-principal);
}
.bouton--rond { width: var(--h-toucher); min-height: var(--h-toucher); padding: 0; border-radius: var(--r-pastille); }
.bouton--carre { width: var(--h-bouton); min-height: var(--h-bouton); padding: 0; }
.bouton--large { width: 100%; }
.bouton:disabled,
.bouton[aria-disabled="true"] {
  background: var(--champ);
  color: var(--encre-douce);
  cursor: not-allowed;
  transform: none;
}

/* ---------- Saisie après match ---------- */

.critere { display: flex; flex-direction: column; gap: var(--e-2); }
.critere__entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); }
.critere__nom { font-weight: 700; }
.critere__portee { margin-left: var(--e-2); font-size: var(--t-mini); color: var(--encre-douce); }
.critere__etat { font-size: var(--t-legende); font-weight: 600; }
.critere__etat--a-noter { color: var(--attention); }

.notes { display: flex; gap: 6px; }
.note {
  flex: 1 1 0;
  min-width: 0;
  height: var(--h-note);
  border: 0;
  border-radius: var(--r-note);
  background: var(--champ);
  color: var(--encre);
  font: italic 700 1.5rem/1 var(--police-titre);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--duree-courte) var(--courbe);
}
.note--non-vu { flex: 1.7 1 0; font: 600 var(--t-petit)/1 var(--police-texte); color: var(--encre-douce); }
.note[aria-pressed="true"] {
  background: var(--club-principal);
  color: var(--club-sur-principal);
  box-shadow: inset 0 -4px 0 var(--club-accent);
}
/* Note visible mais pas encore ouverte (auto-évaluation avant le 1er mai) */
.note:disabled {
  background: var(--champ);
  color: var(--encre-douce);
  box-shadow: inset 0 0 0 1px var(--ligne);
  cursor: not-allowed;
}

/* ---------- Matchs : étapes du match du jour, matchs repliés, notes d'un match ---------- */

.etapes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-petit); color: var(--encre-2); }
.etapes li { display: flex; align-items: center; gap: var(--e-2); }
.etapes li[data-fait] { color: var(--succes); font-weight: 700; }

.plie { border-top: 1px solid var(--ligne); }
.plie > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: var(--h-toucher); font-size: var(--t-petit); font-weight: 700; color: var(--encre-2); cursor: pointer; list-style: none; }
.plie > summary::-webkit-details-marker { display: none; }
.plie[open] > summary > .icone { transform: rotate(180deg); }

/* Les 4 notes d'un joueur pour un match, en petit (2 critères communs, puis 2 du poste) */
.notes-mini { display: flex; gap: 4px; flex: none; }
.notes-mini__note {
  width: 26px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--champ);
  color: var(--encre);
  font: italic 700 1.0625rem/1 var(--police-titre);
  font-variant-numeric: tabular-nums;
}
.notes-mini__note[data-vide] { color: var(--encre-douce); }

/* Code d'accès à transmettre à un joueur (identifiant ou mot de passe oublié) : gros, lisible, à recopier */
.code-acces {
  padding: 14px 16px;
  border-radius: var(--r-tuile);
  background: var(--champ);
  color: var(--encre);
  font: italic 800 2rem/1 var(--police-titre);
  letter-spacing: 0.08em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.interrupteur {
  position: relative;
  width: 52px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--controle);
  cursor: pointer;
  transition: background-color var(--duree-courte) var(--courbe);
}
.interrupteur::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--surface);
  transition: transform var(--duree) var(--courbe);
}
.interrupteur[aria-pressed="true"] { background: var(--club-principal); }
.interrupteur[aria-pressed="true"]::after { transform: translateX(20px); background: var(--club-accent-lisible); }

.avatar {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-avatar);
  background: var(--club-principal);
  color: var(--club-accent-lisible);
  display: flex;
  align-items: center;
  justify-content: center;
  font: italic 700 var(--t-titre-2)/1 var(--police-titre);
}

/* ---------- Pastilles ---------- */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-pastille);
  background: var(--champ);
  color: var(--encre);
  font: 600 var(--t-legende)/1.3 var(--police-texte);
  text-decoration: none;  /* une pastille peut être un lien (onglets) */
}
/* Pastille qui se touche : zone de toucher agrandie à 48 px sans changer son dessin */
.pastille--action { position: relative; cursor: pointer; }
.pastille--action::after { content: ""; position: absolute; inset: -8px -4px; }
.pastille--succes { background: var(--succes-fond); color: var(--succes); }
.pastille--attention { background: var(--attention-fond); color: var(--attention); }
.pastille--club { background: var(--club-principal); color: var(--club-accent-lisible); font-weight: 800; }
.pastille--calque { background: var(--sur-bandeau-calque); color: var(--club-sur-principal); }

/* ---------- Feuille de choix (monte du bas de l'écran) ---------- */

.voile { background: var(--club-voile); }
.feuille {
  background: var(--surface);
  border-radius: var(--r-feuille) var(--r-feuille) 0 0;
  padding: 22px var(--e-4) calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feuille__choix {
  min-height: 54px;
  padding-inline: 18px;
  border: 0;
  border-radius: 14px;
  background: var(--champ);
  color: var(--encre);
  font: 700 var(--t-texte)/1.2 var(--police-texte);
  text-align: left;
  text-decoration: none;  /* un choix peut être un lien (ouvrir la fiche PDF) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  cursor: pointer;
}
.feuille__detail { font-size: var(--t-legende); font-weight: 600; opacity: 0.85; }
.feuille__choix[aria-pressed="true"] { background: var(--club-principal); color: var(--club-sur-principal); }

/* ---------- Cartes et tuiles ---------- */

.carte {
  background: var(--surface);
  border-radius: var(--r-carte);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.carte--alerte { background: var(--attention-fond); color: var(--attention-encre); flex-direction: row; align-items: center; gap: var(--e-3); padding: 14px var(--e-4); border-radius: var(--r-tuile); }
.carte--alerte .icone { color: var(--attention); }
.signal { flex-direction: row; align-items: center; gap: var(--e-3); padding: 14px var(--e-4); border-radius: var(--r-tuile); }
.signal__icone {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-note);
  background: var(--club-principal);
  color: var(--club-accent-lisible);
  display: flex;
  align-items: center;
  justify-content: center;
}
.signal__titre { font: italic 700 1.25rem/1.1 var(--police-titre); color: var(--club-principal); }

.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tuiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tuile {
  background: var(--surface);
  border-radius: var(--r-tuile);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tuile--creuse { background: var(--fond); }
.tuile__libelle { font-size: var(--t-mini); color: var(--encre-douce); }

/* ---------- Progression ---------- */
/* La valeur se donne en ligne : style="--valeur: 58%" */

.progression { height: 8px; border-radius: 4px; background: var(--piste); overflow: hidden; }
.progression__valeur { height: 100%; width: var(--valeur, 0%); border-radius: 4px; background: var(--club-principal); }
.progression--attention { background: var(--attention-piste); }
.progression--attention .progression__valeur { background: var(--attention-trait); }
.progression--bandeau { height: 6px; background: var(--sur-bandeau-piste); }
.progression--bandeau .progression__valeur { background: var(--club-accent-lisible); }

/* Jongles : la position de chaque palier se donne en ligne : style="--position: 75%" */
.jongle { display: flex; flex-direction: column; gap: 5px; }
.jongle__entete { display: flex; justify-content: space-between; align-items: baseline; }
.jongle__piste { position: relative; height: 10px; border-radius: 5px; background: var(--piste); }
.jongle__valeur { height: 100%; width: var(--valeur, 0%); border-radius: 5px; background: var(--club-principal); }
.jongle__palier {
  position: absolute;
  top: -2px;
  left: var(--position);
  width: 2px;
  height: 14px;
  transform: translateX(-1px);
  background: var(--surface);
}
.jongle__palier[data-etat="a-venir"] { background: var(--controle); }
.jongle__palier[data-etat="prochain"] {
  top: -3px;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  transform: translateX(-2px);
  background: var(--club-accent);
  box-shadow: 0 0 0 1px var(--club-principal);
}

/* Record perso : noté par le joueur lui-même, donc dans la couleur de ce qui vient du joueur */
.record-perso { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-legende); color: var(--encre-2); }
.record-perso .icone { margin-top: 1px; color: var(--objectif-defi); }

/* Parcours d'un objectif : autant de colonnes que d'étapes (2 à 4).
   Dans une carte .objectif, les étapes franchies prennent la couleur du type. */
.parcours {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
}
.parcours__etape { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-mini); font-weight: 700; }
.parcours__etape::before { content: ""; height: 6px; border-radius: 3px; background: var(--ligne); }
.parcours__etape[data-etat="fait"]::before { background: var(--objectif-trait, var(--club-principal)); }
.parcours__etape[data-etat="en-cours"] { color: var(--objectif-encre, var(--club-principal)); font-weight: 800; }
.parcours__etape[data-etat="en-cours"]::before { background: var(--club-accent); box-shadow: inset 0 0 0 1px var(--objectif-encre, var(--club-principal)); }
.parcours__etape[data-etat="a-venir"] { color: var(--encre-douce); font-weight: 600; }

/* ---------- Objectifs : trois types ---------- */
/* Le type se donne par data-type="coach|categorie|defi" sur la carte.
   La couleur dit qui a fixé l'objectif ; l'étiquette et l'icône le disent en mots. */

.objectif {
  --objectif-trait: var(--objectif-coach);
  --objectif-encre: var(--club-principal);
  gap: 12px;
  padding-left: 22px;
  box-shadow: inset 5px 0 0 var(--objectif-trait);
}
.objectif[data-type="categorie"] { --objectif-trait: var(--objectif-categorie); --objectif-encre: var(--objectif-categorie-encre); }
.objectif[data-type="defi"] { --objectif-trait: var(--objectif-defi); --objectif-encre: var(--objectif-defi-encre); }
.objectif__haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--e-2); }
.objectif__titre { margin: 0; font-size: var(--t-texte); font-weight: 800; line-height: 1.35; }
.objectif[data-type="coach"] .objectif__titre { font: italic 700 var(--t-titre-2)/1.1 var(--police-titre); }
.objectif__etat { display: flex; align-items: center; gap: 6px; font-size: var(--t-legende); font-weight: 700; color: var(--encre-2); }
.objectif__etat--confirme { color: var(--succes); }
.objectif__etat--ecoule { color: var(--encre-douce); }
/* Échéance : obligatoire pour les trois types (objectifs SMART, au moins datés) */
.objectif__echeance { display: flex; align-items: center; gap: 6px; font-size: var(--t-legende); font-weight: 600; color: var(--encre-2); }
.objectif__echeance .icone { color: var(--objectif-encre, var(--club-principal)); }
.objectif__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Choix unique parmi des pastilles (échéance) : l'état suit aria-pressed */
.pastille[aria-pressed="true"],
.pastille[aria-current="page"] { background: var(--club-principal); color: var(--club-sur-principal); font-weight: 700; }

/* Rappel non bloquant sous un champ (« combien ? ») */
.champ__rappel { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-legende); font-weight: 600; color: var(--attention); }
.champ__rappel .icone { margin-top: 1px; }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-pastille);
  font: 700 var(--t-mini)/1.3 var(--police-texte);
}
.etiquette .icone { width: 15px; height: 15px; stroke-width: 2.4; }
.etiquette--coach { background: var(--objectif-coach); color: var(--club-sur-principal); }
.etiquette--coach .icone { color: var(--club-accent-lisible); }
.etiquette--categorie { background: var(--objectif-categorie-fond); color: var(--objectif-categorie-encre); }
.etiquette--defi { background: var(--objectif-defi-fond); color: var(--objectif-defi-encre); }

/* Groupe d'objectifs dans une liste : titre, compteur à droite */
.groupe__entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-2); }
.groupe__titre { margin: 0; font: italic 700 var(--t-nom)/1.1 var(--police-titre); }
.groupe__compte { font-size: var(--t-legende); font-weight: 700; color: var(--encre-douce); font-variant-numeric: tabular-nums; }

/* Idées de défi et d'objectif, choix d'échéance : pastilles qui remplissent le champ */
.idees { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.idees .pastille { text-align: left; }

/* Ligne d'une liste de joueurs, côté coach (validation pour toute l'équipe) */
.ligne-joueur { display: flex; align-items: center; gap: var(--e-3); min-height: 56px; }
.ligne-joueur + .ligne-joueur { border-top: 1px solid var(--ligne); }
.ligne-joueur .avatar { width: 40px; height: 40px; border-radius: var(--r-note); font-size: 1.125rem; }
.ligne-joueur__nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 800; }

/* ---------- Graphiques ---------- */
/* Trait de 2 px, point final cerclé, grille d'un pixel, texte jamais dans la couleur de la donnée. */

.graphique { display: block; max-width: 100%; height: auto; overflow: visible; }
.graphique text { fill: var(--encre-douce); font: 600 12px var(--police-texte); }
.graphique .valeur { fill: var(--encre); font-weight: 800; }
.graphique--radar text { font-size: 13px; }
.graphique__grille { fill: none; stroke: var(--ligne); stroke-width: 1; }
.graphique__trait { fill: none; stroke: var(--club-principal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graphique__aire { fill: var(--club-principal); fill-opacity: 0.1; stroke: var(--club-principal); stroke-width: 2; stroke-linejoin: round; }
.graphique__point { fill: var(--club-principal); stroke: var(--surface); stroke-width: 2; }
.graphique__point--a-regarder { fill: var(--club-accent); stroke: var(--club-principal); stroke-width: 2; }
.graphique__cible { fill: transparent; cursor: pointer; }
.graphique__cible:focus-visible { outline: none; stroke: var(--focus-anneau); stroke-width: 3; }

/* ---------- Badges ---------- */

.badge {
  width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  text-align: center;
  font-size: var(--t-mini);
  font-weight: 700;
  line-height: 1.25;
}
.badge__medaille {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--club-principal);
  color: var(--club-accent-lisible);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--club-accent);
}
.badge__medaille .icone { width: 26px; height: 26px; }
.badge--a-gagner { color: var(--encre-douce); font-weight: 600; }
.badge--a-gagner .badge__medaille { background: var(--champ); color: var(--encre-douce); box-shadow: inset 0 0 0 2px var(--controle); }
.badge--nouveau .badge__medaille { animation: badge-gagne 650ms var(--courbe) both; }

@keyframes badge-gagne {
  0% { transform: scale(0.55) rotate(-12deg); }
  60% { transform: scale(1.1) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- Navigation basse ---------- */

/* Autant de colonnes égales que d'onglets : 4 pour le joueur et le responsable, 5 pour le coach */
.nav-basse {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--e-1);
  padding: 0 var(--e-2) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
}
.nav-basse__lien {
  min-height: 56px;
  padding: 10px 0 6px;
  border: 0;
  border-top: 3px solid transparent;
  background: none;
  color: var(--encre-douce);
  font: 600 var(--t-mini)/1.1 var(--police-texte);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1);
  cursor: pointer;
}
.nav-basse__lien[aria-current="page"] { border-top-color: var(--club-accent); color: var(--club-principal); font-weight: 800; }

/* ---------- Messages ---------- */

.message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-bouton);
  font-size: var(--t-petit);
  line-height: 1.4;
}
.message .icone { margin-top: 1px; }
.message__corps { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.message__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.message--succes { background: var(--succes-fond); color: var(--succes); }
.message--attention { background: var(--attention-fond); color: var(--attention-encre); }
.message--attention .icone { color: var(--attention); }
.message--erreur { background: var(--erreur-fond); color: var(--erreur); }
.message--info { background: var(--club-principal-doux); color: var(--club-principal); }

/* Bandeau de confirmation en bas d'écran, avec « Annuler » */
.toast {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 10px 10px 10px var(--e-4);
  border-radius: var(--r-bouton);
  background: var(--encre);
  color: var(--surface);
  font-size: var(--t-petit);
  font-weight: 600;
}
.toast__action {
  margin-left: auto;
  min-height: 40px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--r-note);
  background: transparent;
  color: var(--club-accent-lisible);
  font: 800 var(--t-petit)/1 var(--police-texte);
  cursor: pointer;
}

/* ---------- États vides ---------- */

.vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px var(--e-5);
  border-radius: var(--r-carte);
  background: var(--surface);
  text-align: center;
}
.vide__icone {
  width: 56px;
  height: 56px;
  border-radius: var(--r-bouton);
  background: var(--club-principal-doux);
  color: var(--club-principal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vide__texte { margin: 0; max-width: 32ch; color: var(--encre-2); }

/* ---------- Formulaires ---------- */

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ__libelle { font-size: var(--t-petit); font-weight: 700; }
.champ__saisie {
  min-height: var(--h-toucher);
  box-sizing: border-box;
  padding: 10px var(--e-3);
  border: 2px solid var(--controle);
  border-radius: var(--r-note);
  background: var(--surface);
  color: var(--encre);
  font: 400 var(--t-texte)/1.4 var(--police-texte);
}
textarea.champ__saisie { min-height: 104px; resize: vertical; }
.champ__saisie:focus-visible { border-color: var(--club-principal); outline-offset: 1px; }
.champ__saisie--nombre { width: 96px; text-align: center; font: italic 700 1.5rem/1 var(--police-titre); font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
/* On tape le nombre : pas de flèches pour monter ou descendre */
.champ__saisie--nombre::-webkit-outer-spin-button,
.champ__saisie--nombre::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.champ__aide { font-size: var(--t-legende); color: var(--encre-douce); }
.champ__erreur { display: flex; align-items: center; gap: 6px; font-size: var(--t-legende); font-weight: 700; color: var(--erreur); }
.champ--erreur .champ__saisie { border-color: var(--erreur); }
/* Case à cocher (accord du joueur, accord du parent) : la case native, agrandie, garde son accessibilité.
   Tout le libellé se touche, sur 48 pixels de haut au moins */
.case { display: flex; align-items: flex-start; gap: 12px; min-height: var(--h-toucher); box-sizing: border-box; padding-block: 12px; font-size: var(--t-petit); font-weight: 700; cursor: pointer; }
.case input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--club-principal); cursor: pointer; }

/* ---------- Terrain : composition d'une équipe (foot à 8 : 7 joueurs et 1 gardien) ---------- */
/* Chaque poste se place en ligne : style="--x: 50%; --y: 90%". Le but de l'équipe est en bas. */

.terrain {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-carte);
  overflow: hidden;
  background: var(--club-principal);
}
.terrain__lignes { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--terrain-ligne); stroke-width: 1.5; }
.terrain__poste {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  min-width: 64px;
  padding: 2px;
  border: 0;
  background: none;
  color: var(--club-sur-principal);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.terrain__jeton {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--club-principal);
  font: italic 700 1.125rem/1 var(--police-titre);
  box-shadow: 0 0 0 2px var(--club-accent-lisible);
}
.terrain__poste[data-vide] .terrain__jeton {
  background: transparent;
  color: var(--club-sur-principal);
  box-shadow: inset 0 0 0 2px var(--sur-bandeau-doux);
  font: 800 1.25rem/1 var(--police-texte);
}
.terrain__nom { max-width: 88px; font-size: var(--t-mini); font-weight: 800; line-height: 1.15; text-align: center; }
.app .terrain__poste:focus-visible { outline: 3px solid var(--club-accent-lisible); outline-offset: 2px; border-radius: var(--r-note); }

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  .app *,
  .app *::before,
  .app *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}