/* MEDEI Simulator — poste de supervision : rail des six espaces (ordre réel de la démarche),
   bandeau d'état en haut, plan de travail au centre. Chiffres en police à chasse fixe. */
:root {
  --bg: #eef2f4; --surface: #ffffff; --surface-2: #f5f8f9; --surface-3: #e8eef1;
  --fg: #14212b; --fg-2: #4d5d6a; --fg-3: #74838f; --ligne: #d3dce2;
  --accent: #0f6e8c; --accent-fort: #0b5870; --accent-doux: #dcedf3;
  --saisie: #fffaf0; --saisie-bord: #c9b98f;
  --ok: #2d8653; --ok-doux: #e1f2e8; --avert: #b06c12; --avert-doux: #fbefdc; --crit: #c23b3b; --crit-doux: #fbe4e4; --info: #3a6fb0; --info-doux: #e3ecf8;
  --c-pv: #d99a06; --c-eol: #2f7fd1; --c-chp: #2e9a5b; --c-bat: #7b5cc4; --c-achat: #5c6b78; --c-inj: #1a9aa0;
  --c-ens: #c23b3b; --c-deles: #e07b24; --c-perdu: #b39a6b; --c-conso: #14212b; --c-proc: #b4387f;
  --f-titre: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-texte: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --r: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10171d; --surface: #182129; --surface-2: #1f2a33; --surface-3: #26323c;
    --fg: #e4ebf0; --fg-2: #9fb0bd; --fg-3: #7d8e9b; --ligne: #2f3d48;
    --accent: #5fb7d6; --accent-fort: #8dcde4; --accent-doux: #173543; --saisie: #2a2618; --saisie-bord: #6e6040;
    --ok-doux: #173326; --avert-doux: #3a2b14; --crit-doux: #3d1d1d; --info-doux: #1c2c42;
    --c-achat: #8e9caa; --c-conso: #e4ebf0; --c-perdu: #9c8a66; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #10171d; --surface: #182129; --surface-2: #1f2a33; --surface-3: #26323c;
  --fg: #e4ebf0; --fg-2: #9fb0bd; --fg-3: #7d8e9b; --ligne: #2f3d48;
  --accent: #5fb7d6; --accent-fort: #8dcde4; --accent-doux: #173543; --saisie: #2a2618; --saisie-bord: #6e6040;
  --ok-doux: #173326; --avert-doux: #3a2b14; --crit-doux: #3d1d1d; --info-doux: #1c2c42;
  --c-achat: #8e9caa; --c-conso: #e4ebf0; --c-perdu: #9c8a66; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font: 14px/1.5 var(--f-texte); }
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: .005em; }
h2 { font-size: 26px; } h3 { font-size: 18px; } h4 { font-size: 15px; }
p { margin: 0; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.evitement { position: absolute; left: -9999px; } .evitement:focus { left: 8px; top: 8px; z-index: 99; background: var(--surface); padding: 6px 10px; }
.note { font-size: 12.5px; color: var(--fg-2); max-width: 80ch; }
.aide { font-size: 12px; color: var(--fg-2); }
body.professionnel .seul-pedagogique { display: none !important; }
body.pedagogique .seul-professionnel { display: none !important; }

/* Bandeau */
.haut { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--ligne); }
.marque { display: flex; align-items: baseline; gap: 8px; margin-right: auto; }
.marque h1 { font-size: 22px; }
.ver { font: 12px var(--f-data); color: var(--fg-2); }
.etat-haut { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { font: 12px var(--f-data); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--surface-2); white-space: nowrap; }
.puce b { color: var(--accent); font-weight: 500; }
.mode { display: inline-flex; border: 1px solid var(--ligne); border-radius: 999px; padding: 2px; background: var(--surface-2); }
.mode button { border: 0; background: none; padding: 4px 12px; border-radius: 999px; color: var(--fg-2); cursor: pointer; }
.mode button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Disposition */
.cadre { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100% - 56px); }
.rail { background: var(--surface); border-right: 1px solid var(--ligne); padding-block: 10px; display: grid; align-content: start; gap: 2px;
  position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; }
