/* =====================================================================
   style.css — Statistiques des coachs du HBC Moudon

   Charte reprise de HBCM-reel (l'outil des visuels Instagram) :
   - fond papier #F5F2EC, texte noir #0D0D0D ;
   - l'ORANGE #FF7A00 est réservé à l'action (boutons) et à « nous » dans les graphiques ;
     jamais de texte orange sur le papier (contraste insuffisant) ;
   - angles droits, pas d'ombres, pas de cartes arrondies ;
   - AT Name Sans partout ; Grenat seulement pour « HBC Moudon » et les scores
     (son V majuscule ressemble à un U : jamais pour des noms variables).
   ===================================================================== */

@font-face { font-family: 'Grenat'; font-weight: 900; font-display: swap; src: url('fonts/Grenat0_2-Black.woff2') format('woff2'); }
@font-face { font-family: 'AT Name Sans'; font-weight: 1 1000; font-display: swap; src: url('fonts/AT-NameSansSplitVF-Upright.woff2') format('woff2'); }
@font-face { font-family: 'AT Name Sans'; font-style: italic; font-weight: 1 1000; font-display: swap; src: url('fonts/AT-NameSansSplitVF-Italic.woff2') format('woff2'); }

:root {
  --orange: #FF7A00; --noir: #0D0D0D; --papier: #F5F2EC; --gris: #BDB8AE;
  --papier-creux: #EDE8DC; --filet: #D9D4C8; --encre-douce: #6B675F; --encre-forte: #4A4740; --erreur: #B00020;
  /* Graphiques : « nous » en orange (valeurs toujours écrites à côté), l'adversaire en gris (repère) */
  --nous: #FF7A00; --adv: #8C877D;
  /* Utopia (https://utopia.fyi) : texte 17 → 19 px, écrans de 360 à 1240 px */
  --step--2: 0.8125rem;
  --step--1: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.01rem + 0.23vw, 1.1875rem);
  --step-1: clamp(1.275rem, 1.19rem + 0.39vw, 1.48rem);
  --step-2: clamp(1.53rem, 1.39rem + 0.61vw, 1.85rem);
  --step-3: clamp(1.84rem, 1.62rem + 0.94vw, 2.31rem);
  --step-4: clamp(2.6rem, 2.1rem + 2.2vw, 3.8rem);
  --space-2xs: clamp(0.5rem, 0.48rem + 0.11vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.72rem + 0.17vw, 0.84rem);
  --space-s: clamp(1rem, 0.96rem + 0.23vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.43rem + 0.34vw, 1.69rem);
  --space-l: clamp(2rem, 1.91rem + 0.45vw, 2.25rem);
  --space-xl: clamp(3rem, 2.86rem + 0.68vw, 3.375rem);
  --largeur: 1120px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* l'attribut hidden doit gagner même si le CSS fixe un display */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'AT Name Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 500; font-size: var(--step-0);
  line-height: 1.45; background: var(--papier); color: var(--noir); }
/* Chiffres tous de la même largeur (« tabular-nums ») : seulement là où ils doivent s'aligner en colonne.
   Pas sur tout le texte : avec cette option, certaines polices élargissent aussi le trait d'union
   (« H3 - 12 », « Mi - temps »). */
td:not(.g), .tuile .valeur, .comparatif-ligne .v, .mini-score, .journal .t, .forme { font-variant-numeric: tabular-nums; }
td.score { font-variant-numeric: normal; }   /* « 4-4 » : un score n'a pas besoin d'aligner ses chiffres, et garde un trait d'union serré */
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--noir); outline-offset: 2px; }
/* Lien d'évitement : caché hors de l'écran, il apparaît quand le clavier le touche */
.evitement { position: absolute; left: var(--space-s); top: -100px; z-index: 2000; padding: 12px 16px; background: var(--noir); color: var(--papier); font-weight: 700; }
.evitement:focus { top: var(--space-2xs); }
main:focus, #saisie:focus, .saisie-consigne:focus, .saisie-question:focus { outline: none; }   /* focus donné par le programme à chaque changement d'écran : pas un repère pour le clavier */
h1, h2, h3 { line-height: 1.15; margin: 0; }
h1 { font-size: var(--step-3); font-weight: 800; }
h2 { font-size: var(--step-1); font-weight: 800; margin-bottom: var(--space-xs); }
h3 { font-size: var(--step-0); font-weight: 800; margin-bottom: var(--space-2xs); }
p { margin: 0 0 var(--space-xs); }
.marque, .score-chiffre { font-family: 'Grenat', 'AT Name Sans', sans-serif; font-weight: 900; }
.aide { color: var(--encre-douce); font-size: var(--step--1); }
.petit { font-size: var(--step--1); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- En-tête : bande noire, logo blanc, filet orange (comme les visuels Instagram) ---------- */
.entete { background: var(--noir); color: var(--papier); border-bottom: 6px solid var(--orange); }
.entete-dedans { max-width: var(--largeur); margin: 0 auto; padding: var(--space-xs) var(--space-s); display: flex; align-items: center; gap: var(--space-s); }
.entete-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.entete-logo img { height: 34px; width: auto; display: block; }
.entete-logo .marque { font-size: var(--step-1); line-height: 1; letter-spacing: .01em; }
.entete-outil { font-size: var(--step--1); color: var(--gris); font-weight: 600; margin-left: auto; text-align: right; }

/* Fil d'Ariane (Accueil › M15 › Match) */
.fil { max-width: var(--largeur); margin: 0 auto; padding: var(--space-xs) var(--space-s) 0; font-size: var(--step--1); color: var(--encre-douce); }
.fil a { display: inline-flex; align-items: center; min-height: 44px; color: var(--noir); font-weight: 600; }
.fil span[aria-hidden] { margin: 0 6px; }

main { max-width: var(--largeur); margin: 0 auto; padding: var(--space-s) var(--space-s) var(--space-xl); }
.bloc { margin-top: var(--space-l); }
.bloc > h2 { border-top: 2px solid var(--noir); padding-top: var(--space-xs); }
.titre-page { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-s); }
.titre-page .aide { margin: 4px 0 0; }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 2px solid var(--noir);
  background: transparent; color: var(--noir); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.bouton:hover { background: var(--papier-creux); }
.bouton-action { background: var(--orange); border-color: var(--orange); }   /* texte NOIR sur orange : bon contraste */
.bouton-action:hover { background: #FF8F2B; }
.bouton-petit { min-height: 44px; padding: 0 14px; font-size: var(--step--1); }
.bouton[disabled] { opacity: .55; cursor: progress; }
.boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-xs); }
select { font: inherit; min-height: 44px; padding: 0 10px; border: 2px solid var(--noir); background: var(--papier); color: var(--noir); }

