/* Guide de la Lecture sans ligne (js/reader-guide.js) : une carte, le titre et l'introduction en haut, puis quatre étapes séparées d'un filet,
   chacune avec ses repères numérotés et sa capture. La même carte, réduite à l'étape de l'accès, s'affiche aussi dans l'éditeur quand le widget n'a
   pas l'accès complet (#access-guide-container, tout en bas). Tout le texte est posé sur la carte (--surface) et non sur le fond du conteneur : ce
   fond est le plan de travail sombre en thème sombre, mais du blanc quand l'aperçu A4 est coupé (css/editor-v2.css, #reader-container.a4-preview) :
   un texte clair du thème sombre y serait à 1,2:1. Les règles portent l'identifiant des deux conteneurs (`:is()` garde la spécificité d'un
   identifiant) : `#reader-container p { margin: 0 }` (css/editor-v2.css) l'emporterait sur les marges d'une simple classe. Le court message d'une
   Lecture déjà reliée garde ses règles de css/style.css (.reader-empty). */
:is(#reader-container, #access-guide-container) .reader-guide { box-sizing: border-box; max-width: 640px; margin: 0 auto; padding: 16px 18px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); font-family: var(--font-ui); color: var(--text); }
:is(#reader-container, #access-guide-container) .reader-guide-title { margin: 0 0 6px; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--text); }
:is(#reader-container, #access-guide-container) .reader-guide-intro { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }
:is(#reader-container, #access-guide-container) .reader-guide-steps { list-style: none; margin: 0; padding: 0; }
:is(#reader-container, #access-guide-container) .reader-guide-step { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border); }
:is(#reader-container, #access-guide-container) .reader-guide-step-body { flex: 1 1 240px; min-width: 0; }
:is(#reader-container, #access-guide-container) .reader-guide-eyebrow { margin: 0 0 2px; font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
:is(#reader-container, #access-guide-container) .reader-guide-step-title { margin: 0 0 4px; font-size: 14px; line-height: 1.35; font-weight: 700; color: var(--text); }
:is(#reader-container, #access-guide-container) .reader-guide-lead { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--text); }
:is(#reader-container, #access-guide-container) .reader-guide-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
:is(#reader-container, #access-guide-container) .reader-guide-mark-item { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0; font-size: 13px; line-height: 1.4; color: var(--text); }
/* Le même rond bleu que les repères des captures : le texte blanc dessus passe par --accent-solid (4,55:1), jamais --accent. */
:is(#reader-container, #access-guide-container) .reader-guide-mark { flex: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--accent-solid); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
/* La capture est un bouton : un clic la montre à sa taille réelle, un second la rétrécit. Sa largeur de base est celle du fichier (--shot-w, posé
   par le script) à 66 %. */
:is(#reader-container, #access-guide-container) .reader-guide-shot { flex: 0 1 auto; box-sizing: border-box; max-width: 100%; margin: 0; padding: 0; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; overflow: hidden; cursor: zoom-in; line-height: 0; appearance: none; }
:is(#reader-container, #access-guide-container) .reader-guide-shot img { display: block; width: calc(var(--shot-w) * 1px * .66); max-width: 100%; height: auto; }
:is(#reader-container, #access-guide-container) .reader-guide-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:is(#reader-container, #access-guide-container) .reader-guide-step.is-zoomed .reader-guide-shot { flex-basis: auto; cursor: zoom-out; }
:is(#reader-container, #access-guide-container) .reader-guide-step.is-zoomed .reader-guide-shot img { width: calc(var(--shot-w) * 1px); }
:is(#reader-container, #access-guide-container) .reader-guide-unsure { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.45; color: var(--text); }
/* Éditeur sans accès complet (js/main.js:syncEditorVisibilityForMode) : la carte prend la place du document, sur le fond du plan de travail (celui de
   l'aperçu A4 de l'éditeur, clair ou sombre) ; le conteneur défile comme celui de la Lecture quand le panneau est bas. La hauteur de ligne reprend celle
   de #reader-container, dont la carte hérite en Lecture. */
#access-guide-container { box-sizing: border-box; flex: 1; min-height: 0; padding: 18px 22px; overflow: auto; background: var(--pp-page-gutter); line-height: 1.45; }