/*
 * E8 — le répartiteur de mise.
 *
 * Même grammaire visuelle que les autres écrans — bloc de une, valeurs en
 * pixels, chiffres tabulaires — avec une pièce que le site n'avait pas encore :
 * un formulaire. Les contrôles sont dessinés comme le reste du tableau
 * d'affichage, pas comme des widgets de navigateur, sauf les cases à cocher
 * elles-mêmes, laissées natives : c'est le seul endroit où l'accessibilité
 * clavier prime sur l'uniformité de la maquette.
 *
 * Contrainte CSP : `style-src 'self'` sans `'unsafe-inline'`. Aucune largeur
 * n'est écrite dans un attribut `style` — les barres de mise passent par les
 * classes `.l0` … `.l50` de piste.css, et le recalcul du navigateur échange la
 * classe. Un `style` posé à la main serait invisible en production et
 * parfaitement visible en développement, ce qui est le pire des deux.
 */

/* Plus large que les autres écrans : la page tient une colonne de chevaux et
   un tableau de sept colonnes côte à côte, ce qu'aucun autre écran ne demande. */
.page { max-width: 1180px; padding: 20px 22px 40px; }

/* ---- le bloc de une ---- */

.hero { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.hero > div { min-width: 0; }
.kicker {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--vert);
}
.hero h1 { font: 700 44px/0.95 var(--titre); text-transform: uppercase; margin: 6px 0 0; }
.hero h1 .g { color: var(--or); }
.hero .chapo {
  font: 400 13px/1.5 var(--mono);
  color: var(--sourdine-clair); max-width: 66ch; margin: 8px 0 0;
}
.legend { margin-left: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.legend span { font: 500 10px var(--mono); color: var(--sourdine-clair); }

/* ---- les réglages ---- */

.reglages { margin: 0 0 16px; }
.blocs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.bloc {
  margin: 0; padding: 10px 12px 12px;
  border: 1px solid var(--trait); border-radius: 4px; background: var(--panneau);
}
.bloc legend {
  padding: 0 6px;
  font: 600 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--or);
}
.bloc label {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 0;
  font: 400 12px var(--mono); color: var(--sourdine-clair); cursor: pointer;
}
.bloc label:hover { color: var(--encre); }
.bloc input[type="radio"], .champ input[type="checkbox"] { accent-color: var(--or); margin: 0; }

/* Le montant : un champ de saisie qui a l'air d'une valeur affichée, parce
 * qu'il en est une la plupart du temps — on ne le retouche qu'une fois. */
.bloc .montant { margin-top: 6px; }
.bloc input[type="number"] {
  width: 5.5em;
  padding: 4px 6px;
  border: 1px solid var(--trait); border-radius: 3px;
  background: var(--fond); color: var(--or);
  font: 700 14px var(--mono); font-variant-numeric: tabular-nums;
}
.bloc input[type="number"]:focus { border-color: var(--or); outline: none; }
.bloc button {
  margin-top: 8px;
  font: 600 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--or); color: var(--fond); border: 0; border-radius: 2px;
  padding: 6px 11px; cursor: pointer;
}

/* ---- le champ à gauche, les mises à droite ---- */

/* On coche à gauche et le tableau se réécrit à droite : les deux restent
   visibles ensemble, au lieu que le résultat vive sous le pli. La colonne de
   gauche est bornée — une ligne de cheval n'a pas besoin de plus. */
.plan {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
/* Le bloc n'est pas atteignable au clavier (tabindex="-1") : le focus qu'il
   reçoit vient de « les prendre », et n'a pas à être encadré. */
.mises { min-width: 0; }
.mises:focus { outline: none; }

/* ---- le champ : une ligne par cheval, cochable ---- */

.champ { margin: 0; min-width: 0; }
.champ .lbl { font: 500 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sourdine); margin: 0 0 8px; }
.champ ul {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
}
.champ label {
  display: grid; grid-template-columns: 16px 2.1rem minmax(0, 1fr) auto; align-items: center;
  gap: 8px; padding: 5px 9px 5px 7px;
  border: 1px solid var(--trait); border-radius: 4px; background: var(--panneau);
  font: 400 12px var(--mono); cursor: pointer;
}
.champ label:hover { background: var(--panneau-clair); }
/* La ligne retenue se voit sans lire la case : c'est elle qu'on compte du
 * regard avant de relancer le calcul. */
