/* lolpiergenial.com, V2 : « le site qui se règle comme un modèle ».
   Une seule variable pilote l'ambiance : --t, la température, de 0 (sobre, monochrome) à 1 (couleur, désordre).
   Deux voix typographiques : le sérif pour l'humain (Pierre), le mono pour les machines (interface, agents). */

@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin-full-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin-opsz-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

@property --t{syntax:"<number>";inherits:true;initial-value:.7}

:root{
  --t:.7;
  --x:0;
  --ink:#06080b;
  --ink-2:#0b0f15;
  --ink-3:#131a23;
  --paper:#f3efe6;
  --mute:#9aa3ad;
  --dim:#808a94;
  --line:rgba(243,239,230,.13);
  --line-2:rgba(243,239,230,.3);
  --human:#6ce4d0;
  --cold:#86a8ff;
  --mid:#b48cff;
  --hot:#ff6f4e;
  --amber:#ffc24a;
  /* Tout ce qui suit se déduit de la température. L'accent suit une palette de caméra thermique :
     gris à 0, bleu à 0,25, violet à 0,5, corail à 0,75, ambre à 1, puis chauffé à blanc en surchauffe (--x). */
  --c1:color-mix(in oklab,var(--cold) calc(clamp(0,var(--t)*4,1)*100%),#c9cfd7);
  --c2:color-mix(in oklab,var(--mid) calc(clamp(0,(var(--t) - .25)*4,1)*100%),var(--c1));
  --c3:color-mix(in oklab,var(--hot) calc(clamp(0,(var(--t) - .5)*4,1)*100%),var(--c2));
  --c4:color-mix(in oklab,var(--amber) calc(clamp(0,(var(--t) - .75)*4,1)*100%),var(--c3));
  --accent:color-mix(in oklab,#fff3c2 calc(var(--x)*55%),var(--c4));
  --sat:clamp(0,var(--t)*1.6,1);
  --soft:calc(var(--t)*100);
  --wonk:clamp(0,(var(--t) - .62)*100,1);
  --radius:calc(1px + var(--t)*15px);
  --push:clamp(0,(var(--t) - .7)*3.34,1);
  --jit:calc(clamp(0,(var(--t) - .86)*7.2,1) + var(--x)*1.6);
  --lol:clamp(0,(var(--x) - .8)*5,1);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gutter:clamp(18px,4.2vw,64px);
  --max:1480px;
  --bar:56px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* Avec JavaScript, la page s'ouvre à froid et le script fait monter la température. Sans lui, elle reste à 0,7. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){:root{--t:0}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 16px)}
body{margin:0;color:var(--paper);font-family:var(--serif);font-size:clamp(1rem,.95rem + .22vw,1.15rem);line-height:1.55;font-optical-sizing:auto;font-variation-settings:"SOFT" var(--soft);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}
ul,ol{padding:0;list-style:none}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--human);color:var(--ink)}
:focus-visible{outline:2px solid var(--human);outline-offset:4px;border-radius:2px}
.sprite{position:absolute}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.icon{flex:none;width:1em;height:1em;fill:currentColor}
.skip-link{position:fixed;left:8px;top:8px;z-index:100;padding:10px 14px;background:var(--human);color:var(--ink);font-family:var(--mono);font-size:.8rem;font-weight:600;translate:0 -200%}
.skip-link:focus{translate:0 0}
mark{padding:.1em .3em;border-radius:4px;background:var(--hot);color:var(--ink)}

/* Le fond génératif : des lignes de niveau recalculées en continu, derrière tout le reste. */
.field{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

/* ---------- Voix ---------- */
.who,.tag,.ruler,.kicker,.panel-title,.panel-meta,.film-num,.film-meta,.case-service,.version-when,.version-live,.arch-tag,.model-id,.region-lobe,.evo-when,.when,.rule-num,.sim-key,.make-kind,.pipe-num,.footnote,.source,.frame-cap,.viewer-step,figcaption,.context,.io dt,.scenario-title,.scenario-gate,.outcomes p{font-family:var(--mono);font-variation-settings:normal;font-size:.72rem;font-weight:500;letter-spacing:.09em;line-height:1.5;text-transform:uppercase}
.h-xxl,.h-xl,.h-l,.h-m{font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" var(--soft),"WONK" var(--wonk);text-wrap:balance}
.h-xxl{display:block;font-size:clamp(4.2rem,13.2vw,13.5rem);font-weight:540;line-height:.86;letter-spacing:-.04em}
.h-xl{display:block;font-size:clamp(3.1rem,9.4vw,9.5rem);font-weight:540;line-height:.9;letter-spacing:-.035em}
.h-l{font-size:clamp(2rem,4.5vw,4.1rem);font-weight:480;line-height:1;letter-spacing:-.025em}
.h-m{font-size:clamp(1.45rem,2.2vw,2.05rem);font-weight:480;line-height:1.1;letter-spacing:-.015em}
em{font-style:italic}
.h-xxl em,.h-xl em,.h-l em{font-weight:440;color:var(--accent)}
.h-l em{display:block}
.lead{max-width:30em;font-size:clamp(1.2rem,1rem + .85vw,1.65rem);font-weight:380;line-height:1.38;text-wrap:pretty}
.tag.accent{color:var(--accent)}
.hint{font-family:var(--mono);font-variation-settings:normal;font-size:.78rem;line-height:1.55;letter-spacing:.01em;color:var(--accent)}
.footnote{margin-top:12px;color:var(--dim)}

/* Une section se lit comme un échange : la question du visiteur, puis la réponse de Pierre. */
.turn{display:grid;grid-template-columns:4.6rem minmax(0,1fr);column-gap:clamp(10px,1.6vw,22px);align-items:baseline}
.who{color:var(--dim)}
.turn-user{margin-bottom:clamp(14px,2.2vw,28px)}
.said{font-family:var(--mono);font-variation-settings:normal;font-size:clamp(.9rem,.85rem + .3vw,1.1rem);color:var(--mute)}
.said::before{content:"> ";color:var(--human)}
.turn-pierre>.who{align-self:start;padding-top:.6em}
.answer>.tag{margin-top:14px;color:var(--mute)}
.answer>.lead{margin-top:clamp(18px,2.4vw,32px)}
.kicker{display:block;margin-bottom:clamp(12px,1.8vw,22px);color:var(--mute)}
.ruler{display:flex;align-items:center;gap:14px;margin-bottom:clamp(28px,4vw,56px);color:var(--dim)}
.ruler i{flex:1;height:1px;background:var(--line)}

/* ---------- Boutons et liens ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 18px;border:1px solid transparent;border-radius:var(--radius);font-family:var(--mono);font-variation-settings:normal;font-size:.8rem;font-weight:600;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,translate .2s var(--ease)}
.btn:active{translate:0 2px}
.btn .icon{transition:translate .25s var(--ease),rotate .4s var(--ease)}
.btn:hover .icon-arrow-up-right{translate:2px -2px}
.btn:hover .icon-arrow-right{translate:4px 0}
.btn:hover .icon-reroll{rotate:180deg}
.btn-human{background:var(--human);color:var(--ink)}
.btn-human:hover{background:var(--paper)}
.btn-ghost{border-color:var(--line-2);background:rgba(11,15,21,.5);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper)}
.btn-small{min-height:38px;padding:8px 13px;font-size:.72rem}
.link{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-variation-settings:normal;font-size:.84rem;font-weight:500;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:6px}
.link:hover{color:var(--human)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(22px,3vw,36px)}

/* ---------- Barre du haut ---------- */
.topbar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--bar);padding-inline:var(--gutter);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.topbar.is-solid{border-color:var(--line);background:rgba(6,8,11,.94)}
.wordmark{font-family:var(--mono);font-variation-settings:normal;font-size:.95rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.wm-lol{display:inline-block;color:color-mix(in oklab,var(--paper) calc((1 - var(--t))*100%),var(--accent));rotate:calc(var(--lol)*-9deg);translate:0 calc(var(--lol)*-2px)}
.caret{display:inline-block;width:.55em;height:1.05em;margin-left:.14em;vertical-align:-.16em;background:var(--human)}
.topnav{display:flex;gap:clamp(16px,2.4vw,34px)}
.topnav a{font-family:var(--mono);font-variation-settings:normal;font-size:.72rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);transition:color .2s}
.topnav a:hover{color:var(--paper)}
.topbar-end{display:flex;align-items:center;gap:clamp(12px,1.8vw,24px)}
.context{color:var(--dim);white-space:nowrap}
.context b{display:inline-block;min-width:1.6em;font-weight:600;text-align:right;color:var(--mute);font-variant-numeric:tabular-nums}
.menu-btn{display:none;min-height:38px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--radius);background:none;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

/* ---------- Barre de réglages ---------- */
.params{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:60;display:flex;align-items:stretch;width:min(800px,calc(100% - 24px));min-height:52px;border:1px solid var(--line-2);border-radius:999px;background:rgba(11,15,21,.95);box-shadow:0 18px 50px rgba(0,0,0,.55);font-family:var(--mono);font-variation-settings:normal;font-size:.74rem;translate:-50% 0}
.param{display:flex;align-items:center;gap:10px;padding:0 16px;white-space:nowrap}
.param+.param{border-left:1px solid var(--line)}
.param-t{flex:1;min-width:0;padding-left:20px}
.param-name{color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.param-name .short{display:none}
.param-value{min-width:2.3em;font-weight:600;font-variant-numeric:tabular-nums}
.param-word{min-width:7.4em;color:var(--accent)}
.param-t input{flex:1;min-width:56px;height:30px;margin:0;background:none;appearance:none;-webkit-appearance:none;cursor:pointer}
.param-t input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,#ff3d2e 0 3px,var(--amber) 3px 6px) right/50% 100% no-repeat,linear-gradient(90deg,#c9cfd7,var(--cold) 12.5%,var(--mid) 25%,var(--hot) 37.5%,var(--amber) 50%,var(--amber))}
.param-t input::-moz-range-track{height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,#ff3d2e 0 3px,var(--amber) 3px 6px) right/50% 100% no-repeat,linear-gradient(90deg,#c9cfd7,var(--cold) 12.5%,var(--mid) 25%,var(--hot) 37.5%,var(--amber) 50%,var(--amber))}
.param-t input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-8.5px;border:5px solid var(--ink-2);border-radius:50%;background:var(--paper);box-shadow:0 0 0 1.5px var(--human)}
.param-t input::-moz-range-thumb{width:10px;height:10px;border:5px solid var(--ink-2);border-radius:50%;background:var(--paper);box-shadow:0 0 0 1.5px var(--human)}
.param-btn{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:none;cursor:pointer;transition:border-color .2s,rotate .5s var(--ease)}
.param-btn:hover{border-color:var(--human);rotate:180deg}
.param-btn .icon{width:15px;height:15px}
.param-ask{border:0;border-radius:0 999px 999px 0;background:none;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .2s}
.param-ask:hover{background:rgba(243,239,230,.08)}
.param-ask .icon{width:15px;height:15px;color:var(--human)}
kbd{padding:2px 6px;border:1px solid var(--line-2);border-radius:5px;font-family:var(--mono);font-size:.66rem;color:var(--mute)}
.coach{position:absolute;left:50%;bottom:calc(100% + 12px);padding:8px 14px;border-radius:999px;background:var(--human);color:var(--ink);font-size:.74rem;font-weight:600;white-space:nowrap;translate:-50% 0;pointer-events:none}
.coach::after{content:"";position:absolute;left:50%;top:100%;border:6px solid transparent;border-top-color:var(--human);translate:-50% 0}
.toast{position:fixed;left:50%;bottom:86px;z-index:70;padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--ink-2);font-family:var(--mono);font-size:.74rem;translate:-50% 0}

/* ---------- Accueil ---------- */
.hero{position:relative;display:grid;align-items:end;min-height:100svh;padding:calc(var(--bar) + clamp(24px,5vh,72px)) 0 clamp(104px,13vh,160px);background:linear-gradient(180deg,rgba(6,8,11,.3),rgba(6,8,11,.1) 50%,rgba(6,8,11,.88)),linear-gradient(90deg,rgba(6,8,11,calc(.6 + var(--x)*.3)),rgba(6,8,11,calc(var(--x)*.45)) 66%,rgba(6,8,11,0))}
.hero .h-xxl{font-size:clamp(4.2rem,min(13.2vw,23vh),13.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(28px,4vw,72px);align-items:end}
.headline{margin-left:-.04em}
.headline em{display:block;white-space:nowrap}
.tok{display:inline-block;rotate:calc(var(--jr,0)*var(--jit)*1deg);translate:0 calc(var(--jy,0)*var(--jit)*.0052em)}
.headline .caret{width:.09em;height:.7em;margin-left:.07em;vertical-align:-.03em}
.hero-follow .lead{margin-top:clamp(20px,3vw,40px)}
.hero-side{display:grid;gap:14px;align-self:end}

.panel{padding:16px 18px 18px;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(11,15,21,.9)}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.panel-title{color:var(--mute)}
.panel-meta{color:var(--dim)}
.panel-meta b{font-weight:600;color:var(--accent)}
.panel-note{margin-top:12px;font-family:var(--mono);font-variation-settings:normal;font-size:.72rem;line-height:1.55;color:var(--dim)}
.sampler-context{margin-top:14px;font-size:1.25rem;font-style:italic}
.blank{display:inline-block;width:2.6em;height:.95em;margin-left:.1em;border:1px dashed var(--accent);border-radius:4px;vertical-align:-.12em}
.probs{display:grid;gap:9px;margin:14px 0 16px}
.probs li{display:grid;grid-template-columns:4.2em minmax(0,1fr) 3.4em;gap:10px;align-items:center;font-family:var(--mono);font-variation-settings:normal;font-size:.8rem}
.prob-bar{height:8px;border-radius:calc(var(--radius)/2);background:rgba(243,239,230,.08);overflow:hidden}
.prob-bar i{display:block;width:var(--p,0%);height:100%;background:var(--accent);transition:width .25s var(--ease),background-color .2s}
.prob-val{color:var(--mute);text-align:right;font-variant-numeric:tabular-nums}
.probs li.is-picked .prob-word{color:var(--human)}
.probs li.is-picked .prob-bar i{background:var(--human)}
.kv{display:grid;gap:6px;margin-top:12px;font-family:var(--mono);font-variation-settings:normal;font-size:.76rem;line-height:1.5}
.kv div{display:grid;grid-template-columns:6.4em minmax(0,1fr);gap:10px}
.kv dt{color:var(--dim)}

/* ---------- Sections ---------- */
.section{position:relative;padding-block:clamp(72px,10vw,168px);background:rgba(6,8,11,.88);overflow-x:clip}
.block{margin-top:clamp(64px,9vw,140px)}
.block-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(18px,4vw,72px);align-items:end;margin-bottom:clamp(26px,3.6vw,52px)}
.block-text{display:grid;gap:12px;max-width:34em}
.block-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,5vw,90px);align-items:end}
.block-split .tag{margin-bottom:14px}
.block-lead{max-width:32em;margin-top:clamp(16px,2vw,26px)}

