/* L'habillage de diodote_system_analysis (Diodote · Analyse systémique) — une console d'analyse dense, sombre par défaut
   (façon Blueprint/Palantir), claire sur bascule. Méthode : PROMPT_STYLE_SVG_JS_HTMX.md (jetons de couleur, provenance, fiche à droite).
   Aucune ressource externe : polices système seulement.
   Palette de provenance validée (dataviz validate_palette.js) : sombre #3BA466 / #7A86D8 / #BC7F2E sur #1C2127 ;
   claire #2E7D4F / #4F5DB8 / #A9620A sur #F6F9F9 — bande de clarté, chroma, daltonisme, contraste : tous passent. */

/* ------------------------------------------------------------------------------------------------------ les jetons */
:root {
  color-scheme: dark;
  --fond: #111418; --fond2: #0B0D10; --carte: #1C2127; --carte2: #252A31; --carte3: #2F343C;
  --encre: #F6F7F9; --encre2: #ABB3BF; --encre3: #8F99A8; --filet: #383E47; --filet2: #2A3038;
  --accent: #4C90F0; --accent-fort: #2D72D2; --accent-voile: rgba(76, 144, 240, .14);
  --mesure: #3BA466; --estime: #7A86D8; --illustratif: #BC7F2E; --vide: #8F99A8; --refus: #E76A6E; --ok: #32A467;
  --ombre: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --sans: Inter, "Segoe UI Variable", "Segoe UI", Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  /* les anciens noms, gardés pour les feuilles qui les lisent (chat, système) */
  --panneau: var(--carte); --texte: var(--encre); --doux: var(--encre2); --alerte: var(--refus);
}
:root[data-theme="light"] {
  color-scheme: light;
  --fond: #E8EFF1; --fond2: #DCE5E8; --carte: #F6F9F9; --carte2: #EDF3F4; --carte3: #E1E9EC;
  --encre: #12303C; --encre2: #46626D; --encre3: #6F8791; --filet: #BFD0D6; --filet2: #D3E0E4;
  --accent: #1668B5; --accent-fort: #0F5596; --accent-voile: rgba(22, 104, 181, .10);
  --mesure: #2E7D4F; --estime: #4F5DB8; --illustratif: #A9620A; --vide: #67767E; --refus: #BC2F2F; --ok: #2E7D4F;
  --ombre: 0 1px 2px rgba(18, 48, 60, .08), 0 6px 18px rgba(18, 48, 60, .06);
}

/* ------------------------------------------------------------------------------------------------------ le fond */
* { box-sizing: border-box; }
html { background: var(--fond); }
body { margin: 0; min-height: 100vh; background: var(--fond); color: var(--encre);
  font: 13.5px/1.55 var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "cv11" 1; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
code, kbd, .empreinte, .reference { font-family: var(--mono); font-size: .88em; }
code { background: var(--carte2); border: 1px solid var(--filet2); border-radius: 3px; padding: 0 .3em; color: var(--encre2); }
h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: .1rem 0 .7rem; }
h2 { font-size: 15px; font-weight: 600; margin: 1.2rem 0 .6rem; }
h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--encre3); margin: 1.2rem 0 .5rem; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-voile); }

/* ------------------------------------------------------------------------------------------------ la barre du haut */
.barre { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .25rem; height: 46px;
  padding: 0 1rem; background: color-mix(in srgb, var(--fond2) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet); }
