/* =========================================================================
   Charte — La Petite Boîte IA
   =========================================================================

   Les JETONS de `landing/` traversent, le MÉCANISME non (D34).

   `landing/` est un fichier HTML unique dont toute la mise en forme vient de
   `cdn.tailwindcss.com` — le CDN qui compile les classes DANS LE NAVIGATEUR —
   plus Inter chez Google Fonts. Reprendre ça ferait dépendre chaque chargement
   d'une page d'administration authentifiée de deux tiers réseau, dans un dépôt
   dont toute la discipline est de tourner hors ligne. Ce qui traverse est donc
   une valeur hexadécimale, jamais un fragment de balisage.

   Zéro build, zéro CDN, zéro JavaScript de mise en forme.

   ⚠️ Aucun thème sombre. `landing/` n'en a pas — zéro `prefers-color-scheme` —
   et les surfaces sombres qu'il porte sont un vocabulaire décoratif, pas un
   mode. Nommé comme non construit, pas comme oublié.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Inter, auto-hébergée. UN fichier, et c'est un constat, pas une économie.

   Google Fonts sert Inter en police VARIABLE : les cinq blocs @font-face qu'il
   déclare pour les graisses 400 à 800 pointent tous vers le même woff2 —
   vérifié par empreinte, les cinq téléchargements rendent le même fichier au
   même octet. Les recopier tels quels aurait embarqué 48 Kio cinq fois.

   Sous-ensemble `latin` seul : l'interface est en français. Les six autres
   sous-ensembles (cyrillique, grec, vietnamien, extensions) sont un poids
   qu'on transporterait sans l'avoir choisi.

   `font-display: swap` : le texte s'affiche immédiatement dans la pile de
   repli, puis bascule. Une interface de gouvernance ne doit pas rester muette
   parce qu'une police charge.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800; /* variable — une seule ressource pour toute l'échelle */
  font-display: swap;
  src: url("/static/polices/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Accent (« brain » dans landing/) ---------------------------------- */
  --accent-50: #eef2ff;
  --accent-100: #e0e7ff;
  --accent-200: #c7d2fe;
  --accent-400: #818cf8; /* indigo-400 — le logo du pied de landing/ */
  --accent-500: #6366f1;
  --accent-600: #4f46e5;
  --accent-700: #4338ca;

  /* --- Neutres (échelle slate de landing/) ------------------------------- */
  --neutre-50: #f8fafc;
  --neutre-100: #f1f5f9;
  --neutre-200: #e2e8f0;
  --neutre-300: #cbd5e1;
  --neutre-400: #94a3b8;
  --neutre-500: #64748b;
  --neutre-600: #475569;
  --neutre-700: #334155;
  --neutre-800: #1e293b;
  --neutre-900: #0f172a;

  /* --- Sémantique -------------------------------------------------------- */
  /* `landing/` ne porte que le positif (emerald-500). Les trois autres sont
     nécessaires ici et n'existent pas là-bas : une interface commerciale n'a
     ni avertissement, ni refus, ni état neutre à montrer. Choisis dans les
     mêmes échelles Tailwind pour rester du même monde. */
  --positif: #10b981; /* emerald-500 — relevé dans landing/ */
  --positif-fond: #ecfdf5;
  --attention: #d97706; /* amber-600 */
  --attention-fond: #fffbeb;
  --refus: #dc2626; /* red-600 */
  --refus-fond: #fef2f2;
  --neutre-fond: var(--neutre-100);

  /* --- Typographie ------------------------------------------------------- */
  /* La pile de repli est RÉELLE, pas décorative : si le woff2 ne charge pas,
     l'interface reste lisible dans une police système sur les trois systèmes. */
  --police: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --police-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --taille-xs: 0.75rem;
  --taille-sm: 0.875rem;
  --taille-base: 1rem;
  --taille-lg: 1.125rem;
  --taille-xl: 1.25rem;
  --taille-2xl: 1.5rem;
  --taille-3xl: 1.875rem;

  /* --- Rayons (échelle de landing/) -------------------------------------- */
  --rayon-lg: 8px;
  --rayon-xl: 12px;
  --rayon-2xl: 16px;
  --rayon-3xl: 24px;
  --rayon-plein: 9999px;

  /* --- Ombres ------------------------------------------------------------ */
  --ombre-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --ombre-md: 0 4px 6px -1px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.1);
  --ombre-lg: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);
  /* L'ombre teintée des appels à l'action, relevée dans landing/ */
  --ombre-accent: 0 10px 15px -3px rgb(99 102 241 / 0.25);

  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-6: 1.5rem;
  --espace-8: 2rem;
  --largeur-max: 76rem;
}