/* Simulation : le schéma du système, la trace des agents, et la décision laissée au visiteur. */
.sim{border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(11,15,21,.8);overflow:hidden}
.sim-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.sim-tab{padding:14px 18px;border:0;border-right:1px solid var(--line);background:none;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);cursor:pointer;transition:background-color .2s,color .2s}
.sim-tab:hover{color:var(--paper)}
.sim-tab[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.sim-stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.sim-graph{padding:clamp(8px,1.6vw,24px);border-right:1px solid var(--line)}
.sim-console{display:flex;flex-direction:column;gap:14px;min-height:330px;padding:clamp(16px,2vw,26px)}
.trace{flex:1;display:grid;align-content:start;gap:11px;font-family:var(--mono);font-variation-settings:normal;font-size:.8rem;line-height:1.5}
.trace li{display:grid;grid-template-columns:7.4em minmax(0,1fr);gap:10px}
.via{font-style:normal;color:var(--dim)}
.via::after{content:" ·"}
.trace b,.steps b,.outcomes b{font-weight:600}
[data-actor="pierre"]{--actor:var(--human)}
[data-actor="hermes"]{--actor:var(--mid)}
[data-actor="codex"]{--actor:var(--cold)}
[data-actor="claude"]{--actor:var(--hot)}
[data-actor] b{color:var(--actor)}
.gate{display:grid;gap:12px;padding:14px;border:1px dashed var(--human);border-radius:var(--radius)}
.gate-q{font-size:1.2rem;font-style:italic}
.gate-actions{display:flex;flex-wrap:wrap;gap:10px}
.gate-hint{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--human)}
.sim-replay{align-self:flex-start}
.sys{width:100%;height:auto;overflow:visible}
.sys-edge{fill:none;stroke:rgba(243,239,230,.2);stroke-width:1.2;transition:stroke .25s,stroke-width .25s}
.sys-edge.is-on{stroke:var(--accent);stroke-width:2}
.sys-link{stroke:rgba(243,239,230,.16);stroke-width:.8}
.sys-note{fill:rgba(243,239,230,.6)}
.sys-core{fill:var(--paper)}
.sys-plate{fill:var(--ink-2)}
.sys-node>circle:first-child,.sys-node>path:first-child,.sys-node>rect:first-child{fill:var(--ink-2);stroke:rgba(243,239,230,.5);stroke-width:1.3;transition:stroke .25s,fill .25s}
.sys-human>circle:first-child{fill:rgba(108,228,208,.14);stroke:var(--human)}
.sys-node.is-on>circle:first-child,.sys-node.is-on>path:first-child,.sys-node.is-on>rect:first-child{stroke:var(--accent);fill:var(--ink-3)}
.sys-vault.is-on .sys-core{fill:var(--accent)}
.sys-gate.is-waiting>path:first-child{stroke:var(--human);fill:rgba(108,228,208,.14)}
.sys-gate.is-open>path:first-child,.sys-out.is-open>rect:first-child{stroke:var(--human);fill:var(--human)}
.sys-gate.is-open .sys-glyph,.sys-out.is-open .sys-glyph{fill:var(--ink)}
.sys-gate.is-shut>path:first-child{stroke:var(--hot)}
.sys-label{font-family:var(--serif);font-size:15px;font-weight:500;fill:var(--paper)}
.sys-sub,.sys-tiny{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;fill:var(--mute)}
.sys-tiny{fill:var(--dim)}
.sys-glyph{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--paper);text-anchor:middle}
.sys-packet{fill:var(--human);opacity:0}
.sys-packet.is-on{opacity:1}
.js .sim-source{display:none}
html:not(.js) .sim-tabs,html:not(.js) .sim-console{display:none}
html:not(.js) .sim-stage{grid-template-columns:minmax(0,1fr)}
html:not(.js) .sim-graph{border-right:0;border-bottom:1px solid var(--line)}
.sim-source{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.scenario{padding:20px;border-right:1px solid var(--line);font-family:var(--mono);font-size:.78rem;line-height:1.5}
.scenario:last-child{border-right:0}
.scenario-title{margin-bottom:12px;color:var(--paper)}
.steps,.outcomes ol{display:grid;gap:8px}
.scenario-gate{margin:14px 0 10px;color:var(--human)}
.outcomes{display:grid;gap:12px}
.outcomes p{margin-bottom:6px;color:var(--dim)}


.makes{border-top:1px solid var(--line)}
.make{display:grid;grid-template-columns:13rem minmax(0,1fr) minmax(0,1.15fr) auto;gap:6px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease)}
.make-kind{color:var(--dim)}
.make strong{font-size:clamp(1.2rem,1.7vw,1.6rem);font-weight:480;line-height:1.15;letter-spacing:-.01em;transition:color .2s}
.make-text{font-size:.97rem;color:var(--mute)}
.make .icon{width:18px;height:18px;color:var(--accent);transition:translate .25s var(--ease)}
.make:hover{padding-left:12px}
.make:hover strong{color:var(--accent)}
.make:hover .icon{translate:2px -2px}

