/* ══════════════════════════════════════════════════════════════════════════
   Digital Stoic — socle d'artefact
   Palette « Guède vive » · v0.1 · 2026-08-02

   Injecté dans une source d'artefact par le marqueur "@base" que traite
   artifact-build.mjs, ici même. Les faces s'injectent séparément,
   via les marqueurs "@font: <slug>" — ce fichier suppose seulement que
   'Src Serif', 'Hanken' et 'JetBrains Mono' sont déclarées.
   (Les marqueurs sont cités sans leurs délimiteurs : un commentaire CSS ne
   s'imbrique pas, et une séquence fermante écrite ici clôturerait ce bandeau
   par erreur — le bloc de jetons qui suit serait alors avalé par le parseur.)

   Rien ici n'est stylé en dur : tout passe par les jetons. Changer de palette
   se fait en réécrivant les quatre blocs de jetons ci-dessous, sans toucher
   une seule règle de composant.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Jetons — versant clair ────────────────────────────────────────────── */
:root{
  --bg:#E6EAF2; --surface:#F2F5FA; --sunk:#D8DFEC;
  --fg:#1B2333; --muted:#4C5771; --faint:#7A849B;
  --line:#CDD6E5; --line-strong:#B3BFD4;
  --accent:#2447A8; --accent-weak:#DCE4F7; --accent-ink:#FFFFFF;
  --voice:#A02F2F; --voice-weak:#DCD0D7;
  --ok:#2F6B4F; --warn:#8A6A12;
  /* l'état critique n'est pas une teinte, c'est une inversion */
  --crit-bg:#1B2333; --crit-fg:#E6EAF2;
  /* Séries — identité, jamais rang. Ordre figé, validé aux six contrôles. */
  --cat-1:#2447A8; --cat-2:#A02F2F; --cat-3:#0A8A6C;
  --cat-4:#6A4C93; --cat-5:#B4761A; --cat-6:#B84A7E;
  /* Magnitude continue — une seule teinte, clair vers foncé. */
  --seq-1:#D3DDF1; --seq-2:#A8BAE4; --seq-3:#7A94D2; --seq-4:#4D6CB8; --seq-5:#2447A8;
  /* Polarité — les deux premiers pôles catégoriels, milieu gris neutre. */
  --dv-mid:#DCDFE6;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121722; --surface:#1C2334; --sunk:#0D1119;
    --fg:#E3E8F2; --muted:#9AA5BC; --faint:#6E7891;
    --line:#262E40; --line-strong:#38425A;
    --accent:#7EA6F0; --accent-weak:#1B2740; --accent-ink:#121722;
    --voice:#D2685F; --voice-weak:#2D222B;
    --ok:#6FB08C; --warn:#D3A544;
    --crit-bg:#E3E8F2; --crit-fg:#121722;
    --cat-1:#5B8FE0; --cat-2:#D2685F; --cat-3:#2E9E8E;
    --cat-4:#8F7AD0; --cat-5:#B4842F; --cat-6:#CE6E9B;
    --seq-1:#1E2A44; --seq-2:#2C4270; --seq-3:#3E5F9E; --seq-4:#557FC8; --seq-5:#7EA6F0;
    --dv-mid:#333B4C;
  }
}
/* La bascule du lecteur d'artefact estampille data-theme sur la racine et
   doit l'emporter sur la media query — dans les deux sens, d'où les deux
   blocs qui suivent. */
