/*
 * E2 — le bras de fer.
 *
 * Transcription de la maquette « la presse vs l'argent — bras de fer » :
 * 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.
 *
 * Un seul écart assumé, le même qu'en E1 : une part reconstituée depuis le
 * résidu du pool porte la mention « déduit » sous sa valeur. La maquette
 * n'affichait que des parts publiées.
 *
 * Contrainte CSP : aucune largeur n'est écrite dans un attribut `style` par le
 * serveur — les deux barres du duel prennent la leur des classes .l0 à .l50
 * (app.css, section « la piste »), divisée par deux puisque chaque camp occupe une moitié. Le
 * rejeu, lui, écrit des valeurs continues via l'objet `style` du DOM, ce que la
 * CSP n'interdit pas.
 */

.page { max-width: 980px; padding: 20px 22px 40px; }

/* ---- le bloc de une : surtitre, titre, chapô, légende ---- */

.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); }
.legend .sw { display: inline-block; width: 12px; height: 8px; vertical-align: 0; }
.legend .sw-presse { background: var(--bleu); }
.legend .sw-argent { background: var(--or); }

/* ---- la barre de commande : frise des instants, instant lu, rejeu ---- */

.ticksbar { display: flex; align-items: center; gap: 5px; margin: 16px 0 12px; flex-wrap: wrap; }
.ticksbar .lbl {
  font: 500 9.5px var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sourdine); margin-right: 4px;
}
.ticksbar .ticks { margin: 0; gap: 5px; align-items: center; }
/* La rupture de cadence doit reprendre une hauteur dans une barre centrée,
 * sans quoi elle se réduit à rien et l'axe redevient uniforme. */
.ticksbar .ticks .rupture { height: 20px; margin: 0 4px; }
.ticksbar .ticks a,
.ticksbar .ticks .avenir {
  font: 600 10px var(--mono); padding: 4px 8px; border: 1px solid var(--trait);
  border-radius: 0; background: transparent; color: var(--sourdine-clair); text-decoration: none;
}
.ticksbar .ticks a.actif { background: var(--or); border-color: var(--or); color: var(--fond); }
.ticksbar .ticks .avenir { color: var(--trait); border-style: dashed; }

.horloge {
  margin-left: auto; font: 700 24px/1 var(--mono);
  font-variant-numeric: tabular-nums; color: var(--or);
}
button.replay {
  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;
}
button.replay[hidden] { display: none; }

/* ---- l'ossature en sept colonnes, partagée par l'en-tête et les lignes ---- */

.thead,
.ligne {
  display: grid;
  grid-template-columns: 22px 34px 148px 100px 46px 1fr 46px;
  gap: 8px;
  align-items: center;
}
.thead {
  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; margin-bottom: 4px;
}
.thead .r { text-align: right; }
.thead .c { text-align: center; }
.thead .presse { color: var(--bleu); }
.thead .argent { color: var(--or); }

/* ---- la scène : le tableau, et l'encart de fin par-dessus ---- */

.scene { position: relative; margin: 0 0 16px; }

/* Hors rejeu glissé, le classement se réordonne par la propriété `order` : les
 * lignes ne bougent pas dans le document, et l'ordre lu à l'écran reste celui
 * des rangs affichés. */
