/* L'IA de demain : carnet de Léonard × technique. Parchemin, encre, sanguine, trait de plan.
   Polices locales uniquement (CSP font-src 'self') : JetBrains Mono pour les annotations, serif système pour le texte. */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/jetbrains-mono-var-latin.woff2) format("woff2")}
:root{
  --paper:#efe3c8;--paper2:#e5d4ae;--paper3:#d9c398;--ink:#2a1c10;--ink2:#5b4630;--ink3:#8a7254;
  --sang:#9e3a1f;--sang2:#c2562f;--plan:#245e78;--gold:#a8812c;--ok:#4d6b2f;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif KR","Nanum Myeongjo",Batang,Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.7,.2,1);color-scheme:light
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:400 1.08rem/1.65 var(--serif);
  background-color:var(--paper);
  background-image:
    radial-gradient(ellipse at 18% 12%,rgba(255,250,235,.75),transparent 55%),
    radial-gradient(ellipse at 85% 80%,rgba(160,120,60,.18),transparent 60%),
    radial-gradient(ellipse at 50% 120%,rgba(120,80,30,.22),transparent 55%),
    linear-gradient(rgba(36,94,120,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,94,120,.05) 1px,transparent 1px);
  background-size:auto,auto,auto,28px 28px,28px 28px;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header.bar{position:relative;z-index:1}
a{color:var(--sang);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--plan)}
:focus-visible{outline:2px solid var(--plan);outline-offset:3px}
::selection{background:#f0c9a8}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:9}
.skip:focus{left:8px}

/* barre d'encre (progression de lecture) */
.ink-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:20}
.ink-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--sang),var(--gold),var(--plan))}

/* en-tête */
.bar{display:flex;align-items:center;gap:18px;padding:12px clamp(16px,4vw,40px);font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;
  border-bottom:1px solid rgba(42,28,16,.18);background:rgba(239,227,200,.82);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}
.bar a{color:var(--ink);text-decoration:none}
.bar a:hover{color:var(--sang)}
.logo{font-weight:700;letter-spacing:.08em}
.sp{flex:1}
.langsw{position:relative}
.langsw summary{cursor:pointer;list-style:none;border:1px solid var(--ink2);padding:3px 9px;border-radius:2px}
.langsw summary::-webkit-details-marker{display:none}
.lang-options{position:absolute;right:0;top:calc(100% + 6px);display:grid;gap:2px;background:var(--paper);border:1px solid var(--ink2);padding:6px;min-width:150px;box-shadow:0 8px 24px rgba(42,28,16,.18)}
.lang-options a{padding:4px 8px}

main{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 60px}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;min-height:min(86vh,760px);padding:40px 0 20px}
.kicker{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--sang);margin:0 0 10px}
h1{font-size:clamp(2.8rem,7vw,5.4rem);line-height:.98;margin:0 0 14px;font-weight:600;letter-spacing:-.01em}
h1::after{content:"";display:block;width:120px;height:3px;margin-top:18px;background:var(--sang);transform-origin:0 50%;animation:quill 1.6s var(--ease) .4s both}
.sub{font-size:clamp(1.2rem,2.4vw,1.55rem);font-style:italic;color:var(--ink2);margin:0 0 18px}
.lede{max-width:58ch;margin:0 0 18px}
.meta{font-family:var(--mono);font-size:.78rem;color:var(--ink3)}
.hero-txt>*{animation:rise .9s var(--ease) both}
.hero-txt>*:nth-child(2){animation-delay:.08s}.hero-txt>*:nth-child(3){animation-delay:.18s}.hero-txt>*:nth-child(4){animation-delay:.28s}.hero-txt>*:nth-child(5){animation-delay:.38s}
.hero-art{position:relative}
.codex{width:100%;max-width:470px;display:block;margin:auto;overflow:visible}
.codex *{fill:none;stroke:var(--ink2);stroke-width:1.1;vector-effect:non-scaling-stroke}
.codex .ring{transform-origin:0 0;animation:spin 120s linear infinite}
.codex .ring>circle{stroke-dasharray:2 5;stroke:var(--ink3)}
.codex .ticks line{stroke:var(--ink3)}
.codex .mirror{fill:var(--sang);stroke:none;font:italic 15px var(--serif);letter-spacing:.12em;opacity:.7}
.codex .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s var(--ease) forwards}
.codex .sq{stroke:var(--ink);animation-delay:.2s}
.codex .ci{stroke:var(--sang);stroke-width:1.4;animation-delay:.6s}
.codex .net line{stroke:var(--plan);stroke-width:1.2;animation-delay:1.2s;animation-duration:1.8s}
.codex .node{fill:var(--paper);stroke:var(--plan);stroke-width:1.6;transform-box:fill-box;transform-origin:center;
  animation:pop .6s var(--ease) both,pulse 4s ease-in-out infinite;animation-delay:calc(1.6s + var(--i) * .12s),calc(2.6s + var(--i) * .5s)}