.barre .marque { display: inline-flex; align-items: center; gap: .55rem; margin-right: 1rem; color: var(--encre);
  font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.barre .marque:hover { text-decoration: none; }
.barre .marque svg { width: 20px; height: 20px; flex: none; }
.barre .marque small { color: var(--encre3); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }
.barre > a:not(.marque) { color: var(--encre2); padding: .35rem .7rem; border-radius: 3px; font-weight: 500; }
.barre > a:not(.marque):hover { color: var(--encre); background: var(--carte2); text-decoration: none; }
.barre > a[aria-current="page"] { color: var(--encre); background: var(--accent-voile); box-shadow: inset 0 -2px 0 var(--accent); }
.barre .espace { flex: 1; }
/* Le menu « Services ▾ » (app_welcome/_services.html) : un <details> natif, ouvert au clavier sans JavaScript. */
.barre .services { position: relative; }
.barre .services > summary { list-style: none; cursor: pointer; color: var(--encre2); padding: .35rem .7rem;
  border-radius: 3px; font-weight: 500; white-space: nowrap; }
.barre .services > summary::-webkit-details-marker { display: none; }
.barre .services > summary:hover, .barre .services[open] > summary { color: var(--encre); background: var(--carte2); }
.barre .services > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.barre .services ul { position: absolute; top: 100%; left: 0; z-index: 41; min-width: 15rem; margin: .25rem 0 0;
  padding: .25rem 0; list-style: none; background: var(--carte2); border: 1px solid var(--filet); border-radius: 3px;
  box-shadow: var(--ombre); }
.barre .services li > a, .barre .services li > span { display: block; padding: .4rem .8rem; white-space: nowrap; }
.barre .services li > a { color: var(--encre2); }
.barre .services li > a:hover { color: var(--encre); background: var(--carte3); text-decoration: none; }
.barre .services li > span[aria-current] { color: var(--encre); box-shadow: inset 2px 0 0 var(--accent); }
.barre .qui { color: var(--encre3); font-size: 12px; margin: 0 .4rem; white-space: nowrap; }
.theme-bouton { background: none; color: var(--encre2); border: 1px solid var(--filet); width: 30px; height: 28px;
  padding: 0; display: inline-grid; place-items: center; }
.theme-bouton:hover { color: var(--encre); background: var(--carte2); }
.theme-bouton svg { width: 15px; height: 15px; }
@media (max-width: 760px) { .barre { height: auto; flex-wrap: wrap; padding: .4rem .8rem; } .barre .qui { display: none; }
  .barre .services ul { position: static; } }

/* ------------------------------------------------------------------------------------------------ boutons, champs */
.en-ligne { display: inline; margin: 0; }
button, .bouton { font: 500 12.5px/1 var(--sans); background: var(--accent-fort); color: #fff; border: 1px solid transparent;
  padding: .5rem .9rem; border-radius: 3px; cursor: pointer; transition: background .12s, border-color .12s; }
button:hover, .bouton:hover { background: var(--accent); text-decoration: none; }
button.lien { background: none; color: var(--accent); padding: 0; border: 0; }
button.lien:hover { text-decoration: underline; }
button.secondaire, .graphe-reglages button, .bascule button { background: var(--carte2); color: var(--encre); border-color: var(--filet); }
button.secondaire:hover, .graphe-reglages button:hover, .bascule button:hover { background: var(--carte3); }
form label { display: block; margin-top: .8rem; color: var(--encre2); font-size: 12px; }
input, select, textarea { font: inherit; color: var(--encre); background: var(--fond2); border: 1px solid var(--filet);
  border-radius: 3px; padding: .4rem .5rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-voile); }
form input[type=email], form input[type=password], form input[type=text], form input[type=number] { width: 100%; }
form button[type=submit] { margin-top: 1rem; }
input[type=checkbox] { accent-color: var(--accent); }

/* -------------------------------------------------------------------------------------------------- la mise en page */
main { flex: 1; min-width: 0; max-width: 1500px; margin: 0 auto; padding: 1.1rem 1.2rem 3rem; container: contenu / inline-size; }
.cadre-app { display: flex; align-items: flex-start; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.panneau { position: relative; background: var(--carte); border: 1px solid var(--filet); border-radius: 4px;
  padding: .9rem 1.2rem 1rem; margin-bottom: 1rem; box-shadow: var(--ombre); }
/* le titre de section d'un panneau devient sa bande d'en-tête, sans toucher les gabarits */
.panneau > h2:first-child { margin: -.9rem -1.2rem .9rem; padding: .55rem 1.2rem; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--encre2); background: var(--carte2);
  border-bottom: 1px solid var(--filet); border-radius: 4px 4px 0 0; }
.panneau > h2:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .6rem;
  vertical-align: 1px; background: var(--accent); }