:root[data-theme="dark"]{
  --bg:#121722; --surface:#1C2334; --sunk:#0D1119;
  --fg:#E3E8F2; --muted:#9AA5BC; --faint:#6E7891;
  --line:#262E40; --line-strong:#38425A;
  --accent:#7EA6F0; --accent-weak:#1B2740; --accent-ink:#121722;
  --voice:#D2685F; --voice-weak:#2D222B;
  --ok:#6FB08C; --warn:#D3A544;
  --crit-bg:#E3E8F2; --crit-fg:#121722;
  --cat-1:#5B8FE0; --cat-2:#D2685F; --cat-3:#2E9E8E;
  --cat-4:#8F7AD0; --cat-5:#B4842F; --cat-6:#CE6E9B;
  --seq-1:#1E2A44; --seq-2:#2C4270; --seq-3:#3E5F9E; --seq-4:#557FC8; --seq-5:#7EA6F0;
  --dv-mid:#333B4C;
}
:root[data-theme="light"]{
  --bg:#E6EAF2; --surface:#F2F5FA; --sunk:#D8DFEC;
  --fg:#1B2333; --muted:#4C5771; --faint:#7A849B;
  --line:#CDD6E5; --line-strong:#B3BFD4;
  --accent:#2447A8; --accent-weak:#DCE4F7; --accent-ink:#FFFFFF;
  --voice:#A02F2F; --voice-weak:#DCD0D7;
  --ok:#2F6B4F; --warn:#8A6A12;
  --crit-bg:#1B2333; --crit-fg:#E6EAF2;
  /* Séries — identité, jamais rang. Ordre figé, validé aux six contrôles. */
  --cat-1:#2447A8; --cat-2:#A02F2F; --cat-3:#0A8A6C;
  --cat-4:#6A4C93; --cat-5:#B4761A; --cat-6:#B84A7E;
  /* Magnitude continue — une seule teinte, clair vers foncé. */
  --seq-1:#D3DDF1; --seq-2:#A8BAE4; --seq-3:#7A94D2; --seq-4:#4D6CB8; --seq-5:#2447A8;
  /* Polarité — les deux premiers pôles catégoriels, milieu gris neutre. */
  --dv-mid:#DCDFE6;
}

/* ── Typographie et mesures ────────────────────────────────────────────── */
:root{
  --serif:'Src Serif', Charter, Georgia, serif;
  --sans:'Hanken', ui-sans-serif, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --s1:.45rem; --s2:.8rem; --s3:1.2rem; --s4:2rem; --s5:3.2rem; --s6:5rem;
  --r:6px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:64rem; margin:0 auto; padding:var(--s5) var(--s4) var(--s6)}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* ── Barre de tête ─────────────────────────────────────────────────────── */
