/*
 * Punchbox — (c) 2026 Alexis Clement. Tous droits reserves.
 * Logiciel proprietaire. Toute reproduction ou diffusion interdite sans
 * autorisation ecrite.
 *
 * session-essai.css — bloc de démarrage explicite de l'essai anonyme
 * (mission session-essai-et-page-abo, 06/09/2026). Fichier DÉDIÉ, séparé de
 * style.css (hors périmètre d'écriture de cette mission) : structure et
 * typographie du bloc UNIQUEMENT, réutilise les variables de thème et les
 * classes de bouton/lien déjà définies dans style.css (.bouton-laiton,
 * .lien-texte, .note) sans les redéfinir.
 */

.session-essai {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-s, 4px);
  background: var(--fond-alt);
}

.session-essai-avant,
.session-essai-active,
.session-essai-epuise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.session-essai-avant .note,
.session-essai-epuise .note {
  margin: 0;
  flex-basis: 100%;
}

.session-essai-active {
  gap: 10px;
}

.session-essai-compteur {
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--texte);
}

.session-essai-epuise-titre {
  margin: 0;
  flex-basis: 100%;
  font-weight: 700;
  color: var(--texte);
}

.session-essai-epuise-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Ton « alerte » (mission session-essai-et-page-abo, étape 3) : posé sur
   #session-essai-compteur sous les deux dernières minutes, même convention
   que .chrono-restant[data-ton="alerte"] dans style.css. */
.session-essai-compteur[data-ton="alerte"] { color: var(--danger, #b3261e); }