/*
 * E7 — arrivées et rapports.
 *
 * Transcription de la maquette « arrivées et rapports — panneau » : mêmes
 * colonnes, mêmes hauteurs, mêmes tailles de police. Les valeurs sont en pixels
 * et non en rem, exprès — la maquette est la référence.
 *
 * Deux choses s'écartent de la maquette, et c'est délibéré :
 * - la révélation par blocs part visible (`.rev` sans `.off`) : la page servie
 *   est complète, le script ne fait que la rejouer ;
 * - les paragraphes de note gardent le corps du site : ce sont des phrases,
 *   pas des légendes.
 *
 * Contrainte CSP : `style-src 'self'` sans `'unsafe-inline'`. Rien n'est écrit
 * dans un attribut `style` par le serveur ; le rejeu ne pose que des classes.
 */

.page { max-width: 980px; padding: 20px 22px 30px; position: relative; }

/* ---- le bloc de une : surtitre, titre, chapô, rejeu ---- */

.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: 64ch; margin: 8px 0 0;
}
button.replay {
  margin-left: auto;
  font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--or); color: var(--fond); border: 0; border-radius: 2px;
  padding: 7px 13px; cursor: pointer;
}
/* Réservé, et non absent : le bouton n'est révélé que par assets/arrivees.js,
 * une fois la page chargée. Avec display:none, il surgissait dans une
 * barre en flex et poussait tout ce qui suit — un décalage tardif, que le
 * navigateur compte entièrement en CLS. Sa part est petite prise seule ;
 * avec la bannière de fraîcheur, qui a le même défaut, l'accueil mesuré à
 * 900 px passe de 0,107 à 0,011. Sa place est donc tenue dès le rendu
 * serveur. Sans JavaScript elle reste vide : il n'y a rien à cliquer. */
button.replay[hidden] { visibility: hidden; }

/* La révélation par blocs. Sans JavaScript rien n'est masqué : `.off` n'est
 * posé que par le rejeu, jamais par le serveur. */
.rev { opacity: 1; transition: opacity 0.45s, transform 0.45s; }
.rev.off { opacity: 0.12; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) {
  .rev { transition: none; }
}

/* ---- la bande d'arrivée : cinq cases, la première en or ---- */

.strip { display: flex; gap: 10px; margin: 18px 0 4px; padding: 0; list-style: none; }
.case {
  flex: 1; background: var(--panneau); border: 1px solid var(--trait);
  padding: 10px 0; text-align: center;
}
.case.or { border-color: var(--or); }
.case .pl { font: 500 9px var(--mono); letter-spacing: 0.16em; color: var(--sourdine); }
.case.or .pl { color: var(--or); }
.case .nb { font: 700 44px/1 var(--mono); color: var(--encre); margin-top: 4px; }
.case .nm {
  font: 600 12px/1.1 var(--titre); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sourdine-clair); margin-top: 5px;
}
.case .pl,
.case .nb,
.case .nm { display: block; }

/* ---- l'ossature des deux tableaux ---- */

.thead {
  display: grid; gap: 10px;
  font: 500 9.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sourdine); border-bottom: 1px solid var(--trait); padding-bottom: 6px;
}
.thead.arr,
.rowa { grid-template-columns: 36px 34px 1fr 90px 210px 70px; }
.thead.rap,
.rowr { grid-template-columns: 110px 34px 1fr 300px 64px; }
.thead .r { text-align: right; }
.thead .c { text-align: center; }

.board { list-style: none; padding: 0; margin: 0; }

/* ---- l'arrivée, ligne par ligne ---- */

