/* Lire Debord — LA LISEUSE de la revue (mission liseuses, 21 sept. 2026).
   Chargée sur les douze pages de numéro seulement. Quatre choses :
   1. la barre de lecture, collante sous la barre du haut ;
   2. le panneau « Aa » et les réglages, appliqués par propriétés personnalisées
      et classes sur .rv-corps — sans script, rien de tout cela n'existe et la
      page se lit telle quelle ;
   3. LES THÈMES SONT DES SYSTÈMES, pas des listes de rustines (la règle de
      Lire Marx) : un thème redéfinit les JETONS dans sa portée, et tout ce qui
      en descend suit. « Nuit » n'existe QUE sur les pages de numéro : la classe
      est posée par le script de tête, et cette feuille est la seule à la lire.
   4. le plein écran : la coquille s'efface, la colonne garde sa mesure.
   Rien sous 11 px, aucune cible sous 24 px (la barre : 40 px). */

/* ---------- la police pour la dyslexie : ne se télécharge que si on la demande ---------- */
@font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/opendyslexic-400-normal-latin.woff2) format('woff2')}
@font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/opendyslexic-700-normal-latin.woff2) format('woff2')}

/* ---------- 1. la barre ---------- */
.ls-barre{position:sticky;top:52px;z-index:30;display:flex;align-items:center;gap:4px;margin:0 0 18px;padding:6px 8px;
  background:rgba(243,240,232,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:12px;overflow-x:auto;scrollbar-width:none}
/* ⚠️ pas de color-mix() pour un fond sous du texte : la sonde (et tout ce qui lit
   getComputedStyle) reçoit color(srgb …) et le prend pour un noir — 1,83:1 mesuré
   pour un vrai 8,7:1. Le fond est redit par thème, en rgba. */
html.ls-blanc .ls-barre{background:rgba(251,250,246,.88)}
html.ls-nuit .ls-barre{background:rgba(26,25,21,.88)}
.ls-barre::-webkit-scrollbar{display:none}
.ls-b{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border-radius:9px;border:1px solid transparent;
  background:none;font:inherit;font-size:.86rem;font-weight:500;color:var(--trait);text-decoration:none;cursor:pointer;white-space:nowrap;flex:none}
.ls-b:hover{background:color-mix(in srgb,var(--encre) 6%,transparent);color:var(--encre)}
.ls-b[aria-pressed="true"],.ls-b[aria-expanded="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.ls-b[aria-disabled="true"]{opacity:1;color:var(--muted);cursor:default;pointer-events:none}
.ls-b svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ls-b.ls-aa b{font-family:var(--f-lecture);font-weight:600;font-size:1rem;letter-spacing:-.02em}
.ls-esp{flex:1}
.ls-b[hidden]{display:none}
/* sous 700 px, les pictogrammes seuls — chacun DIFFÉRENT (le piège de Lire Marx :
   « Suivant » et « Écouter » portaient le même triangle) ; le libellé reste au
   lecteur d'écran */
@media(max-width:700px){.ls-b span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.ls-b{padding:0 10px;min-width:40px;justify-content:center}}

/* ---------- 2. le panneau des réglages ---------- */
.ls-panneau{position:sticky;top:104px;z-index:31;margin:-8px 0 20px;padding:16px 18px;background:var(--blanc);border:1px solid var(--border-strong);border-radius:14px;
  box-shadow:0 12px 32px color-mix(in srgb,var(--encre) 16%,transparent);display:grid;gap:14px;max-height:calc(100vh - 120px);overflow:auto}
.ls-panneau[hidden]{display:none}
.ls-panneau h2{font-family:var(--f-titre);font-weight:600;font-size:1.02rem;margin:0;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.ls-panneau h2 .cp-lien{margin-left:auto;font-size:.82rem;display:inline-flex;align-items:center;min-height:28px}
.ls-l{display:grid;grid-template-columns:minmax(90px,130px) 1fr;gap:8px 12px;align-items:center}
.ls-l>span:first-child{font-size:.84rem;font-weight:600;color:var(--encre)}
.ls-pas{display:inline-flex;align-items:center;gap:4px}
.ls-pas button{width:36px;height:34px;border-radius:9px;border:1px solid var(--border-strong);background:var(--papier);color:var(--encre);font:inherit;font-size:1.1rem;cursor:pointer;display:grid;place-items:center}
.ls-pas button:hover{border-color:var(--encre)}
.ls-pas output{min-width:52px;text-align:center;font-size:.86rem;font-variant-numeric:tabular-nums;color:var(--trait)}
.ls-seg{display:flex;flex-wrap:wrap;gap:4px}
.ls-seg button{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--border-strong);background:var(--papier);color:var(--encre);font:inherit;font-size:.84rem;cursor:pointer}
.ls-seg button:hover{border-color:var(--encre)}
.ls-seg button[aria-pressed="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.ls-seg button.ls-f-lecture{font-family:var(--f-lecture)}
.ls-seg button.ls-f-dys{font-family:'OpenDyslexic',var(--f-ui)}
.ls-panneau select{font:inherit;font-size:.86rem;padding:7px 10px;border:1px solid var(--border-strong);border-radius:9px;background:var(--papier);color:var(--encre);max-width:100%;min-height:34px}
.ls-sep{border:0;border-top:1px solid var(--border);margin:2px 0}
.ls-note{margin:0;font-size:.8rem;color:var(--muted);line-height:1.45}
@media(max-width:560px){.ls-l{grid-template-columns:1fr}}

/* ---------- les réglages appliqués ---------- */
.rv-corps{--ls-fs:1;--ls-lh:1.62;--ls-w:66ch}
.rv-corps .rv-texte{max-width:var(--ls-w);font-size:calc(1rem * var(--ls-fs));line-height:var(--ls-lh)}
.rv-corps .rv-texte p{line-height:var(--ls-lh)}
.rv-corps.ls-justifie .rv-texte p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.rv-corps.ls-police-inter .rv-texte{font-family:var(--f-ui)}
.rv-corps.ls-police-dys .rv-texte{font-family:'OpenDyslexic',var(--f-ui);letter-spacing:.01em}

/* ---------- 3. les thèmes : les jetons, dans leur portée ---------- */
/* le temps de la bascule d'un thème : aucune transition (voir liseuse.js) */
html.ls-bascule *,html.ls-bascule *::before,html.ls-bascule *::after{transition:none!important}
html.ls-blanc{--papier:#fbfaf6;--blanc:#ffffff}
html.ls-nuit{
  --papier:#1a1915;--blanc:#24231d;--encre:#ece7da;--trait:#cfc9ba;--muted:#a9a394;
  --fleche:#e8452f;--fleche-text:#f28a78;--border:rgba(236,231,218,.16);--border-strong:rgba(236,231,218,.36);
  color-scheme:dark}
/* ce qui, dans le socle, écrit une couleur en dur : on le redit avec les jetons */
html.ls-nuit .tb{background:rgba(26,25,21,.86)}
html.ls-nuit .rv-ici{background:rgba(26,25,21,.92)}
html.ls-nuit ::selection{background:var(--fleche);color:var(--papier)}
html.ls-nuit .lc-bar{background:var(--blanc);border:1px solid var(--border-strong)}
html.ls-nuit .lc-bar button{color:var(--encre)}
html.ls-nuit .lc-bar button+button{border-left-color:var(--border)}
html.ls-nuit .btn-plein{background:var(--encre);color:var(--papier)}
html.ls-nuit .btn-plein:hover{background:#fff}
html.ls-nuit .btn-plein .fl path{stroke:var(--fleche)}
html.ls-nuit mark.lc-m{background:rgba(232,69,47,.26)}
html.ls-nuit mark.lc-m.a-note{background:rgba(232,69,47,.34)}
html.ls-nuit mark.rv-q{background:rgba(232,69,47,.3)}
html.ls-nuit .ld-toast,html.ls-nuit .lc-toast{background:var(--encre);color:var(--papier)}
html.ls-nuit .skip{background:var(--encre);color:var(--papier)}
html.ls-nuit .badge-libre{background:rgba(232,69,47,.22);color:var(--fleche-text)}

/* ---------- 4. le plein écran ---------- */
body.ls-plein{--sb-w:0px}
body.ls-plein .tb,body.ls-plein .sb,body.ls-plein .sb-voile,body.ls-plein .pied,body.ls-plein .fil,body.ls-plein .rv-marge,body.ls-plein .rv-ici,body.ls-plein .th-suite{display:none}
body.ls-plein .rv-grid{grid-template-columns:1fr;justify-items:center}
body.ls-plein .rv-corps{width:100%;max-width:calc(var(--ls-w) + 8ch)}
body.ls-plein .ls-barre{top:8px}
body.ls-plein .ls-panneau{top:60px}
.ls-sortir{display:none}
body.ls-plein .ls-sortir{display:inline-flex;position:fixed;right:14px;bottom:14px;z-index:40;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--blanc);color:var(--encre);font:inherit;font-size:.84rem;cursor:pointer;box-shadow:0 6px 20px color-mix(in srgb,var(--encre) 18%,transparent)}
.ls-sortir kbd{font:inherit;font-size:.74rem;padding:2px 6px;border:1px solid var(--border-strong);border-radius:5px;color:var(--trait)}

/* ---------- 5. l'écoute : le paragraphe et la phrase en cours ---------- */
/* le filet vaut pour tout ce qui se lit — le TITRE d'un article aussi, qui entre
   dans la file pour qu'on entende qu'on a changé de texte */
.rv-corps .ls-lu{box-shadow:inset 3px 0 0 var(--fleche);padding-left:12px;margin-left:-15px}
/* la pastille de rappel : le lecteur est parti ailleurs pendant que la voix lit */
.ls-suivre{position:fixed;left:calc(var(--sb-w) + 14px);bottom:14px;z-index:40;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--blanc);color:var(--encre);font:inherit;font-size:.84rem;cursor:pointer;box-shadow:0 6px 20px rgba(20,19,15,.18)}
.ls-suivre[hidden]{display:none}
.ls-suivre svg{width:16px;height:16px;flex:none;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ls-suivre svg path:last-child{fill:none}
html.ls-nuit .ls-suivre{box-shadow:0 6px 20px rgba(0,0,0,.5)}
@media(max-width:900px){.ls-suivre{left:14px}}
::highlight(ls-phrase){background:rgba(216,32,10,.16)}
html.ls-nuit ::highlight(ls-phrase){background:rgba(232,69,47,.32)}
/* sans le Highlight API, on souligne le paragraphe seulement : le filet rouge suffit */
.ls-b.ls-actif svg{animation:ls-pulse 1.2s ease-in-out infinite}
@keyframes ls-pulse{50%{opacity:.45}}
html.no-motion .ls-b.ls-actif svg{animation:none}

/* sous 900 px la bande d'orientation (is-revue.js) est collante à 52 px comme la
   barre : elle passe sous la barre (54 px de haut), sinon les deux se couvrent */
@media(max-width:900px){.rv-ici{top:112px}}