/* ===== ZÉRO DINAR — course deck engine (book-matched) ===== */
:root{
  /* MarQenti palette — black · red · grey only (no orange, no yellow) */
  --ink:#0E0E0E; --cream:#F7F3EA; --red:#C3001E; --q:#C3001E; --accent:#C3001E;
  --body:#26231d; --muted:#9a948a;
  --paper:#F7F3EA; --line:rgba(14,14,14,.14);
  /* grey scale (warm neutral, sits on the cream paper) */
  --grey-l:#DEDBD4; --grey:#8C877D; --grey-d:#43403A;
  /* legacy alias — kept so any stray reference resolves to grey, never yellow */
  --gold:#8C877D;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:#1b1915;
  background-image:radial-gradient(120% 80% at 50% -8%, #2a2620 0%, #1b1915 60%, #141210 100%);
  font-family:'Newsreader',serif; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; overflow:hidden; -webkit-font-smoothing:antialiased;
}

/* ---- the 16:9 stage; container units scale all type to the stage ---- */
.stage{
  position:relative; width:min(96vw, 170.6vh); aspect-ratio:16/9;
  container-type:size; background:var(--paper);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.35);
  overflow:hidden;
}

/* ---- slides ---- */
.slide{
  position:absolute; inset:0; display:none;
  flex-direction:column; justify-content:center;
  padding:9cqh 9cqw; color:var(--ink);
}
.slide.on{ display:flex; animation:fade .35s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(1.2cqh); } to{ opacity:1; transform:none; } }

.kicker{ font-family:'Space Mono',monospace; font-size:2.3cqh; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent); margin-bottom:3.4cqh; }
.slide h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:11cqh; line-height:.98; }
.slide h2{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.015em;
  font-size:7.2cqh; line-height:1.03; }
.slide p{ font-family:'Newsreader',serif; font-size:3.7cqh; line-height:1.4; color:var(--body);
  max-width:78%; margin-top:3cqh; }
