/* Dartsy — styles communs à toutes les pages.
   Tablette tenue à 2–3 m : gros chiffres, contrastes forts, aucun texte sous 18 px,
   aucune action sous 48 px. Les menus (body.menu, en fin de fichier), lus de près, ont une
   échelle plus petite ; toujours aucune action sous 48 px. Thème sombre unique. */

:root {
  --fond: #0d0f12;
  --surface: #161a20;
  --surface-2: #1f242c;
  --bord: #2c323c;
  --texte: #f4f5f7;
  --texte-2: #aab1bc;
  --ok: #34d399;
  --attention: #fbbf24;
  --alerte: #ff5a5a;
  --info: #60a5fa;
  --flechette: #ffe14d;
  --rayon: 14px;
  --espace: clamp(8px, 1.2vw, 16px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Roboto servie par Dartsy (static/polices, licence OFL), la même partout : la police
   « système » de la TV (system-ui) est une police d'écran très large, qui coupait les noms et
   cassait la mise en page (premier essai sur la vraie TV, 23/10/2026). Variable : graisses
   100 à 900 dans un seul fichier ; hors de ces caractères (flèches, symboles), les suivantes. */
@font-face {
  font-family: "Roboto Dartsy";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/polices/roboto-latin-wght-normal.woff2) format("woff2-variations"),
       url(/static/polices/roboto-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
                 U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Roboto Dartsy", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.25;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* jamais plus large que l'écran */
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

h1, h2 { margin: 0; font-weight: 700; }
h2 { font-size: 20px; color: var(--texte-2); letter-spacing: .02em; }

.etiquette {
  font-size: 18px;
  color: var(--texte-2);
  font-weight: 600;
}

/* ---------------------------------------------------------------- en-tête */
.entete {
  display: flex;
  align-items: center;
  gap: var(--espace);
  padding: var(--espace) calc(var(--espace) * 1.5);
  border-bottom: 1px solid var(--bord);
  flex-wrap: wrap;                 /* les boutons passent à la ligne si la place manque… */
}
/* trop de boutons pour la largeur (page Séance en portrait) : ils passent à la ligne, à droite */
.entete__droite { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end;
                  gap: var(--espace); align-items: center; min-width: 0; }
#statut-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.statut {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  min-height: 48px;
  min-width: min(8em, 100%);       /* « Prête à lancer » toujours lisible : sinon, à la ligne */
  flex: 1 1 0;                     /* …et jamais à cause d'un texte de statut plus long (il s'abrège) */
}
.statut__pastille {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--texte-2);
  flex: none;
}
.statut--pret .statut__pastille { background: var(--ok); box-shadow: 0 0 0 6px rgb(52 211 153 / .18); }
.statut--retrait .statut__pastille { background: var(--info); animation: clignote 1s ease-in-out infinite; }
.statut--attention .statut__pastille { background: var(--attention); }
.statut--erreur .statut__pastille { background: var(--alerte); }
.statut--erreur { color: var(--alerte); }
.statut--pret { color: var(--ok); }
.statut--retrait { color: var(--info); }
.statut--attention { color: var(--attention); }

.badge {
  font-size: 18px; font-weight: 800; letter-spacing: .08em;
  padding: 6px 12px; border-radius: 999px;
  background: rgb(251 191 36 / .15); color: var(--attention);
  border: 1px solid rgb(251 191 36 / .4);
}

/* ---------------------------------------------------------------- boutons */
.bouton {
  min-height: 56px;
  min-width: 56px;
  padding: 8px 20px;
  border-radius: 12px;
  border: 1px solid var(--bord);
  background: var(--surface-2);
  color: var(--texte);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  touch-action: manipulation;
}
.bouton:active { transform: scale(.97); }
.bouton:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }
.bouton--primaire { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.bouton--discret { background: transparent; }
.bouton--accent { background: var(--flechette); color: #111; border-color: var(--flechette); }
a.bouton { text-decoration: none; }
.bouton--icone { font-size: 28px; padding: 0; width: 56px; }
.bouton__valeur { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ---------------------------------------------------------------- panneaux et tuiles */
.panneau {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: var(--espace);
  min-height: 0;
}

.tuile {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  container-type: inline-size;
  min-width: 0;
}
.tuile__valeur {
  font-size: clamp(32px, 26cqi, 60px);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tuile__detail { font-size: 18px; color: var(--texte-2); white-space: nowrap; }
.tuile--alerte .tuile__valeur { color: var(--alerte); }

/* ---------------------------------------------------------------- mini-cible (SVG) */
.legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-size: 18px; color: var(--texte-2); }
.legende span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.point { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.point--normal { background: var(--flechette); border: 2px solid #111; }
.point--faible { background: var(--alerte); border: 2px solid #fff; }

.plateau .s-a { fill: #262a31; }
.plateau .s-b { fill: #50555e; }
.plateau .m-a { fill: #8a2c34; }
.plateau .m-b { fill: #1f6b47; }
.plateau .tour { fill: #14171c; }
.plateau path, .plateau circle.fil-cible { stroke: #0d0f12; stroke-width: 1; }
/* taille des numéros : attribut font-size posé par cible.js, en unités de la cible */
.plateau .numero { fill: #d5d9df; font-weight: 700; text-anchor: middle; dominant-baseline: central; }

.flechette .point-svg { fill: var(--flechette); stroke: #111; stroke-width: 3; }
.flechette.faible .point-svg { fill: var(--alerte); stroke: #fff; }
.flechette .num { fill: #111; font-size: 13px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.flechette.faible .num { fill: #fff; }
.flechette.ancienne { opacity: .3; }
.flechette .onde { fill: none; stroke: var(--flechette); stroke-width: 3; animation: onde 1.1s ease-out 2; transform-box: fill-box; transform-origin: center; }
.flechette.faible .onde { stroke: var(--alerte); }

/* ---------------------------------------------------------------- bannière, toast, dialogue */
.banniere {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  background: var(--alerte); color: #111;
  font-weight: 800; font-size: 22px; text-align: center;
  padding: 12px;
}
/* nouvelle version des pages (commun.js, verifierVersion) */
.nouvelle-version {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 11;
  display: flex; align-items: stretch; max-width: calc(100vw - 32px);
  background: var(--info); color: #0b1220; border-radius: 12px;
  box-shadow: 0 6px 24px rgb(0 0 0 / .5);
}
.nouvelle-version[hidden] { display: none; }
.nouvelle-version button {
  min-height: 56px; border: 0; background: transparent; color: inherit;
  font: inherit; font-weight: 800; font-size: 18px; cursor: pointer;
}
.nouvelle-version__recharger { padding: 8px 20px; text-align: left; }
.nouvelle-version__fermer { min-width: 56px; font-size: 26px; border-left: 1px solid rgb(0 0 0 / .25); }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10;
  background: var(--texte); color: var(--fond);
  font-weight: 700; padding: 14px 22px; border-radius: 12px;
  max-width: min(90vw, 640px); text-align: center;
}
.dialogue {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  padding: 0;
  width: min(92vw, 720px);
}
.dialogue::backdrop { background: rgb(0 0 0 / .7); }
.dialogue__corps { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.dialogue__corps h2 { color: var(--texte); font-size: 28px; }
.dialogue__resume { margin: 0; color: var(--texte-2); }
.dialogue__materiel { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dialogue__materiel legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.dialogue__note { margin: 0; font-size: 18px; color: var(--texte-2); }
.dialogue__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix .bouton { font-weight: 600; }
.choix .bouton[aria-pressed="true"] { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.champ {
  min-height: 56px; padding: 8px 14px; border-radius: 12px;
  border: 1px solid var(--bord); background: var(--fond); color: var(--texte); font: inherit;
}
.champ:focus { outline: 3px solid var(--info); outline-offset: 1px; }

.debug {
  position: fixed; right: 8px; bottom: 8px; z-index: 10;
  background: rgb(0 0 0 / .85); color: #9fe; border: 1px solid #355;
  font: 18px/1.3 ui-monospace, Consolas, monospace; padding: 8px 12px; border-radius: 8px;
  white-space: pre;
}

/* ---------------------------------------------------------------- animations */
@keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes onde { from { transform: scale(1); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
@keyframes clignote { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .case--pop, .flechette .onde, .statut--retrait .statut__pastille { animation: none; }
}

/* ---------------------------------------------------------------- portrait et téléphone */
@media (orientation: portrait), (max-width: 760px) {
  body { grid-template-rows: auto auto; }     /* la page défile au lieu de comprimer les blocs */
  .panneau { min-height: auto; }
}
@media (max-width: 640px) {
  body { font-size: 18px; }
  .entete { flex-wrap: wrap; }
  .entete__droite { margin-left: 0; width: 100%; flex-wrap: wrap; }   /* boutons sur 2 lignes */
}

/* Boutons et badge de l’en-tête : jamais comprimés */
.entete .bouton, .badge { flex: none; }

/* Segment visé pendant un jeu */
.zone-visee .zone {
  fill: rgb(96 165 250 / .55); stroke: #bfdbfe; stroke-width: 5;
  filter: drop-shadow(0 0 6px rgb(96 165 250 / .9));
  animation: clignote 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .zone-visee .zone { animation: none; } }

/* ---------------------------------------------------------------- choix d'un segment */
.param__valeur { margin: 0; font-size: 34px; font-weight: 800; color: var(--info); }
.param__aide { font-size: 18px; color: var(--texte-2); margin: 0; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.palette .bouton { padding: 4px; font-size: 22px; }
.palette .bouton[aria-pressed="true"] { border-color: var(--info); color: var(--info); }

/* ---------------------------------------------------------------- correction d'une fléchette */
.dialogue--correction { max-height: 94dvh; overflow-y: auto; }
.dialogue--correction .dialogue__corps { gap: 12px; padding: 20px; }
/* images des caméras dans la fenêtre de correction (commun.js, blocCameras) */
.dialogue--cameras { width: min(94vw, 900px); }
.cameras-correction { display: flex; flex-direction: column; gap: 8px; }
.cameras-correction__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cameras-correction__tete span { font-size: 18px; color: var(--texte-2); }
.cameras-correction__images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.camera { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.camera img, .camera::before { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; border: 2px solid transparent; }
.camera img { display: block; height: auto; object-fit: cover; background: var(--surface-2); }
.camera:not(:has(img))::before { content: ""; display: block; background: var(--surface-2); }
.camera--meilleure img { border-color: var(--info); }
.camera figcaption { font-size: 18px; color: var(--texte-2); }
.bouton--danger { color: var(--alerte); border-color: rgb(255 90 90 / .5); }
.corrigeable { cursor: pointer; }
.marque-corrigee { font-size: 18px; color: var(--attention); font-weight: 700; }

/* ---------------------------------------------------------------- avatar d'un joueur */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 50%; overflow: hidden; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 0 0 2px rgb(255 255 255 / .15);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- choix des joueurs */
.choix-joueurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.choix-joueur {
  display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 8px 12px;
  border-radius: 12px; border: 2px solid var(--bord); background: var(--surface-2);
  color: var(--texte); font: inherit; font-weight: 700; cursor: pointer; text-align: left;
}
.choix-joueur[aria-pressed="true"] { border-color: var(--info); background: rgb(96 165 250 / .15); }
.invite { display: flex; gap: 10px; flex-wrap: wrap; }
.invite .champ { flex: 1 1 12em; }
.choix-joueur__ordre {
  margin-left: auto; min-width: 32px; height: 32px; border-radius: 50%;
  background: var(--info); color: #111; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------- barres horizontales */
.barres { display: flex; flex-direction: column; gap: 12px; }
.barres__ligne {
  display: grid; grid-template-columns: minmax(6em, 15em) minmax(0, 1fr) 6.5em;
  align-items: center; gap: 12px;
}
.barres__libelle { display: flex; flex-direction: column; min-width: 0; }
.barres__titre { font-weight: 700; white-space: nowrap; }
.barres__detail { font-size: 18px; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barres__piste { height: 30px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.barres__rempli { height: 100%; min-width: 3px; background: var(--alerte); border-radius: 6px; }
.barres__rempli--info { background: var(--info); }
.barres__valeur { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .barres__ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .barres__piste { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------------------------------------------------------------- courbe dans le temps (Graphes.courbe) */
.courbe { position: relative; height: 220px; margin: 14px 8px 4px; }
.courbe__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.courbe__trait { fill: none; stroke: var(--info); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.courbe__pt {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--info); border: 2px solid var(--fond);
}
.courbe__pt--dernier { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--flechette); }
.courbe__record { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--ok); }
.courbe__record span {
  position: absolute; right: 0; top: -28px; font-size: 18px; font-weight: 800; color: var(--ok);
  font-variant-numeric: tabular-nums; background: var(--surface); padding: 0 6px; border-radius: 6px;
}
.courbe__axe { display: flex; justify-content: space-between; gap: 12px; font-size: 18px; color: var(--texte-2); }
.courbe__vide { margin: 12px 0; font-size: 18px; color: var(--texte-2); }

/* ---------------------------------------------------------------- séance du jour (Dartsy.seanceDuJour) */
.sdj { display: flex; flex-direction: column; gap: 12px; }
.sdj__tete { display: flex; flex-direction: column; gap: 4px; }
.sdj__titre { font-size: 24px; font-weight: 800; }
.sdj__raison { font-size: 19px; color: var(--texte-2); }
.sdj__drills { display: flex; flex-wrap: wrap; gap: 10px; }
.sdj__drill { min-height: 64px; padding: 0 22px; font-size: 22px; font-weight: 800; }
.sdj__drill--fait { color: var(--ok); border-color: rgb(52 211 153 / .45); }

/* ---------------------------------------------------------------- menus
   Pages qu'on lit de près (catalogue, options de jeu, réglages…), marquées <body class="menu"> :
   texte plus petit et moins de cadres que les écrans de jeu, qui se lisent à 2–3 m (demande
   d'Esteban, 22/10/2026). Les cibles tactiles gardent 48 px au moins. Écrans de jeu et TV :
   inchangés. */
:root {
  --menu-texte: 17px;        /* texte courant, boutons */
  --menu-petit: 15px;        /* aide, détails, méta */
  --menu-section: 14px;      /* titres de section, en petites capitales */
  --menu-titre: 26px;        /* titre de la page */
  --menu-cible: 48px;        /* hauteur minimale d'une action */
}
/* align-content : une page plus courte que l'écran (portrait) n'étire pas la ligne de l'en-tête */
body.menu { font-size: var(--menu-texte); line-height: 1.3; align-content: start; }
body.menu h2 { font-size: var(--menu-texte); }
body.menu .titre { font-size: var(--menu-titre); font-weight: 800; }    /* titre de chaque page */
body.menu .bouton { min-height: var(--menu-cible); min-width: var(--menu-cible); padding: 6px 14px;
                    border-radius: 10px; font-size: var(--menu-texte); gap: 8px; }
body.menu .bouton--icone { width: var(--menu-cible); padding: 0; font-size: 22px; }
body.menu .champ { min-height: var(--menu-cible); padding: 6px 12px; border-radius: 10px; }
body.menu .etiquette, body.menu .param__aide, body.menu .dialogue__note { font-size: var(--menu-petit); }
body.menu .entete { padding-top: 8px; padding-bottom: 8px; }
body.menu .statut { font-size: 18px; gap: 10px; }
body.menu .statut__pastille { width: 16px; height: 16px; }
body.menu .badge { font-size: 14px; padding: 4px 10px; }
.menu-section {
  margin: 0; font-size: var(--menu-section); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-2);
}
/* choix des joueurs (options de jeu, tournoi) : puces de 48 px, quatre par ligne sur une demi-page */
body.menu .choix-joueurs { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 6px; }
body.menu .choix-joueur {
  min-height: var(--menu-cible); padding: 4px 10px 4px 6px; gap: 8px;
  border-width: 1px; font-size: var(--menu-petit); line-height: 1.15;
}
body.menu .choix-joueur[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--info); }
/* séance du jour du plan (accueil, tableau de bord) */
body.menu .sdj__titre { font-size: 20px; }
body.menu .sdj__raison { font-size: var(--menu-petit); }
body.menu .sdj__drill { min-height: var(--menu-cible); padding: 0 16px; font-size: var(--menu-texte); }
/* l'avatar reçoit sa taille en style (Dartsy.avatar) : 32 px ici, quelle que soit la page */
body.menu .choix-joueur .avatar { width: 32px !important; height: 32px !important; font-size: 14px !important; }
body.menu .choix-joueur__ordre { min-width: 24px; height: 24px; font-size: 14px; }