:root{
  --ink:#0F131A; --ink-2:#151A23; --ink-3:#1C232E; --line:#2A3341;
  --bone:#EFE7D6; --bone-2:#CDC4B2; --muted:#9C968B;
  --ochre:#C9964F; --ochre-2:#E5C38C; --brass-1:#D9B26A; --brass-2:#8E6A30;
  --wood-1:#2B2017; --wood-2:#1A140E; --red:#D42F34;
  --serif:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{margin:0; background:var(--ink); color:var(--bone); font:400 17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:var(--ochre-2); text-underline-offset:3px}
a:hover{color:var(--bone)}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--ochre-2); outline-offset:3px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; background:var(--bone); color:var(--ink); padding:8px 12px; z-index:100}
.skip:focus{left:8px}

/* ---------- Barre & progression ---------- */
.progress{position:fixed; inset:0 0 auto 0; height:2px; z-index:60}
.progress span{display:block; height:100%; width:0; background:var(--red)}
.topbar{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; gap:24px; padding:12px var(--gutter);
  background:color-mix(in srgb, var(--ink) 86%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:12px; color:var(--bone); text-decoration:none; font-size:14px; letter-spacing:.02em; margin-right:auto}
.brand img{width:30px; height:30px}
.mainnav{display:flex; gap:20px; font-size:14px}
.mainnav a{color:var(--bone-2); text-decoration:none}
.mainnav a:hover,.mainnav a.on{color:var(--bone)}
.mainnav a.on{box-shadow:0 2px 0 var(--red)}
.menu-btn{display:none; background:none; border:1px solid var(--line); padding:6px 12px; font-size:14px}

/* ---------- Composants ---------- */
.btn{background:transparent; display:inline-flex; align-items:center; gap:8px; padding:12px 20px; font-size:15px; font-weight:600; text-decoration:none; border:1px solid transparent; transition:background .2s, color .2s, border-color .2s}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:#b8252a; color:#fff}
.btn-ghost{border-color:color-mix(in srgb, var(--bone) 35%, transparent); color:var(--bone)}
.btn-ghost:hover{border-color:var(--bone); color:var(--bone)}
.eyebrow{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ochre); margin:0 0 10px}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.08; margin:0}
h2{font-size:clamp(34px, 4.6vw, 58px); margin-bottom:28px; letter-spacing:-.01em}
.lead{color:var(--bone-2); max-width:62ch; font-size:18px}
.chip{background:transparent; border:1px solid var(--line); color:var(--bone-2); padding:5px 11px; font-size:13px; border-radius:999px; transition:all .2s}
.chip:hover{border-color:var(--ochre); color:var(--bone)}
.chip.on{background:var(--ochre); border-color:var(--ochre); color:var(--ink)}
.gauge{display:inline-flex; gap:4px; vertical-align:middle}
.pip{width:14px; height:6px; background:var(--line); display:inline-block}
.pip.on{background:var(--ochre)}
.pip.lvl{background:var(--red)}

/* ---------- Sections ---------- */
section{position:relative}
.reading,.wide{padding:clamp(72px, 10vw, 140px) var(--gutter)}
.reading > *{max-width:760px; margin-left:auto; margin-right:auto}
.wide > *{max-width:1240px; margin-left:auto; margin-right:auto}
.alt{background:var(--ink-2)}
.dark{background:#0A0D12}
.prose p{margin:0 0 1.15em; text-wrap:pretty}
.prose strong{color:var(--ochre-2); font-weight:600}
.narrow{max-width:760px}
.dropcap > p:first-child::first-letter{font-family:var(--serif); float:left; font-size:5.2em; line-height:.8; padding:8px 12px 0 0; color:var(--ochre-2)}
.mt{margin-top:96px}

/* ---------- Hero ---------- */
.hero{min-height:100svh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,5vw,72px); align-items:center;
  padding:110px var(--gutter) 70px; max-width:1360px; margin:0 auto}
.signal{display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--red)}
.sig-dot{width:8px; height:8px; border-radius:50%; background:var(--red); animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.hook{font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.45; color:var(--bone-2); max-width:54ch; margin:0 0 36px; border-left:2px solid var(--red); padding-left:16px}
.hero h1{font-size:clamp(44px, 5.4vw, 82px); letter-spacing:-.02em}
.hero h1 span{display:block}
.subtitle{font-family:var(--serif); font-style:italic; font-size:clamp(22px, 2.6vw, 32px); color:var(--ochre-2); margin:14px 0 6px}
.edition{font-size:13px; letter-spacing:.06em; color:var(--muted); margin:0 0 30px}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); max-width:520px; margin:44px 0 0; border-top:1px solid var(--line)}
.stats div{padding:16px 12px 0 0}
.stats dt{font-family:var(--serif); font-size:40px; line-height:1; color:var(--bone)}
.stats dd{margin:6px 0 0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.hero-visual{margin:0; position:relative; aspect-ratio:2/3; max-height:82svh; justify-self:center; width:100%; max-width:560px}
.hero-visual canvas,.hero-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:1px solid color-mix(in srgb, var(--ochre) 55%, transparent)}
.hero-visual img{opacity:0}
.no-motion .hero-visual img{opacity:1}
.no-motion .hero-visual canvas{display:none}
.hero-visual figcaption{position:absolute; left:0; right:0; bottom:-30px; font-size:12px; color:var(--muted); font-style:italic; text-align:center}
.scroll-cue{position:absolute; left:50%; bottom:22px; width:22px; height:36px; border:1px solid var(--line); border-radius:12px; transform:translateX(-50%)}
.scroll-cue span{position:absolute; left:50%; top:7px; width:2px; height:7px; background:var(--ochre); transform:translateX(-50%); animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0; transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0; transform:translate(-50%,12px)}}

/* ---------- Avant-propos & mékhanologie ---------- */
.lens-quote{margin:40px auto 44px; padding:28px 32px; position:relative; background:radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--ochre) 18%, transparent), transparent 55%), var(--ink-2); border:1px solid var(--line)}
.lens-quote p{margin:0; font-family:var(--serif); font-size:21px; line-height:1.5; color:var(--bone)}
.lens-quote{display:grid; grid-template-columns:170px 1fr; gap:28px; align-items:center}
.split{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:56px; max-width:1180px !important}
.defs{margin:0; position:sticky; top:96px; align-self:start}
.defs dl{margin:0}
.defs .jar{width:150px; margin:0 0 6px}
.def{border-top:1px solid var(--line); padding:18px 0}
.def dt{font-family:var(--serif); font-size:26px; color:var(--ochre-2)}
.def dd{margin:6px 0 0; color:var(--bone-2); font-size:15px}