.rowa {
  height: 40px; display: grid; gap: 10px; align-items: center;
  border-bottom: 1px solid var(--trait-tenu);
}
/* Un cheval que l'argent n'avait pas mis devant : la ligne le signale. */
.rowa.rate { background: linear-gradient(90deg, rgba(217, 88, 75, 0.08), transparent 70%); }
.rowa .pl { font: 700 15px var(--mono); color: var(--sourdine-clair); }
.rowa .pl.or { color: var(--or); }
.rowa .dossard { width: 30px; height: 26px; border-radius: 2px; font: 700 14px var(--mono); }
.nm {
  font: 600 15px/1 var(--titre); letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cote {
  text-align: right; font: 700 18px var(--mono);
  font-variant-numeric: tabular-nums; color: var(--or);
}
.vu { text-align: center; }
.vu span {
  display: inline-block; font: 600 9.5px var(--mono);
  text-transform: uppercase; padding: 3px 8px; border-radius: 2px;
}
.vu .oui { background: var(--vert); color: var(--fond); }
.vu .non { background: var(--rouge); color: var(--fond); }
.vu .bof { border: 1px solid #2c4c40; color: var(--sourdine-clair); }
.part { text-align: right; font: 700 12.5px var(--mono); font-variant-numeric: tabular-nums; }

/* ---- les rapports, un pari et un cheval par ligne ---- */

h2 {
  font: 700 24px/1 var(--titre); letter-spacing: 0.06em; text-transform: uppercase;
  margin: 22px 0 10px;
}
h2 .g { color: var(--or); }

.rowr {
  min-height: 46px; display: grid; gap: 10px; align-items: center;
  border-bottom: 1px solid var(--trait-tenu);
}
/* La ligne où le même ticket paie le plus inégalement. */
.rowr.hot { background: linear-gradient(90deg, rgba(245, 179, 60, 0.06), transparent 60%); }
.rowr .pari {
  font: 600 10px var(--mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sourdine);
}
.rowr .pari.sg { color: var(--vert); }
.rowr .dossard { width: 30px; height: 26px; border-radius: 2px; font: 700 14px var(--mono); }
.rowr .nm { font-size: 14px; }

.cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.cells span {
  display: flex; align-items: center; justify-content: center; padding: 5px 0;
  background: var(--panneau); border: 1px solid var(--trait-tenu);
  font: 700 12px var(--mono); color: var(--encre);
}
.cells span.haute { background: rgba(245, 179, 60, 0.08); border-color: var(--or); color: var(--or); }
.ecart { text-align: right; font: 700 12px var(--mono); color: var(--vert); }
.ecart.max { color: var(--or); }

/* ---- les masses du quinté ---- */

.masses { display: flex; gap: 10px; margin-top: 12px; padding: 0; list-style: none; }
.masses li {
  flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: var(--panneau); border: 1px solid var(--trait); padding: 10px 14px;
}
.masses i {
  font: 500 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sourdine-clair); font-style: normal;
}
.masses b { font: 700 20px var(--mono); font-variant-numeric: tabular-nums; color: var(--encre); }
.masses b.or { color: var(--or); }

/* ---- l'encart de fin de rejeu ---- */

.sceau {
  position: absolute; top: 44%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%) scale(1.4);
  opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease;
  padding: 14px 28px; text-align: center; pointer-events: none;
  background: var(--fond); border: 2px solid var(--or);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.sceau[hidden] { display: none; }
/* Cliquable une fois visible, pour que le lecteur pressé le retire lui-même
   sans attendre l'effacement. Hors de cet état il laisse tout passer. */
.sceau.vu {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  pointer-events: auto; cursor: pointer;
}
.sceau .t1 {
  margin: 0; font: 700 28px/1 var(--titre);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--or);
}
.sceau .t2 { margin: 9px 0 0; font: 700 15px/1.4 var(--mono); color: var(--encre); max-width: 52ch; }
.sceau .t2 .g { color: var(--or); }
.sceau .t3 {
  margin: 6px 0 0; font: 500 11px/1.5 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sourdine-clair);
}

@media (max-width: 62rem) {
  .thead.rap,
  .rowr { grid-template-columns: 96px 34px 1fr minmax(0, 1fr) 64px; }
  .thead.arr,
  .rowa { grid-template-columns: 36px 34px 1fr 80px minmax(0, 1fr) 70px; }
}

@media (max-width: 48rem) {
  .hero h1 { font-size: 34px; }
  button.replay { margin-left: 0; }
  .strip { flex-wrap: wrap; }
  .case { flex: 1 1 30%; }
  .case .nb { font-size: 30px; }
  .thead { display: none; }
  .rowa,
  .rowr { grid-template-columns: 34px minmax(0, 1fr); height: auto; padding: 8px 0; }
  .rowa .pl,
  .rowr .pari { grid-column: 1 / -1; }
  .cells { grid-column: 1 / -1; }
  .masses { flex-direction: column; }
  /* Dans le flux, il ne masque plus rien : ni effacement, ni clic pour fermer. */
  .sceau { position: static; opacity: 1; transform: none; background: var(--panneau); }
  .sceau.vu { pointer-events: none; cursor: auto; }
}