/* Layout IDE, thème sombre unique : barre d'outils / consigne repliable / éditeur (flex) / console à hauteur fixe. Rien ne scrolle hors des zones. */
:root{
  color-scheme:dark;
  --bg:#141719; --bar:#1b1f22; --panel:#1f2428; --panel2:#181c1f; --fg:#e4e6e3; --muted:#8a949a;
  --accent:#5fb0cf; --accent-fg:#0d1a20; --line:#2b3236; --num:#4f5a60;
  --ok:#7fd19c; --err:#f08b8b; --warn:#e8c170;
  --kw:#d2a4e8; --str:#9bd7b0; --numlit:#f2b27a; --builtin:#7cc4e0;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.45;
  display:flex;flex-direction:column;
  padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px))}
button{font:inherit;font-size:12.5px;font-weight:600;border:0;border-radius:4px;padding:5px 12px;cursor:pointer;background:var(--accent);color:var(--accent-fg)}
button.alt{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
button.ghost{background:transparent;color:var(--muted);font-weight:500;padding:4px 8px}
button.ghost:hover{color:var(--fg)}
button:disabled{opacity:.45;cursor:default}
button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
code{font-family:var(--mono);font-size:.9em;background:var(--panel2);padding:1px 5px;border-radius:3px;color:var(--str)}

/* barre du haut */
.topbar{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--bar);border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.topbar h1{font-size:13px;font-weight:600;margin:0;letter-spacing:.01em}
.topbar .sep{flex:1}
select#exsel{font:inherit;font-size:12.5px;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:3px 8px}
.stepnav{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#status{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);display:flex;align-items:center;gap:6px}
#status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn)}
#status.ok::before{background:var(--ok)} #status.err::before{background:var(--err)}

/* consigne repliable */
.brief{flex:none;background:var(--panel);border-bottom:1px solid var(--line)}
.brief summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:12px;color:var(--muted);user-select:none}
.brief summary::-webkit-details-marker{display:none}
.brief summary::before{content:"▸";color:var(--accent);transition:transform .15s}
.brief[open] summary::before{transform:rotate(90deg)}
.brief summary b{color:var(--fg);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px}
.brief .body{padding:2px 14px 12px 32px;max-height:34vh;overflow:auto;font-size:13.5px;max-width:78ch}
.brief .body p{margin:0 0 7px}
.brief .tip{border-left:2px solid var(--accent);padding-left:10px;color:var(--muted);font-size:12.5px;margin-top:6px}
.brief .trap{color:var(--err);font-weight:600}
.brief .theory{color:var(--muted)}
.brief .task{color:var(--fg);font-weight:500;border-left:2px solid var(--accent);padding-left:10px}
.brief .task code{color:var(--str)}
.brief .snip{color:var(--fg);max-width:none}
.brief .snip-title{color:var(--muted)}
.kind{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;padding:1px 7px;border-radius:8px;background:var(--line);color:var(--muted)}
.kind.assemble{background:rgba(95,176,207,.18);color:var(--accent)} .kind.trap{background:rgba(240,139,139,.18);color:var(--err)}
#streak{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} #streak b{color:var(--warn)}
#checks li.bravo{color:var(--ok);font-weight:600;grid-template-columns:1fr;font-size:14px}
.brief .body pre{margin:8px 0 10px;padding:10px 12px;background:var(--panel2);border-radius:4px;font-family:var(--mono);font-size:12.5px;line-height:1.55;overflow-x:auto;white-space:pre;color:var(--str)}
.brief .body strong{color:var(--fg)}
.brief[data-lesson] .body{max-height:60vh}

/* éditeur */
.editor{flex:1 1 auto;min-height:120px;display:flex;flex-direction:column;background:var(--panel2)}
.tab{flex:none;display:flex;align-items:center;gap:10px;padding:6px 14px;font-family:var(--mono);font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);background:var(--bar)}
.tab .sep{flex:1}
.tab .kbd{font-size:10.5px;opacity:.8}
.cmwrap{flex:1 1 auto;min-height:0;position:relative}
.cmwrap .CodeMirror{position:absolute;inset:0;height:100%}
.CodeMirror{background:var(--panel2);color:var(--fg);font-family:var(--mono);font-size:13.5px;line-height:1.6}
.CodeMirror-gutters{background:var(--panel2);border-right:1px solid var(--line)}
.CodeMirror-linenumber{color:var(--num);padding:0 10px 0 12px}
.CodeMirror-cursor{border-left:1.5px solid var(--fg)}
.CodeMirror-selected,.CodeMirror-focused .CodeMirror-selected{background:rgba(95,176,207,.22)}
.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:rgba(95,176,207,.22)}
.CodeMirror-activeline-background{background:rgba(255,255,255,.03)}
.CodeMirror-matchingbracket{color:var(--accent)!important;font-weight:600;text-decoration:none}
.cm-s-default .cm-keyword{color:var(--kw)} .cm-s-default .cm-string{color:var(--str)} .cm-s-default .cm-number{color:var(--numlit)}
.cm-s-default .cm-comment{color:var(--muted);font-style:italic} .cm-s-default .cm-builtin{color:var(--builtin)}
.cm-s-default .cm-def,.cm-s-default .cm-variable,.cm-s-default .cm-operator,.cm-s-default .cm-property{color:var(--fg)}
.cm-s-default .cm-atom{color:var(--numlit)}

/* console / validation */
.bottom{flex:none;height:30vh;min-height:150px;display:flex;flex-direction:column;border-top:1px solid var(--line);background:var(--bg)}
.bottom .tab{background:var(--bar)}
.bottom .tabs{display:flex;gap:2px}
.bottom .tabs button{background:transparent;color:var(--muted);font-family:var(--mono);font-weight:500;font-size:11.5px;padding:3px 10px;border-radius:3px}
.bottom .tabs button[aria-selected="true"]{color:var(--fg);background:var(--panel)}
.bottom .tabs button .badge{display:inline-block;margin-left:6px;font-size:10px;padding:0 5px;border-radius:8px;background:var(--line);color:var(--fg);font-variant-numeric:tabular-nums}
.bottom .tabs button .badge.ok{background:var(--ok);color:#0d1a12} .bottom .tabs button .badge.ko{background:var(--err);color:#200a0a}
.pane{flex:1 1 auto;min-height:0;overflow:auto}
pre#out{margin:0;padding:10px 14px;font-family:var(--mono);font-size:13px;line-height:1.55;white-space:pre;color:#dfe6e2}
pre#out .err{color:var(--err)} pre#out .dim{color:var(--num)}
#checks{list-style:none;margin:0;padding:10px 14px;display:grid;gap:6px;font-size:13px}
#checks li{display:grid;grid-template-columns:1.4em 1fr;gap:6px}
#checks li.ok::before{content:"✓";color:var(--ok);font-weight:600}
#checks li.ko::before{content:"✗";color:var(--err);font-weight:600}
#checks li.done{color:var(--ok);font-weight:600;grid-template-columns:1fr;margin-top:4px}
#checks li.dim{color:var(--muted);grid-template-columns:1fr}
@media (max-width:600px){.topbar h1{display:none}.tab .kbd{display:none}}
@media (prefers-reduced-motion:reduce){.brief summary::before{transition:none}}

.llmbar{font-size:12px;color:var(--muted);padding:6px 14px;border-bottom:1px solid var(--line)}
.llmbar a{color:var(--accent)}
.llmbar.warn{color:#f0b429;background:rgba(240,180,41,.08)}