.bar{
  display:flex; align-items:center; gap:var(--s3);
  border-bottom:1px solid var(--line-strong); padding-bottom:var(--s2); margin-bottom:var(--s5);
}
.mark{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  border:1px solid var(--line-strong); border-radius:var(--r);
  padding:.25rem .5rem; color:var(--fg);
}
.bar .who{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
.bar .sp{flex:1}
button.tgl{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  background:transparent; color:var(--muted); border:1px solid var(--line-strong);
  border-radius:var(--r); padding:.3rem .7rem; cursor:pointer;
}
button.tgl:hover{color:var(--fg); border-color:var(--accent)}

/* ── Grille document : rail de métadonnées + colonne de lecture ────────── */
.doc{display:grid; grid-template-columns:11rem minmax(0,1fr); gap:var(--s4)}
@media (max-width:760px){ .doc{grid-template-columns:1fr} }

.rail{font-family:var(--mono); font-size:.7rem; line-height:1.5; color:var(--faint)}
.rail dl{margin:0; display:grid; gap:var(--s2)}
.rail dt{letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.rail dd{margin:.1rem 0 0; color:var(--muted); font-variant-numeric:tabular-nums}
.rail .marg{
  font-family:var(--serif); font-style:italic; font-size:.87rem; line-height:1.5;
  color:var(--muted); border-top:1px solid var(--line);
  padding-top:var(--s2); margin-top:var(--s4);
}

/* ── Typographie de contenu ────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 var(--s2);
}
h1{
  font-family:var(--serif); font-weight:600; font-size:2.6rem; line-height:1.1;
  letter-spacing:-.01em; margin:0 0 var(--s3); text-wrap:balance;
}
.lede{
  font-family:var(--serif); font-size:1.15rem; line-height:1.55;
  color:var(--muted); margin:0 0 var(--s4); max-width:44ch;
}
h2{
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  margin:var(--s5) 0 var(--s3); padding-bottom:var(--s1);
  border-bottom:1px solid var(--line);
}
p{margin:0 0 var(--s3); max-width:68ch}
.sec > p:last-child{margin-bottom:0}

/* ── Les trois registres d'affirmation ─────────────────────────────────── */
/* Le différenciateur épistémique rendu en typographie : chaque énoncé se
   range dans l'un des trois régimes, et chaque régime a sa forme. */
.regs{display:grid; gap:0}
.reg{display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:var(--s2); padding:var(--s3) 0}
.reg + .reg{border-top:1px solid var(--line)}
.reg .glyph{font-family:var(--mono); font-size:.7rem; color:var(--faint); padding-top:.28rem}
.reg p{margin:0 0 var(--s1)}
.reg .tag{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}

/* fait vérifiable : neutre, plein, sourcé */
.reg-fact p{color:var(--fg)}
.reg-fact .glyph{border-left:2px solid var(--line-strong); padding-left:.45rem}
.reg-fact .src{font-family:var(--mono); font-size:.66rem; color:var(--accent)}

/* consensus émergent daté : atténué, pointillé, horodaté */
.reg-cons p{color:var(--muted)}
.reg-cons .glyph{border-left:2px dotted var(--line-strong); padding-left:.45rem}
.reg-cons .when{font-family:var(--mono); font-size:.66rem; color:var(--muted); font-variant-numeric:tabular-nums}

/* conviction assumée : serif italique, marque de voix — le seul texte coloré */
.reg-conv{background:var(--voice-weak); margin:0 calc(-1 * var(--s2)); padding:var(--s3) var(--s2)}
.reg-conv p{font-family:var(--serif); font-style:italic; font-size:1.08rem; color:var(--fg)}
.reg-conv .glyph{border-left:2px solid var(--voice); padding-left:.45rem; color:var(--voice)}
.reg-conv .tag{color:var(--voice)}

/* ── Dichotomie du contrôle ────────────────────────────────────────────── */
/* Une seule mécanique de couleur, deux lectures : l'accent marque ce sur
   quoi on a prise, le neutre marque ce qu'on constate. */
.dicho{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line)}
@media (max-width:620px){ .dicho{grid-template-columns:1fr} }
.dicho > div{padding:var(--s3) var(--s3) var(--s3) 0; border-bottom:1px solid var(--line)}
.dicho > div + div{border-left:1px solid var(--line); padding-left:var(--s3)}
.dicho h3{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 var(--s2); font-weight:400;
}
.dicho .up h3{color:var(--accent)}
.dicho .not h3{color:var(--faint)}
.dicho ul{margin:0; padding-left:1.1rem; font-size:.92rem}
.dicho li{margin-bottom:.3rem}
.dicho .up li{color:var(--fg)}
.dicho .not li{color:var(--muted)}

/* ── Chiffres ──────────────────────────────────────────────────────────── */
.kpis{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.kpis > div{
  display:flex; flex-direction:column; gap:.05rem;
  padding:var(--s2) var(--s3) var(--s2) 0; border-right:1px solid var(--line);
}
.kpis > div:last-child{border-right:0}
.kpis .n{
  font-family:var(--serif); font-weight:600; font-size:1.9rem; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.kpis .l{font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}

/* ── États ─────────────────────────────────────────────────────────────── */
.states{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; margin-bottom:var(--s3)}
.chip{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  border-radius:var(--r); padding:.25rem .6rem; border:1px solid currentColor;
}
.chip-ok{color:var(--ok)}
.chip-warn{color:var(--warn)}
.chip-crit{background:var(--crit-bg); color:var(--crit-fg); border-color:var(--crit-bg)}

/* ── Tableaux ──────────────────────────────────────────────────────────── */
.tw{overflow-x:auto}
/* la couleur est réaffirmée ici : en mode quirks un tableau n'hérite pas
   de la couleur de ses ancêtres, et le texte des lignes disparaîtrait */
table{
  border-collapse:collapse; width:100%; font-size:.86rem;
  color:var(--fg); font-family:var(--sans);
}
th{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:400; color:var(--faint); text-align:left;
  border-bottom:1px solid var(--line-strong); padding:var(--s1) var(--s2) var(--s1) 0;
}
td{border-bottom:1px solid var(--line); padding:var(--s1) var(--s2) var(--s1) 0; vertical-align:middle}
td.hex{font-family:var(--mono); font-size:.78rem; font-variant-numeric:tabular-nums; color:var(--muted)}
td.name{font-family:var(--mono); font-size:.78rem}
.sw{display:inline-block; width:1.6rem; height:.9rem; border-radius:2px; border:1px solid var(--line-strong); vertical-align:-.1rem}

/* ── Bande de nuances ──────────────────────────────────────────────────── */
.strip{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line-strong); border-radius:var(--r); overflow:hidden}
.strip > div{flex:1 1 5.5rem; height:3.4rem; display:flex; align-items:flex-end; padding:.3rem .4rem}
.strip span{font-family:var(--mono); font-size:.6rem; letter-spacing:.05em}

/* ── Figures et séries ─────────────────────────────────────────────────── */
/* La couleur suit l'entité, jamais son rang : une série garde son jeton
   quand un filtre change le compte. L'ordre est figé et ne se cycle pas —
   au-delà de six séries on replie en « Autres » ou on facette, on ne
   fabrique pas une septième teinte.
   Une seule mécanique : .se-N pose `color`, et le SVG le récupère par
   currentColor. Le texte, lui, garde ses jetons de texte — un libellé ne
   porte jamais la couleur de sa série, la pastille s'en charge. */
.se-1{color:var(--cat-1)} .se-2{color:var(--cat-2)} .se-3{color:var(--cat-3)}
.se-4{color:var(--cat-4)} .se-5{color:var(--cat-5)} .se-6{color:var(--cat-6)}

.fig{margin:var(--s4) 0}
.fig-t{font-family:var(--sans); font-weight:600; font-size:.95rem; margin:0 0 .15rem}
.fig-s{font-family:var(--sans); font-size:.82rem; color:var(--muted); margin:0 0 var(--s2); max-width:60ch}
.fig figcaption{
  font-family:var(--mono); font-size:.66rem; color:var(--faint);
  margin-top:var(--s2); padding-top:var(--s1); border-top:1px solid var(--line);
}

.viz{display:block; width:100%; height:auto; overflow:visible}
/* La grille situe, elle ne se lit pas : elle reste sous le trait de donnée. */
.viz .grid{stroke:var(--line); stroke-width:1; fill:none}
.viz .axis{stroke:var(--line-strong); stroke-width:1; fill:none}
.viz text{font-family:var(--mono); font-size:9px; fill:var(--faint)}
.viz .val{fill:var(--fg); font-size:10px; font-variant-numeric:tabular-nums}
/* Marques fines : trait de 2 px, marqueur d'au moins 8 px de diamètre. */
/* .mk et non .bar : .bar est déjà la barre de tête, et sa règle non scopée
   frapperait un <rect class="bar"> à l'intérieur du SVG. */
.viz .mk,.viz .dot,.viz .area,.spark .mk{fill:currentColor}
.viz .ln,.spark .ln{fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.viz .area{opacity:.14}
/* Anneau de 2 px couleur de fond : sépare deux marques qui se recouvrent. */
.viz .dot{stroke:var(--surface); stroke-width:2}
.viz .stk{stroke:var(--surface); stroke-width:2}

.lgd{
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); margin-bottom:var(--s2);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--muted);
}
.lgd > span{display:inline-flex; align-items:center; gap:.35rem; color:var(--muted)}
.lgd i{width:.7rem; height:.7rem; border-radius:2px; background:currentColor; flex:none}

/* Magnitude continue : une seule teinte, cinq pas, du clair au foncé. */
.hm{display:grid; gap:2px}
.hm i{aspect-ratio:1; border-radius:2px; background:var(--sunk); display:block}
.hm .q1{background:var(--seq-1)} .hm .q2{background:var(--seq-2)} .hm .q3{background:var(--seq-3)}
.hm .q4{background:var(--seq-4)} .hm .q5{background:var(--seq-5)}
.spark{display:inline-block; width:5rem; height:1em; vertical-align:-.15em; overflow:visible}

/* ── Contrôles natifs ──────────────────────────────────────────────────── */
/* On style l'élément natif, on ne le reconstruit pas en <div> : la roue qui
   vaut d'être réutilisée est le navigateur. Le focus n'est jamais retiré —
   :focus-visible est déjà défini plus haut, ne pas le redéfinir ici. */
.ctl{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:flex-end; margin-bottom:var(--s3)}
.ctl label{display:flex; flex-direction:column; gap:.25rem}
.ctl > label > span,legend{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint);
}
input,select,textarea{
  font-family:var(--sans); font-size:.86rem; color:var(--fg); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r); padding:.3rem .5rem;
}
input[type=number],input[type=date],.num{font-variant-numeric:tabular-nums}
input[type=checkbox],input[type=radio]{accent-color:var(--accent); width:auto}
input[type=range]{accent-color:var(--accent); padding:0; border:0; background:none}
fieldset{border:1px solid var(--line); border-radius:var(--r); padding:var(--s2)}

