/* Repris de la maquette : fond, couleurs, polices. Le reste des styles est en
   ligne dans le rendu, comme dans la maquette. */
body { margin: 0; background: #0E1014; color: #E8EAED; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 15px; }
a { color: #6CB4FF; } a:hover { color: #A9D3FF; }
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
input { font-family: 'IBM Plex Mono', monospace; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.field { background: #0E1014; border: 1px solid #3A3F49; border-radius: 10px; min-height: 46px; padding: 0 14px; color: #E8EAED; font-size: 16px; outline: none; }
.field:focus { border-color: #6CB4FF; }
/* Ligne du contexte : nom + source | valeur + lecture | pastille. */
.frow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }

@media (max-width: 720px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big-countdown { font-size: 34px !important; }
  .verdict-title { font-size: 34px !important; }
  /* Contexte sur mobile : nom puis valeur en dessous, pastille à droite. */
  .frow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .frow-name { grid-column: 1; grid-row: 1; }
  .frow-value { grid-column: 1; grid-row: 2; }
  .frow-chip { grid-column: 2; grid-row: 1 / span 2; }
}