/* À LA DÉCOUVERTE DE L'INFORMATIQUE — feuille de style
   Mise en page : une barre en haut, puis un écran plein cadre. Écran d'activité : la scène (simulateur, éditeur,
   tables) à gauche, avec ses onglets au-dessus et ses commandes en dessous, le texte à droite.
   Même famille que « À la découverte des cellules » (titres Bricolage Grotesque, texte Atkinson Hyperlegible,
   code et étiquettes IBM Plex Mono).
   Couleurs : un indigo pour l'interface, un orange vif pour les boutons d'action ; un fond bleuté pour les
   réseaux, sable pour les bases de données, crème pour Python. Chaque protocole a sa couleur. */
:root {
  --fond: #f3f4f8;
  --surface: #ffffff;
  --surface-2: #e9ebf3;
  --surface-3: #dfe2ee;
  --encre: #161a2e;
  --encre-2: #545a74;
  --ligne: #d4d8e5;
  --accent: #4338ca;
  --accent-encre: #ffffff;
  --accent-doux: #e4e3fb;
  --vif: #d9480f;
  --vif-encre: #ffffff;
  --vif-doux: #fde5d5;
  --ocre: #a8670f;
  --bon: #1d7a3a;
  --bon-doux: #dcf2e3;
  --bon-encre: #ffffff; /* texte posé sur un fond var(--bon) */
  --faux: #b3261e;
  --faux-doux: #fbe2df;
  --faux-encre: #ffffff; /* texte posé sur un fond var(--faux) */
  --attention: #9a6700;
  --attention-doux: #fff1c9;
  --or: #b8860b;
  --bulle-fond: #161a2e;
  --bulle-texte: #ffffff;
  --verre: rgba(255, 255, 255, 0.86);
  --halo: rgba(255, 255, 255, 0.92);
  --ombre: 0 1px 2px rgba(20, 24, 50, 0.08), 0 8px 24px rgba(20, 24, 50, 0.08);
  --ombre-forte: 0 2px 6px rgba(20, 24, 50, 0.12), 0 18px 42px rgba(20, 24, 50, 0.18);

  --scene-reseau-1: #f1f5fd; --scene-reseau-2: #d3dff2;
  --scene-sql-1: #f8f5ec; --scene-sql-2: #e3dbc4;
  --scene-python-1: #f8f7ee; --scene-python-2: #e6e1c3;

  /* appareils du simulateur */
  --app-corps: #e8ebf3; --app-bord: #3a4060; --app-ecran: #8fb8ea; --app-ecran-2: #4f7fc6;
  --app-switch: #2f6f8f; --app-routeur: #b5442c; --app-borne: #5b3fa8; --app-serveur: #47506e;
  --cable: #47506e; --onde: #6d4fd0;
  /* protocoles */
  --p-arp: #c99400; --p-icmp: #2a6fdb; --p-dns: #8b3fd9; --p-dhcp: #1e9a55; --p-tcp: #e06d10; --p-http: #d6336c; --p-udp: #6c757d;

  /* coloration du code */
  --c-mot: #7c3aed; --c-texte: #0f7b3d; --c-nombre: #c2410c; --c-comment: #6b7280; --c-natif: #1d5fd1; --c-def: #a34e00; --c-op: #545a74;
  --code-fond: #fbfbfe; --code-gouttiere: #eef0f6; --ligne-active: rgba(255, 196, 0, 0.26); --ligne-faite: rgba(67, 56, 202, 0.10);
  --terminal-fond: #11151f; --terminal-texte: #d7e3f4; --terminal-ok: #7ee2a8; --terminal-erreur: #ff8f85; --terminal-invite: #f5c451;

  --f-titre: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: 0.78rem; --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.2rem; --t-xl: 1.6rem; --t-xxl: clamp(2rem, 4.2vw, 3.1rem);
  --rayon: 10px;
  --gouttiere: 16px;
  --panneau: 380px;
}
/* Pas de thème sombre : le site ScolaTools n'en a pas, et ../commun/scolatools.css (chargé après cette feuille)
   garde le texte et les panneaux en clair. Garder ici des appareils, des protocoles, du code et des scènes sombres
   donnait du texte foncé sur une scène ou un éditeur foncés quand l'ordinateur de l'élève était réglé en mode
   sombre. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: var(--t-m)/1.55 var(--f-texte);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--f-titre); line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
a { color: var(--accent); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.code, code { font-family: var(--f-mono); font-size: 0.9em; background: var(--surface-2); padding: 0 5px; border-radius: 4px; }
pre.code-texte { font-family: var(--f-mono); font-size: var(--t-s); background: var(--code-fond); border: 1px solid var(--ligne); border-radius: 8px; padding: 10px 12px; margin: 0; overflow: auto; line-height: 1.5; }

.app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }

/* ---------- ambiances ---------- */
[data-fond] { --scene-1: var(--scene-reseau-1); --scene-2: var(--scene-reseau-2); }
[data-fond="sql"] { --scene-1: var(--scene-sql-1); --scene-2: var(--scene-sql-2); }
[data-fond="python"] { --scene-1: var(--scene-python-1); --scene-2: var(--scene-python-2); }

/* ---------- barre ---------- */
.barre {
  display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap;
  padding: 10px var(--gouttiere);
  background: var(--surface);
  border-bottom: 1px solid var(--ligne);
  position: relative; z-index: 5;
}
.lien-portail {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; margin-right: -12px;
  color: var(--encre-2); text-decoration: none; font-size: var(--t-l); border: 1px solid var(--ligne);
}
.lien-portail:hover { color: var(--accent); border-color: var(--accent); }
.marque { font-family: var(--f-titre); font-weight: 760; font-size: var(--t-l); color: var(--encre); text-decoration: none; letter-spacing: -0.02em; }
.barre nav { display: flex; gap: 4px; flex-wrap: wrap; }
.barre nav a { color: var(--encre-2); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: var(--t-s); }
.barre nav a:hover { color: var(--encre); background: var(--surface-2); }
.barre nav a[aria-current="page"] { color: var(--accent-encre); background: var(--accent); }

main { position: relative; min-height: 0; }
.ecran { position: absolute; inset: 0; }

/* ---------- boutons communs ---------- */
.bascule { display: inline-flex; flex-wrap: wrap; gap: 0; }
.bascule > button, .outil, .commandes button, .onglets a, .barre-outils button, .petit-bouton {
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); border-radius: 999px;
  padding: 6px 13px; font-size: var(--t-s); line-height: 1.2; text-decoration: none;
}
.bascule > button { border-radius: 0; margin-left: -1px; }
.bascule > button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.bascule > button:last-child { border-radius: 0 999px 999px 0; }
.bascule > button:hover, .outil:hover, .commandes button:hover, .onglets a:hover, .barre-outils button:hover, .petit-bouton:hover { border-color: var(--accent); }
.bascule > [aria-pressed="true"], .commandes button[aria-pressed="true"], .onglets a[aria-current="page"], .barre-outils button[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-encre); border-color: var(--accent); position: relative;
}
.commandes button.principal, .barre-outils button.principal, .petit-bouton.principal { background: var(--vif); border-color: var(--vif); color: var(--vif-encre); font-weight: 700; }
.commandes button.principal:hover, .barre-outils button.principal:hover, .petit-bouton.principal:hover { filter: brightness(1.08); }
.commandes button:disabled, .barre-outils button:disabled, .petit-bouton:disabled { opacity: 0.45; cursor: default; }
.petit-bouton { padding: 4px 10px; font-size: var(--t-xs); }
.bouton {
  border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; padding: 6px 14px;
  font-size: var(--t-s); font-weight: 700; text-decoration: none; display: inline-block;
}
.bouton:hover, .bouton.plein { background: var(--accent); color: var(--accent-encre); }

