/* ---------- editor ---------- */
.editor-card { border-radius: 14px; overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow); background: var(--term-bg); }
.editor-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: #2b241e; border-bottom: 1px solid #3a312a;
}
.lights { display: flex; gap: 6px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.lights i:nth-child(1) { background: #e6560f; }
.lights i:nth-child(2) { background: #f2a33c; }
.lights i:nth-child(3) { background: #7fc9a6; }
.editor-bar .file { font-family: "IBM Plex Mono", monospace; font-size: .76rem; color: #b7a996; letter-spacing: .04em; }
.editor-bar .spacer { flex: 1; }
.editor-bar .reset {
  background: none; border: 0; color: #b7a996; font-family: "IBM Plex Mono", monospace;
  font-size: .72rem; letter-spacing: .05em; padding: 3px 6px;
}
.editor-bar .reset:hover { color: #fff; }
/* ---------- éditeur : gouttière + calque coloré ----------
   Trois couches superposées au pixel près : la gouttière, le code coloré, et
   par-dessus le textarea réel rendu transparent (on n'en voit que le curseur
   et la sélection). Les métriques sont en pixels entiers et jamais en `em` —
   un arrondi d'un demi-pixel par ligne suffit à décaler les numéros en bas. */
/* C'est le textarea seul qui donne sa hauteur au bloc : gouttière et calque
   coloré sont posés dessus en absolu. Si la gouttière restait dans le flux,
   son contenu tirerait la rangée plus haut que le champ et laisserait une
   bande morte sous le curseur. */
.ed-wrap {
  --ed-fs: 14px; --ed-lh: 23px; --ed-py: 15px; --ed-px: 16px; --ed-gut: 44px;
  position: relative; background: var(--term-bg);
  font-family: "IBM Plex Mono", monospace; font-size: var(--ed-fs); line-height: var(--ed-lh);
  tab-size: 4;
}
.ed-gutter {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--ed-gut);
  overflow: hidden; user-select: none; pointer-events: none;
  padding: var(--ed-py) 0; box-sizing: border-box;
  border-right: 1px solid #342c25; background: #241e19;
}
.ed-gutter i {
  display: block; height: var(--ed-lh); font-style: normal; text-align: right;
  padding-right: 9px; color: #6f6355; font-variant-numeric: tabular-nums;
}
.ed-gutter i.err { color: var(--term-red); font-weight: 600; }
.ed-code { position: relative; }
.ed-hl {
  position: absolute; inset: 0; margin: 0; overflow: hidden; pointer-events: none;
  padding: var(--ed-py) var(--ed-px) var(--ed-py) calc(var(--ed-gut) + var(--ed-px));
  white-space: pre; color: var(--term-ink); font: inherit; line-height: inherit; tab-size: 4;
}
.ed-errband {
  position: absolute; left: var(--ed-gut); right: 0; height: var(--ed-lh);
  background: rgba(242,137,127,.13); border-left: 2px solid var(--term-red);
}
.ed-wrap textarea {
  display: block; position: relative; z-index: 1; width: 100%; box-sizing: border-box;
  border: 0; outline: none; margin: 0; resize: vertical;
  background: transparent; color: transparent; caret-color: var(--accent);
  font: inherit; line-height: inherit; tab-size: 4;
  padding: var(--ed-py) var(--ed-px) var(--ed-py) calc(var(--ed-gut) + var(--ed-px));
  white-space: pre; overflow: auto; overflow-wrap: normal;
}
/* Sélection translucide : le code coloré reste lisible dessous. */
.ed-wrap textarea::selection { background: rgba(242,131,71,.38); }
textarea#editor { min-height: 210px; }

/* Palette Rust. Le terminal est sombre dans les deux thèmes : une seule suffit. */
.hl-kw { color: #ff9d78; }                          /* fn let match impl…    */
.hl-ty { color: var(--term-green); }                /* i32 String Option…    */
.hl-fn { color: var(--term-blue); }                 /* appels de fonction    */
.hl-mc { color: #f2a33c; font-weight: 600; }        /* println! vec!         */
.hl-st { color: #cbd98f; }                          /* "chaînes"             */
.hl-nb { color: #e5b878; }                          /* 42  3.14             */
.hl-cm { color: #7d7264; font-style: italic; }      /* // commentaires      */
.hl-at { color: #a99bd6; }                          /* #[derive(Debug)]     */
.hl-lt { color: #d8a0c8; }                          /* 'a                   */
.hl-pn { color: #a2907d; }                          /* ponctuation          */

.run-row { display: flex; align-items: center; gap: 12px; background: #2b241e; padding: 11px 14px; }
.btn-run {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 9px;
  padding: 9px 20px; font-weight: 600; font-family: "IBM Plex Mono", monospace;
  font-size: .82rem; letter-spacing: .05em; display: inline-flex; align-items: center; gap: 8px;
  transition: filter .15s;
}
.btn-run:hover { filter: brightness(1.08); }
.run-row .kbd-hint { font-family: "IBM Plex Mono", monospace; font-size: .7rem; color: #8c7f6f; }

/* Voir la solution : discret tant qu'on n'y touche pas, franc quand il faut
   confirmer — la réponse ne doit pas se dévoiler sur un clic malheureux. */
.sol-btn {
  margin-left: auto; background: none; border: 1px solid #4a3f36; border-radius: 8px;
  color: #b7a996; font-family: "IBM Plex Mono", monospace; font-size: .72rem;
  letter-spacing: .04em; padding: 7px 12px; transition: color .15s, border-color .15s, background .15s;
}
.sol-btn:hover { color: #fff; border-color: #6a5b4d; }
.sol-btn.armed { color: var(--term-red); border-color: var(--term-red); background: rgba(242,137,127,.08); }
.cexo-bar .sol-btn { margin-left: 0; font-size: .68rem; padding: 5px 10px; }

.console {
  background: var(--term-bg); color: var(--term-ink); margin: 0;
  font-family: "IBM Plex Mono", monospace; font-size: .82rem; line-height: 1.6;
  padding: 14px 18px 18px; white-space: pre-wrap; word-break: break-word;
  border-top: 1px solid #3a312a; min-height: 84px; max-height: 340px; overflow: auto;
}
.console .dim { color: var(--term-dim); }
.console .g { color: var(--term-green); }
.console .r { color: var(--term-red); }
.console .b { color: var(--term-blue); }
.console .ok-banner { color: var(--term-green); font-weight: 600; }
.console .out { color: #fff; }
/* La sortie de rustc s'aligne à la colonne près : les `^^^` doivent tomber sous
   le bon jeton. On ne l'enveloppe donc pas — on la fait défiler. */
.console.rustc { white-space: pre; overflow-x: auto; word-break: normal; }
/* Quel moteur a répondu. Discret, mais toujours là : le simulateur et rustc ne
   sont pas d'accord sur tout, et l'élève doit savoir lequel il est en train de lire. */
.console .engine { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid #352d26;
  color: #6f6355; font-size: .74rem; }
.console .engine.real { color: var(--term-green); opacity: .75; }

.btn-run.is-busy { opacity: .6; cursor: progress; }
.btn-run:disabled { pointer-events: none; }