/* ==========================================================================
   Souche, les composants nommés
   Ils sont stables : une ligne de carnet est la même partout, un badge aussi.
   Le code de production assemble, il ne redessine pas.
   Dépend de jetons.css, qui doit être chargé avant.
   ========================================================================== */

/* ==========================================================================
   1. Le châssis : barre en haut sur grand écran, barre en bas au pouce
   ========================================================================== */

.chassis {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.barre {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--papier);
  border-bottom: var(--filet) solid var(--trait);
  display: flex;
  align-items: baseline;
  gap: var(--e-5);
  padding: var(--e-3) var(--e-5);
  flex-wrap: wrap;
}

.marque-outil {
  font-weight: 700;
  font-size: var(--t-2);
  letter-spacing: -0.02em;
  margin: 0;
}
.marque-outil span {
  display: block;
  font-weight: 400;
  font-size: var(--t-00);
  color: var(--encre-pale);
  letter-spacing: 0;
}

.menu {
  display: flex;
  gap: var(--e-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu button {
  font: inherit;
  font-size: var(--t-0);
  color: var(--encre-pale);
  background: none;
  border: 0;
  border-bottom: var(--filet-fort) solid transparent;
  padding: var(--e-2) var(--e-3);
  min-height: var(--cible);
  cursor: pointer;
}
.menu button:hover { color: var(--encre); }
.menu button[aria-current="page"] {
  color: var(--encre);
  border-bottom-color: var(--encre);
  font-weight: 700;
}

.contenu {
  flex: 1;
  padding: var(--e-6) var(--e-5) var(--e-9);
  max-width: 1080px;
  width: 100%;
  margin-inline: auto;
}

.pied-outil {
  padding: var(--e-4) var(--e-5) var(--e-6);
  max-width: 1080px;
  width: 100%;
  margin-inline: auto;
}

@media (max-width: 899px) {
  .barre {
    position: static;
    border-bottom: 0;
    padding: var(--e-4) var(--e-4) var(--e-2);
  }
  .menu {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    background: var(--papier);
    border-top: var(--filet) solid var(--trait-fort);
    justify-content: space-between;
    padding: 0 var(--e-1);
  }
  .menu li { flex: 1; }
  .menu button {
    width: 100%;
    font-size: 0.8rem;
    padding: var(--e-2) var(--e-1);
    min-height: 56px;
    border-bottom: 0;
    border-top: var(--filet-fort) solid transparent;
  }
  .menu button[aria-current="page"] { border-top-color: var(--encre); }
  .contenu { padding: var(--e-5) var(--e-4) 104px; }
  .pied-outil { padding: 0 var(--e-4) 92px; }
}

/* ==========================================================================
   2. L'écran, et sa transition
   ========================================================================== */

.ecran { display: none; }
.ecran.actif { display: block; animation: entree var(--d-ecran) var(--courbe) both; }

@keyframes entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.titre-ecran { font-size: var(--t-4); }
.sous-titre {
  color: var(--encre-pale);
  font-size: var(--t-1);
  margin-top: var(--e-2);
}

/* ==========================================================================
   3. La perforation : le motif de tout l'outil
   Une bande de papier creusé, un pointillé, et de vraies encoches.
   ========================================================================== */

.perfo-v {                       /* perforation verticale, entre deux colonnes */
  position: relative;
  border-right: var(--filet) dashed var(--trait-fort);
}
.perfo-v::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -5px;
  width: 10px;
  background: radial-gradient(circle at 5px 7px, var(--papier) 3.6px, transparent 3.9px);
  background-size: 10px 14px;
  pointer-events: none;
}

.perfo-h {                       /* perforation horizontale, sous un bandeau */
  position: relative;
  border-bottom: var(--filet) dashed var(--trait-fort);
}
.perfo-h::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 10px;
  background: radial-gradient(circle at 7px 5px, var(--papier) 3.6px, transparent 3.9px);
  background-size: 14px 10px;
  pointer-events: none;
}