/* =========================================================================
   Socle
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--taille-base);
  line-height: 1.6;
  color: var(--neutre-700);
  background: var(--neutre-50);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  color: var(--neutre-900);
  letter-spacing: -0.02em; /* tracking-tight sur les titres, comme landing/ */
  line-height: 1.25;
  margin: 0 0 var(--espace-3);
}

h1 {
  font-size: var(--taille-3xl);
  font-weight: 800;
}
h2 {
  font-size: var(--taille-xl);
  font-weight: 700;
}
h3 {
  font-size: var(--taille-base);
  font-weight: 600;
}

a {
  color: var(--accent-600);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Une interface d'administration se parcourt au clavier. Un focus invisible
   rend l'outil inutilisable sans souris, et personne ne s'en aperçoit en le
   testant à la souris. */
:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 2px;
  border-radius: var(--rayon-lg);
}

/* =========================================================================
   Coquille : navigation unique, périmètre toujours visible (D37, règle 3)
   ========================================================================= */

.coquille {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.entete {
  background: #fff;
  border-bottom: 1px solid var(--neutre-200);
  position: sticky;
  top: 0;
  z-index: 10;
}

.entete__barre {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--espace-3) var(--espace-6);
  display: flex;
  align-items: center;
  gap: var(--espace-4);
  flex-wrap: wrap;
}

/* La marque de landing/ : `font-bold text-xl tracking-tight text-slate-900`,
   et un lien qui ne se souligne JAMAIS — ni au repos, ni au survol. */
.marque,
.marque:hover {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-3);
  font-size: var(--taille-xl);
  font-weight: 700;
  color: var(--neutre-900);
  letter-spacing: -0.025em;
  text-decoration: none;
}

.marque__pastille {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--rayon-xl);
  background: var(--accent-50);
  border: 1px solid var(--accent-100);
  color: var(--accent-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombre-sm);
}

/* La navigation est UNE, toujours au même endroit, et ses entrées ne bougent
   pas d'un écran à l'autre. C'est la première chose qu'on réapprend quand elle
   change, et la première qu'on n'a pas à réapprendre quand elle ne change pas. */
.navigation {
  display: flex;
  gap: var(--espace-1);
  flex-wrap: wrap;
}

.navigation__entree {
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-lg);
  color: var(--neutre-600);
  font-size: var(--taille-sm);
  font-weight: 500;
}

.navigation__entree:hover {
  background: var(--neutre-100);
  color: var(--neutre-900);
  text-decoration: none;
}

.navigation__entree[aria-current="page"] {
  background: var(--accent-50);
  color: var(--accent-700);
  font-weight: 600;
}

/* Le compteur d'une file : un nombre à côté de son entrée, jamais une pastille
   rouge nue. « 3 » ne dit rien ; « 3 à valider » dit ce qui attend. */
.navigation__compte {
  display: inline-block;
  margin-left: var(--espace-2);
  padding: 0 var(--espace-2);
  border-radius: var(--rayon-plein);
  background: var(--accent-600);
  color: #fff;
  font-size: var(--taille-xs);
  font-weight: 700;
}