.codex .cross line{stroke:var(--ink3)}
.gear{position:absolute;pointer-events:none;opacity:.22}
.gear *{fill:none;stroke:var(--ink2);stroke-width:1.4;vector-effect:non-scaling-stroke}
.gear.g1{width:150px;right:-20px;bottom:30px;animation:spin 40s linear infinite}
.gear.g2{width:96px;right:108px;bottom:-6px;animation:spin 28s linear infinite reverse}

/* sommaire */
.toc{border:1px solid rgba(42,28,16,.28);padding:22px 26px;margin:10px 0 50px;background:rgba(255,250,235,.35);position:relative}
.toc::before{content:"";position:absolute;inset:6px;border:1px dashed rgba(42,28,16,.16);pointer-events:none}
.toc-h{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sang);margin:0 0 8px}
.toc ol{list-style:none;padding:0;margin:0 0 14px;columns:2;column-gap:40px}
.toc li{break-inside:avoid;padding:3px 0}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.toc a:hover{border-color:var(--sang)}
.toc a span{display:inline-block;min-width:2.2em;font-family:var(--mono);color:var(--sang);font-size:.85em}
.legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.9rem;margin:0 0 6px}
.note-prov{font-style:italic;color:var(--ink2);margin:0;font-size:.95rem}

/* folios */
.folio{padding:46px 0 26px;border-top:1px solid rgba(42,28,16,.2);position:relative}
.folio-h{display:flex;align-items:baseline;gap:18px;margin-bottom:10px}
.num{font-family:var(--serif);font-size:clamp(2.6rem,6vw,4rem);line-height:1;color:var(--sang);font-style:italic;opacity:.9}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin:0;font-weight:600}
.intro{max-width:70ch;font-size:1.12rem;color:var(--ink2);margin:0 0 26px}
.intro strong,.lede strong{color:var(--ink)}
h3{font-size:1.15rem;margin:0 0 8px;line-height:1.3}

.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.note{position:relative;padding:22px 22px 16px;background:linear-gradient(180deg,rgba(255,250,235,.62),rgba(255,248,228,.35));
  border:1px solid rgba(42,28,16,.22);box-shadow:2px 3px 0 rgba(42,28,16,.08),0 10px 24px -14px rgba(60,40,15,.35);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.note:nth-child(odd){--r:-.35deg}.note:nth-child(even){--r:.3deg}
.note.in{transform:rotate(var(--r))}
.note:hover{transform:rotate(0) translateY(-3px);box-shadow:3px 5px 0 rgba(42,28,16,.1),0 18px 30px -14px rgba(60,40,15,.45)}
.note::after{content:"";position:absolute;top:-1px;left:22px;width:46px;height:3px;background:var(--c,var(--ink2))}
.note p{margin:0 0 10px}
.stamp{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;border:1.5px solid var(--c,var(--ink2));color:var(--c,var(--ink2));border-radius:2px;margin:0 0 10px;transform:rotate(-2deg)}
.s-established{--c:var(--ok)}.s-promising{--c:var(--plan)}.s-speculative{--c:var(--sang)}
.cite{font-family:var(--mono);font-size:.74rem;color:var(--ink3);margin:8px 0 0!important;line-height:1.5}
.cite span{text-transform:uppercase;letter-spacing:.1em;margin-right:4px}
.cite a{color:var(--ink2)}

/* figures */
.fig{margin:6px 0 34px;padding:22px;border:1px solid rgba(36,94,120,.35);background:rgba(36,94,120,.04);position:relative}
.fig::before,.fig::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--plan)}
.fig::before{top:-1px;left:-1px;border-right:0;border-bottom:0}.fig::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.fig-t{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--plan);margin:0 0 12px}
figcaption{font-style:italic;color:var(--ink2);margin-top:12px;max-width:72ch}
.pyr{position:relative;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:stretch}
.pyr canvas{width:100%;height:300px;display:block}
.pyr-labels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around;font-family:var(--mono);font-size:.8rem;color:var(--ink2);min-width:8.5em}
.pyr-labels li{border-left:2px solid var(--sang);padding-left:10px}
.tree svg{width:100%;height:auto;display:block;max-height:340px}
.tree svg line{stroke:var(--ink3);stroke-width:1.2;transition:stroke .35s,stroke-width .35s}
.tree svg line.on{stroke:var(--sang);stroke-width:2.6}
.tree svg circle{fill:var(--paper);stroke:var(--ink2);stroke-width:1.3;transition:fill .35s,stroke .35s,r .35s}
.tree svg circle.on{fill:var(--sang);stroke:var(--sang)}
.tree svg circle.leaf.hit{fill:var(--gold);stroke:var(--sang)}
.tree svg .lens{fill:none;stroke:var(--plan);stroke-width:1.6;stroke-dasharray:3 3}
.tree-count{font-family:var(--mono);font-size:.9rem;margin:10px 0 6px}
.tree-count b{color:var(--sang);font-size:1.15rem}
.tree-btns{margin:0}
button{font:inherit;font-family:var(--mono);font-size:.8rem;cursor:pointer;background:transparent;color:var(--ink);border:1px solid var(--ink2);padding:6px 12px;border-radius:2px;transition:background .3s,color .3s}
button:hover{background:var(--ink);color:var(--paper)}
.split{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;gap:10px}
.pane{border:1px solid rgba(42,28,16,.3);padding:16px 18px;background:rgba(255,250,235,.5)}
.pane-h{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;color:var(--sang)}
.vault .pane-h{color:var(--plan)}
.pane ul{margin:0;padding-left:1.1em}
.flow svg{width:100%;display:block}
.flowline{fill:none;stroke:var(--sang);stroke-width:2;stroke-dasharray:6 7;animation:flow 2.2s linear infinite}
.flowline.back{stroke:var(--plan);animation-direction:reverse}