.panneau.etroit { max-width: 26rem; margin: 4rem auto; }
.explication { color: var(--encre2); max-width: 110ch; }
.explication strong { color: var(--encre); }
.note { color: var(--encre3); font-size: 12px; }
/* le fil d'Ariane : le premier « .note » d'un panneau qui contient des « › » */
.panneau > p.note:first-child { margin: 0 0 .3rem; font-size: 11.5px; letter-spacing: .02em; text-transform: none; }
.panneau > p.note:first-child a { color: var(--encre3); }
.panneau > p.note:first-child a:hover { color: var(--accent); }
.alerte, .erreur { color: var(--refus); }
.vide { color: var(--vide); font-style: italic; }
ul { padding-left: 1.2rem; }
li::marker { color: var(--encre3); }

/* les phases de l'accueil */
.phases { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1px; background: var(--filet2); border: 1px solid var(--filet2); }
.phases li { margin: 0; padding: .5rem .7rem; background: var(--carte); color: var(--encre2); font-size: 12.5px; }
.code { display: inline-block; min-width: 2.8rem; font: 600 11px var(--mono); color: var(--encre3); }
.code.fait { color: var(--ok); }
.code.fait::before { content: "● "; }

/* -------------------------------------------------------------------------------------------------- les tableaux */
.tableau { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tableau th { position: sticky; top: 46px; z-index: 1; text-align: left; padding: .45rem .6rem; background: var(--carte2);
  color: var(--encre3); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--filet); white-space: nowrap; }
.tableau td { text-align: left; padding: .42rem .6rem; border-bottom: 1px solid var(--filet2); vertical-align: top; }
.tableau tbody tr { transition: background .1s; }
.tableau tbody tr:hover, .tableau tbody tr.on { background: var(--accent-voile); }

/* ------------------------------------------------------------------------------------------- la provenance, partout */
.pastille { display: inline-block; width: .62rem; height: .62rem; border-radius: 1px; vertical-align: middle; margin-right: .15rem; }
.prov-measured { background: var(--mesure); }
.prov-estimated { background: var(--estime); }
.prov-illustrative { background: var(--illustratif); transform: rotate(45deg) scale(.85); }
.badge { display: inline-block; padding: .05rem .4rem; border-radius: 2px; font: 600 10px/1.5 var(--mono);
  text-transform: uppercase; letter-spacing: .06em; vertical-align: 1px; }
.badge-illustratif { color: var(--illustratif); border: 1px solid currentColor; background: color-mix(in srgb, var(--illustratif) 12%, transparent); }
.badge-illustratif::before { content: "▲ "; }
/* l'étiquette de provenance du prompt : <span class="prov I">▲ ILLUSTRATIF</span> */
.prov { display: inline-block; padding: 0 .35rem; border: 1px solid currentColor; border-radius: 2px;
  font: 600 10px/1.6 var(--mono); letter-spacing: .05em; white-space: nowrap; }
.prov.M { color: var(--mesure); } .prov.E { color: var(--estime); } .prov.I { color: var(--illustratif); } .prov.V { color: var(--vide); }

/* ------------------------------------------------------------------------------------------- la fiche (dl), partout */
.fiche dt { color: var(--encre3); float: left; clear: left; width: 8.5rem; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; padding-top: .12rem; }
.fiche dd { margin: 0 0 .45rem 9rem; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------------------------------- les tuiles de chiffres */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px;
  background: var(--filet); border: 1px solid var(--filet); border-radius: 4px; overflow: hidden; margin: .8rem 0 0; }