/* --- Fil d'ariane du périmètre ------------------------------------------
   ⚠️ La confusion la plus coûteuse de cet outil est de ne pas savoir dans quel
   périmètre on écrit. Le fil montre la gouvernance (individu/équipe/
   organisation), JAMAIS l'étiquette d'organigramme (département/service), qui
   est informative et ne décide d'aucune visibilité. */
.perimetre {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-1) var(--espace-3);
  border-radius: var(--rayon-plein);
  background: var(--neutre-100);
  border: 1px solid var(--neutre-200);
  font-size: var(--taille-xs);
  color: var(--neutre-600);
}

.perimetre__nom {
  font-weight: 600;
  color: var(--neutre-900);
}

.perimetre__separateur {
  color: var(--neutre-400);
}

.contenu {
  flex: 1;
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--espace-8) var(--espace-6);
}

/* Le pied de landing/ : `bg-slate-900`, logo `text-brain-400`. */
.pied {
  background: var(--neutre-900);
  border-top: 1px solid var(--neutre-800);
  padding: var(--espace-6);
  font-size: var(--taille-xs);
  color: var(--neutre-400);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-3);
}

.pied__logo {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rayon-lg);
  background: rgb(99 102 241 / 0.2);
  border: 1px solid rgb(99 102 241 / 0.3);
  color: var(--accent-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pied__signature {
  color: var(--neutre-300);
  font-weight: 600;
}

/* T138 — les documents légaux, à la suite de la signature ; passent à la ligne
   en entier sur un écran étroit. */
.pied {
  flex-wrap: wrap;
}

.pied__legal {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--espace-4);
}

.pied__legal a {
  color: var(--neutre-400);
  text-decoration: underline;
}

.pied__legal a:hover {
  color: var(--neutre-200);
}

/* =========================================================================
   Badge-pastille — la forme de landing/, déclinée par statut (D37, règle 5)
   ========================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-1) var(--espace-3);
  border-radius: var(--rayon-plein);
  font-size: var(--taille-xs);
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--rayon-plein);
  background: currentColor;
  flex: none;
}

/* Les six statuts. La correspondance est EXHAUSTIVE et un test la compare à
   l'énumération dans les deux sens : un statut ajouté sans son badge fait
   échouer la suite plutôt que de s'afficher sans couleur. */
/* `brouillon` est un vrai statut de l'énumération, pas un état d'écran : un
   brouillon MCP existe en base, avec sa péremption. L'oublier au motif qu'on ne
   le montre pas encore ferait échouer la comparaison bilatérale — c'est ce
   qu'elle est là pour faire. */
.badge--brouillon {
  background: var(--neutre-50);
  border-color: var(--neutre-200);
  color: var(--neutre-500);
}
.badge--candidat {
  background: var(--attention-fond);
  border-color: #fde68a;
  color: var(--attention);
}
.badge--valide {
  background: var(--positif-fond);
  border-color: #a7f3d0;
  color: #047857;
}
.badge--remplace {
  background: var(--neutre-100);
  border-color: var(--neutre-200);
  color: var(--neutre-600);
}
.badge--rejete {
  background: var(--refus-fond);
  border-color: #fecaca;
  color: var(--refus);
}
.badge--caviarde {
  background: var(--neutre-800);
  border-color: var(--neutre-900);
  color: var(--neutre-100);
}

/* ⚠️ Il n'y a PAS de badge « en conflit », et c'est voulu : `en_conflit` n'est
   pas un statut. Un fait pris dans un conflit non résolu garde son statut et se
   signale autrement — par la ligne dépliable qui porte le conflit. En faire un
   septième badge inventerait une valeur que la machine à états ne connaît pas. */

/* =========================================================================
   Carte à icône — transposée de landing/, réécrite, sans un mot de son texte
   ========================================================================= */

.carte {
  background: #fff;
  border: 1px solid var(--neutre-200);
  border-radius: var(--rayon-2xl);
  padding: var(--espace-6);
  box-shadow: var(--ombre-sm);
}

