/* Pastilles d'etat de /smsi/preuves, posees sur l'habillage document de
   public/smsi/doc.css. Chargee par la seule vue qui l'affiche.

   DEUX REGLES, ET ELLES NE SE NEGOCIENT PAS.

   1. LA COULEUR PORTE LE FOND ET LE LISERE, LE TEXTE RESTE --text.
      Le piege #3 de CLAUDE.md vaut pour tout jeton de signal : en encre,
      --ok/--danger/--accent tombent sous 4.5:1 sur un fond teinte. Meme regle
      que .doc-badge (public/smsi/doc.css) et .fiche-jalons-tag
      (public/css/fiche-jalons.css). Mesure : node outils/contraste.mjs.

   2. JAMAIS LA COULEUR SEULE.
      Chaque pastille porte un mot — verifie, a surveiller, en defaut, non
      mesure. Quelqu'un qui ne distingue pas le vert du rouge lit la page
      entierement, et un lecteur d'ecran aussi. Le mot est le message, la
      couleur n'est qu'un raccourci pour l'oeil qui balaye.

   Aucun JavaScript : la CSP de production est script-src 'self', et une
   pastille calculee au rendu n'a rien a faire cote client. */

/* Le contournement de largeur qui vivait ici (`main.doc { width: 100% }`) a ete
   retire : la PR #56 a corrige la meme chose a la source, dans
   public/smsi/doc.css, par `max-width: min(74ch, 100%)`. Mesure apres retrait,
   viewport 390 px : `document.documentElement.scrollWidth` = 390, inchange.
   Deux mecanismes pour un seul bug valent moins qu'un.

   Les deux contournements de tableau n'ont vecu ici que le temps que doc.css
   soit corrige a la source (PR #53) : ils en ont ete retires. */

/* Aucune regle generique `a:focus-visible` n'existe dans style.css — les
   anneaux de focus y sont poses composant par composant, et les documents de
   /smsi/ n'en ont donc aucun. Sur cette page les liens en portent un, a la
   convention du projet : 2 px sur l'accent. */
.doc a:focus-visible,
.doc-table:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.preuve-etat {
  display: inline-block;
  padding: .16rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Lisere a PLEINE intensite, et non au 45 % de .doc-badge. Mesure : a 45 %, le
   lisere tombe entre 1.83:1 et 2.87:1 sur le fond, sous le seuil de 3:1 des
   composants d'interface (WCAG 1.4.11) ; au jeton pur il monte a 4.00–4.75:1
   en theme clair et 6.81–9.91:1 en sombre, pour zero octet de plus. Meme
   choix que .fiche-jalons-tag.is-public (public/css/fiche-jalons.css). Le fond
   reste a 14 %, lui : c'est le texte qui doit rester lisible dessus. */
.preuve-etat[data-etat="vert"] {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}

.preuve-etat[data-etat="orange"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.preuve-etat[data-etat="rouge"] {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

/* « non mesure » est une absence, pas un signal : rien de colore, le fond
   neutre des cartes. Une sonde muette ne doit ressembler ni a un succes ni a
   un echec. */
.preuve-etat[data-etat="inconnu"] {
  border-color: var(--border);
  background: var(--surface);
}

/* Encadre de fraicheur, en tete de page : dit de quand date la mesure, ou
   qu'il n'y en a pas. Variante de .doc-note, pas un nouveau composant. */
.preuve-alerte {
  border-left: 3px solid var(--accent);
}

/* Le `caption` herite sinon de la largeur de la premiere colonne et se tasse
   en colonne de trois mots. Il porte l'intitule du tableau pour un lecteur
   d'ecran : il doit rester lisible pour tout le monde. */
.doc caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 .75rem;
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.5;
}

/* Repartition des colonnes. En `table-layout: auto`, la colonne de
   l'horodatage (monospace, insecable en desktop) rafle sinon plus de place que
   la mesure, qui est le contenu utile. */
.preuve-tableau th:first-child { width: 28%; }
.preuve-tableau td:nth-child(2) { width: 12%; }
.preuve-tableau td:nth-child(3) { width: 41%; }
.preuve-tableau td:nth-child(4) { width: 19%; }

.preuve-cadence td:nth-child(1) { width: 22%; }
.preuve-cadence td:nth-child(2) { width: 38%; }
.preuve-cadence td:nth-child(3) { width: 20%; }
.preuve-cadence td:nth-child(4) { width: 20%; }

/* La cle technique de la preuve, sous son enonce : sert a relier une ligne de
   la page a une cle du JSON produit par outils/preuves.mjs. */
.preuve-cle {
  display: block;
  margin-top: .25rem;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--text-muted);
}

/* L'horodatage de chaque mesure : etroit, monospace, d'un seul tenant. */
.doc .preuve-quand {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* En 390 px le tableau defile dans .doc-table (overflow-x: auto de doc.css) :
   c'est l'intention d'origine de la feuille, et la PAGE, elle, ne deborde pas
   (document.documentElement.scrollWidth = 390, mesure). Laisser l'horodatage
   se couper reduit ce defilement interne, pour un confort de lecture au pouce
   nettement meilleur. */
@media (max-width: 640px) {
  .doc .preuve-quand {
    white-space: normal;
  }
}

/* Cadence de verification (tache 4) : le mecanisme est public, l'etat ne l'est
   pas. Meme silhouette que .doc-table, sans les pastilles. */
.doc .preuve-cadence td:first-child {
  font-weight: 600;
}