/* ---------- Créer ---------- */
.films{display:grid;gap:clamp(24px,4vw,72px)}
.viewer{display:none}
.film-list{border-top:1px solid var(--line)}
.film{border-bottom:1px solid var(--line)}
.film-link{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:6px 14px;align-items:baseline;padding:clamp(14px,1.8vw,24px) 0}
.film-num{color:var(--dim)}
.film-title{font-size:clamp(1.7rem,3.3vw,3.2rem);font-weight:480;line-height:1.02;letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" var(--soft),"WONK" var(--wonk);transition:translate .3s var(--ease),color .2s}
.film-meta{grid-column:2;color:var(--mute)}
.film-link:hover .film-title,.film.is-active .film-title{color:var(--accent);translate:10px 0}
.film-thumb{position:relative;grid-column:1 / -1;display:block;margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.film-thumb img{width:100%;filter:grayscale(calc(1 - var(--sat)))}
.film-play,.viewer-play{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--human);color:var(--ink)}
.film-play .icon,.viewer-play .icon{width:20px;height:20px;margin-left:2px}
@media (min-width:900px){
  .js .films{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}
  .js .viewer{position:sticky;top:calc(var(--bar) + 24px);display:block;aspect-ratio:16/10;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--ink-2);overflow:hidden;cursor:pointer}
  .js .film-thumb{display:none}
}
.viewer-img,.viewer-canvas{position:absolute;inset:0;width:100%;height:100%}
.viewer-img{object-fit:contain;filter:grayscale(calc(1 - var(--sat)))}
.viewer-img:not([src]){visibility:hidden}
.viewer-canvas{filter:grayscale(calc(1 - var(--sat)));opacity:0}
.viewer-canvas.is-on{opacity:1}
.viewer-step{position:absolute;left:14px;bottom:14px;color:var(--paper)}
.viewer-play{transition:scale .25s var(--ease),background-color .2s}
.viewer:hover .viewer-play{scale:1.1;background:var(--paper)}

