/* ============================================================
   LIRE GRAEBER — le socle, partagé par toutes les pages.
   4e PASSE « LA RÉSERVE VIVANTE » (26 oct. 2026) : la revue (3e passe) a
   été jugée « sans DA, sans âme » ; on revient à la nuit de la réserve et
   à une page animée à la manière de Lire Marx (scène WebGL, étagère,
   frise, bandeau…), en gardant de la revue la rigueur des filets, de
   l'échelle et des tableaux. Les surtitres reviennent (Lire Marx en a).
   Historique — refonte « REVUE » (26 oct. 2026). Le propriétaire jugeait l'identité
   « réserve » encore « site IA vibe codé ». Règles reprises de la charte
   GEO Invader (atum-geo/DESIGN.md) et de revues de référence (The Public
   Domain Review, le Rijksmuseum) :
   - AUCUN surtitre au-dessus d'un titre ; une rubrique = un filet pleine
     largeur, son titre à gauche, un lien à droite ;
   - aucun mot coloré dans un titre ; la couleur ne marque que les liens
     et l'état actif ;
   - une seule famille à empattements (Newsreader variable, taille optique)
     + une linéale d'interface (Schibsted Grotesk) ; pas de mono ;
   - pas de grain, pas de halo, pas de dégradé de fond ; des planches
     photographiques sur fond uni, avec leur légende (« Fig. ») ;
   - une échelle typographique fixe (--t-*), jamais sous 13 px ;
   - tableaux plutôt que piles de cartes pour les catalogues.
   Mis en cache : toute modification se BUMPE dans les ?v= (index.html, et
   V.site_css dans tools/gen-site.mjs).
   ============================================================ */

/* ---------- la nuit, par défaut ; le jour en alternative ---------- */
:root{
  /* 6e passe, d'après landonorris.com : un olive de nuit, un citron vif
     pour l'action et le mot mis en avant, un abricot pour les objets ;
     les sections « claires » passent au grège (data-ton, plus bas) */
  --fond:#1f231a;
  --vitrine:#282d21;
  --vitrine-2:#323829;
  --texte:#eeecdc;       /* 13,5:1 */
  --trait:#cac8b3;       /* 9,5:1 */
  --muted:#9fa28d;       /* 6,1:1 */
  --accent:#d4ef4e;      /* le citron — 12,4:1 */
  --accent-2:#f0a070;    /* l'abricot — 7,6:1 */
  --sur-accent:#1f231a;
  --lumiere:255,214,170;
  --filet:rgba(238,236,220,.12); --filet-fort:rgba(238,236,220,.28);
  --fond-rgb:31,35,26; --texte-rgb:238,236,220; --accent-rgb:212,239,78; --ombre-rgb:0,0,0;
  --bois:#8b6a45; --bois-clair:#a7845a; --bois-ombre:#5d4528; --entaille:#120d09;
  --f-grot:'Archivo',system-ui,sans-serif;
  --f-titre:'Young Serif',Georgia,serif;
  --f-texte:'Literata',Georgia,serif;
  --f-ui:'Archivo',system-ui,sans-serif;
  --f-lecture:var(--f-texte); --f-inv:var(--f-ui);
  --t-display:clamp(64px,13vw,220px);
  --t-h1:clamp(38px,5vw,72px);
  --t-h2:clamp(38px,5.2vw,80px);
  --t-h3:24px;
  --t-lead:20px;
  --t-body:18px;
  --t-small:15.5px;
  --t-meta:13.5px;
  --gutter:clamp(16px,4.5vw,64px);
  --mesure:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sortie:cubic-bezier(.19,1,.22,1);   /* l'expo-out des entrées */
  --rideau:cubic-bezier(.77,0,.18,1);   /* le rideau des images */
  color-scheme:dark;
}
html[data-mode="jour"],
html[data-mode="nuit"][data-ton="clair"]{
  --fond:#dfdccf; --vitrine:#ebe8dd; --vitrine-2:#d3cfc0;
  --texte:#1f231a; --trait:#454a3b; --muted:#5e6352;
  --accent:#4a6410; --accent-2:#9b4a1f; --sur-accent:#f4f2e6;
  --filet:rgba(31,35,26,.13); --filet-fort:rgba(31,35,26,.32);
  --fond-rgb:223,220,207; --texte-rgb:31,35,26; --accent-rgb:74,100,16; --ombre-rgb:60,50,30;
  --bois:#c9a77a; --bois-clair:#dcc19a; --bois-ombre:#9c7a4f; --entaille:#1f1812;
  color-scheme:light;
}
/* le citron reste le fond des boutons pleins, même sur le grège */
html[data-mode="jour"] .btn-plein,html[data-ton="clair"] .btn-plein{--accent-fond:#c9e83a}
body{transition:background-color .6s var(--ease),color .6s var(--ease)}
/* les textes qui portent leur propre couleur suivent le même fondu que le fond,
   sinon l'accent change avant le fond (lime sur greige un instant) */
:where(.sec-h,.sec-label,.mis,.lede,.meta,.muted,p,dt,dd,th,td,figcaption,small){transition:color .6s var(--ease)}
html.bascule *,html.bascule *::before,html.bascule *::after{transition:none!important}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--fond);color:var(--texte);font:400 var(--t-body)/1.6 var(--f-texte);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
sup{font-size:max(11px,.72em);line-height:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:12px;top:-60px;z-index:300;background:var(--texte);color:var(--fond);
  padding:10px 16px;font:500 15px var(--f-ui);text-decoration:none}
