/* Styles de l'appli. Thème clair ou sombre au choix du coach (menu ≡ de l'écran 1, js/theme.js) :
   attribut data-theme="light" ou "dark" sur <html>, sans attribut = Auto (réglage du téléphone).
   Contraste du texte d'au moins 4,5:1 dans les deux thèmes. */

/* Thème clair */
:root {
  color-scheme: light;
  --fond: #ffffff;
  --surface: #f2f4f7;
  --texte: #1a1d21;
  --texte-doux: #4a5260;
  --bordure: #8a93a3;
  --bleu: #1557c0;       /* boutons principaux, texte blanc dessus : 6,3:1 */
  --bleu-texte: #1557c0;
  --rouge-texte: #b3261e;
  --rouge-fond: #fdecea;
  --info-fond: #e8f0fe;
  --vert: #1e7d3a;
  --danger: #b3261e;
  --carte: #ffffff;
  --fond-appli: #f2f4f7;
}

/* Thème sombre : choisi par le coach, ou en Auto quand le téléphone est en sombre. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #15181c;
  --surface: #23272e;
  --texte: #eceff3;
  --texte-doux: #b4bcc8;
  --bordure: #6b7480;
  --bleu: #1557c0;
  --bleu-texte: #8ab4f8;
  --rouge-texte: #ffb4ab;
  --rouge-fond: #3b1714;
  --info-fond: #1c2a44;
  --vert: #1e7d3a;
  --danger: #b3261e;
  --carte: #23272e;
  --fond-appli: #15181c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fond: #15181c;
    --surface: #23272e;
    --texte: #eceff3;
    --texte-doux: #b4bcc8;
    --bordure: #6b7480;
    --bleu: #1557c0;
    --bleu-texte: #8ab4f8;
    --rouge-texte: #ffb4ab;
    --rouge-fond: #3b1714;
    --info-fond: #1c2a44;
    --vert: #1e7d3a;
    --danger: #b3261e;
    --carte: #23272e;
    --fond-appli: #15181c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  background: var(--fond);
  color: var(--texte);
}

[hidden] { display: none !important; }

/* Barre du haut : flèche retour à gauche, logo du club à droite (SPEC.md, section 4). */
.barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  min-height: 56px;
}
.retour {
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  color: var(--texte);
  font-size: 1.6rem;
  cursor: pointer;
}
.titre-barre { flex: 1; font-weight: 600; font-size: 1.1rem; }
.logo { width: 44px; height: 44px; object-fit: contain; }
.lien-logo { display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; }

/* Écran 0 */
.connexion {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.logo-grand { width: 112px; height: 112px; object-fit: contain; align-self: center; }
.connexion h1 { text-align: center; margin: 0 0 8px; font-size: 1.6rem; }

form, #bloc-confirmation { display: flex; flex-direction: column; gap: 8px; }
label { font-weight: 600; margin-top: 4px; }
input {
  min-height: 48px;
  padding: 8px 12px;
  font-size: 1rem;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 8px;
}
input:focus { outline: 2px solid var(--bleu-texte); outline-offset: 1px; }
.aide { margin: 0; color: var(--texte-doux); font-size: 0.9rem; }

/* Boutons d'action : 48 px de haut au moins. */
.bouton {
  min-height: 48px;
  padding: 8px 16px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.bouton:disabled { opacity: 0.6; cursor: default; }
.bouton.principal { background: var(--bleu); color: #ffffff; }
.bouton.secondaire { background: var(--surface); color: var(--texte); border-color: var(--bordure); }
.bouton.lien { background: none; color: var(--bleu-texte); text-decoration: underline; }
.google { display: flex; align-items: center; justify-content: center; gap: 10px; }
.google .g { font-weight: 800; color: var(--bleu-texte); font-size: 1.2rem; }

.separateur {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--texte-doux);
}
.separateur::before, .separateur::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--bordure);
}

.message {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
}
.message[data-type="erreur"] { background: var(--rouge-fond); color: var(--rouge-texte); }
.message[data-type="info"] { background: var(--info-fond); color: var(--texte); }

/* ---------- Écrans 1 à 4 ---------- */

#appli { min-height: 100vh; display: flex; flex-direction: column; background: var(--fond-appli); }
#appli .barre { background: var(--fond); border-bottom: 1px solid var(--surface); }
h1.titre-barre { margin: 0; }
.contenu { flex: 1; padding: 12px 16px 96px; max-width: 640px; width: 100%; margin: 0 auto; }
.vide { color: var(--texte-doux); text-align: center; margin: 24px 0; }
.sous-titre { margin: 20px 0 8px; font-size: 1rem; color: var(--texte-doux); }