.frames{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:clamp(12px,2vw,28px);align-items:start}
.frame-media{position:relative;display:block;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.frame-media img{width:100%;filter:grayscale(calc(1 - var(--sat)));transition:scale .6s var(--ease)}
.frame-media canvas{position:absolute;inset:0;width:100%;height:100%;filter:grayscale(calc(1 - var(--sat)))}
.js [data-resolve]:not(.is-done) img{opacity:0}
.frame:hover img{scale:1.03}
.frame-cap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:10px;color:var(--mute)}
.frame-cap .icon{width:16px;height:16px;color:var(--accent)}
.callout{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 28px;margin-top:clamp(56px,8vw,110px);padding:clamp(20px,3vw,36px);border:1px dashed var(--line-2);border-radius:var(--radius)}

/* ---------- Transmettre ---------- */
.pipeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2)}
.pipeline li{position:relative;padding:24px 24px 4px 0}
.pipeline li+li{padding-left:24px;border-left:1px solid var(--line)}
.pipeline li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.pipeline li+li::before{left:-5px}
.pipe-num{color:var(--dim)}
.pipeline h4{margin-top:8px}
.pipeline p{max-width:26em;margin-top:8px;font-size:.97rem;color:var(--mute)}

.cases{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(11,15,21,.8);overflow:hidden}
.case-tabs{display:flex;flex-direction:column;border-right:1px solid var(--line)}
.case-tab{display:flex;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-variation-settings:normal;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);transition:background-color .2s,color .2s}
.case-tab span{color:var(--dim)}
.case-tab:hover{color:var(--paper)}
.case-tab[aria-selected="true"]{background:var(--paper);color:var(--ink)}
.case-tab[aria-selected="true"] span{color:var(--ink)}
.case{padding:clamp(18px,2.6vw,36px)}
.case+.case{border-top:1px solid var(--line)}
.js .case+.case{border-top:0}
.case-service{color:var(--accent)}
.case h4{margin-top:10px}
.case-pitch{max-width:38em;margin-top:8px;color:var(--mute)}
.io{margin-top:20px;border-top:1px solid var(--line)}
.io-row{display:grid;grid-template-columns:9.6em minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.io dt{color:var(--dim)}
.io dd{min-height:1.55em}
.io-check{border-bottom:0}
.io-check dt,.io-check dd{color:var(--human)}

/* Les photos : rangées à température 0, de plus en plus dispersées quand elle monte. */
.prints{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.2vw,18px);padding-block:calc(var(--t)*34px)}
.print{position:relative;translate:calc(var(--dx,0)*var(--t)*1px) calc(var(--dy,0)*var(--t)*1px);rotate:calc(var(--r,0)*var(--t)*1deg);transition:translate .5s var(--ease),rotate .5s var(--ease)}
.print a{display:block;padding:calc(1px + var(--t)*6px);border-radius:calc(var(--radius)/3);background:var(--paper)}
.print img{width:auto;max-width:none;height:clamp(104px,11.6vw,172px);filter:grayscale(calc(1 - var(--sat)))}
.print:hover,.print:focus-within{z-index:2;translate:0 0;rotate:0deg}

