:root{
  --ink:#12262F; --ink-soft:#4A5B62; --ink-mute:#7C8B91;
  --cream:#FAF6EE; --paper:#FFFFFF; --line:#E4DACA;
  --deep:#0E2A3A; --brass:#B0842B; --brick:#8C3B2E; --moss:#2F5D4E;
  --r:14px; --r-lg:22px;
  --pad:20px;
  --shadow:0 1px 2px rgba(18,38,47,.06), 0 8px 24px rgba(18,38,47,.07);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.app{min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;position:relative}

/* ---------- boot ---------- */
.boot{flex:1;display:grid;place-items:center}
.boot-mark{font-family:var(--serif);font-size:56px;color:var(--brass);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- typo ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;margin:0}
h1{font-size:32px;line-height:1.15}
h2{font-size:24px;line-height:1.2}
h3{font-size:18px;line-height:1.25}
.lead{color:var(--ink-soft);font-size:17px;margin:10px 0 0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.muted{color:var(--ink-mute);font-size:14px}

/* ---------- layout ---------- */
.screen{flex:1;display:flex;flex-direction:column;padding:var(--pad);padding-bottom:0;animation:in .28s ease both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.body{flex:1;padding-bottom:24px}
.foot{position:sticky;bottom:0;padding:14px 0 calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--cream) 62%,transparent)}

.topbar{display:flex;align-items:center;gap:12px;padding:14px var(--pad) 4px}
.wordmark{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.02em}
.wordmark span{color:var(--brass)}
.bar{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--deep);border-radius:99px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.iconbtn{width:36px;height:36px;border-radius:99px;border:1.5px solid var(--line);display:grid;place-items:center;font-size:16px;flex:none}
.link{font-size:14px;color:var(--ink-mute);text-decoration:underline;text-underline-offset:3px}

/* ---------- boutons ---------- */
.btn{
  display:block;width:100%;padding:16px;border-radius:var(--r);
  background:var(--deep);color:#fff;font-weight:600;font-size:17px;text-align:center;
  box-shadow:0 3px 0 #08202D; transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #08202D}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.brass{background:var(--brass);box-shadow:0 3px 0 #8A6720}

/* ---------- choix ---------- */
.choices{display:grid;gap:10px;margin-top:20px}
.choice{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:16px;border-radius:var(--r);background:var(--paper);
  border:1.5px solid var(--line);font-weight:500;transition:.14s;
}
.choice:active{transform:scale(.985)}
.choice.on{border-color:var(--deep);background:#EEF3F6;box-shadow:inset 0 0 0 1px var(--deep)}
.choice .tag{font-size:13px;color:var(--ink-mute);font-weight:500}

/* grille de sujets */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.tile{
  position:relative;aspect-ratio:16/11;border-radius:var(--r);overflow:hidden;
  background:var(--deep);display:flex;align-items:flex-end;padding:12px;
  border:2px solid transparent;transition:.14s;
}
.tile .ph{position:absolute;inset:0;background:linear-gradient(150deg,#1E4356,#0E2A3A 55%,#22140E)}
.tile .ph.i1{background:linear-gradient(150deg,#3E6B7A,#14313F)}
.tile .ph.i2{background:linear-gradient(150deg,#8A6A3A,#3A2B18)}
.tile .ph.i3{background:linear-gradient(150deg,#2F5D4E,#14312A)}
.tile .ph.i4{background:linear-gradient(150deg,#8C5A3E,#3A2018)}
.tile .ph.i5{background:linear-gradient(150deg,#4B5B84,#1B2038)}
.tile:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,16,22,.82),transparent 62%)}
.tile b{position:relative;z-index:1;color:#fff;font-family:var(--serif);font-size:16px;line-height:1.15;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tile.on{border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,132,43,.25)}

/* ---------- cartes ---------- */
.hero{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--paper)}
.hero .ph{aspect-ratio:16/10}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow);
}
.card p{margin:0;font-size:17px;line-height:1.6}

/* ---------- parcours ---------- */
.stats{display:flex;gap:8px;margin:16px 0 22px}
.stat{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px;text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:24px;line-height:1.1}
.stat span{font-size:11px;color:var(--ink-mute);letter-spacing:.03em}

.era{margin-bottom:26px}
.era-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.era-num{width:34px;height:34px;flex:none;border-radius:10px;background:var(--deep);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:15px}
.era-blurb{font-size:14px;color:var(--ink-soft);margin:0 0 12px}
.lesson{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--line);margin-bottom:8px;transition:.14s;
}
.lesson:active{transform:scale(.99)}
.lesson.done{background:#F2F6F3;border-color:#CBDFD2}
.dot{width:26px;height:26px;flex:none;border-radius:99px;border:2px solid var(--line);display:grid;place-items:center;font-size:13px;color:var(--ink-mute)}
.lesson.done .dot{background:var(--moss);border-color:var(--moss);color:#fff}
.lesson-t{flex:1;min-width:0}
.lesson-t b{display:block;font-weight:600;font-size:15px;line-height:1.25}
.lesson-t span{font-size:12px;color:var(--ink-mute)}
.soon{padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r);font-size:13px;color:var(--ink-mute);text-align:center}

/* ---------- quiz ---------- */
.qopt{display:block;width:100%;text-align:left;padding:15px;border-radius:var(--r);background:var(--paper);border:1.5px solid var(--line);margin-bottom:9px;font-weight:500;transition:.14s}
.qopt.ok{border-color:var(--moss);background:#EDF5F0}
.qopt.ko{border-color:var(--brick);background:#FBEFEC}
.verdict{margin-top:14px;padding:14px;border-radius:var(--r);font-size:15px}
.verdict.ok{background:#EDF5F0;border:1px solid #CBDFD2}
.verdict.ko{background:#FBEFEC;border:1px solid #EBCFC8}
.verdict b{display:block;margin-bottom:4px;font-family:var(--serif);font-size:17px}

/* ---------- divers ---------- */
.langrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.done-mark{width:74px;height:74px;border-radius:99px;background:var(--moss);color:#fff;display:grid;place-items:center;font-size:34px;margin:36px auto 20px}
.center{text-align:center}
.sources{margin-top:22px;font-size:12px;color:var(--ink-mute);line-height:1.5}
.sources b{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:10px;margin-bottom:5px;color:var(--brass)}
.spacer{height:10px}
.tabs{display:flex;border-top:1px solid var(--line);background:var(--paper);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;padding:12px 0;text-align:center;font-size:12px;font-weight:600;color:var(--ink-mute)}
.tab.on{color:var(--deep)}
.tab i{display:block;font-style:normal;font-size:19px;margin-bottom:2px}