/* =====================================================================
   easy-french.ca - shared lesson-guide design system (v2)
   One stylesheet for Conjugation / Grammar / Pronunciation.
   Each page sets its own accent + masthead vars in a small inline <style>:
     --petrol / --petrol2 / --petrol-bg      primary jewel accent
     --coral / --coral-bg                     secondary / "changing part"
     --mast-tint / --mast-mid / --mast-wm     masthead glow + watermark
   Surface + neutral vars are remapped for dark mode by ef-theme.js, so
   only these var names are used for backgrounds, ink and lines.
   ===================================================================== */
*{box-sizing:border-box}
:root{
  --paper:#F7F4EE; --card:#FFFFFF; --card2:#FAF6EE;
  --ink:#211E18; --ink2:#5F574A; --ink3:#938A78;
  --line:#E7E0D1; --line2:#EFE9DD;
  --petrol:#2E5C9E; --petrol2:#4A74B8; --petrol-bg:#E7ECF6;
  --coral:#C2603C; --coral-bg:#F7E7DE;
  --g1:#2F7D5B; --g1bg:#E1EFE7;
  --g2:#355C9E; --g2bg:#E7ECF6;
  --g3:#7B4A86; --g3bg:#F0E7F2;
  --aux:#B07F1F; --auxbg:#F6EDD7;
  --amber:#B07A2A; --amberbg:#F7EDD9;
  --green:#2F7D5B; --greenbg:#E1EFE7;
  --refl:#355C9E;
  --gold:#E6B27A;
  --mast-tint:rgba(46,92,158,0.55); --mast-mid:#1C2740; --mast-wm:"je · tu · il · nous · vous · ils";
  --shadow:0 1px 2px rgba(33,30,24,.05),0 14px 34px -14px rgba(33,30,24,.16);
  --shadow-s:0 1px 2px rgba(33,30,24,.05);
  --lift:0 22px 46px -22px rgba(33,30,24,.30);
}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.disp{font-family:"Spectral",Georgia,serif; font-optical-sizing:auto;}
.mono{font-family:"Spline Sans Mono",ui-monospace,monospace;}
::selection{background:color-mix(in srgb,var(--petrol) 22%,transparent)}