.stat strong{display:block;font-size:clamp(3.6rem,7vw,7rem);font-weight:440;font-style:italic;line-height:.9;letter-spacing:-.04em;color:var(--accent)}
.stat p{max-width:30em;margin-top:12px}
.stat .source{margin-top:8px;color:var(--dim)}
.source a{text-decoration:underline;text-underline-offset:3px}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.topics a{display:inline-flex;padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--mono);font-variation-settings:normal;font-size:.72rem;letter-spacing:.04em;transition:background-color .2s,color .2s}
.topics a:hover{background:var(--paper);color:var(--ink)}

/* ---------- Portrait ---------- */
.portrait-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(28px,6vw,110px);align-items:start}
.portrait{position:relative;aspect-ratio:1;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--ink-2);overflow:hidden}
.portrait img,.portrait canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Un seul portrait : gris à froid, couleurs naturelles vers 0,7, saturées vers 1 ; en surchauffe, la version déformée prend le dessus. */
.p-base{filter:grayscale(calc(1 - var(--sat))) saturate(calc(1 + var(--push)*1.7)) contrast(calc(1 + var(--push)*.22))}
.p-fx{opacity:clamp(0,var(--x)*2.4,1)}
.dither{background:var(--ink-2);image-rendering:pixelated;opacity:clamp(0,(.19 - var(--t))*10,1)}
figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:10px;color:var(--mute)}
figcaption span:first-child{color:var(--accent)}
.prose{display:grid;gap:1.05em;max-width:36em;font-size:1.06em}
.prose .hint{margin-top:.4em}
.fiche{margin-top:1em;font-size:1rem}

/* ---------- Échange, pied de page ---------- */
.contact{background:linear-gradient(180deg,rgba(6,8,11,.88),rgba(6,8,11,.22) 42%,rgba(6,8,11,.4))}
.site-footer{padding:clamp(40px,6vw,80px) 0 112px;border-top:1px solid var(--line);background:rgba(6,8,11,.94)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px 24px;padding-bottom:clamp(24px,3.6vw,44px);border-bottom:1px solid var(--line)}
.wordmark-big{font-size:clamp(1.7rem,4.2vw,3.2rem);letter-spacing:-.03em}
.footer-top .tag{color:var(--dim)}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,.7fr)) minmax(0,1.3fr);gap:28px;padding-block:clamp(24px,3.6vw,44px)}
.footer-cols h2{margin-bottom:12px;color:var(--dim)}
.footer-cols li+li{margin-top:6px}
.footer-cols a{display:inline-flex;align-items:center;gap:8px;overflow-wrap:anywhere;transition:color .2s}
.footer-cols a:hover{color:var(--human)}
.footer-cols .icon{width:13px;height:13px;color:var(--accent)}
.colophon p{max-width:30em;font-size:.94rem;color:var(--mute)}
.colophon p+p{margin-top:6px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-variation-settings:normal;font-size:.72rem;color:var(--dim)}
.footer-bottom a{text-decoration:underline;text-underline-offset:4px}