/* ---------- Messages ---------- */
.message { border: 2px solid var(--noir); padding: var(--space-xs) var(--space-s); margin: var(--space-s) 0; }
.message-erreur { border-color: var(--erreur); }
.chargement { padding: var(--space-l) 0; color: var(--encre-douce); }
.chargement::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; background: var(--orange); animation: clignote 1s steps(2) infinite; vertical-align: -1px; }
@keyframes clignote { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .chargement::before { animation: none; } }

/* Pastille « ticker buts seulement » / « en direct » */
.etiquette { display: inline-block; padding: 2px 8px; border: 1px solid currentColor; font-size: var(--step--2); font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: 2px; }
.etiquette-direct { background: var(--orange); border-color: var(--orange); color: var(--noir); }
.etiquette-direct::before { content: "● "; }
.etiquette-douce { color: var(--encre-douce); }

/* Forme (5 derniers matchs) : carrés V / N / D */
.forme { display: inline-flex; gap: 3px; vertical-align: middle; }
.forme b { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: 12px; font-weight: 800; color: var(--noir); border: 2px solid var(--noir); }
.forme .V { background: var(--noir); color: var(--papier); }
.forme .N { background: var(--gris); }
.forme .D { background: transparent; }
/* Le dernier match joué (à droite) est souligné d'un trait noir, posé sous le carré sans le déplacer */
.forme b { position: relative; }
.forme b.recent::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -7px; height: 3px; background: var(--noir); }
/* « Championnat » écrit au-dessus des carrés (accueil, saison, préparer) ; la place du trait est gardée dessous */
.forme-bloc { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; vertical-align: middle; padding-bottom: 7px; }
.forme-titre { font-size: var(--step--2); font-weight: 600; line-height: 1.2; color: var(--encre-douce); }
/* Dans les tuiles de Préparer, la forme passe sous le texte : tout aligné à gauche, comme la tuile */
.tuile .forme-bloc { display: flex; align-items: flex-start; margin-top: 4px; }

/* ---------- Accueil : cartes des équipes ---------- */
.equipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--space-s); margin-top: var(--space-m); }
.carte { border: 2px solid var(--noir); padding: var(--space-s); display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; background: var(--papier); }
.carte h2 { margin: 0; font-size: var(--step-1); }
/* Le titre de la carte : un lien vers la saison, en bloc (au moins 44 px de haut pour le doigt), la flèche dans le texte */
.carte-titre { display: block; min-height: 44px; padding: 4px 0; color: var(--noir); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.carte-titre .cal-fleche { text-decoration: none; display: inline; }
.carte-titre:hover { background: var(--papier-creux); }
.carte-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid var(--filet); padding-top: var(--space-2xs); }
.carte-ligne .aide { margin: 0; }
.carte .boutons { margin-top: auto; padding-top: var(--space-2xs); }
.mini-score { font-family: 'Grenat', sans-serif; font-weight: 900; font-size: var(--step-1); white-space: nowrap; }
/* Accueil : la ligne « Dernier match » est un lien sur toute sa largeur (au moins 44 px de haut pour le doigt) */
.carte-lien { align-items: center; min-height: 44px; color: var(--noir); text-decoration: none; }
.carte-lien:hover { background: var(--papier-creux); }
.carte-adv { font-weight: 700; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.carte-score { display: flex; align-items: center; gap: 6px; flex: none; }
/* « Dernier match » : l'étiquette et la date sur toute la largeur, puis l'adversaire (qui passe à la ligne) et le score à droite */
.carte-dernier { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; }
.carte-dernier .carte-quand { grid-column: 1 / -1; }
/* En-tête de carte : la catégorie à gauche, le rang (et la forme dessous) à droite */
.carte-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.carte-rang { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; white-space: nowrap; font-size: var(--step--1); }
/* « Prochain match » : le bouton « Préparer » fait partie de la ligne (toute la ligne est le lien) */
.carte-prochain .bouton { min-height: 44px; padding: 0 14px; }
.carte-prochain:hover .bouton:not(.bouton-action) { background: var(--papier); }
/* Accueil : le titre et le choix de la saison côte à côte, la phrase d'aide dessous */
.titre-accueil { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xs) var(--space-s); }
.titre-accueil .aide { grid-column: 1 / -1; margin: 0; }

/* ---------- Tableau de score (page du match) ---------- */
.tableau-score { background: var(--noir); color: var(--papier); padding: var(--space-m) var(--space-s); margin: var(--space-s) 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-s); }
.tableau-score .equipe { font-weight: 800; font-size: var(--step-1); line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.tableau-score .equipe:last-child { text-align: right; }
/* « Nous » : petit carré orange devant le nom, comme dans les graphiques */
.tableau-score .equipe-nous::before { content: ''; display: inline-block; width: .6em; height: .6em; background: var(--nous); margin-right: .4em; }
.tableau-score .equipe small { display: block; font-weight: 600; font-size: var(--step--1); color: var(--gris); margin-top: 4px; }
.tableau-score .score { text-align: center; }
.tableau-score .score-chiffre { font-size: var(--step-4); line-height: 1; white-space: nowrap; }
.tableau-score .mi-temps { color: var(--gris); font-size: var(--step--1); margin-top: 6px; }
.bandeau-resultat { display: inline-block; margin-top: 8px; padding: 2px 10px; font-weight: 800; font-size: var(--step--1); }
.bandeau-resultat.V { background: var(--orange); color: var(--noir); }
.bandeau-resultat.N { background: var(--papier); color: var(--noir); }
.bandeau-resultat.D { background: var(--encre-forte); color: var(--papier); }
.infos-match { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: var(--space-xs); color: var(--encre-forte); font-size: var(--step--1); }

/* ---------- Tuiles de chiffres clés ---------- */
/* Classement et forme : 2 ou 3 tuiles qui se partagent toute la largeur, sans case vide */
.tuiles.tuiles-forme { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
/* Page d'équipe : « Mi-temps et fin de match » en 2 colonnes, la dernière tuile seule prend toute la ligne ; « La saison en chiffres » : une seule tuile (le bilan V-N-D) au-dessus des barres */
.tuiles.tuiles-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tuiles-deux .tuile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tuiles.tuiles-seule { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; margin-bottom: var(--space-s); }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 0; border-top: 2px solid var(--noir); border-left: 1px solid var(--filet); }
.tuile { padding: var(--space-xs) var(--space-s); border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); min-width: 0; }
.tuile .valeur { font-size: var(--step-3); font-weight: 800; line-height: 1.05; }
.tuile .valeur small { font-size: var(--step-0); font-weight: 700; }
.tuile .libelle { font-weight: 700; font-size: var(--step--1); margin-top: 4px; }
.tuile .compare { color: var(--encre-douce); font-size: var(--step--2); margin-top: 2px; }