.carte + .carte {
  margin-top: var(--espace-4);
}

.carte__icone {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--rayon-xl);
  background: var(--accent-50);
  border: 1px solid var(--accent-100);
  color: var(--accent-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--espace-3);
}

.carte__titre {
  font-size: var(--taille-base);
  font-weight: 600;
  color: var(--neutre-900);
  margin: 0 0 var(--espace-1);
}

.carte__detail {
  font-size: var(--taille-sm);
  color: var(--neutre-500);
  margin: 0;
}

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--espace-4);
}

/* Dans une grille, l'écart est celui de la grille : la marge d'empilement
   décalerait la deuxième carte d'une ligne. */
.grille > .carte + .carte {
  margin-top: 0;
}

/* Le chiffre en gros, à la place de l'icône (second retour). */
.indicateur__chiffre {
  font-size: var(--taille-3xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--neutre-900);
  margin: 0 0 var(--espace-2);
}

.indicateur__chiffre a {
  color: inherit;
}

/* =========================================================================
   Tableau à colonne accentuée
   ========================================================================= */

.tableau {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--neutre-200);
  border-radius: var(--rayon-2xl);
  overflow: hidden;
  font-size: var(--taille-sm);
}

.tableau th {
  text-align: left;
  padding: var(--espace-3) var(--espace-4);
  background: var(--neutre-50);
  border-bottom: 1px solid var(--neutre-200);
  color: var(--neutre-600);
  font-size: var(--taille-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tableau td {
  padding: var(--espace-3) var(--espace-4);
  border-bottom: 1px solid var(--neutre-100);
  vertical-align: top;
}

.tableau tr:last-child td {
  border-bottom: none;
}

/* La colonne dominante d'un tableau — le SAVOIR, quelle que soit sa position.
 *
 * ⚠️ **Le filet de gauche a été retiré en T103, et l'accent n'a rien perdu.**
 * Il n'a jamais été ancré par position : la classe suit la cellule « Savoir »,
 * et elle l'a suivie quand T101 l'a déplacée en troisième colonne. C'est
 * justement ce qui l'a rendu faux — un `border-left` au bord de la ligne se lit
 * comme un accent, le même filet au milieu du tableau se lit comme un
 * séparateur de colonnes. L'aspect d'avant tenait donc à une COÏNCIDENCE de
 * position, pas à une intention de marquer la ligne : le rétablir en déplaçant
 * le filet sur la première cellule aurait recréé l'apparence en perdant le
 * sens. L'accent marque la colonne, et il le fait par la graisse et la couleur. */
.tableau__accent {
  font-weight: 600;
  color: var(--neutre-900);
}

/* --- D61 : une ligne entière est un lien, sans JavaScript -----------------
   Le motif du « lien étiré » : le savoir est un vrai <a>, et son ::after couvre
   la ligne. Clavier et lecteur d'écran lisent le savoir comme texte du lien,
   plutôt que « Ouvrir » répété à chaque ligne. Ce qui doit rester cliquable
   seul — la case à cocher du lot — passe au-dessus. */
.ligne-lien {
  position: relative;
}

.ligne-lien:hover td {
  background: var(--neutre-50);
}

.ligne-lien__cible,
.ligne-lien__cible:hover {
  color: inherit;
  text-decoration: none;
}

.ligne-lien__cible::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ligne-lien__au-dessus {
  position: relative;
  z-index: 1;
}

/* =========================================================================
   Ligne dépliable — `<details>` natif, zéro JavaScript

   C'est la primitive que la spécification exige pour l'arbitrage : « un conflit
   ne se valide jamais depuis une simple ligne de liste, mais l'exigence se
   tient par une ligne dépliable […] sans changer d'écran ». `landing/` la porte
   déjà en `<details>/<summary>`, et c'est tout l'« état riche » qu'une SPA
   aurait acheté ici.
   ========================================================================= */

.depliable {
  background: #fff;
  border: 1px solid var(--neutre-200);
  border-radius: var(--rayon-xl);
  margin-bottom: var(--espace-3);
}

.depliable > summary {
  cursor: pointer;
  padding: var(--espace-3) var(--espace-4);
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  font-weight: 500;
  color: var(--neutre-800);
  list-style: none;
}

.depliable > summary::-webkit-details-marker {
  display: none;
}

.depliable > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--neutre-400);
  transition: transform 0.15s;
}

