:root{
  --bg:#F3F6F7; --surface:#FFFFFF; --ink:#16263A; --muted:#566779;
  --line:#D5DEE4; --accent:#0B7A78; --accent-soft:#E0F1F0;
  --amber:#B87809; --amber-soft:#FBF0DA; --red:#B23A3A; --red-soft:#F8E4E4;
  --scope-bg:#0F2A2E; --scope-grid:#1E4A4F; --scope-text:#CFEDEA;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F161D; --surface:#16202A; --ink:#E4ECF1; --muted:#9AAAB8;
    --line:#2A3947; --accent:#46C7BF; --accent-soft:#16312F;
    --amber:#E8B04A; --amber-soft:#33291A; --red:#E57C7C; --red-soft:#3A2224;
    --scope-bg:#08171A; --scope-grid:#18393D;
  }
}
:root[data-theme="dark"]{
  --bg:#0F161D; --surface:#16202A; --ink:#E4ECF1; --muted:#9AAAB8;
  --line:#2A3947; --accent:#46C7BF; --accent-soft:#16312F;
  --amber:#E8B04A; --amber-soft:#33291A; --red:#E57C7C; --red-soft:#3A2224;
  --scope-bg:#08171A; --scope-grid:#18393D;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
  font:1.075rem/1.72 "Literata",Georgia,"Times New Roman",serif}
.ui,button,input,summary,nav,.meta,.crumbs,table{font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:3px}
svg{max-width:100%}