.slide p.lead{ font-size:4.4cqh; }
.slide em{ font-style:italic; color:#171512; }
.slide b,.slide strong{ font-weight:600; color:var(--ink); }
.q{ color:var(--q); }

.slide ul{ list-style:none; margin-top:4cqh; display:flex; flex-direction:column; gap:2.4cqh; }
.slide li{ font-family:'Newsreader',serif; font-size:3.9cqh; line-height:1.3; color:var(--body);
  padding-left:5cqw; position:relative; }
.slide li::before{ content:"→"; position:absolute; left:0; color:var(--accent);
  font-family:'Space Grotesk',sans-serif; font-weight:700; }
.slide li b{ color:var(--ink); }

/* numbered checklist rows */
.rows{ margin-top:3.6cqh; display:flex; flex-direction:column; gap:1.7cqh; }
.row{ display:flex; gap:3cqw; align-items:baseline; font-family:'Newsreader',serif;
  font-size:3.4cqh; line-height:1.28; color:var(--body); }
.row .n{ font-family:'Space Mono',monospace; font-weight:700; font-size:2.7cqh; color:var(--accent);
  flex:none; width:5cqw; }
.row b{ color:var(--ink); }

/* ---- cover / section (ink) ---- */
.slide.cover, .slide.section{ background:var(--ink); color:var(--cream); }
.slide.cover h1, .slide.section h1, .slide.cover h2, .slide.section h2{ color:var(--cream); }
.slide.cover p, .slide.section p{ color:#cfc9bd; }
.slide.cover .rule, .slide.section .rule{ width:16cqw; height:.7cqh; background:var(--accent); margin:4cqh 0; }
.slide.cover .meta{ position:absolute; left:9cqw; bottom:7cqh; font-family:'Space Mono',monospace;
  font-size:2.2cqh; letter-spacing:.18em; color:#8a8477; text-transform:uppercase; }
.slide.section .bignum{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20cqh;
  line-height:.8; color:var(--accent); }

/* ---- stat slide (big number) ---- */
.slide.stat{ align-items:flex-start; justify-content:center; background:var(--ink); }
.slide.stat .fig{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:34cqh;
  line-height:.82; color:var(--accent); letter-spacing:-.03em; }
.slide.stat .cap{ font-family:'Newsreader',serif; font-size:4.6cqh; color:var(--cream); margin-top:2.5cqh; max-width:80%; }
.slide.stat .kicker{ color:var(--accent); }

/* ---- quote slide ---- */
.slide.quote{ background:var(--paper); align-items:center; text-align:center; }
.slide.quote .mark{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20cqh;
  color:var(--accent); line-height:.5; height:9cqh; }
.slide.quote blockquote{ font-family:'Newsreader',serif; font-style:italic; font-size:6.4cqh;
  line-height:1.18; color:var(--ink); max-width:84%; }
.slide.quote cite{ display:block; font-family:'Space Mono',monospace; font-style:normal;
  font-size:2.4cqh; letter-spacing:.16em; color:var(--muted); margin-top:4cqh; text-transform:uppercase; }

/* ---- exercise / worksheet ---- */
.slide.work{ background:var(--paper); }
.slide.work .tag{ display:inline-block; font-family:'Space Mono',monospace; font-size:2.2cqh;
  letter-spacing:.18em; background:var(--ink); color:var(--cream); padding:1cqh 2.4cqw; text-transform:uppercase; }
.slide.work .tag.gold{ background:var(--accent); color:#fff; }
.blank{ border-bottom:1px dotted #b3ab9f; min-height:3cqh; margin-top:1cqh; }
.note{ font-family:'Newsreader',serif; font-style:italic; font-size:2.7cqh; color:#7c766c;
  border-left:.6cqw solid var(--line); padding-left:2.4cqw; margin-top:3.4cqh; max-width:82%; }

/* ---- footer chrome (rail) ---- */
.rail{ position:absolute; left:9cqw; right:9cqw; bottom:4.2cqh; display:flex;
  justify-content:space-between; align-items:center;
  font-family:'Space Mono',monospace; font-size:2cqh; letter-spacing:.14em; color:var(--muted); }
.slide.cover .rail, .slide.section .rail, .slide.stat .rail{ color:#6b655b; }
.rail .wm{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:0; color:inherit; }
.rail .wm i{ font-style:normal; color:var(--q); }

/* ---- deck HUD (outside stage) ---- */
/* vertical cluster on the LEFT edge — out of the way of centered content &
   corrections (the speaker-notes drawer lives on the right). */
.hud{ position:fixed; top:50%; left:14px; right:auto; bottom:auto; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:7px; align-items:stretch;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; color:#b7b0a4; z-index:40;
  background:rgba(14,14,14,.6); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.1); border-radius:13px; padding:9px; }
.hud button{ background:none; border:1px solid rgba(255,255,255,.16); color:#d2ccc0;
  font-family:'Space Mono',monospace; font-size:16px; line-height:1; width:38px; height:34px;
  padding:0; border-radius:8px; cursor:pointer; transition:.15s; }
.hud button:hover{ border-color:var(--accent); color:#fff; background:rgba(195,0,30,.28); }
.hud .count{ text-align:center; color:#8a8477; padding:1px 0; }
/* order: Préc, Suiv, count, Notes, Plein écran */
.hud > :nth-child(1){ order:1 } .hud > :nth-child(5){ order:2 }
.hud > :nth-child(2){ order:3 } .hud > :nth-child(3){ order:4 } .hud > :nth-child(4){ order:5 }
@media (max-width:760px){ .hud{ top:auto; bottom:12px; left:50%; right:auto; transform:translateX(-50%);
  flex-direction:row; align-items:center; } .hud > *{ order:0 !important } }
.progress{ position:fixed; top:0; left:0; height:3px; background:var(--accent); z-index:20;
  transition:width .3s ease; }

/* ---- speaker notes drawer ---- */
.notes-drawer{ position:fixed; right:0; top:0; bottom:0; width:min(34vw,460px);
  background:#141210; color:#d8d2c6; border-left:3px solid var(--accent);
  transform:translateX(102%); transition:transform .3s ease; z-index:30;
  padding:28px 26px; overflow-y:auto; font-family:'Newsreader',serif; }
.notes-drawer.open{ transform:none; }
.notes-drawer h4{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em;
  color:#c7c1b5; text-transform:uppercase; margin-bottom:14px; }
.notes-drawer .nbody{ font-size:16px; line-height:1.55; white-space:pre-wrap; }
.notes-drawer .nempty{ color:#6b655b; font-style:italic; }
.slide .notes{ display:none; }

/* ---- teaching layouts ---- */
.checks{ list-style:none; margin-top:4cqh; display:flex; flex-direction:column; gap:2.4cqh; }
.checks li{ font-family:'Newsreader',serif; font-size:3.9cqh; line-height:1.3; color:var(--body);
  padding-left:5.5cqw; position:relative; }
.checks li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700;
  font-family:'Space Grotesk',sans-serif; }
.checks li b{ color:var(--ink); }

.cols{ display:flex; gap:4.5cqw; margin-top:3.6cqh; }
.col{ flex:1; }
.col h3{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:3.4cqh; color:var(--ink); margin-bottom:1.6cqh; }
.col .sub{ font-family:'Space Mono',monospace; font-size:2.2cqh; letter-spacing:.14em; color:var(--accent); text-transform:uppercase; margin-bottom:1cqh; }
.col ul{ margin-top:1.4cqh; gap:1.5cqh; }
.col li{ font-size:3.2cqh; padding-left:4.2cqw; }

.big-point{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:8.5cqh;
  line-height:1.02; letter-spacing:-.015em; color:var(--ink); max-width:88%; margin-top:1cqh; }
.big-point .q{ color:var(--q); }

.trap{ border-left:.8cqw solid var(--accent); background:rgba(195,0,30,.055);
  padding:2.4cqh 2.8cqw; margin-top:2cqh; font-family:'Newsreader',serif; font-size:3.1cqh;
  line-height:1.34; color:var(--body); }
.trap b{ color:var(--accent); }
.trap + .trap{ margin-top:1.4cqh; }

.take{ border-left:.8cqw solid var(--ink); background:rgba(14,14,14,.055);
  padding:2.8cqh 3cqw; margin-top:2cqh; font-family:'Newsreader',serif; font-size:3.6cqh;
  line-height:1.32; color:var(--ink); max-width:88%; }
.take b{ color:var(--accent); }

.pill{ display:inline-block; font-family:'Space Mono',monospace; font-size:2.2cqh;
  letter-spacing:.16em; background:var(--ink); color:var(--cream); padding:1cqh 2.4cqw; text-transform:uppercase; }
.pill.red{ background:var(--accent); color:#fff; }
.pill.gold{ background:var(--grey-d); color:var(--cream); }

.mini{ font-family:'Space Mono',monospace; font-size:2.3cqh; letter-spacing:.06em; color:var(--muted); margin-top:2.6cqh; }

/* ---- interactive: fillable fiches ---- */
.fill-in{ font-family:'Newsreader',serif; font-size:inherit; color:var(--q); background:transparent;
  border:none; border-bottom:1px solid #b3ab9f; outline:none; padding:0 .6cqw 0.3cqh; min-width:14cqw; }
.fill-in:focus{ border-bottom-color:var(--accent); background:rgba(195,0,30,.05); }
.fill-in::placeholder{ color:#bdb6a9; font-style:italic; }

/* ---- interactive: calculators ---- */
.calc{ margin-top:3cqh; background:#fff; border:1px solid rgba(14,14,14,.16); padding:3cqh 3cqw; max-width:86%; }
.calc .field{ display:flex; align-items:center; gap:2.5cqw; margin:1.6cqh 0;
  font-family:'Newsreader',serif; font-size:3cqh; color:var(--body); }
.calc .field label{ flex:1; }
.calc input[type=number], .calc input[type=text]{ width:16cqw; font-family:'Space Mono',monospace; font-size:3cqh;
  color:var(--ink); border:1px solid #cfc7ba; border-radius:2px; padding:.9cqh 1.4cqw; text-align:right; outline:none; }
.calc input:focus{ border-color:var(--accent); }
.calc .out{ margin-top:2.4cqh; display:flex; align-items:baseline; gap:2.5cqw; flex-wrap:wrap;
  border-top:1px solid rgba(14,14,14,.14); padding-top:2.4cqh; }
.calc .out .big{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:9cqh; line-height:.9; color:var(--accent); letter-spacing:-.02em; }
.calc .out .lbl{ font-family:'Newsreader',serif; font-size:3.1cqh; color:var(--body); flex:1; min-width:30cqw; }
.calc .verdict{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:4cqh; margin-top:1cqh; }
.calc .verdict.asset{ color:var(--ink); } .calc .verdict.watch{ color:var(--grey-d); } .calc .verdict.liab{ color:var(--accent); }
.range{ display:flex; align-items:center; gap:2cqw; }
.range input[type=range]{ accent-color:var(--accent); width:20cqw; }
.range .v{ font-family:'Space Mono',monospace; font-weight:700; font-size:3.2cqh; color:var(--ink); width:3cqw; text-align:center; }

/* ---- interactive: click-to-reveal ---- */
.reveal-btn{ font-family:'Space Mono',monospace; font-size:2.3cqh; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--cream); border:none; padding:1.2cqh 2.6cqw; border-radius:3px; cursor:pointer; margin-top:2.4cqh; }
.reveal-btn:hover{ background:var(--accent); }
.reveal-target{ display:none; margin-top:2cqh; }
.reveal-target.show{ display:block; animation:fade .3s ease; }

/* ===== VISUAL SYSTEM — icons, charts, infographics (book colors only) ===== */
.ic{ width:1em; height:1em; display:inline-block; vertical-align:-.15em; fill:none;
  stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* icon-in-circle — the repeating motif */
.icirc{ display:inline-flex; align-items:center; justify-content:center;
  width:11cqh; height:11cqh; border-radius:50%; flex:none; background:var(--ink); color:var(--cream); }
.icirc .ic{ width:5.5cqh; height:5.5cqh; stroke-width:1.6; }
.icirc.grey, .icirc.gold{ background:var(--grey-l); color:var(--ink); }
.icirc.red{ background:var(--accent); color:var(--cream); }
.icirc.ghost{ background:transparent; border:.35cqh solid var(--ink); color:var(--ink); }
.icirc.sm{ width:8cqh; height:8cqh; } .icirc.sm .ic{ width:4cqh; height:4cqh; }

/* icon rows: circle + heading + text */
.irows{ margin-top:3.5cqh; display:flex; flex-direction:column; gap:2.6cqh; }
.irow{ display:flex; gap:3cqw; align-items:flex-start; }
.irow .txt{ flex:1; }
.irow .txt h3{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:3.6cqh; color:var(--ink); margin:.4cqh 0 .3cqh; }
.irow .txt p{ margin:0; font-size:2.9cqh; max-width:100%; color:var(--body); }

/* icon grid (2x2) */
.igrid{ margin-top:3.4cqh; display:grid; grid-template-columns:1fr 1fr; gap:3cqh 5cqw; }
.icard{ display:flex; gap:2.5cqw; align-items:flex-start; }
.icard .txt h3{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:3.1cqh; color:var(--ink); margin-bottom:.3cqh; }
.icard .txt p{ margin:0; font-size:2.6cqh; color:var(--body); }

/* ---- SVG-free bar chart (comparison) ---- */
.chart{ margin-top:3.6cqh; width:84%; }
.bar-row{ display:flex; align-items:center; gap:2.5cqw; margin:1.9cqh 0; font-family:'Space Mono',monospace; }
.bar-row .lab{ width:24cqw; font-size:2.7cqh; color:var(--body); text-align:right; flex:none; }
.bar-track{ flex:1; height:5.6cqh; background:rgba(14,14,14,.06); position:relative; overflow:hidden; }
.bar-fill{ height:100%; background:var(--accent); display:flex; align-items:center; justify-content:flex-end;
  padding-right:1.6cqw; color:var(--cream); font-size:2.6cqh; font-weight:700; transition:width .5s ease; white-space:nowrap; }
.bar-fill.gold, .bar-fill.grey{ background:var(--grey); color:var(--cream); }
.bar-fill.ink{ background:var(--ink); color:var(--cream); }

/* ---- infographic: the ladder / staircase ---- */
.ladder{ margin-top:2.6cqh; display:flex; align-items:flex-end; gap:1.4cqw; height:50cqh; }
.rung{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; }
.rung .step{ width:100%; background:var(--grey-d); color:var(--cream); padding:1.6cqh .8cqw 1.8cqh; text-align:center; }
.rung .num{ font-family:'Space Mono',monospace; font-size:2.1cqh; color:#c9c4b9; }
.rung .t{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.7cqh; line-height:1.05; margin-top:.5cqh; }
.rung .d{ font-family:'Newsreader',serif; font-size:2.1cqh; color:#cfc9bd; margin-top:.9cqh; line-height:1.18; }
.rung.hi .step{ background:var(--accent); }
.rung.gold .step, .rung.top .step{ background:var(--ink); color:var(--cream); }

/* ---- process flow: connected numbered steps ---- */
.flow{ margin-top:3.8cqh; display:flex; align-items:flex-start; }
.fstep{ flex:1; text-align:center; position:relative; padding:0 .6cqw; }
.fstep .fn{ width:8.5cqh; height:8.5cqh; border-radius:50%; background:var(--ink); color:var(--cream);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:3.4cqh; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5cqh; position:relative; z-index:2; }
.fstep .ft{ font-family:'Newsreader',serif; font-size:2.7cqh; color:var(--body); line-height:1.2; }
.fstep .ft b{ color:var(--ink); }
.fstep::after{ content:""; position:absolute; top:4.1cqh; left:50%; width:100%; height:.3cqh; background:rgba(14,14,14,.16); z-index:1; }
.fstep:last-child::after{ display:none; }

/* ---- code block (dev / stack decks) ---- */
.code{ font-family:'Space Mono',monospace; font-size:2.4cqh; line-height:1.55; background:#141210;
  color:#e8e4da; padding:2.6cqh 2.8cqw; margin-top:2.6cqh; border-left:.7cqw solid var(--accent);
  max-width:92%; white-space:pre; overflow:auto; }
.code .cm{ color:#8C877D; }          /* comment */
.code .hl{ color:#ff7d8a; }          /* accent token — red family, never orange/yellow */
.code .mut{ color:#b7b0a4; }         /* dim */
.code .fn{ display:block; font-size:2cqh; color:#8C877D; margin-bottom:1.2cqh; letter-spacing:.08em; text-transform:uppercase; }
.slide.work .code{ font-size:2.3cqh; }
.cols .code{ max-width:100%; font-size:2.1cqh; margin-top:2cqh; }

@media print{ body{ background:#fff; } .hud,.progress,.notes-drawer{ display:none; }
  .reveal-target{ display:block !important; } }