/* hypothèses */
.hyps{display:grid;gap:22px}
.hyp{position:relative;padding:22px 24px 18px 84px;border-left:2px solid var(--sang);background:rgba(255,250,235,.4)}
.hyp-id{position:absolute;left:18px;top:16px;margin:0;font:italic 2rem/1 var(--serif);color:var(--sang)}
.hyp p{margin:0 0 12px}
.gauge{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-family:var(--mono);font-size:.78rem;color:var(--ink2);margin:6px 0 12px;max-width:520px}
.g-bar{height:8px;border:1px solid var(--ink2);position:relative;background:repeating-linear-gradient(90deg,transparent 0 9.5%,rgba(42,28,16,.25) 9.5% 10%)}
.g-bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--plan),var(--sang));transition:transform 1.6s var(--ease) .2s}
.hyp.in .g-bar i{transform:scaleX(calc(var(--v) / 100))}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0}
.pc dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
.pc div+div dt{color:var(--sang)}
.pc dd{margin:2px 0 0;font-size:.98rem;color:var(--ink2)}

/* conclusions, questions */
.concl{list-style:none;counter-reset:c;padding:0;margin:0 0 30px;display:grid;gap:18px}
.concl li{counter-increment:c;position:relative;padding:4px 0 4px 64px}
.concl li::before{content:counter(c,upper-roman);position:absolute;left:0;top:0;width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--sang);border-radius:50%;color:var(--sang);font:italic 1.05rem var(--serif)}
.concl p{margin:0}
.qs,.next{padding:0;margin:0 0 20px;list-style:none;display:grid;gap:10px}
.qs li{padding:12px 16px 12px 46px;position:relative;border-bottom:1px dashed rgba(42,28,16,.25);font-size:1.08rem}
.qs li::before{content:"?";position:absolute;left:12px;top:6px;font:italic 1.7rem/1 var(--serif);color:var(--sang)}
.next li{padding:10px 16px 10px 46px;position:relative}
.next li::before{content:"→";position:absolute;left:14px;top:9px;font-family:var(--mono);color:var(--plan)}
.sub{font-weight:600}
h3.sub{font-style:normal;font-size:1.2rem;margin:20px 0 10px;color:var(--plan)}

/* journal, sources */
.coda{display:grid;grid-template-columns:1fr 1.3fr;gap:40px}
.coda h2{font-size:1.35rem;margin-bottom:12px}
.journal,.bib{margin:0;padding-left:1.2em;font-size:.95rem}
.journal{list-style:none;padding:0}
.journal li{padding:6px 0 6px 16px;border-left:2px solid var(--gold)}
.journal time{font-family:var(--mono);font-size:.8rem;color:var(--sang);display:block}
.bib li{margin:0 0 4px}
.bib a{color:var(--ink2)}
.colophon{text-align:center;margin:40px 0 0;font-family:var(--mono);font-size:.8rem;color:var(--ink3)}
.mirror-txt{display:block;font:italic 1.3rem var(--serif);color:var(--sang);opacity:.6;transform:scaleX(-1);margin-bottom:10px}

