/* ============================================================
   LIRE DEBORD — le socle CLAIR, partagé par toutes les pages.
   DA « la carte psychogéographique » : le papier du plan, l'encre
   noire, le rouge des flèches. Bricolage Grotesque (titres) ·
   Inter (interface) · Spectral (lecture longue). Pas de Fraunces.
   Ce fichier est mis en cache par Cloudflare : toute modification
   se BUMPE dans les `?v=` des pages qui le lient.
   ============================================================ */
:root{
  --papier:#f3f0e8; --blanc:#fbfaf6; --encre:#14130f; --trait:#4b4842;
  --muted:#625e55; --fleche:#d8200a; --fleche-text:#b8170a;
  --border:rgba(20,19,15,.16); --border-strong:rgba(20,19,15,.34);
  --f-titre:'Bricolage Grotesque',system-ui,sans-serif;
  --f-ui:'Inter',system-ui,sans-serif;
  --f-lecture:'Spectral',Georgia,serif;
  --gutter:clamp(24px,5vw,80px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:auto;background:var(--papier)}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--f-ui);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--fleche);color:var(--blanc)}
:focus-visible{outline:2px solid var(--fleche);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:12px;top:-60px;z-index:100;background:var(--encre);color:var(--papier);padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:8px}

/* ---------- LA COQUILLE : la barre du haut et la barre latérale ----------
   Comme sur Lire Marx (arbitrage du propriétaire, 20 sept. 2026), dans la
   DA claire d'ici. La barre du haut porte la marque, le bouton de la barre
   latérale, la loupe et le carnet. LA BARRE LATÉRALE EST LA SEULE SURFACE DE
   NAVIGATION — les six liens en ligne et le menu « La carte » sont partis :
   deux surfaces pour le même contenu est la faute que ce site refuse.
   Le contenu (main, pied) se décale de sa largeur, --sb-w : 232 px sur
   écran large, 0 sous 900 px ou quand elle est repliée (html.sb-off,
   mémorisé, posé AVANT le premier rendu par le script de tête).
   Sans script : ouverte sur écran large ; en tiroir par :target sous 900. */
:root{--sb-w:232px}
html.sb-off{--sb-w:0px}
@media(max-width:899px){:root,html.sb-off{--sb-w:0px}}
/* ⚠️ le décalage est sur BODY, pas sur main : .page pose margin:0 auto sur
   le main lui-même et gagnait — le titre passait sous la barre latérale
   (mesuré : mainLeft 0 pour --sb-w 232). La barre du haut, sticky, compense
   pour rester pleine largeur. */
body{padding-left:var(--sb-w)}
.tb{margin-left:calc(var(--sb-w) * -1);width:calc(100% + var(--sb-w))}
html:not(.no-anim) body{transition:padding-left .22s var(--ease)}
html:not(.no-anim) .tb{transition:margin-left .22s var(--ease)}
.tb{position:sticky;top:0;z-index:70;height:52px;display:flex;align-items:center;gap:8px;padding:0 var(--gutter) 0 10px;background:rgba(243,240,232,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.brand{font-family:var(--f-titre);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none;display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap;margin-left:2px}
.brand i{font-style:normal;color:var(--fleche);font-size:1.4em;line-height:0;position:relative;top:.05em}
.sb-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:var(--trait);text-decoration:none;flex:none}
.sb-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sb-toggle:hover{background:rgba(20,19,15,.06);color:var(--encre)}
.tb-r{margin-left:auto;display:flex;gap:4px;align-items:center;min-width:0}
/* la loupe et le carnet : icône et libellé, icône seule sous 1 040 px */
.tb-q{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--trait);font-size:.86rem;font-weight:500;white-space:nowrap}
.tb-q svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tb-q:hover{background:rgba(20,19,15,.06);color:var(--encre)}
.tb-q[aria-current]{color:var(--encre);box-shadow:inset 0 -2px 0 var(--fleche);border-radius:0;padding-bottom:6px}
.tb-c{position:relative}
.tb-c svg path{fill:none}
/* le point rouge ne se montre que si le carnet contient quelque chose (site.js) */
.tb-pt{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--fleche);box-shadow:0 0 0 2px var(--papier)}
.tb-pt[hidden]{display:none}
@media(max-width:1040px){.tb-q span{display:none}.tb-q{padding:8px 10px}.tb-pt{top:3px;right:3px}}
/* ---------- la barre latérale ---------- */
.sb{position:fixed;top:52px;left:0;bottom:0;width:232px;overflow-y:auto;overscroll-behavior:contain;background:var(--papier);border-right:1px solid var(--border);padding:12px 10px 24px;z-index:60;display:grid;align-content:start;gap:2px}
html:not(.no-anim) .sb{transition:transform .22s var(--ease)}
.sb-h{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 10px 6px}
.sb-h:first-child{margin-top:4px}
/* UNE ENTREE = UN MOT. Les sous-titres ont ete retires (21 sept. 2026) : treize
   entrees de deux lignes faisaient de la navigation un texte a lire. Le nom de la
   destination suffit ; ce qu'elle contient, la page le dit. */