/* ---------- Comparaison nous / adversaire (barres horizontales) ---------- */
.comparatif { display: grid; gap: 2px; max-width: 760px; margin-inline: auto; }
.comparatif-ligne { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) 4.2em; gap: 10px; align-items: center; }
.comparatif-ligne .v-adv { text-align: right; }
/* En-tête : le nom de chaque équipe, de son côté, avec sa couleur */
.comparatif-entete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; font-weight: 800; font-size: var(--step--1); padding-bottom: 6px; }
.comparatif-entete span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.comparatif-entete .l-nous::before { background: var(--nous); border: 1px solid var(--noir); }
.comparatif-entete .l-adv { text-align: right; }
.comparatif-entete .l-adv::before { background: var(--adv); }
.comparatif-ligne { padding: 8px 0; border-top: 1px solid var(--filet); }
/* La meilleure valeur de la ligne : blanc sur noir, comme l'étiquette « mieux » du retour sur le match */
.comparatif-ligne .chiffre { font-weight: inherit; padding: 0 5px; }
.comparatif-ligne .chiffre.avantage { background: var(--noir); color: var(--papier); }

/* « À retenir » en haut de l'écran Préparer : le résumé de la fiche, bien visible */
.a-retenir { border-left: 6px solid var(--orange); padding-left: var(--space-s); }
.a-retenir > h2 { border-top: 0; padding-top: 0; }
/* Accueil : « Ce week-end », les matchs de toutes les équipes d'ici dimanche (même filet orange que « À retenir ») */
.ce-week-end { margin-top: var(--space-m); border-left: 6px solid var(--orange); padding-left: var(--space-s); }
.ce-week-end h2 { margin: 0 0 2px; }
.ce-week-end ul { list-style: none; margin: 0; padding: 0; }
.ce-week-end li:last-child .cal-ligne { border-bottom: 0; }
/* Un titre par jour (« Samedi 7 novembre »), puis des lignes qui montrent seulement l'heure */
.ce-week-end h3 { margin: var(--space-xs) 0 0; font-size: var(--step--1); font-weight: 700; color: var(--encre-forte); }
.ce-week-end .cal-ligne { grid-template-columns: 3.4em minmax(0, 1fr) auto; }
.ce-week-end .quand { font-weight: 700; }
.a-retenir ul { margin: 0; padding-left: 1.1em; }
.a-retenir li { margin: 0 0 6px; max-width: 62ch; }
.comparatif-ligne .v { font-weight: 800; font-size: var(--step-0); }
.comparatif-ligne .milieu { min-width: 0; }
.comparatif-ligne .libelle { text-align: center; font-size: var(--step--1); font-weight: 600; margin-bottom: 4px; }
.comparatif-ligne .libelle small { color: var(--encre-douce); font-weight: 500; }
.barres-face { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 10px; }
.barres-face span { display: block; height: 100%; }
.barres-face .b-nous { background: var(--nous); justify-self: end; box-shadow: none; outline: 1px solid var(--noir); outline-offset: -1px; }
.barres-face .b-adv { background: var(--adv); justify-self: start; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--step--1); font-weight: 600; margin: 0 0 var(--space-xs); }
.legende span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.legende .l-nous::before { background: var(--nous); border: 1px solid var(--noir); }
.legende .l-adv::before { background: var(--adv); }

/* ---------- Graphiques SVG ---------- */
.graphique { width: 100%; overflow: hidden; }
.graphique svg { display: block; width: 100%; height: auto; }
.graphique text { font-family: 'AT Name Sans', system-ui, sans-serif; fill: var(--noir); font-variant-numeric: tabular-nums; }
.graphique .axe { stroke: var(--filet); stroke-width: 1; }
.graphique .axe-zero { stroke: var(--noir); stroke-width: 1; }
.graphique .texte-doux { fill: var(--encre-douce); }
/* Étiquettes dans le graphique (« HBC Moudon mène ») : un liseré couleur papier les protège de la courbe qui passerait dessous */
.graphique .etiquette-halo { stroke: var(--papier); stroke-width: 4px; paint-order: stroke; stroke-linejoin: round; }
.graphique [data-info] { cursor: default; }
.info-bulle { position: fixed; z-index: 50; pointer-events: none; background: var(--noir); color: var(--papier); padding: 6px 10px; font-size: var(--step--1); line-height: 1.35; max-width: 260px; }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-m) var(--space-l); }
.deux-colonnes > * { min-width: 0; }

/* ---------- Moments clés ---------- */
.moments { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--space-s); }
.moment { border-left: 4px solid var(--noir); padding: 2px 0 2px var(--space-xs); }
.moment.adv { border-left-color: var(--adv); }
.moment.nous { border-left-color: var(--nous); }
.moment strong { display: block; font-size: var(--step-1); line-height: 1.2; }
.moment p { margin: 2px 0 0; font-size: var(--step--1); color: var(--encre-forte); }

/* ---------- Tableaux ---------- */
.tableau-defile { overflow-x: auto; margin: 0 calc(-1 * var(--space-s)); padding: 0 var(--space-s); }
/* Largeur du tableau = celle de son contenu (au moins 36rem ou tout l'écran s'il est plus petit) :
   sur ordinateur, un petit tableau ne s'étire plus sur 1120 px, l'œil n'a plus à traverser la page. */
.tableau-defile > table { width: auto; min-width: min(100%, 36rem); }
/* Tableau plus large que l'écran : une indication sous le tableau, qui reste visible (sticky)
   pendant qu'on le fait glisser ; arrivé à la dernière colonne, la flèche montre le chemin du retour. */
.tableau-defile.deborde::after { content: "Faites glisser le tableau →"; display: block; position: sticky; left: 0;
  width: max-content; padding: 6px 0 2px; margin-bottom: var(--space-s); font-size: var(--step--1); font-weight: 600; color: var(--encre-douce); }