.page-plain{min-height:70svh;padding-top:calc(var(--bar) + clamp(40px,7vw,96px))}
.legal{margin-top:clamp(32px,5vw,64px)}
.legal h2{margin-top:1.2em}
.notfound{align-items:center}

/* ---------- Fenêtres ---------- */
.dialog-open{overflow:hidden}
.media-dialog{width:min(1120px,94vw);max-width:none;max-height:94dvh;padding:0;border:1px solid var(--line-2);border-radius:calc(var(--radius) + 4px);background:var(--ink-2);color:var(--paper);overflow:auto;box-shadow:0 30px 100px rgba(0,0,0,.6)}
.media-dialog::backdrop,.palette::backdrop{background:rgba(6,8,11,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 12px 12px 20px}
.dialog-top h2{font-size:1.3rem;font-weight:480;letter-spacing:-.01em}
.dialog-close{display:grid;place-items:center;flex:none;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--human);color:var(--ink);cursor:pointer;transition:rotate .35s var(--ease),background-color .2s}
.dialog-close:hover{rotate:90deg;background:var(--paper)}
.dialog-close .icon{width:18px;height:18px}
.dialog-content{display:flex;justify-content:center;align-items:center;min-height:120px;background:#020304}
.dialog-content iframe{display:block;width:100%;max-height:72dvh;border:0}
.dialog-content img{max-width:100%;max-height:74dvh;object-fit:contain}
.dialog-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:14px 20px 18px}
.dialog-bottom p{max-width:70ch;font-size:.95rem;color:var(--mute)}
.dialog-bottom a{font-family:var(--mono);font-size:.76rem;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
.media-dialog[data-kind="booking"]{width:min(1040px,94vw)}
.media-dialog[data-kind="booking"] .dialog-content{background:#fff}
.media-dialog[data-kind="booking"] iframe{height:70dvh;min-height:420px}

.palette{width:min(640px,94vw);max-height:min(580px,84dvh);margin:11vh auto auto;padding:0;border:1px solid var(--line-2);border-radius:calc(var(--radius) + 4px);background:rgba(11,15,21,.97);color:var(--paper);overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.6)}
.palette[open]{display:flex;flex-direction:column}
.pal-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pal-prompt{font-family:var(--mono);font-weight:600;color:var(--human)}
.pal-input{flex:1;min-width:0;padding:4px 0;border:0;outline:0;background:none;font-family:var(--mono);font-size:1rem}
.pal-input::placeholder{color:var(--dim)}
.pal-close{padding:3px 7px;border:1px solid var(--line-2);border-radius:5px;background:none;font-family:var(--mono);font-size:.66rem;color:var(--mute);cursor:pointer}
.pal-list{flex:1;min-height:0;padding:6px;overflow-y:auto}
.pal-item{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:none;text-align:left;cursor:pointer}
.pal-item:hover,.pal-item.is-active{background:rgba(243,239,230,.09)}
.pal-item.is-active .pal-q{color:var(--human)}
.pal-q{font-size:1.04rem}
.pal-a{font-family:var(--mono);font-variation-settings:normal;font-size:.7rem;color:var(--mute);white-space:nowrap}
.pal-note,.pal-empty{padding:10px 16px;border-top:1px solid var(--line);font-family:var(--mono);font-variation-settings:normal;font-size:.68rem;line-height:1.5;color:var(--dim)}
.pal-empty{color:var(--mute)}

/* ---------- Mouvement ---------- */
.will-reveal{opacity:0;translate:0 26px}
.will-reveal.is-in{opacity:1;translate:0 0;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.is-flash .said{color:var(--human)}
@keyframes blink{50%{opacity:0}}
@keyframes tok-in{from{opacity:0;translate:0 .1em}}
@media (prefers-reduced-motion:no-preference){
  .caret{animation:blink 1.1s steps(1) infinite}
  .hero .tok{animation:tok-in .55s var(--ease) backwards}
  .hero .tok-1{animation-delay:.2s}
  .hero .tok-2{animation-delay:.55s}
  .hero .tok-3{animation-delay:.85s}
  .hero-follow{animation:tok-in .7s 1.2s var(--ease) backwards}
  .hero-side{animation:tok-in .7s 1.4s var(--ease) backwards}
  .sys-gate.is-waiting>path:first-child{animation:blink 1.2s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Écrans plus étroits ---------- */
@media (max-width:1100px){
  .hero{align-items:start}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-side{max-width:440px}
  .sim-stage{grid-template-columns:minmax(0,1fr)}
  .sim-graph{border-right:0;border-bottom:1px solid var(--line)}
  .sim-console{min-height:260px}
  .sim-source{grid-template-columns:minmax(0,1fr)}
  .scenario{border-right:0;border-bottom:1px solid var(--line)}
  .make{grid-template-columns:minmax(0,1fr) auto}
  .make-kind,.make strong,.make-text{grid-column:1}
  .make .icon{grid-column:2;grid-row:1 / span 3;align-self:center}
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .colophon{grid-column:1 / -1}
}
@media (max-width:860px){
  .context{display:none}
  .js .topnav{display:none}
  .js .menu-btn{display:inline-flex;align-items:center}
  html:not(.js) .topbar{position:static;flex-wrap:wrap;height:auto;padding-block:12px}
  html:not(.js) .hero{padding-top:28px}
  .block-head,.block-split,.portrait-grid{grid-template-columns:minmax(0,1fr)}
  .block-head{align-items:start}
  .pipeline{grid-template-columns:minmax(0,1fr);border-top:0;border-left:1px solid var(--line-2)}
  .pipeline li,.pipeline li+li{padding:0 0 26px 24px;border-left:0}
  .pipeline li::before,.pipeline li+li::before{left:-5px;top:6px}
  .cases{grid-template-columns:minmax(0,1fr)}
  .case-tabs{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .case-tab{flex:none;border-bottom:0;border-right:1px solid var(--line)}
  .frames{grid-template-columns:minmax(0,1fr)}
  .portrait-fig{max-width:460px}
  .sys-label{font-size:25px}
  .sys-sub,.sys-tiny{display:none}
  .sys-glyph{font-size:15px}
}
@media (max-width:700px){
  .turn{grid-template-columns:minmax(0,1fr)}
  .turn>.who{padding-top:0;margin-bottom:6px}
  .params{min-height:50px}
  .param{padding:0 12px}
  .param-t{padding-left:16px}
  .param-name .long,.param-word,.param-seed .param-name,.param-seed .param-value,.param-ask .long,kbd{display:none}
  .param-name .short{display:inline}
  .param-ask{padding:0 16px}
  .coach{white-space:normal;width:max-content;max-width:calc(100vw - 48px);text-align:center}
  .io-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .trace li{grid-template-columns:minmax(0,1fr);gap:0}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-cols>div{grid-column:1 / -1}
  .dialog-bottom{flex-direction:column;gap:10px}
  .print img{height:clamp(88px,26vw,150px)}
}

/* ---------- Évolution : le plus récent d'abord ---------- */
.evo{position:relative;padding:clamp(22px,3vw,38px) 0 clamp(26px,3.4vw,44px);border-block:1px solid var(--line);background:rgba(6,8,11,.94)}
.evo-hint{font-family:var(--mono);font-variation-settings:normal;font-size:.76rem;color:var(--mute)}
.evo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}
.evo-step{position:relative;display:grid;gap:4px;padding:18px 18px 0 0;border-top:1px solid var(--line-2)}
.evo-step::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--dim)}
.evo-step[aria-current]::before{background:var(--human);box-shadow:0 0 0 4px rgba(108,228,208,.2)}
.evo-when{color:var(--mute)}
.evo-step[aria-current] .evo-when{color:var(--human)}
.evo-what{font-size:clamp(1.3rem,2.4vw,2.2rem);font-weight:480;line-height:1.05;letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" var(--soft),"WONK" var(--wonk);transition:color .2s}
.evo-step:hover .evo-what{color:var(--accent)}

/* ---------- Deuxième cerveau ---------- */
.brain{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:start}
.brain-stage{position:sticky;top:calc(var(--bar) + 20px);aspect-ratio:4/3;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(11,15,21,.82);overflow:hidden}
.brain-canvas{width:100%;height:100%}
.brain-side{display:grid;gap:14px}
.brain-side>p:not(.hint){max-width:34em}
.brain-legend{margin-top:4px;border-top:1px solid var(--line)}
.region{display:grid;grid-template-columns:7.4em minmax(0,1fr);gap:2px 12px;align-items:baseline;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;transition:padding-left .25s var(--ease)}
.region-name{font-size:1.12rem;font-weight:480;transition:color .2s}
.region-lobe{color:var(--dim)}
.region-text{grid-column:1 / -1;font-size:.92rem;line-height:1.45;color:var(--mute)}
.region:hover,.region.is-active{padding-left:10px}
.region:hover .region-name,.region.is-active .region-name{color:var(--accent)}
.region[aria-pressed="true"] .region-lobe{color:var(--human)}
.region[data-region="pour-pierre"] .region-name{color:var(--human)}
html:not(.js) .brain{grid-template-columns:minmax(0,1fr)}
html:not(.js) .brain-stage{display:none}

/* ---------- Trois modèles ---------- */
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.model{display:flex;flex-direction:column;padding:22px;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(11,15,21,.82)}
.model-id{color:var(--actor)}
.model h4{margin-top:10px}
.model-role{margin-top:2px;font-style:italic;color:var(--mute)}
.model-text{margin-top:10px;font-size:.95rem;color:var(--mute)}
.model-agents{flex:1;display:grid;align-content:start;margin-top:16px;border-top:1px solid var(--line)}
.model-agents li{position:relative;display:grid;gap:1px;padding:9px 0 9px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-variation-settings:normal;font-size:.78rem;line-height:1.45}
.model-agents li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--actor)}
.agent-note{color:var(--dim)}
.model-harness{margin-top:14px;font-family:var(--mono);font-variation-settings:normal;font-size:.74rem;line-height:1.5;color:var(--mute)}
.model-harness span{display:block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}

.harness{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(16px,3vw,48px);margin-bottom:clamp(22px,3vw,40px)}
.harness-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;border-top:1px solid var(--line)}
.harness-item{display:grid;align-content:start;gap:4px;padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.harness-item strong{font-size:1.12rem;font-weight:480}
.harness-item span{font-size:.92rem;line-height:1.45;color:var(--mute)}
.rules{align-content:start;border-top:1px solid var(--line)}
.rule{display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:8px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:.98rem}
.rule-num{color:var(--human)}

.sim-key{display:flex;flex-wrap:wrap;gap:6px 22px;padding:2px 6px 0;color:var(--dim);font-size:.66rem}
.sim-key span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.key-model{width:9px;height:9px;border:1.3px solid var(--mute);border-radius:50%}
.key-gate{width:8px;height:8px;border:1.3px solid var(--human);rotate:45deg}
.sys-sat{fill:var(--mute)}
#node-hermes .sys-sat{fill:var(--mid)}
#node-codex .sys-sat{fill:var(--cold)}
#node-claude .sys-sat{fill:var(--hot)}
.sys-sats{transform-box:fill-box;transform-origin:center}
@keyframes turn{to{transform:rotate(360deg)}}

/* ---------- Parcours ---------- */
.parcours{border-top:1px solid var(--line)}
.parcours li{display:grid;grid-template-columns:8.4em minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.when{color:var(--accent)}
.parcours li:first-child .when{color:var(--human)}

/* ---------- Surchauffe : au-delà de 1, le site se dérègle ---------- */
.is-hot .h-xxl,.is-hot .h-xl,.is-hot .h-l,.is-hot .evo-what,.is-hot .film-title{text-shadow:calc(var(--x)*-.03em) 0 0 rgba(108,228,208,.75),calc(var(--x)*.03em) 0 0 rgba(255,111,78,.75)}
.is-hot :is(.panel,.model,.sim,.cases,.brain-stage,.portrait,.frame,.callout,.stat,.harness-item,.rule,.make,.film,.evo-step,.btn,.topics a){rotate:calc(var(--r2,0)*var(--x)*1deg)}
.is-hot body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px);opacity:calc(var(--x)*.6)}
.is-tripped body::before{content:"";position:fixed;inset:0;z-index:45;pointer-events:none;background:var(--amber);opacity:0;animation:trip .9s ease-out}
@keyframes trip{from{opacity:.32}to{opacity:0}}
@keyframes wob{0%,100%{transform:skewX(calc(var(--x)*-1.8deg))}50%{transform:skewX(calc(var(--x)*1.8deg))}}
[data-hallu]{position:relative}
.is-hallu,.is-hallu em{color:transparent!important;text-shadow:none!important}
.is-hallu::after{content:attr(data-hallu);position:absolute;inset:0 auto auto 0;width:100%;font-style:italic;color:var(--amber);text-shadow:-.03em 0 0 rgba(108,228,208,.8),.03em 0 0 rgba(255,111,78,.8)}
@media (prefers-reduced-motion:no-preference){
  .sys-sats{animation:turn 46s linear infinite}
  .is-hot .h-xl,.is-hot .h-l{animation:wob 3.1s ease-in-out infinite}
}

