/* ============================================================
   CRUSTALAB — THÈME PARTAGÉ (charte OXBLOOD + CRÈME)
   Utilisé par tous les books. Pipeline HTML/CSS -> PDF A4.
   Typo : Fraunces (titres) / Inter (texte & labels).
   Charte tirée du logo CrustaLab.
   ============================================================ */

@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-400n.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-500n.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-600n.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-700n.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-900n.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-400n.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-500n.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-600n.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-700n.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-800n.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --ink:#2e1314; --ink2:#3a1819; --ink3:#48201f;
  --paper:#f5edda; --paper2:#ece0c6; --paper3:#e0d2b2;
  --coral:#7e2329; --coral-d:#611a1d; --coral-dd:#431113; --coral-soft:#f0dcd4;
  --clay:#d8a48a; --cherry:#cb4f43;
  --gold:#b07e2a; --gold-soft:#f1e6cc;
  --tx:#3a2823; --muted:#8c7a64; --faint:#bcaa88;
  --line:#e3d5ba; --line2:#d2bf9c; --line-dk:rgba(255,255,255,.15);
  --sev-l:#5f7d4a; --sev-l-bg:#eaeedd;
  --sev-m:#bd8526; --sev-m-bg:#f4e9cf;
  --sev-s:#8a2222; --sev-s-bg:#f1ddd7;
  --ok:#5f7d4a; --no:#8a2222;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;color:var(--tx);background:#cfc7ba;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-font-smoothing:antialiased;}

@page{size:A4;margin:0}