.depliable[open] > summary::after {
  transform: rotate(180deg);
}

.depliable[open] > summary {
  border-bottom: 1px solid var(--neutre-100);
}

.depliable__corps {
  padding: var(--espace-4);
}

/* Un bloc à recopier — configuration, commande (T99).
 *
 * ⚠️ Il DÉBORDE horizontalement plutôt que d'élargir la page : un bloc JSON
 * plus large que la colonne repousserait la liste des clés hors de l'écran, sur
 * une surface qu'on ouvre d'abord pour révoquer. `copier.js` pose son bouton à
 * côté ; sans JavaScript, le texte reste sélectionnable à la main. */
.bloc-code {
  margin: var(--espace-2) 0;
  padding: var(--espace-3) var(--espace-4);
  background: var(--neutre-900);
  color: var(--neutre-100);
  border-radius: var(--rayon-lg);
  font-family: var(--police-mono);
  font-size: var(--taille-xs);
  line-height: 1.6;
  overflow-x: auto;
}

.liste-chemins {
  margin: var(--espace-2) 0;
  padding-left: var(--espace-6);
  font-size: var(--taille-sm);
  color: var(--neutre-700);
}

/* =========================================================================
   Formulaires — absents de landing/, conçus ici (D34)
   ========================================================================= */

.champ {
  display: block;
  margin-bottom: var(--espace-4);
}

.champ__libelle {
  display: block;
  font-size: var(--taille-sm);
  font-weight: 600;
  color: var(--neutre-700);
  margin-bottom: var(--espace-1);
}

/* Le texte qui explique ce que le champ fait, sous le libellé et avant la
   saisie — D37, règle 1 : l'effet se nomme AVANT que le geste soit posé. */
.champ__aide {
  display: block;
  font-size: var(--taille-xs);
  color: var(--neutre-500);
  margin-bottom: var(--espace-2);
  font-weight: 400;
}

.champ__saisie,
.champ select,
.champ textarea {
  width: 100%;
  padding: var(--espace-2) var(--espace-3);
  border: 1px solid var(--neutre-300);
  border-radius: var(--rayon-lg);
  font: inherit;
  font-size: var(--taille-sm);
  color: var(--neutre-900);
  background: #fff;
}

.champ__saisie:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--accent-500);
  outline: 2px solid var(--accent-100);
  outline-offset: 0;
}

.champ__erreur {
  display: block;
  font-size: var(--taille-xs);
  color: var(--refus);
  margin-top: var(--espace-1);
  font-weight: 500;
}

/* =========================================================================
   Boutons
   ========================================================================= */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  padding: var(--espace-2) var(--espace-4);
  border-radius: var(--rayon-lg);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--taille-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
}

.bouton--principal {
  background: var(--accent-600);
  color: #fff;
  box-shadow: var(--ombre-accent);
}
.bouton--principal:hover {
  background: var(--accent-700);
  text-decoration: none;
}

/* L'indigo des boutons de landing/ — « Se déconnecter », sur demande du second
   retour. */
.bouton--marque {
  background: var(--accent-600);
  color: #fff;
}
.bouton--marque:hover {
  background: var(--accent-700);
  text-decoration: none;
}

.bouton--discret {
  background: #fff;
  border-color: var(--neutre-300);
  color: var(--neutre-700);
}
.bouton--discret:hover {
  background: var(--neutre-50);
  text-decoration: none;
}

