/* Feuille unique, partagée par l'app de gestion et la page publique.
 *
 * Points repris du gabarit (section 5) :
 *  — la hauteur de la coquille vient d'ici, jamais d'une mesure JavaScript ;
 *  — aucun `position: fixed` sur html/body ;
 *  — marges de sécurité prises telles que le système les annonce ;
 *  — `svh` pour les tailles internes (la barre d'adresse ne les fait pas sauter) ;
 *  — `touch-action: manipulation` pour éviter le zoom au double appui.
 */

:root {
  color-scheme: dark;

  --terre: #b5651d;
  --terre-clair: #d98c3f;
  --vert: #2f7d5a;
  --vert-clair: #45a97b;

  --fond: #14161a;
  --fond-2: #1c1f25;
  --fond-3: #252932;
  --bord: #333846;
  --texte: #f2f4f7;
  --texte-doux: #a8b0bd;
  --texte-faible: #79808d;

  --rouge: #c0453c;
  --ambre: #cf9a2c;
  --bleu: #3d7ab8;

  --r: 12px;
  --r-s: 8px;
  --pad: 14px;

  --entete: 56px;
  --onglets: 50px;
}

* { box-sizing: border-box; }

html, body {
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

/* En mode installé, iOS retranche la barre d'état de innerHeight : on garde vh. */
html.standalone, html.standalone body { height: 100vh; }

/* Le conteneur de montage doit relayer la hauteur, sinon la coquille se réduit
   à la taille de son contenu et l'entête flotte au milieu de l'écran. */
#racine { height: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Coquille : entête figée, contenu qui défile, marges de sécurité système
   -------------------------------------------------------------------------- */

.coquille {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.entete {
  flex: 0 0 auto;
  min-height: var(--entete);
  padding: 8px var(--pad);
  padding-top: calc(8px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fond-2);
  border-bottom: 1px solid var(--bord);
}

.entete h1 {
  font-size: 1.05rem;
  margin: 0;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.entete .sous { font-size: .75rem; color: var(--texte-doux); font-weight: 400; }

.onglets {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 6px var(--pad);
  background: var(--fond-2);
  border-bottom: 1px solid var(--bord);
  overflow-x: auto;
  scrollbar-width: none;
}
.onglets::-webkit-scrollbar { display: none; }

.onglets button {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--texte-doux);
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  font-size: .9rem;
  white-space: nowrap;
}
.onglets button[aria-selected="true"] {
  background: var(--terre);
  color: #fff;
  font-weight: 600;
}

.contenu {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--pad);
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
}

.contenu > * + * { margin-top: 14px; }

/* --------------------------------------------------------------------------
   Éléments de base
   -------------------------------------------------------------------------- */

.carte {
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: var(--pad);
  min-width: 0;
}

.carte h2, .carte h3 { margin: 0 0 10px; font-size: 1rem; }

h2.titre-section {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texte-faible);
  margin: 0 0 8px;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--fond-3);
  border: 1px solid var(--bord);
  color: var(--texte);
  border-radius: var(--r-s);
  padding: 10px 14px;
  min-height: 42px;
  cursor: pointer;
  font-size: .92rem;
  white-space: nowrap;
}
.bouton:hover { border-color: var(--texte-faible); }
.bouton:active { transform: translateY(1px); }
.bouton.principal { background: var(--terre); border-color: var(--terre); color: #fff; font-weight: 600; }
.bouton.valide { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }
.bouton.danger { color: #ffb3ad; border-color: #6d2f2b; }
.bouton.petit { padding: 6px 10px; min-height: 34px; font-size: .82rem; }
.bouton:disabled { opacity: .45; cursor: not-allowed; }

.ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ligne.serre { gap: 6px; }
.pousse { margin-left: auto; }

.champ { display: block; margin-bottom: 10px; min-width: 0; }
.champ > span {
  display: block;
  font-size: .78rem;
  color: var(--texte-doux);
  margin-bottom: 4px;
}
.champ input, .champ select, .champ textarea {
  width: 100%;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  padding: 10px;
  min-height: 42px;
}
.champ input:focus, .champ select:focus { outline: 2px solid var(--terre-clair); outline-offset: -1px; }

.grille { display: grid; gap: 10px; }
.grille.deux { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grille.cartes { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grille.terrains { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.etiquette {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  border: 1px solid var(--bord);
  background: var(--fond-3);
  color: var(--texte-doux);
  white-space: nowrap;
}
.etiquette.vert { background: #1d3d30; border-color: var(--vert); color: #9fe0c0; }
.etiquette.terre { background: #3d2a17; border-color: var(--terre); color: #f0c496; }
.etiquette.bleu { background: #1b2c3d; border-color: var(--bleu); color: #a8cdf0; }
.etiquette.rouge { background: #3d2020; border-color: var(--rouge); color: #f2b0aa; }
.etiquette.ambre { background: #332a14; border-color: var(--ambre); color: #f0c86a; }
.etiquette.or {
  background: linear-gradient(180deg, #e6c055, #c79a26);
  border-color: #f0d488;
  color: #2a1f05;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.doux { color: var(--texte-doux); font-size: .85rem; }
.faible { color: var(--texte-faible); font-size: .8rem; }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.centre { text-align: center; }

/* --------------------------------------------------------------------------
   Terrains
   -------------------------------------------------------------------------- */

.terrain {
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.terrain.occupe { border-color: var(--terre); }
.terrain.libre { border-style: dashed; opacity: .75; }

/* Un terrain qui réclame des équipes, un temps qui s'épuise : la couleur doit
   se lire de la table de marque, sans lire le texte. */
.terrain.appel { border-color: var(--ambre); background: #241f14; opacity: 1; }
.terrain.bientot { border-color: var(--ambre); }
.terrain.depasse { border-color: var(--rouge); background: #241718; }

.bandeau {
  border-radius: var(--r-s);
  padding: 5px 8px;
  font-weight: 700;
  font-size: .8rem;
  text-align: center;
  letter-spacing: .02em;
}
.bandeau.appel { background: var(--ambre); color: #231a05; }
.bandeau.depasse { background: var(--rouge); color: #fff; }

.chrono {
  font-size: .8rem;
  color: var(--texte-faible);
  font-variant-numeric: tabular-nums;
}
.chrono.bientot { color: #f0c86a; font-weight: 650; }
.chrono.depasse { color: #f2b0aa; font-weight: 700; }

.terrain-titre {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
}
.terrain-numero {
  font-size: 1.35rem;
  color: var(--terre-clair);
  font-variant-numeric: tabular-nums;
}

/* La ligne de temps garde sa place même vide, et les boutons descendent au bas
   de la carte : les terrains d'une même rangée restent alignés. */
.terrain-temps { min-height: 1.15rem; }
.terrain-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.affiche { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.affiche .equipe {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.affiche .equipe .nom { flex: 1 1 auto; min-width: 0; }
.affiche .equipe.gagnante .nom { color: var(--vert-clair); font-weight: 650; }

.vignette {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--fond-3);
  border: 1px solid var(--bord);
}
.vignette.grande { width: 56px; height: 56px; border-radius: 10px; }
.vignette.sans-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: .8rem;
  color: var(--texte-faible);
}

/* --------------------------------------------------------------------------
   Palmarès : la seule page où l'on a le droit d'en faire un peu
   -------------------------------------------------------------------------- */

.grille.podiums { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.podium {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 18px 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--ambre);
  background: radial-gradient(120% 90% at 50% 0%, #2b2415 0%, var(--fond-2) 70%);
}
/* Réservée à la première apparition : la page se redessine toute seule, et une
   carte déjà là ne doit pas repartir du noir à chaque rafraîchissement. */
.podium-arrivee { animation: podium-entree .55s cubic-bezier(.2, .8, .3, 1) both; }
/* Décalage par carte : les podiums arrivent l'un après l'autre. */
.podium-arrivee:nth-child(2) { animation-delay: .12s; }
.podium-arrivee:nth-child(3) { animation-delay: .24s; }
.podium-arrivee:nth-child(4) { animation-delay: .36s; }

/* Un reflet qui traverse la carte, lentement. Rien de clignotant. */
.podium::after {
  content: '';
  position: absolute;
  inset: 0 -60%;
  background: linear-gradient(75deg, transparent 42%, rgba(255, 235, 180, .12) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: podium-reflet 5.5s ease-in-out infinite;
  pointer-events: none;
}

.podium-categorie {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  max-width: 100%;
}
.podium-photo { position: relative; padding: 4px; }
.podium-photo .vignette {
  width: 104px;
  height: 104px;
  border-radius: 14px;
  border: 2px solid var(--ambre);
  font-size: 1.6rem;
  animation: podium-eclat 3.4s ease-in-out infinite;
}
.podium-nom { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.podium-second {
  display: flex;
  gap: 4px;
  align-items: baseline;
  justify-content: center;
  max-width: 100%;
  font-size: .9rem;
  padding-top: 4px;
  border-top: 1px solid var(--bord);
  width: 100%;
}
/* « 2e : » ne se coupe jamais en deux — c'est le nom qui se tronque. */
.podium-second > .doux { flex: 0 0 auto; white-space: nowrap; }

@keyframes podium-entree {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
}
@keyframes podium-eclat {
  0%, 100% { box-shadow: 0 0 0 rgba(207, 154, 44, 0); }
  50% { box-shadow: 0 0 26px rgba(207, 154, 44, .5); }
}
@keyframes podium-reflet {
  0%, 62% { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}

@media (prefers-reduced-motion: reduce) {
  .podium, .podium-arrivee, .podium::after, .podium-photo .vignette { animation: none; }
  .podium::after { display: none; }
}

/* --------------------------------------------------------------------------
   Tableaux : jamais de débordement horizontal de la page
   -------------------------------------------------------------------------- */

.defile-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

table.classement {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
table.classement th, table.classement td {
  padding: 7px 6px;
  text-align: right;
  border-bottom: 1px solid var(--bord);
  white-space: nowrap;
}
table.classement th { color: var(--texte-faible); font-weight: 600; font-size: .74rem; }
table.classement td.nom, table.classement th.nom {
  text-align: left;
  white-space: normal;
  width: 99%;
  overflow-wrap: anywhere;
}
table.classement td:last-child, table.classement th:last-child { padding-right: 0; }
table.classement tr.qualifie td { background: rgba(47, 125, 90, .16); }
table.classement tr.qualifie td:first-child { border-left: 3px solid var(--vert); }
table.classement td.rang { color: var(--texte-faible); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Tableau des séries
   -------------------------------------------------------------------------- */

.series { display: flex; gap: 14px; align-items: stretch; padding-bottom: 6px; }
.serie-tour { flex: 0 0 210px; display: flex; flex-direction: column; gap: 10px; }
.serie-tour > h3 {
  margin: 0;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texte-faible);
}
.serie-liste { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; flex: 1 1 auto; }
.serie-match {
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  padding: 8px;
  font-size: .84rem;
  cursor: pointer;
}
.serie-match.jouee { border-color: var(--vert); }
.serie-match .cote { display: flex; justify-content: space-between; gap: 8px; }
.serie-match .cote span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serie-match .cote.gagnant { color: var(--vert-clair); font-weight: 650; }
.serie-match .cote.attente { color: var(--texte-faible); font-style: italic; }

/* --------------------------------------------------------------------------
   Fenêtre modale de saisie
   -------------------------------------------------------------------------- */

.voile {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 11, .82);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 40;
}
.modale {
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: var(--r) var(--r) 0 0;
  width: min(560px, 100%);
  max-height: 92svh;
  overflow-y: auto;
  overflow-x: hidden;   /* filet de sécurité : une modale ne défile jamais en largeur */
  padding: var(--pad);
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
}
@media (min-width: 700px) {
  .voile { align-items: center; }
  .modale { border-radius: var(--r); max-height: 88svh; }
}
.modale h2 { margin: 0 0 4px; font-size: 1.05rem; }

/* `minmax(0, 1fr)` et `min-width: 0` : sans eux, la taille minimale des touches
   (carrées, 40 px de haut) impose 7 colonnes de 40 px et la fenêtre de saisie
   déborde en largeur sur un téléphone étroit. */
.pave {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
  max-width: 100%;
}
.pave button {
  aspect-ratio: 1 / 1;
  min-height: 34px;
  min-width: 0;
  padding: 0;
  background: var(--fond-3);
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.pave button[aria-pressed="true"] {
  background: var(--terre);
  border-color: var(--terre-clair);
  color: #fff;
  font-weight: 700;
}
.pave button:disabled { opacity: .3; }

.score-choix { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 480px) { .score-choix { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Divers
   -------------------------------------------------------------------------- */

.message {
  padding: 10px 12px;
  border-radius: var(--r-s);
  font-size: .88rem;
  border: 1px solid var(--bord);
  background: var(--fond-3);
}
.message.erreur { background: #3a1f1d; border-color: var(--rouge); color: #f5c2bd; }
.message.succes { background: #1d3529; border-color: var(--vert); color: #b6e7ce; }

.vide {
  text-align: center;
  color: var(--texte-faible);
  padding: 26px 12px;
  font-size: .9rem;
}

.liste { display: flex; flex-direction: column; gap: 8px; }
.item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  min-width: 0;
}
.item .corps { flex: 1 1 auto; min-width: 0; }
/* File d'attente : les trois niveaux de priorité restent sur une seule ligne ;
   c'est la carte entière qui passe à la ligne quand l'écran est trop étroit. */
/* Composition du tableau : deux listes déroulantes pleine largeur, l'une
   au-dessus de l'autre, pour choisir sans viser. */
.tableau-match .corps { display: flex; flex-direction: column; gap: 4px; }
.tableau-match select { width: 100%; }

/* Fiche d'équipe : avec les étiquettes et les deux boutons, le nom n'a plus la
   place sur un téléphone. On laisse la carte passer à la ligne. */
.item.equipe { flex-wrap: wrap; }
.item.equipe .corps { flex: 1 1 150px; }

.item.attente { flex-wrap: wrap; }
.item.attente .corps { flex: 1 1 140px; }
.priorite { display: flex; flex: 0 0 auto; gap: 4px; }
.priorite .bouton { min-width: 30px; padding: 5px 6px; }

/* Ce qu'on a poussé devant ou gardé pour plus tard se voit sans lire les
   boutons. */
.item.devant { border-left: 3px solid var(--ambre); }
.item.derriere { opacity: .6; }

/* Résultat : nom — score — nom, pour qu'on ne confonde jamais un numéro
   d'équipe avec un score. */
.resultat {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.resultat .cote-a { text-align: right; }
.resultat .cote-b { text-align: left; }
.resultat .marque {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: var(--fond-3);
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  padding: 2px 10px;
  white-space: nowrap;
}
.resultat .vainqueur { color: var(--vert-clair); font-weight: 650; }

.brulant { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .68; } }

@media (prefers-reduced-motion: reduce) {
  .brulant { animation: none; }
}

.pied {
  padding: 16px 0 4px;
  text-align: center;
  color: var(--texte-faible);
  font-size: .76rem;
}

/* Écran de connexion */
.connexion {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--pad);
}
.connexion .carte { width: min(380px, 100%); }