/* ==========================================================================
   4. Le chiffre héros (ecran-aujourdhui)
   Trois chiffres posés sur le papier, séparés par des perforations.
   Jamais dans une carte, jamais dans une boîte.
   ========================================================================== */

.heros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--e-6);
}
.heros__part { padding: var(--e-4) var(--e-5) var(--e-4) 0; }
.heros__part + .heros__part { padding-left: var(--e-5); }
.heros__part:not(:last-child) { border-right: var(--filet) dashed var(--trait-fort); position: relative; }
.heros__part:not(:last-child)::after {
  content: "";
  position: absolute; top: 0; bottom: 0; right: -5px; width: 10px;
  background: radial-gradient(circle at 5px 7px, var(--papier) 3.6px, transparent 3.9px);
  background-size: 10px 14px;
}
.heros__valeur {
  font-family: var(--chiffre);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-heros-large);
  line-height: 1;
  letter-spacing: -0.045em;
  display: block;
  white-space: nowrap;
}
.heros__part--agit .heros__valeur { color: var(--cuivre); }
.heros__quoi {
  display: block;
  margin-top: var(--e-3);
  font-size: var(--t-1);
  color: var(--encre-pale);
  max-width: 22ch;
}

@media (max-width: 899px) {
  .heros { grid-template-columns: 1fr; }
  .heros__valeur { font-size: var(--t-heros); }
  .heros__part { padding: var(--e-4) 0; border-right: 0 !important; }
  .heros__part:not(:last-child) { border-bottom: var(--filet) dashed var(--trait-fort); }
  .heros__part:not(:last-child)::after {
    top: auto; bottom: -5px; left: 0; right: 0; width: auto; height: 10px;
    background: radial-gradient(circle at 7px 5px, var(--papier) 3.6px, transparent 3.9px);
    background-size: 14px 10px;
  }
  .heros__part + .heros__part { padding-left: 0; }
  .heros__quoi { max-width: none; }
}

/* La bande de matière en tête de l'écran d'accueil : l'image de perforation,
   fondue vers le papier, en duotone papier et cuivre. Sans elle, la trame CSS
   ci-dessous tient toute seule. */
.bandeau-matiere {
  height: 132px;
  margin: calc(var(--e-6) * -1) calc(var(--e-5) * -1) var(--e-5);
  background-color: var(--cuivre-voile);
  background-image: url("images/perforation.jpg");
  background-size: cover;
  background-position: 22% 40%;
  background-blend-mode: luminosity;
  filter: contrast(0.82) brightness(1.08);
  mask-image: linear-gradient(to bottom, black 0%, black 42%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 42%, transparent 100%);
}
@media (max-width: 899px) {
  .bandeau-matiere {
    height: 92px;
    margin: calc(var(--e-5) * -1) calc(var(--e-4) * -1) var(--e-4);
  }
}

/* ==========================================================================
   5. La ligne de carnet, c'est à dire la souche
   ========================================================================== */

.carnet { border-top: var(--filet) solid var(--trait); }

.souche {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 0 var(--e-4);
  align-items: center;
  border-bottom: var(--filet) solid var(--trait);
  background: var(--papier);
  transition: background var(--d-souche) var(--courbe),
              opacity var(--d-souche) var(--courbe);
}
.souche:hover { background: color-mix(in oklch, var(--papier-creux) 45%, var(--papier)); }

.souche__bande {
  align-self: stretch;
  background: var(--papier-creux);
  padding: var(--e-3) var(--e-2);
  text-align: center;
  position: relative;
  border-right: var(--filet) dashed var(--trait-fort);
  transition: transform var(--d-souche) var(--courbe), opacity var(--d-souche) var(--courbe);
}
.souche__bande::after {
  content: "";
  position: absolute; top: 0; bottom: 0; right: -5px; width: 10px;
  background: radial-gradient(circle at 5px 7px, var(--papier) 3.6px, transparent 3.9px);
  background-size: 10px 14px;
}
.souche__numero {
  font-family: var(--chiffre);
  font-size: var(--t-0);
  color: var(--encre);
  display: block;
}
.souche__annee {
  font-family: var(--chiffre);
  font-size: 0.7rem;
  color: var(--encre-tres-pale);
  display: block;
}

