/* ============================================================
   STATUT — la pastille d'état, et la rampe qui la porte
   CONSTAT DU RELEVÉ (complément § 6.6) : « il n'existe AUCUN composant statut ».
   L'état d'un document est un simple paragraphe Roboto 16/400 en ROUGE PUR
   `#ff0000`, sans pastille, sans fond, sans bordure, sans casse. La même
   intention est écrite ailleurs (date de validité d'adhésion, § 6.3) en
   `#b82105` : DEUX ROUGES pour une même intention.

   CONTRAT : « un seul rouge d'état (le #b82105 relevé comme base, le #ff0000 nu
   disparaît) » + « composant statut (pastille sur tokens remplaçant le
   paragraphe rouge nu) ».
   La mesure confirme l'arbitrage : `#ff0000` sur blanc = 4,00:1 (sous le seuil),
   `#b82105` = 6,45:1. Le rouge retenu est aussi le seul des deux qui passe.

   LOI DU COMPOSANT : un état ne se dit JAMAIS par la seule couleur (WCAG 1.4.1).
   La pastille porte toujours un libellé, et un point de couleur en plus du texte.
   ============================================================ */

.lcdi-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .3rem .7rem;
  border-radius: var(--radius-arc);
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: var(--weight-strong);
  line-height: 1.3;
  white-space: nowrap;
}
/* Le point : un second signal, non textuel, qui rend l'état lisible en
   diagonale sans dépendre de la teinte du libellé. */
.lcdi-status::before {
  content: "";
  width: .55em;
  height: .55em;
  border-radius: var(--radius-round);
  background: currentColor;
  flex: none;
}

.lcdi-status--danger  { color: var(--state-danger);       background: var(--state-danger-veil); }
.lcdi-status--success { color: var(--state-success);      background: var(--state-success-veil); }
.lcdi-status--info    { color: var(--state-info);         background: var(--state-info-veil); }
.lcdi-status--warning { color: var(--state-warning-text); background: var(--state-warning-veil); }
.lcdi-status--neutral { color: var(--text-body);          background: var(--state-neutral-veil); }

/* --- Variante PLEINE : quand l'état doit crier (badge sur média) -------- */
.lcdi-status--solid { color: var(--text-on-night); }
.lcdi-status--solid.lcdi-status--danger  { background: var(--state-danger); }
.lcdi-status--solid.lcdi-status--success { background: var(--state-success); }
.lcdi-status--solid.lcdi-status--info    { background: var(--state-info); }
.lcdi-status--solid.lcdi-status--neutral { background: var(--accent-alt); }
/* L'avertissement plein prend l'ENCRE de l'avertissement en fond, pas l'orange :
   le blanc sur `#f7630c` mesure 2,3:1, l'orange n'a pas le droit de porter du
   blanc. Sur `#9a3c00` la même pastille mesure 6,95:1. Aucune exception à
   faire : la pastille pleine est blanche sur fond profond, partout. */
.lcdi-status--solid.lcdi-status--warning { background: var(--state-warning-text); }

/* --- Sur nuit : les teintes sombres de la rampe deviennent illisibles,
   la pastille passe en voile renforcé et le libellé en clair. -------------- */
[data-theme="nuit"] .lcdi-status { color: var(--text-on-night); }
[data-theme="nuit"] .lcdi-status--danger  { background: var(--state-danger-veil); }
[data-theme="nuit"] .lcdi-status--success { background: var(--state-success-veil); }
[data-theme="nuit"] .lcdi-status--info    { background: var(--state-info-veil); }
[data-theme="nuit"] .lcdi-status--warning { background: var(--state-warning-veil); }
[data-theme="nuit"] .lcdi-status--neutral { background: var(--state-neutral-veil); }

/* --- Ligne de validité d'adhésion (relevé § 6.3) -----------------------
   « Validité adhésion : » en 20/700, la DATE en rouge d'état.
   La date reste une donnée : chiffres tabulaires, et le rouge n'est plus le
   seul signal (la pastille l'accompagne). */
.lcdi-validity { font-size: var(--type-h5); font-weight: var(--weight-title); color: var(--text-body); }
.lcdi-validity__date {
  font-variant-numeric: var(--numeric-data);
  color: var(--state-danger);
  font-weight: var(--weight-title);
}