/* Un acte irréversible ne porte pas la couleur d'un acte ordinaire. Caviarder
   détruit du contenu ; arbitrer refuse tout rejeu. La couleur ne remplace pas
   la phrase d'effet, elle la double. */
.bouton--irreversible {
  background: #fff;
  border-color: #fecaca;
  color: var(--refus);
}
.bouton--irreversible:hover {
  background: var(--refus-fond);
  text-decoration: none;
}

.bouton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.actions {
  display: flex;
  gap: var(--espace-2);
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================================
   Encart d'explication — D37, règle 1. N'existe pas dans landing/.

   Chaque action nomme son effet AVANT d'être prise, en une phrase, jamais
   après ni dans une confirmation nue du type « Êtes-vous sûr ? ». Le produit
   n'a pas à inventer ces phrases : le commentaire du DDL les écrit déjà.
   ========================================================================= */

.encart {
  border-radius: var(--rayon-xl);
  padding: var(--espace-3) var(--espace-4);
  font-size: var(--taille-sm);
  border: 1px solid;
  margin-bottom: var(--espace-4);
}

.encart__titre {
  font-weight: 600;
  margin: 0 0 var(--espace-1);
}

.encart p {
  margin: 0;
}

.encart--effet {
  background: var(--accent-50);
  border-color: var(--accent-100);
  color: var(--accent-700);
}
.encart--attention {
  background: var(--attention-fond);
  border-color: #fde68a;
  color: #92400e;
}
.encart--refus {
  background: var(--refus-fond);
  border-color: #fecaca;
  color: #991b1b;
}
.encart--positif {
  background: var(--positif-fond);
  border-color: #a7f3d0;
  color: #065f46;
}

/* =========================================================================
   États vides — D37, règle 4. N'existent pas dans landing/.

   ⚠️ « Aucun fait à valider dans ce périmètre » et « vous ne pouvez pas lire ce
   périmètre » sont DEUX écrans, pas un. C'est l'application directe du point de
   vigilance le plus sévère du projet : zéro résultat et « je n'ai rien
   regardé » produisent la même sortie.
   ========================================================================= */

.vide {
  text-align: center;
  padding: var(--espace-8) var(--espace-6);
  background: #fff;
  border: 1px dashed var(--neutre-300);
  border-radius: var(--rayon-2xl);
}

.vide__titre {
  font-weight: 600;
  color: var(--neutre-800);
  margin: 0 0 var(--espace-2);
}

.vide__explication {
  font-size: var(--taille-sm);
  color: var(--neutre-500);
  margin: 0 auto;
  max-width: 40rem;
}

/* La variante qui dit « vous ne pouvez pas lire ici » — visuellement distincte
   de « il n'y a rien ici », pour qu'on ne les confonde pas d'un coup d'œil. */
.vide--hors-perimetre {
  border-style: solid;
  border-color: #fde68a;
  background: var(--attention-fond);
}

/* =========================================================================
   Divers
   ========================================================================= */

.filtres {
  display: flex;
  gap: var(--espace-3);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--espace-4);
}

.filtres .champ {
  margin-bottom: 0;
}

.entete-page {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espace-4);
  flex-wrap: wrap;
  margin-bottom: var(--espace-6);
}

.entete-page__explication {
  font-size: var(--taille-sm);
  color: var(--neutre-500);
  margin: 0;
  max-width: 52rem;
}

.discret {
  color: var(--neutre-500);
  font-size: var(--taille-xs);
}

.mono {
  font-family: var(--police-mono);
  font-size: var(--taille-xs);
}

/* Le clair d'un secret : affiché une fois, et l'écran le dit. */
.secret-en-clair {
  font-family: var(--police-mono);
  font-size: var(--taille-sm);
  background: var(--neutre-900);
  color: var(--neutre-100);
  padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-lg);
  word-break: break-all;
}