.souche__corps { padding: var(--e-3) 0; min-width: 0; }
.souche__client { font-weight: 700; font-size: var(--t-1); }
.souche__chantier {
  color: var(--encre-pale);
  font-size: var(--t-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.souche__ligne2 {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-2);
  flex-wrap: wrap;
}
.souche__montant {
  font-family: var(--chiffre);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-1);
}

/* La graduation de mètre ruban : depuis combien de jours ce devis dort. */
.jauge {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.jauge__ruban {
  width: 108px; height: 12px;
  background: repeating-linear-gradient(to right, var(--trait) 0 1px, transparent 1px 6px);
  position: relative;
}
.jauge__ruban::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: var(--rempli, 0%);
  background: repeating-linear-gradient(to right, var(--jauge-encre, var(--encre-pale)) 0 1px, transparent 1px 6px);
  transition: width var(--d-jours) var(--courbe);
}
.jauge__jours {
  font-family: var(--chiffre);
  font-size: var(--t-00);
  color: var(--encre-pale);
  white-space: nowrap;
}
.souche--retard { --jauge-encre: var(--brique); }
.souche--retard .souche__bande { background: var(--brique-voile); }

.souche__gestes {
  display: flex;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4) var(--e-3) 0;
}

/* Le devis sorti du circuit : la souche se détache, la ligne s'apaise. */
.souche--sortie { opacity: .62; }
.souche--sortie .souche__bande { transform: translateX(-6px) rotate(-1.2deg); opacity: .5; }

@media (max-width: 899px) {
  .souche {
    grid-template-columns: 54px 1fr;
    gap: 0 var(--e-3);
  }
  .souche__bande { padding: var(--e-3) var(--e-1); }
  .souche__numero { font-size: 0.9rem; }
  .souche__gestes {
    grid-column: 2;
    padding: 0 0 var(--e-3);
  }
  .souche__chantier { white-space: normal; }
}

/* ==========================================================================
   6. Les deux familles de badges
   Un calcul et une rédaction ne doivent jamais avoir l'air de venir
   du même endroit. Le rectangle plein est vérifié ; la pilule
   pointillée est proposée et attend une main.
   ========================================================================== */

/* 6a. La marque : rectangulaire, pleine, mono. Ce qui est vérifié ou constaté. */
.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--chiffre);
  font-size: var(--t-00);
  line-height: 1.2;
  padding: 5px var(--e-2);
  border: var(--filet) solid currentColor;
  border-radius: var(--rayon);
  white-space: nowrap;
}
.marque--attente  { color: var(--ardoise);  background: var(--ardoise-voile); }
.marque--relance1 { color: var(--cuivre-sombre); background: var(--cuivre-voile); }
.marque--relance2 { color: var(--brique);   background: var(--brique-voile); }
.marque--signe    { color: var(--patine);   background: var(--patine-voile); }
.marque--suite    { color: var(--encre-pale); background: var(--papier-creux); }
.marque--expire   { color: var(--ardoise);  background: var(--papier-creux-2); }

/* La coche, dessinée, jamais un émoji ni un caractère de police. */
.coche {
  width: 12px; height: 12px;
  flex: none;
  position: relative;
}
.coche::after {
  content: "";
  position: absolute;
  left: 3px; top: 0;
  width: 5px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(42deg);
}
.coche--vide::after {
  border-color: transparent;
}
.coche--vide {
  border: var(--filet) solid var(--trait-fort);
  border-radius: var(--rayon);
}

