/* =====================================================================
   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); font-variant-numeric: tabular-nums; }
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; }
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; border: 2px solid var(--noir); }
.forme .V { background: var(--noir); color: var(--papier); }
.forme .N { background: var(--gris); border-color: var(--gris); }
.forme .D { background: transparent; }

/* ---------- 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); }
.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; }

/* ---------- 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; }
.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-douce); font-size: var(--step--1); }

/* ---------- Tuiles de chiffres clé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; }
.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); }
.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); }
.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; }
.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); }
.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); }
.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); }
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; }
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: 36px; 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; }
.vide { color: var(--gris); }

/* Calendrier */
.calendrier li { list-style: none; }
.calendrier { margin: 0; padding: 0; }
.ligne-match { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.ligne-match .quand { font-size: var(--step--1); color: var(--encre-douce); }
.ligne-match .qui { font-weight: 700; min-width: 0; }
.ligne-match .qui small { display: block; font-weight: 500; color: var(--encre-douce); font-size: var(--step--2); }
.ligne-match .actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.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); border-color: var(--gris); }

/* Journal du match */
.filtres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-xs); }
.filtres button { min-height: 40px; 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: "–"; }

/* ---------- 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; }

.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--2); border-top: 1px solid var(--filet); }

@media (max-width: 560px) {
  .entete-outil { display: none; }
  .tableau-score { grid-template-columns: 1fr; text-align: center; }
  .tableau-score .equipe:last-child { text-align: center; }
  .ligne-match { grid-template-columns: 5.4em minmax(0, 1fr); }
  .ligne-match .actions { grid-column: 1 / -1; justify-content: flex-start; }
}

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