.board { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.ligne { height: 52px; border-bottom: 1px solid var(--trait-tenu); }

/* Le rejeu passe les lignes en absolu pour les faire glisser : la hauteur du
 * conteneur est alors posée par le script, faute de quoi la page se replie. */
.board.anime { position: relative; }
.board.anime .ligne {
  position: absolute; left: 0; right: 0; top: 0;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ligne .rang { font: 500 12px var(--mono); color: var(--sourdine); text-align: center; }
.ligne .dossard { width: 32px; height: 28px; border-radius: 2px; font: 700 15px var(--mono); }
.ligne .qui { min-width: 0; }
.ligne .nm {
  display: block; font: 600 14.5px/1.1 var(--titre);
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ligne .dr {
  display: block; font: 400 9.5px var(--mono); color: var(--sourdine); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- la pastille : qui, des deux camps, charge le plus ---- */

.ligne .chip {
  display: block; font: 600 9.5px var(--mono); padding: 3px 6px;
  border-radius: 2px; text-align: center; white-space: nowrap;
}
/* Ni vert ni rouge : un écart n'est ni bon ni mauvais. Chaque camp garde sa
 * couleur — celle de sa barre — et c'est tout ce que la pastille dit. */
.ligne .chip.argent { background: var(--or); color: var(--fond); }
.ligne .chip.presse { background: var(--bleu); color: var(--fond); }
.ligne .chip.accord {
  background: transparent; color: var(--sourdine-clair); border: 1px solid #2c4c40;
}

/* ---- le duel : deux barres qui partent du même axe, en sens opposés ---- */

.ligne .pval {
  text-align: right; font: 600 11.5px var(--mono);
  font-variant-numeric: tabular-nums; color: var(--sourdine-clair);
}
.ligne .duel { position: relative; display: block; height: 18px; }
.ligne .duel .axe {
  position: absolute; left: 50%; top: -5px; bottom: -5px;
  width: 1px; background: rgba(245, 179, 60, 0.4);
}
/* Chaque camp occupe une moitié : la classe porte la part sur l'échelle
 * commune, la moitié se prend ici plutôt qu'en doublant l'échelle. */
.ligne .duel .pbar,
.ligne .duel .abar { position: absolute; top: 0; bottom: 0; width: calc(var(--w, 0%) / 2); }
.ligne .duel .pbar { right: 50%; background: linear-gradient(270deg, #3d76b8, var(--bleu)); }
.ligne .duel .abar { left: 50%; background: linear-gradient(90deg, #e3a23c, var(--or)); }
/* Rejeu : la barre de l'argent occupe sa demi-piste et son échelle porte la
 * valeur — écrire `width` à chaque image refaisait la mise en page. Le dégradé
 * était déjà comprimé sur la largeur de la barre, l'aspect ne change pas. La
 * classe vient du script : sans JavaScript, les largeurs restent celles du
 * serveur. */
.board.rejeu .ligne .duel .abar { width: 50%; transform-origin: left center; }

.ligne .aval {
  text-align: right; font: 700 12.5px var(--mono);
  font-variant-numeric: tabular-nums; color: var(--or);
}
/* Écart assumé à la maquette : une part reconstituée le dit sous sa valeur. */
/* « déduit » vient de la feuille, comme dans corbeille.css : voir là-bas. */
.ligne.deduit .aval::after { content: "déduit"; display: block; font-size: 7.5px; }

/* La ligne du plus gros désaccord — celle que nomme l'encart de fin. */
.ligne.duel-du-jour { background: linear-gradient(90deg, rgba(245, 179, 60, 0.06), transparent 60%); }
.ligne.hors-course { opacity: 0.4; }
.ligne.hors-course .nm { text-decoration: line-through; }

/* ---- l'encart de fin de rejeu : le duel du jour ---- */

.sceau {
  position: absolute; top: 40%; left: 50%;
  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; }
.sceau.vu { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.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: 46ch; }
.sceau .t2 .b { color: var(--bleu); }
.sceau .t2 .o { color: var(--or); }
.sceau .t3 {
  margin: 6px 0 0; font: 500 11px/1.5 var(--mono);
  letter-spacing: 0.08em; color: var(--sourdine-clair); max-width: 52ch;
}

@media (max-width: 62rem) {
  .thead,
  .ligne { grid-template-columns: 22px 34px minmax(6rem, 148px) 90px 40px 1fr 44px; }
  .ligne { height: auto; min-height: 52px; padding: 4px 0; }
}

@media (max-width: 48rem) {
  .thead { display: none; }
  .ligne { grid-template-columns: 22px 34px minmax(0, 1fr) 90px; }
  .ligne .pval,
  .ligne .aval { grid-row: 2; }
  .ligne .duel { grid-column: 1 / -1; grid-row: 3; }
  .hero h1 { font-size: 34px; }
  .legend { margin-left: 0; align-items: flex-start; }
  .horloge { margin-left: 0; }
  .sceau { position: static; opacity: 1; transform: none; background: var(--panneau); }
}