.tableau-defile.deborde.au-bout::after { content: "← Faites glisser le tableau"; }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
caption { text-align: left; font-weight: 800; font-size: var(--step-0); padding-bottom: 6px; }
/* Le titre d'un tableau qui défile de côté : au-dessus de lui, donc toujours dans l'écran */
.titre-tableau { margin: var(--space-m) 0 6px; font-size: var(--step-0); font-weight: 800; }
.titre-tableau .aide { font-weight: 500; }
th, td { padding: 8px 8px; text-align: right; border-bottom: 1px solid var(--filet); white-space: nowrap; }
th:first-child, td:first-child, th.g, td.g { text-align: left; }
td.nom { white-space: normal; min-width: 9em; font-weight: 600; }
thead th { border-bottom: 2px solid var(--noir); font-weight: 800; vertical-align: bottom; }
th button { font: inherit; font-weight: 800; background: none; border: 0; padding: 6px 0; min-height: 44px; cursor: pointer; color: inherit; text-align: inherit; }
th button::after { content: ""; display: inline-block; width: 1em; }
th[aria-sort="descending"] button::after { content: " ↓"; }
th[aria-sort="ascending"] button::after { content: " ↑"; }
tr.nous td { background: var(--noir); color: var(--papier); border-bottom-color: var(--encre-forte); }
tr.nous a { color: var(--papier); }
tr.eux td { background: var(--papier-creux); font-weight: 700; }
td .num { display: inline-block; min-width: 1.6em; color: var(--encre-douce); font-weight: 500; }
.journal .num { color: var(--encre-douce); font-weight: 500; }   /* « · 7 Léa Martin » : le numéro en gris, séparé du nom par une espace */
td.rang-zone { white-space: nowrap; }   /* « 2 △ » : le triangle de promotion / relégation reste à côté du rang */
td.rang-zone .zone-classement { font-size: .85em; }
.legende-zones span { font-size: .85em; }

/* Tableaux « colle » (joueurs, gardiens, classement) : quand le tableau défile de côté, les deux premières
   colonnes (N° et nom, ou Rang et équipe) restent en place. --colle = largeur de la 1re colonne (mesurée dans app.js).
   « separate » plutôt que « collapse » : sinon les filets des cellules collées disparaissent pendant le défilement. */
table.colle { border-collapse: separate; border-spacing: 0; }
/* Le cadre qui défile a une marge intérieure (--space-s) : on colle donc au VRAI bord (left négatif),
   sinon les chiffres qui défilent se verraient dans cette marge, à gauche du N°. */
table.colle th:first-child, table.colle td:first-child { position: sticky; left: calc(-1 * var(--space-s)); z-index: 1; }
table.colle th:nth-child(2), table.colle td:nth-child(2) { position: sticky; left: calc(var(--colle, 3rem) - var(--space-s)); z-index: 1; }
/* Un filet à droite des colonnes collées, seulement quand le tableau défile (les chiffres passent dessous) */
.deborde table.colle th:nth-child(2), .deborde table.colle td:nth-child(2) { box-shadow: inset -1px 0 0 var(--filet); }
/* Les cellules collées ont un fond (sinon on verrait les chiffres passer dessous). :where() = priorité nulle :
   les fonds des lignes « nous » (noir) et « eux » (papier creux) gagnent toujours. */
:where(table.colle) :where(th, td) { background: var(--papier); }
/* Le nom court (« N. Horisberger ») seulement sur téléphone */
.nom-court { display: none; }
@media (max-width: 560px) {
  .nom-long { display: none; }
  .nom-court { display: inline; white-space: nowrap; }
  td.nom { min-width: 0; }
  td.nom-equipe { min-width: 7.5em; }   /* noms d'équipe du classement : sur 2 lignes au plus */
}
.vide { color: var(--encre-douce); }   /* le gris clair n'avait que 1,8:1 sur le papier */
.insecable { white-space: nowrap; }   /* « (V-N-D) » : jamais coupé à un trait d'union */

/* ---------- Le retour sur le match ---------- */
.liste-retour { margin: 0; padding-left: 1.2em; }
.liste-retour li { margin: 6px 0; }
.note-retour { display: inline-block; padding: 1px 8px; font-size: var(--step--2); font-weight: 800; border: 2px solid var(--noir); }
.note-retour.mieux { background: var(--noir); color: var(--papier); }
.note-retour.pire { background: var(--adv); border-color: var(--adv); color: var(--noir); }   /* gris adversaire : aussi visible que « mieux » (texte noir : contraste 5,4:1) */
.retour td.nom { min-width: 7em; font-weight: 500; }

/* Calendrier */
.calendrier li { list-style: none; }
.calendrier { margin: 0; padding: 0; }
.pastille-resultat { display: inline-grid; place-items: center; width: 26px; height: 26px; font-weight: 800; font-size: 13px; border: 2px solid var(--noir); }
.pastille-resultat.V { background: var(--noir); color: var(--papier); }
.pastille-resultat.N { background: var(--gris); }