/* ---------- accueil ---------- */
.accueil, .page-texte { overflow: auto; }
.accueil-mise { max-width: 1200px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 30px; }
.accueil-tete { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 28px; align-items: center; }
.accueil-intro { display: grid; gap: 12px; max-width: 60ch; }
.surtitre { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vif); margin: 0; }
.accueil-intro h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; }
.accueil-intro p { margin: 0; color: var(--encre-2); font-size: var(--t-l); line-height: 1.5; }
.accueil-dessin { border-radius: 16px; overflow: hidden; border: 1px solid var(--ligne); box-shadow: var(--ombre); aspect-ratio: 16 / 9; background: var(--surface-2); }
.accueil-dessin svg { display: block; width: 100%; height: 100%; }
.fond-accueil { fill: var(--surface); }
.grille-accueil path { stroke: var(--surface-2); stroke-width: 1; }
.cable-accueil { stroke: var(--cable); stroke-width: 3; stroke-linecap: round; }
.app-corps { fill: var(--app-corps); stroke: var(--app-bord); stroke-width: 1.6; }
.app-ecran { fill: var(--app-ecran); }
.app-switch { fill: var(--app-switch); }
.app-port { fill: #ffffff; opacity: 0.85; }
.app-routeur { fill: var(--app-routeur); }
.app-fleches { stroke: #ffffff; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.paquet-svg { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }
.paquet-svg.p0 { fill: var(--p-icmp); } .paquet-svg.p1 { fill: var(--p-arp); } .paquet-svg.p2 { fill: var(--p-http); }
.paquet-pli { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.3; fill: none; }
.carte-svg { fill: var(--surface); stroke: var(--ligne); stroke-width: 1.5; }
.tete-table-svg { fill: var(--accent); }
.ligne-table-svg { fill: var(--surface-2); transition: fill 0.3s, opacity 0.3s; }
.ligne-table-svg.garde { fill: var(--bon-doux); stroke: var(--bon); stroke-width: 1.4; }
.ligne-table-svg.rejete { fill: var(--surface-2); opacity: 0.35; }
.terminal-svg { fill: var(--terminal-fond); }
.code-svg { font-family: var(--f-mono); font-size: 13px; fill: var(--terminal-texte); white-space: pre; }
.sortie-svg { fill: var(--terminal-ok); }
.curseur-svg { fill: var(--terminal-invite); }
.serpent-svg { stroke: #3776ab; stroke-width: 9; fill: none; stroke-linecap: round; }
.tete-serpent { fill: #ffd43b; stroke: #3776ab; stroke-width: 3; }
.section-accueil { display: grid; gap: 14px; }
.titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.section-accueil h2 { font-size: var(--t-xl); font-weight: 720; }
.bilan-missions { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
.grille-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.carte-theme {
  display: grid; grid-template-rows: auto 1fr auto; color: var(--encre);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre);
}
.carte-tete { display: grid; text-decoration: none; color: inherit; }
.carte-tete:hover h3 { color: var(--accent); }
.carte-theme .vignette { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: radial-gradient(110% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.carte-texte { padding: 12px 14px 6px; display: grid; gap: 6px; align-content: start; }
.carte-theme h3 { font-size: var(--t-l); font-weight: 740; }
.carte-theme p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.liste-activites { list-style: none; margin: 0; padding: 4px 8px 8px; display: grid; gap: 1px; align-content: start; }
.liste-activites a { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 8px; color: var(--encre); text-decoration: none; font-size: var(--t-s); }
.liste-activites a:hover { background: var(--accent-doux); color: var(--accent); }
.pastille { font-family: var(--f-mono); font-size: 0.7rem; color: var(--encre-2); flex: none; }
.pastille.complete { color: var(--bon); font-weight: 600; }
.pastille.complete::before { content: "✓ "; }
.carte-theme .pied { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); padding: 10px 14px 12px; border-top: 1px solid var(--ligne); }
.progression { width: 90px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; flex: none; }
.progression i { display: block; height: 100%; background: var(--bon); }
.raccourcis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bloc { background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 18px; display: grid; gap: 8px; align-content: start; color: var(--encre); }
.bloc h2 { font-size: var(--t-l); font-weight: 700; }
.bloc p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.bloc-lien { text-decoration: none; transition: border-color 0.2s ease; }
.bloc-lien:hover { border-color: var(--accent); }
.voir { font-weight: 700; color: var(--accent); font-size: var(--t-s); }
.credits { font-size: var(--t-xs); color: var(--encre-2); max-width: 90ch; border-top: 1px solid var(--ligne); padding-top: 18px; }
.credits p { margin: 0; }

/* ---------- écran d'activité ---------- */
.activite { display: grid; grid-template-columns: minmax(0, 1fr) var(--panneau); }
.activite.sans-panneau { grid-template-columns: minmax(0, 1fr); }
.activite.sans-panneau .panneau { display: none; }
.colonne-scene { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; background: radial-gradient(115% 90% at 50% 40%, var(--scene-1), var(--scene-2)); }
.tete-scene { display: flex; gap: 8px; align-items: flex-start; padding: 10px var(--gouttiere) 0; }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.onglets a { background: var(--verre); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 5px 12px; }
.bouton-panneau {
  flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--verre); color: var(--encre-2);
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
}
.bouton-panneau:hover { border-color: var(--accent); color: var(--accent); }
.scene { position: relative; min-height: 0; overflow: hidden; }
.scene > svg, .scene > canvas, .scene > .plein { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene svg { touch-action: manipulation; }
.commandes {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px var(--gouttiere) 12px;
  background: var(--verre); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--ligne);
  font-size: var(--t-s);
}
.commandes:empty { display: none; }
.commandes .groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.commandes .pousse { margin-left: auto; }
.curseur { display: grid; grid-template-columns: auto minmax(80px, 140px) auto; gap: 8px; align-items: center; }
.curseur span:first-child { color: var(--encre-2); }
.curseur output { font-family: var(--f-mono); font-variant-numeric: tabular-nums; min-width: 3.5em; }
.curseur input { width: 100%; accent-color: var(--accent); }
.case { display: inline-flex; gap: 6px; align-items: center; }
.case input { accent-color: var(--accent); }
.lecture { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--encre-2); }

.panneau {
  background: var(--surface); border-left: 1px solid var(--ligne); overflow: auto; min-width: 0;
  padding: 16px clamp(16px, 2vw, 24px) 32px; display: flex; flex-direction: column; gap: 14px;
}
.choix-module {
  width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre);
  font-size: var(--t-s); font-weight: 700;
}
.panneau h1 { font-size: var(--t-xl); font-weight: 760; }
.niveaux { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.niveaux span { font-family: var(--f-mono); font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); }
.consigne { margin: 0; font-size: var(--t-s); color: var(--encre-2); }
.info {
  border: 1px solid var(--accent); background: var(--accent-doux); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px;
  font-size: var(--t-s); animation: apparaitre 0.25s ease;
}
.info h2 { font-size: var(--t-l); font-weight: 720; color: var(--accent); }
.info p { margin: 0; }
.info .chiffres { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); }
@keyframes apparaitre { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.missions { display: grid; gap: 6px; }
.missions h2, .retenir h2, .savais h2, .titre-mono { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); }
.missions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.missions li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: var(--t-s); align-items: start; }
.missions li code { font-size: 0.85em; }
.missions li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ligne); margin-top: 1px; box-sizing: border-box; }
.missions li.faite { color: var(--encre-2); }
.missions li.faite::before { content: "✓"; border-color: var(--bon); background: var(--bon); color: var(--bon-encre); font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.missions li.vient::before { animation: tampon 0.6s ease; }
@keyframes tampon { 0% { transform: scale(0.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.texte { display: grid; gap: 10px; max-width: 68ch; }
.texte p { margin: 0; }
.texte p.tle { border-left: 3px solid var(--accent); padding-left: 10px; }
.texte p.tle::before { content: "Terminale"; font-family: var(--f-mono); font-size: 0.7rem; color: var(--accent); background: var(--accent-doux); padding: 0 6px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
.texte h3 { font-size: var(--t-m); font-weight: 720; margin-top: 4px; }
.retenir { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.retenir:empty, .savais:empty { display: none; }
.retenir h2, .savais h2 { margin-bottom: 6px; }
.retenir ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.savais { border: 1.5px dashed var(--ocre); border-radius: 12px; padding: 12px 14px; font-size: var(--t-s); }
.savais h2 { color: var(--ocre); }
.savais p { margin: 0; }
.suite { border-top: 1px solid var(--ligne); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.suite:empty { display: none; }
.suite a { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); color: var(--encre); text-decoration: none; font-size: var(--t-s); }
.suite a:hover { background: var(--accent-doux); color: var(--accent); }
.suite a.fort { background: var(--accent); color: var(--accent-encre); font-weight: 700; }

.mot {
  border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: help;
  text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em;
}
.mot:hover, .mot[aria-expanded="true"] { color: var(--accent); }
.bulle-mot {
  position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 32px)); background: var(--bulle-fond); color: var(--bulle-texte);
  padding: 9px 12px; border-radius: 10px; font-size: var(--t-s); line-height: 1.4; box-shadow: var(--ombre);
}
.bulle-mot strong { display: block; font-family: var(--f-titre); font-size: var(--t-m); margin-bottom: 2px; }
.bulle-mot code { background: rgba(127, 127, 127, 0.25); }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 70; background: var(--bon); color: var(--bon-encre);
  padding: 10px 18px; border-radius: 999px; font-weight: 700; box-shadow: var(--ombre); animation: monter 0.35s ease;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast[data-ton="neutre"] { background: var(--accent); color: var(--accent-encre); }
.toast[data-ton="erreur"] { background: var(--faux); color: var(--faux-encre); }
@keyframes monter { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- dessins des scènes (SVG) ---------- */
.scene svg text, .accueil-dessin svg text { font-family: var(--f-texte); }
.scene svg path:not([fill]), .accueil-dessin svg path:not([fill]) { fill: none; }
.etiq {
  font-size: calc(13px / var(--k, 1)); font-weight: 700; fill: var(--encre);
  paint-order: stroke; stroke: var(--halo); stroke-width: calc(3.5px / var(--k, 1)); stroke-linejoin: round;
}
.etiq.petite { font-size: calc(11.5px / var(--k, 1)); font-weight: 400; }
.etiq.grande { font-size: calc(16px / var(--k, 1)); font-family: var(--f-titre); }
.etiq.mono { font-family: var(--f-mono); font-weight: 500; }
.etiq.claire { fill: #ffffff; stroke: rgba(0, 0, 0, 0.35); }
.trait-etiq { stroke: var(--encre); stroke-width: calc(1.2px / var(--k, 1)); fill: none; }
.cliquable { cursor: pointer; }
.cliquable:hover, .cliquable:focus-visible { filter: brightness(1.08) drop-shadow(0 0 3px var(--accent)); outline: none; }

/* ---------- l'éditeur de code (Python et SQL) ---------- */
.editeur {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; overflow: auto;
  background: var(--code-fond); border: 1px solid var(--ligne); border-radius: 12px; font-family: var(--f-mono); font-size: 14px; line-height: 1.6;
  scroll-padding-left: 4.6em; /* le curseur ramené à gauche ne se cache pas sous la gouttière */
}
.editeur:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.editeur .gouttiere {
  background: var(--code-gouttiere); color: var(--encre-2); text-align: right; padding: 10px 6px 10px 4px; user-select: none; min-width: 3.4em;
  border-right: 1px solid var(--ligne); position: sticky; left: 0; z-index: 2;
}
.editeur .gouttiere div { position: relative; padding-left: 16px; font-size: 12.5px; }
.editeur .gouttiere div.active::before { content: "➜"; position: absolute; left: 0; top: 0; color: var(--vif); font-weight: 700; }
.editeur .gouttiere div.faite::before { content: "•"; position: absolute; left: 4px; top: 0; color: var(--accent); }
.editeur .gouttiere div.erreur { color: var(--faux); font-weight: 700; }
.editeur .gouttiere div.erreur::before { content: "✗"; position: absolute; left: 0; top: 0; color: var(--faux); }
/* la zone prend la largeur de la plus longue ligne : c'est la boîte qui défile, en largeur comme en hauteur */
.editeur .zone { position: relative; min-width: max-content; }
.editeur pre, .editeur textarea {
  margin: 0; padding: 10px 12px; font: inherit; line-height: inherit; white-space: pre; tab-size: 4; -moz-tab-size: 4; letter-spacing: 0;
  border: 0; min-height: 100%; overflow: hidden; word-wrap: normal;
}
.editeur pre { color: var(--encre); pointer-events: none; padding-right: 24px; /* marge : la zone de texte n'a jamais à défiler elle-même */ }
.editeur textarea {
  position: absolute; inset: 0; width: 100%; height: 100%; resize: none; background: transparent; color: transparent; caret-color: var(--encre);
  outline: none; overflow: hidden;
}
.editeur textarea::selection { background: rgba(67, 56, 202, 0.25); color: transparent; }
.editeur .surlignage { position: absolute; left: 0; right: 0; height: 1.6em; pointer-events: none; }
.editeur .surlignage.active { background: var(--ligne-active); border-left: 3px solid var(--vif); }
.editeur .surlignage.precedente { background: var(--ligne-faite); }
.editeur .surlignage.erreur { background: var(--faux-doux); border-left: 3px solid var(--faux); }
.editeur .surlignage.clause { background: var(--attention-doux); border-radius: 4px; }
.editeur.lecture-seule textarea { caret-color: transparent; }
.tok-mot { color: var(--c-mot); font-weight: 600; }
.tok-texte { color: var(--c-texte); }
.tok-nombre { color: var(--c-nombre); }
.tok-comment { color: var(--c-comment); font-style: italic; }
.tok-natif { color: var(--c-natif); }
.tok-def { color: var(--c-def); font-weight: 600; }
.tok-op { color: var(--c-op); }
.marque-clause { background: var(--attention-doux); outline: 2px solid var(--attention); border-radius: 3px; color: inherit; }
.marque-clause.erreur { background: var(--faux-doux); outline-color: var(--faux); }
.editeur .couche-marques { position: absolute; inset: 0; pointer-events: none; }
.editeur pre { position: relative; }

/* ---------- la console (sortie des programmes) et le terminal du simulateur ---------- */
.console {
  background: var(--terminal-fond); color: var(--terminal-texte); font-family: var(--f-mono); font-size: 13.5px; line-height: 1.5;
  border-radius: 12px; padding: 10px 12px; overflow: auto; white-space: pre-wrap; word-break: break-word; min-height: 0;
}
.console .vide { color: #7c8496; font-style: italic; }
.console .erreur { color: var(--terminal-erreur); }
.console .ok { color: var(--terminal-ok); }
.console .invite { color: var(--terminal-invite); }
.console .saisie { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.console .saisie input { flex: 1; min-width: 0; background: #1d2333; color: #ffffff; border: 1px solid var(--terminal-invite); border-radius: 6px; padding: 3px 8px; font: inherit; }
.boite-erreur { border: 1px solid var(--faux); background: var(--faux-doux); border-radius: 10px; padding: 10px 12px; font-size: var(--t-s); display: grid; gap: 4px; }
.boite-erreur strong { color: var(--faux); font-family: var(--f-mono); font-size: var(--t-s); }
.boite-erreur p { margin: 0; }
.boite-erreur code { background: rgba(255, 255, 255, 0.55); }

/* ---------- Python : le visualiseur ---------- */
.atelier-python { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.atelier-python.etroit { grid-template-columns: minmax(0, 1fr); overflow: auto; }
.col-code, .col-memoire { display: grid; gap: 10px; min-height: 0; min-width: 0; }
.col-code { grid-template-rows: auto minmax(0, 1fr) auto auto minmax(90px, 0.42fr); }
/* la console reste dans la dernière piste, même quand la zone d'erreur (vide) est masquée */
.col-code > .console { grid-row: -2; }
.col-code.exo { grid-template-rows: auto minmax(0, 1fr) auto auto minmax(80px, 0.5fr); }
.zone-erreur:empty, .zone-message:empty, .zone-prediction:empty { display: none; }
.zone-erreur { max-height: 35vh; overflow: auto; }
.zone-message { display: grid; gap: 6px; }
.col-memoire { grid-template-rows: auto minmax(0, 1fr); }
.col-memoire.exo { overflow: auto; }
/* la mémoire du visualiseur prend la place laissée par le titre et le « Prédis ! » (s'il y en a un) */
.col-memoire.visu { display: flex; flex-direction: column; }
.col-memoire.visu > .memoire { flex: 1 1 0; }
.choix-exemple { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.choix-exemple select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); max-width: 100%; font-size: var(--t-s); }
.barre-pas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.barre-pas .compteur { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--encre-2); margin-left: auto; }
.barre-pas input[type="range"] { flex: 1; min-width: 80px; accent-color: var(--accent); }
.memoire { position: relative; overflow: auto; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px; min-height: 0; }
.memoire .grille-memoire { display: grid; grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.1fr); gap: 14px 22px; align-items: start; position: relative; z-index: 1; }
.memoire .vide { color: var(--encre-2); font-size: var(--t-s); font-style: italic; }
.titre-colonne-memoire { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); margin: 0 0 4px; }
.cadre-pile { border: 1.5px solid var(--ligne); border-radius: 10px; background: var(--surface-2); margin-bottom: 10px; overflow: hidden; }
.cadre-pile.actif { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-doux); }
.cadre-pile > h4 { margin: 0; padding: 4px 10px; font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; background: var(--surface-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 6px; }
.cadre-pile > h4 span:last-child { white-space: nowrap; }
.cadre-pile.actif > h4 { background: var(--accent); color: var(--accent-encre); }
.cadre-pile table { border-collapse: collapse; width: 100%; font-family: var(--f-mono); font-size: 13px; }
.cadre-pile td { padding: 3px 8px; border-top: 1px solid var(--ligne); vertical-align: middle; }
.cadre-pile td.nom-var { color: var(--encre-2); text-align: right; width: 40%; overflow-wrap: break-word; }
.cadre-pile tr.change td { animation: changement 1.2s ease; }
.cadre-pile tr.retour td { color: var(--vif); font-weight: 600; }
.cadre-pile .val { white-space: normal; overflow-wrap: anywhere; }
@keyframes changement { 0% { background: var(--attention-doux); } 100% { background: transparent; } }
.val { display: inline-block; padding: 0 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--ligne); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.val.int, .val.float { color: var(--c-nombre); }
.val.str { color: var(--c-texte); }
.val.bool, .val.none { color: var(--c-mot); }
.val.ref { background: transparent; border: 0; padding: 0; }
.point-ref { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.objet { border: 1.5px solid var(--ligne); border-radius: 10px; background: var(--surface); padding: 6px 8px 8px; margin-bottom: 12px; font-family: var(--f-mono); font-size: 13px; display: inline-block; max-width: 100%; }
.objet.surbrille { border-color: var(--vif); box-shadow: 0 0 0 3px var(--vif-doux); }
.objet .type-objet { font-size: 11px; color: var(--encre-2); margin-bottom: 3px; display: flex; gap: 8px; justify-content: space-between; }
.cases { display: flex; flex-wrap: wrap; gap: 0; }
.cases .case-liste { border: 1px solid var(--ligne); margin: 0 -1px -1px 0; min-width: 34px; text-align: center; background: var(--surface); }
.cases .case-liste .indice { display: block; font-size: 10px; color: var(--encre-2); border-bottom: 1px solid var(--ligne); background: var(--surface-2); padding: 0 4px; }
.cases .case-liste .contenu { display: block; padding: 2px 5px; min-height: 22px; }
.cases .case-liste.change .contenu { animation: changement 1.2s ease; }
.objet table.dict { border-collapse: collapse; }
.objet table.dict td { border: 1px solid var(--ligne); padding: 2px 7px; }
.objet table.dict td:first-child { background: var(--surface-2); }
/* vue « barres » : chaque case porte sa barre, au-dessus de son indice */
.barres-liste .colonne-barre { display: flex; align-items: flex-end; justify-content: center; height: 90px; padding: 4px 4px 0; border-bottom: 1px solid var(--ligne); }
.barres-liste .colonne-barre span { width: 100%; max-width: 26px; background: var(--accent); border-radius: 3px 3px 0 0; transition: height 0.25s ease; }
.barres-liste .case-liste.change .colonne-barre span { background: var(--vif); }
.fleches-memoire { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; }
.fleches-memoire path { stroke: var(--accent); stroke-width: 1.6; fill: none; opacity: 0.75; }
.fleches-memoire circle { fill: var(--accent); }
.sortie-titre { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.prediction { border: 1.5px solid var(--vif); background: var(--vif-doux); border-radius: 12px; padding: 10px 12px; font-size: var(--t-s); display: grid; gap: 8px; }
.prediction .choix { display: flex; gap: 6px; flex-wrap: wrap; }
.prediction .choix button { font-family: var(--f-mono); }

/* le robot */
.jeu-robot { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.jeu-robot .plateau { position: relative; min-height: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; }
.jeu-robot .plateau svg { width: 100%; height: 100%; display: block; }
.jeu-robot .col-gauche { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 10px; min-height: 0; }
.jeu-robot .col-gauche > .console { grid-row: 5; max-height: 22vh; }
.niveaux-robot { display: flex; gap: 4px; flex-wrap: wrap; }
.niveaux-robot button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); font-family: var(--f-mono); font-size: 13px; padding: 0; }
.niveaux-robot button[aria-pressed="true"] { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.niveaux-robot button.reussi { border-color: var(--bon); color: var(--bon); font-weight: 700; }
.niveaux-robot button.reussi[aria-pressed="true"] { background: var(--bon); color: #ffffff; }
.enonce-robot { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; font-size: var(--t-s); display: grid; gap: 6px; }
.enonce-robot h3 { font-size: var(--t-m); }
.enonce-robot p { margin: 0; }
.case-mur { fill: var(--app-serveur); }
.case-sol { fill: var(--surface-2); stroke: var(--ligne); stroke-width: 1; }
.case-sortie { fill: var(--bon-doux); stroke: var(--bon); stroke-width: 2; }

/* ---------- SQL ---------- */
.atelier-sql { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); gap: 12px; padding: 10px var(--gouttiere) 12px; }
.atelier-sql.etroit { grid-template-columns: minmax(0, 1fr); overflow: auto; }
.atelier-sql .col-requete { display: grid; grid-template-rows: auto auto minmax(110px, 0.6fr) auto minmax(0, 1fr); gap: 10px; min-height: 0; min-width: 0; }
.atelier-sql .col-resultat { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; min-height: 0; min-width: 0; }
/* les exercices : énoncé, éditeur, boutons, indice (souvent masqué), liste ; ton résultat, résultat attendu */
.atelier-sql.exos .col-requete { grid-template-rows: auto minmax(110px, 0.7fr) auto auto minmax(0, 1fr); }
.atelier-sql.exos .liste-exos { grid-row: 5; overflow: auto; min-height: 0; }
.atelier-sql.exos .col-resultat { grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 0.8fr); overflow: auto; }
.atelier-sql.exos .col-resultat .defile-table { background: var(--surface); }
.schema-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.schema-mini button { border: 1px solid var(--ligne); background: var(--surface); border-radius: 8px; padding: 3px 8px; font-family: var(--f-mono); font-size: 12px; text-align: left; color: var(--encre); }
.schema-mini button:hover { border-color: var(--accent); }
.schema-mini button strong { color: var(--accent); }
.liste-exemples { overflow: auto; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 6px; min-height: 0; }
.liste-exemples h4 { margin: 6px 6px 2px; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); font-weight: 500; }
.liste-exemples button { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 5px 8px; font-size: var(--t-s); color: var(--encre); }
.liste-exemples button:hover { background: var(--accent-doux); color: var(--accent); }
.liste-exemples button.fait::after { content: " ✓"; color: var(--bon); font-weight: 700; }
.etapes-sql { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.etapes-sql button { font-family: var(--f-mono); font-size: 12px; font-weight: 600; border-radius: 6px; border: 1px solid var(--ligne); background: var(--surface); padding: 3px 8px; color: var(--encre-2); }
.etapes-sql button[aria-current="step"] { background: var(--attention); border-color: var(--attention); color: #ffffff; }
.etapes-sql button.passee { color: var(--encre); border-color: var(--accent); }
.etapes-sql .fleche { color: var(--encre-2); font-size: 12px; }
.vue-etape { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px; }
.titre-etape { margin: 0; font-size: var(--t-s); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.titre-etape .clause { font-family: var(--f-mono); font-weight: 600; background: var(--attention-doux); color: var(--attention); padding: 1px 7px; border-radius: 6px; font-size: 12.5px; }
.defile-table { overflow: auto; min-height: 0; border-radius: 8px; border: 1px solid var(--ligne); }
table.table-sql { border-collapse: separate; border-spacing: 0; font-family: var(--f-mono); font-size: 12.5px; width: max-content; min-width: 100%; }
table.table-sql th { position: sticky; top: 0; z-index: 1; background: var(--accent); color: var(--accent-encre); text-align: left; padding: 5px 9px; font-weight: 600; white-space: nowrap; }
table.table-sql th .cle { font-size: 10px; margin-left: 4px; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); }
table.table-sql td { padding: 4px 9px; border-top: 1px solid var(--ligne); white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; background: var(--surface); transition: background 0.3s, opacity 0.3s; }
table.table-sql td.nul { color: var(--encre-2); font-style: italic; }
table.table-sql td.nombre { text-align: right; color: var(--c-nombre); }
table.table-sql tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 92%, var(--encre) 8%); }
table.table-sql tr.garde td { background: var(--bon-doux); }
table.table-sql tr.rejete td { opacity: 0.32; text-decoration: line-through; text-decoration-color: var(--faux); }
table.table-sql tr.visee td { background: var(--attention-doux); } /* UPDATE, DELETE : les lignes que WHERE désigne */
table.table-sql tr.visee td:first-child { box-shadow: inset 4px 0 0 var(--attention); }
table.table-sql tr.nouveau td { background: var(--bon-doux); animation: entree 0.6s ease; }
table.table-sql tr.supprime td { background: var(--faux-doux); text-decoration: line-through; }
table.table-sql tr.modifie td.change { background: var(--attention-doux); font-weight: 600; }
table.table-sql tr.double td { background: var(--faux-doux); opacity: 0.55; text-decoration: line-through; }
table.table-sql tr.conflit td { background: var(--faux-doux); outline: 2px solid var(--faux); outline-offset: -2px; }
table.table-sql tr.surligne td { background: var(--attention-doux); }
table.table-sql td.cliquable-fk { color: var(--accent); text-decoration: underline dotted; cursor: pointer; }
table.table-sql tr[data-groupe] td:first-child { box-shadow: inset 5px 0 0 var(--couleur-groupe); }
@keyframes entree { from { transform: translateX(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.message-sql { font-size: var(--t-s); padding: 8px 12px; border-radius: 10px; background: var(--bon-doux); border: 1px solid var(--bon); }
.message-sql.erreur { background: var(--faux-doux); border-color: var(--faux); }
.message-sql .genre { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faux); display: block; }
.message-sql .sqlite { display: block; font-family: var(--f-mono); font-size: 11.5px; color: var(--encre-2); margin-top: 3px; }
/* JOIN : les deux tables à leur largeur, reliées par les traits ; la vue défile dans les deux sens */
.jointure-vue { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; position: relative; min-height: 0; overflow: auto; }
.jointure-tables { display: grid; grid-template-columns: max-content 56px max-content; align-items: start; width: max-content; }
.jointure-tables .defile-table { overflow: visible; } /* les en-têtes restent collés en haut de la vue qui défile */
.jointure-tables .nom-table { margin: 0 0 4px; font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--encre-2); }
.jointure-tables table.table-sql td { max-width: 22ch; }
.jointure-vue svg.liens-jointure { width: 56px; height: 100%; overflow: visible; }
.jointure-vue .legende-jointure { margin: 0; }
.jointure-vue .resultat-jointure { max-height: 260px; }
.liens-jointure path { stroke: var(--attention); stroke-width: 1.6; fill: none; opacity: 0.85; }
.liens-jointure path.vide { stroke: var(--faux); stroke-dasharray: 3 3; }
.schema-bdd { position: absolute; inset: 0; overflow: auto; padding: 10px var(--gouttiere) 14px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; }
.plan-schema { position: relative; min-height: 260px; }
.plan-schema svg.liens-schema { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.liens-schema path { stroke: var(--accent); stroke-width: 2; fill: none; }
.liens-schema path.actif { stroke: var(--vif); stroke-width: 3; }
.liens-schema circle { fill: var(--accent); }
.tables-schema { display: flex; flex-wrap: wrap; gap: 28px 56px; justify-content: center; align-items: flex-start; position: relative; z-index: 1; padding: 6px; } /* cartes à leur hauteur : l'entête reste en haut */
.table-schema { background: var(--surface); border: 1.5px solid var(--ligne); border-radius: 12px; min-width: 190px; box-shadow: var(--ombre); overflow: hidden; cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit; }
.table-schema:hover, .table-schema[aria-pressed="true"] { border-color: var(--accent); }
.table-schema[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent-doux), var(--ombre); }
.table-schema h4 { margin: 0; padding: 6px 12px; background: var(--accent); color: var(--accent-encre); font-family: var(--f-mono); font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; }
.table-schema h4 span { font-weight: 400; opacity: 0.8; font-size: 11.5px; }
.table-schema ul { list-style: none; margin: 0; padding: 4px 0; font-family: var(--f-mono); font-size: 12.5px; }
.table-schema li { padding: 2px 12px; display: flex; justify-content: space-between; gap: 12px; }
.table-schema li .type { color: var(--encre-2); font-size: 11px; }
.table-schema li.pk .nom { font-weight: 700; text-decoration: underline; }
.table-schema li.fk .nom { color: var(--accent); }
.table-schema li.fk .nom::before { content: "#"; color: var(--vif); }
.legende-schema { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--encre-2); justify-content: center; }
.contenu-table { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px; display: grid; gap: 8px; min-height: 160px; }
.carnet { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; align-content: start; font-size: var(--t-s); overflow: auto; min-height: 0; }
.carnet .etape-enquete { border-left: 3px solid var(--ligne); padding: 2px 0 2px 10px; }
.carnet .etape-enquete.courante { border-color: var(--vif); }
.carnet .etape-enquete.resolue { border-color: var(--bon); color: var(--encre-2); }
.carnet .etape-enquete h4 { margin: 0 0 2px; font-family: var(--f-titre); font-size: var(--t-m); }
.carnet .etape-enquete p { margin: 0; }
.carnet .revele { margin-top: 4px; background: var(--bon-doux); border-radius: 8px; padding: 6px 8px; }
.carnet .reponse-finale { display: flex; gap: 6px; flex-wrap: wrap; }
.carnet .reponse-finale input { flex: 1; min-width: 120px; border: 1px solid var(--ligne); border-radius: 8px; padding: 5px 8px; background: var(--surface); }

/* ---------- le simulateur de réseaux ---------- */
/* le journal prend la hauteur de son contenu, sans dépasser 40 % de la scène (au-delà, il défile) */
.simulateur { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) fit-content(40%); }
.palette {
  grid-row: 1 / 3; display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; background: var(--verre); border-right: 1px solid var(--ligne);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow-y: auto; width: 86px;
}
.palette .titre-mono { text-align: center; font-size: 0.62rem; margin: 4px 0 0; }
.palette button {
  display: grid; justify-items: center; gap: 2px; border: 1px solid transparent; background: transparent; border-radius: 10px; padding: 5px 2px;
  font-size: 11px; line-height: 1.15; color: var(--encre); touch-action: none;
}
.palette button:hover { background: var(--surface); border-color: var(--ligne); }
.palette button[aria-pressed="true"] { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.palette svg { width: 42px; height: 32px; overflow: visible; }
.plan-reseau { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.plan-reseau > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.plan-reseau.mode-cable { cursor: crosshair; }
.plan-reseau.mode-gomme { cursor: not-allowed; }
.grille-plan { stroke: color-mix(in srgb, var(--encre) 7%, transparent); stroke-width: 1; }
.cable { stroke: var(--cable); stroke-width: 3.2; stroke-linecap: round; pointer-events: none; } /* le clic va à la zone large dessous */
.cable-zone { stroke: transparent; stroke-width: 16; cursor: pointer; }
.cable-zone:hover + .cable, .cable.survol { stroke: var(--vif); }
.cable.provisoire { stroke: var(--vif); stroke-dasharray: 7 6; }
.cable.debranche { stroke-dasharray: 2 6; opacity: 0.6; }
.onde { stroke: var(--onde); stroke-width: 2.4; stroke-dasharray: 2 7; stroke-linecap: round; animation: ondule 1s linear infinite; }
@keyframes ondule { to { stroke-dashoffset: -18; } }
.portee { fill: color-mix(in srgb, var(--onde) 8%, transparent); stroke: var(--onde); stroke-width: 1.4; stroke-dasharray: 6 6; }
.port-etiq { font-family: var(--f-mono); font-size: calc(10px / var(--k, 1)); fill: var(--encre-2); paint-order: stroke; stroke: var(--halo); stroke-width: calc(3px / var(--k, 1)); }
.appareil { cursor: grab; }
.appareil:active { cursor: grabbing; }
.appareil .socle { fill: transparent; }
.appareil:hover .socle, .appareil.choisi .socle { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.appareil.source .socle { fill: color-mix(in srgb, var(--vif) 18%, transparent); stroke: var(--vif); stroke-dasharray: none; }
.appareil .nom-app { font-size: calc(12.5px / var(--k, 1)); font-weight: 700; fill: var(--encre); paint-order: stroke; stroke: var(--halo); stroke-width: calc(4px / var(--k, 1)); stroke-linejoin: round; }
.appareil .ip-app { font-family: var(--f-mono); font-size: calc(10.5px / var(--k, 1)); fill: var(--encre-2); paint-order: stroke; stroke: var(--halo); stroke-width: calc(3.5px / var(--k, 1)); }
.appareil .ip-app.manque { fill: var(--faux); }
.appareil.eclair .icone { animation: eclair 0.45s ease; }
@keyframes eclair { 0% { filter: none; } 30% { filter: drop-shadow(0 0 6px var(--vif)) brightness(1.15); } 100% { filter: none; } }
.ic-corps { fill: var(--app-corps); stroke: var(--app-bord); stroke-width: 1.5; }
.ic-ecran { fill: var(--app-ecran); }
.ic-switch { fill: var(--app-switch); }
.ic-routeur { fill: var(--app-routeur); }
.ic-borne { fill: var(--app-borne); }
.ic-serveur { fill: var(--app-serveur); }
.ic-blanc { fill: #ffffff; }
.ic-trait { stroke: #ffffff; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ic-voyant { fill: #57d68d; }
.ic-voyant.eteint { fill: #9aa2b6; }
.paquet { pointer-events: none; }
.paquet rect { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }
.paquet .pli { stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.2; fill: none; }
.paquet text { font-family: var(--f-mono); font-size: calc(9.5px / var(--k, 1)); font-weight: 600; fill: var(--encre); paint-order: stroke; stroke: var(--halo); stroke-width: calc(3px / var(--k, 1)); }
.paquet.ARP rect { fill: var(--p-arp); } .paquet.ICMP rect { fill: var(--p-icmp); } .paquet.DNS rect { fill: var(--p-dns); }
.paquet.DHCP rect { fill: var(--p-dhcp); } .paquet.TCP rect { fill: var(--p-tcp); } .paquet.HTTP rect { fill: var(--p-http); } .paquet.UDP rect { fill: var(--p-udp); }
.perte { pointer-events: none; }
.perte path { stroke: var(--faux); stroke-width: 3; stroke-linecap: round; }
.bulle-reseau { pointer-events: none; }
.bulle-reseau rect { fill: var(--bulle-fond); opacity: 0.94; }
.bulle-reseau text { fill: var(--bulle-texte); font-size: calc(11.5px / var(--k, 1)); font-weight: 700; }
.bulle-reseau.erreur rect { fill: var(--faux); }
.bulle-reseau.erreur text { fill: #ffffff; }
.legende-protocoles { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 10px; border-radius: 10px; background: var(--verre); border: 1px solid var(--ligne); font-size: 11px; font-family: var(--f-mono); pointer-events: none; max-width: calc(100% - 20px); }
.legende-protocoles span { display: inline-flex; align-items: center; gap: 4px; }
.legende-protocoles i { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
.aide-plan { position: absolute; right: 10px; top: 10px; z-index: 3; max-width: 280px; padding: 7px 11px; border-radius: 10px; background: var(--verre); border: 1px solid var(--ligne); font-size: var(--t-xs); pointer-events: none; color: var(--encre-2); }
.aide-plan:empty { display: none; }
.aide-plan { transition: opacity 0.2s; }
.aide-plan.discret { opacity: 0.12; }
.post-it { position: absolute; z-index: 3; background: #fff3a8; color: #2b2510; padding: 8px 12px; border-radius: 4px; box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2); font-size: 13px; transform: rotate(-2deg); pointer-events: none; font-family: var(--f-mono); }
.plan-reseau .post-it { left: 10px; top: 10px; white-space: pre-line; max-width: calc(50% - 20px); }
.plan-reseau.avec-post-it .aide-plan { max-width: min(280px, calc(50% - 20px)); } /* chacun sa moitié du haut */
.journal { border-top: 1px solid var(--ligne); background: var(--surface); display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.journal.ferme { grid-template-rows: auto; }
.journal.ferme .defile-journal { display: none; }
.journal .tete-journal { display: flex; gap: 8px; align-items: center; padding: 5px 10px; font-size: var(--t-xs); flex-wrap: wrap; }
.journal .tete-journal strong { font-family: var(--f-titre); font-size: var(--t-s); }
.journal .tete-journal select { font-size: var(--t-xs); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--ligne); background: var(--surface); }
.defile-journal { overflow: auto; min-height: 120px; }
table.table-journal { border-collapse: collapse; width: 100%; font-family: var(--f-mono); font-size: 12px; }
table.table-journal th { position: sticky; top: 0; background: var(--surface-2); text-align: left; padding: 3px 8px; font-weight: 600; z-index: 1; }
table.table-journal td { padding: 2px 8px; border-top: 1px solid var(--ligne); white-space: nowrap; }
table.table-journal tr { cursor: pointer; }
table.table-journal tr:hover td { background: var(--accent-doux); }
table.table-journal tr.choisie td { background: var(--attention-doux); }
table.table-journal td.info-trame { white-space: normal; min-width: 240px; }
.etiquette-proto { display: inline-block; padding: 0 6px; border-radius: 4px; color: #ffffff; font-weight: 600; font-size: 11px; }
.etiquette-proto.ARP { background: var(--p-arp); color: #2a2000; } .etiquette-proto.ICMP { background: var(--p-icmp); } .etiquette-proto.DNS { background: var(--p-dns); }
.etiquette-proto.DHCP { background: var(--p-dhcp); } .etiquette-proto.TCP { background: var(--p-tcp); } .etiquette-proto.HTTP { background: var(--p-http); } .etiquette-proto.UDP { background: var(--p-udp); }

/* fenêtres des appareils */
.fenetre {
  position: absolute; z-index: 10; background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; box-shadow: var(--ombre-forte);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: min(470px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow: hidden;
  font-size: var(--t-s);
}
.fenetre.au-dessus { z-index: 12; }
.fenetre .barre-titre { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: var(--surface-3); cursor: move; touch-action: none; user-select: none; }
.fenetre .barre-titre strong { font-family: var(--f-titre); font-size: var(--t-m); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fenetre .barre-titre .type-app { font-family: var(--f-mono); font-size: 11px; color: var(--encre-2); }
.fenetre .fermer { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 8px; font-size: 18px; line-height: 1; color: var(--encre-2); }
.fenetre .fermer:hover { background: var(--faux-doux); color: var(--faux); }
.fenetre .onglets-fenetre { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--ligne); flex-wrap: wrap; }
.fenetre .onglets-fenetre button { border: 1px solid transparent; border-bottom: 0; background: transparent; border-radius: 8px 8px 0 0; padding: 5px 10px; font-size: var(--t-xs); font-weight: 700; color: var(--encre-2); margin-bottom: -1px; }
.fenetre .onglets-fenetre button[aria-selected="true"] { background: var(--surface); border-color: var(--ligne); color: var(--accent); }
/* rangées à la hauteur de leur contenu : c'est la fenêtre qui défile, une zone de texte n'est jamais écrasée */
.fenetre .corps-fenetre { overflow: auto; padding: 10px 12px 12px; min-height: 0; display: grid; grid-auto-rows: max-content; gap: 10px; align-content: start; }
.formulaire { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.formulaire label { color: var(--encre-2); font-size: var(--t-xs); text-align: right; }
.formulaire input, .formulaire select, .formulaire textarea { border: 1px solid var(--ligne); background: var(--surface); border-radius: 7px; padding: 4px 8px; font-family: var(--f-mono); font-size: 13px; min-width: 0; width: 100%; }
.formulaire input.invalide { border-color: var(--faux); background: var(--faux-doux); }
.formulaire .aide { grid-column: 2; font-size: 11.5px; color: var(--encre-2); margin-top: -3px; }
.formulaire .aide.erreur { color: var(--faux); }
.formulaire .pleine { grid-column: 1 / -1; }
.formulaire h5 { grid-column: 1 / -1; margin: 6px 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); font-weight: 500; border-top: 1px solid var(--ligne); padding-top: 8px; }
.formulaire input[type="checkbox"] { width: auto; margin: 0; }
.formulaire .case { grid-column: 2; font-size: var(--t-s); text-align: left; }
.formulaire .case.pleine { grid-column: 1 / -1; }
.table-petite { border-collapse: collapse; width: 100%; font-family: var(--f-mono); font-size: 12.5px; }
.table-petite th { text-align: left; background: var(--surface-2); padding: 3px 7px; font-weight: 600; }
.table-petite td { padding: 3px 7px; border-top: 1px solid var(--ligne); }
.table-petite td input { width: 100%; border: 1px solid var(--ligne); border-radius: 5px; padding: 2px 5px; font: inherit; background: var(--surface); }
.table-petite tr.nouvelle td { animation: changement 1.4s ease; }
.vide-table { color: var(--encre-2); font-style: italic; font-size: var(--t-xs); }
.terminal { background: var(--terminal-fond); color: var(--terminal-texte); font-family: var(--f-mono); font-size: 12.5px; border-radius: 10px; padding: 8px 10px; height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.terminal .ok { color: var(--terminal-ok); } .terminal .erreur { color: var(--terminal-erreur); } .terminal .invite { color: var(--terminal-invite); }
.ligne-commande { display: flex; gap: 6px; align-items: center; background: var(--terminal-fond); border-radius: 10px; padding: 4px 8px; }
.ligne-commande span { color: var(--terminal-invite); font-family: var(--f-mono); font-size: 12.5px; white-space: nowrap; }
.ligne-commande input { flex: 1; min-width: 0; background: transparent; border: 0; color: #ffffff; font-family: var(--f-mono); font-size: 12.5px; outline: none; }
.raccourcis-cmd { display: flex; gap: 4px; flex-wrap: wrap; }
.navigateur { display: grid; gap: 8px; }
.barre-adresse { display: flex; gap: 6px; }
.barre-adresse input { flex: 1; min-width: 0; border: 1px solid var(--ligne); border-radius: 999px; padding: 4px 12px; font-family: var(--f-mono); font-size: 13px; background: var(--surface-2); }
.page-web { border: 1px solid var(--ligne); border-radius: 10px; height: 230px; overflow: hidden; background: #ffffff; }
.page-web iframe { width: 100%; height: 100%; border: 0; display: block; }
.page-web .message { padding: 16px; color: #333333; font-size: 14px; }
.chargement { height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.chargement i { display: block; height: 100%; width: 30%; background: var(--accent); animation: charge 1.1s ease-in-out infinite; }
@keyframes charge { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
.details-trame { display: grid; gap: 6px; }
.couche { border: 1px solid var(--ligne); border-radius: 9px; overflow: hidden; }
.couche h5 { margin: 0; padding: 4px 9px; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; background: var(--surface-2); font-family: var(--f-mono); }
.couche h5 span { color: var(--encre-2); font-weight: 400; }
.couche dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; padding: 4px 9px 6px; font-size: 12px; }
.couche dt { color: var(--encre-2); }
.couche dd { margin: 0; font-family: var(--f-mono); white-space: pre-wrap; word-break: break-word; }
.couche.c0 h5 { border-left: 5px solid #7c8496; } .couche.c1 h5 { border-left: 5px solid var(--p-arp); } .couche.c2 h5 { border-left: 5px solid var(--p-icmp); } .couche.c3 h5 { border-left: 5px solid var(--p-tcp); } .couche.c4 h5 { border-left: 5px solid var(--p-http); }
.reseaux-wifi { display: grid; gap: 4px; }
.reseaux-wifi button { display: flex; justify-content: space-between; gap: 8px; border: 1px solid var(--ligne); border-radius: 8px; background: var(--surface); padding: 5px 9px; font-size: var(--t-s); text-align: left; }
.reseaux-wifi button:hover { border-color: var(--accent); }
.signal { font-family: var(--f-mono); color: var(--accent); letter-spacing: -1px; }
.etat-wifi { font-size: var(--t-xs); padding: 4px 9px; border-radius: 8px; background: var(--surface-2); }
.etat-wifi.connecte { background: var(--bon-doux); color: var(--bon); font-weight: 700; }
.etat-wifi.cle-incorrecte, .etat-wifi.hors-portee { background: var(--faux-doux); color: var(--faux); font-weight: 700; }

/* notions : adresses, couches, bit alterné, routage */
.notion { position: absolute; inset: 0; overflow: auto; padding: 12px var(--gouttiere) 16px; display: grid; grid-auto-rows: max-content; gap: 12px; align-content: start; }
.note { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.carte-notion { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.carte-notion h3 { font-size: var(--t-l); }
.bits { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.bits > .etiq-bits { flex-basis: 100%; margin-bottom: -6px; }
.octet { display: grid; gap: 3px; justify-items: center; }
.octet .decimal { font-family: var(--f-mono); font-size: 1.35rem; font-weight: 600; }
.octet input.decimal { width: 3.4em; text-align: center; border: 1.5px solid var(--ligne); border-radius: 8px; background: var(--surface); padding: 2px 0; }
.octet .rangee { display: flex; gap: 2px; }
.bit { width: 20px; height: 28px; display: grid; place-items: center; border-radius: 5px; font-family: var(--f-mono); font-size: 14px; font-weight: 600; border: 1px solid var(--ligne); background: var(--surface-2); user-select: none; }
button.bit { padding: 0; cursor: pointer; }
.bit.un { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.bit.reseau { box-shadow: inset 0 -4px 0 var(--vif); }
.bit.hote { box-shadow: inset 0 -4px 0 var(--p-dhcp); }
.point-octet { font-family: var(--f-mono); font-size: 1.4rem; align-self: center; padding-bottom: 16px; }
.resume-adresse { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: var(--t-s); }
.resume-adresse dt { color: var(--encre-2); }
.resume-adresse dd { margin: 0; font-family: var(--f-mono); font-weight: 600; }
.legende-bits { display: flex; gap: 14px; font-size: var(--t-xs); color: var(--encre-2); flex-wrap: wrap; }
.legende-bits i { display: inline-block; width: 14px; height: 4px; vertical-align: middle; margin-right: 4px; }
.jeu-reseau { display: grid; gap: 8px; }
.paire-ip { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-family: var(--f-mono); font-size: 1.1rem; }
.paire-ip span { background: var(--surface-2); border-radius: 8px; padding: 4px 10px; }
.scene-notion { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; position: relative; }
.scene-notion svg { display: block; width: 100%; height: auto; }
/* paquets de la scène des couches : plus grands sur téléphone, quand la scène rapetisse (--k < 0,75) */
.scene-notion.compacte .corps-paquet { transform: scale(max(1, calc(0.75 / var(--k, 1)))); }
.defile-x { overflow-x: auto; }
.tableau-routage { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.table-routeur { background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; font-size: 12px; }
.table-routeur h5 { margin: 0; padding: 4px 8px; background: var(--app-routeur); color: #ffffff; font-family: var(--f-mono); font-size: 12px; }
.table-routeur.choisie h5 { background: var(--vif); }
.table-routeur table { border-collapse: collapse; width: 100%; font-family: var(--f-mono); }
.table-routeur td, .table-routeur th { padding: 2px 6px; border-top: 1px solid var(--ligne); text-align: left; }
.table-routeur th { font-weight: 600; background: var(--surface-2); font-size: 11px; }
.table-routeur tr.nouvelle td { background: var(--bon-doux); }
.table-routeur tr.changee td { background: var(--attention-doux); }
.lien-graphe { stroke: var(--cable); stroke-width: 3; pointer-events: none; }
.lien-graphe.chemin { stroke: var(--vif); stroke-width: 6; }
.lien-graphe.coupe { stroke: var(--faux); stroke-dasharray: 6 6; opacity: 0.7; }
.lien-graphe.compare { stroke: var(--accent); stroke-width: 5; stroke-dasharray: 10 6; }
.lien-zone { stroke: transparent; stroke-width: calc(18px / var(--k, 1)); cursor: pointer; } /* plus large quand la scène rapetisse (téléphone) */
.noeud-graphe circle { fill: var(--app-routeur); stroke: #ffffff; stroke-width: 3; }
.noeud-graphe.actif circle { fill: var(--vif); }
.noeud-graphe.visite circle { fill: var(--bon); }
/* la lettre du routeur ; la distance « d = … » dessous garde le style .cout-lien (sinon blanche, invisible en clair) */
.noeud-graphe text:not(.cout-lien) { fill: #ffffff; font-weight: 700; font-family: var(--f-titre); }
.noeud-graphe.actif text:not(.cout-lien) { fill: var(--vif-encre); }
.noeud-graphe.visite text:not(.cout-lien) { fill: var(--bon-encre); }
.cout-lien { font-family: var(--f-mono); font-size: calc(11px / var(--k, 1)); font-weight: 600; fill: var(--encre); paint-order: stroke; stroke: var(--halo); stroke-width: calc(4px / var(--k, 1)); }

/* ---------- défis ---------- */
.page-mise { max-width: 980px; margin: 0 auto; padding: 28px var(--gouttiere) 48px; display: grid; gap: 22px; }
.defis { display: grid; gap: 18px; }
.defis h1 { font-size: var(--t-xxl); font-weight: 780; }
.defis > p { margin: 0; color: var(--encre-2); max-width: 64ch; }
.defis > .bouton { justify-self: start; }
.grille-defis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.choix-defi { display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); }
.choix-defi:hover { border-color: var(--accent); }
.choix-defi strong { font-family: var(--f-titre); font-size: var(--t-l); }
.choix-defi span { font-size: var(--t-s); color: var(--encre-2); }
.choix-defi em { font-style: normal; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent); }
.medaille { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.78rem; font-weight: 700; font-family: var(--f-mono); color: #ffffff; justify-self: start; }
.medaille.or { background: #c9a227; } .medaille.argent { background: #8f9aa3; } .medaille.bronze { background: #b0703b; } .medaille.aucune { background: var(--surface-2); color: var(--encre-2); }
/* dans le menu, la médaille est un span de .choix-defi : on reprend sa taille et sa couleur (« arg. » tient dans 28 px) */
.choix-defi .medaille { font-size: 0.68rem; color: #ffffff; }
.choix-defi .medaille.aucune { color: var(--encre-2); }
.question { background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px; padding: clamp(16px, 3vw, 28px); display: grid; gap: 14px; box-shadow: var(--ombre); }
.quiz-entete { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-xs); color: var(--encre-2); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.quiz-progression { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.quiz-progression span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.question h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 700; line-height: 1.25; }
.quiz-choix { display: grid; gap: 8px; }
.quiz-choix button { text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--surface); color: var(--encre); }
.quiz-choix button:hover:not(:disabled) { border-color: var(--accent); }
.quiz-choix button[data-ton="bon"] { background: var(--bon-doux); border-color: var(--bon); color: var(--bon); font-weight: 700; }
.quiz-choix button[data-ton="faux"] { background: var(--faux-doux); border-color: var(--faux); color: var(--faux); }
.quiz-choix button:disabled { cursor: default; }
.explication { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: var(--t-s); }
.explication strong.bon { color: var(--bon); } .explication strong.faux { color: var(--faux); }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quiz-score { margin: 0; font-family: var(--f-titre); font-size: 3rem; line-height: 1; color: var(--accent); }
.serie { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--vif); }

/* exercices corrigés automatiquement (SQL et Python) */
.liste-exos { display: grid; gap: 4px; }
.liste-exos button { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--ligne); background: var(--surface); border-radius: 9px; padding: 5px 8px; font-size: var(--t-s); color: var(--encre); }
.liste-exos button:hover { border-color: var(--accent); }
.liste-exos button[aria-current="true"] { border-color: var(--accent); background: var(--accent-doux); }
.liste-exos .num { font-family: var(--f-mono); font-size: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); }
.liste-exos button.reussi .num { background: var(--bon); color: #ffffff; }
.liste-exos .notion-exo { font-family: var(--f-mono); font-size: 10.5px; color: var(--encre-2); }
.enonce-exo { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; font-size: var(--t-s); }
.enonce-exo h3 { font-size: var(--t-m); }
.enonce-exo p { margin: 0; }
.resultat-tests { display: grid; gap: 4px; font-size: var(--t-s); }
.resultat-tests div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; font-family: var(--f-mono); font-size: 12.5px; }
.resultat-tests .ok { color: var(--bon); }
.resultat-tests .ko { color: var(--faux); }
.indice-exo { border: 1px dashed var(--ocre); border-radius: 9px; padding: 6px 10px; font-size: var(--t-s); }

/* ---------- lexique ---------- */
.lexique-tete { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; justify-content: space-between; }
.lexique-tete h1 { font-size: var(--t-xxl); font-weight: 780; }
.recherche input { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 8px 14px; min-width: min(300px, 100%); }
.liste-lexique { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 10px; }
.liste-lexique > div { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; scroll-margin-top: 16px; }
.liste-lexique dt { font-family: var(--f-titre); font-weight: 720; font-size: var(--t-l); }
.liste-lexique dd { margin: 0; font-size: var(--t-s); }
.liste-lexique dd a { font-size: var(--t-xs); font-weight: 700; }

/* ---------- petits écrans ---------- */
@media (max-width: 1100px) {
  .atelier-python, .jeu-robot { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  /* une seule colonne : le code puis la mémoire (ou le plateau) prennent leur hauteur et c'est l'atelier qui défile */
  .atelier-python, .jeu-robot { grid-auto-rows: max-content; align-content: start; }
  .jeu-robot .col-gauche { grid-template-rows: auto minmax(220px, auto) auto auto; }
  .atelier-python .col-code { grid-template-rows: auto minmax(220px, auto) auto auto minmax(120px, auto); }
  .atelier-python .col-code.exo { grid-template-rows: auto minmax(220px, auto) auto auto minmax(100px, auto); }
  .atelier-python .col-code > .console { max-height: 40vh; }
  .atelier-python .col-memoire { grid-template-rows: auto minmax(260px, auto); }
  .atelier-python .col-memoire.visu > .memoire { flex: none; min-height: 260px; }
  .jeu-robot .plateau { min-height: 300px; }
  /* une seule colonne : chaque partie prend sa hauteur et c'est l'atelier qui défile */
  .atelier-sql { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow: auto; }
  .atelier-sql .col-requete { grid-template-rows: auto auto minmax(130px, auto) auto fit-content(45vh); min-height: auto; }
  .atelier-sql .col-resultat { grid-template-rows: auto auto fit-content(70vh); min-height: auto; }
  .atelier-sql .vue-etape { min-height: 220px; }
  .atelier-sql.exos .col-requete { grid-template-rows: auto minmax(130px, auto) auto auto fit-content(45vh); }
  .atelier-sql.exos .col-resultat { grid-template-rows: auto fit-content(60vh) auto fit-content(60vh); overflow: visible; }
}
@media (max-width: 980px) {
  .raccourcis { grid-template-columns: minmax(0, 1fr); }
  .accueil-tete { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ecran.activite { overflow: auto; display: block; }
  .colonne-scene { grid-template-rows: auto minmax(460px, 78vh) auto; min-height: auto; }
  .panneau { border-left: 0; border-top: 1px solid var(--ligne); overflow: visible; }
  .bouton-panneau { display: none; }
  .palette { width: 64px; }
  .palette button span { display: none; }
  .memoire .grille-memoire { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .barre { gap: 8px 14px; }
  .barre nav a { padding: 5px 9px; }
  .curseur { grid-template-columns: minmax(0, 1fr) auto; }
  .curseur span:first-child { grid-column: 1 / -1; }
  .formulaire { grid-template-columns: minmax(0, 1fr); }
  .formulaire label { text-align: left; }
  .formulaire .aide, .formulaire .case { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .info, .toast, .missions li.vient::before, .onde, .chargement i, table.table-sql tr.nouveau td, .cadre-pile tr.change td, .cases .case-liste.change .contenu { animation: none; }
  .appareil.eclair .icone { animation: none; }
}