:root{--bg:#e6ebee;--ink:#0a0d13;--mute:#505a68;--line:#0a0d1326;--spirit:#0a8a88;--oubli:#6b2fe0;--panel:#d5dde2;--serif:"Shippori Mincho","Hiragino Mincho ProN",Georgia,serif;--sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#0a0d13;--ink:#e8edf0;--mute:#9aa5b4;--line:#e8edf026;--spirit:#4fe0db;--oubli:#a98bff;--panel:#131824}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1rem/1.65 var(--sans);overflow-x:hidden;position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 0,color-mix(in srgb,var(--oubli) 14%,transparent),transparent 55%)}
a{color:inherit}:focus-visible{outline:3px solid var(--spirit);outline-offset:4px}
.top{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 2rem;padding:.9rem clamp(1.2rem,5vw,4rem);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font:800 1.1rem var(--serif);text-decoration:none;margin-right:auto}.logo b{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;background:var(--ink);color:var(--bg);margin-right:.4rem}
nav{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
nav a{text-decoration:none;color:var(--mute);padding:.2rem 0;border-bottom:2px solid transparent;font-weight:500}
nav a:hover{color:var(--ink)}nav a[aria-current]{color:var(--ink);border-color:var(--spirit)}
button{font:700 .95rem var(--sans);color:var(--ink);background:none;border:1.5px solid var(--ink);border-radius:0;padding:.55rem 1rem;cursor:pointer}
button:hover,button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
button.solid{background:var(--ink);color:var(--bg)}button.solid:hover{background:var(--oubli);border-color:var(--oubli);color:#fff}
.kj{position:fixed;right:clamp(.6rem,3vw,3rem);top:6rem;writing-mode:vertical-rl;font:800 clamp(5rem,15vw,13rem)/1 var(--serif);color:var(--ink);opacity:.06;pointer-events:none;z-index:0}
main{position:relative;z-index:1}
section{padding:clamp(2.5rem,6vw,5rem) clamp(1.2rem,5vw,4rem);max-width:76rem}
.tag{font-weight:700;color:var(--spirit);margin:0 0 1rem;letter-spacing:.02em}
h1{font:800 clamp(2.6rem,8vw,5.5rem)/1 var(--serif);margin:0 0 1.5rem;letter-spacing:-.02em}
h2{font:800 1.5rem/1.2 var(--serif);margin:0 0 .6rem}
p{margin:0 0 1rem;max-width:38rem}.lede{font-size:1.3rem;line-height:1.55}
.hero{padding-top:clamp(2rem,6vw,5rem)}
.big{font:800 clamp(5.5rem,27vw,21rem)/.85;margin:0;letter-spacing:-.04em;color:var(--ink);cursor:pointer;filter:url(#dis);user-select:none}
.sub{font:800 clamp(1.4rem,4vw,2.4rem) var(--serif);margin:1rem 0 1.4rem;color:var(--oubli)}
.k{color:var(--oubli);font-weight:700;transition:opacity 1.6s,filter 1.6s}.oubli .k{opacity:.08;filter:blur(6px)}
.wide{padding-top:0}
.rows a{display:grid;grid-template-columns:5rem 1fr;gap:0 1.5rem;align-items:center;text-decoration:none;padding:1.3rem 0;border-top:1px solid var(--ink);transition:padding .25s,background .25s}
.rows a:last-child{border-bottom:1px solid var(--ink)}
.rows a:hover{padding-left:1rem;background:var(--panel)}
.rows i{grid-row:span 2;font:800 3.6rem/1 var(--serif);font-style:normal;color:var(--spirit)}
.rows h2{margin:0}.rows p{margin:0;color:var(--mute)}
.head h1{margin-bottom:1rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:3rem}
.fiche{margin:0;border-top:3px solid var(--ink)}
.fiche dt{margin-top:1rem;color:var(--mute);font-size:.95rem;font-weight:500}.fiche dd{margin:0;padding-bottom:.9rem;border-bottom:1px solid var(--line);font-weight:500}
.list{padding:0;list-style:none;margin:0 0 2rem}.list li{padding:.7rem 0 .7rem 1.4rem;border-bottom:1px solid var(--line);position:relative}
.list li::before{content:"";position:absolute;left:0;top:1.3rem;width:.6rem;height:.6rem;background:var(--spirit)}
.tl{list-style:none;margin:0;padding:0 clamp(1.2rem,5vw,4rem) 4rem;max-width:76rem}
.tl li{display:grid;grid-template-columns:6rem 1fr;gap:1rem;padding:1.6rem 0;border-top:1px solid var(--ink)}
.tl b{font:800 5.5rem/.9 var(--serif);color:transparent;-webkit-text-stroke:2px var(--spirit)}
.tl p{margin:0}
.quotes{display:grid;gap:2.2rem}
.temoin{margin:0;padding:0 0 0 1.6rem;border-left:6px solid var(--oubli);cursor:pointer}
.temoin p{font:500 clamp(1.4rem,3.4vw,2.2rem)/1.35 var(--serif);max-width:44rem;transition:opacity 2.2s,filter 2.2s}
.temoin cite{color:var(--mute);font-style:normal;font-size:.95rem;font-weight:500}
.temoin.gone p{opacity:.08;filter:blur(7px)}
.hyp{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;background:var(--ink);border:1px solid var(--ink)}
.hyp article{background:var(--bg);padding:1.6rem}.hyp article:hover{background:var(--panel)}.hyp p{margin:0;color:var(--mute)}
footer{position:relative;z-index:1;padding:2rem clamp(1.2rem,5vw,4rem) 3rem;color:var(--mute);font-size:.9rem;border-top:1px solid var(--line)}footer p{max-width:none;margin:0}
@media (max-width:34rem){.tl li{grid-template-columns:3.4rem 1fr}.tl b{font-size:3.4rem}.rows a{grid-template-columns:3.4rem 1fr}.rows i{font-size:2.6rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}
