:root{--violet:#6022cf;--violet-2:#7c4dff;--bleu:#1e78e6;--cyan:#00c8e6;--jaune:#ffd23c;--vert:#18b45b;--rouge:#e5484d;--bg:#f4f2fb;--card:#fff;--text:#1d1b2c;--muted:#6b6884;--line:#e4e0f2;--chip:#efeafd;--code-bg:#14112a;--code-text:#e6e1ff;--radius:18px;--shadow:0 2px 4px #28145a0f, 0 10px 30px #28145a14;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Nunito", sans-serif;--mono:ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;--base:16px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#12111c;--card:#1d1a2e;--text:#ece9f8;--muted:#a19dbd;--line:#2f2b48;--chip:#2a2542;--shadow:0 2px 4px #0000004d, 0 10px 30px #0000004d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}[data-track=petits]{--base:18px;--radius:24px}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{font:var(--base) / 1.5 var(--font);background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}pre,code{font-family:var(--mono)}.app{max-width:980px;padding:max(12px, env(safe-area-inset-top)) 16px 96px;margin:0 auto}.topbar{align-items:center;gap:12px;padding:8px 0 16px;display:flex}.topbar img{background:#fff;border-radius:50%;width:44px;height:44px}.topbar .brand{letter-spacing:.2px;font-size:1.15rem;font-weight:800}.topbar .spacer{flex:1}.pill{background:var(--chip);color:var(--text);border:0;border-radius:99px;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:700;display:inline-flex}.btn{background:var(--chip);color:var(--text);border:0;border-radius:14px;min-height:52px;padding:14px 22px;font-size:1rem;font-weight:800;transition:transform 80ms,filter .15s}.btn:active:not(:disabled){transform:scale(.97)}.btn.primary{background:linear-gradient(135deg, var(--violet), var(--violet-2));color:#fff;box-shadow:0 6px 16px #6022cf4d}.btn.go{background:linear-gradient(135deg, var(--vert), #2fd07a);color:#fff;box-shadow:0 6px 16px #18b45b4d}.btn.ghost{border:2px solid var(--line);background:0 0}.btn.small{border-radius:12px;min-height:40px;padding:8px 14px;font-size:.9rem}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}h1{margin:0 0 8px;font-size:1.7rem;line-height:1.2}h2{margin:0 0 12px;font-size:1.3rem}.muted{color:var(--muted)}.mascot{align-items:flex-end;gap:12px;margin:8px 0 18px;display:flex}.mascot img{object-fit:cover;width:72px;height:72px;box-shadow:var(--shadow);border:3px solid #fff;border-radius:50%;flex:none}.bubble{background:var(--card);border:2px solid var(--line);box-shadow:var(--shadow);border-radius:20px 20px 20px 6px;padding:12px 16px;font-weight:600;position:relative}.mascot.happy img{animation:.6s bounce}.mascot.sad img{animation:.4s shake}@keyframes bounce{30%{transform:translateY(-12px)rotate(-6deg)}60%{transform:translateY(0)rotate(4deg)}}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.tracks{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px;display:grid}.track-card{text-align:left;cursor:pointer;border:3px solid #0000;padding:22px}.track-card:hover,.track-card.on{border-color:var(--violet-2)}.track-card .emoji{font-size:2.6rem}.track-card h2{margin:8px 0 2px}input.name{width:100%;font:inherit;border:2px solid var(--line);background:var(--card);color:var(--text);border-radius:14px;margin-top:8px;padding:14px 16px;font-size:1.1rem}.path{flex-direction:column;align-items:center;gap:10px;padding:12px 0;display:flex}.node{text-align:left;background:var(--card);width:100%;max-width:480px;color:var(--text);border-radius:var(--radius);box-shadow:var(--shadow);border:0;align-items:center;gap:14px;padding:14px 16px;display:flex}.node:nth-child(odd){transform:translate(-24px)}.node:nth-child(2n){transform:translate(24px)}@media (width<=560px){.node:nth-child(n){transform:none}}.node .bubbleicon{background:linear-gradient(135deg, var(--violet), var(--bleu));color:#fff;border-radius:50%;flex:none;place-items:center;width:56px;height:56px;font-size:1.6rem;display:grid}.node.locked .bubbleicon{background:var(--chip);filter:grayscale()}.node.done .bubbleicon{background:linear-gradient(135deg, var(--vert), #2fd07a)}.node .t{font-weight:800}.stars{color:#f5b301;letter-spacing:2px}.lesson-head{align-items:center;gap:12px;margin-bottom:14px;display:flex}.progressbar{background:var(--chip);border-radius:99px;flex:1;height:14px;overflow:hidden}.progressbar>div{background:linear-gradient(90deg, var(--violet), var(--cyan));height:100%;transition:width .4s}.stepbar{padding:12px 16px max(12px, env(safe-area-inset-bottom));background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);position:fixed;bottom:0;left:0;right:0}.stepbar .inner{justify-content:space-between;align-items:center;gap:10px;max-width:980px;margin:0 auto;display:flex}.video{border-radius:var(--radius);aspect-ratio:16/9;background:#000;position:relative;overflow:hidden}.video img,.video video{object-fit:cover;width:100%;height:100%;display:block}.video .soon{color:#fff;background:linear-gradient(#0000,#000c);padding:14px 18px;font-weight:700;position:absolute;inset:auto 0 0}.summary-card{text-align:center;padding:28px 20px}.summary-card .emoji{font-size:3.4rem}.dots{justify-content:center;gap:8px;margin:14px 0 4px;display:flex}.dots span{background:var(--line);border-radius:50%;width:10px;height:10px}.dots span.on{background:var(--violet)}.code{background:var(--code-bg);color:var(--code-text);white-space:pre-wrap;text-align:left;border-radius:12px;margin:10px 0;padding:12px 14px;font-size:.95rem;overflow-x:auto}.choices{gap:10px;margin-top:14px;display:grid}.choice{text-align:left;border:3px solid var(--line);background:var(--card);color:var(--text);white-space:pre-wrap;border-radius:16px;min-height:56px;padding:14px 16px;font-size:1rem;font-weight:700}.choice.right{border-color:var(--vert);background:color-mix(in srgb, var(--vert) 12%, var(--card))}.choice.wrong{border-color:var(--rouge);background:color-mix(in srgb, var(--rouge) 10%, var(--card))}.feedback{border-radius:14px;margin-top:14px;padding:12px 16px;font-weight:600}.feedback.ok{background:color-mix(in srgb, var(--vert) 14%, var(--card))}.feedback.ko{background:color-mix(in srgb, var(--rouge) 12%, var(--card))}.parsons{grid-template-columns:1fr 1fr;gap:14px;display:grid}@media (width<=640px){.parsons{grid-template-columns:1fr}}.zone{border:3px dashed var(--line);border-radius:16px;flex-direction:column;gap:8px;min-height:150px;padding:10px;display:flex}.zone h3{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 4px;font-size:.9rem}.tile{text-align:left;font-family:var(--mono);background:var(--code-bg);color:var(--code-text);border:0;border-radius:12px;min-height:48px;padding:12px 14px;font-size:.95rem}.tile .n{opacity:.5;margin-right:8px}.console{color:#d8f5e3;min-height:64px;font-family:var(--mono);white-space:pre-wrap;background:#0c0a18;border-radius:12px;margin-top:12px;padding:12px 14px;font-size:.92rem}.console .label{color:#8a85b0;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:.75rem;display:block}.errorcard{background:color-mix(in srgb, var(--jaune) 22%, var(--card));border:2px solid color-mix(in srgb, var(--jaune) 60%, transparent);border-radius:14px;margin-top:12px;padding:14px 16px}.errorcard b{margin-bottom:4px;display:block}.editor{border:2px solid var(--line);border-radius:14px;margin-top:12px;overflow:hidden}.editor .cm-editor{min-height:180px;font-size:15px}.blockly-wrap{grid-template-columns:2fr 1fr;gap:12px;margin-top:12px;display:grid}@media (width<=760px){.blockly-wrap{grid-template-columns:1fr}}.blockly-area{border:2px solid var(--line);background:#fff;border-radius:14px;height:380px;overflow:hidden}.realcode{height:100%;min-height:120px;margin:0}.reward{text-align:center;padding:30px 20px}.reward .big{font-size:4rem;animation:.6s pop}.reward .stars{font-size:2.6rem}@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.15)}to{transform:scale(1)}}.status{font-size:.8rem}.spinner{vertical-align:-2px;border:2px solid;border-right-color:#0000;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}