.champ label:has(input:checked) { border-color: var(--or); background: linear-gradient(90deg, rgba(245, 179, 60, 0.12), var(--panneau) 55%); }
.champ .nm { color: var(--sourdine-clair); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ label:has(input:checked) .nm { color: var(--encre); }
.champ .c { color: var(--or); font-variant-numeric: tabular-nums; }
.champ .op { grid-column: 3 / -1; font: 400 9px var(--mono); font-style: normal; color: var(--sourdine); letter-spacing: 0.08em; text-transform: uppercase; }
.champ button {
  font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--or); color: var(--fond); border: 0; border-radius: 2px;
  padding: 8px 14px; cursor: pointer;
}

/* ---- le taux d'équilibre ---- */

.equilibre {
  margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--trait); border-left: 3px solid var(--or); border-radius: 4px;
  background: var(--panneau);
  font: 400 12px var(--mono); color: var(--sourdine-clair);
}
.equilibre b { font: 700 22px var(--titre); color: var(--or); vertical-align: -1px; font-variant-numeric: tabular-nums; }
.equilibre span { color: var(--sourdine); }

/* ---- la répartition ---- */

/* La classe s'appelle « repartis » et non « repartition » : app.css tient déjà
   une `.repartition` — une liste en `display: grid`, héritée d'une maquette et
   posée sur aucune page. Sa déclaration s'appliquait à ce <table>, qui cessait
   d'être un tableau : thead, tbody et tfoot devenaient trois éléments de
   grille, donc trois tables anonymes, chacune calculant ses propres colonnes.
   Les libellés ne tombaient plus en face des chiffres. */
.repartis { width: 100%; border-collapse: collapse; margin: 0 0 12px; font: 400 12px var(--mono); }
.repartis caption {
  text-align: left; padding: 0 0 8px;
  font: 600 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vert);
}
.repartis th {
  text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--trait);
  font: 500 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sourdine);
}
.repartis td { padding: 7px 8px; border-bottom: 1px solid var(--trait-tenu); vertical-align: middle; }
.repartis tbody tr:hover { background: var(--panneau); }
.repartis .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Cinq colonnes sur sept portent des chiffres, calés à droite : leur libellé
   l'est aussi, sinon le titre et la valeur ne sont pas dans le même axe. Le
   libellé, lui, peut passer à la ligne — « encaissé s'il gagne » tiendrait la
   colonne plus large que son contenu. */
.repartis th.n { text-align: right; white-space: normal; }
.repartis .nm { color: var(--encre); }
.repartis .op { display: block; font: 400 9px var(--mono); font-style: normal; color: var(--sourdine); letter-spacing: 0.08em; text-transform: uppercase; }
/* La mise juste est grise, la mise jouée est celle qu'on recopie au guichet. */
.repartis .juste { color: var(--sourdine); }
.repartis .mise { color: var(--encre); font-weight: 700; }
.repartis .mise .barre { margin-top: 4px; width: 100%; }
.repartis .gain { color: var(--vert); }
.repartis .perte { color: var(--rouge); }
.repartis tfoot td {
  border-top: 1px solid var(--trait); border-bottom: 0; padding-top: 10px;
  font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sourdine);
}
.repartis tfoot .n { font: 700 14px var(--mono); text-transform: none; letter-spacing: 0; color: var(--encre); }
.repartis tfoot .gain { color: var(--vert); }
.repartis tfoot .perte { color: var(--rouge); }

/* ---- le règlement réel ---- */

.reglement {
  margin: 18px 0; padding: 14px 16px;
  border: 1px solid var(--or-sombre); border-radius: 4px;
  background: linear-gradient(180deg, rgba(245, 179, 60, 0.07), var(--panneau));
}
.reglement h2 { font: 700 20px/1 var(--titre); text-transform: uppercase; margin: 0 0 8px; color: var(--or); }
.reglement p { font: 400 12px/1.6 var(--mono); color: var(--sourdine-clair); margin: 0 0 8px; max-width: 70ch; }
/* Les deux chiffres côte à côte : c'est leur écart qui est le sujet, pas leur
 * valeur. Les empiler l'aurait fait disparaître. */
.confront { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.confront span {
  display: flex; flex-direction: column; gap: 3px;
  font: 500 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sourdine);
}
.confront b { font: 700 26px var(--titre); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.confront .gain { color: var(--vert); }
.confront .perte { color: var(--rouge); }

/* Sous cette largeur, les deux colonnes ne tiennent plus ensemble : le champ
   repasse au-dessus des mises, et reprend plusieurs chevaux par ligne. */
@media (max-width: 920px) {
  .plan { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .champ { margin: 0 0 4px; }
  .champ ul { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

@media (max-width: 700px) {
  .hero h1 { font-size: 34px; }
  .legend { margin-left: 0; align-items: flex-start; }
  .repartis { font-size: 11px; }
  .repartis th, .repartis td { padding: 6px 5px; }
}