.evitement:focus{top:12px}
.mesure{max-width:var(--mesure);margin:0 auto;padding:0 var(--gutter)}
::selection{background:rgba(var(--accent-rgb),.35);color:var(--texte)}

/* ---------- la barre : le titre de la revue, et trois rubriques ---------- */
.barre{position:sticky;top:0;z-index:100;background:rgba(var(--fond-rgb),.78);transition:background-color .8s var(--ease);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--filet)}
.barre-in{max-width:var(--mesure);margin:0 auto;padding:0 var(--gutter);height:60px;display:flex;align-items:center;gap:28px}
.marque{display:inline-block;padding:8px 0;text-decoration:none;font:650 21px/1 var(--f-grot);letter-spacing:-.025em;white-space:nowrap}
.marque i{font-style:normal;font-family:var(--f-titre);font-weight:400;font-stretch:100%;text-transform:none;color:var(--accent);letter-spacing:0}
.barre nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.barre nav a{white-space:nowrap;font:500 15px/1 var(--f-grot);letter-spacing:-.005em;text-decoration:none;color:var(--trait);padding:10px 10px}
.barre nav a:hover{color:var(--texte)}
.barre nav a[aria-current="page"]{color:var(--texte);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:1px}
.mode{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--filet-fort);
  background:transparent;color:var(--texte);cursor:pointer;margin-left:8px}
.mode:hover{border-color:var(--texte)}
.mode svg{width:17px;height:17px}
@media (max-width:760px){.barre nav a.secondaire{display:none}}
@media (max-width:480px){.barre nav a:not(:first-child){display:none}.marque{font-size:20px}}

/* ---------- la rubrique : filet, titre, lien ----------
   Remplace les surtitres. Le filet est pleine largeur de la mesure. */
.rubrique{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-top:1px solid var(--filet-fort);padding-top:18px;margin:0 0 clamp(32px,4vw,48px)}
.rubrique h2{font:600 clamp(28px,3.2vw,46px)/1.02 var(--f-grot);letter-spacing:-.03em;margin:0}
.rubrique a{display:inline-block;padding:5px 0;font:400 var(--t-meta)/1.3 var(--f-ui);color:var(--trait);text-decoration:none;white-space:nowrap}
.rubrique a:hover{color:var(--accent)}
.sec{padding-top:clamp(64px,9vw,128px)}

/* ---------- le surtitre (Lire Marx en a ; il revient, en linéale) ---------- */
.sec-label{display:block;font:550 15px/1.4 var(--f-grot);letter-spacing:-.005em;color:var(--accent);margin:0 0 18px}
.sec-h{font:600 var(--t-h2)/1.02 var(--f-grot);letter-spacing:-.035em;margin:0 0 28px;max-width:18ch;text-wrap:balance}
.mis{font-family:var(--f-titre);font-weight:400;font-stretch:100%;color:var(--accent);letter-spacing:-.02em}
.sec-h em{font-style:normal;color:var(--accent)}
.sec-lede{font:400 var(--t-lead)/1.5 var(--f-texte);color:var(--trait);max-width:56ch;margin:0;text-wrap:pretty}

/* ---------- textes ---------- */
.lede{font:400 var(--t-lead)/1.5 var(--f-texte);color:var(--trait);max-width:52ch;margin:0;text-wrap:pretty}
.prose{font:400 var(--t-body)/1.65 var(--f-texte);max-width:64ch}
.prose p{margin:0 0 1em}
.meta{font:400 var(--t-meta)/1.45 var(--f-ui);color:var(--muted)}
.lien{display:inline-block;padding:4px 0 3px;font:500 15px/1.3 var(--f-ui);color:var(--accent);text-decoration:none;box-shadow:inset 0 -1px 0 rgba(var(--accent-rgb),.35)}

/* ---------- boutons ----------
   D'après landonorris.com : des pilules vives, en capitales serrées. Le
   plein (citron) : la flèche dans un disque sombre qui glisse au survol, le
   bouton se soulève. Le trait : un contour que remplit un balayage de
   gauche à droite au survol. Pression : un enfoncement léger. */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 8px 0 24px;border-radius:999px;overflow:hidden;isolation:isolate;
  font:600 15.5px/1 var(--f-grot);letter-spacing:-.005em;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--ease),translate .6s var(--sortie),box-shadow .35s var(--ease),border-color .3s}
