/* Documentation SMSI — mise en page « document », posee sur les jetons du
   site (public/tokens.css). Pas de rail lateral : ces pages se lisent comme
   des documents, pas comme des ecrans du portfolio. Aucune ressource
   externe, CSP intacte.

   DEPUIS LE SPLIT DES JETONS : ces pages chargent public/tokens.css PUIS ce
   fichier, et plus jamais public/style.css. Ce fichier n'a donc plus de filet
   sous lui : ce qu'il ne declare pas retombe sur les valeurs par defaut du
   navigateur, plus sur l'habillage du portfolio. Voir l'en-tete de
   public/tokens.css pour le pourquoi. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  /* Rapatrie de public/style.css lors du split des jetons. Ces pages s'en
     servaient sans le savoir : leur `ch` et leurs `rem` se calculaient sur ce
     16px, pas sur la taille par defaut du navigateur. La valeur est reprise
     telle quelle pour que ce chantier ne change rien a l'ecran ; qu'un
     document doive au contraire suivre la taille choisie par son lecteur est
     une autre question, a trancher a part et a mesurer. */
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* max-width bornee a 100% (13/09/2026). Avec `max-width: 74ch` seul, il
   suffisait qu'un descendant ait une largeur intrinseque superieure — le
   tableau du registre faisait 3238 px — pour que ce bloc adopte 74ch (638 px)
   au lieu de la largeur du viewport. L'overflow-x: auto de .doc-table se
   calculait alors sur 638 et ne confinait plus rien : les six pages /smsi/
   debordaient horizontalement des 390 px, scrollWidth 638 mesure.

   LA CAUSE, et pourquoi ce n'est PAS `display: block` qui la corrige.
   public/style.css pose `body { display: flex; flex-direction: column }` pour
   le pied de page collant du portfolio, et le `body` ci-dessus ne declare
   aucun `display` : celui de style.css gagne. `.doc` est donc un FLEX ITEM,
   et la largeur d'un flex item se calcule sur son contenu, pas sur son
   conteneur — d'ou la remontee de la largeur minimale des tableaux.

   Poser `display: block` sur `.doc` ne change rien : le `display` d'un flex
   item reste le sien, c'est son DIMENSIONNEMENT que le parent flex impose.
   Mesure du 13/09/2026, sur les cinq pages a tableau, en 390 px : avec ou
   sans `display: block`, scrollWidth = 390 et tableaux a 355 px, a
   l'identique. La valeur calculee de `.doc` est d'ailleurs deja `block`.
   La regle a donc ete proposee (PR #53) puis retiree : elle est inerte.
   Ne pas la remettre — seul `body { display: block }` agirait, et il
   casserait le pied de page collant du portfolio.

   Ce qui agit reellement, ce sont deux choses, chacune mesuree :
     - `min(74ch, 100%)` ici        -> scrollWidth 638 => 390
     - `white-space: normal` plus bas -> tableaux 3238 px => 355 px

   Sans effet au-dessus de 74ch : `min(74ch, 100%)` y vaut 74ch, a l'identique.
   Verifie au pixel sur les six pages en 1440x900. */
.doc {
  max-width: min(74ch, 100%);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 6rem;
}

/* --- fil d'ariane et retour --- */
.doc-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: 0 0 2.5rem;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.doc-fil a { color: var(--accent); text-decoration: none; }
.doc-fil a:hover, .doc-fil a:focus-visible { text-decoration: underline; }
.doc-fil span[aria-hidden] { color: var(--border); }

/* --- badge de categorie, meme silhouette que .cat-badge (fiches projet).
   Couleur --cat-conformite en dur : ces pages sont du HTML statique, sans
   les data-category poses par server.js/EJS sur les pages dynamiques.
   Le jeton --cat-* ne sert que de fond et de lisere : en encre il tombe a
   3.88:1 en theme clair (#1f6fd0 sur le fond teinte #dbe5ee), sous le seuil
   de 4.5. Le texte reste --text : 13.64:1 en clair, 12.60:1 en sombre. --- */
.doc-badge {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .2rem .55rem;
  border: 1px solid color-mix(in srgb, var(--cat-conformite) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cat-conformite) 14%, transparent);
  color: var(--text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- titres --- */
.doc h1 {
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.doc .doc-sous {
  margin: 0 0 3rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1.02rem;
}
.doc h2 {
  margin: 3.25rem 0 1rem;
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.doc h3 {
  margin: 2.25rem 0 .7rem;
  /* Explicite, pas herite : sans cette ligne la police des h3 depend d'une
     regle de public/style.css:81 (h1, h2, h3 { font-family: var(--display) }),
     invisible depuis ce fichier. */
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
}

/* --- corps --- */
.doc p { margin: 0 0 1.15rem; }
/* La transition est rapatriee de `a { color: var(--accent); transition }` de
   public/style.css, que ces pages n'heritent plus. La couleur, elle, etait
   deja redeclaree ici : seul le fondu de survol manquait. Meme duree, meme
   courbe, pour que le survol se comporte exactement comme avant le split. */
.doc a { color: var(--accent); transition: color .15s ease; }
/* public/style.css n'a aucune regle generique `a:focus-visible` — les anneaux
   de focus y sont poses composant par composant, et aucun composant du site ne
   couvre ces pages. Les liens de la documentation n'avaient donc que l'anneau
   par defaut du navigateur. Convention du projet : 2 px sur l'accent.
   Le conteneur de tableau est inclus : `overflow-x: auto` le rend focalisable
   au clavier (c'est voulu, un tableau qui defile doit etre atteignable), et il
   doit alors se voir comme le reste. */
.doc a:focus-visible,
.doc-table:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.doc strong { font-weight: 600; color: var(--text); }
.doc ul, .doc ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.doc li { margin-bottom: .5rem; }
.doc li::marker { color: var(--text-muted); }
.doc code {
  font-family: var(--mono);
  font-size: .88em;
  padding: .12em .38em;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* --- citation : la mention d'information RGPD --- */
.doc blockquote {
  margin: 0 0 1.15rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}
.doc blockquote p:last-child { margin-bottom: 0; }

/* --- schema d'ouverture : comment lire la demarche, etape par etape --- */
.doc-flow {
  margin: 0 0 2rem;
}
.doc-flow ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc-flow li {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
}
.doc-flow li:not(:last-child)::after {
  content: '→';
  margin: 0 .6rem;
  color: var(--text-muted);
}
.doc-flow-step {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--text);
}
.doc-flow-tag {
  padding: .1rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Meme regle que .doc-badge : le jeton --cat-* porte le fond et le lisere,
   jamais l'encre. Le lisere remplace le border-color: transparent d'avant,
   pour que la pastille « public » reste distincte sans couleur de texte. */
.doc-flow-tag.is-public {
  border-color: color-mix(in srgb, var(--cat-conformite) 45%, transparent);
  background: color-mix(in srgb, var(--cat-conformite) 14%, transparent);
  color: var(--text);
}
@media (max-width: 640px) {
  .doc-flow ol { flex-direction: column; align-items: flex-start; }
  .doc-flow li { flex-wrap: wrap; }
  .doc-flow li:not(:last-child)::after { content: '↓'; margin: .35rem 0; }
}

/* --- tableaux : ils portent l'essentiel de ces documents --- */

/* INDICE DE DEFILEMENT (13/09/2026).

   POURQUOI. Depuis la PR #53 les tableaux sont confines dans leur conteneur
   au lieu de pousser la page, mais trois des cinq pages a tableau debordent
   encore de la colonne de lecture en 390 px : la Declaration d'Applicabilite
   demande 572 px de largeur minimale pour 355 px disponibles. Le conteneur
   defile (overflow-x ci-dessous) et rien ne le dit au lecteur. Un tableau
   coupe net au bord droit, sans indice, se lit comme un tableau TRONQUE, pas
   comme un tableau qu'on fait glisser.

   COMMENT. Quatre couches de fond, la technique dite « shadow scroll »
   (Roman Komarov, Lea Verou), sans une ligne de JavaScript. Les deux couches
   `local` sont accrochees au CONTENU : elles glissent avec lui et masquent
   l'ombre posee dessous. Les deux couches `scroll` sont accrochees a la
   BOITE : elles restent collees aux bords gauche et droit. Une ombre
   n'apparait donc que du cote ou il reste du contenu, et s'efface quand on
   atteint ce bord. Le tableau qui NE deborde PAS est couvert gratuitement :
   la zone de positionnement d'une couche `local` est la zone de defilement
   (CSS Backgrounds 3, background-attachment: local), qui vaut alors
   exactement la boite — les deux masques (2rem, opaques sur leur premier
   rem) recouvrent alors les deux ombres (.9rem) des le repos.

   LA LIMITE, dite franchement. L'indice ne mesure rien : il fait .9rem que le
   tableau deborde de 7 % ou de 61 %. Sur un debordement de 7 % il est present
   mais discret — c'est un indice, pas un avertissement.

   LES COULEURS sont celles qui existent deja. Les masques reprennent le fond
   reel qui est derriere le tableau ; l'ombre est une teinte de --text-muted,
   le seul jeton neutre defini pour CONTRASTER avec le fond dans les deux
   themes (#9c9ba6 en sombre, #6a6972 en clair). D'ou l'absence de
   redefinition dans le bloc @media du theme clair : elle serait identique.

   LE FOND REEL, justement. public/style.css pose un `table { background:
   var(--surface) }` GLOBAL — meme regle sans selecteur de contexte que le
   `th, td` et le `th` demontes plus bas. Le tableau peint donc un aplat
   opaque sur TOUTE sa largeur de defilement, et un fond pose sur le conteneur
   dormirait derriere lui : ordre de peinture, un descendant passe apres le
   fond de son ancetre. L'aplat est donc deplace tel quel sur le conteneur qui
   defile, et le tableau rendu transparent (voir `.doc table` juste apres).
   Meme couleur, meme boite, rendu identique — mais les quatre couches sont
   desormais au-dessus de lui au lieu d'etre enterrees dessous.

   Rien n'est anime ici : aucune garde prefers-reduced-motion a poser. Et rien
   n'ajoute de padding, de bordure, ni ne change le display : la mise en page
   est exactement celle d'avant. */
.doc-table {
  overflow-x: auto;
  margin: 0 0 1.6rem;
  background-color: var(--surface);
  background-image:
    /* 1-2 : les masques, accroches au contenu */
    linear-gradient(to right, var(--surface) 50%, transparent),
    linear-gradient(to left, var(--surface) 50%, transparent),
    /* 3-4 : les ombres, accrochees aux bords de la boite */
    linear-gradient(to right, color-mix(in srgb, var(--text-muted) 42%, transparent), transparent),
    linear-gradient(to left, color-mix(in srgb, var(--text-muted) 42%, transparent), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 2rem 100%, 2rem 100%, .9rem 100%, .9rem 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  /* L'aplat --surface est passe au conteneur qui defile, ci-dessus. Sans ce
     transparent, le tableau recouvrirait les quatre couches de l'indice. */
  background: transparent;
}
.doc th, .doc td {
  padding: .7rem .85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  /* Remise a zero du `th, td { white-space: nowrap }` de public/style.css:922 :
     regle ecrite pour les tableaux denses de /admin, mais sans selecteur de
     contexte, donc appliquee a TOUS les tableaux du site. Sur ces pages de
     documentation, aucune cellule ne revenait a la ligne. Largeur minimale de
     tableau mesuree avant correction : 1221 px (Declaration d'Applicabilite),
     1293 (analyse de risques), 1342 (perimetre), 2106 (audit interne) et
     3238 px (registre RGPD), pour une colonne de lecture de 355 px. */
  white-space: normal;
}
/* Les en-tetes de COLONNE, eux, restent d'un seul tenant : ils sont courts, et
   c'est l'intention d'origine de la regle ci-dessous. Le selecteur precise
   `thead` parce que la meme typographie appliquee a un `th scope="row"`
   reduirait l'intitule de la ligne a des petites capitales ambre illisibles.
   Aucun `th` hors `thead` n'existe aujourd'hui dans ces documents : la
   restriction est donc sans effet visible, et previent le cas suivant. */
.doc thead th {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom-color: var(--accent);
  white-space: nowrap;
}
/* En-tete de LIGNE : typographie du corps, filet neutre.
   La remise a zero est EXPLICITE et porte sur quatre proprietes, pas sur la
   seule couleur. public/style.css pose un `th { }` GLOBAL — sans selecteur de
   contexte — qui impose text-transform: uppercase, font-size: .78rem et
   color: var(--text-muted) a tous les `th` du site. Ecrit pour des en-tetes de
   COLONNE, il rend un `th scope="row"` illisible : une exigence comme
   « Chiffrement en transit (A.8.24) » sortait en petites capitales de 12,48 px.
   Mesure du 13/09/2026 sur /smsi/preuves, avant correction :
   textTransform=uppercase, fontSize=12.48px, letterSpacing=0.624px.
   Ne pas se contenter de `color` : c'est ce que faisait cette regle, et le
   commentaire annonçait deja « typographie du corps » sans la retablir. */
.doc tbody th {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}
/* Meme remise a zero que .doc tbody th, pour un tfoot. Aucun tableau n'en a
   aujourd'hui : le cas est PREVENU, pas constate — le premier tfoot (une ligne
   de total type « 93 mesures / 35 ecartees ») heriterait sinon du `th` global
   de public/style.css:923 et sortirait en petites capitales illisibles. */
.doc tfoot th {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}
/* Transparent, pas --surface : --surface etait invisible ici avant la PR #62,
   qui a pose l'indice de defilement (quatre couches de fond, ci-dessus) sur
   .doc-table. Un survol de ligne peint desormais un aplat OPAQUE par-dessus
   ces couches — le lecteur efface l'indice, ligne par ligne, sous son propre
   curseur, sur les tableaux qui debordent. */
.doc tbody tr:hover { background: transparent; }
/* colonnes de cotation C/I/D : etroites et centrees */
.doc .cote { text-align: center; font-family: var(--mono); font-size: .82rem; white-space: nowrap; }

/* --- encadre d'avertissement --- */
.doc-note {
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: .94rem;
}
.doc-note p:last-child { margin-bottom: 0; }

/* --- sommaire de l'index --- */
.doc-sommaire { list-style: none; margin: 0; padding: 0; }
.doc-sommaire li { margin-bottom: .85rem; }
.doc-sommaire a {
  display: block;
  padding: 1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color .2s ease, background .2s ease;
}
.doc-sommaire a:hover, .doc-sommaire a:focus-visible {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
}
.doc-sommaire b { display: block; font-weight: 600; margin-bottom: .2rem; }
.doc-sommaire span { color: var(--text-muted); font-size: .92rem; }

/* --- pied --- */
.doc-pied {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--text-muted);
}
.doc-pied a { color: var(--accent); }

@media (max-width: 640px) {
  .doc { padding: 2.25rem 1.1rem 4rem; }
  .doc table { font-size: .84rem; }
  .doc th, .doc td { padding: .55rem .6rem; }
}