/* ---------- Anatomie ---------- */
.constel-wrap{margin:48px auto 24px; border:1px solid var(--line); background:radial-gradient(ellipse at 30% 50%, #18202b, var(--ink) 70%); padding:12px}
.constel{width:100%; height:auto; display:block}
.constel .edge{fill:none; stroke:#3A4556; stroke-width:1.3; transition:stroke .25s, opacity .25s}
.constel .node circle{fill:var(--ink); stroke:var(--ochre); stroke-width:2; transition:all .25s}
.constel .cause-node circle{fill:var(--ochre)}
.constel text{fill:var(--bone-2); font:15px var(--sans); transition:fill .25s}
.constel .crea-node text{font:italic 500 19px var(--serif)}
.constel .n{fill:var(--ochre); font-size:12px; letter-spacing:.15em}
.constel .node{cursor:pointer; outline:none}
.constel.focus .edge{opacity:.12}
.constel.focus .node{opacity:.3}
.constel.focus .edge.hl{opacity:1; stroke:var(--ochre-2); stroke-width:2}
.constel.focus .node.hl{opacity:1}
.constel.focus .node.hl circle{stroke:var(--red)}
.constel.focus .crea-node.hl circle{fill:var(--red)}
.constel.focus .node.hl text{fill:var(--bone)}
.constel-hint{font-size:13px; color:var(--muted); margin:6px 8px 4px}
.causes{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:0; margin:24px auto 56px}
.cause{grid-column:span 2}
.cause:nth-child(n+4){grid-column:span 3}
.cause{background:var(--ink); border:1px solid var(--line); margin:-1px 0 0 -1px; padding:28px 26px; transition:background .25s; outline:none}
.cause:hover,.cause.hl,.cause:focus-visible{background:var(--ink-3)}
.cause-n{font-family:var(--serif); font-size:44px; color:var(--ochre); line-height:1}
.cause p{font-size:16px; color:var(--bone-2)}
.cause p strong{display:block; color:var(--bone); font-family:var(--serif); font-size:23px; line-height:1.2; margin:10px 0 8px; font-weight:600}
.cause-chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.cause-chips .k{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-right:4px}

/* ---------- Cabinet ---------- */
.cabinet-section{background:linear-gradient(180deg, var(--ink), #0B0E13)}
.lighting{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:28px auto 26px}
.lighting .k{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-right:6px}
.cabinet{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; padding:18px; border:1px solid #3a2c1e;
  background:linear-gradient(180deg, #23190f, #140f0a); box-shadow:inset 0 0 0 6px #1a130c, inset 0 0 60px #000, 0 30px 80px -30px #000}
.drawer{position:relative; aspect-ratio:5/4; padding:0; border:0; background:#07090c; overflow:hidden; text-align:center; transition:opacity .35s, filter .35s; box-shadow:inset 0 0 0 1px #000}
.drawer-inside{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.9) brightness(.85)}
.drawer-front{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px;
  background:repeating-linear-gradient(92deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px), linear-gradient(180deg, var(--wood-1), var(--wood-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -8px 18px rgba(0,0,0,.55), inset 0 0 0 1px #3a2c1e;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.drawer:hover .drawer-front,.drawer:focus-visible .drawer-front{transform:translateY(46%)}
.drawer-num{font-size:11px; letter-spacing:.24em; color:var(--muted)}
.plate{display:block; padding:8px 14px; min-width:70%; background:linear-gradient(180deg, var(--brass-1), var(--brass-2)); color:#21170b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.6); border-radius:2px}
.plate-latin{font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(16px, 1.55vw, 21px); line-height:1.1}
.drawer-fr{font-family:var(--serif); font-size:16px; color:var(--ochre-2)}
.knob{width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f3d79c, #8e6a30 60%, #3d2c12); box-shadow:0 2px 3px #000}
.drawer-foot{position:absolute; left:14px; right:14px; bottom:10px; display:flex; justify-content:space-between; align-items:center}
.drawer-class{font-size:11px; letter-spacing:.12em; color:var(--muted)}
.cabinet.lit .drawer:not(.lit){opacity:.22; filter:grayscale(1)}

/* ---------- Planche ---------- */
.planche{position:fixed; inset:0; z-index:80; background:var(--ink); display:flex; flex-direction:column; animation:open .45s ease}
.planche[hidden]{display:none}
@keyframes open{from{opacity:0; transform:translateY(24px)}}
.planche-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--gutter); border-bottom:1px solid var(--line); background:var(--ink-2)}
.pb-title{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.pb-actions{display:flex; gap:8px}
.pb-actions button{background:none; border:1px solid var(--line); padding:7px 13px; font-size:14px}
.pb-actions button:hover{border-color:var(--ochre)}
.planche-body{flex:1; overflow:hidden}
.fiche{display:none; height:100%; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.fiche.active{display:grid}
.fiche-visual{position:relative; background:#07090c; display:flex; align-items:center; justify-content:center; padding:clamp(16px,3vw,40px); border-right:1px solid var(--line)}
.lens-stage{position:relative; margin:0; width:100%; max-width:820px; aspect-ratio:582/466; cursor:none; touch-action:auto; overflow:hidden; border:1px solid color-mix(in srgb, var(--ochre) 50%, transparent)}
.plate-img{position:absolute; inset:0; background-size:cover; background-position:center}
.xray{background-size:cover; background-position:center}
.lens-reveal{position:absolute; inset:0; clip-path:circle(var(--r,0px) at var(--x,70%) var(--y,35%)); transition:clip-path .08s linear}
.xray{position:absolute; inset:0; filter:grayscale(1) invert(1) contrast(1.3) brightness(.55) sepia(.6)}
.lens-reveal::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(229,195,140,.07) 0 1px, transparent 1px 22px), rgba(12,15,21,.78)}
.capture{position:absolute; left:var(--x,70%); top:var(--y,35%); transform:translate(-50%,-50%); width:calc(var(--r,100px) * 1.42); display:flex; flex-direction:column; gap:4px; text-align:center; color:var(--bone)}
.cap-k{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--red)}
.cap-date{font-family:var(--serif); font-size:24px; line-height:1}
.cap-place{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ochre-2)}
.cap-fact{font-size:12.5px; line-height:1.32}
.cap-src{font-size:11px; color:var(--bone-2); font-style:italic}
.lens-ring{position:absolute; left:var(--x,70%); top:var(--y,35%); width:calc(var(--r,0px) * 2); height:calc(var(--r,0px) * 2); transform:translate(-50%,-50%); border-radius:50%;
  border:2px solid var(--brass-1); box-shadow:0 0 0 6px rgba(0,0,0,.35), 0 0 30px rgba(0,0,0,.7); pointer-events:none; transition:width .25s, height .25s}
.lens-hint{position:absolute; left:12px; bottom:10px; right:12px; font-size:12.5px; color:var(--bone); background:rgba(10,13,18,.72); padding:6px 10px; width:max-content; max-width:calc(100% - 24px); pointer-events:none; transition:opacity .4s}
.lens-stage.used .lens-hint{opacity:0}
.lens-toggle{display:none}
.fiche-text{overflow-y:auto; padding:clamp(24px,4vw,56px) clamp(20px,4vw,64px) 80px; scrollbar-color:var(--line) transparent}
.label{border:1px solid var(--line); padding:20px 22px; background:linear-gradient(180deg, #F1E8D4 0, #E3D6BA 100%); color:#1d1a14; margin-bottom:32px; box-shadow:4px 4px 0 #000}
.label-top{display:flex; justify-content:space-between; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#6b5a3e; border-bottom:1px solid #b9a682; padding-bottom:8px; margin-bottom:12px}
.latin{font-style:italic; font-size:clamp(34px,3.6vw,48px)}
.vernacular{font-family:var(--serif); font-size:22px; margin:2px 0 14px; color:#7b4a1c}
.label-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:8px 0; border-top:1px dotted #b9a682; font-size:14px}
.label-row .k{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6b5a3e; min-width:150px}
.label .pip{background:#cbbb98}.label .pip.on{background:#8E6A30}.label .pip.lvl{background:var(--red)}
.label .chip{border-color:#a8946c; color:#3b2f1c}
.label .chip:hover{background:#1d1a14; color:#F1E8D4}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.accroche{margin:0 0 36px; padding:0}
.accroche p{font-family:var(--serif); font-style:italic; font-size:clamp(20px,1.8vw,24px); line-height:1.5; color:var(--bone); margin:0}
.rub{margin:0 0 26px}
.rub h4{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ochre); margin:0 0 6px; font-weight:600}
.rub p{margin:0; color:var(--bone-2); text-wrap:pretty}
.sources ul{margin:0; padding-left:18px; font-size:14px; color:var(--bone-2)}
.sources li{margin-bottom:6px}
.fiche-nav{display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:18px; margin-top:36px}
.fiche-nav button{background:none; border:0; color:var(--ochre-2); font-family:var(--serif); font-style:italic; font-size:18px; padding:0; text-align:left}
.fiche-nav button:last-child{text-align:right}

/* ---------- Épreuves ---------- */
.trials{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.trial{border:1px solid var(--line); background:var(--ink-2); padding:clamp(22px,3vw,36px); display:flex; flex-direction:column}
.trial h3{font-size:32px; margin-bottom:10px}
.trial-intro{color:var(--bone-2); font-size:15px; margin:0 0 22px}
.q-step{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ochre); display:flex; gap:12px; align-items:center}
.q-step::after{content:""; flex:1; height:1px; background:var(--line)}
.q-bar{height:2px; background:var(--line); margin:10px 0 0}
.q-bar span{display:block; height:100%; background:var(--red); transition:width .3s}
.q-title{font-family:var(--serif); font-size:26px; line-height:1.2; margin:18px 0 16px}
.opts{display:grid; gap:8px}
.opt{text-align:left; background:transparent; border:1px solid var(--line); padding:12px 14px; font-size:15px; transition:all .2s}
.opt:hover{border-color:var(--ochre); background:var(--ink-3)}
.res-k{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--red)}
.res-latin{font-family:var(--serif); font-style:italic; font-size:40px; line-height:1.05; margin-top:8px}
.res-fr{font-family:var(--serif); font-size:21px; color:var(--ochre-2); margin-bottom:12px}
.res p{color:var(--bone-2); font-size:15px}
.res .row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.res .runners{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 14px}
.vf-card{border:1px solid var(--line); padding:22px; background:var(--ink); min-height:150px}
.vf-n{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.vf-text{font-family:var(--serif); font-size:23px; line-height:1.35; margin:12px 0 0}
.vf-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.vf-actions button{padding:13px; border:1px solid var(--line); background:transparent; font-weight:600; letter-spacing:.06em}
.vf-actions button:hover{border-color:var(--ochre)}
.verdict{margin-top:14px; padding:16px 18px; border-left:3px solid var(--ochre); background:var(--ink-3)}
.verdict.bad{border-color:var(--red)}
.verdict strong{display:block; font-family:var(--serif); font-size:21px; margin-bottom:4px}
.verdict p{margin:0 0 10px; font-size:15px; color:var(--bone-2)}
.score{font-family:var(--serif); font-size:64px; line-height:1}

/* ---------- Registre ---------- */
.ledger-tools{margin:8px auto 18px; font-size:14px; color:var(--bone-2)}
.ledger{list-style:none; margin:0 auto; padding:0; border-top:1px solid var(--line)}
.ledger li{display:grid; grid-template-columns:170px 1fr auto; gap:20px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line)}
.c-date{font-family:var(--serif); font-size:20px; color:var(--bone)}
.c-date em{display:block; font-family:var(--sans); font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.c-text{color:var(--bone-2)}
.ledger li.prec{opacity:.72}
.ledger.hide-prec li.prec{display:none}

/* ---------- Cryptotératologie ---------- */
.crypto{overflow:hidden; background:#090B0F}
.crypto-noise{position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; opacity:var(--n,.1); pointer-events:none; max-width:none !important}
.crypto-inner{position:relative}
.crypto-warn{font-size:13px; letter-spacing:.06em; color:var(--red); margin:-12px 0 28px}
.crypto .prose > p{transition:filter .6s, opacity .6s}
.silhouette{margin:30px 0; padding:22px 24px 6px; border:1px dashed color-mix(in srgb, var(--bone) 28%, transparent); position:relative; filter:blur(var(--b,3px)); opacity:.6; transition:filter .5s, opacity .5s; outline:none}
.silhouette:hover,.silhouette:focus,.silhouette.seen{filter:blur(0); opacity:1}
.sil-n{position:absolute; top:-14px; left:18px; background:#090B0F; padding:0 8px; font-family:var(--serif); font-style:italic; font-size:22px; color:var(--ochre)}

/* ---------- Gouverner ---------- */
.govern{background:linear-gradient(180deg, #13100c, var(--ink))}
.principe{display:grid; grid-template-columns:96px 1fr; gap:10px; margin:36px 0; padding-top:24px; border-top:1px solid var(--line)}
.pr-n{font-family:var(--serif); font-size:52px; line-height:.9; color:var(--red)}
.principe p{margin:0}
.principe strong{display:block; font-family:var(--serif); font-size:clamp(23px,2.2vw,28px); line-height:1.2; color:var(--bone); margin-bottom:8px}
.signature{font-family:var(--serif); font-size:30px; color:var(--bone); margin-top:40px}
.signature strong{color:var(--bone)}

/* ---------- Annexes ---------- */
.glossary{columns:3 300px; column-gap:44px; margin:0 auto}
.g{break-inside:avoid; margin:0 0 22px}
.g dt{font-family:var(--serif); font-size:22px; color:var(--ochre-2)}
.g dd{margin:4px 0 0; font-size:15px; color:var(--bone-2)}
.weblio details{border-top:1px solid var(--line); padding:14px 0}
.weblio summary{cursor:pointer; font-family:var(--serif); font-size:21px}
.weblio ul{margin:10px 0 0; padding-left:18px; font-size:14px; color:var(--bone-2)}
.weblio li{margin-bottom:8px; overflow-wrap:anywhere}
.weblio p{font-size:14px; color:var(--bone-2); overflow-wrap:anywhere}
.about{background:var(--ink-2); text-align:center}
.about img{margin:0 auto 24px}
.about .prose{text-align:left}
.contact{display:flex; flex-direction:column; align-items:center; gap:14px}
.contact p{color:var(--bone-2)}
.contact .btn{margin:0 6px}
.foot{padding:28px var(--gutter); border-top:1px solid var(--line); font-size:13px; color:var(--muted); text-align:center}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .mainnav{display:none}
  .mainnav.open{display:flex}
  .mainnav a{padding:14px var(--gutter); border-top:1px solid var(--line)}
  .cabinet{grid-template-columns:repeat(3, minmax(0,1fr))}
  .fiche.active{display:block; overflow-y:auto}
  .planche-body{overflow-y:auto}
  .fiche{height:auto}
  .fiche-visual{border-right:0; border-bottom:1px solid var(--line); flex-direction:column; gap:10px}
  .fiche-text{overflow:visible}
  .trials{grid-template-columns:1fr}
}
@media (max-width: 1080px){ .causes{grid-template-columns:1fr 1fr} .cause, .cause:nth-child(n+4){grid-column:span 1} .cause:last-child{grid-column:1 / -1} }
@media (max-width: 760px){
  body{font-size:16.5px}
  .hero{grid-template-columns:1fr; padding-top:90px; min-height:auto}
  .hero-visual{order:-1; max-width:260px; max-height:none}
  .pb-title .pb-latin{display:none}
  .hero-visual figcaption{position:static; margin-top:8px}
  .scroll-cue{display:none}
  .stats{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr; gap:24px}
  .lighting{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; margin-right:calc(-1 * var(--gutter))}
  .lighting .chip{flex:none}
  .defs{position:static}
  .constel-wrap{display:none}
  .cabinet{grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; padding:8px}
  .drawer-front{gap:5px; padding:10px}
  .plate{padding:6px 8px; min-width:86%}
  .plate-latin{font-size:15px}
  .drawer-fr{font-size:13px}
  .drawer-num{font-size:10px}
  .drawer-foot{left:8px; right:8px; bottom:6px}
  .drawer-class{display:none}
  .pip{width:10px}
  .ledger li{grid-template-columns:1fr; gap:6px}
  .label-row .k{min-width:0; width:100%}
  .lens-stage{cursor:auto}
  .lens-toggle{display:inline-block; background:none; border:1px solid var(--ochre); color:var(--ochre-2); padding:7px 14px; font-size:14px}
  .lens-toggle[aria-pressed="true"]{background:var(--ochre); color:var(--ink)}
  .lens-stage.lens-on{touch-action:none}
  .pb-actions button[data-close]{font-size:13px}
  .principe{grid-template-columns:56px 1fr}
  .pr .illu, .principe .illu{width:44px}
  .lens-quote{grid-template-columns:1fr; gap:12px}
  .lens-quote .eye{width:130px}
  .causes .cause{grid-column:1 / -1}
  .ebook-grid{grid-template-columns:1fr !important}
  .atlas-card{grid-template-columns:1fr !important; text-align:left}
  .top-dl span{display:none}
  .pr-n{font-size:40px}
}
@media (hover:none){ .drawer:hover .drawer-front{transform:none} }
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1 !important; transform:none !important}
  .illu .draw *{stroke-dashoffset:0 !important}
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .silhouette{filter:none; opacity:1}
}

/* ---------- Impression : le cahier des spécimens ---------- */
@media print{
  .fab,.fab-panel,.drip,.atlas-card,.ebook{display:none !important}
  .topbar,.progress,.hero-visual canvas,.scroll-cue,.lighting,.constel-wrap,#epreuves,.ledger-tools,.crypto-noise,.planche-bar,.lens-reveal,.lens-ring,.lens-hint,.lens-toggle,.fiche-nav,.cta-row,.cabinet{display:none !important}
  body{background:#fff; color:#111}
  .hero-visual img{opacity:1}
  .planche,.planche[hidden]{display:block !important; position:static; background:#fff}
  .fiche{display:grid !important; grid-template-columns:40% 60%; break-after:page; height:auto}
  .fiche-text{overflow:visible}
  section{padding:24px 0 !important; background:#fff !important}
  .silhouette{filter:none; opacity:1}
  *{color:#111 !important}
}

/* =========================================================
   v7.1 : micro-animations, illustrations, ebook, Atlas, menu flottant
   ========================================================= */
.ico{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
.btn{position:relative; overflow:hidden}
.btn .arr{display:inline-block; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arr{transform:translateX(4px)}
.btn-red::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-18deg); transition:left .7s ease}
.btn-red:hover::after{left:120%}
.dl-link{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:14px; color:var(--bone-2); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:3px; transition:color .2s, border-color .2s}
.dl-link:hover{color:var(--ochre-2); border-color:var(--ochre)}
.top-dl{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--bone); text-decoration:none; border:1px solid var(--line); padding:7px 12px; transition:border-color .2s, background .2s}
.top-dl:hover{border-color:var(--ochre); background:var(--ink-3); color:var(--bone)}

/* Révélations au défilement */
.rv{opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s)}
.rv.in{opacity:1; transform:none}
h2.rv::after{content:""; display:block; width:64px; height:1px; margin-top:18px; background:var(--ochre); transform:scaleX(0); transform-origin:left; transition:transform 1.1s .35s cubic-bezier(.2,.7,.2,1)}
h2.rv.in::after{transform:scaleX(1)}
.hero h1 span{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span:nth-child(2){animation-delay:.15s}
.hero .subtitle{animation:rise 1.2s .3s cubic-bezier(.2,.7,.2,1) both}
.hero .hook{animation:rise 1.2s .05s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0; transform:translateY(26px); filter:blur(4px)}}

/* Illustrations au trait */
.illu{display:block; overflow:visible}
.illu .draw *{fill:none; stroke:var(--ochre); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.2s cubic-bezier(.4,.1,.2,1)}
.illu .draw .faint{stroke:color-mix(in srgb, var(--ochre) 40%, transparent); stroke-width:1}
.in .illu .draw *, .illu.in .draw *{stroke-dashoffset:0}
.eye .keyhole{fill:var(--red); opacity:0; transform-origin:100px 75px; transition:opacity .8s 1.4s}
.in .eye .keyhole{opacity:1}
.eye .lid{fill:var(--ink-2); transform-origin:100px 70px; transform:scaleY(0); animation:blinkLid 7s 3s infinite}
@keyframes blinkLid{0%,94%,100%{transform:scaleY(0)} 96.5%{transform:scaleY(1)}}
.eye .drop-path{fill:none; stroke:var(--ochre); stroke-width:1.4; opacity:.6}
.eye .drop{fill:var(--ochre-2); animation:drop 4.5s 2s infinite cubic-bezier(.5,0,.8,.4)}
@keyframes drop{0%{transform:translateY(0) scale(.2); opacity:0} 30%{opacity:1; transform:translateY(0) scale(1)} 70%{transform:translateY(0) scale(1,1.25)} 100%{transform:translateY(18px) scale(.8); opacity:0}}
.eye .ants{fill:var(--bone-2); animation:march 9s linear infinite}
@keyframes march{from{transform:translateX(-10px)} to{transform:translateX(150px)}}
.jar .shine{fill:none; stroke:var(--bone); stroke-width:2; stroke-linecap:round; opacity:.25; animation:shine 4s ease-in-out infinite}
@keyframes shine{50%{opacity:.6}}
.jar .specimen{animation:float 6s ease-in-out infinite; transform-origin:100px 135px}
.jar .specimen path{fill:color-mix(in srgb, var(--ochre) 14%, transparent); stroke:var(--ochre-2); stroke-width:1.4}
.jar .specimen .hands{fill:none; stroke:var(--bone); stroke-width:1.4; stroke-linecap:round}
.jar .pin,.pr .pin{fill:var(--red)}
.jar text{fill:var(--muted); font:9px var(--sans); letter-spacing:.24em}
@keyframes float{50%{transform:translateY(-7px) rotate(-2deg)}}
.pr-side{display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.principe .illu{width:58px}
.pr .loop{stroke-dasharray:1 !important}
.principe .pr .fence{stroke-dasharray:.04 .03}
.in .principe .pr .fence{animation:spin 30s linear infinite; transform-origin:32px 32px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Goutte : séparateur « mou » */
.drip{position:relative; height:70px; max-width:1240px; margin:0 auto}
.drip::before{content:""; position:absolute; left:var(--gutter); right:var(--gutter); top:20px; height:1px; background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent)}
.drip i{position:absolute; left:50%; top:20px; width:8px; height:8px; margin-left:-4px; background:var(--ochre); border-radius:50% 50% 50% 50% / 30% 30% 70% 70%; transform-origin:top center; animation:drip 5.5s infinite cubic-bezier(.5,0,.75,0)}
@keyframes drip{0%{transform:scale(.2,.1); opacity:0} 35%{opacity:1; transform:scale(1,1)} 62%{transform:scale(.8,1.9)} 64%{transform:translateY(0) scale(.9,1)} 100%{transform:translateY(46px) scale(.6,1.2); opacity:0}}
.drip-in{margin-bottom:28px}
.reading > .drip{max-width:none}

/* Constellation : tracé progressif */
.constel .edge{stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); transition:stroke-dashoffset 1.8s cubic-bezier(.4,.1,.2,1), stroke .25s, opacity .25s}
.constel .edge[stroke-dasharray]{stroke-dasharray:4 6; stroke-dashoffset:0; opacity:0; transition:opacity 1.2s 1s, stroke .25s}
.constel.drawn .edge{stroke-dashoffset:0}
.constel.drawn .edge[stroke-dasharray]{opacity:1}
.constel .cause-node circle{animation:pulse 3.2s ease-in-out infinite}
.constel .cause-node:nth-child(odd) circle{animation-delay:1.1s}
@keyframes pulse{50%{stroke-width:5; stroke:color-mix(in srgb, var(--ochre) 40%, transparent)}}

/* Statistiques */
.stats dt{font-variant-numeric:tabular-nums}

/* Tiroirs : reflet sur la plaque, entrée échelonnée */
.plate{position:relative; overflow:hidden}
.plate::after{content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-20deg)}
.drawer:hover .plate::after,.drawer:focus-visible .plate::after{left:130%; transition:left .9s ease}
.knob{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.drawer:hover .knob{transform:rotate(90deg) scale(1.08)}
.drawer-inside{transform:scale(1.08); transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.drawer:hover .drawer-inside{transform:scale(1)}
.cabinet .drawer.rv{transform:translateY(16px) scale(.98)}
.cabinet .drawer.rv.in{transform:none}

/* Planche : respiration de l'image, jauge qui se remplit */
.fiche.active .plate-img{animation:kenburns 16s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)} to{transform:scale(1.06) translate(-1%, -1%)}}
.fiche.active .label .pip{animation:pip .5s both}
.fiche.active .label .pip:nth-child(2){animation-delay:.12s}
.fiche.active .label .pip:nth-child(3){animation-delay:.24s}
.fiche.active .label .pip:nth-child(4){animation-delay:.36s}
@keyframes pip{from{transform:scaleX(0)}}
.fiche.active .label{animation:labelIn .7s .1s both cubic-bezier(.2,.7,.2,1)}
@keyframes labelIn{from{opacity:0; transform:translateY(14px) rotate(-.6deg)}}
.lens-ring::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid color-mix(in srgb, var(--brass-1) 45%, transparent); animation:ring 2.4s ease-out infinite}
@keyframes ring{from{transform:scale(.92); opacity:1} to{transform:scale(1.12); opacity:0}}

/* Ebook */
.ebook{background:radial-gradient(ellipse at 25% 50%, #1d2532, var(--ink) 65%); overflow:hidden}
.ebook-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,6vw,90px); align-items:center}
.book-stage{perspective:1400px; display:flex; flex-direction:column; align-items:center; padding:20px 0 10px}
.book{position:relative; width:min(300px, 70vw); aspect-ratio:440/625; transform-style:preserve-3d; transform:rotateY(var(--ry,-24deg)) rotateX(var(--rx,4deg)); transition:transform .6s cubic-bezier(.2,.8,.2,1); animation:bookFloat 7s ease-in-out infinite}
@keyframes bookFloat{50%{translate:0 -10px}}
.book-cover{position:absolute; inset:0; background-size:cover; background-position:center; border-radius:1px 4px 4px 1px;
  box-shadow:inset 4px 0 0 rgba(0,0,0,.35), inset 7px 0 8px rgba(255,255,255,.14), 1px 1px 0 #cfc5ae, 3px 3px 0 #efe7d6, 4px 4px 0 #cbbfa6, 6px 6px 0 #efe7d6, 7px 7px 0 #c7bba1, 9px 9px 0 #e8dfcb, 24px 30px 50px -10px rgba(0,0,0,.75)}
.book-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 45%, rgba(255,255,255,0) 60%); background-size:250% 100%; background-position:var(--gx,100%) 0; transition:background-position .6s}
.book-pages,.book-spine{display:none}
.x-pages{position:absolute; top:4px; bottom:4px; right:-1px; width:28px; transform:rotateY(90deg) translateZ(272px); transform-origin:right; background:repeating-linear-gradient(90deg, #efe7d6 0 1px, #d8ceb8 1px 2px)}
.book-spine{position:absolute; top:0; bottom:0; left:0; width:28px; transform:rotateY(-90deg) translateZ(0); transform-origin:left; background:linear-gradient(90deg, #1a2a3a, #24384b)}
.book-shadow{width:70%; height:24px; margin-top:28px; background:radial-gradient(ellipse, rgba(0,0,0,.65), transparent 70%); animation:shadowPulse 7s ease-in-out infinite}
@keyframes shadowPulse{50%{transform:scaleX(.88); opacity:.7}}
.ebook-facts{list-style:none; display:flex; gap:28px; padding:0; margin:22px 0 28px; color:var(--bone-2); font-size:14px}
.ebook-facts strong{display:block; font-family:var(--serif); font-size:36px; color:var(--bone); line-height:1}

/* Pied de page : encart Atlas */
.foot{padding:clamp(56px,8vw,96px) var(--gutter) 28px; text-align:left; background:#0B0E13}
.atlas-card{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:center; padding:clamp(22px,3vw,40px); border:1px solid var(--line);
  background:radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--ochre) 12%, transparent), transparent 45%), var(--ink-2); position:relative; overflow:hidden}
.atlas-card::before{content:""; position:absolute; inset:0; border:1px solid transparent; background:linear-gradient(120deg, transparent 40%, color-mix(in srgb, var(--ochre) 50%, transparent), transparent 60%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; background-size:300% 100%; animation:sweep 6s linear infinite; pointer-events:none}
@keyframes sweep{from{background-position:100% 0} to{background-position:-200% 0}}
.atlas-card h3{font-size:clamp(26px,2.6vw,34px); margin-bottom:10px}
.atlas-card p{color:var(--bone-2); font-size:15px; margin:0 0 18px; max-width:56ch}
.atlas .grid path{stroke:var(--line); stroke-width:1}
.atlas .pts circle{fill:var(--ochre-2)}
.atlas .here{fill:var(--red)}
.atlas .here-ring{fill:none; stroke:var(--red); stroke-width:1.5; transform-origin:118px 92px; animation:ping 2.2s ease-out infinite}
@keyframes ping{from{transform:scale(1); opacity:.9} to{transform:scale(4); opacity:0}}
.foot-line{max-width:1240px; margin:28px auto 0; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted)}

/* Menu flottant */
.fab{position:fixed; right:clamp(16px,2.4vw,32px); bottom:clamp(16px,2.4vw,32px); z-index:70; width:64px; height:64px; border-radius:50%; border:0; padding:0; background:var(--ink-2);
  box-shadow:0 10px 30px -8px #000, inset 0 0 0 1px var(--line); display:grid; place-items:center; transition:transform .35s cubic-bezier(.2,.8,.2,1), background .2s; opacity:0; transform:scale(.6); pointer-events:none}
.fab.show{opacity:1; transform:none; pointer-events:auto}
.fab:hover{transform:scale(1.06); background:var(--ink-3)}
.fab svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.fab-track{fill:none; stroke:var(--line); stroke-width:3}
.fab-ring{fill:none; stroke:var(--red); stroke-width:3; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .2s linear}
.fab-pct{position:relative; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--bone)}
.fab[aria-expanded="true"]{background:var(--ochre)}
.fab[aria-expanded="true"] .fab-pct{color:var(--ink)}
.fab-panel{position:fixed; right:clamp(16px,2.4vw,32px); bottom:calc(clamp(16px,2.4vw,32px) + 76px); z-index:70; width:min(320px, calc(100vw - 32px)); max-height:calc(100svh - 140px); overflow:auto;
  background:color-mix(in srgb, var(--ink-2) 94%, transparent); backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:0 30px 60px -20px #000; padding:16px 10px 12px; transform-origin:bottom right; animation:panelIn .35s cubic-bezier(.2,.8,.2,1)}
.fab-panel[hidden]{display:none}
@keyframes panelIn{from{opacity:0; transform:scale(.85) translateY(10px)}}
.fab-head{display:flex; justify-content:space-between; margin:0 10px 8px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ochre)}
.fab-read{color:var(--muted)}
.fab-panel ol{list-style:none; margin:0; padding:0}
.fab-panel li a{display:grid; grid-template-columns:28px 1fr 10px; gap:8px; align-items:center; padding:9px 10px; color:var(--bone-2); text-decoration:none; font-size:15px; transition:background .2s, color .2s}
.fab-panel li a:hover{background:var(--ink-3); color:var(--bone)}
.fl-n{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.fl-dot{width:8px; height:8px; border-radius:50%; border:1px solid var(--line)}
.fab-panel a.read .fl-dot{background:var(--ochre); border-color:var(--ochre)}
.fab-panel a.cur{color:var(--bone); background:var(--ink-3)}
.fab-panel a.cur .fl-dot{background:var(--red); border-color:var(--red); box-shadow:0 0 0 4px color-mix(in srgb, var(--red) 25%, transparent)}
.fab-panel li{animation:rise .5s both}
.fab-panel li:nth-child(n){animation-delay:calc(var(--i,0) * 30ms)}
.fab-dl{display:flex; align-items:center; gap:8px; margin:10px 10px 4px; padding:11px 12px; background:var(--red); color:#fff; text-decoration:none; font-size:14px; font-weight:600}
.fab-dl:hover{background:#b8252a; color:#fff}
.progress{display:none}
@media (max-width: 760px){
  .fab{width:58px; height:58px}
  .fab-panel{bottom:90px}
  .atlas-card{gap:20px}
  .atlas-map{max-width:220px}
  .ebook-facts{gap:18px}
}
@media (prefers-reduced-motion: reduce){
  .fab{opacity:1; transform:none; pointer-events:auto}
  .constel .edge{stroke-dashoffset:0 !important; opacity:1 !important}
}

#mekhanologie > .eyebrow, #mekhanologie > h2{max-width:1180px}
@media (max-width: 760px){ .foot-line{flex-wrap:wrap; padding-right:76px; line-height:1.5} }

/* Formulaire de contact */
.lead-modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px}
.lead-modal[hidden]{display:none}
.lead-backdrop{position:absolute; inset:0; background:rgba(5,7,10,.78); backdrop-filter:blur(6px); animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}}
.lead-box{position:relative; width:min(860px,100%); max-height:calc(100svh - 32px); overflow:auto; display:grid; grid-template-columns:200px 1fr; border:1px solid var(--line);
  background:radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--ochre) 14%, transparent), transparent 50%), var(--ink-2); box-shadow:0 40px 90px -20px #000; animation:boxIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes boxIn{from{opacity:0; transform:translateY(24px) scale(.98)}}
.lead-side{display:flex; align-items:center; justify-content:center; padding:24px; border-right:1px solid var(--line)}
.lead-side .eye{width:150px}
.lead-side .eye .draw *{stroke-dashoffset:0}
.lead-side .eye .keyhole{opacity:1}
.lead-main{padding:clamp(24px,4vw,40px)}
.lead-main h3{font-size:clamp(28px,3vw,36px); margin-bottom:8px}
.lead-intro{color:var(--bone-2); font-size:15px; margin:0 0 22px}
.lead-x{position:absolute; top:10px; right:12px; background:none; border:0; font-size:28px; line-height:1; color:var(--bone-2); z-index:2}
.lead-x:hover{color:var(--bone)}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.f{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.f span{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.f input,.f textarea{font:inherit; font-size:16px; color:var(--bone); background:var(--ink); border:1px solid var(--line); padding:11px 12px; border-radius:0; transition:border-color .2s, box-shadow .2s; resize:vertical}
.f input:focus,.f textarea:focus{outline:none; border-color:var(--ochre); box-shadow:0 0 0 3px color-mix(in srgb, var(--ochre) 22%, transparent)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--bone-2); margin:4px 0 18px}
.consent input{margin-top:3px; accent-color:var(--red); width:16px; height:16px; flex:none}
.f-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.f-actions button:disabled{opacity:.6; cursor:wait}
#lead-msg{margin:0; font-size:14px; color:var(--red)}
.lead-done{padding:20px 0; animation:rise .6s both}
.lead-done strong{display:block; font-family:var(--serif); font-size:34px; margin-bottom:6px}
.lead-done p{color:var(--bone-2); margin:0}
@media (max-width: 760px){ .lead-box{grid-template-columns:1fr} .lead-side{display:none} .f-row{grid-template-columns:1fr; gap:0} }
.foot{padding:26px var(--gutter)} .foot-line{margin-top:0}

/* ---------- En-tête v7.3 ---------- */
.topbar{display:block; padding:0; background:transparent; border-bottom:1px solid transparent; backdrop-filter:none;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), background .35s, border-color .35s, backdrop-filter .35s}
.topbar.scrolled{background:color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter:blur(12px) saturate(1.2); border-bottom-color:var(--line)}
.topbar.hide{transform:translateY(-100%)}
.tb-inner{display:flex; align-items:center; gap:clamp(16px,2.4vw,36px); padding:14px var(--gutter); max-width:1480px; margin:0 auto; transition:padding .35s}
.topbar.scrolled .tb-inner{padding-top:9px; padding-bottom:9px}
.brand{gap:12px; margin-right:auto; min-width:0}
.brand img{width:34px; height:34px; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand-txt{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brand-t{font-family:var(--serif); font-size:18px; font-weight:600; color:var(--bone); white-space:nowrap}
.brand-sub{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chap-k{color:var(--ochre); margin-right:6px}
.chap{display:inline-block; transition:opacity .18s, transform .18s}
.chap.swap{opacity:0; transform:translateY(-6px)}
.mainnav{position:relative; display:flex; align-items:center; gap:2px; font-size:14px}
.mainnav [data-nav]{position:relative; display:inline-flex; align-items:baseline; gap:6px; padding:9px 11px; color:var(--bone-2); text-decoration:none; border-radius:2px; transition:color .2s, background .2s; box-shadow:none !important}
.mainnav [data-nav]:hover{color:var(--bone); background:color-mix(in srgb, var(--bone) 6%, transparent)}
.mainnav [data-nav].on{color:var(--bone)}
.mainnav .n{font-size:10px; letter-spacing:.08em; color:var(--muted); font-variant-numeric:tabular-nums; transition:color .2s}
.mainnav [data-nav].on .n,.mainnav [data-nav]:hover .n{color:var(--ochre)}
.nav-ink{position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--red); opacity:0; transition:transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), opacity .3s; pointer-events:none}
.nav-dd{position:relative; display:flex; align-items:center}
.dd-btn{background:none; border:0; padding:6px 4px; margin-left:-6px; color:var(--muted); display:flex; transition:color .2s, transform .3s}
.dd-btn:hover{color:var(--bone)}
.nav-dd.open .dd-btn{color:var(--ochre); transform:rotate(180deg)}
.mega{position:absolute; top:calc(100% + 14px); left:50%; width:min(760px, 92vw); padding:18px; background:color-mix(in srgb, var(--ink-2) 97%, transparent); backdrop-filter:blur(14px);
  border:1px solid var(--line); box-shadow:0 30px 70px -20px #000; opacity:0; visibility:hidden; transform:translate(-50%, 8px); transition:opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s}
.mega::before{content:""; position:absolute; left:0; right:0; top:-16px; height:16px}
.nav-dd.open .mega{opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s}
.mega-head{display:flex; justify-content:space-between; align-items:baseline; padding:0 6px 12px; margin-bottom:8px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ochre)}
.mega-head a{font-size:13px; letter-spacing:0; text-transform:none; color:var(--bone-2); text-decoration:none}
.mega-head a:hover{color:var(--bone)}
.mega ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:4px}
.mega li{opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s}
.nav-dd.open .mega li{opacity:1; transform:none}
.nav-dd.open .mega li:nth-child(3n+2){transition-delay:.03s} .nav-dd.open .mega li:nth-child(3n){transition-delay:.06s}
.mega button{display:flex; gap:10px; align-items:center; width:100%; padding:7px; background:none; border:1px solid transparent; text-align:left; transition:background .2s, border-color .2s}
.mega button:hover,.mega button:focus-visible{background:var(--ink-3); border-color:var(--line)}
.mg-th{flex:none; width:52px; height:42px; background-size:cover; background-position:center; border:1px solid color-mix(in srgb, var(--ochre) 40%, transparent); filter:saturate(.85); transition:filter .3s, transform .4s}
.mega button:hover .mg-th{filter:saturate(1.1); transform:scale(1.05)}
.mg-tx{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.mg-n{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.mg-l{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--bone); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mg-f{font-size:12.5px; color:var(--ochre-2)}
.tb-actions{display:flex; align-items:center; gap:8px}
.tb-contact{display:inline-flex; align-items:center; gap:8px; font-size:13px; padding:8px 12px; background:none; border:1px solid transparent; color:var(--bone-2); transition:color .2s, border-color .2s}
.tb-contact:hover{color:var(--bone); border-color:var(--line)}
.top-dl{background:var(--red); border-color:var(--red); color:#fff; font-weight:600; padding:8px 14px}
.top-dl:hover{background:#b8252a; border-color:#b8252a; color:#fff}
.tb-progress{height:2px; background:transparent}
.tb-progress span{display:block; height:100%; background:linear-gradient(90deg, var(--ochre), var(--red)); transform-origin:left; transform:scaleX(0); opacity:0; transition:opacity .3s}
.topbar.scrolled .tb-progress span{opacity:1}
@media (max-width: 1240px){ .mainnav .n{display:none} .brand-t{font-size:16px} }
@media (max-width: 1080px){ .mainnav{display:none !important} .tb-contact span{display:none} }
@media (max-width: 760px){
  .brand-t{font-size:15px; white-space:normal}
  .brand span.brand-txt{display:flex}
  .brand-sub{font-size:10px}
  .tb-inner{padding:10px var(--gutter)}
  .top-dl{padding:8px 10px}
}
@media print{ .topbar{display:none !important} }
@media (max-width: 760px){
  .brand-t{display:none}
  .brand-sub{display:flex; flex-direction:column; white-space:normal; overflow:visible; gap:2px}
  .chap{font-family:var(--serif); font-size:18px; letter-spacing:0; text-transform:none; color:var(--bone); line-height:1.1}
}

.im-confabulator{background-image:url("/img/eddc07ab16c.webp")}
.im-auctoritas{background-image:url("/img/e683363a50c.webp")}
.im-simulacrum{background-image:url("/img/e2880a5ff1b.webp")}
.im-manipulatrix{background-image:url("/img/e6bd96cc08a.webp")}
.im-selector{background-image:url("/img/eb88a8b2509.webp")}
.im-iudex{background-image:url("/img/ecafd6b7e20.webp")}
.im-speculator{background-image:url("/img/e8f622ce922.webp")}
.im-agens{background-image:url("/img/e8d3721f401.webp")}
.im-susurrus{background-image:url("/img/e4e8f535238.webp")}
.im-medicus{background-image:url("/img/eff6446c053.webp")}
.im-larva{background-image:url("/img/e01f89b1027.webp")}
.im-vorator{background-image:url("/img/e10277a066b.webp")}