@media (max-width:1100px){
  .brain{grid-template-columns:minmax(0,1fr)}
  .brain-stage{position:relative;top:0}
}
@media (max-width:860px){
  /* Ces règles viennent après les grilles définies plus haut dans ce bloc, sinon elles seraient écrasées. */
  .models,.harness{grid-template-columns:minmax(0,1fr)}
  .harness-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .evo-steps{grid-template-columns:minmax(0,1fr);margin-top:14px}
  .evo-step{padding:12px 0 14px 22px;border-top:0;border-left:1px solid var(--line-2)}
  .evo-step::before{left:-5px;top:16px}
  .harness-list{grid-template-columns:minmax(0,1fr)}
  .parcours li{grid-template-columns:minmax(0,1fr);gap:2px}
  .brain-stage{aspect-ratio:1/1}
}

/* ---------- Archives : les versions précédentes du site ---------- */
.versions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(14px,2vw,28px);margin-top:clamp(40px,6vw,88px);border-top:1px solid var(--line-2)}
.version{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:26px}
.version::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--dim)}
.version.is-current::before{background:var(--human);box-shadow:0 0 0 4px rgba(108,228,208,.2)}
.version-thumb{display:block;width:100%;aspect-ratio:16/10;margin-bottom:10px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--ink-2);overflow:hidden}
.version-thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;filter:grayscale(calc(1 - var(--sat)));transition:scale .6s var(--ease)}
a.version-thumb:hover img{scale:1.03}
.version-when{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--accent)}
.version-live{padding:2px 8px;border-radius:999px;background:var(--human);color:var(--ink);font-size:.62rem}
.version-tool{font-family:var(--mono);font-variation-settings:normal;font-size:.8rem}
.version-tool span{margin-right:.7em;color:var(--dim)}
.version-text{max-width:30em;font-size:.95rem;color:var(--mute)}
.version .btn{margin-top:8px}