/* apparition au défilement (sans JS : tout visible) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .note.reveal.in{transform:rotate(var(--r))}
.js .note.reveal.in:hover{transform:rotate(0) translateY(-3px)}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes pulse{0%,100%{stroke-width:1.6}50%{stroke-width:3}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes quill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes flow{to{stroke-dashoffset:-26}}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:24px}
  .hero-art{order:-1;max-width:320px;margin:0 auto}
  .gear{display:none}
  .toc ol{columns:1}
  .coda{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .flow{transform:rotate(90deg);max-width:90px;margin:auto}
  .pc{grid-template-columns:1fr}
  .hyp{padding-left:24px;padding-top:56px}
  .pyr{grid-template-columns:1fr}
  .pyr-labels{flex-direction:row;flex-wrap:wrap;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .codex .draw{stroke-dashoffset:0}
}
@media print{body{background:#fff}.bar,.ink-progress,.gear,.tree-btns{display:none}.js .reveal{opacity:1;transform:none}}

/* ===== Pages d'approfondissement (/tomorrow/<slug>/) ===== */
.hero-deep{grid-template-columns:1fr;min-height:0;padding:56px 0 30px}
.hero-deep .gear.g1{right:0;top:40px;bottom:auto;width:170px}
.hero-deep h1{font-size:clamp(2.4rem,6vw,4.4rem)}
.crumb{font-family:var(--mono);font-size:.8rem;margin:0 0 18px}
.crumb a,.more a{text-decoration:none}
.meta .stamp{margin:0 8px 0 0;vertical-align:middle}
.deep-sec p{max-width:72ch}
.deep-sec>p{font-size:1.08rem}
a.stamp{text-decoration:none;transition:background .3s,color .3s}
a.stamp:hover{background:var(--c);color:var(--paper)}
.note .more{margin:12px 0 0!important;font-family:var(--mono);font-size:.8rem}
.note .more a{color:var(--sang);border-bottom:1px solid currentColor;padding-bottom:1px}
.note .more span{display:inline-block;transition:transform .3s var(--ease)}
.note .more a:hover span{transform:translateX(4px)}
.note.has-deep{border-color:rgba(158,58,31,.4)}
.hyp-links{display:flex;flex-wrap:wrap;gap:10px}
.hyp-links a{font-family:var(--mono);font-size:.8rem;text-decoration:none;border:1px solid var(--sang);padding:6px 10px;color:var(--sang)}
.hyp-links a:hover{background:var(--sang);color:var(--paper)}
.hyp-links .conf{opacity:.75}
.schematic{font-family:var(--mono);font-size:.72rem;color:var(--ink3);margin:10px 0 0;letter-spacing:.04em}
.others{list-style:none;padding:0}
.others li{margin:0 0 6px}
.fig .draw{fill:none;stroke-dasharray:1;stroke-dashoffset:1}
.js .fig.in .draw{animation:draw 2.4s var(--ease) .3s forwards}
html:not(.js) .fig .draw{stroke-dashoffset:0}

/* Fig. A : tapis roulants + courbes */
.lane{display:grid;grid-template-columns:7.5em 1fr 40px;align-items:center;gap:12px;margin:0 0 12px}
.lane-l{font-family:var(--mono);font-size:.78rem;color:var(--ink2)}
.belt{position:relative;height:26px;border-top:1px solid var(--ink3);border-bottom:1px solid var(--ink3);overflow:hidden;
  background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(42,28,16,.12) 22px 23px)}
.belt i{position:absolute;top:3px;width:18px;height:18px;left:calc(var(--k) * 6.8%);border:1px solid var(--ink2);
  background:color-mix(in srgb,var(--sang) calc(var(--d) * 100%),var(--paper))}