/* 6b. La pilule : arrondie, pointillée, vide. Ce qui est proposé et attend une main. */
.propose {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-00);
  line-height: 1.2;
  padding: 5px var(--e-3);
  border: var(--filet) dashed currentColor;
  border-radius: var(--rayon-badge);
  background: none;
  color: var(--cuivre-sombre);
  white-space: nowrap;
}
.propose::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  border: var(--filet) dashed currentColor;
  flex: none;
}
.propose--echec { color: var(--brique); }
.propose--valide {
  border-style: solid;
  border-radius: var(--rayon);
  font-family: var(--chiffre);
  color: var(--patine);
  background: var(--patine-voile);
}
.propose--valide::before { border-style: solid; background: currentColor; }

/* ==========================================================================
   7. Les boutons
   ========================================================================== */

.bouton {
  font: inherit;
  font-size: var(--t-1);
  font-weight: 700;
  min-height: var(--cible);
  padding: var(--e-3) var(--e-5);
  border: var(--filet-fort) solid var(--encre);
  border-radius: var(--rayon);
  background: var(--encre);
  color: var(--papier);
  cursor: pointer;
  transition: transform 120ms var(--courbe);
}
.bouton:active { transform: translateY(1px); }
.bouton--agit { border-color: var(--cuivre); background: var(--cuivre); }
.bouton--second {
  background: none;
  color: var(--encre);
  border-width: var(--filet);
  border-color: var(--trait-fort);
  font-weight: 400;
}
.bouton--second:hover { border-color: var(--encre); }
.bouton--geste {          /* les deux gestes d'une ligne de carnet */
  font-size: var(--t-00);
  font-weight: 400;
  padding: var(--e-2) var(--e-3);
  min-height: var(--cible);
  background: none;
  color: var(--encre);
  border: var(--filet) solid var(--trait-fort);
}
.bouton--geste:hover { border-color: var(--encre); background: var(--papier-creux); }
.bouton[disabled] {
  background: none;
  color: var(--encre-tres-pale);
  border-color: var(--trait);
  cursor: not-allowed;
}
.bouton[disabled]:active { transform: none; }

.lien-nu {
  font: inherit;
  font-size: var(--t-0);
  background: none;
  border: 0;
  padding: var(--e-2) 0;
  min-height: var(--cible);
  color: var(--cuivre-sombre);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ==========================================================================
   8. Le bloc à relire : tout ce qu'un moteur rédige passe par lui
   Cinq états, une bande de provenance, un filet de crayon vertical.
   ========================================================================== */

.a-relire {
  border-left: var(--filet-fort) solid var(--cuivre);
  padding-left: var(--e-4);
  margin-block: var(--e-5);
  max-width: 72ch;
}
.a-relire__provenance {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  font-size: var(--t-00);
  color: var(--encre-pale);
  margin-bottom: var(--e-3);
}
.a-relire__corps {
  background: var(--papier-creux);
  padding: var(--e-4);
  border-radius: var(--rayon);
  font-size: var(--t-1);
  line-height: var(--interligne);
  min-height: 96px;
}
/* Les blocs dont le contenu est du texte pur gardent leurs retours à la ligne.
   Le bloc des ouvrages, lui, contient une structure : pas de pre-wrap. */
.a-relire__corps[data-bloc="envoi"],
.a-relire__corps[data-bloc="relance"],
.a-relire__corps[data-bloc="bilan"] { white-space: pre-wrap; }
.a-relire__corps:focus-visible { outline-offset: 0; }
.a-relire__pied {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-top: var(--e-3);
}
.a-relire__note {
  font-size: var(--t-00);
  color: var(--encre-tres-pale);
  margin-top: var(--e-2);
}

/* Les lignes qui arrivent pendant l'état « en préparation ». */
.a-relire[data-etat="preparation"] .a-relire__corps { color: var(--encre-pale); }
.ligne-arrivee {
  display: block;
  opacity: 0;
  animation: arrivee var(--d-ligne) var(--courbe) both;
  animation-delay: calc(var(--i, 0) * var(--d-ligne));
}
@keyframes arrivee { from { opacity: 0; } to { opacity: 1; } }

/* Le crayon qui écrit : un trait de cuivre qui avance en tête du bloc. */
.a-relire[data-etat="preparation"] .a-relire__provenance::after {
  content: "";
  height: var(--filet-fort);
  width: 84px;
  background: linear-gradient(90deg, var(--cuivre) 0 40%, var(--trait) 40% 100%);
  background-size: 250% 100%;
  animation: crayon 1.4s linear infinite;
}
@keyframes crayon { from { background-position: 100% 0; } to { background-position: -60% 0; } }

.a-relire[data-etat="valide"],
.a-relire[data-etat="envoye"] { border-left-color: var(--patine); }
.a-relire[data-etat="echec"]  { border-left-color: var(--brique); }
.a-relire[data-etat="echec"] .a-relire__corps {
  background: var(--brique-voile);
  color: var(--brique);
}

/* ==========================================================================
   9. Le bloc vérifié : aucune bordure de crayon, un cadre net, des coches
   ========================================================================== */

.verifie {
  border: var(--filet) solid var(--trait-fort);
  border-radius: var(--rayon);
  padding: var(--e-4);
  margin-block: var(--e-5);
  background: var(--papier);
}
.verifie__titre {
  font-size: var(--t-2);
  font-weight: 700;
  margin-bottom: var(--e-3);
}
.mentions { list-style: none; margin: 0; padding: 0; }
.mentions li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: var(--filet) solid var(--trait);
  font-size: var(--t-0);
}
.mentions li:last-child { border-bottom: 0; }
.mentions li .coche { color: var(--patine); margin-top: 3px; }
.mentions li[data-manque] { color: var(--brique); font-weight: 700; }
.mentions li[data-manque] .coche { color: var(--brique); }