.topbar{background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .in{max-width:1180px;margin:auto;padding:.7rem 1.25rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.logo{font-weight:700;color:var(--ink);text-decoration:none;font-size:1.1rem}
.logo span{color:var(--accent)}
.topbar nav{display:flex;gap:1.1rem;font-size:.95rem;margin-left:auto;flex-wrap:wrap}
.topbar nav a{color:var(--muted);text-decoration:none}
.topbar nav a:hover{color:var(--ink)}

.wrap{max-width:1180px;margin:auto;padding:1.5rem 1.25rem 4rem;display:grid;grid-template-columns:230px minmax(0,1fr);gap:3rem}
@media (max-width:900px){.wrap{grid-template-columns:1fr;gap:1rem}}
.toc{position:sticky;top:1rem;align-self:start;font-size:.92rem}
.toc details{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem}
.toc summary{font-weight:700;cursor:pointer}
.toc ol{margin:.6rem 0 0;padding-left:1.2rem}
.toc li{margin:.28rem 0}
.toc a{color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--accent)}
@media (max-width:900px){.toc{position:static}}

main{max-width:760px;min-width:0}
.crumbs{font-size:.88rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 .35rem}
h1{font-size:clamp(2.2rem,5vw,3.1rem);line-height:1.1;margin:.6rem 0 .5rem;letter-spacing:-.01em}
h2{font-size:1.65rem;line-height:1.25;margin:3rem 0 .8rem;padding-top:.5rem;border-top:2px solid var(--ink)}
h3{font-size:1.2rem;margin:1.8rem 0 .5rem}
.lede{font-size:1.2rem;color:var(--muted);margin:0 0 1rem}
.meta{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-size:.9rem;color:var(--muted);margin-bottom:1.5rem}
.tag{display:inline-block;padding:.1rem .55rem;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.82rem}

.scope{background:var(--scope-bg);color:var(--scope-text);border-radius:14px;padding:1.1rem 1.1rem 1.2rem;margin:1.2rem 0 2rem}
.scope h2{all:unset;display:block;font-family:"Atkinson Hyperlegible",sans-serif;font-weight:700;font-size:1.1rem;color:#fff}
.scope p{margin:.2rem 0 .8rem;font-size:.95rem}
.scope svg{font-family:"Atkinson Hyperlegible",sans-serif;display:block;width:100%;height:auto;background:#081d20;border-radius:8px}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem 1.2rem;margin-top:1rem}
.controls label{display:block;font-size:.88rem}
.controls output{font-weight:700;color:#fff}
.controls input[type=range]{width:100%;accent-color:#5FE3D6}
.modes{display:flex;gap:.4rem;margin-top:.9rem}
.modes button{background:transparent;color:var(--scope-text);border:1px solid var(--scope-grid);padding:.35rem .9rem;border-radius:6px;cursor:pointer;font-size:.9rem}
.modes button[aria-pressed=true]{background:#5FE3D6;color:#062224;border-color:#5FE3D6;font-weight:700}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.5rem;margin-top:1rem}
.readout div{border-top:1px solid var(--scope-grid);padding-top:.35rem;font-size:.82rem}
.readout b{display:block;font-size:1.15rem;color:#fff}

.formula{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;padding:.8rem 1.1rem;margin:1rem 0;font-size:1.18rem;overflow-x:auto}
.formula small{display:block;font-size:.85rem;color:var(--muted);font-family:"Atkinson Hyperlegible",sans-serif}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.2;margin:0 .15em}
.frac>span:first-child{border-bottom:1px solid currentColor;padding:0 .25em}
.figure{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1rem;margin:1.2rem 0;color:var(--ink)}
.figure figcaption{font-size:.88rem;color:var(--muted);margin-top:.4rem;font-family:"Atkinson Hyperlegible",sans-serif}
.figure svg text{font-family:"Atkinson Hyperlegible",sans-serif}

.box{border-radius:10px;padding:1rem 1.2rem;margin:1.2rem 0}
.box h3{margin-top:0}
.box ul{margin:.3rem 0;padding-left:1.2rem}
.box li{margin:.35rem 0}
.essentiel{background:var(--accent-soft)}
.warn{background:var(--red-soft)}
.prof{background:var(--amber-soft);border-left:4px solid var(--amber)}
.prof strong:first-child{color:var(--amber);font-family:"Atkinson Hyperlegible",sans-serif}

.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1rem 0}
th,td{border-bottom:1px solid var(--line);padding:.5rem .6rem;text-align:left;vertical-align:middle}
th{color:var(--muted);font-weight:700}

.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding-left:2.4rem;margin:.8rem 0}
.steps li::before{content:counter(s);position:absolute;left:0;top:.15rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:700 .85rem "Atkinson Hyperlegible",sans-serif}

.exo{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;margin:1rem 0}
.exo header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.exo h3{margin:0}
.lvl{font:700 .8rem "Atkinson Hyperlegible",sans-serif;padding:.1rem .55rem;border-radius:999px}
.lvl.f{background:var(--accent-soft);color:var(--accent)}
.lvl.m{background:var(--amber-soft);color:var(--amber)}
.lvl.d{background:var(--red-soft);color:var(--red)}
.exo details{margin-top:.7rem;border-top:1px dashed var(--line);padding-top:.6rem}
.exo summary{cursor:pointer;font-weight:700;color:var(--accent)}
.exo ol{padding-left:1.3rem}

.national{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.national .note{font-size:.85rem;color:var(--muted);padding:.6rem 1rem;margin:0;background:var(--bg);font-family:"Atkinson Hyperlegible",sans-serif}
.national table{margin:0}

.qcm fieldset{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;margin:0 0 .9rem;background:var(--surface)}
.qcm legend{font-weight:600;padding:0 .3rem}
.qcm label{display:block;padding:.25rem 0;cursor:pointer;font-family:"Atkinson Hyperlegible",sans-serif;font-size:.97rem}
.qcm .fb{font-size:.92rem;margin:.3rem 0 0;min-height:1.2em;font-family:"Atkinson Hyperlegible",sans-serif}
.qcm .ok{color:var(--accent)} .qcm .ko{color:var(--red)}
.score{font:700 1rem "Atkinson Hyperlegible",sans-serif}

.faq details{border-bottom:1px solid var(--line);padding:.7rem 0}
.faq summary{cursor:pointer;font-weight:600;font-family:"Literata",serif}
.faq p{margin:.5rem 0 0}

.pdfs{list-style:none;padding:0;margin:0}
.pdfs li{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 0;border-bottom:1px solid var(--line)}
.pdfs .t{font-weight:600}
.pdfs .a{font-size:.88rem;color:var(--muted);font-family:"Atkinson Hyperlegible",sans-serif}
.btn{display:inline-block;padding:.35rem .8rem;border-radius:6px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font:700 .88rem "Atkinson Hyperlegible",sans-serif;background:var(--surface)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.pn a{display:block;border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;text-decoration:none;color:var(--ink);background:var(--surface)}
.pn small{display:block;color:var(--muted)}
.pn a:last-child{text-align:right}
@media (max-width:520px){.pn{grid-template-columns:1fr}.pn a:last-child{text-align:left}}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:.88rem;text-align:center;padding:1.5rem}

/* --- additions for this chapter --- */
.box.goals{background:var(--surface);border:1px solid var(--line)}
.goals .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.5rem 1.5rem}
.goals h3{font-size:1.05rem;margin:.2rem 0 .3rem}
.img{background:#fff;border-radius:6px;display:block;width:100%;height:auto}
.situation{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:1.2rem 0}
.situation .txt{padding:1rem 1.2rem}
.situation .pb{background:var(--amber-soft);border-left:4px solid var(--amber);padding:.7rem 1rem;border-radius:6px;margin-top:.8rem}
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin:1rem 0}
.vids figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.5rem}
.vids video{width:100%;height:auto;border-radius:6px;display:block;background:#000}
.vids figcaption{font-size:.85rem;color:var(--muted);padding:.35rem .15rem 0;font-family:"Atkinson Hyperlegible",sans-serif}
.activity{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:1rem 1.2rem;margin:1.2rem 0}
.activity h3{margin-top:0}
.activity details{margin-top:.6rem;border-top:1px dashed var(--line);padding-top:.6rem}
.activity summary{cursor:pointer;font-weight:700;color:var(--accent)}
.def{background:var(--accent-soft);border-radius:10px;padding:.9rem 1.2rem;margin:1rem 0}
.def p{margin:.3rem 0}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.compare>div{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;background:var(--surface)}
.compare h4{margin:.1rem 0 .3rem;font-size:1.05rem}
@media (max-width:600px){.compare{grid-template-columns:1fr}}
.quick{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:.8rem 1.1rem;margin:1.4rem 0}
.quick>h3{margin:.1rem 0 .6rem;font-size:1.05rem}
.quick fieldset{border:0;border-top:1px solid var(--line);padding:.6rem 0 .2rem;margin:0}
.quick legend{font-weight:600;padding:0;float:left;width:100%;margin-bottom:.2rem}
.quick label{display:block;padding:.18rem 0;cursor:pointer;font-family:"Atkinson Hyperlegible",sans-serif;font-size:.97rem;clear:left}
.quick .fb{font-size:.92rem;margin:.2rem 0 .3rem;min-height:1.1em;font-family:"Atkinson Hyperlegible",sans-serif}
.fb.ok{color:var(--accent)} .fb.ko{color:var(--red)}
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}
.apps>div{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;background:var(--surface)}
.apps h3{margin:.1rem 0 .3rem;font-size:1.05rem}
.apps p{margin:0;font-size:.97rem}
.scope canvas{display:block;width:100%;background:#081d20;border-radius:8px}
.scope .legend{display:flex;gap:1.2rem;font-size:.85rem;margin:.5rem 0 .3rem}
.scope .legend span::before{content:"";display:inline-block;width:.9rem;height:.25rem;border-radius:2px;margin-right:.35rem;vertical-align:middle;background:var(--c)}
.modes{flex-wrap:wrap}
.modes .sep{width:1px;background:var(--scope-grid);margin:0 .3rem}
.bigqcm{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:1rem 1.2rem}
.bigqcm .bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:.4rem 0 1rem}
.bigqcm .bar i{display:block;height:100%;background:var(--accent);width:0}
.bigqcm .th{font:700 .8rem "Atkinson Hyperlegible",sans-serif;color:var(--muted)}
.bigqcm .qtext{font-weight:600;font-size:1.1rem;margin:.3rem 0 .7rem}
.bigqcm .opt{display:block;width:100%;text-align:left;margin:.35rem 0;padding:.6rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);cursor:pointer;font-size:.97rem}
.bigqcm .opt:hover{border-color:var(--accent)}
.bigqcm .opt.good{background:var(--accent-soft);border-color:var(--accent)}
.bigqcm .opt.bad{background:var(--red-soft);border-color:var(--red)}
.bigqcm .opt.sel{border-color:var(--ink);border-width:2px}
.bigqcm .row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem;align-items:center}
.bigqcm button.main{background:var(--accent);color:var(--surface);border:0;border-radius:8px;padding:.55rem 1rem;font-weight:700;cursor:pointer}
.bigqcm button.alt{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:.55rem 1rem;font-weight:700;cursor:pointer}
.bigqcm .axis{margin:.5rem 0}
.bigqcm .axis div.b{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.bigqcm .axis div.b i{display:block;height:100%}
.bigqcm .pct{font:700 2.2rem "Atkinson Hyperlegible",sans-serif}
.fiche details{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:.7rem 1rem;margin:.7rem 0}
.fiche summary{cursor:pointer;font-weight:700}
.fiche h4{margin:1rem 0 .3rem}
.fiche ul{margin:.2rem 0;padding-left:1.2rem}

/* --- générateur --- */
.num{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;border-radius:50%;background:var(--ink);color:var(--bg);font:700 .8rem "Atkinson Hyperlegible",sans-serif;margin-right:.35rem;vertical-align:.1em}
.simu{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:.6rem 1rem;margin:1rem 0}
.simu summary{cursor:pointer;font-weight:700;color:var(--accent);font-family:"Atkinson Hyperlegible",sans-serif}
.simu iframe{width:100%;height:620px;border:0;border-radius:8px;margin-top:.6rem;background:#0f172a}
.simu .open{font-size:.9rem;font-family:"Atkinson Hyperlegible",sans-serif}
.exo h3{margin:0 0 .5rem}
.exo .num,.activity .num{background:var(--accent)}
.formula mjx-container{margin:0!important}
.activity h4{margin:.1rem 0 .5rem;font-size:1.15rem}
.def ul,.activity ul{margin:.3rem 0;padding-left:1.2rem}
.fiche table{font-size:.9rem}
.fiche td,.fiche th{vertical-align:top}
.hub ul{list-style:none;padding:0}
.hub li{border-bottom:1px solid var(--line);padding:.6rem 0}
.hub a{font-weight:600;text-decoration:none}
.hub small{display:block;color:var(--muted);font-family:"Atkinson Hyperlegible",sans-serif}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:1rem 0}
.cards a{display:block;border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;background:var(--surface);text-decoration:none;color:var(--ink)}
.cards a strong{display:block;font-size:1.1rem}
.cards a span{color:var(--muted);font-size:.9rem;font-family:"Atkinson Hyperlegible",sans-serif}
.wrap.single{grid-template-columns:minmax(0,1fr)}