.js .fig.in .belt i{left:-20px;animation:belt 8.4s linear infinite;animation-delay:calc(var(--k) * .6s - 8.4s)}
.lane .model{width:34px;height:34px;border-radius:50%;border:2px solid var(--plan);background:rgba(36,94,120,.08);animation:pulse2 2.4s ease-in-out infinite}
.curves{width:100%;height:auto;display:block;margin-top:14px}
.curves text{font-family:var(--mono);font-size:11px;fill:var(--ink2)}
.curves .axis{fill:none;stroke:var(--ink3);stroke-width:1}
.curves .base{stroke:var(--ink3);stroke-dasharray:4 4}
.curves .c-rand{stroke:var(--ink2);stroke-width:2}
.curves .c-ord{stroke:var(--sang);stroke-width:2.6}
.curves .mark{stroke:var(--plan);stroke-dasharray:2 4}
.curves .gain{stroke:var(--plan);stroke-width:2}
.curves .gain-t,.curves .l-ord{fill:var(--sang)}
.curves .gain-t{fill:var(--plan)}
.js .fig .curves .gain,.js .fig .curves .gain-t,.js .fig .curves .mark{opacity:0;transition:opacity .8s 2.4s}
.js .fig.in .curves .gain,.js .fig.in .curves .gain-t,.js .fig.in .curves .mark{opacity:1}

/* Fig. B : le tamis */
.sieve svg{width:100%;height:auto;display:block}
.sieve .tray{fill:rgba(255,250,235,.4);stroke:var(--ink3);stroke-dasharray:3 4}
.sieve circle{transform-box:fill-box;transform-origin:center;transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--k) * 35ms)}
.sieve .keep{fill:var(--ink2)}
.sieve .dup{fill:var(--paper);stroke:var(--ink2);stroke-width:1.4}
.sieve .noise{fill:#a89c8a}
.sieve[data-step="1"] .noise,.sieve[data-step="2"] .noise{opacity:0;transform:translateY(40px)}
.sieve[data-step="2"] .dup{opacity:0;transform:scale(.2)}
.sieve-steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:12px 0 6px;font-family:var(--mono);font-size:.8rem;color:var(--ink3)}
.sieve-steps li{transition:color .4s}
.sieve-steps b{font-size:1rem}
.sieve[data-step="0"] li[data-s="0"],.sieve[data-step="1"] li[data-s="1"],.sieve[data-step="2"] li[data-s="2"]{color:var(--sang)}
.sieve-key{font-family:var(--mono);font-size:.75rem;color:var(--ink2);display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;margin:0}
.sieve-key span{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:-8px}
.k-keep{background:var(--ink2)}.k-dup{background:var(--paper);border:1.4px solid var(--ink2)}.k-noise{background:#a89c8a}

/* Fig. C : des lettres aux idées */
.chunks .row{display:grid;grid-template-columns:7em 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px dashed rgba(42,28,16,.2)}
.row-l{font-family:var(--mono);font-size:.78rem;color:var(--ink2)}
.row-v{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:34px}
.r-bytes .w{display:inline-flex;gap:2px;margin-right:6px}
.r-bytes i{font:500 .82rem var(--mono);font-style:normal;display:inline-grid;place-items:center;min-width:16px;height:22px;border:1px solid rgba(42,28,16,.3);background:rgba(255,250,235,.6)}
.r-chunks .ch{font:600 .85rem var(--mono);padding:4px 9px;border:1.5px solid var(--sang);color:var(--sang);background:rgba(158,58,31,.05)}
.r-ideas .bead{font:italic 1.05rem var(--serif);padding:6px 16px;border-radius:999px;background:var(--plan);color:var(--paper);box-shadow:0 6px 16px -8px rgba(36,94,120,.8)}
.js .fig-chunks .r-bytes i,.js .fig-chunks .ch,.js .fig-chunks .bead{opacity:0}
.js .fig-chunks.in .r-bytes i{animation:popin .35s var(--ease) both;animation-delay:calc(var(--k) * 45ms)}
.js .fig-chunks.in .ch{animation:rise .6s var(--ease) both;animation-delay:calc(2s + var(--k) * .18s)}
.js .fig-chunks.in .bead{animation:popin .7s var(--ease) both;animation-delay:calc(3.8s + var(--k) * .45s)}
.chunks .tree-btns{margin-top:12px}

@keyframes popin{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes belt{0%{left:-20px;opacity:0}6%{opacity:1}88%{opacity:1}100%{left:calc(100% - 2px);opacity:0}}
@keyframes pulse2{0%,100%{box-shadow:0 0 0 0 rgba(36,94,120,.35)}50%{box-shadow:0 0 0 8px rgba(36,94,120,0)}}
@media (max-width:820px){.lane{grid-template-columns:5.5em 1fr 30px}.lane .model{width:26px;height:26px}.chunks .row{grid-template-columns:1fr;gap:6px}.hero-deep .gear{display:block;opacity:.12}}