.tuile { background: var(--carte); padding: .6rem .8rem; }
.tuile b { display: block; font: 600 22px/1.15 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tuile span { color: var(--encre3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; }
.tuile i { display: block; height: 3px; margin-top: .45rem; background: var(--carte3); border-radius: 2px; overflow: hidden; font-style: normal; }
.tuile i > em { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: tuile-pousse .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tuile-pousse { from { transform: scaleX(0); } }

/* ------------------------------------------------------------------------------------ les graphiques (graphes.js) */
.graphique { position: relative; width: 100%; overflow-x: auto; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.graphique .axe line, .graphique .grille line { stroke: var(--filet2); }
.graphique .axe text { fill: var(--encre3); font-size: 10px; font-variant-numeric: tabular-nums; }
.graphique .nom { fill: var(--encre2); font-size: 11.5px; }
.graphique .val { fill: var(--encre); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.graphique .titre-col { fill: var(--encre3); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.graphique .ligne { cursor: pointer; }
.graphique .ligne .fondligne { fill: transparent; }
.graphique .ligne:hover .fondligne, .graphique .ligne.on .fondligne { fill: var(--accent-voile); }
.foc > .graphique .ligne { opacity: .4; transition: opacity .15s; }
.foc > .graphique .ligne.on { opacity: 1; }
.graphique .barre-m { transition: width .5s cubic-bezier(.2, .7, .2, 1), x .5s cubic-bezier(.2, .7, .2, 1); }
.graphique .ligne, .graphique .ligne * { transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .15s; }
.graphique .vide-marque { fill: none; stroke: var(--vide); stroke-dasharray: 2 2; }
.bulle-graphe { position: fixed; z-index: 60; pointer-events: none; min-width: 180px; max-width: min(calc(100vw - 24px), 320px);
  background: var(--carte2); color: var(--encre); border: 1px solid var(--filet); border-radius: 3px; box-shadow: var(--ombre);
  padding: .5rem .65rem; font-size: 12px; opacity: 0; transform: translateY(4px); transition: opacity .1s, transform .1s; }
.bulle-graphe.vu { opacity: 1; transform: none; }
.bulle-graphe strong { display: block; margin-bottom: .3rem; overflow-wrap: anywhere; }
.bulle-graphe dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .7rem; }
.bulle-graphe dt { color: var(--encre3); } .bulle-graphe dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.graphique-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; margin: 0 0 .7rem; }
.graphique-tete .legende { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: 11.5px; color: var(--encre2); }
.graphique-tete .legende span { display: inline-flex; align-items: center; gap: .3rem; }
.bascule { display: inline-flex; border: 1px solid var(--filet); border-radius: 3px; overflow: hidden; }
.bascule button { border: 0; border-radius: 0; padding: .32rem .7rem; font-size: 11.5px; color: var(--encre2); }
.bascule button + button { border-left: 1px solid var(--filet); }
.bascule button[aria-pressed="true"] { background: var(--accent-voile); color: var(--encre); box-shadow: inset 0 -2px 0 var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.barre form.en-ligne { display: inline-flex; align-items: center; }
.barre button.lien { font-size: 12.5px; color: var(--encre2); padding: .35rem .5rem; margin-top: 0; }
.barre button.lien:hover { color: var(--encre); text-decoration: none; }

/* ------------------------------------------------------------------------------------------- la barre latérale */
.rail { position: sticky; top: 46px; z-index: 30; flex: none; width: 52px; height: calc(100vh - 46px); display: flex;
  flex-direction: column; gap: .9rem; padding: .7rem .45rem; background: var(--fond2); border-right: 1px solid var(--filet);
  overflow: hidden auto; scrollbar-width: none; transition: width .18s ease; }
:root[data-rail="deplie"] .rail { width: 232px; }
.rail-groupe { display: flex; flex-direction: column; gap: 2px; }
.rail-groupe + .rail-groupe { padding-top: .8rem; border-top: 1px solid var(--filet2); }
.rail a { display: flex; align-items: center; gap: .75rem; min-height: 34px; padding: 0 .65rem; border-radius: 3px; color: var(--encre3);
  white-space: nowrap; font-size: 12.5px; font-weight: 500; transition: background .1s, color .1s; }
.rail a:hover { background: var(--carte2); color: var(--encre); text-decoration: none; }
.rail a[aria-current="page"] { background: var(--accent-voile); color: var(--encre); box-shadow: inset 2px 0 0 var(--accent); }
.rail a[aria-current="page"] svg { stroke: var(--accent); fill: var(--accent); }
.rail svg { width: 16px; height: 16px; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.rail a span { overflow: hidden; text-overflow: ellipsis; }
.rail a code { background: none; border: 0; padding: 0; color: inherit; }
.rail-titre { margin: 0 0 .2rem; padding: 0 .65rem; color: var(--encre3); font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root:not([data-rail="deplie"]) .rail a span, :root:not([data-rail="deplie"]) .rail-titre span { display: none; }
:root:not([data-rail="deplie"]) .rail-titre { height: 0; margin: 0; }
.rail-bascule { margin-top: auto; align-self: flex-start; background: none; border: 1px solid transparent; color: var(--encre3);
  width: 34px; height: 30px; padding: 0; display: grid; place-items: center; }
.rail-bascule:hover { background: var(--carte2); color: var(--encre); }
.rail-bascule svg { transition: transform .18s; }
:root[data-rail="deplie"] .rail-bascule svg { transform: rotate(180deg); }
@media (max-width: 760px) {
  .cadre-app { display: block; }
  .rail, :root[data-rail="deplie"] .rail { position: static; width: auto; height: auto; flex-direction: row; gap: .3rem; padding: .35rem .6rem;
    border-right: 0; border-bottom: 1px solid var(--filet); overflow-x: auto; }
  .rail-groupe { flex-direction: row; }
  .rail-groupe + .rail-groupe { padding: 0 0 0 .4rem; border-top: 0; border-left: 1px solid var(--filet2); }
  .rail-titre, .rail-bascule { display: none; }
}

/* --------------------------------------------------------------------------------- le filtre de provenance commun */
.prov-filtre { margin-right: .5rem; }
.prov-filtre button { display: inline-flex; align-items: center; gap: .3rem; }
.prov-filtre button[data-mode="mesure"][aria-pressed="true"] { color: var(--mesure); box-shadow: inset 0 -2px 0 var(--mesure); }
:root[data-prov-filtre="mesure"] .barre { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--mesure) 70%, transparent); }
:root[data-prov-filtre="mesure"] .graphique [data-prov]:not([data-prov="measured"]) { opacity: .13; }
:root[data-prov-filtre="mesure"] tr[data-prov]:not([data-prov="measured"]) { opacity: .38; }
:root[data-prov-filtre="mesure"] .vignette [data-prov]:not([data-prov="measured"]) { opacity: .12; }
.graphique .marque { transition: opacity .2s; }
@media (max-width: 1100px) { .prov-filtre button:first-child { display: none; } }

/* ------------------------------------------------------------------------------------- la liste : des cartes */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 1rem; }
.carte-systeme { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; color: var(--encre);
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.carte-systeme:hover, .carte-systeme:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--filet)); transform: translateY(-2px); }
.carte-systeme .vignette { display: block; width: 100%; height: 180px; border-bottom: 1px solid var(--filet); background-color: var(--fond2);
  background-image: radial-gradient(circle at 1px 1px, var(--filet2) 1px, transparent 1.3px); background-size: 18px 18px; }
.carte-systeme .corps { padding: .75rem 1rem .9rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.carte-systeme h2 { margin: 0; font-size: 15px; }
.carte-systeme h2 a { color: var(--encre); }
.carte-systeme .meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; color: var(--encre3); font-size: 11.5px; }
.carte-systeme .meta code { font-size: 10.5px; }
.carte-systeme .chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--filet2);
  border: 1px solid var(--filet2); border-radius: 3px; overflow: hidden; margin-top: auto; }
.carte-systeme .chiffres div { background: var(--carte); padding: .35rem .55rem; }
.carte-systeme .chiffres b { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.carte-systeme .chiffres b code { font-size: 12.5px; background: none; border: 0; padding: 0; color: var(--accent); }
.carte-systeme .chiffres span { color: var(--encre3); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.vignette line { stroke: var(--encre3); stroke-opacity: .45; }
.vignette circle { stroke: var(--fond2); stroke-width: 1; transition: opacity .2s; }

/* Écran étroit : un tableau large défile dans son panneau, il n'élargit jamais la page. */
@media (max-width: 900px) { .tableau { display: block; overflow-x: auto; } .tableau th { position: static; } }