.rail a { display: grid; grid-template-columns: 24px 1fr; gap: 0 8px; padding: 9px 14px; color: var(--fg); text-decoration: none; border-left: 3px solid transparent; }
.rail a .no { font: 12px var(--f-data); color: var(--fg-3); grid-row: span 2; padding-top: 2px; }
.rail a small { color: var(--fg-2); font-size: 11.5px; }
.rail a[aria-current="page"] { background: var(--accent-doux); border-left-color: var(--accent); }
.rail a:hover { background: var(--surface-2); }
.rail a .compte { font: 11px var(--f-data); color: var(--accent); }
main { padding: 20px 24px 48px; min-width: 0; outline: none; }
.espace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; max-width: 1400px; }
.entete { display: grid; gap: 4px; }
.entete p { color: var(--fg-2); max-width: 80ch; }
.chargement { padding: 40px; color: var(--fg-2); font-family: var(--f-data); }
@media (max-width: 900px) {
  .cadre { grid-template-columns: minmax(0, 1fr); }
  .rail { min-width: 0; max-width: 100vw; position: sticky; top: 0; height: auto; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ligne); z-index: 20; }
  .rail a { grid-template-columns: auto; border-left: 0; border-bottom: 3px solid transparent; }
  .rail a .no, .rail a small { display: none; }
  .rail a[aria-current="page"] { border-bottom-color: var(--accent); }
  main { padding: 16px; }
}