.sb-i{display:block;padding:9px 10px 9px 17px;border-radius:9px;text-decoration:none;color:var(--encre);font-size:.92rem;font-weight:500;line-height:1.3;position:relative}
.sb-i:hover{background:rgba(20,19,15,.06)}
.sb-i[aria-current]{background:var(--blanc);box-shadow:inset 0 0 0 1px var(--border)}
/* la page courante : un trait du rouge des flèches, à gauche */
.sb-i[aria-current]::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--fleche)}
.sb-i .tb-pt{top:50%;right:10px;margin-top:-3.5px}
.sb-app{margin-top:12px;border-top:1px solid var(--border);padding-top:8px}
.sb-app[hidden]{display:none}
.sb-app button{display:block;width:100%;text-align:left;font:inherit;font-size:.88rem;font-weight:500;color:var(--encre);background:transparent;border:0;padding:8px 10px 8px 17px;border-radius:9px;cursor:pointer}
.sb-app button:hover{background:rgba(20,19,15,.06)}
.sb-app-aide{font-size:.76rem;line-height:1.45;color:var(--trait);margin:0 10px 8px 17px}
.sb-app-aide[hidden]{display:none}
.sb-fermer,.sb-voile{display:none}
@media(min-width:900px){html.sb-off .sb{transform:translateX(-100%)}}
@media(max-width:899px){
  /* le tiroir : hors champ, ouvert par :target (sans script) ou body.sb-open (avec) */
  .sb{transform:translateX(-100%);width:min(300px,86vw);box-shadow:8px 0 40px rgba(20,19,15,.18)}
  .sb:target,body.sb-open .sb{transform:none}
  .sb-voile{display:block;position:fixed;top:52px;left:0;right:0;bottom:0;background:rgba(20,19,15,.35);z-index:55;opacity:0;pointer-events:none}
  html:not(.no-anim) .sb-voile{transition:opacity .2s}
  .sb:target~.sb-voile,body.sb-open .sb-voile{opacity:1;pointer-events:auto}
  .sb-fermer{display:inline-flex;align-items:center;gap:8px;margin:2px 10px 8px;padding:8px 10px;border-radius:9px;font-size:.84rem;color:var(--trait);text-decoration:none;min-height:40px}
  .sb-fermer:hover{background:rgba(20,19,15,.06);color:var(--encre)}
  .sb-fermer svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
}