.totaux {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: var(--filet-fort) solid var(--encre);
  max-width: 380px;
}
.totaux div { display: flex; justify-content: space-between; gap: var(--e-4); }
.totaux div:last-child { font-weight: 700; font-size: var(--t-2); }
.totaux span:last-child { font-family: var(--chiffre); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   10. Champs de saisie, larges pour une main sale
   ========================================================================== */

.champ { display: block; margin-bottom: var(--e-5); max-width: 34rem; }
.champ__libelle { display: block; font-weight: 700; font-size: var(--t-1); margin-bottom: var(--e-2); }
.champ__aide { display: block; font-size: var(--t-0); color: var(--encre-pale); margin-bottom: var(--e-3); }
.champ input, .champ textarea, .champ select {
  font: inherit;
  font-size: var(--t-1);
  width: 100%;
  min-height: 52px;
  padding: var(--e-3);
  border: var(--filet) solid var(--trait-fort);
  border-bottom-width: var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--papier-creux);
  color: var(--encre);
}
.champ textarea { min-height: 132px; line-height: var(--interligne); resize: vertical; }
.champ input:focus, .champ textarea:focus { background: var(--papier); }

.choix { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.choix button {
  font: inherit;
  font-size: var(--t-0);
  min-height: var(--cible);
  padding: var(--e-2) var(--e-4);
  border: var(--filet) solid var(--trait-fort);
  border-radius: var(--rayon);
  background: none;
  color: var(--encre);
  cursor: pointer;
}
.choix button[aria-pressed="true"] {
  border-color: var(--encre);
  border-bottom-width: var(--filet-fort);
  background: var(--papier-creux);
  color: var(--encre);
  font-weight: 700;
}

/* ==========================================================================
   11. Filtres, avis, notes de bas d'écran
   ========================================================================== */

.filtres { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-block: var(--e-4); }
.filtres button {
  font: inherit;
  font-size: var(--t-0);
  min-height: var(--cible);
  padding: var(--e-2) var(--e-3);
  border: 0;
  border-bottom: var(--filet-fort) solid transparent;
  background: none;
  color: var(--encre-pale);
  cursor: pointer;
}
.filtres button[aria-pressed="true"] {
  color: var(--encre);
  font-weight: 700;
  border-bottom-color: var(--encre);
}

.avis {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  padding: var(--e-3) var(--e-4);
  border-left: var(--filet-fort) solid var(--patine);
  background: var(--patine-voile);
  font-size: var(--t-0);
  margin-block: var(--e-4);
}
.avis--alerte { border-left-color: var(--brique); background: var(--brique-voile); color: var(--brique); }
.avis--calme  { border-left-color: var(--trait-fort); background: var(--papier-creux); color: var(--encre-pale); }

.note-pied {
  font-size: var(--t-0);
  color: var(--encre-pale);
  border-top: var(--filet) solid var(--trait);
  padding-top: var(--e-3);
  margin-top: var(--e-6);
  max-width: var(--mesure);
}

.garantie {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-0);
  font-family: var(--chiffre);
  color: var(--ardoise);
  background: var(--ardoise-voile);
  border: var(--filet) solid color-mix(in oklch, var(--ardoise) 30%, transparent);
  border-radius: var(--rayon);
  padding: var(--e-3) var(--e-4);
  margin-block: var(--e-4);
}