/* Écran Équipe : « Prochain match / Dernier match » en haut (deux cartes côte à côte, l'une sous l'autre sur téléphone) */
.a-suivre { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-s); margin-top: var(--space-m); }
.a-suivre-carte { border: 2px solid var(--noir); padding: var(--space-xs) var(--space-s); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.a-suivre-carte p { margin: 0; }
.a-suivre-qui { font-weight: 800; font-size: var(--step-1); line-height: 1.2; }
.a-suivre-score { display: flex; align-items: center; gap: 8px; }
.a-suivre-carte .bouton { margin-top: 6px; }
/* « Dernier match » compact : toute la carte est un lien (titre et date, puis adversaire et score) */
.a-suivre-dernier { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; align-self: start; color: var(--noir); text-decoration: none; }
.a-suivre-dernier:hover { background: var(--papier-creux); }
.a-suivre-dernier .aide { grid-column: 1 / -1; }
.a-suivre-dernier .a-suivre-qui { font-size: var(--step-0); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* Écran Équipe : le calendrier, une ligne courte et entièrement cliquable par match */
.cal-ligne { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; min-height: 56px;
  padding: 8px 0; border-bottom: 1px solid var(--filet); color: var(--noir); text-decoration: none; }
.cal-ligne:hover { background: var(--papier-creux); }
.cal-ligne .quand { font-size: var(--step--1); color: var(--encre-douce); line-height: 1.3; }
.cal-ligne .qui { font-weight: 700; min-width: 0; line-height: 1.25; }
.cal-ligne .qui small { display: block; font-weight: 500; color: var(--encre-douce); font-size: var(--step--2); margin-top: 2px; }
.cal-ligne .fin { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
/* Calendrier de l'équipe : la date sous le nom de l'adversaire (le nom a toute la largeur) */
.cal-ligne-dessous { grid-template-columns: minmax(0, 1fr) auto; }
.cal-ligne-dessous .qui small { font-size: var(--step--1); }
.cal-ligne .mini-score { font-size: var(--step-0); }
.cal-fleche { font-size: var(--step-1); line-height: 1; color: var(--encre-douce); padding-left: 2px; }
.cal-preparer { font-size: var(--step--1); font-weight: 700; white-space: nowrap; }

/* Notre ligne du classement est noire : les carrés de forme passent en clair pour rester visibles */
tr.nous .forme b { border-color: var(--papier); }
tr.nous .forme .V { background: var(--papier); color: var(--noir); }
tr.nous .forme .D { color: var(--papier); }
tr.nous .forme .N { background: var(--gris); border-color: var(--gris); color: var(--noir); }
tr.nous .forme b.recent::after { background: var(--papier); }

/* « Match après match » : chaque match s'ouvre au doigt */
.graphique a { cursor: pointer; }
.graphique a:focus-visible rect { outline: none; stroke: var(--noir); stroke-width: 3; }

/* Journal du match */
.filtres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-xs); }
.filtres button { min-height: 44px; padding: 0 12px; border: 2px solid var(--noir); background: transparent; font: inherit; font-size: var(--step--1); font-weight: 700; cursor: pointer; }
.filtres button[aria-pressed="true"] { background: var(--noir); color: var(--papier); }
.journal { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.journal li { display: grid; grid-template-columns: 3.4em 3.6em minmax(0, 1fr); gap: 10px; padding: 6px 0 6px 10px; border-bottom: 1px solid var(--filet); border-left: 4px solid transparent; }
.journal li.nous { border-left-color: var(--nous); }
.journal li.adv { border-left-color: var(--adv); }
.journal li.but { font-weight: 700; }
.journal .t { color: var(--encre-douce); }

details.repli { border-top: 2px solid var(--noir); margin-top: var(--space-l); }
details.repli > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 800; font-size: var(--step-1); cursor: pointer; list-style: none; }
details.repli > summary::-webkit-details-marker { display: none; }
details.repli > summary::after { content: "+"; font-size: var(--step-2); line-height: 1; }
details.repli[open] > summary::after { content: "–"; }
/* Un repli à l'intérieur d'une section (le détail du retour) : titre plus petit */
details.repli-petit { border-top-width: 1px; margin-top: var(--space-m); }
details.repli-petit > summary { font-size: var(--step-0); min-height: 48px; }
details.repli-petit .tableau-defile { margin-top: var(--space-xs); }

/* Écran Match : les raccourcis sous le score (Chiffres · Fil du match · Retour · Joueurs · Journal) */
/* Collés en haut de l'écran pendant le défilement, sur une seule ligne (elle défile de côté s'il manque de la place) */
.raccourcis { display: flex; flex-wrap: nowrap; gap: 2px; margin-top: var(--space-s); padding: 8px 0;
  position: sticky; top: 0; z-index: 5; background: var(--papier); border-bottom: 2px solid var(--noir); overflow-x: auto; }
.raccourcis .bouton { flex: 1 0 auto; white-space: nowrap; padding: 0 5px; font-size: var(--step--2); }
/* Sur un grand écran, les boutons gardent leur largeur naturelle (alignés à gauche) au lieu de s'étirer
   sur 1120 px avec un petit texte au milieu : ils ressemblent à des boutons, plus à des champs de formulaire. */
@media (min-width: 760px) {
  .raccourcis { gap: 8px; }
  .raccourcis .bouton { flex: 0 0 auto; padding: 0 18px; font-size: var(--step--1); }
}
.raccourcis + .bloc > h2 { border-top: 0; }   /* le filet de la barre suffit */
/* Les sections s'arrêtent sous les raccourcis collés (environ 62 px) */
[id^="m-"], [id^="p-"], [id^="e-"], #saisie-tirs { scroll-margin-top: 70px; }
/* Le raccourci de la section affichée (« vous êtes ici », voir suivreRaccourcis() dans app.js) */
.raccourcis .bouton[aria-current="true"] { background: var(--noir); color: var(--papier); }

/* ---------- L'œil du coach (IA) ---------- */
.ia { border: 2px solid var(--noir); margin-top: var(--space-l); }
.ia-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: var(--space-xs) var(--space-s); background: var(--noir); color: var(--papier); }
.ia-entete h2 { margin: 0; font-size: var(--step-0); }
.ia-entete .aide { color: var(--gris); margin: 0; }
.ia-corps { padding: var(--space-s); }
.ia-corps h3 { font-size: var(--step-1); margin-bottom: 6px; }
.ia-resume { font-size: var(--step-0); font-weight: 600; max-width: 62ch; }
.ia-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-s) var(--space-m); margin-top: var(--space-s); }
.ia-sections h4 { margin: 0 0 6px; font-size: var(--step--1); font-weight: 800; border-top: 1px solid var(--noir); padding-top: 6px; }
.ia-sections ul { margin: 0; padding-left: 1.1em; font-size: var(--step--1); }
.ia-sections li { margin-bottom: 6px; }
.ia-pied { margin-top: var(--space-s); color: var(--encre-douce); font-size: var(--step--2); }

