/* Rideau d'eau — feuille propre à la page, chargée EN DERNIER.
   Même précédent que atossa-d9.css et assistant-reglementaire.css.
   Aucune valeur en dur : tout passe par tokens.css (règle R2 d'AGENTS.md).
   Pas d'arrondi, pas d'ombre, pas de dégradé — vocabulaire du site. */

/* Saisie : deux champs, volontairement seuls. Tout le reste du
   dimensionnement relève de l'étude, pas du prédimensionnement. */
.rideau-saisie {
  max-width: var(--l-long);
}

.rideau-saisie .rideau-unite {
  color: var(--ink2);
  font-size: var(--t-mono);
  font-family: var(--mono);
  letter-spacing: var(--ls-mono);
}

/* Résultat. Le débit est le seul chiffre que la page promet : il passe
   devant, seul, sans tuile ni légende. Ce qu'il implique vient après, d'un
   cran plus petit.

   ÉCHELLE TYPOGRAPHIQUE — trois crans, tous pris dans tokens.css, aucune
   valeur inventée :
       --t-h2    le débit ET son unité, au même corps
       --t-chapo la phrase de conséquence
       --t-nav   les hypothèses
   Le débit et son unité sont au MÊME corps depuis le 16/09/2026 (Ronan) :
   ils se distinguent par la couleur, pas par la taille. Un nombre deux fois
   plus gros que son unité se lit comme deux informations, alors que
   « 661 l/min » en est une seule.
   Le composant partagé .chiffres n'est PAS réemployé ici : il sert aussi
   l'accueil, et sa légende porte une taille en dur qu'une page n'a pas à
   redéfinir. */
.rideau-resultat {
  margin-top: 28px;
}

.rideau-resultat[hidden] {
  display: none;
}

/* Le débit, dans ses deux unités. Valeur et unité sur la même ligne, jamais
   coupées — d'où le nowrap sur chaque groupe plutôt que sur la ligne entière,
   qui déborderait sur un téléphone. */
.rideau-debit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 34px;
  margin: 0 0 24px;
}

.rideau-debit b {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--disp);
  font-size: var(--t-h2);
  line-height: var(--i-chiffre);
  /* Pas d'interlettrage sur un nombre : l'approche du titre sépare les
     chiffres et rend « 4 273 » plus difficile à lire d'un coup d'œil. */
  letter-spacing: normal;
}

/* Même corps que la valeur : seule la couleur les sépare. */
.rideau-debit b i {
  font-style: normal;
  font-size: inherit;
  color: var(--ink2);
}

/* Ce que le débit implique, en une phrase. Les nombres ressortent par la
   graisse et la famille, jamais par la taille : une phrase dont un mot sur
   trois change de corps ne se lit plus. */
.rideau-consequence {
  margin: 0;
  max-width: var(--l-long);
  font-size: var(--t-chapo);
  line-height: var(--i-corps);
  color: var(--ink2);
}

.rideau-consequence b {
  font-family: var(--disp);
  color: var(--ink);
}

/* --bp-tuiles : le site passe ses grilles à une colonne à 760 px. */
@media (max-width: 760px) {
  .rideau-suite {
    grid-template-columns: 1fr;
  }
}

/* Le message de palier. Sa teinte suit le poids des hypothèses, et
   n'emprunte PAS le sens des couleurs de compétence : ce filet dit la
   fiabilité d'un chiffre, il ne désigne aucun métier. Le rouge est ici
   la couleur d'action du site, déjà ambivalente et déjà arbitrée. */
.rideau-palier {
  border-left: 3px solid var(--line);
  padding: 18px 22px;
  margin-top: 28px;
  background: var(--tuile);
  color: var(--ink2);
  max-width: var(--l-long);
}

.rideau-resultat[data-niveau="3"] .rideau-palier {
  border-left-color: var(--action);
  color: var(--ink);
}

/* Hors domaine : la page refuse, elle n'extrapole pas. */
.rideau-erreur {
  border-left: 3px solid var(--action);
  padding: 18px 22px;
  background: var(--tuile);
  max-width: var(--l-long);
}

.rideau-erreur[hidden] {
  display: none;
}

/* Les hypothèses sont affichées dans le corps du résultat, pas en note de
   bas de page : c'est ce qui rend le chiffre lisible. */
/* Les hypothèses étaient à --t-mono, soit 11 px : une taille faite pour une
   étiquette en capitales espacées, pas pour un paragraphe. Elles reprennent
   le cran des légendes. */
.rideau-hypotheses {
  color: var(--ink2);
  font-size: var(--t-nav);
  max-width: var(--l-long);
}

.rideau-hypotheses li + li {
  margin-top: 6px;
}