/* ---------- Site header ---------- */
.site{background:#16140F;color:#F4EFE6;font-family:"Hanken Grotesk",system-ui,sans-serif;position:relative;z-index:20}
.site-in{max-width:1180px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.site .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#F4EFE6;font-weight:800;font-size:17px;letter-spacing:-.02em;margin-right:auto}
.site .logo .m{width:32px;height:32px;border-radius:9px;background:rgba(244,239,228,.08);border:1px solid rgba(244,239,228,.14);color:var(--gold);display:grid;place-items:center;font-family:"Spectral",serif;font-weight:600;font-size:18px}
.site .logo .dot{color:var(--gold)}.site .logo .tld{color:rgba(244,239,228,.6);font-weight:600}
.site .back{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:rgba(244,239,228,.7);font-weight:600;font-size:14px;padding:8px 13px;border:1px solid rgba(244,239,228,.16);border-radius:10px;transition:.16s}
.site .back:hover{color:#F4EFE6;border-color:rgba(244,239,228,.32);background:rgba(244,239,228,.05)}
.site .crumb{font-family:"Spline Sans Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
@media(max-width:680px){.site .crumb{display:none}}
.lvls{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.lvl{font-family:"Spline Sans Mono",monospace;font-size:11.5px;font-weight:500;padding:5px 9px;border-radius:8px;border:1px solid rgba(244,239,228,.16);color:rgba(244,239,228,.55);transition:.16s}
.lvl.on{background:var(--gold);border-color:var(--gold);color:#1A160F;font-weight:700}
@media(max-width:680px){.lvls{width:100%;order:5;margin-top:4px}}

/* ---------- Masthead ---------- */
.mast{position:relative; overflow:hidden; color:#F4EFE6; padding:66px 28px 74px; background:
  radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0/22px 22px,
  radial-gradient(80% 120% at 12% 120%, color-mix(in srgb,var(--mast-tint),transparent 45%) 0%, transparent 60%),
  radial-gradient(120% 150% at 85% -22%, var(--mast-tint) 0%, var(--mast-mid) 38%, #16140F 100%);}
.mast::before{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,transparent,rgba(11,10,8,.28));z-index:1;pointer-events:none}
.mast-inner{max-width:1180px; margin:0 auto; position:relative; z-index:2}
.kicker{display:inline-flex;align-items:center;gap:11px;font-family:"Spline Sans Mono",monospace; font-size:12.5px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold); margin:0 0 20px}
.kicker::before{content:"";width:30px;height:1.5px;background:var(--gold);opacity:.8;display:inline-block}
.mast h1{font-family:"Spectral",serif; font-weight:600; font-size:clamp(40px,7vw,76px);
  line-height:1.02; margin:0; letter-spacing:-.014em}
.mast h1 em{font-style:italic; color:var(--gold)}
.mast .sub{max-width:660px; margin:22px 0 0; font-size:18px; line-height:1.55; color:#D8D0C2}
.mast .meta{margin-top:32px; display:flex; flex-wrap:wrap; gap:10px}
.chip{font-family:"Spline Sans Mono",monospace; font-size:12px; letter-spacing:.04em;
  padding:8px 14px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:#CDC6B8;
  background:rgba(255,255,255,.03); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.chip b{color:var(--gold); font-weight:600}
.mast::after{content:var(--mast-wm); position:absolute; right:-2%; bottom:-30px;
  font-family:"Spectral",serif; font-size:150px; font-style:italic; font-weight:600;
  color:rgba(255,255,255,.045); white-space:nowrap; z-index:0; letter-spacing:.02em}

/* ---------- Anatomy hero ---------- */
.anat{max-width:1180px; margin:-38px auto 0; padding:0 24px; position:relative; z-index:5}
.anat-box{background:var(--card); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); padding:0 30px 26px; overflow:hidden;
  background-image:linear-gradient(var(--card),var(--card))}
.anat-box::before{content:"";display:block;height:4px;margin:0 -30px 26px;
  background:linear-gradient(90deg,var(--petrol),var(--coral))}
.anat-lead{font-size:13.5px; color:var(--ink2); margin:0 0 14px; font-family:"Spline Sans Mono",monospace;
  letter-spacing:.06em; text-transform:uppercase}
.anat-word{font-family:"Spectral",serif; font-weight:600; font-size:clamp(46px,9vw,90px);
  line-height:1; letter-spacing:-.01em; display:inline-flex; align-items:baseline}
.anat-word .a-rad{color:var(--ink)}
.anat-word .a-dot{color:var(--ink3); padding:0 .04em; font-style:italic}
.anat-word .a-ter{color:var(--coral)}
.anat-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:24px}
.anat-cell{border-top:2px solid var(--line2); padding-top:13px}
.anat-cell.r{border-top-color:var(--ink)}
.anat-cell.t{border-top-color:var(--coral)}.anat-cell h4,.anat-cell h3,.anat-cell h2{margin:0 0 5px; font-size:14px; letter-spacing:.02em; font-family:"Spline Sans Mono",monospace;
  text-transform:uppercase}.anat-cell.r h4,.anat-cell.r h3,.anat-cell.r h2{color:var(--ink)}.anat-cell.t h4,.anat-cell.t h3,.anat-cell.t h2{color:var(--coral)}
.anat-cell p{margin:0; font-size:14.5px; color:var(--ink2)}

/* ---------- Layout ---------- */
.wrap{max-width:1180px; margin:26px auto 0; padding:0 24px 80px;
  display:grid; grid-template-columns:236px 1fr; gap:42px; align-items:start}
nav.toc{position:sticky; top:18px; font-size:14px}
.toc-h{display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink3); padding:0 4px 12px; border-bottom:1px solid var(--line)}
.toc ol{list-style:none; margin:12px 0 0; padding:0; counter-reset:s}
.toc a{display:block; padding:7px 11px; border-radius:9px; color:var(--ink2); text-decoration:none;
  border-left:2px solid transparent; line-height:1.3; transition:background .14s,color .14s,border-color .14s}
.toc a:hover{background:var(--petrol-bg); color:var(--petrol)}
.toc a.lead{counter-increment:s; font-weight:600; color:var(--ink)}
.toc a.lead::before{content:counter(s,decimal-leading-zero); font-family:"Spline Sans Mono",monospace;
  font-size:11px; color:var(--coral); margin-right:9px}
.toc a.sub{padding-left:36px; font-size:13px}
.toc a.active{background:var(--petrol); color:#fff; border-left-color:var(--coral)}
.toc a.lead.active::before{color:var(--gold)}
.toc a.sub.active{background:var(--petrol); color:#fff}
/* progress ring in the contents header */
.pring{position:relative;width:34px;height:34px;flex:none}
.pring svg{display:block;transform:rotate(-90deg)}
.pring .pr-bg{fill:none;stroke:var(--line);stroke-width:3.4}
.pring .pr-fg{fill:none;stroke:var(--green);stroke-width:3.4;stroke-linecap:round;transition:stroke-dashoffset .55s cubic-bezier(.2,.7,.2,1)}
.pring .pr-num{position:absolute;inset:0;display:grid;place-items:center;font-family:"Spline Sans Mono",monospace;font-size:9px;font-weight:600;color:var(--green)}

main{min-width:0}

/* ---------- Sections ---------- */
section{scroll-margin-top:14px; margin:0 0 14px}
.sec-head{display:flex; align-items:center; gap:16px; margin:8px 0 6px; padding-bottom:16px;
  border-bottom:2px solid var(--ink); position:relative}
.sec-head::after{content:"";position:absolute;left:0;bottom:-2px;width:90px;height:2px;background:var(--petrol)}
.sec-no{font-family:"Spline Sans Mono",monospace; font-size:12.5px; color:var(--petrol); font-weight:600;
  letter-spacing:.04em; flex:none; background:var(--petrol-bg); padding:6px 10px; border-radius:8px; line-height:1}
.sec-head h2{font-family:"Spectral",serif; font-weight:600; font-size:clamp(27px,3.6vw,38px);
  margin:0; letter-spacing:-.012em; line-height:1.08}
.sec-intro{color:var(--ink2); font-size:16.5px; margin:16px 0 22px; max-width:64ch}
h3.blk{font-family:"Spectral",serif; font-weight:600; font-size:22px; margin:34px 0 6px; letter-spacing:-.005em}
h3.blk .fr{color:var(--ink3); font-style:italic; font-weight:400; font-size:18px; margin-left:6px}
p{margin:12px 0}
.lead-p{font-size:16.5px; color:var(--ink2); max-width:64ch}
strong{font-weight:700}
em.fr{font-style:italic}
code.f{font-family:"Spline Sans Mono",monospace; background:var(--card2); border:1px solid var(--line);
  padding:1px 6px; border-radius:6px; font-size:.92em; color:var(--ink)}
.tername{color:var(--coral); font-weight:600}

/* ---------- Conjugation / form cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin:18px 0 8px}
.vcard{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-s);
  overflow:hidden; border-top:3px solid var(--ink); transition:transform .16s,box-shadow .16s,border-color .16s}
.vcard:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.vcard.g1{border-top-color:var(--g1)} .vcard.g2{border-top-color:var(--g2)}
.vcard.g3{border-top-color:var(--g3)} .vcard.aux{border-top-color:var(--aux)}
.vcard.pr{border-top-color:var(--refl)}
.vhead{display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:14px 16px 10px; border-bottom:1px dashed var(--line)}
.vinf{font-family:"Spectral",serif; font-weight:600; font-size:21px; letter-spacing:-.005em}
.vtr{display:block; font-family:"Hanken Grotesk",sans-serif; font-weight:500; font-size:12.5px;
  color:var(--ink3); letter-spacing:.01em; margin-top:1px}
.vtag{flex:none; font-family:"Spline Sans Mono",monospace; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 8px; border-radius:999px; white-space:nowrap;
  background:var(--card2); color:var(--ink2); border:1px solid var(--line)}
.g1 .vtag{background:var(--g1bg); color:var(--g1); border-color:transparent}
.g2 .vtag{background:var(--g2bg); color:var(--g2); border-color:transparent}
.g3 .vtag{background:var(--g3bg); color:var(--g3); border-color:transparent}
.aux .vtag{background:var(--auxbg); color:var(--aux); border-color:transparent}
.pr .vtag{background:var(--g2bg); color:var(--refl); border-color:transparent}
.vbody{display:grid; grid-template-columns:1fr 1fr; gap:0 14px; padding:11px 16px 15px}
.vcard.pr .vbody{grid-template-columns:1fr; gap:0}
.vrow{display:flex; align-items:baseline; gap:6px; padding:3.5px 0; font-size:15px; white-space:nowrap}
.prn{color:var(--ink3); font-size:11.5px; min-width:50px; text-align:right; flex:none;
  font-family:"Spline Sans Mono",monospace; letter-spacing:-.01em}
.vfrm{font-weight:500}
.rad{color:var(--ink)}
.ter{color:var(--coral); font-weight:700}
.rfl{color:var(--refl); font-weight:600}
.vnote{grid-column:1/-1; margin-top:8px; padding-top:9px; border-top:1px dashed var(--line);
  font-size:13px; color:var(--ink2)}
.vnote b{color:var(--ink)}

/* ---------- Endings / reference tables ---------- */
.matrix{width:100%; border-collapse:separate; border-spacing:0; margin:16px 0; font-size:15px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-s)}
.matrix th,.matrix td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line2)}
.matrix thead th{background:var(--card2); font-family:"Spline Sans Mono",monospace; font-size:11.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink2); font-weight:600}
.matrix tbody tr:last-child td{border-bottom:none}
.matrix .px{color:var(--ink3); font-family:"Spline Sans Mono",monospace; font-size:12.5px}
.matrix .e{color:var(--coral); font-weight:700; font-family:"Spline Sans Mono",monospace}
.matrix .grp1{color:var(--g1)} .matrix .grp2{color:var(--g2)} .matrix .grp3{color:var(--g3)}
.matrix tbody tr{transition:background .12s}
.matrix tbody tr:hover{background:var(--petrol-bg)}
.ref{width:100%; border-collapse:separate; border-spacing:0; margin:14px 0; font-size:14.5px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-s)}
.ref th,.ref td{padding:10px 13px; text-align:left; border-bottom:1px solid var(--line2); vertical-align:top}
.ref thead th{background:var(--card2); font-family:"Spline Sans Mono",monospace; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink2)}
.ref tbody tr:last-child td{border-bottom:none}
.ref .vb{font-family:"Spectral",serif; font-weight:600; font-size:16px}
.ref .small{font-size:12.5px; color:var(--ink3)}
.ref .au-e{color:var(--aux); font-weight:600; font-family:"Spline Sans Mono",monospace; font-size:11px}
.ref tbody tr{transition:background .12s}
.ref tbody tr:hover{background:var(--petrol-bg)}

/* ---------- Callouts ---------- */
.call{border-radius:14px; padding:15px 18px 15px 18px; margin:16px 0; border:1px solid var(--line);
  background:var(--card); position:relative; box-shadow:var(--shadow-s)}
.call .lbl{font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; display:block; margin-bottom:5px}
.call p{margin:6px 0} .call p:first-of-type{margin-top:0} .call p:last-child{margin-bottom:0}
.call ul{margin:8px 0 0; padding-left:20px} .call li{margin:4px 0}
.call.rule{border-left:4px solid var(--petrol); background:linear-gradient(90deg,var(--petrol-bg),var(--card) 62%)}
.call.rule .lbl{color:var(--petrol)}
.call.watch{border-left:4px solid var(--amber); background:linear-gradient(90deg,var(--amberbg),var(--card) 62%)}
.call.watch .lbl{color:var(--amber)}
.call.tip{border-left:4px solid var(--green); background:linear-gradient(90deg,var(--greenbg),var(--card) 62%)}
.call.tip .lbl{color:var(--green)}
.call.prepo{border-left:4px solid var(--refl); background:linear-gradient(90deg,var(--g2bg),var(--card) 62%)}
.call.prepo .lbl{color:var(--refl)}
.call.key{border-left:4px solid var(--coral); background:linear-gradient(90deg,var(--coral-bg),var(--card) 62%)}
.call.key .lbl{color:var(--coral)}
.call.hook{border-left:4px solid var(--g3); background:linear-gradient(90deg,var(--g3bg),var(--card) 64%)}
.call.hook .lbl{color:var(--g3)}

/* ---------- Formula pills ---------- */
.formula{display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0;
  font-family:"Spline Sans Mono",monospace; font-size:14px}
.fp{padding:6px 12px; border-radius:9px; background:var(--card2); border:1px solid var(--line); color:var(--ink); font-weight:500}
.fp.hl{background:var(--coral-bg); border-color:transparent; color:var(--coral); font-weight:600}
.fp.au{background:var(--auxbg); border-color:transparent; color:var(--aux); font-weight:600}
.fop{color:var(--ink3); font-weight:700}

/* ---------- Two-column helper ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.mini{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px 16px; box-shadow:var(--shadow-s)}.mini h4,.mini h3{margin:0 0 8px; font-family:"Spline Sans Mono",monospace; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink2)}
.mini ul{margin:0; padding-left:18px} .mini li{margin:5px 0; font-size:14.5px}
.fr-ex{color:var(--petrol); font-style:italic}
.tag-inline{font-family:"Spline Sans Mono",monospace; font-size:10.5px; padding:2px 7px; border-radius:999px;
  background:var(--card2); border:1px solid var(--line); color:var(--ink2); letter-spacing:.04em}

/* ---------- Legend strip ---------- */
.legend{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:18px 0 4px; padding:13px 16px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; font-size:13.5px; box-shadow:var(--shadow-s)}
.legend .li{display:flex; align-items:center; gap:7px; color:var(--ink2)}
.sw{width:13px; height:13px; border-radius:4px; flex:none}
.sw.rad{background:var(--ink)} .sw.ter{background:var(--coral)} .sw.rfl{background:var(--refl)}

/* ---------- Tenses timeline ---------- */
.timeline{margin:16px 0 8px; padding:4px 2px 6px; overflow-x:auto}
.tl-track{display:flex; align-items:stretch; gap:10px; min-width:600px; position:relative; padding-top:4px}
.tl-track::before{content:""; position:absolute; left:10px; right:10px; top:52%; height:2px; background:linear-gradient(90deg,var(--g3),var(--petrol2),var(--coral)); opacity:.32; z-index:0}
.tl-item{flex:1; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 12px; position:relative; z-index:1; box-shadow:var(--shadow-s); min-width:118px}
.tl-when{font-family:"Spline Sans Mono",monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3)}.tl-item h4,.tl-item h3{font-family:"Spectral",serif; font-weight:600; font-size:15px; margin:3px 0 5px; line-height:1.1}
.tl-item p{margin:0; font-size:12.5px; color:var(--ink2); line-height:1.42}
.tl-f{font-family:"Spline Sans Mono",monospace; font-size:11px; color:var(--coral)}
.tl-f.now{color:var(--petrol)}
.tl-item.now{border:2px solid var(--petrol); background:var(--petrol-bg)}.tl-item.now h4,.tl-item.now .tl-when,.tl-item.now h3{color:var(--petrol)}