.btn i{text-transform:none;letter-spacing:.01em;font:italic 600 15px/1 var(--f-texte)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn .fl{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;font:600 16px/1 var(--f-grot);letter-spacing:0;transition:transform .45s var(--ease)}
.btn:hover .fl{transform:translateX(3px) rotate(-45deg)}
.btn-plein{background:var(--accent-fond,var(--accent));color:#1f231a;box-shadow:0 12px 30px -14px rgba(var(--accent-rgb),.9)}
.btn-plein .fl{background:#1f231a;color:var(--accent-fond,#d4ef4e)}
.btn-plein:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(var(--accent-rgb),.95)}
.btn-trait{color:var(--texte);border-color:var(--filet-fort);padding-right:24px}
.btn-trait::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--texte);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.btn-trait:hover{color:var(--fond);border-color:var(--texte)}
.btn-trait:hover::before{transform:scaleX(1)}

/* les liens de texte : le soulignement se trace au survol */
.lien{background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;transition:background-size .45s var(--ease)}
.lien:hover{background-size:100% 1px}

/* ---------- la planche : un objet photographié sur fond uni ----------
   L'image remplit un cadre au ratio fixe, sur --vitrine ; la légende vient
   dessous, en linéale, avec son numéro de figure. Pas d'ombre de décor. */
.planche{margin:0}
.planche .cadre{position:relative;background:var(--vitrine);aspect-ratio:var(--ratio,4/5);display:grid;place-items:center;overflow:hidden}
.planche .cadre img{max-width:var(--remplir,72%);max-height:var(--remplir,72%);width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(var(--ombre-rgb),.45))}
.planche .cadre img.photo{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;filter:none}
.planche figcaption{margin-top:12px;font:400 var(--t-meta)/1.5 var(--f-ui);color:var(--muted);max-width:60ch}
.planche figcaption i{color:var(--trait)}
.planche figcaption b{font-weight:500;color:var(--trait)}

/* ---------- l'état d'une œuvre (remplace les pastilles) ---------- */
.badge{font:400 var(--t-meta)/1.3 var(--f-ui);color:var(--muted);white-space:nowrap}
.badge-libre{color:var(--accent)}

/* ---------- les tableaux du catalogue ---------- */
.table{width:100%;border-collapse:collapse;font:400 var(--t-small)/1.45 var(--f-ui)}
.table caption{caption-side:top;text-align:left;font:600 17px/1.2 var(--f-grot);letter-spacing:-.01em;color:var(--texte);padding:28px 0 10px}
.table th{font:500 var(--t-meta)/1.3 var(--f-ui);color:var(--muted);text-align:left;padding:10px 16px 10px 0;border-bottom:1px solid var(--filet-fort)}
.table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--filet);vertical-align:baseline}
.table .an{font-variant-numeric:tabular-nums;color:var(--muted);width:4.5em}
.table .titre{font:400 18.5px/1.3 var(--f-titre)}
.table .titre a{display:inline-block;padding:2px 0;text-decoration:none;color:var(--texte)}
.table td a.meta{display:inline-block;padding:4px 0}
.table .titre a:hover{color:var(--accent)}
.table .titre small{display:block;margin-top:3px;font:400 14.5px/1.35 var(--f-ui);color:var(--muted)}
.table .etat{text-align:right;white-space:nowrap}
.table tbody tr{transition:background .2s}
.table tbody tr:hover{background:var(--vitrine)}
@media (max-width:700px){
  .table thead{display:none}
  .table tr{display:grid;grid-template-columns:4em 1fr;padding:12px 0;border-bottom:1px solid var(--filet)}
  .table td{border:0;padding:2px 0}
  .table .etat{grid-column:2;text-align:left}
}

/* ---------- l'apparition : un fondu, une seule fois ---------- */
.js-anim .reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--sortie),transform 1.3s var(--sortie);transition-delay:.15s}
.js-anim .reveal.vu{opacity:1;transform:none}