/* Visionneuse : un bandeau, et l'ancienne version dans un cadre. Aucune animation ni réglage ici. */
html.is-archive{--t:.7;--x:0}
.is-archive,.is-archive body{height:100%}
.is-archive body{display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;background:var(--ink);overflow:hidden}
.arch-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(14px,2vw,28px);min-height:54px;padding:8px var(--gutter);border-bottom:1px solid var(--line-2);background:var(--ink)}
.arch-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-right:auto;font-family:var(--mono);font-variation-settings:normal;font-size:.76rem}
.arch-tag{padding:2px 8px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-size:.64rem}
.arch-info strong{font-family:var(--serif);font-size:1.15rem;font-weight:480;line-height:1.2}
.arch-meta{color:var(--mute)}
.arch-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(12px,1.6vw,22px)}
.arch-nav .link{font-size:.74rem}
.arch-frame{width:100%;height:100%;border:0;background:#fff}
@media (max-width:1000px){.arch-bar .wordmark,.arch-solo{display:none}}
@media (max-width:860px){
  .versions{grid-template-columns:minmax(0,1fr);border-top:0;border-left:1px solid var(--line-2)}
  .version{padding:0 0 clamp(32px,8vw,48px) 22px}
  .version::before{left:-5px;top:6px}
  .version-thumb{max-width:520px}
}
@media (max-width:600px){.arch-hop{display:none}}

/* généré par build.mjs */
.probs li:nth-child(1){--p:69.9%}.probs li:nth-child(2){--p:16.8%}.probs li:nth-child(3){--p:7.1%}.probs li:nth-child(4){--p:4.0%}.probs li:nth-child(5){--p:1.5%}.probs li:nth-child(6){--p:0.7%}