/* ---------- Écran du code d'accès ---------- */
.acces { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-s); background: var(--papier); }
.acces-boite { width: 100%; max-width: 380px; }
.acces-boite .marque { font-size: var(--step-3); }
.acces-boite label { display: block; margin: var(--space-s) 0 6px; font-weight: 700; }
.acces-boite input { width: 100%; min-height: 52px; padding: 0 12px; font: inherit; border: 2px solid var(--noir); background: #fff; }
.acces-erreur { margin: 8px 0 0; color: var(--erreur); font-weight: 600; }
.acces-boite .bouton { width: 100%; margin-top: var(--space-s); min-height: 56px; }

/* ---------- Nouveautés : bandeau d'alerte et écran (#/nouveautes) ---------- */
.bandeau-nouveautes { background: var(--papier-creux); border-bottom: 2px solid var(--noir); }
.bandeau-nouveautes-dedans { max-width: var(--largeur); margin: 0 auto; padding: var(--space-xs) var(--space-s);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-s); }
.bandeau-nouveautes p { margin: 0; flex: 1 1 22em; }
.bandeau-nouveautes .boutons { margin: 0; }
.bandeau-court { display: none; }
/* Téléphone : une seule ligne (« Bienvenue !  [Voir] [Fermer] ») pour laisser l'écran au contenu */
@media (max-width: 560px) {
  .bandeau-nouveautes-dedans { flex-wrap: nowrap; padding-top: 6px; padding-bottom: 6px; }
  .bandeau-nouveautes p { flex: 1 1 auto; min-width: 0; }
  .bandeau-nouveautes .boutons { flex-wrap: nowrap; gap: 6px; }
  .bandeau-long { display: none; }
  .bandeau-court { display: inline; }
}
.nouveautes-jour h3 { margin-top: var(--space-s); }
/* Un jour replié : la date (titre) et le nombre de changements côte à côte, le « + » à droite */
details.nouveautes-jour > summary h2 { margin: 0; font-size: inherit; }
details.nouveautes-jour > summary .aide { margin: 0 auto 0 0.6em; font-size: var(--step--1); font-weight: 500; }
.nouveautes-liste { margin: 0; padding-left: 1.2em; max-width: 46em; }
.nouveautes-liste li { margin: 0 0 var(--space-xs); }
.etiquette-nouveau { background: var(--orange); border-color: var(--orange); color: var(--noir); }   /* texte noir sur orange */
.pied a { color: var(--noir); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

.pied { max-width: var(--largeur); margin: 0 auto; padding: var(--space-m) var(--space-s) var(--space-l); color: var(--encre-douce); font-size: var(--step--1); border-top: 1px solid var(--filet); }

/* ---------- Boîte à idées (avis.js) ---------- */
.avis-appel { max-width: var(--largeur); margin: 0 auto; padding: var(--space-s); display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-2xs) var(--space-s); border-top: 2px solid var(--noir); }
.avis-appel p { margin: 0; font-size: var(--step--1); }
.avis-appel a { color: var(--noir); font-weight: 700; }
.pied a + a { margin-left: 16px; }
/* Les liens du pied de page sur leur ligne : leur zone tactile de 44 px n'écarte plus les lignes du paragraphe */
.pied-liens { margin-top: var(--space-2xs); }

.avis-dialogue { width: min(100% - 2 * var(--space-s), 520px); max-height: calc(100% - 2 * var(--space-s)); padding: 0;
  border: 2px solid var(--noir); border-top: 6px solid var(--orange); background: var(--papier); color: var(--noir); }