/* ---------- grammaire de section ---------- */
.sec{padding:clamp(64px,9vw,120px) var(--gutter);max-width:1280px;margin:0 auto}
.sec-label{font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--fleche-text);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.sec-label::before{content:"";width:22px;height:2px;background:var(--fleche);flex:none}
.sec-h{font-family:var(--f-titre);font-weight:800;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.02;letter-spacing:-.03em;margin:0 0 16px;max-width:22ch}
.sec-lede{font-family:var(--f-lecture);font-size:1.12rem;line-height:1.55;color:var(--trait);max-width:60ch;margin:0}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;transition:transform .25s var(--ease),background .2s;cursor:pointer;font-family:inherit;line-height:1.2}
.btn-plein{background:var(--encre);color:var(--papier)}
.btn-plein:hover{transform:translateY(-1px);background:#000}
.btn-outline{border-color:var(--border-strong);color:var(--encre);background:transparent}
.btn-outline:hover{background:rgba(20,19,15,.05)}
.btn .fl{width:18px;height:12px;flex:none}
.btn .fl path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-plein .fl path{stroke:var(--fleche)}

/* ---------- badges de droits — la contrainte est une DONNÉE ---------- */
.badge{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap;font-family:var(--f-ui)}
.badge-libre{background:var(--encre);color:var(--papier)}
.badge-protege{background:rgba(216,32,10,.10);color:var(--fleche-text)}
.badge-verif{border:1px solid var(--border-strong);color:var(--muted)}
.badge-soon{border:1px solid var(--border);color:var(--muted)}

/* ---------- la page de lecture : fil, tête, prose ---------- */
.page{max-width:1280px;margin:0 auto;padding:clamp(36px,5vw,64px) var(--gutter) clamp(64px,9vw,120px)}
.fil{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--muted)}
.fil li{display:flex;align-items:center}
.fil li+li::before{content:"";display:inline-block;width:18px;height:10px;margin:0 8px;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M1 5h12M9 1l4 4-4 4' fill='none' stroke='%23d8200a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.fil a{color:var(--trait);text-decoration:none;padding:4px 0}
.fil a:hover{color:var(--fleche-text);text-decoration:underline;text-underline-offset:3px}
.fil [aria-current]{color:var(--encre)}
.prose{font-family:var(--f-lecture);font-size:1.12rem;line-height:1.62;color:var(--encre);max-width:66ch}
.prose p{margin:0 0 1.15em}
.prose p:last-child{margin-bottom:0}
.prose h2,.prose h3{font-family:var(--f-titre);letter-spacing:-.02em;line-height:1.1;margin:1.9em 0 .6em}
.prose h2{font-weight:800;font-size:1.55rem}
.prose h3{font-weight:600;font-size:1.2rem}
.prose a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--fleche);text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{color:var(--fleche-text)}
.prose blockquote{margin:1.4em 0;padding:4px 0 4px 22px;border-left:3px solid var(--fleche);font-size:1.08em;line-height:1.5}
.prose blockquote p{margin:0}
.prose blockquote .src,.src{display:block;font-family:var(--f-ui);font-size:.8rem;color:var(--muted);margin-top:10px;letter-spacing:.01em}
.src a{color:var(--trait);text-decoration:underline;text-underline-offset:3px}
.src a:hover{color:var(--fleche-text)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.15em}
.prose li{margin:0 0 .4em}
.prose .lettrine{margin-top:.2em}

/* ---------- l'encart de droits — la même phrase partout ---------- */
.droits{border:1px solid var(--border-strong);border-radius:12px;padding:14px 16px;font-size:.86rem;color:var(--muted);line-height:1.5;max-width:60ch}
.droits p{margin:0}
.droits b{color:var(--encre);font-weight:600}
.droits a{color:var(--fleche-text);text-decoration:underline;text-underline-offset:3px}

/* ---------- révélations au défilement — état FINI par défaut sans script ---------- */
html:not(.no-motion) .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html:not(.no-motion) .reveal.in{opacity:1;transform:none}
html:not(.no-motion) .reveal-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html:not(.no-motion) .reveal-stagger.in>*{opacity:1;transform:none}
html:not(.no-motion) .reveal-stagger.in>:nth-child(2){transition-delay:.08s}
html:not(.no-motion) .reveal-stagger.in>:nth-child(3){transition-delay:.16s}
html:not(.no-motion) .reveal-stagger.in>:nth-child(4){transition-delay:.24s}
html:not(.no-motion) .reveal-stagger.in>:nth-child(5){transition-delay:.32s}
@media (scripting: none){.reveal,.reveal-stagger>*{opacity:1!important;transform:none!important}}

