:root {
  --bg: #0e1116;
  --panel: #161b22;
  --border: #2a313c;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #58a6ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, "Segoe UI", sans-serif;
}

/* ---- Page d'accueil ---- */
.wrap { max-width: 900px; margin: 0 auto; padding: 48px 24px 80px; }
h1 { font-size: 2rem; margin: 0 0 8px; }
.sub { color: var(--muted); margin: 0 0 40px; }

.section {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1.15rem;
  margin: 40px 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.section:first-of-type { margin-top: 0; }
.section span {
  font-size: .75rem;
  font-weight: 400;
  color: var(--muted);
}
.sub-serre { margin-bottom: 20px; font-size: .9rem; }

/* Intertitre de thème, à l'intérieur d'un niveau. Plus discret qu'un .section :
   il regroupe des étapes consécutives sans découper la progression. */
.groupe {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 12px;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.groupe::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.groupe:first-of-type { margin-top: 18px; }

/* Un niveau de plus : les sous-sous-chapitres, imbriqués sous une carte.
   Le liseré à gauche matérialise l'emboîtement — sans lui, ils paraîtraient
   au même niveau que les étapes. */
.sous-chapitres {
  margin: -4px 0 14px 26px;
  padding: 4px 0 0 20px;
  border-left: 1px solid var(--border);
}
.sous-groupe {
  margin: 8px 0 10px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
.sous-groupe span { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Les 19 sous-chapitres de formes : compacts, sinon ils écrasent le sommaire. */
.formes-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.formes-liste a {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid #7ee787;
  border-radius: 8px;
  padding: 9px 12px;
  text-decoration: none;
  color: inherit;
  font-size: .82rem;
  transition: border-color .15s;
}
.formes-liste a:hover { border-color: #7ee787; }
.formes-liste a b { display: block; font-weight: 600; }
.formes-liste a span { color: var(--muted); font-size: .74rem; }

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 12px;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--accent); transform: translateX(4px); }
.card .num { color: var(--accent); font-weight: 600; margin-right: 10px; }

.card-bac {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(88, 166, 255, .1), transparent);
  margin-bottom: 36px;
}

/* Les étapes débutantes sont plus discrètes et signalées par un liseré vert. */
.card-debutant { border-left: 3px solid #7ee787; padding-block: 14px; }
.card-debutant:hover { border-color: #7ee787; }
.card-debutant .num { color: #7ee787; }

/* Les simulations : liseré orange. Elles n'enseignent pas une notion nouvelle,
   elles appliquent celles de l'étape dont elles portent le numéro. */
.card-simu { border-left: 3px solid #f78166; padding-block: 14px; }
.card-simu:hover { border-color: #f78166; }
.card-simu .num { color: #f78166; }

.card .desc { color: var(--muted); font-size: .9rem; margin-top: 6px; }

/* ---- Pages de leçon ---- */
canvas { display: block; }

.hud {
  position: fixed;
  top: 16px;
  left: 16px;
  max-width: 340px;
  background: rgba(22, 27, 34, .92);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: .85rem;
  line-height: 1.5;
  backdrop-filter: blur(6px);
}
.hud h2 { margin: 0 0 6px; font-size: 1rem; }
.hud p { margin: 0 0 8px; color: var(--muted); }
.hud a { color: var(--accent); }
.hud label { display: block; margin-top: 8px; color: var(--muted); }
.hud input[type="range"] { width: 100%; }
.hud kbd {
  background: #0e1116; border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-size: .8em;
}
.hud select {
  width: 100%; margin-top: 3px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 7px; font-family: inherit; font-size: .78rem;
}
.hud button {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 9px; margin: 2px 2px 0 0;
  font-family: inherit; font-size: .78rem;
  cursor: pointer;
}
.hud button:hover { border-color: var(--accent); }
.hud button.actif { border-color: var(--accent); color: var(--accent); }
.hud input[type="color"] {
  width: 100%; height: 26px; margin-top: 3px; padding: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer;
}

/* ---- Sous-chapitres d'une forme (formes/) ---- */

/* Ce HUD porte jusqu'à 9 curseurs plus la liste des pièges : il doit pouvoir défiler,
   sinon il déborde sous la fenêtre sur les formes les plus paramétrables. */
.hud-forme {
  max-width: 380px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.hud .famille {
  color: var(--accent);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 8px;
}
/* Un compteur sur plusieurs lignes (les simulations en affichent deux). */
.hud code.multi { white-space: pre-line; display: block; }
.hud .appel { margin-top: 12px; }
.hud .appel code { color: #7ee787; font-size: .78rem; }
.hud details { margin: 12px 0; border-top: 1px solid var(--border); padding-top: 10px; }
.hud summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--text); }
.hud summary:hover { color: var(--accent); }
.hud details ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.hud details li { margin-bottom: 8px; }

/* ---- Glisser-déposer d'un modèle (leçon 09) ---- */
.bouton-fichier {
  display: inline-block;
  background: var(--accent);
  color: #05070a;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
#animations label { display: block; margin-top: 6px; color: var(--muted); font-size: .8rem; }

/* Voile affiché uniquement pendant qu'un fichier survole la fenêtre. */
#zone-depot {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  background: rgba(14, 17, 22, .85);
  border: 3px dashed var(--accent);
  font-size: 1.4rem;
  color: var(--accent);
}
#zone-depot.actif { display: grid; }

/* ---- Panneau de code éditable ---- */

/* L'iframe qui exécute le code modifié remplace visuellement le <canvas> de la leçon.
   Elle reste sous le HUD et sous le panneau.

   `:empty` est indispensable : tant qu'aucun code modifié ne tourne, ce conteneur est vide.
   Étant positionné, il se peindrait AU-DESSUS du <canvas> de la leçon et intercepterait
   tous les clics — OrbitControls ne recevrait plus rien et la caméra semblerait figée. */
.apercu-modifie { position: fixed; inset: 0; z-index: 0; }
.apercu-modifie:empty { display: none; }
.hud, .code-toggle, .code-panel { z-index: 10; }

.code-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: var(--accent);
  color: #05070a;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font: 600 .85rem/1 system-ui, sans-serif;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.code-toggle:hover { transform: translateY(-2px); }
.code-toggle.cache { opacity: 0; pointer-events: none; }

.code-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(620px, 92vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(13, 17, 23, .97);
  border-left: 1px solid var(--border);
  backdrop-filter: blur(8px);
  transform: translateX(100%);
  transition: transform .25s ease;
}
.code-panel.ouvert { transform: none; }

.code-panel header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
  font-weight: 600;
}
.code-panel header span { flex: 1; }
.code-panel header .auto {
  display: flex; align-items: center; gap: 5px;
  font-weight: 400; color: var(--muted); font-size: .78rem;
}
.code-panel header button {
  background: var(--accent);
  color: #05070a;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.code-panel header .secondaire {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
  font-weight: 400;
}
.code-panel header .secondaire:hover { border-color: var(--accent); }
.code-panel header button:disabled { opacity: .4; cursor: default; }
.code-panel .fermer { padding: 2px 9px; font-size: 1.1rem; line-height: 1.2; }

/* La zone d'édition prend toute la hauteur restante ; min-height:0 est indispensable
   dans un conteneur flex, sinon elle refuse de se réduire et déborde. */
.code-panel .zone-edition { flex: 1; min-height: 0; }

.console-mini {
  flex: 0 0 auto;
  max-height: 130px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
  font: 11.5px/1.5 Consolas, monospace;
}
.console-mini:empty { border-top: 0; }
.console-mini li { padding: 5px 14px; border-bottom: 1px solid rgba(255,255,255,.03); white-space: pre-wrap; }
.console-mini li.error { color: #ff7b72; }
.console-mini li.warn  { color: #e3b341; }
.console-mini li.log   { color: var(--muted); }

/* Coloration syntaxique (voir js/highlight.js) */
.c-com { color: #6b7785; font-style: italic; }
.c-str { color: #a5d6ff; }
.c-num { color: #79c0ff; }
.c-fn  { color: #d2a8ff; }
.c-kw  { color: #ff7b72; }
.c-ns  { color: #7ee787; }

/* ---- Bac à sable (editeur.html) ---- */
.page-editeur {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.barre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.barre .retour { color: var(--muted); text-decoration: none; font-size: 1.2rem; }
.barre .retour:hover { color: var(--accent); }
.barre strong { flex: 1; font-weight: 600; }
.barre .auto { color: var(--muted); display: flex; align-items: center; gap: 6px; }

.barre select,
.barre button {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: .82rem;
  font-family: inherit;
  cursor: pointer;
}
.barre button:not(.secondaire) { background: var(--accent); color: #05070a; border-color: transparent; font-weight: 600; }
.barre button:not(.secondaire) kbd { background: rgba(0,0,0,.18); border: 0; color: inherit; }
.barre select:hover, .barre .secondaire:hover { border-color: var(--accent); }

.atelier {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  min-height: 0; /* sinon les enfants en overflow forcent la grille à déborder */
}
@media (max-width: 900px) { .atelier { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }

/* Le <pre> coloré et le <textarea> doivent se superposer AU PIXEL PRÈS :
   mêmes police, taille, interligne, marges. Toute divergence décale le curseur.
   Ces règles servent aussi au panneau des leçons (voir js/editeur-widget.js). */
.editeur { position: relative; overflow: hidden; }
.atelier .editeur { border-right: 1px solid var(--border); }
.editeur .surlignage,
.editeur textarea {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  font: 13px/1.6 "Cascadia Code", Consolas, monospace;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}
.editeur .surlignage { pointer-events: none; background: #0d1117; }
.editeur textarea {
  background: transparent;
  color: transparent;         /* le texte visible est celui du <pre> */
  caret-color: var(--accent); /* mais le curseur, lui, doit rester visible */
  resize: none;
  outline: none;
}
.editeur textarea::selection { background: rgba(88, 166, 255, .3); }

/* ---- L'atelier (atelier.html) ---- */

/* La colonne de gauche empile la consigne et l'éditeur. `min-height: 0` est
   indispensable dans une grille : sans lui, l'éditeur refuse de se réduire et déborde. */
.colonne-edition {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  border-right: 1px solid var(--border);
}
/* Le bord est porté par la colonne, plus par l'éditeur lui-même. */
.colonne-edition .editeur { border-right: 0; }

.consigne {
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font-size: .85rem;
  line-height: 1.5;
  max-height: 40vh;
  overflow-y: auto;
}
.consigne h3 { margin: 0 0 6px; font-size: .95rem; }
.consigne p { margin: 0 0 6px; color: var(--muted); }
.consigne .essais { margin-top: 10px; color: var(--text); font-size: .8rem; }
.consigne ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .82rem; }
.consigne li { margin-bottom: 4px; }
.consigne code { color: #7ee787; font-size: .95em; }

.rendu { display: grid; grid-template-rows: 1fr auto; min-height: 0; }
#apercu { position: relative; background: #0e1116; }
.apercu { width: 100%; height: 100%; border: 0; display: block; }

.console {
  border-top: 1px solid var(--border);
  background: var(--panel);
  height: 170px;
  display: flex;
  flex-direction: column;
}
.console header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.console button { padding: 3px 9px; font-size: .7rem; background: var(--bg); color: var(--muted); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; }
.console ul { flex: 1; overflow: auto; margin: 0; padding: 8px 12px; list-style: none; font: 12px/1.6 Consolas, monospace; }
.console li { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.03); white-space: pre-wrap; }
.console li.error { color: #ff7b72; }
.console li.warn  { color: #e3b341; }
.console li.log   { color: var(--muted); }

/* La valeur en degrés, à côté du nom d'un paramètre d'angle. */
.hud .deg { color: var(--accent); font-variant-numeric: tabular-nums; }
.simu-mot { color: #f78166; }

/* Les titres des volets de la simulation 4.1, posés par-dessus le canvas.
   Ils occupent les 70 % de droite, comme les viewports qu'ils légendent. */
.volets {
  position: fixed;
  left: 30%;
  right: 0;
  bottom: 18px;
  display: flex;
  z-index: 5;
  pointer-events: none;
}
.volets div {
  flex: 1;
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  text-shadow: 0 1px 4px #000, 0 0 12px #000;
}