.page{position:relative;width:210mm;height:297mm;overflow:hidden;background:var(--paper)}
.page:not(:last-of-type){break-after:page;page-break-after:always}
.dark{background:var(--ink);color:#f3efe8}

@media screen{ body{padding:24px 0} .page{margin:0 auto 26px;box-shadow:0 18px 50px rgba(0,0,0,.28)} }
@media screen{
  body:has(.page:target){padding:0;background:#fff}
  body:has(.page:target) .page{display:none}
  body:has(.page:target) .page:target{display:block;margin:0;box-shadow:none}
}

/* ---- shared frame ---- */
.frame{position:absolute;inset:16mm 16mm 14mm 16mm;display:flex;flex-direction:column}
.run{display:flex;justify-content:space-between;align-items:center;
  font-size:7.4pt;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.run .r-r{color:var(--coral-d)}
.dark .run{color:#b3a489}.dark .run .r-r{color:var(--clay)}
.rule{height:1px;background:var(--line);margin:5mm 0 0}
.dark .rule{background:var(--line-dk)}
.foot{position:absolute;left:16mm;right:16mm;bottom:9mm;display:flex;justify-content:space-between;align-items:center;
  font-size:7pt;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.foot .pg{font-family:'Fraunces';font-weight:600;font-size:11pt;letter-spacing:0;color:var(--coral-d)}
.dark .foot{color:#9b958a}

/* ---- typography helpers ---- */
.kicker{font-size:8pt;letter-spacing:.42em;text-transform:uppercase;font-weight:700;color:var(--coral-d)}
.eyebrow{font-size:7.6pt;letter-spacing:.34em;text-transform:uppercase;font-weight:700;color:var(--muted)}
h1,h2,h3{font-family:'Fraunces';font-weight:600;line-height:1.02;letter-spacing:-.01em;margin:0;color:var(--ink)}
.dark h1,.dark h2,.dark h3{color:#fbf8f2}
.display{font-size:46pt;font-weight:600;line-height:.96}
.title{font-size:30pt;font-weight:600;line-height:1.0}
.title .dot{color:var(--coral)}
.lede{font-size:10.5pt;line-height:1.5;color:#4a453f;max-width:150mm}
.dark .lede{color:#cfc7ba}
p{margin:0 0 2.6mm;font-size:9.4pt;line-height:1.5}
.small{font-size:8.4pt;line-height:1.45;color:var(--muted)}
strong{font-weight:700;color:var(--ink)}
.dark strong{color:#fff}
.spaced{font-size:8pt;letter-spacing:.5em;text-transform:uppercase;font-weight:700;color:var(--coral-d)}

/* ---- icon system ---- */
svg.ic{width:1em;height:1em;display:inline-block;vertical-align:-.12em;stroke:currentColor;
  fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* chip / badges */
.sev{display:inline-flex;align-items:center;gap:5px;font-size:7.4pt;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 9px 3px 7px;border-radius:20px;border:1px solid}
.sev .dotc{width:7px;height:7px;border-radius:50%}
.sev-l{color:#2c6e4b;background:var(--sev-l-bg);border-color:#bfe0cd}.sev-l .dotc{background:var(--sev-l)}
.sev-m{color:#8f5e12;background:var(--sev-m-bg);border-color:#ecd6a3}.sev-m .dotc{background:var(--sev-m)}
.sev-s{color:#962318;background:var(--sev-s-bg);border-color:#f0c4bd}.sev-s .dotc{background:var(--sev-s)}

/* impact meter */
.impact{display:flex;align-items:center;gap:6px}
.impact .seg{width:13px;height:6px;border-radius:3px;background:var(--paper3)}
.impact .seg.on{background:var(--coral)}
.impact .lab{font-size:7pt;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ============== COVER ============== */
.cover{background:var(--ink);color:#f5f1ea}
.cover .photo{position:absolute;inset:0}
.cover .photo img{width:100%;height:100%;object-fit:cover;opacity:.62}
.cover .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(34,11,12,.58) 0%,rgba(34,11,12,.22) 32%,rgba(34,11,12,.58) 62%,rgba(26,8,9,.96) 100%)}
.cover .cframe{position:absolute;inset:16mm;display:flex;flex-direction:column;justify-content:space-between}
.cover .ctop{display:flex;justify-content:space-between;align-items:flex-start}
.logo-seal{width:27mm;height:27mm;border-radius:50%;display:block;object-fit:cover;
  box-shadow:0 5px 20px rgba(0,0,0,.40);background:var(--paper)}
.cover .badge-n1{text-align:right;font-size:7.2pt;letter-spacing:.3em;text-transform:uppercase;color:#e9ddca;font-weight:600;line-height:1.8}
.cover .badge-n1 b{display:block;color:#fff}
.cover .chero{margin-bottom:2mm}
.cover .ctag{font-size:8pt;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--clay);margin-bottom:7mm}
.cover h1.ctitle{font-size:74pt;line-height:.9;font-weight:600;color:#fff;letter-spacing:-.02em}
.cover h1.ctitle .dot{color:var(--cherry)}
.divider h2 .dot{color:var(--cherry)}
.cover .csub{margin-top:8mm;max-width:130mm;font-size:10.5pt;line-height:1.55;color:#e3d4bd}
.cover .cmeta{margin-top:9mm;display:flex;gap:22px;border-top:1px solid rgba(255,255,255,.18);padding-top:6mm}
.cover .cmeta .m{font-size:7.4pt;letter-spacing:.16em;text-transform:uppercase;color:#bdb2a1;font-weight:600}
.cover .cmeta .m b{display:block;font-family:'Fraunces';font-size:13pt;letter-spacing:0;color:#fff;text-transform:none;font-weight:600;margin-top:3px}

/* ============== generic blocks ============== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm}

/* callout box */
.box{border-radius:12px;padding:6mm 6.5mm;background:#fff;border:1px solid var(--line);position:relative}
.box .b-h{display:flex;align-items:center;gap:8px;font-size:7.8pt;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--coral-d);margin-bottom:2.5mm}
.box .b-h .bi{width:22px;height:22px;border-radius:6px;background:var(--coral-soft);color:var(--coral-d);
  display:flex;align-items:center;justify-content:center;font-size:13px}
.box.tip{background:var(--coral-soft);border-color:#e6c2b9}
.box.warn{background:#f7e7d9;border-color:#e6c3aa}.box.warn .b-h{color:#9a4418}.box.warn .b-h .bi{background:#efd2bc;color:#9a4418}
.box.note{background:var(--ink);border-color:#4a2222;color:#ead9c2}
.box.note .b-h{color:var(--clay)}.box.note .b-h .bi{background:#4a2020;color:var(--clay)}
.box.note p,.box.note .small{color:#cdc5b8}
.box.good{background:var(--sev-l-bg);border-color:#bfe0cd}.box.good .b-h{color:#2c6e4b}.box.good .b-h .bi{background:#cde8d7;color:#2c6e4b}
.box p:last-child{margin-bottom:0}

/* pull quote */
.pquote{font-family:'Fraunces';font-weight:500;font-size:16pt;line-height:1.28;color:var(--ink);
  text-align:center;padding:7mm 10mm;position:relative}
.pquote .qm{color:var(--coral);font-size:20pt}
.dark .pquote{color:#fbf6ee}

/* feature card with icon */
.fcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:5.5mm;display:flex;flex-direction:column;gap:2mm}
.fcard .fi{width:34px;height:34px;border-radius:9px;background:var(--coral-soft);color:var(--coral-d);
  display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:1.5mm}
.fcard h3{font-family:'Inter';font-weight:700;font-size:10pt;color:var(--ink)}
.fcard .num{font-family:'Fraunces';font-weight:600;font-size:22pt;color:var(--coral);line-height:1}

/* numbered step */
.steps{display:flex;flex-direction:column;gap:3.5mm}
.step{display:flex;gap:5mm;align-items:flex-start}
.step .sn{flex:none;width:13mm;height:13mm;border-radius:50%;border:1.6px solid var(--coral);color:var(--coral-d);
  font-family:'Fraunces';font-weight:600;font-size:17pt;display:flex;align-items:center;justify-content:center}
.step .sc h3{font-family:'Inter';font-weight:700;font-size:10.5pt;margin-bottom:1mm}

/* tables */
table{width:100%;border-collapse:collapse;font-size:8.8pt}
thead th{text-align:left;font-size:7.4pt;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--muted);
  padding:0 0 3mm;border-bottom:1.5px solid var(--ink)}
tbody td{padding:3.2mm 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.4}
tbody tr:last-child td{border-bottom:none}
.tcol-ic{width:9mm;color:var(--coral-d)}

/* disease / detail card (enriched) */
.dcard{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-bottom:4mm}
.dcard .dc-head{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:3.4mm 5.5mm;background:var(--paper2);border-bottom:1px solid var(--line)}
.dcard .dc-tt{display:flex;align-items:baseline;gap:8px}
.dcard .dc-tt h3{font-family:'Fraunces';font-weight:600;font-size:15pt;color:var(--ink)}
.dcard .dc-tt .lat{font-style:italic;font-size:8.6pt;color:var(--muted);font-family:'Fraunces'}
.dcard .dc-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.dcell{padding:3.4mm 5.5mm;border-top:1px solid var(--line)}
.dcell:nth-child(odd){border-right:1px solid var(--line)}
.dcell .dl{display:flex;align-items:center;gap:7px;font-size:7.4pt;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:var(--coral-d);margin-bottom:2mm}
.dcell .dl .di{font-size:13px}
.dcell p{font-size:8.7pt;line-height:1.42;margin:0;color:#403b35}
.dcard .dc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:3mm 5.5mm;background:#fff;border-top:1px solid var(--line)}
.dc-foot .imp-wrap{display:flex;align-items:center;gap:9px}

/* part divider */
.divider{background:var(--ink);color:#f4efe7}
.divider .photo{position:absolute;inset:0}
.divider .photo img{width:100%;height:100%;object-fit:cover;opacity:.30}
.divider .veil{position:absolute;inset:0;background:linear-gradient(120deg,rgba(34,11,12,.93),rgba(40,14,15,.55))}
.divider .dframe{position:absolute;inset:16mm;display:flex;flex-direction:column;justify-content:center}
.divider .pno{font-family:'Fraunces';font-weight:600;font-size:120pt;line-height:.8;color:rgba(255,255,255,.12)}
.divider h2{font-size:40pt;color:#fff;margin-top:-6mm}
.divider .dlist{margin-top:9mm;border-top:1px solid rgba(255,255,255,.18);padding-top:6mm;max-width:120mm}
.divider .dlist .di{display:flex;gap:10px;align-items:baseline;padding:2.4mm 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:9.4pt;color:#ddd4c6}
.divider .dlist .di b{font-family:'Fraunces';color:var(--clay);font-size:11pt;min-width:9mm}

/* legend / how-to */
.legrow{display:flex;gap:5mm;align-items:flex-start;padding:3.5mm 0;border-bottom:1px solid var(--line)}
.legrow:last-child{border-bottom:none}
.legrow .lk{flex:none;width:44mm}

/* TOC */
.toc-part{font-size:7.8pt;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--coral-d);
  margin:6mm 0 2mm;display:flex;align-items:center;gap:8px}
.toc-part::after{content:"";flex:1;height:1px;background:var(--line)}
.toc-row{display:flex;align-items:baseline;gap:6px;padding:2.4mm 0;border-bottom:1px solid var(--line)}
.toc-row .tn{font-family:'Fraunces';font-weight:600;font-size:12pt;color:var(--coral);min-width:9mm}
.toc-row .tt{font-size:10pt;font-weight:500;color:var(--ink)}
.toc-row .dots{flex:1;border-bottom:1px dotted var(--line2);transform:translateY(-3px)}
.toc-row .tp{font-family:'Fraunces';font-weight:600;font-size:10pt;color:var(--muted)}

/* comparison ok/bad */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:5mm}
.cmp .c{border-radius:12px;padding:5mm;border:1px solid var(--line)}
.cmp .c.ok{background:var(--sev-l-bg);border-color:#bfe0cd}
.cmp .c.bad{background:var(--sev-s-bg);border-color:#f0c4bd}
.cmp .c .ch{display:flex;align-items:center;gap:8px;font-weight:800;font-size:9pt;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3mm}
.cmp .c.ok .ch{color:#2c6e4b}.cmp .c.bad .ch{color:#962318}
.cmp .c ul{margin:0;padding-left:0;list-style:none}
.cmp .c li{font-size:8.6pt;line-height:1.5;padding-left:16px;position:relative;margin-bottom:1.5mm}
.cmp .c.ok li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.cmp .c.bad li::before{content:"✕";position:absolute;left:0;color:var(--no);font-weight:800}

/* two-column safe/forbid */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
.collist .clh{display:flex;align-items:center;gap:8px;font-size:8.4pt;letter-spacing:.12em;text-transform:uppercase;font-weight:800;margin-bottom:3mm;padding-bottom:2mm;border-bottom:1.5px solid currentColor}
.collist.safe .clh{color:#2c6e4b}.collist.forbid .clh{color:#962318}
.clitem{padding:2.6mm 0;border-bottom:1px solid var(--line)}
.clitem b{display:block;font-size:9pt;color:var(--ink);margin-bottom:.5mm}
.clitem span{font-size:8.2pt;color:var(--muted)}

/* numbered grid (prevention / pitfalls) */
.pg8{display:grid;grid-template-columns:1fr 1fr;gap:4mm 6mm}
.pgi{display:flex;gap:4mm;align-items:flex-start;padding:3mm 0;border-bottom:1px solid var(--line)}
.pgi .pgn{font-family:'Fraunces';font-weight:600;font-size:20pt;color:var(--coral);line-height:.9;min-width:11mm}
.pgi h3{font-family:'Inter';font-weight:700;font-size:9.4pt;margin-bottom:1mm}
.pgi p{font-size:8pt;color:var(--muted);margin:0;line-height:1.4}

/* printable journal/grid table */
.journal td,.journal th{border:1px solid var(--line2);padding:2.6mm 3mm;font-size:8.4pt}
.journal thead th{background:var(--ink);color:#fff;border-color:var(--ink);letter-spacing:.1em}
.journal tbody td{height:9mm}
.journal .jday{background:var(--paper2);font-family:'Fraunces';font-weight:600;color:var(--coral-d);width:14mm;text-align:center}

.tag-print{display:inline-flex;align-items:center;gap:6px;font-size:7pt;letter-spacing:.24em;text-transform:uppercase;
  font-weight:800;color:var(--coral-d);background:var(--coral-soft);border:1px dashed #e0a594;border-radius:20px;padding:3px 10px}

.fields-note{display:flex;flex-wrap:wrap;gap:3mm}
.fields-note .fn{display:flex;align-items:center;gap:6px;font-size:7.6pt;font-weight:700;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.fields-note .fn .di{color:var(--coral-d)}

/* ====== EXTRA COMPONENTS (books I & II, fiche) ====== */
/* big stats row */
.stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5mm;text-align:center}
.stat{border:1px solid var(--line);border-radius:12px;padding:5mm 3mm;background:#fff}
.stat .v{font-family:'Fraunces';font-weight:600;font-size:30pt;color:var(--coral);line-height:.9}
.stat .u{font-size:7pt;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:2.5mm}
.stat .d{font-size:8pt;color:var(--tx);margin-top:1.5mm;line-height:1.3}

/* horizontal flow / timeline with arrows */
.flow{display:flex;align-items:stretch;gap:0}
.flow .fstep{flex:1;text-align:center;padding:0 2mm;position:relative}
.flow .fstep + .fstep::before{content:"→";position:absolute;left:-3mm;top:7mm;color:var(--clay);font-weight:700;font-size:13pt}
.flow .fb{font-family:'Fraunces';font-weight:600;font-size:13pt;color:var(--coral);line-height:1}
.flow .ft{font-size:8.5pt;font-weight:700;color:var(--ink);margin-top:2mm}
.flow .fd{font-size:7.6pt;color:var(--muted);margin-top:1mm;line-height:1.35}
.flow.dark-flow .fb{color:var(--clay)}

/* color swatches (nuancier / grades) */
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm}
.sw{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.sw .chip{height:20mm;display:flex;align-items:flex-end;padding:3mm}
.sw .chip .nm{font-family:'Fraunces';font-weight:600;font-size:12pt;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.sw .meta{padding:3mm 4mm}
.sw .meta .s{font-size:8pt;color:var(--muted);line-height:1.35}

/* mini key-value grid (params) */
.kv{display:grid;gap:4mm}
.kvi{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:2mm}
.kvi .k{font-size:9pt;font-weight:600;color:var(--ink)}
.kvi .v{font-family:'Fraunces';font-weight:600;color:var(--coral-d);font-size:11pt}

/* gauge param card (fiche) */
.param{border:1px solid var(--line);border-radius:12px;padding:4mm 3mm;text-align:center;background:#fff}
.param .pv{font-family:'Fraunces';font-weight:600;font-size:22pt;color:var(--coral);line-height:.95}
.param .pu{font-size:6.6pt;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:2mm}
.param .pr{font-size:7.4pt;color:var(--tx);margin-top:1mm}

/* captioned photo band */
.photoband{position:relative;border-radius:12px;overflow:hidden;margin:5mm 0;border:1px solid var(--line)}
.photoband img{width:100%;height:100%;object-fit:cover;display:block}
.photoband .cap{position:absolute;left:0;right:0;bottom:0;padding:8mm 5mm 3.5mm;
  background:linear-gradient(transparent,rgba(26,8,9,.86));color:#f3ece0}
.photoband .cap .t{font-family:'Fraunces';font-weight:600;font-size:12pt;display:block;line-height:1.1}
.photoband .cap .s{font-size:7.6pt;color:#d8c7b4;margin-top:1mm;display:block}
.photoband .credit{position:absolute;top:2mm;right:3mm;font-size:6pt;letter-spacing:.08em;
  color:rgba(255,255,255,.6);background:rgba(0,0,0,.25);padding:1px 6px;border-radius:10px}

/* week dots */
.week{display:flex;gap:3mm;justify-content:space-between}
.wd{flex:1;text-align:center;border:1px solid var(--line);border-radius:9px;padding:3mm 1mm;background:#fff}
.wd .wn{font-size:7pt;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.wd .wdot{width:8px;height:8px;border-radius:50%;margin:2.5mm auto 0;background:var(--paper3)}
.wd.on .wdot{background:var(--coral)}
.wd.on{border-color:var(--coral-soft);background:var(--coral-soft)}