/* Décompte jusqu'à l'ouverture de la consultation (serveur/decompte.mjs, public/decompte.js) : quatre cases blanches au
   filet bleu pâle, le nombre en Inter au-dessus de son unité, chiffres de même chasse pour que rien ne bouge d'une
   seconde à l'autre. Les quatre cases tiennent sur une ligne dès que le décompte a 20 rem de large ; au-dessous, deux
   par deux. */

.decompte { margin: 0 0 var(--e-5); container-type: inline-size; }
.decompte [hidden] { display: none; }
.decompte-titre { margin: 0 0 var(--e-2); font-weight: 600; line-height: 1.4; color: var(--encre); }
.decompte-reste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); max-width: 28rem; margin: 0; }
.decompte-case { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); min-width: 0; padding: var(--e-2) var(--e-1); border: 1px solid var(--filet); border-radius: var(--rayon-petit); background: var(--surface); overflow: hidden; }
.decompte-nombre { display: block; font-family: var(--police-titres); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.decompte-unite { font-size: 0.875rem; line-height: 1.2; color: var(--gris); }
.decompte-ouverte { margin: 0; font-family: var(--police-titres); font-weight: 700; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.35; color: var(--accent); }
.decompte-passe .decompte-ouverte::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.45em; border-radius: 50%; background: var(--accent); vertical-align: 0.08em; }

/* Accueil : le décompte suit la ligne de l'ouverture du volet, qui dit déjà la date. */
.decompte-accueil { margin-top: calc(-1 * var(--e-2)); }

@container (max-width: 20rem) {
  .decompte-reste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Accueil sur un téléphone : l'appel du premier écran (serveur/pages/accueil-appel.mjs) porte le décompte avec son titre
   sous les deux phrases du chapeau, puis « Signer la tribune » et « Participer à la consultation », chacun sur toute la
   largeur. Le volet de la consultation ne répète pas le décompte, celui de la tribune ne répète pas son bouton. Dès
   48 rem, les volets côte à côte reprennent le tout dans le premier écran : l'appel s'efface. */
.scene-appel { margin: 0 0 var(--e-6); }
.scene-appel .decompte { margin-bottom: var(--e-4); }
.scene-appel-gestes { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); margin: 0; }
.scene-appel-gestes .bouton { flex: 1 1 14rem; justify-content: center; text-align: center; }
@media (min-width: 48rem) { .scene-appel { display: none; } }
@media (max-width: 47.99rem) { .volet-consultation .decompte, .volet-signer { display: none; } }