/* LA MODALE DE forge (#64) — les règles `.modale-*` du connecteur Kaordia, COPIÉES TELLES QUELLES de
   connecteur-kaordia `carte-mcp/src/briques/carte-mcp/style.css` (commit 66447e5b53e0e70d3879c2a234fc783233cfed74,
   lignes 227-268, sans ses quatre règles `.cockpit-btn` (les boutons du cockpit : ici `kd-btn`) : le CSS global que la brique « modale » 0.2.1 du catalogue exige — classes figées de son classes.js).
   ⭐ Seul ajout : les jetons qu'elles lisent, posés sur ceux de l'espace (.kd, charte/espace.css) — aucune couleur ici.
   Balisage (sans React) : <div class="modale-voile" hidden data-modale="nom"><div class="modale"><div class="modale-boite"
   role="dialog" aria-modal="true"><div class="modale-entete"><span class="modale-titre">…</span><span class="modale-espace">
   </span><button class="kd-btn kd-btn-ghost kd-btn-sm" data-modale-fermer>Fermer</button></div><div class="modale-corps">…
   </div><div class="modale-pied">…</div></div></div></div> ; un bouton `data-modale-ouvrir="nom"` l'ouvre (gabarit.py). */
.kd {
  --overlay-dark: var(--scrim); --bg-primary: var(--surface); --bg-secondary: var(--surface-2); --bg-inset: var(--surface-2);
  --bg-hover: var(--surface-2); --border-default: var(--border-strong); --border-light: var(--border);
  --text-primary: var(--text); --text-muted: var(--muted); --color-success: var(--accent);
  --pastille-vert-text: var(--accent-text); --pastille-rouge-text: var(--danger);
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --radius-sm: 8px; --radius-md: 12px;
  --text-xs: 12px; --text-sm: 14px; --text-lg: 18px; --font-semibold: 600;
}
.modale-voile { position: fixed; inset: 0px; background: var(--overlay-dark); z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modale-voile[data-etage="1"] { z-index: 70; }
.modale-voile[data-etage="2"] { z-index: 80; }
.modale-voile[data-etage="3"] { z-index: 90; }
.modale-voile[data-etage="4"] { z-index: 100; }
/* 0.4.0 — LA MODALE COMMUNE, au dessin du cockpit (#2232.2) : un contour uni, et dans la boîte des gestes PLEINS. */
.modale { padding: 1px; border-radius: 16px; background: var(--border-default); box-shadow: var(--shadow-lg); max-height: min(85vh, 100%); display: flex; flex-direction: column; width: min(var(--modale-largeur, 900px),100%); }
.modale-boite { border-radius: 14.5px; background: var(--bg-primary); outline: none; display: flex; flex-direction: column; min-height: 0px; flex: 1 1 auto; }
.modale-entete { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-light); }
.modale-entete[data-plusieurs] { flex-wrap: wrap; }
.modale-titre-bloc { min-width: 0px; }
.modale-titre, .modale-etape-nom { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); }
.modale-sous-titre { color: var(--text-muted); font-size: var(--text-xs); }
.modale-espace { flex: 1 1 0%; }
.modale-corps { overflow: hidden auto; flex: 1 1 auto; padding: var(--space-5); }
.modale-pied { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-light); flex-shrink: 0; }
.modale-marche { display: flex; gap: var(--space-2); align-items: center; }
.modale-avancement { flex: 1 1 0%; text-align: center; color: var(--text-muted); font-size: var(--text-xs); }
.modale-refus { padding: 8px 12px; margin: 0 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); border-left: 3px solid var(--pastille-rouge-text); color: var(--text-primary); }
:where(.modale-sequence-etape, .modale-etape-repliee) { margin: 0px; padding: 0px; border: 0px; border-radius: 0px; background: none; cursor: pointer; }
:where(.modale-sequence-etape, .modale-etape-repliee):focus-visible { outline: 2px solid var(--pastille-vert-text); outline-offset: 2px; }
.modale.modale-ecran { width: 84vw; height: 86vh; max-height: none; max-width: 100%; }
.modale-sequence { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0px; padding: 0px; flex-basis: 100%; }
.modale-sequence-item { display: flex; align-items: center; gap: 6px; }
.modale-sequence-fleche { color: var(--text-muted); }
.modale-sequence-etape { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; cursor: pointer; background: transparent; border: 1px solid var(--border-light); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); }
.modale-sequence-etape[aria-current="step"] { border-color: var(--accent); background: var(--accent-soft); }
.modale-pastille { width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; box-sizing: border-box; }
.modale-pastille[data-coche="verte"] { background: var(--color-success); color: var(--bg-primary); }
.modale-pastille[data-coche="grise"] { background: transparent; color: var(--text-muted); border: 1.5px solid var(--border-default); }
.modale-pastille[data-courante="oui"] { box-shadow: 0 0 0 3px var(--accent-soft); }
[data-grise="oui"] { color: var(--text-muted); }
.modale-etape-repliee { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 10px 12px; margin-bottom: 8px; text-align: left; border-radius: var(--radius-md); cursor: pointer; background: transparent; font: inherit; border: 1px solid var(--border-light); color: var(--text-primary); }
.modale-etape-titre { font-size: var(--text-sm); font-weight: var(--font-semibold); min-width: 140px; }
.modale-etape-resume { flex: 1 1 0%; font-size: var(--text-sm); color: var(--text-muted); }
.modale-etape-ouverte { padding: var(--space-4); margin-bottom: 8px; border-radius: var(--radius-md); border: 1px solid var(--accent); }
.modale-etape-entete { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.modale-manques { padding: 8px 12px; margin: 0 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-xs); border-left: 3px solid var(--border-default); background: var(--bg-secondary); color: var(--text-muted); }