/* ---------- pied ---------- */
.pied{border-top:1px solid var(--border);padding:40px var(--gutter) 60px;font-size:.86rem;color:var(--muted)}
.pied-in{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.pied h4{font-family:var(--f-titre);font-weight:800;font-size:.95rem;color:var(--encre);margin:0 0 10px;letter-spacing:-.01em}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pied a{color:var(--trait);text-decoration:none}
.pied a:hover{color:var(--fleche-text);text-decoration:underline;text-underline-offset:3px}
.pied p{margin:0;line-height:1.55;max-width:48ch}
.pied-l{margin-top:12px!important;display:grid;gap:4px}
.pied-l a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
@media(max-width:720px){.pied-in{grid-template-columns:1fr}}

/* ---------- LES SORTIES : d'ici, on peut aller ----------
   « Se laisser aller aux sollicitations du terrain et des rencontres qui y
   correspondent » — Théorie de la dérive, n° 2 (décembre 1958). Les voisins
   sont CALCULÉS (tools/relief.mjs), jamais tirés au sort : Debord écarte le
   hasard dans la même page. Chaque sortie dépose le lecteur dans un passage,
   pas en haut d'une page — c'est le « rendez-vous possible ». */
.sorties{margin:clamp(32px,5vw,52px) 0 0;padding-top:20px;border-top:1px solid var(--border)}
.so-k{margin:0 0 14px;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fleche-text);display:flex;align-items:center;gap:10px}
.so-k::before{content:"";width:22px;height:2px;background:var(--fleche);flex:none}
.so-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.so a{display:grid;gap:3px;padding:13px 16px 13px 44px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit;background:var(--blanc);position:relative;transition:border-color .22s,transform .25s var(--ease)}
/* la flèche de dérive, à gauche : elle pointe vers la sortie */
/* LA FLÈCHE D'UNE SORTIE est en SVG dans la page, et non plus une image de
   fond : une image de fond ne se TRACE pas. C'est la seule figure du site qui
   mérite de se dessiner au défilement — une sortie EST une flèche de dérive —
   et site.js s'en charge selon la position. État fini par défaut : sans script
   et sans mouvement, le trait est entier. */
.so-f{position:absolute;left:14px;top:50%;width:18px;height:12px;margin-top:-6px;transition:transform .25s var(--ease)}
.so-f path{fill:none;stroke:var(--fleche);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.so a:hover{border-color:var(--fleche);transform:translateX(2px)}
.so a:hover .so-f{transform:translateX(3px)}
.so-t{font-family:var(--f-titre);font-weight:800;font-size:1.02rem;letter-spacing:-.02em;line-height:1.25}
.so-m{font-size:.8rem;color:var(--muted)}
.so-e{color:var(--fleche-text)}
.so-sep{color:var(--muted)}   /* le point de séparation est du TEXTE : il se lit, donc il se mesure (2,2:1 à --border-strong) */
/* le retour : « vous venez de… ». Posé par site.js quand l'adresse porte &de= */
.revenir{margin:0 0 18px;font-size:.86rem;color:var(--trait);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.revenir a{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 12px;border:1px solid var(--border-strong);border-radius:999px;text-decoration:none;color:var(--encre);background:var(--blanc);min-height:24px}
.revenir a:hover{border-color:var(--fleche);color:var(--fleche-text)}
.revenir svg{width:16px;height:11px;flex:none;fill:none;stroke:var(--fleche);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1100px){.so-l{grid-template-columns:1fr 1fr}}

/* OÙ L'ON EST, au-dessus des sorties : le quartier du plan. */
.so-q{margin:2.2rem 0 -.6rem;font-family:var(--f-ui);font-size:.9rem;color:var(--trait);max-width:62ch}
.so-q b{color:var(--encre);font-weight:600}
.so-q a{color:var(--fleche-text);text-decoration:underline;text-underline-offset:3px}
.so-q a:hover{color:var(--encre)}

/* LA PASTILLE DE COMPTE (barre du haut) et LE TOAST COMMUN (compte.js). La
   pastille est un lien vers /compte/ : sans script elle dit « Se connecter »
   et mène à la page ; compte.js y écrit le pseudo. Le point rouge = messages
   non lus, le même que celui du carnet. */
.tb-u{position:relative;max-width:180px}
.tb-u span{overflow:hidden;text-overflow:ellipsis}
.tb-u svg circle,.tb-u svg path{fill:none}
.tb-u-on{color:var(--encre);font-weight:600}
.ld-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,12px);z-index:70;background:var(--encre);color:var(--papier);font-size:.88rem;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);max-width:calc(100vw - 32px)}
.ld-toast.on{opacity:1;transform:translate(-50%,0)}
/* SUR LA PLACE PUBLIQUE : la ligne d'une thèse ou d'un article vers ses fils */
.so-pp{margin:1.2rem 0 0;font-family:var(--f-ui);font-size:.9rem;color:var(--trait);max-width:62ch}
.so-pp a{color:var(--fleche-text);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.so-pp a:hover{color:var(--encre)}