/* ---------- pied ---------- */
.pied{border-top:1px solid var(--filet-fort);margin-top:clamp(64px,9vw,128px);padding:40px 0 56px;color:var(--trait);font:400 var(--t-small)/1.55 var(--f-ui)}
.pied-in{max-width:var(--mesure);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
.pied h2{font:500 var(--t-meta)/1 var(--f-ui);color:var(--muted);margin:0 0 14px}
.pied p{margin:0 0 8px;max-width:52ch}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin:0 0 6px}
.pied a{color:var(--texte);text-decoration:none}
.pied a:hover{color:var(--accent)}
.pied .marque{font-size:21px;margin-bottom:10px;color:var(--texte)}
.pied .credits{grid-column:1 / -1;max-width:none;border-top:1px solid var(--filet);padding-top:18px;font-size:var(--t-meta);color:var(--muted)}
.pied .credits a{color:var(--trait);text-decoration:underline;text-decoration-color:var(--filet-fort);text-underline-offset:2px}
@media (max-width:760px){.pied-in{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ---------- le fond animé : la poussière dans le faisceau (fond.js) ----------
   Le canvas est fixe, derrière tout ; le contenu passe devant. */
#poussiere{position:fixed;inset:0;z-index:0;pointer-events:none}
.barre{z-index:100}
main,.pied,.fil{position:relative;z-index:1}

/* ---------- les titres montent ligne à ligne, de derrière un masque (site.js) ----------
   Une seule courbe pour tout ce qui entre (--sortie) ; le masque garde de la
   marge pour les accents des capitales et les jambages. Avant le découpage,
   le titre est tenu invisible (sinon il clignote : visible, puis masqué). */
.ligne{display:block;padding:.14em 0 .1em;margin:-.14em 0 -.1em;clip-path:inset(0 -100vw)}   /* masque en haut et en bas seulement : les mots peuvent s'écarter */
.ligne-in{display:block}
.mot{white-space:nowrap}
.js-anim :is([data-lignes],.sec-h,.fin-h,.o-h,.c-h):not(.decoupe){visibility:hidden}
.js-anim .ligne-in{transform:translate3d(0,112%,0);transition:transform 1.2s var(--sortie);transition-delay:calc(var(--k,0) * 90ms + var(--attente,0ms))}
.js-anim .dit .ligne-in{transform:none}

/* ---------- les images se dévoilent : le rideau se lève, l'image se resserre ---------- */
.js-anim .revele{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--rideau)}
.js-anim .revele.vu{clip-path:inset(0)}
.js-anim .revele img{scale:1.22;transition:scale 1.9s var(--sortie),transform .9s var(--ease),filter .6s}
.js-anim .revele.vu img{scale:1}

/* ---------- les rangées de tableau arrivent l'une après l'autre ---------- */
.js-anim .table tbody tr{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease),transform .6s var(--ease),background .2s;transition-delay:calc(var(--k,0) * 60ms),calc(var(--k,0) * 60ms),0s}
.js-anim .table.dit tbody tr{opacity:1;transform:none}

/* ---------- le texte qui roule (site.js) : au survol, le libellé monte,
   sa copie arrive par-dessous ---------- */
.roule{position:relative;display:inline-grid;overflow:hidden;vertical-align:top;padding:.14em 0;margin:-.14em 0}
.roule-in{grid-area:1 / 1;display:block;transition:transform .6s var(--sortie)}
.roule-copie{transform:translateY(120%)}
.btn:hover .roule-in,.btn:focus-visible .roule-in,.barre nav a:hover .roule-in,.barre nav a:focus-visible .roule-in{transform:translateY(-120%)}
.btn:hover .roule-copie,.btn:focus-visible .roule-copie,.barre nav a:hover .roule-copie,.barre nav a:focus-visible .roule-copie{transform:none}

/* ---------- la bulle qui suit le pointeur (site.js, scene.js) ---------- */
.bulle{position:fixed;left:0;top:0;z-index:900;pointer-events:none;padding:10px 15px;border-radius:999px;background:#d4ef4e;color:#1f231a;
  font:600 14.5px/1 var(--f-grot);letter-spacing:-.005em;white-space:nowrap;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
  opacity:0;scale:.5;transform-origin:0 0;transition:opacity .25s ease,scale .45s var(--sortie);will-change:transform}
.bulle.vue{opacity:1;scale:1}
.vise-objet,.vise-objet body{cursor:pointer}

/* ---------- la trame au survol (site.js, [data-trame]) ---------- */
.trame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* ---------- le double bandeau (site.js) : deux lignes en sens contraires,
   serif citron et linéale, dont la vitesse suit l'élan du défilement ;
   l'accueil (notions de Graeber) et les livres (leurs mots) ---------- */
.bandeaux{position:relative;z-index:1;padding:clamp(28px,4vw,48px) 0;overflow:hidden}
.bandeau{overflow:hidden;white-space:nowrap}
.piste{display:inline-flex;will-change:transform}
.piste span{padding-right:.4em}
.b-serif{font:400 clamp(40px,6.4vw,104px)/1.05 var(--f-titre);color:var(--accent);letter-spacing:-.02em}
.sep{display:inline-block;width:.14em;height:.14em;border-radius:50%;background:currentColor;vertical-align:middle;margin:0 .4em;opacity:.55}
.b-grot{font:600 clamp(40px,6.2vw,104px)/1.05 var(--f-grot);color:var(--texte);letter-spacing:-.04em}