/* ---------- Flip-card quiz ---------- */
.quiz{margin:22px 0 8px; padding:17px 18px; background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-s)}
.quiz-h{font-family:"Spline Sans Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--petrol); margin-bottom:12px; display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.quiz-h span{color:var(--ink3); font-size:10px; letter-spacing:.02em; text-transform:none; font-family:"Hanken Grotesk",sans-serif}
.flips{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.flip{background:none; border:0; padding:0; cursor:pointer; perspective:800px; font:inherit; -webkit-tap-highlight-color:transparent}
.flip-inner{position:relative; display:block; width:100%; min-height:60px; transition:transform .55s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
.face{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:12px; padding:8px 10px; -webkit-backface-visibility:hidden; backface-visibility:hidden; font-size:16px; text-align:center; line-height:1.25}
.face.front{background:var(--card); border:1.5px solid var(--line); color:var(--ink)}
.face.back{background:var(--petrol); color:#fff; transform:rotateY(180deg); font-weight:600}
.flip:hover .face.front{border-color:var(--petrol2)}
.face.front em{color:var(--coral); font-style:normal; font-weight:700}
.face.back em{color:var(--gold); font-style:normal; font-weight:700}

/* ---------- Progress checks (contents) ---------- */
.lead-li{display:flex; align-items:center; gap:2px}
.lead-li>a.lead{flex:1}
.chk{flex:none; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); background:transparent; cursor:pointer; padding:0; position:relative; transition:.15s; margin-left:2px}
.chk:hover{border-color:var(--green)}
.chk.on{background:var(--green); border-color:var(--green)}
.chk.on::after{content:""; position:absolute; left:5.5px; top:2.5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.prog{font-family:"Spline Sans Mono",monospace; font-size:10px; letter-spacing:.02em; color:var(--green); font-weight:600}

/* ---------- house of être (SVG diagram) ---------- */
.house{background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:var(--shadow-s); margin:14px 0 8px}
.house svg{display:block; width:100%; height:auto}
.hs-wall{fill:var(--card); stroke:var(--petrol); stroke-width:2}
.hs-roof{fill:var(--petrol-bg); stroke:var(--petrol); stroke-width:2; stroke-linejoin:round}
.hs-door{fill:var(--petrol-bg); stroke:var(--petrol); stroke-width:1.5}
.hs-win{fill:var(--card2); stroke:var(--petrol); stroke-width:1.5}
.hs-chim{fill:var(--petrol-bg); stroke:var(--petrol); stroke-width:1.5}
.hs-mul{stroke:var(--petrol); stroke-width:1; opacity:.55}
.hs-lead{stroke:var(--ink3); stroke-width:1.2; stroke-dasharray:2 3; fill:none; opacity:.7}
.hs-flow{fill:none; stroke:var(--petrol); stroke-width:2; opacity:.65}
.hs-stair{fill:none; stroke:var(--petrol); stroke-width:2; opacity:.5}
.hs-fall{fill:none; stroke:var(--coral); stroke-width:2}
.hs-l{font-family:"Spectral",Georgia,serif; font-size:15px; fill:var(--ink); font-weight:600}
.hs-en{font-family:"Hanken Grotesk",sans-serif; font-size:11px; fill:var(--ink3)}
.hs-s{fill:var(--ink3); font-weight:400}

/* ---------- être verb pairs (passé composé) ---------- */
.pcpairs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 10px}
@media(max-width:680px){.pcpairs{grid-template-columns:1fr}}
.pcpair{display:flex; align-items:stretch; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:13px; padding:11px 13px; box-shadow:var(--shadow-s)}
.pcpair .pcv{flex:1}
.pcpair .pcx{align-self:center; color:var(--petrol); font-size:16px; flex:none; opacity:.7}
.pcv{display:flex; flex-direction:column; line-height:1.2}
.pcv b{font-family:"Spectral",Georgia,serif; font-weight:600; font-size:16.5px; color:var(--petrol)}
.pcv span{font-size:12.5px; color:var(--ink3)}
.pcsolos{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px}
.pcsolo{display:flex; flex-direction:column; line-height:1.2; background:var(--card2); border:1px solid var(--line); border-radius:11px; padding:9px 14px}
.pcsolo b{font-family:"Spectral",Georgia,serif; font-weight:600; font-size:15.5px; color:var(--petrol)}
.pcsolo span{font-size:12px; color:var(--ink3)}

/* ---------- IPA / sound tiles (pronunciation) ---------- */
.ipa{font-family:"Spline Sans Mono",monospace; color:var(--coral); font-weight:600}
.ipa-lg{font-family:"Spline Sans Mono",monospace; color:var(--coral); font-weight:600; font-size:1.05em}
.silent{color:var(--ink3); opacity:.5}
.hi{color:var(--coral); font-weight:700}
.hi2{color:var(--petrol); font-weight:700}
.sgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0 8px}
.stile{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 15px; box-shadow:var(--shadow-s); transition:transform .16s,box-shadow .16s}
.stile:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.stile .snd{font-family:"Spline Sans Mono",monospace; font-size:22px; color:var(--coral); font-weight:600; line-height:1}
.stile .ex{margin:7px 0 0; font-size:14px; color:var(--ink2)}
.stile .ex b{color:var(--ink); font-weight:600}
.stile .sp{margin:6px 0 0; font-family:"Spline Sans Mono",monospace; font-size:11.5px; color:var(--ink3); letter-spacing:.02em}
.stile.alt .snd{color:var(--petrol)}
.pairgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:14px 0 8px}
.pairc{background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; transition:border-color .16s}
.pairc:hover{border-color:var(--petrol2)}
.pairc .w{font-family:"Spectral",serif; font-size:18px; color:var(--ink); font-weight:600}
.pairc .p{font-family:"Spline Sans Mono",monospace; font-size:13px; color:var(--coral); margin-top:3px}
.exline{margin:10px 0; font-size:15.5px; color:var(--ink); line-height:1.5}
.exline .fr{font-style:italic}
.gp{font-style:italic}

/* ---------- Pronounce buttons ---------- */
.say{cursor:pointer}
.say:hover{color:var(--petrol)}
.sayb{margin-left:12px;vertical-align:middle;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--petrol);cursor:pointer;box-shadow:var(--shadow-s);transition:.16s}
.sayb:hover{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.say-btn{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:20px;height:20px;margin-left:6px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--petrol);cursor:pointer;flex:none;line-height:0;transition:.14s}
.say-btn:hover{background:var(--petrol-bg);border-color:var(--petrol)}
.say-btn:active{transform:scale(.9)}
.say-btn svg{width:11px;height:11px;display:block}
.say-btn.speaking{background:var(--petrol);border-color:var(--petrol);color:#fff}
.say-btn.na{opacity:.32;cursor:not-allowed}
.snd-row{display:inline-flex;align-items:center;gap:2px}

/* ---------- Chapter dashboard (generated by ef-guide.js) ---------- */
.gdash{padding:6px 0 8px}
.gdash-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin:0 2px 22px}
.gdash-hd .l{max-width:640px}
.gdash-kick{font-family:"Spline Sans Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);margin:0 0 9px}
.gdash-hd h2{font-family:"Spectral",serif;font-weight:600;font-size:clamp(26px,3.4vw,34px);line-height:1.1;margin:0 0 9px;color:var(--ink);letter-spacing:-.012em}
.gdash-hd p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.5;max-width:56ch}
.gdash-meter{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow-s)}
.gdash-meter .big{font-family:"Spline Sans Mono",monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);line-height:1.5}
.gdash-meter .big b{display:block;font-family:"Spectral",serif;font-size:26px;letter-spacing:-.01em;color:var(--green);font-weight:600;text-transform:none}
.gdash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.gcard{position:relative;display:flex;flex-direction:column;text-align:left;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-s);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,border-color .18s;min-height:132px}
.gcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--petrol)}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--lift);border-color:color-mix(in srgb,var(--petrol) 42%,var(--line))}
.gc-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.gc-no{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-family:"Spline Sans Mono",monospace;font-size:14px;font-weight:600;color:#fff;background:var(--petrol);box-shadow:0 8px 16px -8px color-mix(in srgb,var(--petrol) 75%,transparent)}
.gc-check{margin-left:auto;flex:none;width:24px;height:24px;border-radius:50%;border:1.6px solid var(--line);display:grid;place-items:center;color:#fff;background:transparent;transition:.16s}
.gc-check svg{width:12px;height:12px;opacity:0;transition:opacity .16s}
.gcard.done .gc-check{background:var(--green);border-color:var(--green)}
.gcard.done .gc-check svg{opacity:1}
.gcard.done .gc-no{background:color-mix(in srgb,var(--petrol) 62%,var(--card2))}
.gc-title{font-family:"Spectral",serif;font-weight:600;font-size:18.5px;line-height:1.2;margin:0;color:var(--ink);letter-spacing:-.006em}
.gc-hint{margin-top:auto;padding-top:13px;font-family:"Spline Sans Mono",monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:7px;transition:color .16s}
.gc-hint svg{width:13px;height:13px}
.gcard:hover .gc-hint{color:var(--petrol)}
.gcard.done .gc-hint{color:var(--green)}

/* ---------- Empty-state placeholder ---------- */
.placeholder{min-height:40vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 22px}
.ph-inner{max-width:470px}
.ph-emblem{font-family:"Spectral",serif; font-weight:600; font-size:56px; line-height:1; margin-bottom:18px; letter-spacing:-.01em}
.ph-emblem .r{color:var(--ink)} .ph-emblem .d{color:var(--ink3); font-style:italic; padding:0 .02em} .ph-emblem .t{color:var(--coral)}
.placeholder h2{font-family:"Spectral",serif; font-weight:600; font-size:27px; margin:0 0 10px; color:var(--ink); letter-spacing:-.005em}
.placeholder p{color:var(--ink2); margin:0 auto; font-size:16px; max-width:42ch; line-height:1.56}
.ph-hint{margin-top:20px; font-family:"Spline Sans Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--petrol)}

/* ---------- Footer ---------- */
.foot{max-width:1180px; margin:0 auto; padding:34px 24px 70px}
.foot-box{border-top:2px solid var(--ink); padding-top:22px; color:var(--ink2); font-size:14px}
.foot-box .disp{font-size:20px; color:var(--ink); display:block; margin-bottom:6px}
.foot-box a{color:var(--petrol)}

/* ---------- Chapter entrance ---------- */
@keyframes secIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .wrap{grid-template-columns:1fr; gap:18px}
  nav.toc{position:static; margin-bottom:8px; background:var(--card); border:1px solid var(--line);
    border-radius:14px; padding:14px; box-shadow:var(--shadow-s)}
  .toc ol{columns:2; column-gap:18px}
  .toc a.sub{display:none}
  .chk,.prog{display:none} .lead-li{display:block}
}
@media (max-width:680px){
  body{font-size:16px}
  .vbody{grid-template-columns:1fr; gap:0}
  .vcol+.vcol{border-top:1px dashed var(--line); margin-top:4px; padding-top:4px}
  .anat-grid,.duo{grid-template-columns:1fr}
  .toc ol{columns:1}
  .mast{padding:48px 20px 56px}
  .anat{padding:0 16px} .wrap{padding:0 16px 60px}
  .prn{min-width:62px}
  .gdash-hd{margin-bottom:16px}
}
@media (max-width:640px){
  .matrix,.ref{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}

/* ---------- Guide switcher (site header) ---------- */
.site .crumb{display:none}
.gswitch{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.gsw{font-family:"Spline Sans Mono",monospace;font-size:11.5px;font-weight:500;text-decoration:none;padding:7px 12px;border-radius:9px;border:1px solid rgba(244,239,228,.16);color:rgba(244,239,228,.62);white-space:nowrap;transition:.16s}
.gsw:hover{color:#F4EFE6;border-color:rgba(244,239,228,.34);background:rgba(244,239,228,.05)}
.gsw.on{background:var(--gold);border-color:var(--gold);color:#1A160F;font-weight:700}

/* ---------- Mobile chapter sheet ---------- */
.chap-fab{position:fixed;left:16px;bottom:16px;z-index:99998;display:none;align-items:center;gap:8px;padding:12px 17px;border-radius:999px;border:0;background:var(--petrol);color:#fff;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 14px 32px -12px rgba(0,0,0,.55)}
.chap-fab svg{width:17px;height:17px}
.gsheet{position:fixed;inset:0;z-index:99999}
.gsheet[hidden]{display:none}
.gsheet-scrim{position:absolute;inset:0;background:rgba(15,12,8,.5);opacity:0;transition:opacity .26s}
.gsheet.show .gsheet-scrim{opacity:1}
.gsheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:84vh;display:flex;flex-direction:column;background:var(--paper);border-top-left-radius:22px;border-top-right-radius:22px;box-shadow:0 -14px 40px rgba(0,0,0,.3);transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);padding-bottom:14px}
.gsheet.show .gsheet-panel{transform:none}
.gsheet-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;font-family:"Spline Sans Mono",monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.gsheet-x{border:0;background:none;font-size:24px;line-height:1;color:var(--ink3);cursor:pointer;padding:2px 6px}
.gsheet-guides{display:flex;gap:8px;padding:0 16px 14px;border-bottom:1px solid var(--line)}
.gs-guide{flex:1;text-align:center;text-decoration:none;font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.02em;padding:11px 6px;border-radius:11px;border:1px solid var(--line);color:var(--ink2);background:var(--card)}
.gs-guide.on{background:var(--petrol);border-color:var(--petrol);color:#fff;font-weight:700}
.gsheet-list{overflow-y:auto;padding:8px 12px 4px;-webkit-overflow-scrolling:touch}
.gs-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:0;background:none;padding:14px 12px;border-radius:13px;cursor:pointer;color:var(--ink);font:inherit}
.gs-row:active{background:var(--petrol-bg)}
.gs-no{font-family:"Spline Sans Mono",monospace;font-size:12px;font-weight:600;color:var(--petrol);min-width:24px;flex:none}
.gs-t{flex:1;font-family:"Spectral",serif;font-size:17.5px;font-weight:600;letter-spacing:-.005em;line-height:1.2}
.gs-ck{flex:none;width:26px;height:26px;border-radius:50%;border:1.6px solid var(--line);display:grid;place-items:center;color:#fff}
.gs-ck svg{width:13px;height:13px;opacity:0}
.gs-row.done .gs-ck{background:var(--green);border-color:var(--green)}
.gs-row.done .gs-ck svg{opacity:1}
@media(max-width:920px){ .chap-fab{display:inline-flex} }
@media(min-width:921px){ .chap-fab,.gsheet{display:none !important} }

/* ---------- Touch ergonomics ---------- */
@media(hover:none){
  .sayb{width:44px;height:44px}
  .say-btn{width:26px;height:26px}
  nav.toc a{padding:11px 12px}
}
@media(max-width:680px){ .lvls{display:none} }

/* ---------- Interactive drills (ef-drill.js) ---------- */
.drill{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-s);padding:16px 18px;margin:20px 0 8px}
.drill-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.drill-t{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);font-weight:600}
.drill-prog{font-family:"Spline Sans Mono",monospace;font-size:11px;color:var(--ink3);font-weight:600;white-space:nowrap}
.drill-prog b{color:var(--green)}
.drill-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin:11px 0 2px}
.drill-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--petrol),var(--green));transition:width .45s cubic-bezier(.2,.7,.2,1)}
.drill-done .drill-t::after{content:" \00b7 done";color:var(--green)}
.dq{padding:15px 0;border-top:1px solid var(--line2)}
.dq:first-of-type{border-top:none}
.dq-prompt{margin:0 0 11px;font-family:"Spectral",Georgia,serif;font-size:17px;color:var(--ink);line-height:1.42}
.dq-hint{font-family:"Spline Sans Mono",monospace;font-size:12px;color:var(--ink3);font-style:normal}
.dopts{display:flex;flex-wrap:wrap;gap:8px}
.dopt{font-family:"Spline Sans Mono",monospace;font-size:14.5px;font-weight:500;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:9px 16px;cursor:pointer;transition:border-color .14s,color .14s,background .14s}
.dopt:hover{border-color:var(--petrol);color:var(--petrol)}
.dopt.correct{background:var(--greenbg);border-color:var(--green);color:var(--green);font-weight:700;cursor:default}
.dopt.wrong{background:var(--coral-bg);border-color:var(--coral);color:var(--coral)}
.dq-solved .dopt:not(.correct){opacity:.45;pointer-events:none}
.dfill-wrap{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:"Spectral",Georgia,serif;font-size:16px;color:var(--ink)}
.dfill{font-family:"Spline Sans Mono",monospace;font-size:15px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:9px 13px;min-width:120px;transition:border-color .14s,background .14s}
.dfill:focus-visible{outline:2px solid var(--petrol);outline-offset:1px}
.dfill.correct{border-color:var(--green);background:var(--greenbg);color:var(--green);font-weight:700}
.dfill.wrong{border-color:var(--coral)}
.dcheck{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:600;font-size:13px;color:#fff;background:var(--petrol);border:none;border-radius:10px;padding:9px 16px;cursor:pointer;transition:background .14s}
.dcheck:hover{background:var(--petrol2)}
.dcheck:disabled{opacity:.5;cursor:default}
.dfill-fb{display:inline-grid;place-items:center;width:22px;height:22px}
.dfill-fb svg{width:16px;height:16px}
.dfill-fb.ok{color:var(--green)}
.dfill-fb.no{color:var(--coral)}
.dq-why{margin:11px 0 0;font-size:13.5px;color:var(--ink2);background:var(--greenbg);border-radius:9px;padding:9px 13px;line-height:1.5}
.dq-why b{color:var(--ink)}
@keyframes efShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
.shake{animation:efShake .42s}

/* ---------- Print ---------- */
@media print{
  .drill-bar,.dcheck,.dfill-fb{display:none !important}
  .drill,.dq{break-inside:avoid}
  .dq-why{display:block !important}
  body{background:#fff; font-size:11.5px}
  .site,nav.toc,.sayb,.say-btn,.gdash{display:none !important}
  .mast{background:#16140F !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; padding:30px}
  .mast::after{display:none}
  .wrap{grid-template-columns:1fr; padding:0 12px}
  .vcard,.call,.matrix,.ref,.mini,.legend{box-shadow:none; break-inside:avoid}
  .cards{break-inside:auto}
  section,h3.blk{break-inside:avoid-page}
  a{color:inherit; text-decoration:none}
  main section{display:block !important}
  #chapter-placeholder{display:none !important}
  #legend{display:flex !important}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}