:root {
  --model-ink: #06172d;
  --model-muted: #526174;
  --model-paper: #f7f4ed;
  --model-surface: #fff;
  --model-green: #286a4d;
  --model-line: #d8dee6;
  --model-orange: #b45309;
  --model-violet: #6d28d9;
  --model-contested: #be123c;
}
/* Mode sombre — MESURÉ le 10/09/2026 (conf-S80) : le chrome du site injecte
   dark-mode.css, qui recolore le texte en #e8e4dc, pendant que cette page
   gardait ses surfaces blanches. Résultat servi : texte quasi blanc sur fond
   blanc, contraste ~1,15:1, sur toute la page et pas seulement sur les blocs
   ajoutés. Les jetons suivent la classe posée par dark-mode.js, jamais une
   media query parallèle, sinon la bascule du site et celle de la page se
   contrediraient. */
html.dark-mode, body.dark-mode {
  --model-ink: #e8e4dc;
  --model-muted: #a8b2bf;
  --model-paper: #161a20;
  --model-surface: #1f242c;
  --model-line: #39414c;
  --model-green: #6ee7b7;
  --model-orange: #fbbf24;
  --model-violet: #c4b5fd;
  --model-contested: #fda4af;
}
body.dark-mode .model-graph { background: #12161c; }
body.dark-mode .epistemic { background: #17251f; }
body.dark-mode .evidence { background: #232a33; }
body.dark-mode .orphan-note, body.dark-mode .evidence-gap { background: #2c2118; color: #fcd9b6; }
body.dark-mode .node-code { background: #0b0e12; }
body.dark-mode .prototype-flag { background: #2c2118; color: #fbbf24; }
body.dark-mode .status-valide { background: #14532d; color: #dcfce7; }
body.dark-mode .status-hypothese { background: #4a3410; color: #fde68a; }
body.dark-mode .status-speculatif { background: #4a2a12; color: #fed7aa; }
body.dark-mode .status-conteste { background: #4c1d29; color: #fecdd3; }
body.dark-mode .status-n1 { background: #33206b; color: #e9d5ff; }
body.dark-mode .evidence-consolide { background: #14532d; color: #dcfce7; }
body.dark-mode .evidence-etaye { background: #0c4a6e; color: #e0f2fe; }
body.dark-mode .evidence-preliminaire { background: #4a3410; color: #fde68a; }
body.dark-mode .evidence-exploratoire { background: #33206b; color: #e9d5ff; }
body.dark-mode .size-dot, body.dark-mode .fill-dot { border-color: #cbd5e1; }
body.dark-mode .fill-forte { background: #cbd5e1; }
body.dark-mode .fill-faible { background: repeating-linear-gradient(45deg, #cbd5e1 0 2px, rgba(203, 213, 225, .16) 2px 6px); }
body.dark-mode .legend-line { border-top-color: #cbd5e1; }
body.dark-mode .edge--valide { stroke: #cbd5e1; }
body.dark-mode .graph-edge { stroke: #94a3b8; }
body.dark-mode .filters input, body.dark-mode .filters select { background: #1f242c; border-color: #4b5563; color: var(--model-ink); }
body.dark-mode .no-results { background: #2c2118; color: #fcd9b6; }
body.dark-mode .no-results button { border-color: #fcd9b6; color: #fcd9b6; background: transparent; }
body.dark-mode .chip { background: #1f242c; border-color: #4b5563; color: var(--model-ink); }
body.dark-mode .chip.is-active, body.dark-mode .chip[aria-pressed="true"] { background: var(--model-green); border-color: var(--model-green); color: #06281c; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--model-paper);
  color: var(--model-ink);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  line-height: 1.65;
}

.model-main { max-width: 1240px; margin: 0 auto; padding: 42px 22px 80px; }
/* 1040px (vit-S934, 11/09/2026, demande Rémy) : 900px cassait le H1 en deux
   lignes (952px de large à 4.25rem, mesuré) et repliait le lede plus tôt que
   nécessaire. Sous 1040px de fenêtre, .model-hero prend 100% (bloc, pas de
   max-width appliqué) donc rien ne casse sur mobile. */
.model-hero { max-width: 1040px; margin-bottom: 28px; }
.prototype-flag {
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid var(--model-orange);
  border-radius: 999px;
  color: #92400e;
  background: #fff7ed;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.model-hero h1 {
  margin: 18px 0;
  font-size: clamp(2rem, 5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.model-notice { margin: 0 0 1rem; padding: .75rem 1rem; border-left: 4px solid var(--model-orange); background: var(--model-surface); color: var(--model-ink); font-size: 1rem; }
.model-lede { color: var(--model-muted); font-size: clamp(1.05rem, 2vw, 1.3rem); }
/* Pas de max-width propre (vit-S934, 11/09/2026) : le paragraphe reprend la
   largeur du conteneur .model-hero, même bord droit que le H1. Avant, 780px
   cassait plus tôt et désalignait visuellement les deux blocs. */
/* Repère chiffré compact sous le chapô (audit UX v2, vit-S935, P0#3) :
   remplace l'ancienne .measure-row pleine largeur (7 badges). Le détail
   (spéculatives/contestées/N=1, répartition de maturité) vit maintenant
   dans .measure-summary, à l'intérieur de l'accordéon « Comment lire cette
   carte ? ». */
.model-stats { margin-top: 10px; color: var(--model-muted); font-size: .92rem; font-weight: 650; }
.measure-summary { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--model-line); color: var(--model-muted); font-size: .86rem; }
.epistemic { margin: 28px 0; padding: 18px 20px; border-left: 5px solid var(--model-green); border-radius: 12px; background: #eef6f1; }
.epistemic > summary { margin: 0; font-size: 1rem; font-weight: 800; cursor: pointer; list-style-position: outside; }
.epistemic > summary::marker { color: var(--model-green); }
.epistemic-body { margin-top: 10px; }
.epistemic p { margin: 0; }

.epistemic h3 { margin: 16px 0 6px; font-size: .95rem; }
.epistemic-encoding { display: grid; gap: 10px; margin: 0; }
.epistemic-encoding dt { font-weight: 800; }
.epistemic-encoding dd { margin: 2px 0 0; font-size: .92rem; }

/* Bloc « classe de preuve » d'une fiche : même information que la taille du
   nœud dans le graphe, en texte, pour la lecture sans JavaScript. */
.evidence { margin: 14px 0; padding: 12px 13px; border: 1px solid var(--model-line); border-radius: 12px; background: #f8fafc; }
.evidence p { margin: 0 0 6px; }
.evidence p:last-child { margin-bottom: 0; }
.evidence-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.evidence-badge { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.evidence-consolide { background: #dcfce7; color: #14532d; }
.evidence-etaye { background: #e0f2fe; color: #075985; }
.evidence-preliminaire { background: #fef3c7; color: #854d0e; }
.evidence-exploratoire { background: #ede9fe; color: #5b21b6; }
.evidence-def, .evidence-dim, .evidence-pmids { color: var(--model-muted); font-size: .8rem; }
.evidence-gap { padding: 8px 10px; border-radius: 9px; background: #fff7ed; color: #7c2d12; font-size: .81rem; }
.evidence-pmids a { color: var(--model-muted); }

.legend { margin: 24px 0; padding: 20px; border: 1px solid var(--model-line); border-radius: 18px; background: var(--model-surface); }
.legend-sub { margin: 18px 0 10px; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--model-muted); }
.legend-sub:first-of-type { margin-top: 6px; }
/* Les pastilles de légende reprennent les quatre paliers du graphe, à l'échelle
   moitié : c'est la même information, pas une décoration. */
.size-dot, .fill-dot { flex: none; border-radius: 50%; border: 2px solid #41546b; }
.size-consolide { width: 30px; height: 30px; }
.size-etaye { width: 23px; height: 23px; }
.size-preliminaire { width: 17px; height: 17px; }
.size-exploratoire { width: 13px; height: 13px; }
.fill-dot { width: 22px; height: 22px; }
.fill-forte { background: #41546b; }
.fill-faible { background: repeating-linear-gradient(45deg, #41546b 0 2px, rgba(65, 84, 107, .12) 2px 6px); }
.fill-aucune { background: none; border-style: dashed; }
.legend h2 { margin: 0 0 14px; font-size: 1.15rem; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.legend-item { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.legend-line { width: 52px; height: 0; border-top: 3px solid #41546b; flex: none; }
.legend-line.hypothesis { border-top-width: 2px; border-top-style: dashed; }
.legend-line.speculative { border-top: 2px dotted var(--model-orange); }
.legend-line.n1 {
  height: 3px;
  border: 0;
  background: repeating-linear-gradient(90deg, var(--model-violet) 0 9px, transparent 9px 13px, var(--model-violet) 13px 15px, transparent 15px 20px);
}
.legend-line.conteste {
  height: 3px;
  border: 0;
  background: repeating-linear-gradient(90deg, var(--model-contested) 0 8px, transparent 8px 12px);
}
.sign-help { margin: 16px 0 10px; color: var(--model-muted); font-size: .84rem; }
.category-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; padding-top: 12px; border-top: 1px solid var(--model-line); }
.category-legend-item { display: inline-flex; align-items: center; gap: 7px; color: var(--model-muted); font-size: .78rem; }
.category-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--category-color); }

.graph-shell { overflow: auto; padding: 14px; border: 1px solid var(--model-line); border-radius: 20px; background: var(--model-surface); box-shadow: 0 12px 40px rgba(6, 23, 45, .06); }
.model-graph { position: relative; display: block; width: 100%; min-width: 900px; background: #fbfaf7; border-radius: 16px; }
.model-graph-svg { display: block; width: 100%; height: 620px; }
.graph-bg { fill: #fbfaf7; }
.graph-edge { fill: none; stroke: #64748b; stroke-width: 1.5; opacity: .68; }
.edge--valide { stroke: #41546b; stroke-width: 3; opacity: .82; }
.edge--hypothese { stroke-dasharray: 12 5; }
.edge--speculatif { stroke: var(--model-orange); stroke-width: 2.2; stroke-dasharray: 3 5; }
.edge--conteste { stroke: var(--model-contested); stroke-width: 2.4; stroke-dasharray: 7 4; }
.edge--n1 { stroke: var(--model-violet); stroke-width: 2.2; stroke-dasharray: 9 4 2 4; }
.edge--valide.sign--minus, .edge--hypothese.sign--minus { stroke: #2d6a4f; }
.graph-node-link { cursor: pointer; }
/* La couleur du contour est posée par model.js (couleur du rôle) : ne pas la
   forcer ici, une règle CSS l'emporterait sur l'attribut de présentation et
   rendrait invisible le cerclage des nœuds creux. */
.graph-node circle { stroke-width: 2; transition: stroke-width .15s; }
.graph-node-link:focus .graph-node circle, .graph-node-link:hover .graph-node circle { stroke: var(--model-ink); stroke-width: 5; }
.node-id { text-anchor: middle; pointer-events: none; font-family: "Plus Jakarta Sans", sans-serif; }
/* Même remarque que ci-dessus : le remplissage du libellé vient de model.js,
   blanc sur pastille pleine, couleur du rôle sur pastille creuse. */
.node-id { font-size: 12px; font-weight: 800; }
/* Mode sombre (vit-S1244, audit navigateur) : sur pastille creuse ou hachurée le libellé prend la
   couleur du rôle, 2,5 à 3,8:1 sur fond sombre ; texte clair à la place (WCAG 1.4.3). */
body.dark-mode .graph-node[data-production="faible"] .node-id,
body.dark-mode .graph-node[data-production="aucune"] .node-id { fill: #f1f5f9; }
.graph-help { margin: 10px 4px 0; color: var(--model-muted); font-size: .86rem; }

.directory { margin-top: 44px; }
.directory-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.directory-head h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.filters label { display: grid; gap: 5px; color: var(--model-muted); font-size: .78rem; font-weight: 750; }
.filters input, .filters select { min-height: 44px; padding: 8px 10px; border: 1px solid #aeb8c5; border-radius: 9px; background: #fff; color: var(--model-ink); font: inherit; }
.result-count { min-height: 1.5em; color: var(--model-muted); font-size: .9rem; }
.node-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; align-items: start; }
.node-card { padding: 20px; border: 1px solid var(--model-line); border-radius: 18px; background: var(--model-surface); scroll-margin-top: 90px; }
.node-card:target, .node-card.is-selected { outline: 4px solid rgba(40, 106, 77, .24); border-color: var(--model-green); }
.node-card-header { display: flex; gap: 12px; align-items: flex-start; }
.node-code { display: grid; width: 48px; height: 48px; border-radius: 50%; place-items: center; flex: none; background: var(--model-ink); color: #fff; font-weight: 850; }
.node-category { margin: 0; color: var(--model-green); font-size: .73rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.node-card h3 { margin: 2px 0 0; font-size: 1.12rem; line-height: 1.25; }
.node-description { font-size: .94rem; }
.node-sources { padding-top: 12px; border-top: 1px solid var(--model-line); color: var(--model-muted); font-size: .82rem; }
.orphan-note { padding: 11px 12px; border-radius: 10px; background: #fff7ed; color: #7c2d12; font-size: .86rem; }
.node-card details { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--model-line); }
.node-card summary { cursor: pointer; font-weight: 750; min-height: 24px; }
.quick-action { display: inline-flex; align-items: center; min-height: 24px; }
.node-articles ul { padding-left: 20px; }
.relation-list { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.relation { padding: 12px; border: 1px solid var(--model-line); border-radius: 11px; }
.relation--speculatif { border-color: var(--model-orange); border-style: dashed; }
.relation--conteste { border-color: var(--model-contested); border-style: dashed; }
.relation--n1 { border-color: var(--model-violet); border-style: dashed; }
.relation-heading { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .82rem; }
.relation-heading strong { min-width: 180px; flex: 1; }
.relation-heading a { color: var(--model-ink); }
.relation-sign { color: var(--model-muted); }
.status-badge { display: inline-flex; padding: 3px 7px; border-radius: 999px; font-size: .68rem; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.status-valide { background: #dcfce7; color: #166534; }
.status-hypothese { background: #fef3c7; color: #854d0e; }
.status-speculatif { background: #ffedd5; color: #9a3412; }
.status-conteste { background: #ffe4e6; color: #9f1239; }
.status-n1 { background: #f3e8ff; color: #6b21a8; }
.relation p { margin: 9px 0; font-size: .84rem; }
.relation dl { display: grid; gap: 5px; margin: 0; color: var(--model-muted); font-size: .76rem; }
.relation dl div { display: grid; grid-template-columns: 55px 1fr; gap: 6px; }
.relation dt { font-weight: 800; }
.relation dd { margin: 0; }
.back-to-graph { display: inline-flex; align-items: center; min-height: 24px; margin-top: 14px; font-size: .78rem; }
.node-description-more summary { font-size: .84rem; color: var(--model-green); }
[hidden] { display: none !important; }

/* Bloc « actions rapides » retiré le 11/09/2026 (audit UX v2, vit-S935, P0#2) :
   redondant avec les filtres juste au-dessus du graphe. Règles .quick-actions/
   .quick-action supprimées avec le HTML qu'elles stylaient. */

/* Recherche et filtres au-dessus du graphe (P0#1, P1#4, P1#5) : `.filters`
   fournit déjà la base label/input/select, on n'y ajoute que la disposition
   propre aux puces et au conteneur. */
.network-controls { margin: 18px 0 22px; align-items: end; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; align-self: end; }
.chip {
  min-height: 44px; padding: 8px 14px; border: 1px solid #aeb8c5; border-radius: 999px;
  background: #fff; color: var(--model-ink); font: inherit; font-size: .82rem; font-weight: 750;
  cursor: pointer;
}
.chip.is-active, .chip[aria-pressed="true"] { background: var(--model-green); border-color: var(--model-green); color: #fff; }

.no-results { margin: 14px 0; padding: 14px 16px; border-radius: 12px; background: #fff7ed; color: #7c2d12; font-size: .9rem; }
.no-results button {
  margin-left: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid #7c2d12; border-radius: 999px;
  background: #fff; color: #7c2d12; font: inherit; font-weight: 750; cursor: pointer;
}

/* Sidebar réservée au détail du nœud survolé (revu vit-S934, 11/09/2026) :
   les légendes en sont sorties et vivent en pleine largeur sous le graphe,
   cf. les deux .legend juste après network-layout dans le HTML. Ça repousse
   le répertoire plus bas qu'avec les légendes en colonne étroite (motif
   exact de leur passage en sidebar le matin même, vit-S932) — réintroduit
   ici sur demande explicite de Rémy, à connaître si le répertoire semble
   trop loin du graphe. */
.network-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 22px; align-items: start; margin-top: 18px; }
.network-main { min-width: 0; }
.model-sidebar { display: grid; gap: 18px; position: sticky; top: 18px; }

/* Panneau de détail au survol / focus / clic d'un nœud (P0#2 ; en lieu et
   place d'une modale au seul survol, inaccessible au tactile et au clavier
   — voir le commentaire dans model.js). */
.node-detail-panel { padding: 16px 18px; border: 1px solid var(--model-line); border-radius: 16px; background: var(--model-surface); min-height: 96px; }
.node-detail-panel h3 { margin: 0 0 6px; font-size: 1rem; }
.node-detail-panel p { margin: 0 0 6px; font-size: .86rem; color: var(--model-muted); }
.panel-placeholder { font-style: italic; }
.panel-meta { color: var(--model-green); font-size: .73rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.panel-desc { font-size: .84rem; }
.panel-flags { color: var(--model-orange); font-weight: 750; }
.panel-link { display: inline-block; margin-top: 4px; font-size: .82rem; font-weight: 750; }

/* Graphe replié par défaut sur mobile (P2#8) — repli posé par model.js après
   le premier rendu, jamais avant (sinon D3 dimensionnerait sur un conteneur
   à 0px). */
.graph-disclosure { border: 0; padding: 0; margin: 0; }
.graph-disclosure > summary { cursor: pointer; font-weight: 800; font-size: .92rem; padding: 4px 0 10px; color: var(--model-muted); list-style-position: outside; }
.graph-disclosure[open] > summary { color: var(--model-ink); }
.graph-caveat { margin: 10px 4px 0; padding: 8px 11px; border-radius: 9px; background: #fff7ed; color: #7c2d12; font-size: .82rem; font-weight: 750; }
body.dark-mode .graph-caveat { background: #2c2118; color: #fbbf24; }

/* Atténuation du réseau hors voisinage au survol/focus/clic d'un nœud (audit
   UX codex 11/09/2026, P0#3 ; vit-S933, dimming seul, cf. model.js).
   Transition neutralisée par la règle générale prefers-reduced-motion plus
   bas, pas de garde locale nécessaire. */
.graph-node-link { transition: opacity .15s ease; }
.graph-edge { transition: opacity .15s ease; }
.graph-node-link.is-not-neighbor { opacity: .28; }
.graph-edge.is-not-connected { opacity: .08; }

/* Filtrage du graphe synchronisé avec le répertoire (P1#4). */
.graph-node-link.is-filtered-out { opacity: .16; }
.graph-edge.is-filtered-out { opacity: .06; }

@media (max-width: 900px) {
  .network-layout { grid-template-columns: 1fr; }
  .model-sidebar { position: static; }
}

@media (max-width: 680px) {
  .model-main { padding-inline: 15px; }
  .model-hero h1 { letter-spacing: -.025em; }
  .graph-shell { margin-inline: -15px; border-inline: 0; border-radius: 0; }
  .filters, .filters label { width: 100%; }
  .filter-chips { align-self: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}