/* LE BRANCHEMENT DE forge SUR L'ESPACE KAORDIA (#64) — la mise en page des écrans de forge avec les composants copiés
   (espace.css, modale.css), comme la coquille du connecteur les branche (espace.css ④). ⛔ AUCUNE COULEUR ICI : les
   variables de l'espace (`var(--…)`) seulement ; une couleur de plus se pose dans espace.css ②, jamais dans ce fichier. */
body.kd { margin: 0; }
.forge-page { max-width: 1200px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.forge-page > h1 { font-size: 28px; line-height: 1.2; }
.forge-pied { color: var(--muted); font-size: 13px; text-align: center; padding: 8px 24px 24px; }
.kd a.kd-tile, .kd a.kd-btn { text-decoration: none; }
.kd-tile-num[data-vide] { color: var(--numeral); }
.modale-voile[hidden] { display: none; }
/* LA CONNEXION : une carte de l'espace au milieu de l'écran */
.forge-connexion { min-height: calc(100vh - 61px); display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.forge-connexion .kd-card { width: min(420px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 20px;
  box-shadow: var(--shadow-sm); }
.forge-connexion form { display: flex; flex-direction: column; gap: 16px; }
.forge-connexion .kd-btn { width: 100%; }
.forge-refus { padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger);
  border: 1px solid var(--danger-border); font-size: 14px; }
.forge-qui { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); }
.forge-qui strong { color: var(--text); }
@media (max-width: 640px) {
  .forge-page { padding: 12px; gap: 16px; }
  .forge-page > h1, .kd-hero h1 { font-size: 22px; }
  .kd-hero { padding: 20px; }
}
/* (#61.3, #111.3) la console : ce qui lui reste en propre (film, coupure) ; sa composition est celle de la scène */
.forge-console-msg { color: var(--muted); font-size: 14px; }
.forge-console-film { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.forge-console-film[hidden] { display: none; }
.forge-console-film progress { flex: 1; height: 8px; accent-color: var(--accent); }
.forge-console-pied, .forge-console-vide { color: var(--muted); font-size: 13px; }
.forge-console-coupure { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-border); }
/* (#130.3) le bandeau « forge agit » et son « Arrêter », pendant une exécution en direct */
.forge-console-bandeau { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px;
  font-size: 14px; background: var(--accent-soft); border: 1px solid var(--border); }
.forge-console-bandeau[hidden] { display: none; }
.forge-console-bandeau span { flex: 1; color: var(--muted); }
.forge-chat-appareils { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* (#103.3) le chat « assistant IA », à côté de la console */
.forge-chat-aide, .forge-chat-sous { color: var(--muted); font-size: 13px; margin: 0; }
.forge-chat-fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overflow: auto;
  min-height: 120px; flex: 1; font-size: 14px; }
.forge-chat-msg { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.forge-chat-msg p { margin: 2px 0; }
.forge-chat-msg[data-genre="attente"] { background: var(--accent-soft); align-self: flex-end; max-width: 90%; }
.forge-chat-msg[data-genre="refus"], .forge-chat-msg[data-genre="echec"] { background: var(--danger-soft); border-color: var(--danger-border); }
.forge-chat-qui { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.forge-chat-lignes { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.forge-chat-carte { display: flex; flex-direction: column; gap: 4px; }
.forge-chat-plan { margin: 0; padding-left: 20px; font-size: 13px; }
.forge-chat-phases { list-style: none; padding-left: 4px; }
.forge-chat-phases [data-allume="a_venir"] { opacity: .55; }
.forge-chat-phases [data-allume="en_cours"] { font-weight: 600; }
.forge-chat-phases [data-allume="echec"], .forge-chat-phases [data-allume="arret"] { font-weight: 600; color: var(--theme-danger); }
.forge-chat-juge { margin: 0; padding-left: 4px; list-style: none; font-size: 13px; }
.forge-chat-juge li[data-juste="non"] { color: var(--theme-danger); font-weight: 600; }
.forge-chat-empreinte { word-break: break-all; font-size: 12px; }
.forge-chat-jetons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.forge-chat-jetons[hidden] { display: none; }
.forge-chat-form { display: flex; flex-direction: column; gap: 6px; }
.forge-chat-actions { display: flex; gap: 8px; } .forge-chat-actions select { flex: 1; min-width: 0; }
/* (#111.3) LE GABARIT DE LA SCÈNE (scene.py), tiré de la maquette 2 : navigation ; chat à gauche (30 %) ; une colonne
   (en-tête, frise, vue 16/9, tiroirs, bande). Repris par toutes les pages de forge. */
.sc-nav { display: flex; gap: 4px; padding: 6px 16px; border-bottom: 1px solid var(--border); background: var(--surface);
  overflow-x: auto; }
.sc-nav-lien { padding: 6px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14px;
  font-weight: 600; white-space: nowrap; }
.sc-nav-lien:hover { color: var(--text); background: var(--surface-2); }
.sc-nav-lien[aria-current] { color: var(--text); background: var(--accent-soft); }
.sc { box-sizing: border-box; display: grid; grid-template-columns: minmax(280px, 30fr) minmax(0, 70fr); gap: 12px;
  padding: 12px 16px; align-items: start; }
.sc.sc-sans-chat { grid-template-columns: minmax(0, 1fr); }
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc h1, .sc h2, .sc p { margin: 0; }
.sc .kd-card { min-width: 0; }
.sc-chat { display: flex; flex-direction: column; gap: 12px; padding: 16px; position: sticky; top: 12px;
  max-height: calc(100vh - 110px); }
.sc-chat-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-chat-tete h2 { font-size: 18px; }
.sc-colonne { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sc-tete { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sc-titre { font-size: 20px; line-height: 1.25; font-weight: 700; }
.sc-sous-titre { color: var(--muted); font-size: 14px; margin-top: 4px; }
.sc-tete-droite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-colonne > .kd-details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.sc-frise > summary, .sc-tiroir > summary { font-weight: 700; }
.sc-etapes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: row; overflow-x: auto; gap: 4px; }
.sc-etapes li { flex: 0 0 auto; max-width: 240px; display: flex; gap: 8px; align-items: flex-start; font-size: 13px;
  color: var(--muted); padding: 4px 8px; border-radius: 8px; }
.sc-etapes li[data-etat="faite"] { color: var(--text); }
.sc-etapes li[data-etat="courante"] { color: var(--text); font-weight: 700; background: var(--accent-soft); }
.sc-puce { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  border: 1px solid var(--border-strong); }
.sc-etapes li[data-etat="faite"] .sc-puce { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.sc-vue-carte { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.sc-vue { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; position: relative; }
.sc-vue > img, .sc-vue > iframe { width: 100%; height: 100%; object-fit: contain; border: 0; display: block;
  background: var(--surface); }
.sc-repos { padding: 32px; color: var(--muted); text-align: center; max-width: 52ch; display: flex; flex-direction: column;
  gap: 12px; align-items: center; }
.sc-repos strong { color: var(--text); }
.sc-vue > .sc-repos-sur-image { position: absolute; inset: auto 16px 16px 16px; max-width: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 16px; }
.sc-legende { color: var(--muted); font-size: 13px; min-height: 1em; }
.sc-h2 { font-size: 14px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sc-bande ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; }
.sc-bande li { flex: 0 0 210px; }
.sc-carte { width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
  font: inherit; text-decoration: none; }
.sc-carte[aria-current] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.sc-carte-nom { font-weight: 600; font-size: 14px; }
.sc-meta { color: var(--muted); font-size: 12px; }
.sc-journal { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; max-height: 40vh; overflow: auto; }
.sc-journal li { display: grid; grid-template-columns: 56px 130px 1fr; gap: 8px; }
.sc-journal li[data-ton="attention"] { color: var(--danger); }
.sc-journal .sc-t { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.sc-journal .sc-genre { color: var(--muted); }
.sc-technique .kd-mono { word-break: break-all; font-size: 12px; }
.sc-chat .forge-chat-fil { min-height: 120px; }
.sc-chat .forge-chat-actions { flex-wrap: wrap; }
@media (max-width: 1100px) {
  .sc { grid-template-columns: 1fr; padding: 12px; }
  .sc-chat { position: static; max-height: none; }
}