/* ── Espace client — le peu de style ajouté par le branchement sur l'API ────────────
   ⚠️ FICHIER SÉPARÉ, À FUSIONNER DANS espace.css.

   Il n'existe que parce qu'une autre session tenait `espace.css` pendant le
   branchement du 2026-08-06 : y écrire aurait produit un conflit sur un fichier qu'elle
   avait ouvert. Rien ici ne redéfinit une règle d'espace.css — uniquement des classes
   qui n'y existaient pas, parce que la maquette n'avait pas d'états à afficher : elle
   ne parlait à rien.

   Il reprend les JETONS d'espace.css (--carmin, --line, --text-muted…) et n'introduit
   aucune valeur en clair, pour que les deux moitiés vieillissent ensemble. Les deux
   thèmes en découlent donc automatiquement.                                          */

/* ── La ligne d'état ──────────────────────────────────────────────────────────────
   Une phrase sous un formulaire, ou dans un encart. Neutre par défaut, carmin quand
   elle porte un refus : le refus doit se voir sans être crié.                       */
.statut {
  margin: 12px 0 0;
  font-size: 13px; line-height: 1.6;
  color: var(--text-muted);
}
.statut.err {
  color: var(--carmin-encre);
  border-left: 2px solid var(--carmin);
  padding-left: 12px;
}
/* Dans un encart, .encart p impose ses marges : on garde l'espacement du bloc. */
.encart > .statut { margin: 14px 0 0; }

/* ── « À venir » ──────────────────────────────────────────────────────────────────
   ⚠️ Le brief est explicite : « si un chiffre n'est pas disponible, ne l'invente pas
   et n'affiche pas un zéro : dis qu'il arrive ». Cette classe est ce « dis qu'il
   arrive » — un ton en retrait, lisible, jamais une zone grisée qui ressemblerait à
   une panne.                                                                        */
.a-venir { color: var(--text-muted); font-style: italic; }
.jauge-tete b.a-venir { font-style: normal; letter-spacing: .08em; }
a.a-venir[aria-disabled="true"] { pointer-events: none; text-decoration: none; }

/* ── Bandeau d'aperçu de maquette ─────────────────────────────────────────────────
   ⚠️ Il ne décrit PAS un état du système : il signale que l'écran est forcé par
   l'adresse (?etat=…). Sans lui, une capture d'aperçu finirait par circuler comme la
   preuve d'un état réel — le défaut exact que ce dépôt traque.                      */
.bandeau-etat.apercu {
  border-bottom-color: var(--line);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px; letter-spacing: .04em;
}

/* ── Colonne étroite ──────────────────────────────────────────────────────────────
   /bienvenue et /mot-de-passe sont des pages à une seule tâche : un formulaire, puis
   une progression. La largeur de .encart (760 px) suffit ; on retire seulement la
   respiration latérale de .page, qui était calée sur une grille de cartes.           */
.page-etroite { padding-left: max(4vw, 24px); padding-right: max(4vw, 24px); }

/* ── Le champ « adresse » ─────────────────────────────────────────────────────────
   L'équivalent de ce que la vitrine porte en ligne pour le sous-domaine souhaité :
   la saisie et le suffixe fixe, côte à côte, pour que l'abonné voie l'adresse se
   composer pendant qu'il tape.                                                       */
.champ-adresse { display: flex; align-items: stretch; gap: 0; }
.champ-adresse input { flex: 1 1 auto; min-width: 0; }
.champ-adresse > span {
  flex: none; display: inline-flex; align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line); border-left: 0;
  background: var(--surface);
  font-size: 13px; color: var(--text-muted); white-space: nowrap;
}
@media (max-width: 420px) {
  /* Au téléphone, le suffixe passe dessous plutôt que d'écraser la saisie. */
  .champ-adresse { display: block; }
  .champ-adresse > span { border-left: 1px solid var(--line); border-top: 0; width: 100%; }
}

/* ── Les autres collections ───────────────────────────────────────────────────────
   Un compte peut porter plusieurs collections (une invitation par collection, un
   compte par adresse). La principale garde le grand bouton d'entrée ; celles-ci sont
   des boutons de ligne, empilés.                                                     */
#autres-collections { max-width: 760px; margin: 0 auto clamp(24px, 4vh, 34px); }
#autres-liste { flex-direction: column; }
#autres-liste .bouton[disabled] { opacity: .5; cursor: default; }

/* ── Le sélecteur de pays ─────────────────────────────────────────────────────────
   espace.css style `.champ input` mais pas `.champ select` : les maquettes n'avaient
   pas de liste déroulante. Mêmes valeurs que l'input, à l'identique — deux hauteurs
   différentes dans un même formulaire se voient immédiatement.                       */
.champ select {
  width: 100%; height: 46px; padding: 0 14px;
  font: inherit; font-size: 14.5px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 0;
}

/* ── Formulaires dans un encart ───────────────────────────────────────────────────
   .champ et .bouton viennent d'espace.css ; il manquait seulement de quoi respirer
   entre le texte de l'encart et le formulaire qu'il contient.                        */
.encart form { margin-top: 22px; }
.encart .champ p.etiq { margin-top: 8px; text-transform: none; letter-spacing: .02em; }

/* ── Jauges d'usage ────────────────────────────────────────────────────────────────
   La barre remplie hérite de .jauge i (couleur du texte). Deux ajouts : une barre en
   alerte au-delà de 90 % — le moment où l'on incite à monter de formule — et la date de
   mesure, discrète à côté du titre, pour qu'un chiffre ne soit jamais montré sans dire de
   quand il date. */
.jauge-pleine i { background: var(--idc-carmin, #b23a48); }
.usage-date { font-weight: 400; font-size: 12px; opacity: .55; letter-spacing: 0; text-transform: none; }