button{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  border-radius:var(--r); padding:.35rem .7rem; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
}
button.ghost{background:transparent; color:var(--accent)}
button[disabled]{opacity:.5; cursor:not-allowed}

details{border-top:1px solid var(--line); padding:var(--s2) 0}
summary{cursor:pointer; font-family:var(--sans); font-weight:600; font-size:.9rem}
dialog{
  background:var(--surface); color:var(--fg);
  border:1px solid var(--line-strong); border-radius:var(--r); padding:var(--s3);
}
dialog::backdrop{background:rgb(0 0 0 / .45)}

/* Laissée à elle-même, la jauge native s'affiche dans les couleurs du
   navigateur — un vert qui ne vient d'aucun jeton et ment sur la sémantique
   d'état. On reprend la main sur les deux moteurs. */
meter,progress{width:100%; height:.5rem; display:block; appearance:none; border:0; background:var(--sunk); border-radius:var(--r)}
meter::-webkit-meter-bar,progress::-webkit-progress-bar{background:var(--sunk); border:0; border-radius:var(--r)}
meter::-webkit-meter-optimum-value,progress::-webkit-progress-value{background:var(--accent); border-radius:var(--r)}
meter::-webkit-meter-suboptimum-value{background:var(--warn); border-radius:var(--r)}
meter::-webkit-meter-even-less-good-value{background:var(--voice); border-radius:var(--r)}
meter::-moz-meter-bar{background:var(--accent); border-radius:var(--r)}
progress::-moz-progress-bar{background:var(--accent); border-radius:var(--r)}
/* La jauge n'est pas un graphique : un seul chiffre, aucune légende. */
.gauge{display:flex; flex-direction:column; gap:.3rem}
.gauge .l{font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}