.avis-dialogue::backdrop { background: rgba(13, 13, 13, .6); }
.avis-form { padding: var(--space-s); }
.avis-form h2 { margin-top: 0; }
.avis-form > label { display: block; margin: var(--space-s) 0 6px; font-weight: 700; }
.avis-form textarea, .avis-form input:not([type="radio"]) { display: block; width: 100%; min-height: 48px; padding: 10px 12px; font: inherit;
  border: 2px solid var(--noir); background: #fff; color: var(--noir); }
.avis-form textarea { resize: vertical; }
.avis-form .aide { margin: 6px 0 0; }
.avis-types { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.avis-types legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.avis-type { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border: 2px solid var(--noir); cursor: pointer; }
.avis-type input { width: 20px; height: 20px; margin: 0; accent-color: var(--noir); flex: none; }
.avis-type span { display: flex; flex-direction: column; line-height: 1.2; }
.avis-type small { font-size: var(--step--1); color: var(--encre-douce); }
.avis-type:has(input:checked) { background: var(--orange); border-color: var(--orange); }   /* texte noir sur orange */
.avis-type:has(input:checked) small { color: var(--noir); }

.avis-liste { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.avis-carte { border: 2px solid var(--noir); padding: var(--space-xs) var(--space-s); min-width: 0; background: var(--papier); }
.statut-fait .avis-carte, .statut-pas-retenu .avis-carte { border-color: var(--gris); }
.avis-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.avis-message { overflow-wrap: anywhere; }
.avis-reponse { border-left: 4px solid var(--noir); padding: 4px 0 4px 12px; margin: 0 0 var(--space-xs); overflow-wrap: anywhere; }
.avis-reponse p { margin: 0 0 4px; }
.avis-vote[aria-pressed="true"] { background: var(--noir); color: var(--papier); }
.avis-compte { display: inline-block; min-width: 1.6em; padding: 0 4px; border-left: 2px solid currentColor; margin-left: 4px; text-align: center; }

@media (max-width: 560px) {
  .entete-outil { display: none; }
  /* Tableau de score compact : les deux équipes et le score sur UNE rangée (domicile | score | extérieur),
     comme sur ordinateur mais plus petit. Avant, tout était empilé : environ 400 px pour 4 informations. */
  .tableau-score { gap: 8px; padding: var(--space-s) 12px; }
  .tableau-score .equipe { font-size: var(--step-0); }
  .tableau-score .equipe small { font-size: var(--step--2); margin-top: 2px; }
  .tableau-score .score-chiffre { font-size: var(--step-3); }
  .tableau-score .mi-temps { font-size: var(--step--2); margin-top: 4px; white-space: nowrap; }
  .tableau-score .bandeau-resultat { margin-top: 6px; padding: 1px 8px; font-size: var(--step--2); }
  .tuiles-forme .tuile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.boutons-titre { display: flex; flex-wrap: wrap; gap: 8px; }

@media print {
  .entete, .bandeau-nouveautes, .fil, .boutons, .boutons-titre, .filtres, .ia-entete button, .pied, .avis-appel, .avis-dialogue { display: none !important; }
  body { background: #fff; }
  details.repli { display: block; }
}

/* =====================================================================
   Feuilles à imprimer (fiche de match des coachs, feuille papier de saisie des tirs)
   Pensées pour une imprimante NOIR ET BLANC : pas de couleur, des traits et des chiffres.
   Invisibles à l'écran ; à l'impression, elles remplacent la page.
   ===================================================================== */
.fiche, .feuille { display: none; }
@page { size: A4; margin: 10mm; }
@media print {
  .ecran { display: none !important; }       /* l'écran « Préparer » : remplacé par la fiche */
  .fiche, .feuille { display: block; color: #000; font-size: 9pt; line-height: 1.3; }
  .fiche h1 { font-size: 17pt; margin: 0 0 2pt; line-height: 1.1; }
  .fiche h2 { font-size: 10pt; margin: 8pt 0 3pt; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1.5pt solid #000; padding-bottom: 1pt; }
  .fiche p { margin: 0 0 3pt; }
  /* En-tête : le titre sur toute la largeur, puis la date et le lieu à gauche, les rangs à droite */
  .fiche-entete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2pt 10pt; border-bottom: 3pt solid #000; padding-bottom: 5pt; }
  .fiche-titre { grid-column: 1 / -1; }
  .fiche .fiche-quand { margin: 0; }
  .fiche-bloc { display: inline-block; }   /* un nom ne se coupe pas au milieu : la ligne passe à la ligne entre deux noms */
  .fiche-sur-titre { text-transform: uppercase; letter-spacing: .05em; font-size: 8pt; }
  .fiche-rangs { border-collapse: collapse; font-size: 8.5pt; }
  .fiche-rangs th, .fiche-rangs td { padding: 1pt 5pt; text-align: center; border-bottom: .5pt solid #000; }
  .fiche-rangs tbody th { text-align: left; }
  .fiche-forme { letter-spacing: .15em; font-weight: 700; }
  .fiche-histoire { margin-top: 4pt !important; font-size: 8.5pt; }
  .fiche-retenir ul { margin: 0; padding-left: 12pt; }
  .fiche-retenir li { margin-bottom: 1pt; }
  /* Les mêmes deux colonnes pour toute la page : les bords se suivent d'une rangée à l'autre */
  .fiche-colonnes { display: grid; grid-template-columns: 3fr 2fr; gap: 0 12pt; break-inside: avoid; }
  .fiche-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; font-variant-numeric: tabular-nums; }
  .fiche-table th, .fiche-table td { padding: 1.2pt 3pt; border-bottom: .5pt solid #000; text-align: center; }
  .fiche-table tbody th { text-align: left; font-weight: 500; }
  .fiche-table thead th { font-weight: 700; border-bottom-width: 1pt; }
  .fiche-table .gauche { text-align: left; }
  .fiche-table .fiche-meilleur { font-weight: 800; text-decoration: underline; text-underline-offset: 1.5pt; }   /* gras + souligné : se voit même sans couleur ni fond */
  .fiche-table tbody tr:nth-child(even) { background: #eee; }   /* gris très clair : lisible même en photocopie */
  .fiche-note { font-size: 7.5pt; margin-top: 2pt !important; }
  .fiche-resultats { margin: 0; padding: 0; list-style: none; font-size: 8.5pt; }
  .fiche-resultats strong { display: inline-block; width: 12pt; border: .5pt solid #000; text-align: center; margin: 0 3pt 2pt 0; }
  .fiche-banc { break-inside: avoid; }
  .fiche-cases { display: flex; gap: 14pt; }
  .fiche-ligne { display: block; height: 19pt; border-bottom: .5pt solid #000; }   /* environ 6,7 mm : de quoi écrire debout */
  .fiche-pied { margin-top: 6pt !important; text-align: right; }
}

/* =====================================================================
   Saisie des tirs au bord du terrain (saisie.html)
   Tout est pensé pour un pouce, debout, pendant le match : grandes zones, peu de texte.
   ===================================================================== */
.saisie { max-width: 560px; }
.saisie { padding-top: var(--space-xs); }
/* Score sur UNE ligne : les noms trop longs finissent par « … » (ils sont écrits en entier dans les boutons) */
.saisie-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; font-weight: 800; font-size: var(--step--1); }
.saisie-score span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.saisie-score span:last-child { text-align: right; }
.saisie-score .score-chiffre { font-size: var(--step-2); line-height: 1; }
.saisie-score .saisie-contre { font-weight: 500; color: var(--encre-douce); overflow: visible; }   /* avant le match, à la place du score */
.saisie-sous-titre { margin: 2px 0 0; font-size: var(--step--2); }
/* « Comment ça marche ? » : repliée après le premier tir */
.saisie-aide > summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--step--1); cursor: pointer; list-style: none; }
.saisie-aide > summary::-webkit-details-marker { display: none; }
.saisie-aide > summary::after { content: "+"; margin-left: 8px; font-size: var(--step-0); }
.saisie-aide[open] > summary::after { content: "–"; }
.saisie-aide p { margin: 0 0 8px; font-size: var(--step--1); }

/* Qui tire ? */
.saisie-cote-qui { display: block; font-weight: 500; font-size: var(--step--1); }
.saisie-cotes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.saisie-cote { min-height: 64px; padding: 6px 8px; border: 2px solid var(--noir); background: var(--papier); font: inherit; font-weight: 800;
  line-height: 1.15; cursor: pointer; color: var(--noir); overflow-wrap: anywhere; }
/* L'équipe qui tire : une coche devant « Tir de » (un fond gris seul ressemblerait à un bouton désactivé) */
.saisie-cote[aria-pressed="true"] .saisie-cote-qui::before { content: "✓ "; content: "✓ " / ""; }
.saisie-cote small { display: block; font-weight: 500; font-size: var(--step--1); margin-top: 2px; }
.saisie-cote.nous[aria-pressed="true"] { background: var(--nous); border-color: var(--nous); }   /* texte noir sur orange */
.saisie-cote.adv[aria-pressed="true"] { background: var(--adv); border-color: var(--adv); }

/* Le terrain : le but en haut, les zones disposées comme sur le terrain */
.terrain { margin-top: var(--space-xs); border: 2px solid var(--noir); border-top-width: 6px; padding: 0 8px 8px; }
.terrain.nous { border-top-color: var(--nous); }
.terrain.adv { border-top-color: var(--adv); }
.terrain-but { width: fit-content; min-width: 40%; max-width: 100%; margin: 0 auto 8px; background: var(--noir); color: var(--papier); text-align: center; font-weight: 800; font-size: var(--step--1); padding: 4px; }
.terrain-zones { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.zone { grid-column: span 2; min-height: 76px; padding: 6px; border: 2px solid var(--noir); background: var(--papier-creux); font: inherit; font-weight: 700;
  font-size: var(--step--1); line-height: 1.15; cursor: pointer; color: var(--noir); overflow-wrap: anywhere; }
.zone:active { background: var(--orange); }
.zone-7m, .zone-ca { grid-column: span 3; min-height: 60px; background: var(--papier); }

/* Le résultat */
.saisie-resultat { margin-top: var(--space-xs); display: grid; gap: 8px; }
.saisie-question { margin: 0; font-size: var(--step-0); }
/* La consigne de l'étape 1, au-dessus des zones du terrain */
.saisie-consigne { margin: 0 0 6px; text-align: center; font-size: var(--step--1); font-weight: 700; }
.saisie-resultat .bouton { min-height: 64px; flex-direction: column; gap: 2px; font-size: var(--step-1); width: 100%; }
.saisie-resultat .bouton small { font-size: var(--step--1); font-weight: 500; }
.saisie-resultat .bouton-petit { min-height: 48px; font-size: var(--step--1); }
.resultat-but { background: var(--orange); border-color: var(--orange); }

/* Le dernier tir et « Annuler » : au-dessus des boutons, hauteur minimale fixe (rien ne bouge quand il apparaît) */
.saisie-dernier { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
  padding: 0 0 0 10px; border-left: 4px solid var(--noir); font-size: var(--step--1); line-height: 1.25; }
/* Le texte passe à la ligne et le cadre grandit si besoin (texte agrandi dans les réglages du téléphone) : rien n'est coupé */
.saisie-dernier > span { min-width: 0; overflow-wrap: anywhere; }
.saisie-dernier .bouton { flex: none; }
/* Petits téléphones (iPhone SE…) : tout un peu plus serré, pour garder le terrain entier sur l'écran */
@media (max-height: 620px) {
  .page-saisie .entete-dedans { padding-top: 4px; padding-bottom: 4px; }
  .page-saisie .entete-logo img { height: 26px; }
  .page-saisie .saisie-sous-titre { display: none; }
  .page-saisie .saisie-cote { min-height: 56px; padding: 4px 6px; }
  .page-saisie .zone { min-height: 60px; }
  .page-saisie .zone-7m, .page-saisie .zone-ca { min-height: 48px; }
  .page-saisie .saisie-resultat .bouton:not(.bouton-petit) { min-height: 54px; }
}
.saisie-etat { font-size: var(--step--1); margin: 4px 0; }
.saisie-etat::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: 0; }
.saisie-etat.ok::before { background: var(--noir); }
.saisie-etat.attente::before { background: var(--orange); }

/* Corriger les tirs */
.saisie-tirs { margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
/* Liste compacte : une ligne par tir (48 px), les menus de correction seulement pour le tir touché */
.saisie-tirs li { border-bottom: 1px solid var(--filet); }
.tir-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0; border: 0; background: none;
  font: inherit; font-size: var(--step--1); color: var(--noir); text-align: left; cursor: pointer; }
.tir-resume { min-width: 0; overflow-wrap: anywhere; padding: 4px 0; }   /* un long nom d'équipe passe à la ligne : on voit toujours quelle équipe a tiré */
.tir-plus { flex: none; font-size: var(--step-1); font-weight: 800; }
.saisie-tirs li.ouvert { background: var(--papier-creux); }
.tir-edition { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: center; padding: 0 0 10px; }
.tir-edition .bouton { justify-self: end; }
.saisie-tirs select[data-champ="equipe"] { grid-column: 1 / -1; }
.saisie-tirs li.supprime { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; font-size: var(--step--1); }
.saisie-tirs li.supprime .bouton { flex: none; }
.saisie-tirs select { min-height: 44px; font: inherit; font-size: var(--step--1); border: 2px solid var(--noir); background: #fff; padding: 0 6px; min-width: 0; width: 100%; }
/* Tir effacé : fond gris clair plutôt qu'un texte pâle (l'opacité à 50 % ne laissait que 3,5:1, même au bouton « Rétablir ») */
.saisie-tirs li.supprime { background: var(--papier-creux); padding: 0 8px; }

/* Le lien de saisie, sur les pages des coachs */
.lien-saisie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-xs); }
tr.total td { border-top: 2px solid var(--noir); }
.lien-saisie input { flex: 1 1 14em; min-width: 0; min-height: 44px; font: inherit; font-size: var(--step--1); border: 2px solid var(--noir); background: #fff; padding: 0 8px; }

/* La feuille papier de saisie des tirs (saisie.html) */
.saisie-papier { margin-top: var(--space-m); border-top: 1px solid var(--filet); padding-top: var(--space-s); }
.saisie-papier h2 { font-size: var(--step-0); margin: 0 0 4px; }
@media print {
  .page-saisie .appli { display: none !important; }
  .feuille-page { break-after: page; }
  .feuille-page:last-child { break-after: auto; }
  .feuille h1 { font-size: 15pt; margin: 0; line-height: 1.1; }
  .feuille p { margin: 0 0 2pt; }
  .feuille-sur-titre { text-transform: uppercase; letter-spacing: .05em; font-size: 8pt; margin-bottom: 3pt !important; }
  .feuille-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 10pt; border-bottom: 3pt solid #000; padding-bottom: 4pt; margin-bottom: 4pt; }
  .feuille-cadre { font-size: 8.5pt; line-height: 1.9; text-align: right; }
  .feuille-legende { font-size: 8pt; border: 1pt solid #000; padding: 3pt 5pt; margin-bottom: 5pt; }
  .feuille-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8mm; }
  .feuille-tirs { list-style: none; margin: 0; padding: 0; }
  /* Lignes de 6,8 mm (au lieu de 6,3) : la place libre en bas des pages sert à entourer plus à l'aise */
  .feuille-tirs li { display: flex; align-items: center; gap: 1.8mm; height: 6.8mm; border-bottom: .5pt solid #000; }
  .feuille-tirs li.cinq { border-bottom-width: 1.5pt; }
  .feuille-n { width: 5.5mm; text-align: right; font-weight: 700; font-size: 8pt; font-variant-numeric: tabular-nums; }
  .feuille-groupe { display: flex; gap: 1.2mm; }
  .feuille-groupe + .feuille-groupe { border-left: 1pt solid #000; padding-left: 1.6mm; }
  /* Les 8 positions en deux paquets (5 du terrain | pivot, 7 m, contre-attaque), séparés par un trait pointillé fin */
  .feuille-paquet { display: flex; gap: 1.2mm; }
  .feuille-paquet + .feuille-paquet { border-left: .5pt dotted #000; padding-left: 1.4mm; margin-left: .2mm; }
  .rond { display: inline-block; min-width: 5.2mm; text-align: center; font-size: 8pt; font-weight: 600; color: #222; }
  /* L'équipe (N / E) est le choix de chaque tir : lettres plus grandes et plus noires */
  .feuille-equipe .rond { min-width: 6.4mm; font-size: 10pt; font-weight: 800; color: #000; }
  .feuille-rappel { font-size: 7.5pt; border: 1pt solid #000; padding: 2pt 5pt; margin-bottom: 5pt !important; }
}

/* ---------- Écran Match : match précédent / suivant (en bas de page) ---------- */
.voisins { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); margin-top: var(--space-l); }
.voisin { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: var(--space-xs) var(--space-s);
  border: 2px solid var(--noir); color: var(--noir); text-decoration: none; min-width: 0; overflow-wrap: break-word; }
.voisin .sans-coupure { white-space: nowrap; }
.voisin:hover { background: var(--papier-creux); }
.voisin small { color: var(--encre-douce); font-size: var(--step--1); }
.voisin-apres { text-align: right; }
@media print { .voisins { display: none; } }