:root {
  --bg: #f6f7f9; --surface: #ffffff; --surface2: #eef0f4; --text: #1b2330; --muted: #5d6879; --line: #d8dde6;
  --accent: #1f6feb; --accent-ink: #ffffff; --good: #1a7f4b; --good-bg: #e3f5ea; --bad: #b42318; --bad-bg: #fdeceb;
  --warn: #9a6700; --warn-bg: #fff4d6; --star: #e3a008; --code-bg: #0f1722; --code-ink: #dbe7ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e131b; --surface: #161d28; --surface2: #1e2735; --text: #e6ebf3; --muted: #9aa6b8; --line: #2b3648;
    --accent: #5b9bff; --accent-ink: #08111f; --good: #4cc38a; --good-bg: #12301f; --bad: #ff8a80; --bad-bg: #3a1a18;
    --warn: #f0c04a; --warn-bg: #33290e; --star: #f2b72f; --code-bg: #0a0f17; --code-ink: #dbe7ff;
  }
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.brand { font-size: 1.15rem; text-decoration: none; color: var(--text); letter-spacing: .2px; }
.brand b { color: var(--accent); }
.hud { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--muted); flex-wrap: wrap; }
.hud .rank { color: var(--text); font-weight: 600; }
.meter { width: 120px; height: 8px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; }
main { max-width: 1000px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 1.6rem; margin: .2em 0 .4em; }
h2 { font-size: 1.2rem; margin: 1.4em 0 .5em; }
.lead { color: var(--muted); margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
a.card, button.card { text-decoration: none; color: inherit; text-align: left; font: inherit; cursor: pointer; display: block; width: 100%; }
a.card:hover, button.card:hover { border-color: var(--accent); }
.card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); font-size: .92rem; }
.next { }
.btn { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--text); font-size: .9rem; display: inline-flex; gap: 6px; }
a.chip:hover { border-color: var(--accent); }
.chip.done { background: var(--good-bg); border-color: transparent; }
.stars { color: var(--star); letter-spacing: 1px; }
.stars .off { color: var(--line); }
.locked { opacity: .55; }
.story { background: var(--surface2); border-radius: 10px; padding: 12px 14px; margin: 8px 0; }
.task { font-weight: 600; margin: 10px 0; }
textarea.sql { width: 100%; min-height: 130px; resize: vertical; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: 14px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
textarea.sql:focus, input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=text], input[type=password], input[type=search], select { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.msg { padding: 10px 14px; border-radius: 10px; margin: 10px 0; }
.msg.good { background: var(--good-bg); color: var(--good); }
.msg.bad { background: var(--bad-bg); color: var(--bad); }
.msg.warn { background: var(--warn-bg); color: var(--warn); }
.msg.info { background: var(--surface2); }
.tablewrap { overflow: auto; max-height: 340px; border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; background: var(--surface); }
table.res { border-collapse: collapse; width: 100%; font: 13px ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
table.res th, table.res td { padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.res th { position: sticky; top: 0; background: var(--surface2); }
table.res td.null { color: var(--muted); font-style: italic; }
.count { color: var(--muted); font-size: .85rem; }
details.schema { margin: 10px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
details.schema summary { cursor: pointer; font-weight: 600; }
.tbl { margin: 8px 0; }
.tbl code, code { font: 13px ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--surface2); padding: 1px 6px; border-radius: 5px; }
.tbl button { font: inherit; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; text-decoration: underline; }
.opts { display: grid; gap: 8px; margin: 12px 0; }
.opt { text-align: left; font: inherit; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt.right { background: var(--good-bg); border-color: var(--good); }
.opt.wrong { background: var(--bad-bg); border-color: var(--bad); }
.opt:disabled { cursor: default; }
.progress { color: var(--muted); font-size: .9rem; display: flex; justify-content: space-between; }
.lives { color: var(--bad); }
.bigdisplay { font: 600 1.15rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; margin: 10px 0; }
.duel { display: grid; grid-template-columns: 1fr; gap: 8px; }
.duel .line { display: grid; grid-template-columns: minmax(100px, 160px) 1fr; gap: 10px; align-items: center; }
.duel .line.right select { border-color: var(--good); }
.duel .line.wrong select { border-color: var(--bad); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.badge { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.badge.off { opacity: .5; filter: grayscale(1); }
.badge .e { font-size: 1.6rem; }
.badge small { color: var(--muted); display: block; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 20; max-width: min(360px, calc(100vw - 32px)); }
.toast { background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: pop .25s ease-out; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .toast, .meter > i { animation: none; transition: none; } }
.crumbs { font-size: .9rem; margin-bottom: 4px; }
@media (max-width: 560px) { .hud { gap: 8px; } .meter { width: 80px; } main { padding: 16px 12px 60px; } }

/* ───────────── v2 : formation en jeu ───────────── */
nav.nav { display: flex; gap: 4px; padding: 6px 12px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
nav.nav a { padding: 6px 12px; border-radius: 99px; text-decoration: none; color: var(--muted); white-space: nowrap; font-size: .92rem; }
nav.nav a:hover { color: var(--text); background: var(--surface2); }
nav.nav a.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.iconbtn { border: 0; background: var(--surface2); border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 1rem; }
.goal { padding: 2px 8px; border-radius: 99px; background: var(--surface2); }
.goal.ok { background: var(--good-bg); color: var(--good); }

/* mascotte et bulle */
.coach { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; }
.coach-av { flex: none; }
.bubble { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; flex: 1; }
.bubble::before { content: ""; position: absolute; left: -8px; top: 22px; width: 14px; height: 14px; background: var(--surface); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.mascot { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.eye { animation: blink 5s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes blink { 0%,94%,100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

/* effets */
.shake { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.popin { animation: popin .5s cubic-bezier(.2,1.6,.4,1); display: inline-block; }
@keyframes popin { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bigstars { font-size: 1.5rem; }
.toast.big { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
html[data-anim="off"] *, html[data-anim="off"] *::before { animation: none !important; transition: none !important; }

/* parcours en 3 temps */
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.s3 { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.s3 .n { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; }
.s3 small { display: block; color: var(--muted); }

/* carte des mondes */
.mapwrap { background: linear-gradient(180deg, var(--surface2), var(--surface)); border: 1px solid var(--line); border-radius: 14px; padding: 8px; overflow-x: auto; }
.wmap { width: 100%; min-width: 640px; height: auto; display: block; }
.wpath { fill: none; stroke: var(--line); stroke-width: 6; stroke-dasharray: 2 12; stroke-linecap: round; }
.wnode { cursor: pointer; outline: none; }
.wnode .wbg { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.wnode .wtrack { fill: none; stroke: var(--surface2); stroke-width: 6; }
.wnode .wring { fill: none; stroke: var(--good); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .6s; }
.wnode .wemo { font-size: 26px; }
.wnode .wlab { font-size: 13px; fill: var(--text); font-weight: 600; }
.wnode:hover .wbg, .wnode:focus-visible .wbg, .wnode.sel .wbg { stroke: var(--accent); stroke-width: 4; }
.wnode.sel { animation: bob 2.4s ease-in-out infinite; }
.wnode.locked { opacity: .5; }
.wnode.full .wbg { fill: var(--good-bg); }
.worldpanel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-top: 12px; }

/* lecteur de leçons */
.goals { background: var(--surface2); border-radius: 10px; padding: 8px 12px; font-size: .92rem; margin: 8px 0; }
.segbar { display: flex; gap: 4px; margin: 10px 0; }
.segbar i { flex: 1; height: 6px; border-radius: 99px; background: var(--surface2); }
.segbar i.done { background: var(--good); } .segbar i.now { background: var(--accent); }
.player { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.scene-title { margin-top: 0; animation: fadeUp .4s both; }
.point { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-weight: 600; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.bullets { padding-left: 20px; } .bullets li { margin: 8px 0; animation: fadeUp .45s both; animation-delay: calc(var(--i, 0) * .25s); }
a.lesson .emo { font-size: 2rem; } a.lesson.done { border-color: var(--good); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* schémas */
.dg { margin: 8px 0; } .dcap { color: var(--muted); font-size: .92rem; margin: 8px 0; }
.dsvg { width: 100%; height: auto; max-height: 340px; display: block; }
.dsvg .t-b { font: 700 14px system-ui; fill: var(--text); } .dsvg .t-s { font: 12px system-ui; fill: var(--muted); }
.dsvg .node { animation: fadeUp .5s both; animation-delay: calc(var(--i, 0) * .25s); }
.dchip { display: inline-block; padding: 6px 12px; margin: 4px; border-radius: 99px; background: var(--surface2); animation: fadeUp .4s both; animation-delay: calc(var(--i, 0) * .15s); }
.stagger .layer, .stagger .flow { animation: fadeUp .5s both; }
.layer { background: var(--surface2); border-radius: 12px; padding: 10px 14px; text-align: center; margin: 4px 0; }
.layer > b { display: block; margin-bottom: 4px; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; }
.layer.core { background: var(--surface); border: 2px solid var(--accent); } .layer.db { border: 2px dashed var(--muted); }
.layer.db small { display: block; color: var(--muted); }
.flow { text-align: center; color: var(--accent); font-size: 1.3rem; animation: drop 1.4s ease-in-out infinite !important; }
@keyframes drop { 0%,100% { transform: translateY(-2px); opacity: .5; } 50% { transform: translateY(3px); opacity: 1; } }
.tile { display: inline-block; margin: 4px; padding: 8px 12px; background: var(--surface2); border-radius: 10px; animation: popin .5s both; animation-delay: calc(var(--i, 0) * .15s); }
.tile small { display: block; color: var(--muted); font-size: .75rem; }
.idrow { display: flex; gap: 10px; flex-wrap: wrap; }
.idcell { flex: 1; min-width: 110px; text-align: center; padding: 10px; border: 2px solid var(--line); border-radius: 12px; opacity: .45; transition: all .4s; }
.idcell.on { opacity: 1; border-color: var(--accent); background: var(--surface2); transform: translateY(-3px); }
.idcell b { display: block; font-size: 1.1rem; } .idcell small { color: var(--muted); }
.kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.kind { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } .kind.dashed { border-style: dashed; } .kind small { display: block; color: var(--muted); }
.ribsteps { display: grid; gap: 8px; margin: 10px 0; }
.rstep { padding: 8px 12px; background: var(--surface2); border-radius: 10px; animation: fadeUp .4s both; animation-delay: calc(var(--i) * .2s); }
.rstep small { display: block; color: var(--muted); } .rstep code { font-size: 1rem; word-break: break-all; }
.rstep.win { background: var(--good-bg); }
pre.sqlshow { background: var(--code-bg); color: var(--code-ink); border-radius: 10px; padding: 10px 14px; margin: 8px 0; font: 14px/1.6 ui-monospace, Menlo, Consolas, monospace; overflow: auto; }
.cl { opacity: .45; transition: opacity .3s; } .cl.on { opacity: 1; color: #ffd866; background: rgba(255, 216, 102, .12); display: inline-block; border-radius: 4px; padding: 0 4px; margin-left: -4px; }
table.res tr.out { opacity: .25; text-decoration: line-through; transition: opacity .5s; }
table.res tr.hl td { background: var(--warn-bg); } table.res tr.pulse { animation: fadeUp .5s both; }
.funnel .frow { display: flex; align-items: center; gap: 10px; margin: 6px 0; opacity: 0; transition: opacity .4s; }
.funnel .frow.on { opacity: 1; } .funnel .frow:last-of-type .fbar { background: var(--good); }
.fbar { height: 30px; width: 0; min-width: 44px; background: var(--accent); color: var(--accent-ink); border-radius: 8px; display: flex; align-items: center; padding: 0 10px; transition: width .8s ease; }
.funnel .frow.on .fbar { width: var(--w); }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.dcard { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); opacity: 0; transform: translateY(8px); transition: all .5s; }
.dcard.on, .dcard[data-i].on { opacity: 1; transform: none; } .dcard b, .dcard code, .dcard small { display: block; margin: 3px 0; } .dcard small { color: var(--muted); } .dcard .emo { font-size: 1.6rem; }
.dcap[data-i] { opacity: 0; transition: opacity .6s; } .dcap[data-i].on { opacity: 1; }
.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.threecol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tcol { background: var(--surface2); border-radius: 12px; padding: 8px; min-height: 190px; } .tcol > b { display: block; } .tcol > small { color: var(--muted); display: block; margin-bottom: 6px; }
.evc { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 5px 0; font-size: .85rem; transition: all .6s; } .evc small { display: block; color: var(--muted); }
.evc.leave { transform: translateX(60px); opacity: 0; } .evc.arrive { animation: slidein .6s both; } .evc.deb { } .evc.cre { }
@keyframes slidein { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
.bigstat { font-size: 2.6rem; font-weight: 800; } .bigstat.bad { color: var(--bad); } .bigstat.good { color: var(--good); }
.beamin { transition: transform .9s cubic-bezier(.3,1.5,.5,1); transform-origin: 210px 70px; transform-box: view-box; }
/* cycle de vie */
.lifecycle .edge { stroke: var(--line); stroke-width: 3; } .lifecycle .edge.seen { stroke: var(--accent); }
.lnode rect { fill: var(--surface); stroke: var(--line); stroke-width: 2; transition: all .4s; } .lnode text { font: 700 14px system-ui; fill: var(--text); }
.lnode.seen rect { stroke: var(--accent); fill: var(--surface2); } .lnode.now rect { stroke: var(--star); stroke-width: 4; }
.token { fill: var(--star); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.lcap { min-height: 3em; font-weight: 600; color: var(--text); }
.chip.sel { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* boss */
.arena { display: flex; justify-content: space-around; align-items: flex-end; gap: 12px; background: linear-gradient(180deg, var(--surface2), var(--surface)); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.fighter { text-align: center; display: grid; gap: 4px; justify-items: center; } .fighter .lives { color: var(--bad); letter-spacing: 2px; min-height: 1.4em; }
.hpbar { width: 180px; height: 12px; border-radius: 99px; background: var(--surface2); border: 1px solid var(--line); overflow: hidden; } .hpfill { height: 100%; background: var(--bad); transition: width .5s; }
.boss { animation: bob 2.6s ease-in-out infinite; } .bosscard { text-align: center; } .bosscard svg { margin: 0 auto 6px; display: block; } .bosscard small { display: block; color: var(--muted); }

/* profil, lexique, examen */
.skills { display: grid; gap: 8px; } .skill { display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr 44px; gap: 10px; align-items: center; }
.sbar { height: 10px; background: var(--surface2); border-radius: 99px; overflow: hidden; } .sbar i { display: block; height: 100%; background: var(--good); border-radius: 99px; transition: width .6s; }
.gloss { display: grid; gap: 6px; margin-top: 10px; } .gl { display: grid; grid-template-columns: minmax(110px, 190px) 1fr auto; gap: 12px; align-items: baseline; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; } .gl small { color: var(--muted); }
@media (max-width: 560px) { .gl { grid-template-columns: 1fr; gap: 2px; } .skill { grid-template-columns: 1fr; } .threecol { grid-template-columns: 1fr; } .coach { flex-direction: column; } .bubble::before { display: none; } }
.clock { font-variant-numeric: tabular-nums; font-weight: 700; } .good-t { color: var(--good); }
.cert { border: 6px double var(--accent); border-radius: 14px; padding: 8px; margin: 14px 0; background: var(--surface); } .cert-in { text-align: center; padding: 22px 12px; } .cert-in h2 { font-size: 1.8rem; margin: 6px 0; } .cert .who { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
@media print { header.top, nav.nav, #toasts, .noprint { display: none !important; } body { background: #fff; color: #000; } .cert { border-color: #000; } .cert .who { color: #000; } }

/* ───────────── v3 : missions, tuteur ───────────── */
.coach .who { font-size: .85rem; color: var(--muted); margin-bottom: 2px; }
.acte h2 { margin-top: 1.6em; }
.mrow { display: flex; gap: 12px; align-items: center; } .mrow h3 { margin: 0; font-size: 1rem; } .mav { flex: none; }
.mfoot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.pill { padding: 2px 10px; border-radius: 99px; font-size: .8rem; font-weight: 600; background: var(--surface2); }
.pill.done { background: var(--good-bg); color: var(--good); } .pill.available { background: var(--accent); color: var(--accent-ink); } .pill.locked { color: var(--muted); }
.card.locked { opacity: .55; cursor: not-allowed; } a.card.done { border-color: var(--good); }
.lnode text.fl { font: 600 11.5px system-ui; fill: var(--text); }
.fab { position: fixed; left: 16px; bottom: 16px; z-index: 30; border: 0; border-radius: 99px; padding: 12px 18px; background: var(--accent); color: var(--accent-ink); font: 600 1rem system-ui; box-shadow: 0 6px 20px rgba(0,0,0,.3); cursor: pointer; }
.tutor { position: fixed; left: 16px; bottom: 74px; width: min(400px, calc(100vw - 32px)); height: min(560px, 70vh); z-index: 30; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.35); overflow: hidden; }
.tutor[hidden] { display: none; } .tutor header { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface2); }
.tutor header > div:nth-child(2) { flex: 1; } .tutor header small { display: block; color: var(--muted); }
.tlog { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tmsg { max-width: 92%; padding: 8px 12px; border-radius: 12px; font-size: .95rem; } .tmsg p { margin: 4px 0; white-space: pre-wrap; }
.tmsg.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); } .tmsg.bot { align-self: flex-start; background: var(--surface2); } .tmsg.err { align-self: stretch; background: var(--bad-bg); color: var(--bad); }
.tin { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); } .tin textarea { flex: 1; resize: none; font: inherit; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
@media (max-width: 560px) { .tutor { left: 8px; right: 8px; width: auto; } }
@media print { .fab, .tutor { display: none !important; } }

/* ───────────── v4 : l'agence (PixiJS) ───────────── */
.worldbox { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 74vh; margin: 8px auto; background: #e9eef5; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; touch-action: none; }
.worldbox canvas { display: block; }
.wpop { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(560px, calc(100% - 20px)); max-height: 80%; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: fadeUp .25s both; }
.wpop[hidden] { display: none; } .wclose { position: absolute; top: 8px; right: 8px; }
.wm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); } .wm > div { flex: 1 1 200px; }
.wlist { display: flex; flex-wrap: wrap; gap: 8px; }

/* ───────────── v5 : murs, entrées de salle, mini-scènes ───────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scenecv { width: 100%; aspect-ratio: 720 / 250; max-height: 340px; background: #eef2f8; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.scenecv canvas { display: block; }

/* ───────────── v6 : carrière (600 missions) ───────────── */
.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.phase { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; } .phase small { display: block; color: var(--muted); margin: 2px 0 6px; }
.card.cat .lvls { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.lvl { padding: 1px 8px; border-radius: 99px; font-size: .78rem; font-weight: 700; }
.lvl.lv1 { background: #dff5e6; color: #14653a; } .lvl.lv2 { background: #dbe9ff; color: #1c4f9c; } .lvl.lv3 { background: #ffe9c9; color: #8a4b00; } .lvl.lv4 { background: #ffd9de; color: #9b1c2c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lvl.lv1 { background: #12301f; color: #6fdc9b; } :root:not([data-theme="light"]) .lvl.lv2 { background: #172b4a; color: #8db8ff; } :root:not([data-theme="light"]) .lvl.lv3 { background: #3a2a10; color: #ffc46b; } :root:not([data-theme="light"]) .lvl.lv4 { background: #401a20; color: #ff9aa6; } }
.flist { display: grid; gap: 6px; margin-top: 8px; }
.frow2 { display: grid; grid-template-columns: 70px 1fr auto auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text); }
.frow2:hover { border-color: var(--accent); } .frow2.st-done { border-color: var(--good); } .frow2.st-playable { }
.fid { font: 700 .85rem ui-monospace, Menlo, monospace; color: var(--muted); }
.pill.st-spec { background: var(--surface2); color: var(--muted); } .pill.st-playable { background: var(--accent); color: var(--accent-ink); } .pill.st-done { background: var(--good-bg); color: var(--good); }
.fmeta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 10px; }
.fsec { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 6px 0; } .fsec summary { cursor: pointer; font-weight: 600; } .fsec p { margin: 8px 0 2px; }
.found { margin-top: 8px; display: grid; gap: 6px; }
@media (max-width: 700px) { .frow2 { grid-template-columns: 62px 1fr auto; } .frow2 > :nth-child(n+4) { display: none; } }

/* BANKING QUEST navigation and workspace */
:root { --accent: #186b61; --accent-ink: #fff; }
.top { padding: 16px 26px; box-shadow: 0 2px 16px #142a2910; }
.brand { font-weight: 850; letter-spacing: .06em; }
.brand b { color: var(--accent); }
nav.nav { padding: 12px 24px; gap: 7px; display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--surface); }
nav.nav a { padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: .88rem; font-weight: 600; }
nav.nav a.on { background: var(--accent); color: var(--accent-ink); }
main { max-width: 1160px; padding-top: 30px; }
h1 { letter-spacing: -.035em; font-size: clamp(1.65rem, 4vw, 2.3rem); }
.card { border-radius: 16px; padding: 20px; box-shadow: 0 3px 14px #142a2906; }
a.card:hover, button.card:hover { box-shadow: 0 6px 22px #142a2915; transform: translateY(-2px); }
.btn { min-height: 42px; }
textarea.sql { min-height: 180px; }
.menu-toggle { display: none; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; background: var(--surface); padding: 12px; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-color-scheme: dark) { :root { --accent: #61d5bd; --accent-ink: #092820; } }
@media(max-width: 760px) {
 .menu-toggle { display: inline-block; margin-left: auto; }
 .top { padding: 12px 16px; } .hud { width: 100%; }
 nav.nav { display: none; padding: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
 nav.nav.expanded { display: grid; }
 .grid { grid-template-columns: 1fr; } .duel .line { grid-template-columns: 1fr; }
 input, select { max-width: 100%; } main { padding-top: 22px; }
}
@media(prefers-reduced-motion: reduce) { a.card:hover, button.card:hover { transform: none; } }
/* Desktop career workspace */
body:has(.sidebar) { --accent:#087f8c; --accent-ink:#fff; background:#f3f5f8; }
body:has(.sidebar) .top { height:76px; position:sticky; top:0; background:#101f36; color:#fff; z-index:30; border:0; }
body:has(.sidebar) .brand { color:#fff; font-size:1.05rem; }
body:has(.sidebar) .brand b { color:#55d3cb; }
body:has(.sidebar) .hud { color:#becbdb; }
body:has(.sidebar) .hud .rank { color:#fff; }
nav.sidebar { position:fixed; top:76px; bottom:0; left:0; width:220px; overflow-y:auto; display:flex; flex-direction:column; flex-wrap:nowrap; padding:24px 14px; background:#fff; border-right:1px solid #e3e8ef; gap:5px; z-index:20; }
nav.sidebar a { display:flex; align-items:center; gap:12px; padding:12px 14px; color:#4b5c70; }
nav.sidebar a.on { background:#e4f4f3; color:#066a72; box-shadow:inset 3px 0 #087f8c; }
.nav-section { font-size:10px; font-weight:800; letter-spacing:.11em; color:#7b899a; padding:0 12px; margin:18px 0 10px; }
.service-dot { display:block; color:#178567; letter-spacing:0; font-size:11px; margin-top:12px; }
.nav-more { padding:16px 12px; font-size:.8rem; color:#697b8d; }.nav-more summary{cursor:pointer;}.nav-more a {font-size:.8rem;}
.sidebar-foot { margin-top:auto; padding:24px 12px 6px; color:#738298; font-size:11px; line-height:1.8; }
.desktop-workspace { margin-left:220px; display:grid; grid-template-columns:minmax(0,1fr) 270px; align-items:start; }
.desktop-workspace main { width:100%; min-width:0; padding:32px; margin:0; max-width:1400px; }
.context-panel { position:sticky; top:100px; padding:28px 24px; background:#fff; border-left:1px solid #e3e8ef; min-height:calc(100vh - 76px); }
.context-panel h2 { font-size:1rem; margin-top:14px; }.context-panel h3 { font-size:.9rem; margin:22px 0 10px; }
.context-eyebrow,.dashboard-eyebrow { font-size:10px; letter-spacing:.12em; font-weight:800; color:#748599; }
.context-title { font-size:.9rem; font-weight:600; }.context-divider {height:1px;background:var(--line);margin:24px 0;}.context-link {display:block;font-size:.8rem;margin:12px 0;text-decoration:none;}
.daily-number {font-size:1.8rem;font-weight:800;color:#087f8c;}.daily-number small{font-size:.9rem;color:#7d8b99;}.context-panel progress{width:100%;height:7px;accent-color:#087f8c;}
.school-note {font-size:11px;color:#7b899a;line-height:1.7;margin-top:32px;}
.dashboard-eyebrow{margin-bottom:18px;}.dashboard-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:32px;border:1px solid #cee6e6;border-radius:18px;background:linear-gradient(115deg,#e9f5f3,#eaf0fa);overflow:hidden;}
.dashboard-hero h1{white-space:pre-line;font-size:clamp(1.7rem,2.7vw,2.6rem);line-height:1.14;margin:18px 0;}.dashboard-hero p{max-width:410px;color:#586b7c;font-size:.9rem;}.hero-chip{background:#ffffffb0;padding:7px 10px;border-radius:30px;font-size:11px;color:#087f72;font-weight:600;}
.hero-building{width:160px;min-width:130px;height:150px;transform:skewY(-8deg);background:#16344c;border-radius:8px;border-right:20px solid #0d2337;box-shadow:18px 20px 0 #c2dadc;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px;color:#fff;}.hero-building span{grid-column:1/-1;font-weight:800;color:#62d7cc;}.hero-building i{background:#72b8c8;border-radius:3px;}.hero-building small{grid-column:1/-1;font-size:8px;letter-spacing:.12em;}
.dashboard-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0;}.stat-card{background:#fff;border:1px solid #e3e8ef;padding:20px;border-radius:13px;display:flex;flex-direction:column;gap:7px;}.stat-card small{font-size:9px;color:#748599;font-weight:700;letter-spacing:.1em;}.stat-card strong{font-size:1.25rem;}.stat-card span{font-size:11px;color:#7b899a;}
.dashboard-columns{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;}.section-head{display:flex;justify-content:space-between;align-items:center;gap:8px;}.section-head a{font-size:11px;}.dashboard-columns h2{font-size:1rem;}.featured-mission{}.featured-mission h3{margin:12px 0;}.mission-cta{display:block;margin-top:18px;color:#087f8c;font-size:.85rem;font-weight:700;}.news-card{margin-bottom:14px;}.news-card small{font-size:9px;color:#77899b;font-weight:700;}.news-card h3{margin:12px 0;}.news-card a{display:block;margin-top:14px;font-size:.8rem;}.workspace-icon{display:block;color:#087f8c;font-size:1.5rem;margin-bottom:12px;}.workspace-link{margin-bottom:10px;}.dashboard-columns .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.virtual-desk,.lab-workbench{background:#fff;border:1px solid #dfe6ef;border-radius:16px;overflow:hidden;}.desk-titlebar,.lab-toolbar{padding:16px 20px;background:#172c45;color:#dfe9f5;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.8rem;}.desk-titlebar span{color:#63c8bf;}.desk-tabs{display:flex;flex-wrap:wrap;padding:12px;gap:8px;border-bottom:1px solid var(--line);}.desk-tabs [aria-selected=true]{background:#e4f4f3;border-color:#087f8c;color:#066a72;}.desk-content{padding:24px;}.desk-content h2{margin-top:0;}.desk-message{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);}.message-avatar{display:grid;place-items:center;background:#e4f4f3;color:#087f8c;border-radius:50%;width:40px;height:40px;flex-shrink:0;font-weight:700;}.desk-message small{color:#7b899a;}.desk-message h3{margin:6px 0;}.desk-message p{font-size:.9rem;color:#697b8d;}.agenda-line,.ticket-row{display:flex;gap:18px;align-items:center;padding:18px 10px;text-decoration:none;border-bottom:1px solid var(--line);color:var(--text);}.agenda-line span,.ticket-row span:nth-child(2){flex:1;}.job-chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:22px;}.job-node{border:1px solid #dfe6ef;background:#f4f6f8;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px;}.job-node small,.job-node span{font-size:9px;letter-spacing:.05em;}.job-error{border-color:#d27863;background:#fff1ed;}.job-ok{border-color:#6ab89f;background:#eaf7f0;}.lab-console{background:#101f36;color:#a3e3d1;padding:24px;white-space:pre-wrap;font-size:.85rem;margin:16px;border-radius:10px;}.lab-workbench>.row,.lab-workbench>.count,.lab-workbench>.msg{margin:16px;}
@media(min-width:761px){body:has(.sidebar) .menu-toggle{display:block;font-size:.8rem;}body.nav-collapsed nav.sidebar{width:72px;}body.nav-collapsed nav.sidebar a span,body.nav-collapsed .nav-section,body.nav-collapsed .nav-more,body.nav-collapsed .sidebar-foot{display:none;}body.nav-collapsed .desktop-workspace{margin-left:72px;} }
@media(max-width:1250px){.desktop-workspace{grid-template-columns:minmax(0,1fr);}.context-panel{position:static;min-height:0;border:1px solid #e3e8ef;margin:0 24px 24px;border-radius:14px;}.hero-building{display:none;}.dashboard-columns{grid-template-columns:1fr;} }
@media(max-width:760px){nav.sidebar{display:none;top:112px;width:min(300px,90vw);bottom:0;box-shadow:12px 0 32px #142a2930;}nav.sidebar.expanded{display:flex;}.desktop-workspace{margin-left:0;}.desktop-workspace main{padding:20px 16px;}.context-panel{margin:0 16px 20px;}.dashboard-hero{padding:24px;}.dashboard-stats{grid-template-columns:1fr;}.stat-card{padding:16px;}.job-chain{grid-template-columns:repeat(2,minmax(0,1fr));}.desk-content{padding:16px;}body:has(.sidebar) .top{height:auto;min-height:112px;}.dashboard-columns .grid{grid-template-columns:1fr;} }
@media(prefers-color-scheme:dark){body:has(.sidebar){background:#101722;}nav.sidebar,.context-panel,.stat-card,.virtual-desk,.lab-workbench{background:#172332;border-color:#29384c;}nav.sidebar a{color:#b5c6d7;}nav.sidebar a.on{background:#153e46;color:#7bdcd3;}.dashboard-hero{background:linear-gradient(115deg,#153439,#1b2d47);border-color:#2b4b54;}.dashboard-hero p,.desk-message p{color:#b1c4d4;}.hero-chip{background:#1d4651;color:#7bdcd3;}.job-node{background:#243044;border-color:#435269;}.job-error{background:#422b2a;}.job-ok{background:#193d33;}.desk-tabs [aria-selected=true]{background:#153e46;color:#7bdcd3;}}
.journal-filters{display:flex;gap:10px;flex-wrap:wrap;}.journal-filters input{flex:1;min-width:220px;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);font:inherit;}.journal-filters select{font-size:.8rem;max-width:100%;}.mission-journal{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.2fr);gap:20px;align-items:start;}.journal-list{border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:650px;background:var(--surface);}.journal-entry{display:flex;flex-direction:column;gap:7px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);width:100%;padding:18px;font:inherit;color:var(--text);cursor:pointer;}.journal-entry small{font-size:10px;color:#087f8c;font-weight:700;}.journal-entry b{font-size:.85rem;}.journal-entry[aria-pressed=true]{background:#e4f4f3;box-shadow:inset 3px 0 #087f8c;}.journal-detail{position:sticky;top:96px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;}.journal-detail h2{margin-top:12px;line-height:1.3;}.journal-detail>p{font-size:.9rem;line-height:1.8;}.mission-objectives{padding-left:20px;font-size:.85rem;color:var(--muted);line-height:2;}
@media(max-width:760px){.mission-journal{grid-template-columns:1fr;}.journal-list{max-height:300px;}.journal-detail{position:static;}.journal-filters select{width:100%;}}
@media(prefers-color-scheme:dark){.journal-entry[aria-pressed=true]{background:#153e46;}}

.linux-terminal{background:#0c1523;border:1px solid #26374d;border-radius:14px;overflow:hidden;}.linux-output{height:360px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:#9ae3cb;padding:20px;margin:0;font:13px/1.7 ui-monospace,monospace;}.linux-prompt{display:flex;gap:12px;align-items:center;border-top:1px solid #26374d;padding:14px;color:#9ae3cb;}.linux-input{flex:1;min-width:0;background:transparent!important;color:#e9f4ff!important;border:0!important;font:14px ui-monospace,monospace!important;}.linux-exercises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}.linux-exercises .card p{line-height:1.8;}.linux-terminal .desk-titlebar .btn{font-size:11px;min-height:32px;padding:4px 8px;}@media(max-width:760px){.linux-exercises{grid-template-columns:1fr;}.linux-prompt{flex-wrap:wrap;}.linux-prompt .btn{width:100%;}.linux-terminal .desk-titlebar{flex-wrap:wrap;}}

/* aide audio et vidéo */
.media-panel { margin: 12px 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.media-panel > summary { cursor: pointer; font-weight: 600; }
.media-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 14px; }
.media-row { padding-top: 10px; border-top: 1px solid var(--line); }
.media-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.media-video { width: 100%; max-width: 760px; border-radius: 10px; background: #0b1426; margin-top: 8px; }
.media-audio { width: 100%; max-width: 560px; margin-top: 8px; }
.media-transcript { margin-top: 8px; } .media-transcript p { max-width: 70ch; }
.media-listen { margin-top: 6px; }