.fil { list-style: none; margin: var(--e-5) 0; padding: 0; }
.fil li {
  position: relative;
  padding: 0 0 var(--e-4) var(--e-5);
  border-left: var(--filet) dashed var(--trait-fort);
  font-size: var(--t-0);
}
.fil li:last-child { border-left-color: transparent; padding-bottom: 0; }
.fil li::before {
  content: "";
  position: absolute; left: -5px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--papier);
  border: var(--filet-fort) solid var(--trait-fort);
}
.fil li[data-fait]::before { background: var(--encre); border-color: var(--encre); }
.fil li[data-maintenant]::before { background: var(--cuivre); border-color: var(--cuivre); }
.fil strong { display: block; }

.regle { padding-block: var(--e-5); border-bottom: var(--filet) solid var(--trait); }
.regle h3 { font-size: var(--t-2); }
.regle p { margin-top: var(--e-2); font-size: var(--t-1); }
.regle__source {
  display: block;
  margin-top: var(--e-3);
  font-family: var(--chiffre);
  font-size: var(--t-00);
  color: var(--encre-pale);
  overflow-wrap: anywhere;
}

.liste-nue { list-style: none; margin: var(--e-3) 0 0; padding: 0; }
.liste-nue li {
  padding: var(--e-2) 0 var(--e-2) var(--e-5);
  position: relative;
  font-size: var(--t-1);
  max-width: var(--mesure);
}
.liste-nue li::before {
  content: "";
  position: absolute; left: 0; top: 14px;
  width: 14px; height: var(--filet-fort);
  background: var(--trait-fort);
}

.tableau-chiffres { width: 100%; border-collapse: collapse; max-width: 520px; margin-block: var(--e-4); }
.tableau-chiffres th, .tableau-chiffres td {
  text-align: left;
  padding: var(--e-3) var(--e-3) var(--e-3) 0;
  border-bottom: var(--filet) solid var(--trait);
  font-weight: 400;
  font-size: var(--t-0);
}
.tableau-chiffres td {
  font-family: var(--chiffre);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}

/* ==========================================================================
   12. La révélation d'ouverture
   Composant `revelation-ouverture` de la bibliothèque, rethémé aux jetons de
   Souche. Une seule fois, sur ecran-aujourdhui : la matière entre par un voile
   qui se retire de la gauche vers la droite, comme une feuille qu'on sort du
   carnet, puis la phrase, puis les trois chiffres, puis le bouton.
   Sans JavaScript, l'animation joue quand même et se termine sur l'état final.
   ========================================================================== */

.revelation [data-rev] {
  animation: rev-entree var(--d-ouverture) var(--courbe) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes rev-entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.revelation [data-rev="matiere"] {
  animation-name: rev-matiere;
  animation-delay: 0ms;
}
@keyframes rev-matiere {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}