/* Panneaux */
.panneau { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; align-content: start; }
.panneau > header { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grille-2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.ligne-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Boutons */
.btn { border: 1px solid var(--ligne); background: var(--surface-2); padding: 7px 14px; border-radius: var(--r); cursor: pointer; text-decoration: none; color: var(--fg); display: inline-flex; gap: 6px; align-items: center; }
.btn:hover { border-color: var(--accent); }
.btn.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.principal:hover { background: var(--accent-fort); }
.btn.danger { color: var(--crit); }
.btn.petit { padding: 3px 9px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.lien { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* Puces d'état */
.etiq { font: 10.5px/1.7 var(--f-data); padding: 0 6px; border-radius: 3px; border: 1px solid currentColor; white-space: nowrap; }
.etiq.choix { color: var(--accent); } .etiq.hyp { color: var(--avert); } .etiq.src { color: var(--ok); } .etiq.calc { color: var(--fg-2); } .etiq.cons { color: var(--c-bat); }
.statut { font: 11px/1.7 var(--f-data); padding: 0 7px; border-radius: 3px; white-space: nowrap; }
.statut.ok { background: var(--ok-doux); color: var(--ok); } .statut.av { background: var(--avert-doux); color: var(--avert); }
.statut.cr { background: var(--crit-doux); color: var(--crit); } .statut.in { background: var(--info-doux); color: var(--info); }

/* Accueil */
.demarche { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 12.5px var(--f-data); }
.demarche span { padding: 4px 10px; border-radius: 4px; border: 1px solid var(--ligne); background: var(--surface); }
.systemes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.systeme { text-align: left; border: 1px solid var(--ligne); border-radius: var(--r); background: var(--surface); padding: 12px 14px; cursor: pointer; display: grid; gap: 4px; }
.systeme[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-doux); }
.systeme strong { font-family: var(--f-titre); font-size: 16px; }
.systeme small { color: var(--fg-2); }
.chiffres { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; font-size: 13px; }
.chiffres dt { color: var(--fg-2); } .chiffres dd { margin: 0; font-family: var(--f-data); }

/* Formulaire de configuration */
.config { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
fieldset.groupe { border: 1px solid var(--ligne); border-radius: var(--r); background: var(--surface); padding: 10px 14px 14px; margin: 0; display: grid; gap: 10px; min-width: 0; }
fieldset.groupe legend { font-family: var(--f-titre); font-size: 16px; font-weight: 600; padding: 0 6px; }
.champ { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 4px 10px; align-items: center; }
.champ label { font-size: 13.5px; }
.champ .unite { font: 11px var(--f-data); color: var(--fg-2); margin-left: 4px; }
.champ input, .champ select { width: 100%; padding: 5px 8px; border: 1px solid var(--saisie-bord); border-radius: 4px; background: var(--saisie); font-family: var(--f-data); text-align: right; }
.champ select { text-align: left; font-family: var(--f-texte); }
.champ input[type=text] { text-align: left; font-family: var(--f-texte); }
.champ input::placeholder { color: var(--fg-3); }
.champ .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; color: var(--fg-2); }
.champ .erreur { grid-column: 1 / -1; color: var(--crit); font-size: 12.5px; }
.champ.en-erreur input, .champ.en-erreur select { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.champ.avance { opacity: .95; }
details.avances > summary { cursor: pointer; font-size: 13px; color: var(--accent); }
details.avances[open] > summary { margin-bottom: 8px; }
.procede { border-top: 1px dashed var(--ligne); padding-top: 10px; display: grid; gap: 8px; }
.procede .champ input[type=checkbox] { width: auto; justify-self: end; }
.barre-actions { position: sticky; bottom: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(4px);
  border-top: 1px solid var(--ligne); padding: 10px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.resume-erreurs { color: var(--crit); font-size: 13px; }
.diff { font: 12px var(--f-data); color: var(--fg-2); }
textarea { width: 100%; min-height: 90px; padding: 8px 10px; border: 1px solid var(--saisie-bord); border-radius: 4px; background: var(--saisie); resize: vertical; }

/* Simulation */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.etapes li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--ligne); font-size: 13.5px; align-items: center; }
.etapes .ic { font-family: var(--f-data); text-align: center; }
.etapes .fait .ic { color: var(--ok); } .etapes .encours .ic { color: var(--accent); } .etapes .echec .ic { color: var(--crit); } .etapes .attente { color: var(--fg-3); }
.erreurs-validation { display: grid; gap: 6px; }
.erreurs-validation li { color: var(--crit); }

/* Indicateurs */
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
.kpi { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 2px; align-content: start; }
.kpi .l { font-size: 12.5px; color: var(--fg-2); }
.kpi .v { font: 600 22px/1.25 var(--f-data); font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 12px; font-weight: 400; color: var(--fg-2); margin-left: 3px; }
.kpi .d { font: 11.5px var(--f-data); color: var(--fg-2); }
.kpi .f { font: 11px var(--f-data); color: var(--fg-3); }
body.professionnel .kpi .f { display: none; }

/* Tableaux */
.tableau { overflow-x: auto; border: 1px solid var(--ligne); border-radius: var(--r); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
th { background: var(--surface-2); font-weight: 600; position: sticky; top: 0; }
td.n, th.n { text-align: right; font-family: var(--f-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* Alertes */
.alertes { display: grid; gap: 10px; }
.alerte { background: var(--surface); border: 1px solid var(--ligne); border-left: 4px solid var(--info); border-radius: var(--r); padding: 10px 14px; display: grid; gap: 6px; }
.alerte.critique { border-left-color: var(--crit); } .alerte.avertissement { border-left-color: var(--avert); }
.alerte h4 { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.alerte dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: 13px; }
.alerte dt { color: var(--fg-2); } .alerte dd { margin: 0; }
.leviers { display: flex; flex-wrap: wrap; gap: 6px; }

/* Graphiques */
figure.graph { margin: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 6px; min-width: 0; }
figure.graph.large { grid-column: 1 / -1; }
figure.graph .tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: baseline; }
figure.graph h3 { font-size: 16.5px; }
figure.graph .periode { font: 11.5px var(--f-data); color: var(--fg-2); }
figure.graph .question { font-size: 12.5px; color: var(--accent); }
figure.graph figcaption { font-size: 11.5px; color: var(--fg-2); border-top: 1px dashed var(--ligne); padding-top: 6px; }
.outils-graph { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.outils-graph button { border: 1px solid var(--ligne); background: var(--surface-2); padding: 2px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; }
.outils-graph button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.leg button { border: 0; background: none; padding: 0; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; color: var(--fg); }
.leg button[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }
.leg i { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
.zone-graph { position: relative; user-select: none; }
.zone-graph svg { width: 100%; height: auto; display: block; overflow: visible; }
.axe text { fill: var(--fg-2); font: 10.5px var(--f-data); }
.axe line, .axe path { stroke: var(--ligne); }
.grillage line { stroke: var(--ligne); stroke-dasharray: 2 3; }
.bulle { position: fixed; pointer-events: none; z-index: 60; background: var(--surface); border: 1px solid var(--ligne); border-radius: 4px; padding: 6px 9px;
  font: 11.5px/1.5 var(--f-data); box-shadow: 0 4px 14px rgba(0,0,0,.18); max-width: 320px; color: var(--fg); }
.selection-zoom { fill: var(--accent); fill-opacity: .12; stroke: var(--accent); stroke-dasharray: 3 3; }

/* Documentation */
.doc pre { white-space: pre-wrap; font: 12.5px/1.55 var(--f-data); background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 4px; padding: 10px 12px; margin: 0; overflow-x: auto; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .haut, .rail, .barre-actions, .outils-graph { display: none !important; }
  .cadre { display: block; } main { padding: 0; } body { background: #fff; }
}

/* Petits écrans : rien ne doit élargir la page */
select, input, textarea { max-width: 100%; }
.ligne-actions > label, .ligne-actions > span { max-width: 100%; min-width: 0; }
.kpis { grid-template-columns: repeat(auto-fill, minmax(min(100%, 175px), 1fr)); }
@media (max-width: 600px) {
  .puce { white-space: normal; }
  .haut { gap: 6px 10px; }
  .champ { grid-template-columns: minmax(0, 1fr); }
  .config, .grille, .grille-2 { grid-template-columns: minmax(0, 1fr); }
  .entete p, .note { overflow-wrap: anywhere; }
  .alerte dl { grid-template-columns: minmax(0, 1fr); }
}