/* CodeNova — Apprendre l'informatique (/apprendre) */
.learn{max-width:1100px;margin:0 auto;padding:26px 20px 60px}
.learn h1{font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.15;margin:.2em 0 .35em}
.learn .lead{font-size:1.12rem;color:var(--muted);max-width:760px}
.learn .muted{color:var(--muted)}
.learn a{color:var(--blue)}
.learn button,.learn a.btn{cursor:pointer;border:0;border-radius:10px;background:var(--green);color:#061b20;padding:10px 16px;font:inherit;font-weight:750;text-decoration:none;display:inline-block}
.learn button.ghost,.learn a.btn.ghost{background:#162737;color:var(--text);border:1px solid var(--line)}
.learn button:hover:not(:disabled),.learn a.btn:hover{filter:brightness(1.08)}
.learn button:disabled{opacity:.55;cursor:default}
.learn :focus-visible{outline:3px solid #fff;outline-offset:2px}
.learn .crumbs{font-size:.88rem;color:var(--muted);margin:4px 0 14px}

/* Hub */
.hub-progress{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0;padding:16px 20px}
.hub-progress .track{flex:1 1 220px;height:12px;background:#1b2f44;border-radius:12px;overflow:hidden}
.hub-progress .fill{height:100%;width:0;background:var(--green);transition:width .4s}
.paths{display:grid;gap:26px;margin-top:10px}
.path h2{margin:0 0 4px}
.path>p{margin:0 0 12px;color:var(--muted)}
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.lesson-card-link{display:block;text-decoration:none;color:inherit;position:relative}
.lesson-card-link:hover{border-color:var(--green)}
.lesson-card-link h3{font-size:1.06rem;margin:.55em 0 .35em;color:var(--text)}
.lesson-card-link p{margin:0;color:var(--muted);font-size:.92rem}
.lesson-card-link .meta{margin-top:12px;font-size:.82rem;color:var(--muted)}
.lesson-card-link .num{position:absolute;top:14px;right:16px;font-weight:800;color:#355772;font-size:1.5rem}
.lesson-card-link.is-done{border-color:#2f8f6a}
.done-badge{display:inline-block;margin-left:8px;color:#7ee0a1;font-weight:700}
.tag{display:inline-block;border-radius:30px;background:#1d3b52;color:#cfeaf7;padding:3px 11px;font-size:.78rem}
.tag.l2{background:#3b3a1d}.tag.l3{background:#4a2b2b}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:26px 0}
.why .card h3{margin:.1em 0 .3em;font-size:1.02rem}
.why .card p{margin:0;color:var(--muted);font-size:.93rem}

/* Leçon */
.learn-lesson{display:grid;grid-template-columns:minmax(0,880px) 230px;gap:34px;align-items:start}
.learn-lesson .toc{position:sticky;top:156px;font-size:.9rem;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#0e1c2d}
.learn-lesson .toc strong{display:block;margin-bottom:6px}
.learn-lesson .toc ol{margin:0;padding-left:18px}
.learn-lesson .toc li{margin:5px 0}
.learn-lesson .toc a{text-decoration:none;color:var(--muted)}
.learn-lesson .toc a:hover{color:var(--text)}
@media(max-width:1000px){.learn-lesson{display:block}.learn-lesson .toc{position:static;margin:0 0 18px}}
.objectives{background:#0e2233;border:1px solid #3a7087;border-radius:14px;padding:14px 18px;margin:16px 0 8px}
.objectives ul{margin:6px 0 0;padding-left:20px}
.lesson-body section{background:#112237;border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:16px 0}
.lesson-body section.pitfall{border-color:#7a5a3a;background:#1d1a16}
.lesson-body h2{margin:0 0 .5em;font-size:1.35rem}
.lesson-body p,.lesson-body li{color:#cfdee6;line-height:1.7}
.lesson-body code{background:#0a1626;border:1px solid #213a52;border-radius:6px;padding:1px 6px;font-size:.92em;color:#bfeaff}
.lesson-body details{margin:12px 0}.lesson-body summary{cursor:pointer;color:var(--green);font-weight:700}
kbd{background:#0a1626;border:1px solid #355772;border-bottom-width:3px;border-radius:6px;padding:1px 6px;font-size:.88em}
.callout{border-left:4px solid var(--blue);background:#0d2034;border-radius:10px;padding:12px 16px;margin:16px 0}
.callout strong{display:block;margin-bottom:2px}.callout p{margin:.3em 0}
.callout.tip{border-color:#7ee0a1}.callout.warn{border-color:#f5d76e}.callout.danger{border-color:#ff6b8b}.callout.info{border-color:var(--blue)}
.lesson-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:26px 0}
.read-progress{position:fixed;left:0;right:0;top:0;height:4px;z-index:30}.read-progress div{height:100%;width:0;background:var(--green)}

/* Code */
.code-box{border:1px solid #2b4259;border-radius:12px;overflow:hidden;margin:14px 0;background:#08111d}
.code-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;background:#0f1f33;border-bottom:1px solid #223a52}
.code-lang{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.code-actions{display:flex;gap:6px;flex-wrap:wrap}
.code-actions button{padding:5px 11px!important;font-size:.84rem;border-radius:8px!important}
.code-edit,.code-static{display:block;width:100%;box-sizing:border-box;margin:0;border:0;background:transparent;color:#d9ecf7;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:12px 14px;resize:vertical;tab-size:4;white-space:pre;overflow:auto}
.code-edit:focus{outline:2px solid var(--green);outline-offset:-2px}
.code-out{margin:0;padding:10px 14px;border-top:1px dashed #2b4259;background:#050c15;color:#9bf0b8;font:13.5px/1.55 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;max-height:300px;overflow:auto}
.code-out.err{color:#ffb3b3}

/* Démonstrations */
.widget{margin:18px 0 4px;padding:16px;border:1px solid #2d6a85;border-radius:14px;background:linear-gradient(160deg,#0e2437,#0a1726)}
.widget-caption{margin:6px 2px 16px;color:var(--muted);font-size:.9rem}
.widget canvas{width:100%;height:auto;display:block;border-radius:10px;background:#07111f}
.widget label{font-size:.9rem;color:var(--muted)}
.widget input[type=number],.widget input:not([type]),.widget select{background:#08131f;color:var(--text);border:1px solid #355772;border-radius:8px;padding:6px 9px;font:inherit}
.widget input[type=range]{accent-color:var(--green);vertical-align:middle}
.w-controls{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:12px 0}
.w-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.bits .bit{width:46px;height:52px;font-size:1.4rem;font-family:ui-monospace,monospace;background:#162737!important;color:var(--text)!important;border:2px solid #355772!important;padding:0!important}
.bits .bit.on{background:var(--green)!important;color:#061b20!important;border-color:var(--green)!important}
.w-vals span{width:46px;text-align:center;font-size:.82rem;color:#6f8ba3}.w-vals span.on{color:var(--green);font-weight:800}
.w-out{margin:12px 0;line-height:1.7}
.w-inline input{width:90px;margin-left:6px}
.w-table table{border-collapse:collapse;width:100%;margin-top:10px;font-size:.92rem}
.w-table th,.w-table td{border-bottom:1px solid #223a52;padding:6px 8px;text-align:left}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:8px}
.w-note{color:var(--muted);font-size:.9rem}
.w-bars{display:flex;align-items:flex-end;gap:2px;height:220px;padding:8px;background:#07111f;border-radius:10px}
.w-bars i{flex:1;background:#4d86b3;border-radius:3px 3px 0 0;min-width:2px}.w-bars i.hl{background:#f5d76e}.w-bars i.ok{background:#7ee0a1}
.w-stat{color:var(--muted);font-size:.9rem}
.w-cells{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}
.w-cells span{min-width:36px;text-align:center;padding:8px 4px;border-radius:8px;background:#162f46;border:1px solid #355772;font:13px ui-monospace,monospace}
.w-cells span.out{opacity:.25;text-decoration:line-through}.w-cells span.mid{background:#f5d76e;color:#201a00;border-color:#f5d76e;font-weight:800}.w-cells span.found{background:#7ee0a1;color:#05210f;border-color:#7ee0a1;font-weight:800}
.w-msg{min-height:3em;line-height:1.6;margin:10px 0}
.w-net{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:8px 0}
.w-net .node{padding:12px 16px;border-radius:12px;background:#162f46;border:2px solid #355772;font-weight:700;min-width:96px;text-align:center}
.w-net .node.from{border-color:#f5d76e}.w-net .node.to{border-color:#7ee0a1;background:#173a30}
.w-net .arrow{color:#6f8ba3;font-size:1.4rem}
.w-field{display:block;margin:8px 0}.w-field input{width:100%;box-sizing:border-box;margin-top:4px}
.hrow{margin:10px 0}.hrow b{display:block;font-size:.82rem;color:var(--muted)}
.hrow code{display:block;word-break:break-all;background:#07111f;border:1px solid #213a52;border-radius:8px;padding:8px 10px;font-size:.88rem}
.hrow code.diff .x{color:#ff9f6b;font-weight:800}

/* Quiz */
.quiz-card{background:#112237;border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:26px 0}
.quiz-card h2{margin-top:0}
.quiz-card .opts{display:grid;gap:10px;margin:14px 0}
.quiz-card .opt{text-align:left;background:#162737!important;color:var(--text)!important;border:1px solid #355772!important;font-weight:600!important;line-height:1.45}
.quiz-card .opt:hover:not(:disabled){border-color:var(--green)!important}
.quiz-card .opt.good{background:#17402f!important;border-color:#7ee0a1!important;opacity:1!important}
.quiz-card .opt.bad{background:#4a2020!important;border-color:#ff8f8f!important;opacity:1!important}
.quiz-card .fb{min-height:1.5em;line-height:1.6}
@media(prefers-reduced-motion:reduce){.hub-progress .fill{transition:none}}

.lesson-body h2,.quiz-card{scroll-margin-top:160px}
@media(max-width:1000px){.lesson-body h2,.quiz-card{scroll-margin-top:90px}}

.lesson-photo{display:block;width:100%;height:130px;object-fit:cover;border-radius:12px;margin:0 0 12px;border:1px solid rgba(81,218,240,.25)}

/* Parcours Premium (/apprendre/premium) */
.premium-next{background:linear-gradient(135deg,#14283d,#1b2f55);border:1px solid #3b5f95;border-radius:16px;padding:20px 24px;margin:26px 0}
.premium-next h2{margin:.4em 0 .3em}.premium-next p{margin:.4em 0;color:var(--muted)}
.premium-teaser{margin-top:34px;background:linear-gradient(135deg,#14283d,#1b2f55);border-color:#3b5f95}
.prem-status{margin:20px 0}.prem-status.ok{border-color:#2f8f6a}
.prem-catalog{display:grid;gap:18px;margin-top:20px}
.prem-course h3{margin:.5em 0 .3em;font-size:1.3rem}.prem-course>p{color:var(--muted)}
.prem-course details{margin:10px 0}.prem-course summary{cursor:pointer;font-weight:700}
.chap-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.learn button.chap{width:100%;text-align:left;display:flex;align-items:center;gap:8px;background:#122438;color:var(--text);border:1px solid var(--line);font-weight:600}
.learn button.chap:hover:not(:disabled){border-color:var(--green)}
.learn button.chap.locked{color:var(--muted);background:#0e1c2d}
.chap .min{margin-left:auto;font-size:.8rem;color:var(--muted);font-weight:500}
.free-tag{font-size:.75rem;color:#7ee0a1;font-style:normal;border:1px solid #2f8f6a;border-radius:20px;padding:1px 8px}
.prem-viewer{margin:20px 0;padding:6px 0 20px;border-top:3px solid var(--green)}
.prem-viewer .viewer-title{font-size:1.7rem;margin:.2em 0 .6em}
.prem-viewer .lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}