/* Bouton d'action fixé en bas de l'écran */
.bas-ecran {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--fond-appli) 30%);
}
.bas-ecran .bouton { min-width: 160px; }
.bas-ecran.deux .bouton { flex: 1; max-width: 220px; min-width: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.actions.centre { justify-content: center; flex-direction: column; }
.bouton.danger { background: var(--danger); color: #ffffff; }
.bouton.lien { min-height: 48px; padding: 8px; }

/* Écran 1 : cartes des équipes */
.liste-cartes { display: flex; flex-direction: column; gap: 12px; }
.carte {
  display: flex; align-items: stretch;
  background: var(--carte); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.carte-principale {
  flex: 1; display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 12px 16px;
  background: none; border: 0; color: var(--texte);
  font-size: 1.05rem; font-weight: 600; text-align: left; cursor: pointer;
}
.ballon { font-size: 1.4rem; }
.carte-menu {
  width: 56px; background: none; border: 0; color: var(--texte);
  font-size: 1.5rem; font-weight: 700; cursor: pointer;
}

/* Écrans 2 et 4 : lignes de liste */
.liste { display: flex; flex-direction: column; background: var(--carte); border-radius: 12px; overflow: hidden; }
.ligne {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 16px;
  background: none; border: 0; border-bottom: 1px solid var(--fond-appli);
  color: var(--texte); font-size: 1rem; text-align: left; cursor: pointer; width: 100%;
}
.ligne:last-child { border-bottom: 0; }
.ligne > span:first-of-type { flex: 1; }
.chevron { color: var(--texte-doux); font-size: 1.4rem; }
.ligne.case { font-weight: 500; }
.ligne.case input { width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--bleu); }

/* Écran 3 */
.bandeau {
  background: #1a1d21; color: #ffffff;
  padding: 28px 16px; text-align: center;
}
.bandeau h2 { margin: 0; font-size: 1.6rem; }
.liste-matchs { display: flex; flex-direction: column; gap: 8px; }
.ligne-match {
  display: flex; align-items: stretch;
  border-radius: 10px; background: var(--bleu); color: #ffffff;
}
.ligne-match-principale {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 52px; padding: 10px 0 10px 16px;
  border: 0; background: none; color: inherit;
  font-size: 0.95rem; font-weight: 600; text-align: left; cursor: pointer;
}
.ligne-match .carte-menu { color: #ffffff; }
.ligne-match.a-demarrer { background: #4a5260; }  /* texte blanc : 7,6:1 */
.ligne-match.en-cours { background: var(--vert); }   /* texte blanc : 5,2:1 */
.ligne-match.termine { background: var(--bleu); }
/* Sur fond orange, texte foncé (contraste supérieur à 9:1). */
.ligne-match.en-pause { background: #ffd9a8; color: #1a1d21; }
.ligne-match.fin-periode { background: #f59f00; color: #1a1d21; }
.ligne-match.en-pause .carte-menu, .ligne-match.fin-periode .carte-menu { color: #1a1d21; }
.pastille { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Écran 4 */
.champs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ligne-resume { display: flex; align-items: center; justify-content: space-between; margin: 4px 0; }
.resume { font-weight: 600; }
.roue {
  width: 48px; height: 48px; border: 0; background: none;
  color: var(--texte); font-size: 1.6rem; cursor: pointer;
}
.ligne-presence { margin: 8px 0 4px; }
.grille-reglages { display: flex; flex-direction: column; gap: 8px; }
.champ-reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.champ-reglage label { margin: 0; font-weight: 500; flex: 1; }
.fenetre .champ-reglage input { width: 88px; text-align: center; }

/* Fenêtres (dialog natif) */
.fenetre {
  width: min(92vw, 420px); max-height: 90vh; overflow: auto;
  border: 0; border-radius: 16px; padding: 20px;
  background: var(--fond); color: var(--texte);
  display: flex; flex-direction: column; gap: 10px;
}
.fenetre:not([open]) { display: none; }
.fenetre::backdrop { background: rgba(0, 0, 0, 0.5); }
.fenetre h2 { margin: 0 0 4px; font-size: 1.2rem; }
.fenetre p { margin: 0; }
.fenetre input { width: 100%; }
.pied-fenetre { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* Message court */
.toast {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%);
  max-width: 90vw; padding: 12px 16px; border-radius: 10px;
  background: #1a1d21; color: #ffffff; z-index: 10; text-align: center;
}

/* Écran 1 : fenêtre Nom + Féminine / Masculine, choix du thème */
.choix-genre { display: flex; gap: 8px; margin-top: 4px; }
.choix {
  flex: 1; display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--bordure); border-radius: 8px; font-weight: 500; margin: 0;
}
.fenetre .choix input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--bleu); }
.libelle-theme { font-weight: 600; margin-top: 8px !important; }
.segments { display: flex; border: 1px solid var(--bordure); border-radius: 8px; overflow: hidden; }
.segment {
  flex: 1; min-height: 48px; border: 0; background: var(--surface);
  color: var(--texte); font-size: 1rem; font-weight: 600; cursor: pointer;
}
.segment + .segment { border-left: 1px solid var(--bordure); }
.segment[aria-pressed="true"] { background: var(--bleu); color: #ffffff; }

/* ---------- Écran 5 – Le match ---------- */

:root {
  /* Fonds des chronos : mêmes couleurs claires dans les deux thèmes, chiffres en foncé (section 7). */
  --chrono-vert: #9fe0b1;
  --chrono-orange: #ffc785;
  --chrono-rouge: #ff9a94;
  --chrono-texte: #111418;
  --chiffres: ui-monospace, "Roboto Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

.ecran-match { flex: 1; padding: 6px 8px 92px; max-width: 640px; width: 100%; margin: 0 auto; }

.entete-match { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.periode { font-size: 1rem; font-weight: 600; color: var(--texte-doux); }
.chrono-principal {
  font-family: var(--chiffres); font-variant-numeric: tabular-nums;
  font-size: 56px; line-height: 1; font-weight: 500; color: var(--texte);
}
.cadre-score {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 132px; min-height: 64px; padding: 6px 10px;
  background: var(--carte); color: var(--texte);
  border: 2px solid var(--texte); border-radius: 8px; cursor: pointer;
}
.cadre-score.inactif { border-color: var(--bordure); color: var(--texte-doux); cursor: default; }
.cadre-score .noms { display: flex; justify-content: space-between; gap: 10px; width: 100%; font-size: 0.8rem; }
.nom-equipe { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.valeur-score { font-family: var(--chiffres); font-size: 30px; font-variant-numeric: tabular-nums; }

/* Une ligne par joueuse : nom, interrupteur, Attente, En jeu, Cumulé. */
.ligne-joueuse {
  display: grid; grid-template-columns: minmax(0, 1fr) 48px 66px 66px 66px;
  align-items: center; column-gap: 4px;
  min-height: 48px; padding: 0 4px;
  background: var(--carte); border-bottom: 1px solid var(--fond-appli);
}
.ligne-joueuse.titres {
  min-height: 24px; background: none; border: 0;
  font-size: 0.8rem; font-weight: 600; color: var(--texte-doux); text-align: center;
}
.lignes-joueuses { border-radius: 10px; overflow: hidden; }
.nom-joueuse { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mini-chrono {
  font-family: var(--chiffres); font-variant-numeric: tabular-nums;
  font-size: 20px; text-align: center; line-height: 32px; border-radius: 6px;
}
.mini-chrono[data-couleur="vert"] { background: var(--chrono-vert); color: var(--chrono-texte); }
.mini-chrono[data-couleur="orange"] { background: var(--chrono-orange); color: var(--chrono-texte); }
.mini-chrono[data-couleur="rouge"] { background: var(--chrono-rouge); color: var(--chrono-texte); }
.mini-chrono[data-couleur="neutre"] { color: var(--texte-doux); }
.mini-chrono.cumule { color: var(--texte); }

/* Interrupteur : vert = terrain, gris = banc ; grisé quand le chrono tourne. */
.interrupteur {
  position: relative; width: 46px; height: 28px; padding: 0;
  border: 0; border-radius: 14px; background: #8a93a3; cursor: pointer;
}
.interrupteur[aria-checked="true"] { background: var(--vert); }
.interrupteur:disabled { opacity: 0.45; cursor: default; }
.bouton-glissant {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #ffffff; transition: left 0.15s;
}
.interrupteur[aria-checked="true"] .bouton-glissant { left: 21px; }

/* Gros bouton Reprendre / Arrêter en bas à droite. */
.bas-match {
  position: fixed; right: 0; bottom: 0; left: 0;
  display: flex; justify-content: flex-end;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.bouton-chrono {
  pointer-events: auto;
  min-width: 168px; min-height: 68px; padding: 0 24px;
  border: 0; border-radius: 16px;
  background: var(--bleu); color: #ffffff;
  font-size: 1.5rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.bouton-chrono.arreter { background: var(--danger); }

/* Écran 6 – Saisie du score */
.fenetre-score { gap: 4px; }
.haut-score, .bas-score { display: flex; justify-content: flex-end; }
.icone-fenetre {
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: var(--surface); color: var(--texte); font-size: 1.6rem; cursor: pointer;
}
.icone-fenetre.valider { background: var(--vert); color: #ffffff; }
.colonnes-score { display: flex; justify-content: center; gap: 16px; }
.separateur-score { border-left: 2px solid var(--bordure); }
.colonne-score { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.colonne-score .nom-equipe { max-width: 12ch; font-weight: 600; color: var(--texte-doux); }
.score-saisi { font-family: var(--chiffres); font-size: 40px; line-height: 1.1; }
.bouton-points {
  width: 88px; min-height: 48px; border: 0; border-radius: 10px;
  background: var(--bleu); color: #ffffff; font-size: 1.2rem; font-weight: 700; cursor: pointer;
}
.bouton-points.moins { background: var(--surface); color: var(--texte); border: 1px solid var(--bordure); }

/* ---------- Écrans 7, 8 et 9 – Fin de période ---------- */

.fenetre .question { font-size: 1.2rem; font-weight: 600; margin: 8px 0; }

/* Écran 8 – Mi-temps : nom, temps de jeu cumulé, une case par minute et par période. */
.grille-mitemps { display: flex; flex-direction: column; gap: 2px; }
.mt-ligne {
  display: grid; align-items: center; column-gap: 6px;
  grid-template-columns: minmax(0, 1.1fr) 54px repeat(var(--nb-periodes, 2), minmax(0, 1fr));
  min-height: 28px;
}
.mt-entete { font-size: 0.75rem; font-weight: 600; color: var(--texte-doux); text-align: center; }
.mt-nom { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grille-mitemps .mini-chrono { font-size: 16px; line-height: 24px; }
.mt-cases { display: flex; gap: 1px; height: 22px; border-left: 2px solid var(--texte); padding-left: 2px; }
.mt-cases i { flex: 1; border-radius: 2px; }
.case-verte { background: #2fbf5b; }
.case-vide { background: var(--surface); }

/* ---------- Écran 10 – Rapport ---------- */

.contenu-rapport { max-width: none; padding-left: 8px; padding-right: 8px; }
.resume-rapport { text-align: center; margin-bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.score-rapport { display: flex; justify-content: center; align-items: baseline; gap: 12px; }
.score-rapport strong { font-family: var(--chiffres); font-size: 28px; }
.score-rapport .nom-equipe { max-width: 14ch; font-weight: 600; }
.date-rapport { color: var(--texte-doux); font-size: 0.9rem; }

/* La grille défile au doigt ; les 3 premières colonnes restent visibles (position: sticky). */
.defilement-grille {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--carte); border-radius: 8px;
}
.grille-rapport { border-collapse: separate; border-spacing: 0; font-size: 0.8rem; }
.grille-rapport th, .grille-rapport td {
  padding: 0; height: 26px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--surface); background: var(--carte); color: var(--texte);
}
.grille-rapport thead th { font-weight: 600; color: var(--texte-doux); padding: 2px 4px; }
.titre-periode { color: var(--texte) !important; }
.num-minute { font-size: 0.7rem; }
.chiffres { font-family: var(--chiffres); font-variant-numeric: tabular-nums; }

.fige { position: sticky; z-index: 1; }
/* Largeurs fixes : chaque colonne figée commence où finit la précédente. */
.f1 { left: 0; width: 92px; min-width: 92px; max-width: 92px; text-align: left !important; padding: 0 4px 0 6px !important; overflow: hidden; text-overflow: ellipsis; }
.f2 { left: 92px; width: 46px; min-width: 46px; max-width: 46px; }
.f3 { left: 138px; width: 32px; min-width: 32px; max-width: 32px; border-right: 2px solid var(--texte) !important; }
.titre-court { white-space: normal !important; line-height: 1.1; font-size: 0.7rem; }
th.nom { font-weight: 500; }

.grille-rapport .case, .num-minute { min-width: 28px; width: 28px; }
.grille-rapport .case.sur-terrain { background: #2fbf5b; }
.b-minute { border-left: 1px dotted var(--bordure); }
.b-sequence { border-left: 1px solid var(--texte); }
.b-periode { border-left: 2px solid var(--texte); }
.fin-col { min-width: 64px; padding: 0 4px !important; white-space: normal !important; font-size: 0.75rem; }
td.fin-col { font-size: 0.85rem; }

.ligne-score th, .ligne-score td { height: 28px; border-top: 1px solid var(--surface); }
.score-bloc { font-size: 0.7rem; padding: 0 1px !important; }

/* ---------- Indicateur de synchronisation (barre du haut) ---------- */

.icone-synchro {
  width: 40px; height: 40px; padding: 8px; border: 0; background: none; cursor: pointer;
  color: var(--vert);
}
.icone-synchro svg { width: 24px; height: 24px; display: block; }
.icone-synchro .nuage-attente { display: none; }
:root[data-synchro="attente"] .icone-synchro { color: #c76a00; }
:root[data-synchro="attente"] .icone-synchro .nuage-ok { display: none; }
:root[data-synchro="attente"] .icone-synchro .nuage-attente { display: block; }

/* Écran 9 → « Match fini ? » : titre de la fenêtre du score final. */
.haut-score { align-items: center; }
.titre-score { flex: 1; margin: 0; font-size: 1.2rem; }