/* Jamais la couleur seule : le message porte un glyphe et un texte. */
.hint{font-family:var(--sans); font-size:.76rem; color:var(--muted)}
.err{font-family:var(--sans); font-size:.76rem; color:var(--voice)}

/* ── Coque de tableau de bord ──────────────────────────────────────────── */
/* Le rail bascule à l'horizontale sous la barre : mêmes métadonnées, même
   monospace, aucune sémantique de couleur nouvelle. */
.dash{
  display:flex; flex-wrap:wrap; gap:var(--s3);
  border-bottom:1px solid var(--line); padding-bottom:var(--s2); margin-bottom:var(--s3);
  font-family:var(--mono); font-size:.68rem; font-variant-numeric:tabular-nums;
}
.dash > div{display:flex; flex-direction:column; gap:.1rem}
.dash dt,.dash .l{color:var(--faint); letter-spacing:.09em; text-transform:uppercase; font-size:.62rem}
.dash dd,.dash .v{margin:0; color:var(--fg)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:var(--s3) var(--s4)}

/* ── Pied ──────────────────────────────────────────────────────────────── */
footer{
  margin-top:var(--s6); padding-top:var(--s2); border-top:1px solid var(--line-strong);
  font-family:var(--mono); font-size:.68rem; color:var(--faint);
  display:flex; flex-wrap:wrap; gap:var(--s3); font-variant-numeric:tabular-nums;
}