/* Réservé aux lecteurs d'écran : un libellé que l'œil n'a pas besoin de lire
   mais qu'une synthèse vocale doit annoncer. */
.pour-lecteur-decran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================================
   Rail de navigation — le menu latéral, après le premier test utilisateur

   ⚠️ Le périmètre courant descend ICI, sous la marque. La contrainte de D37
   est sa PRÉSENCE permanente, pas sa position : dans le rail il est plus
   visible qu'en header, où il partageait sa ligne avec six onglets.
   ========================================================================= */

.corps {
  display: flex;
  flex: 1;
  align-items: flex-start;
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  gap: var(--espace-6);
  padding: 0 var(--espace-6);
}

.rail {
  flex: none;
  width: 15rem;
  padding: var(--espace-6) 0;
  position: sticky;
  top: 4rem;
}

.rail__perimetre {
  padding: var(--espace-3);
  margin-bottom: var(--espace-4);
  border-radius: var(--rayon-xl);
  background: var(--neutre-100);
  border: 1px solid var(--neutre-200);
  font-size: var(--taille-xs);
  color: var(--neutre-600);
  line-height: 1.5;
}

/* ⚠️ « Vous travaillez dans » était déjà là, en petites capitales grises
   (`--neutre-400` sur `--neutre-100`) : le second retour a demandé de l'AJOUTER,
   c'est-à-dire qu'il ne se voyait pas. Lisible plutôt que dupliqué. */
.rail__etiquette {
  display: block;
  font-size: var(--taille-sm);
  font-weight: 600;
  color: var(--neutre-600);
  margin-bottom: var(--espace-1);
}

.rail__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail__entree {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-lg);
  color: var(--neutre-600);
  font-size: var(--taille-sm);
  font-weight: 500;
}

.rail__entree:hover {
  background: var(--neutre-100);
  color: var(--neutre-900);
  text-decoration: none;
}

.rail__entree[aria-current="page"] {
  background: var(--accent-50);
  color: var(--accent-700);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent-600);
}

.rail__icone {
  flex: none;
  width: 1.25rem;
  text-align: center;
}

.contenu {
  flex: 1;
  min-width: 0; /* sans quoi un tableau large pousse le rail hors de l'écran */
  padding: var(--espace-8) 0;
}

/* Le profil, à droite du header libéré. */
.profil {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--espace-3);
}

.profil__role {
  font-size: var(--taille-xs);
  color: var(--neutre-500);
}

/* --- Fil d'Ariane interne ------------------------------------------------
   Situer une fiche dans l'arborescence, pour qu'on en revienne sans le bouton
   « Précédent » du navigateur. C'est le point 6 du parcours de contrôle. */
.fil {
  font-size: var(--taille-xs);
  color: var(--neutre-500);
  margin-bottom: var(--espace-4);
}

.fil a {
  color: var(--neutre-600);
}

.fil__separateur {
  margin: 0 var(--espace-2);
  color: var(--neutre-300);
}

/* --- Bloc comparatif A/B -------------------------------------------------
   Deux versions côte à côte. ⚠️ Elles ne doivent PAS se ressembler : « en
   vigueur » et « proposé » sont deux choses qu'un arbitre doit distinguer sans
   lire l'étiquette. */
.versus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--espace-3);
  margin-bottom: var(--espace-4);
}

.version {
  border: 1px solid var(--neutre-200);
  border-radius: var(--rayon-xl);
  padding: var(--espace-3);
  background: #fff;
}

.version--premiere {
  border-color: #a7f3d0;
  background: var(--positif-fond);
}

.version--proposee {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.version__etiquette {
  display: block;
  font-size: var(--taille-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--espace-2);
}

.version--premiere .version__etiquette {
  color: #047857;
}
.version--proposee .version__etiquette {
  color: var(--accent-700);
}

/* D67 — le statut RÉEL de chaque version, à côté de son étiquette. */
.version__statut {
  display: block;
  font-size: var(--taille-xs);
  color: var(--neutre-500);
  margin-top: 2px;
}

/* D65 — une divergence est UN bloc : sa nature en tête, puis ses deux versions. */
.divergence {
  margin-bottom: var(--espace-4);
}

.divergence__nature {
  font-size: var(--taille-sm);
  font-weight: 600;
  color: var(--neutre-700);
  margin: 0 0 var(--espace-3);
}

/* D68 — l'attente d'une divergence, à droite de sa nature. */
.divergence__nature {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-2);
}

.divergence__attente {
  font-weight: 500;
  color: var(--attention);
}

/* T103 — le contexte structuré d'une divergence : chez qui, et sur quoi.
 * Même ordre et même traitement que les deux tableaux (T101) : le périmètre
 * lisible, le sujet en retrait. Sans lui, deux conflits homonymes de deux
 * équipes se lisaient exactement pareil sur l'écran où l'on tranche. */
.divergence__contexte {
  margin: 0 0 var(--espace-3);
  font-size: var(--taille-sm);
  color: var(--neutre-700);
}

/* D68 — les trois vues de la file, en tête. */
.filtres-file {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
  margin-bottom: var(--espace-6);
}

.filtres-file__vue {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-1) var(--espace-3);
  border-radius: var(--rayon-plein);
  border: 1px solid var(--neutre-200);
  background: #fff;
  color: var(--neutre-700);
  font-size: var(--taille-sm);
  font-weight: 500;
}

.filtres-file__vue:hover {
  text-decoration: none;
  background: var(--neutre-50);
}

.filtres-file__vue[aria-current="page"] {
  background: var(--accent-50);
  border-color: var(--accent-200);
  color: var(--accent-700);
  font-weight: 600;
}

.version__contenu {
  font-size: var(--taille-sm);
  color: var(--neutre-900);
  margin: 0 0 var(--espace-2);
}

.version__meta {
  font-size: var(--taille-xs);
  color: var(--neutre-500);
  margin: 0;
}

/* --- Sous 900 px, le rail redevient une barre ---------------------------
   Un rail fixe de 15 rem sur un écran de 800 px mange l'écran. Il repasse
   horizontal plutôt que de disparaître : une navigation qu'on ne voit plus est
   une navigation qu'on cherche. */
@media (max-width: 900px) {
  .corps {
    flex-direction: column;
    gap: 0;
  }

  .rail {
    width: 100%;
    position: static;
    padding: var(--espace-4) 0 0;
  }

  .rail__liste {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .contenu {
    padding-top: var(--espace-4);
  }
}

/* =========================================================================
   Contenu d'un savoir, selon sa nature (D70)
   Une liste de définitions : le libellé d'une section, puis ce qu'elle porte.
   Remplace le `<pre>` qui déversait la représentation brute de `contenu`.
   ========================================================================= */

.contenu-savoir {
  margin: var(--espace-3) 0 0;
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--espace-2) var(--espace-4);
  font-size: var(--taille-sm);
}

.contenu-savoir__libelle {
  font-weight: 600;
  color: var(--neutre-600);
}

.contenu-savoir__valeur {
  margin: 0;
  color: var(--neutre-800);
}

.contenu-savoir__valeur ol,
.contenu-savoir__valeur ul {
  margin: 0;
  padding-left: var(--espace-6);
}

.contenu-savoir__mention {
  margin: var(--espace-3) 0 0;
  font-size: var(--taille-xs);
  color: var(--attention);
}

/* La nature d'un savoir, en clair, à côté de son statut. */
.nature {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--espace-2);
  border-radius: var(--rayon-plein);
  background: var(--neutre-100);
  color: var(--neutre-600);
  font-size: var(--taille-xs);
  font-weight: 600;
}

@media (max-width: 600px) {
  .contenu-savoir {
    grid-template-columns: 1fr;
  }
}