From e2468be522083f0ec0a173a2e0ded492221166dc Mon Sep 17 00:00:00 2001
From: Archicratia <area.technik@proton.me>
Date: Thu, 19 Feb 2026 23:00:58 +0100
Subject: [PATCH] fix(etape8): resync hotfix edition depuis NAS (2026-02-19)

---
 .../archicratie/archicrat-ia/prologue.yml     |   59 +
 src/components/LevelToggle.astro              |  135 +-
 src/components/SidePanel.astro                | 1064 +++++++++++
 src/layouts/EditionLayout.astro               | 1578 ++++++++++++-----
 src/styles/global.css                         |  121 +-
 5 files changed, 2432 insertions(+), 525 deletions(-)
 create mode 100644 src/annotations/archicratie/archicrat-ia/prologue.yml
 create mode 100644 src/components/SidePanel.astro

diff --git a/src/annotations/archicratie/archicrat-ia/prologue.yml b/src/annotations/archicratie/archicrat-ia/prologue.yml
new file mode 100644
index 0000000..ec3c301
--- /dev/null
+++ b/src/annotations/archicratie/archicrat-ia/prologue.yml
@@ -0,0 +1,59 @@
+schema: 1
+
+# optionnel (si présent, doit matcher le chemin du fichier)
+page: archicratie/archicrat-ia/prologue
+
+paras:
+  p-0-d7974f88:
+    refs:
+      - label: "Happycratie — (Cabanas & Illouz) via Cairn"
+        url: "https://shs.cairn.info/revue-ethnologie-francaise-2019-4-page-813?lang=fr"
+        kind: "article"
+      - label: "Techno-féodalisme — Variations (OpenEdition)"
+        url: "https://journals.openedition.org/variations/2290"
+        kind: "article"
+
+    authors:
+      - "Eva Illouz"
+      - "Yanis Varoufakis"
+
+    quotes:
+      - text: "Dans Happycratie, Edgar Cabanas et Eva Illouz..."
+        source: "Happycratie, p.1"
+      - text: "En eux-mêmes, les actifs ne sont ni féodaux ni capitalistes..."
+        source: "Entretien Morozov/Varoufakis — techno-féodalisme"
+
+    media:
+      - type: "image"
+        src: "/public/media/archicratie/archicrat-ia/prologue/p-0-d7974f88/schema-1.svg"
+        caption: "Tableau explicatif"
+        credit: "ChatGPT"
+      - type: "image"
+        src: "/public/media/archicratie/archicrat-ia/prologue/p-0-d7974f88/schema-2.svg"
+        caption: "Diagramme d’évolution"
+        credit: "Yanis Varoufakis"
+
+    comments_editorial:
+      - text: "TODO: nuancer / préciser — commentaire éditorial versionné (pas public)."
+        status: "draft"
+
+  p-1-2ef25f29:
+    refs:
+      - label: "Kafka et le pouvoir — Bernard Lahire (Cairn)"
+        url: "https://shs.cairn.info/franz-kafka--9782707159410-page-475?lang=fr"
+        kind: "book"
+
+    authors:
+      - "Bernard Lahire"
+
+    quotes:
+      - text: "Si l’on voulait chercher quelque chose comme une vision du monde chez Kafka..."
+        source: "Bernard Lahire, Franz Kafka, p.475+"
+
+    media:
+      - type: "video"
+        src: "/media/prologue/p-1-2ef25f29/bien_commun.mp4"
+        caption: "Entretien avec Bernard Lahire"
+        credit: "Cairn.info"
+
+    comments_editorial: []
diff --git a/src/components/LevelToggle.astro b/src/components/LevelToggle.astro
index 18cbf92..212acb4 100644
--- a/src/components/LevelToggle.astro
+++ b/src/components/LevelToggle.astro
@@ -1,35 +1,128 @@
 ---
+// src/components/LevelToggle.astro
 const { initialLevel = 1 } = Astro.props;
 ---
-<div class="level-toggle" role="group" aria-label="Niveau de lecture">
-  <button type="button" class="lvl-btn" data-level="1" aria-pressed="true">Niveau 1</button>
-  <button type="button" class="lvl-btn" data-level="2" aria-pressed="false">Niveau 2</button>
-  <button type="button" class="lvl-btn" data-level="3" aria-pressed="false">Niveau 3</button>
+
+<div class="level-toggle" role="group" aria-label="Mode d’édition">
+  <button type="button" class="level-btn" data-level="1">Propos</button>
+  <button type="button" class="level-btn" data-level="2">Références</button>
+  <button type="button" class="level-btn" data-level="3">Illustrations</button>
+  <button type="button" class="level-btn" data-level="4">Commentaires</button>
 </div>
 
-<script is:inline>
+<script is:inline define:vars={{ initialLevel }}>
 (() => {
-  const KEY = "archicratie.readingLevel";
-  const buttons = Array.from(document.querySelectorAll(".lvl-btn"));
+  const BODY = document.body;
 
-  function apply(level) {
-    document.body.setAttribute("data-reading-level", String(level));
-    buttons.forEach((b) => b.setAttribute("aria-pressed", b.dataset.level === String(level) ? "true" : "false"));
+  const wrap = document.querySelector(".level-toggle");
+  if (!wrap) return;
+
+  const buttons = Array.from(wrap.querySelectorAll("button[data-level]"));
+  if (!buttons.length) return;
+
+  const KEY = "archicratie:readingLevel";
+
+  function clampLevel(n) {
+    const x = Number.parseInt(String(n), 10);
+    if (!Number.isFinite(x)) return 1;
+    return Math.min(4, Math.max(1, x));
   }
 
-  // Valeur par défaut : si rien n'est stocké, on met 1 (citoyen).
-  // Si JS est absent/casse, le site reste lisible (tout s'affiche).
-  const stored = Number(localStorage.getItem(KEY));
-  const level = (stored === 1 || stored === 2 || stored === 3) ? stored : 1;
+  function setActiveUI(lvl) {
+    for (const b of buttons) {
+      const on = String(b.dataset.level) === String(lvl);
+      b.classList.toggle("is-active", on);
+      b.setAttribute("aria-pressed", on ? "true" : "false");
+    }
+  }
 
-  apply(level);
+  function captureBeforeLevelSwitch() {
+    const paraId =
+      window.__archiCurrentParaId ||
+      window.__archiLastParaId ||
+      String(location.hash || "").replace(/^#/, "") ||
+      "";
 
-  buttons.forEach((b) => {
-    b.addEventListener("click", () => {
-      const lvl = Number(b.dataset.level);
-      localStorage.setItem(KEY, String(lvl));
-      apply(lvl);
-    });
+    window.__archiLevelSwitchCtx = {
+      paraId,
+      hash: location.hash || "",
+      scrollY: window.scrollY || 0,
+      t: Date.now(),
+    };
+  }
+
+  function applyLevel(lvl, { persist = true } = {}) {
+    const v = clampLevel(lvl);
+
+    if (BODY) BODY.dataset.readingLevel = String(v);
+    setActiveUI(v);
+
+    if (persist) {
+      try { localStorage.setItem(KEY, String(v)); } catch {}
+    }
+
+    try {
+      window.dispatchEvent(
+        new CustomEvent("archicratie:readingLevel", { detail: { level: v } })
+      );
+    } catch {}
+  }
+
+  // init : storage > initialLevel
+  let start = clampLevel(initialLevel);
+  try {
+    const stored = localStorage.getItem(KEY);
+    if (stored) start = clampLevel(stored);
+  } catch {}
+
+  applyLevel(start, { persist: false });
+
+  // clicks
+  wrap.addEventListener("click", (ev) => {
+    const btn = ev.target?.closest?.("button[data-level]");
+    if (!btn) return;
+    ev.preventDefault();
+
+    // ✅ crucial : on capture la position AVANT le reflow lié au changement de niveau
+    captureBeforeLevelSwitch();
+    applyLevel(btn.dataset.level);
   });
 })();
 </script>
+
+<style>
+  .level-toggle{
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .level-btn{
+    border: 1px solid rgba(127,127,127,0.40);
+    background: rgba(127,127,127,0.08);
+    border-radius: 999px;
+    padding: 6px 10px;
+    font-size: 13px;
+    cursor: pointer;
+    user-select: none;
+    transition: filter .12s ease, transform .12s ease, background .12s ease, border-color .12s ease;
+  }
+
+  .level-btn:hover{
+    filter: brightness(1.08);
+  }
+
+  .level-btn.is-active{
+    border-color: rgba(160,160,255,0.95);
+    background: rgba(140,140,255,0.18);
+    font-weight: 900;
+  }
+
+  .level-btn.is-active:hover{
+    filter: brightness(1.12);
+  }
+
+  .level-btn:active{
+    transform: translateY(1px);
+  }
+</style>
diff --git a/src/components/SidePanel.astro b/src/components/SidePanel.astro
new file mode 100644
index 0000000..0eba9fd
--- /dev/null
+++ b/src/components/SidePanel.astro
@@ -0,0 +1,1064 @@
+---
+// src/components/SidePanel.astro
+---
+<aside class="page-panel" aria-label="Panneau contextuel">
+  <div class="page-panel__inner">
+    <div class="panel-head">
+      <div class="panel-head__left">
+        <span class="panel-head__label" aria-hidden="true">¶</span>
+        <code class="panel-head__id" id="panel-para-id">—</code>
+      </div>
+    </div>
+
+    <div class="panel-msg panel-msg--head" id="panel-head-msg" hidden></div>
+
+    {/* ✅ actions medias déplacées en haut (niveau 3 uniquement) */}
+    <div class="panel-top-actions level-3" aria-label="Actions médias">
+      <div class="panel-actions">
+        <button class="panel-btn" id="panel-media-all" type="button">Voir tous les éléments</button>
+        <button class="panel-btn panel-btn--primary" id="panel-media-submit" type="button">
+          Soumettre un média (Gitea)
+        </button>
+      </div>
+      <div class="panel-msg" id="panel-media-msg" hidden></div>
+    </div>
+
+    {/* ✅ actions références en haut (niveau 2 uniquement) */}
+    <div class="panel-top-actions level-2" aria-label="Actions références">
+    <div class="panel-actions">
+        <button class="panel-btn panel-btn--primary" id="panel-ref-submit" type="button">
+        Soumettre une référence (Gitea)
+        </button>
+    </div>
+    <div class="panel-msg" id="panel-ref-msg" hidden></div>
+    </div>
+
+    <section class="panel-block level-2" aria-label="Références et auteurs">
+      <h2 class="panel-title">Références & auteurs</h2>
+      <div class="panel-body" id="panel-l2"></div>
+    </section>
+
+    <section class="panel-block level-3" aria-label="Illustrations et diagrammes">
+      <h2 class="panel-title">Illustrations & diagrammes</h2>
+      <div class="panel-body" id="panel-l3"></div>
+    </section>
+
+    <section class="panel-block level-4" aria-label="Commentaires">
+      <h2 class="panel-title">Commentaires</h2>
+      <div class="panel-body" id="panel-l4"></div>
+
+      <div class="panel-compose">
+        <label class="panel-label" for="panel-comment-text">Nouveau commentaire</label>
+        <textarea id="panel-comment-text" class="panel-textarea" rows="5" placeholder="Écris ici…"></textarea>
+
+        <div class="panel-actions">
+          <button class="panel-btn panel-btn--primary" id="panel-comment-send" type="button">Envoyer</button>
+        </div>
+
+        <div class="panel-msg" id="panel-comment-msg" hidden></div>
+      </div>
+    </section>
+  </div>
+
+  {/* ✅ Lightbox media (pop-up au-dessus du panel) */}
+  <div class="panel-lightbox" id="panel-lightbox" hidden aria-hidden="true">
+    <div class="panel-lightbox__overlay" data-close="1"></div>
+    <div class="panel-lightbox__dialog" role="dialog" aria-modal="true" aria-label="Aperçu du média">
+      <button class="panel-lightbox__close" type="button" data-close="1" aria-label="Fermer">×</button>
+      <div class="panel-lightbox__content" id="panel-lightbox-content"></div>
+      <div class="panel-lightbox__caption" id="panel-lightbox-caption" hidden></div>
+    </div>
+  </div>
+</aside>
+
+<script is:inline>
+(() => {
+  const root = document.querySelector(".page-panel");
+  if (!root) return;
+
+  // Anti double-init (HMR / script injecté 2x / re-mount)
+  if (root.dataset.archiSidePanelInit === "1") return;
+  root.dataset.archiSidePanelInit = "1";
+
+  const pageKey = String(location.pathname || "").replace(/^\/+/, "").replace(/\/+$/, "");
+
+  const elId = root.querySelector("#panel-para-id");
+  const elL2 = root.querySelector("#panel-l2");
+  const elL3 = root.querySelector("#panel-l3");
+  const elL4 = root.querySelector("#panel-l4");
+
+  const msgHead = root.querySelector("#panel-head-msg");
+
+  const btnMediaAll = root.querySelector("#panel-media-all");
+  const btnMediaSubmit = root.querySelector("#panel-media-submit");
+  const msgMedia = root.querySelector("#panel-media-msg");
+
+  const taComment = root.querySelector("#panel-comment-text");
+  const btnSend = root.querySelector("#panel-comment-send");
+  const msgComment = root.querySelector("#panel-comment-msg");
+
+  const lb = root.querySelector("#panel-lightbox");
+  const lbContent = root.querySelector("#panel-lightbox-content");
+  const lbCaption = root.querySelector("#panel-lightbox-caption");
+
+  const btnRefSubmit = root.querySelector("#panel-ref-submit");
+  const msgRef = root.querySelector("#panel-ref-msg");
+
+  const docTitle = document.body?.dataset?.docTitle || document.title || "Archicratie";
+  const docVersion = document.body?.dataset?.docVersion || "";
+
+  const FULL_TEXT_SOFT_LIMIT = 1200;
+  const URL_HARD_LIMIT = 6500;
+
+  let _idxP = null;
+  let currentParaId = "";
+  let mediaShowAll = (localStorage.getItem("archicratie:panel:mediaAll") === "1");
+
+  // ===== globals =====
+  function getG() {
+    return window.__archiGitea || { ready: false, base: "", owner: "", repo: "" };
+  }
+  function getAuthInfoP() {
+    return window.__archiAuthInfoP || Promise.resolve({ ok: false, groups: [] });
+  }
+  function isDev() {
+    return Boolean((window.__archiFlags && window.__archiFlags.dev) || /^(localhost|127\.0\.0\.1|\[::1\])$/i.test(location.hostname));
+  }
+
+  const access = { ready: false, canUsers: false };
+
+  // On verrouille les boutons tant que l’accès n’est pas résolu
+  if (btnMediaSubmit) btnMediaSubmit.disabled = true;
+  if (btnSend) btnSend.disabled = true;
+  if (btnRefSubmit) btnRefSubmit.disabled = true;
+
+  function inGroup(groups, g) {
+    const gg = String(g || "").toLowerCase();
+    return Array.isArray(groups) && groups.some((x) => String(x).toLowerCase() === gg);
+  }
+
+  // ✅ règle mission : readers + editors peuvent soumettre médias + commentaires
+  // ✅ dev fallback : si /_auth/whoami n’existe pas, on autorise pour tester
+  getAuthInfoP().then((info) => {
+    const groups = Array.isArray(info?.groups) ? info.groups : [];
+    const canReaders = inGroup(groups, "readers");
+    const canEditors = inGroup(groups, "editors");
+
+    access.canUsers = Boolean((info?.ok && (canReaders || canEditors)) || (isDev() && !info?.ok));
+    access.ready = true;
+
+    if (btnMediaSubmit) btnMediaSubmit.disabled = !access.canUsers;
+    if (btnSend) btnSend.disabled = !access.canUsers;
+
+    if (btnRefSubmit) btnRefSubmit.disabled = !access.canUsers;
+
+
+    // si pas d'accès, on informe (soft)
+    if (!access.canUsers) {
+      if (msgHead) {
+        msgHead.hidden = false;
+        msgHead.textContent = "Connexion requise (readers ou editors) pour soumettre des médias/commentaires.";
+        msgHead.dataset.kind = "warn";
+      }
+    }
+  }).catch(() => {
+    // fallback dev
+    access.ready = true;
+    if (isDev()) {
+      access.canUsers = true;
+      if (btnMediaSubmit) btnMediaSubmit.disabled = false;
+      if (btnSend) btnSend.disabled = false;
+    }
+  });
+
+  function esc(s) { return String(s ?? ""); }
+
+  function clear(el) {
+    if (!el) return;
+    while (el.firstChild) el.removeChild(el.firstChild);
+  }
+
+  function pText(txt) {
+    const p = document.createElement("p");
+    p.textContent = txt;
+    return p;
+  }
+
+  function link(url, label) {
+    const a = document.createElement("a");
+    a.href = url;
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    a.textContent = label || url;
+    return a;
+  }
+
+  function showMsg(el, text, kind = "info") {
+    if (!el) return;
+    el.hidden = false;
+    el.textContent = text;
+    el.dataset.kind = kind;
+  }
+  function hideMsg(el) {
+    if (!el) return;
+    el.hidden = true;
+    el.textContent = "";
+    el.dataset.kind = "";
+  }
+
+  async function loadIndex() {
+    if (_idxP) return _idxP;
+    _idxP = (async () => {
+      const res = await fetch("/annotations-index.json?_=" + Date.now(), { cache: "no-store" }).catch(() => null);
+      if (res && res.ok) return await res.json();
+      return null;
+    })();
+    return _idxP;
+  }
+
+  function getParaText(paraId) {
+    try {
+      const el = document.getElementById(paraId);
+      if (!el) return "";
+      const clone = el.cloneNode(true);
+      clone.querySelectorAll(".para-tools,[data-noquote]").forEach((n) => n.remove());
+      return String(clone.innerText || clone.textContent || "").replace(/\s+/g, " ").trim();
+    } catch { return ""; }
+  }
+
+  function quoteBlock(s) {
+    return String(s || "")
+      .split(/\r?\n/)
+      .map((l) => (`> ${l}`).trimEnd())
+      .join("\n");
+  }
+
+  function buildIssueURL({ title, body }) {
+    const g = getG();
+    if (!g.ready) return "";
+    const base = String(g.base).replace(/\/+$/, "");
+    const issue = new URL(`${base}/${g.owner}/${g.repo}/issues/new`);
+    issue.searchParams.set("title", title);
+
+    let b = String(body || "");
+    if (b.length > 9000) b = b.slice(0, 9000) + "\n\n(…troncature automatique…)";
+    issue.searchParams.set("body", b);
+
+    if (issue.toString().length > URL_HARD_LIMIT) {
+      const shortBody = b.slice(0, 1800) + "\n\n(…troncature pour limite URL…)";
+      issue.searchParams.set("body", shortBody);
+    }
+    return issue.toString();
+  }
+
+  // Ouvre un nouvel onglet UNE SEULE FOIS (évite le double-open Safari/Firefox + noopener).
+    function openNewTab(url) {
+        try {
+            const a = document.createElement("a");
+            a.href = url;
+            a.target = "_blank";
+            a.rel = "noopener noreferrer";
+            a.style.display = "none";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            return true; // on ne peut pas détecter proprement un blocage sans retomber dans le double-open
+        } catch {
+            return false;
+        }
+    }
+
+  // ====== GARDES ANTI-DOUBLONS ======
+  const _openStamp = new Map();
+  function openOnce(key, fn) {
+    const now = Date.now();
+    const prev = _openStamp.get(key) || 0;
+    if (now - prev < 700) return false;
+    _openStamp.set(key, now);
+    return Boolean(fn());
+  }
+
+  function guardEventOnce(ev, key) {
+    try {
+      const k = "__archiOnce_" + key;
+      if (ev && ev[k]) return true;
+      if (ev) ev[k] = true;
+      try { ev.stopImmediatePropagation(); } catch {}
+      try { ev.stopPropagation(); } catch {}
+    } catch {}
+    return false;
+  }
+
+  function bindClickOnce(el, handler) {
+    if (!el) return;
+    if (el.dataset.bound === "1") return;
+    el.dataset.bound = "1";
+    el.addEventListener("click", handler, { passive: false });
+  }
+
+  // ===== Lightbox =====
+  function closeLightbox() {
+    if (!lb) return;
+    lb.hidden = true;
+    lb.setAttribute("aria-hidden", "true");
+    if (lbContent) clear(lbContent);
+    if (lbCaption) { lbCaption.hidden = true; lbCaption.textContent = ""; }
+  }
+  function openLightbox({ type, src, caption }) {
+    if (!lb || !lbContent) return;
+    clear(lbContent);
+
+    const t = String(type || "link");
+    const s = String(src || "");
+    const cap = String(caption || "").trim();
+
+    if (!s) return;
+
+    if (t === "image") {
+      const img = document.createElement("img");
+      img.loading = "eager";
+      img.alt = cap || "Illustration";
+      img.src = s;
+      lbContent.appendChild(img);
+    } else if (t === "video") {
+      const v = document.createElement("video");
+      v.controls = true;
+      v.autoplay = false;
+      v.src = s;
+      lbContent.appendChild(v);
+    } else if (t === "audio") {
+      const a = document.createElement("audio");
+      a.controls = true;
+      a.src = s;
+      lbContent.appendChild(a);
+    } else {
+      const a = link(s, cap || s);
+      a.className = "panel-lightbox__link";
+      lbContent.appendChild(a);
+    }
+
+    if (lbCaption) {
+      if (cap) { lbCaption.hidden = false; lbCaption.textContent = cap; }
+      else { lbCaption.hidden = true; lbCaption.textContent = ""; }
+    }
+
+    lb.hidden = false;
+    lb.setAttribute("aria-hidden", "false");
+  }
+
+  if (lb) {
+    bindClickOnce(lb, (ev) => {
+      const t = ev.target;
+      if (t && t.getAttribute && t.getAttribute("data-close") === "1") {
+        ev.preventDefault();
+        closeLightbox();
+      }
+    });
+    window.addEventListener("keydown", (ev) => {
+      if (ev.key === "Escape" && !lb.hidden) closeLightbox();
+    });
+  }
+
+  // ===== Renders =====
+  function renderLevel2(data) {
+    clear(elL2);
+    if (!elL2) return;
+
+    if (!data) {
+      elL2.appendChild(pText("Aucune annotation pour ce paragraphe."));
+      return;
+    }
+
+    if (Array.isArray(data.authors) && data.authors.length) {
+      const h = document.createElement("h3");
+      h.className = "panel-subtitle";
+      h.textContent = "Auteurs";
+      elL2.appendChild(h);
+
+      const ul = document.createElement("ul");
+      ul.className = "panel-list";
+      for (const a of data.authors) {
+        const li = document.createElement("li");
+        li.textContent = esc(a);
+        ul.appendChild(li);
+      }
+      elL2.appendChild(ul);
+    }
+
+    if (Array.isArray(data.refs) && data.refs.length) {
+      const h = document.createElement("h3");
+      h.className = "panel-subtitle";
+      h.textContent = "Références";
+      elL2.appendChild(h);
+
+      const ul = document.createElement("ul");
+      ul.className = "panel-list";
+      for (const r of data.refs) {
+        const li = document.createElement("li");
+        const label = esc(r?.label || r?.url || "Référence");
+        const url = esc(r?.url || "");
+        const kind = esc(r?.kind || "");
+        if (url) li.appendChild(link(url, label));
+        else li.textContent = label;
+
+        if (kind) {
+          const k = document.createElement("span");
+          k.className = "panel-chip";
+          k.textContent = kind;
+          li.appendChild(document.createTextNode(" "));
+          li.appendChild(k);
+        }
+        ul.appendChild(li);
+      }
+      elL2.appendChild(ul);
+    }
+
+    if (Array.isArray(data.quotes) && data.quotes.length) {
+      const h = document.createElement("h3");
+      h.className = "panel-subtitle";
+      h.textContent = "Citations";
+      elL2.appendChild(h);
+
+      for (const q of data.quotes) {
+        const block = document.createElement("blockquote");
+        block.className = "panel-quote";
+
+        const t = document.createElement("div");
+        t.textContent = esc(q?.text || "");
+        block.appendChild(t);
+
+        const src = esc(q?.source || "");
+        if (src) {
+          const s = document.createElement("div");
+          s.className = "panel-quote__src";
+          s.textContent = src;
+          block.appendChild(s);
+        }
+        elL2.appendChild(block);
+      }
+    }
+
+    if (!elL2.firstChild) {
+      elL2.appendChild(pText("Aucune annotation pour ce paragraphe."));
+    }
+  }
+
+  function renderLevel3(data) {
+    clear(elL3);
+    hideMsg(msgMedia);
+    if (!elL3) return;
+
+    const arr = Array.isArray(data?.media) ? data.media : [];
+    if (!arr.length) {
+      elL3.appendChild(pText("Aucun média associé à ce paragraphe."));
+      if (btnMediaAll) btnMediaAll.disabled = true;
+      return;
+    }
+
+    if (btnMediaAll) btnMediaAll.disabled = arr.length <= 6;
+
+    const grid = document.createElement("div");
+    grid.className = "panel-media-grid";
+
+    const items = mediaShowAll ? arr : arr.slice(0, 6);
+
+    for (const m of items) {
+      const type = esc(m?.type || "link");
+      const src = esc(m?.src || "");
+      const caption = esc(m?.caption || "");
+      const credit = esc(m?.credit || "");
+
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "panel-media-tile";
+      btn.setAttribute("aria-label", caption ? `Ouvrir média: ${caption}` : "Ouvrir média");
+      btn.dataset.src = src;
+      btn.dataset.type = type;
+      btn.dataset.caption = caption;
+
+      if (type === "image" && src) {
+        const img = document.createElement("img");
+        img.loading = "lazy";
+        img.alt = caption || "Illustration";
+        img.src = src;
+        btn.appendChild(img);
+      } else {
+        const ph = document.createElement("div");
+        ph.className = "panel-media-ph";
+        ph.textContent = type.toUpperCase();
+        btn.appendChild(ph);
+      }
+
+      if (caption) {
+        const c = document.createElement("div");
+        c.className = "panel-media-cap";
+        c.textContent = caption;
+        btn.appendChild(c);
+      } else if (src) {
+        const c = document.createElement("div");
+        c.className = "panel-media-cap";
+        c.textContent = src.split("/").pop() || src;
+        btn.appendChild(c);
+      }
+
+      if (credit) {
+        const cr = document.createElement("div");
+        cr.className = "panel-media-credit";
+        cr.textContent = credit;
+        btn.appendChild(cr);
+      }
+
+      bindClickOnce(btn, (ev) => {
+        ev.preventDefault();
+        if (!src) return;
+        openLightbox({ type, src, caption });
+      });
+
+      grid.appendChild(btn);
+    }
+
+    elL3.appendChild(grid);
+  }
+
+  function renderLevel4(data) {
+    clear(elL4);
+    hideMsg(msgComment);
+    if (!elL4) return;
+
+    const arr = Array.isArray(data?.comments_editorial) ? data.comments_editorial : [];
+    if (!arr.length) {
+      elL4.appendChild(pText("Aucun commentaire éditorial pour ce paragraphe."));
+      return;
+    }
+
+    const ul = document.createElement("ul");
+    ul.className = "panel-list";
+
+    for (const c of arr) {
+      const li = document.createElement("li");
+      li.className = "panel-comment";
+
+      const txt = document.createElement("div");
+      txt.textContent = esc(c?.text || "");
+      li.appendChild(txt);
+
+      const st = esc(c?.status || "");
+      if (st) {
+        const s = document.createElement("span");
+        s.className = "panel-chip";
+        s.textContent = st;
+        li.appendChild(s);
+      }
+
+      ul.appendChild(li);
+    }
+
+    elL4.appendChild(ul);
+  }
+
+  async function updatePanel(paraId) {
+    currentParaId = paraId || currentParaId || "";
+    if (elId) elId.textContent = currentParaId || "—";
+    hideMsg(msgHead);
+    hideMsg(msgMedia);
+    hideMsg(msgComment);
+
+    const idx = await loadIndex();
+    const data = idx?.pages?.[pageKey]?.paras?.[currentParaId] || null;
+
+    renderLevel2(data);
+    renderLevel3(data);
+    renderLevel4(data);
+  }
+
+  // ===== media "voir tous" =====
+  if (btnMediaAll) {
+    bindClickOnce(btnMediaAll, (ev) => {
+      ev.preventDefault();
+      mediaShowAll = !mediaShowAll;
+      localStorage.setItem("archicratie:panel:mediaAll", mediaShowAll ? "1" : "0");
+      btnMediaAll.textContent = mediaShowAll ? "Réduire la liste" : "Voir tous les éléments";
+      updatePanel(currentParaId);
+    });
+    btnMediaAll.textContent = mediaShowAll ? "Réduire la liste" : "Voir tous les éléments";
+  }
+
+  // ===== media submit (readers + editors) =====
+  if (btnMediaSubmit) {
+    bindClickOnce(btnMediaSubmit, (ev) => {
+      ev.preventDefault();
+      hideMsg(msgMedia);
+
+      if (guardEventOnce(ev, "gitea_open_media")) return;
+
+      if (!currentParaId) return showMsg(msgMedia, "Choisis d’abord un paragraphe (scroll / survol).", "warn");
+      if (!getG().ready) return showMsg(msgMedia, "Gitea non configuré (PUBLIC_GITEA_*).", "error");
+      if (btnMediaSubmit.disabled) return showMsg(msgMedia, "Connexion requise (readers/editors).", "error");
+
+      const pageUrl = new URL(location.href);
+      pageUrl.search = "";
+      pageUrl.hash = currentParaId;
+
+      const paraTxt = getParaText(currentParaId);
+      const excerpt = paraTxt.length > FULL_TEXT_SOFT_LIMIT ? (paraTxt.slice(0, FULL_TEXT_SOFT_LIMIT) + "…") : paraTxt;
+
+      const title = `[Media] ${currentParaId} — ${docTitle}`;
+      const body = [
+        `Chemin: ${location.pathname}`,
+        `URL: ${pageUrl.toString()}`,
+        `Ancre: #${currentParaId}`,
+        `Version: ${docVersion || "(non renseignée)"}`,
+        `Type: type/media`,
+        ``,
+        `Contexte (extrait):`,
+        quoteBlock(excerpt || ""),
+        ``,
+        `---`,
+        `Action: dans Gitea, ajoute le fichier via la zone “Joindre un fichier” (drag & drop / upload).`,
+        `But: associer le média au paragraphe #${currentParaId}.`,
+      ].join("\n");
+
+      const url = buildIssueURL({ title, body });
+      if (!url) return showMsg(msgMedia, "Impossible de générer l’issue (config).", "error");
+
+      const ok = openOnce(`media:${currentParaId}`, () => openNewTab(url));
+      if (!ok) showMsg(msgMedia, "Popup bloqué : autorise les popups pour ouvrir Gitea.", "error");
+    });
+  }
+
+  // ===== référence submit (readers + editors) =====
+    if (btnRefSubmit) {
+    bindClickOnce(btnRefSubmit, (ev) => {
+        ev.preventDefault();
+        hideMsg(msgRef);
+
+        if (guardEventOnce(ev, "gitea_open_ref")) return;
+
+        if (!currentParaId) return showMsg(msgRef, "Choisis d’abord un paragraphe (scroll / survol).", "warn");
+        if (!getG().ready) return showMsg(msgRef, "Gitea non configuré (PUBLIC_GITEA_*).", "error");
+        if (btnRefSubmit.disabled) return showMsg(msgRef, "Connexion requise (readers/editors).", "error");
+
+        const pageUrl = new URL(location.href);
+        pageUrl.search = "";
+        pageUrl.hash = currentParaId;
+
+        const paraTxt = getParaText(currentParaId);
+        const excerpt = paraTxt.length > FULL_TEXT_SOFT_LIMIT ? (paraTxt.slice(0, FULL_TEXT_SOFT_LIMIT) + "…") : paraTxt;
+
+        const title = `[Reference] ${currentParaId} — ${docTitle}`;
+        const body = [
+        `Chemin: ${location.pathname}`,
+        `URL: ${pageUrl.toString()}`,
+        `Ancre: #${currentParaId}`,
+        `Version: ${docVersion || "(non renseignée)"}`,
+        `Type: type/reference`,
+        ``,
+        `Contexte (extrait):`,
+        quoteBlock(excerpt || ""),
+        ``,
+        `Référence (à compléter):`,
+        `- URL:`,
+        `- Label:`,
+        `- Kind: (livre / article / vidéo / site / autre)`,
+        `- Citation / passage (optionnel):`,
+        ``,
+        `---`,
+        `Note: issue générée depuis le site (pré-remplissage).`,
+        ].join("\n");
+
+        const url = buildIssueURL({ title, body });
+        if (!url) return showMsg(msgRef, "Impossible de générer l’issue.", "error");
+
+        const ok = openOnce(`ref:${currentParaId}`, () => openNewTab(url));
+        if (!ok) showMsg(msgRef, "Si rien ne s’ouvre : autorise les popups pour ce site.", "error");
+    });
+    }
+
+
+  // ===== commentaire (readers + editors) =====
+  if (btnSend) {
+    bindClickOnce(btnSend, (ev) => {
+      ev.preventDefault();
+      hideMsg(msgComment);
+
+      if (guardEventOnce(ev, "gitea_open_comment")) return;
+
+      if (!currentParaId) return showMsg(msgComment, "Choisis d’abord un paragraphe (scroll / survol).", "warn");
+      if (!getG().ready) return showMsg(msgComment, "Gitea non configuré (PUBLIC_GITEA_*).", "error");
+      if (btnSend.disabled) return showMsg(msgComment, "Connexion requise (readers/editors).", "error");
+
+      const txt = String(taComment?.value || "").trim();
+      if (txt.length < 3) return showMsg(msgComment, "Commentaire trop court.", "warn");
+
+      const pageUrl = new URL(location.href);
+      pageUrl.search = "";
+      pageUrl.hash = currentParaId;
+
+      const paraTxt = getParaText(currentParaId);
+      const excerpt = paraTxt.length > FULL_TEXT_SOFT_LIMIT ? (paraTxt.slice(0, FULL_TEXT_SOFT_LIMIT) + "…") : paraTxt;
+
+      const title = `[Comment] ${currentParaId} — ${docTitle}`;
+      const body = [
+        `Chemin: ${location.pathname}`,
+        `URL: ${pageUrl.toString()}`,
+        `Ancre: #${currentParaId}`,
+        `Version: ${docVersion || "(non renseignée)"}`,
+        `Type: type/comment`,
+        ``,
+        `Contexte (extrait):`,
+        quoteBlock(excerpt || ""),
+        ``,
+        `Commentaire:`,
+        txt,
+        ``,
+        `---`,
+        `Note: issue générée depuis le site (pré-remplissage).`,
+      ].join("\n");
+
+      const url = buildIssueURL({ title, body });
+      if (!url) return showMsg(msgComment, "Impossible de générer l’issue.", "error");
+
+      const ok = openOnce(`comment:${currentParaId}`, () => openNewTab(url));
+      if (!ok) return showMsg(msgComment, "Popup bloqué : autorise les popups pour ouvrir Gitea.", "error");
+
+      taComment.value = "";
+      showMsg(msgComment, "Issue Gitea ouverte dans un nouvel onglet.", "ok");
+      setTimeout(() => hideMsg(msgComment), 900);
+    });
+  }
+
+  // ===== wiring: para courant (aligné sur le paragraphe sous le reading-follow) =====
+  function isPara(el) {
+    return Boolean(el && el.nodeType === 1 && el.matches && el.matches('.reading p[id^="p-"]'));
+  }
+
+  function pickParaAtY(y) {
+    const x = Math.max(0, Math.round(window.innerWidth * 0.5));
+    const candidates = [
+      document.elementFromPoint(x, y),
+      document.elementFromPoint(Math.min(window.innerWidth - 1, x + 60), y),
+      document.elementFromPoint(Math.max(0, x - 60), y),
+    ].filter(Boolean);
+
+    for (const c of candidates) {
+      if (isPara(c)) return c;
+      const p = c.closest ? c.closest('.reading p[id^="p-"]') : null;
+      if (isPara(p)) return p;
+    }
+    return null;
+  }
+
+  let _lastPicked = "";
+  function syncFromFollowLine() {
+    const off = Number(document.documentElement.style.getPropertyValue("--sticky-offset-px")) || 0;
+    const y = Math.round(off + 8);
+    const p = pickParaAtY(y);
+    if (!p || !p.id) return;
+    if (p.id === _lastPicked) return;
+    _lastPicked = p.id;
+
+    // met à jour l'app global (EditionLayout écoute déjà currentPara)
+    try { window.dispatchEvent(new CustomEvent("archicratie:currentPara", { detail: { id: p.id } })); } catch {}
+
+    // et met à jour le panel immédiatement (sans attendre)
+    updatePanel(p.id);
+  }
+
+  let ticking = false;
+  function onScroll() {
+    if (ticking) return;
+    ticking = true;
+    requestAnimationFrame(() => {
+      ticking = false;
+      syncFromFollowLine();
+    });
+  }
+
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", onScroll);
+
+  // Initial: hash > sinon calc
+  const initial = String(location.hash || "").replace(/^#/, "");
+  if (/^p-\d+-/i.test(initial)) updatePanel(initial);
+  else setTimeout(() => { try { syncFromFollowLine(); } catch {} }, 0);
+})();
+</script>
+
+<style>
+  /* Fallback : niveau 1 → jamais de panel */
+  :global(body[data-reading-level="1"]) .page-panel{ display: none !important; }
+
+  .page-panel{
+    grid-column: 3;
+    position: sticky;
+    top: calc(var(--sticky-header-h) + var(--page-gap));
+    align-self: start;
+  }
+
+  :global(body[data-reading-level="3"]) .page-panel{
+    grid-column: 2;
+  }
+
+  .page-panel__inner{
+    max-height: calc(100vh - (var(--sticky-header-h) + var(--page-gap) + 12px));
+    overflow: auto;
+    scrollbar-gutter: stable;
+
+    border: 1px solid rgba(127,127,127,.22);
+    border-radius: 16px;
+    padding: 12px;
+    background: rgba(127,127,127,0.04);
+  }
+
+  .panel-head{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px dashed rgba(127,127,127,0.25);
+  }
+
+  .panel-head__left{
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .panel-head__label{ font-weight: 900; opacity: .8; }
+  .panel-head__id{
+    font-weight: 850;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 14rem;
+  }
+
+  .panel-msg{
+    margin-top: 8px;
+    font-size: 12px;
+    opacity: .95;
+  }
+  .panel-msg--head{
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+
+  .panel-title{
+    font-size: 13px;
+    font-weight: 900;
+    margin: 10px 0 8px;
+    opacity: .9;
+  }
+  .panel-subtitle{
+    font-size: 12px;
+    font-weight: 850;
+    margin: 10px 0 6px;
+    opacity: .88;
+  }
+
+  .panel-body p{ margin: 8px 0; opacity: .9; }
+
+  .panel-list{ margin: 0; padding-left: 18px; }
+  .panel-list li{ margin: 6px 0; }
+
+  .panel-chip{
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 11px;
+    font-weight: 800;
+    padding: 2px 7px;
+    border-radius: 999px;
+    border: 1px solid rgba(127,127,127,0.30);
+    background: rgba(127,127,127,0.10);
+    opacity: .92;
+  }
+
+  .panel-quote{
+    margin: 8px 0;
+    padding: 8px 10px;
+    border-left: 3px solid rgba(127,127,127,0.35);
+    background: rgba(127,127,127,0.06);
+    border-radius: 10px;
+  }
+  .panel-quote__src{ margin-top: 6px; font-size: 12px; opacity: .85; }
+
+  .panel-actions{
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-top: 10px;
+  }
+
+  .panel-btn{
+    border: 1px solid rgba(127,127,127,0.40);
+    background: rgba(127,127,127,0.10);
+    border-radius: 999px;
+    padding: 6px 10px;
+    font-size: 13px;
+    cursor: pointer;
+  }
+  .panel-btn:disabled{ opacity: .55; cursor: default; }
+  .panel-btn--primary{
+    border-color: rgba(127,127,127,0.65);
+    font-weight: 800;
+  }
+
+  /* actions médias en haut */
+  .panel-top-actions{ margin-top: 8px; }
+
+  /* ===== media thumbnails (150x150) ===== */
+  .panel-media-grid{
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 10px;
+  }
+
+  .panel-media-tile{
+    width: 150px;
+    max-width: 100%;
+    border: 1px solid rgba(127,127,127,.20);
+    border-radius: 14px;
+    padding: 8px;
+    background: rgba(127,127,127,0.04);
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .panel-media-tile img{
+    width: 150px;
+    height: 150px;
+    max-width: 100%;
+    object-fit: cover;
+    display: block;
+    border-radius: 10px;
+    margin-bottom: 8px;
+  }
+
+  .panel-media-ph{
+    width: 150px;
+    height: 150px;
+    border-radius: 10px;
+    display: grid;
+    place-items: center;
+    background: rgba(127,127,127,0.10);
+    margin-bottom: 8px;
+    font-weight: 900;
+    font-size: 12px;
+    opacity: .9;
+  }
+
+  .panel-media-cap{
+    font-size: 12px;
+    font-weight: 800;
+    opacity: .92;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .panel-media-credit{
+    margin-top: 4px;
+    font-size: 11px;
+    opacity: .8;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* ===== compose ===== */
+  .panel-compose{ margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(127,127,127,0.25); }
+  .panel-label{ display: block; font-size: 12px; font-weight: 900; opacity: .9; margin-bottom: 6px; }
+
+  .panel-textarea{
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid rgba(127,127,127,0.35);
+    border-radius: 12px;
+    padding: 8px 10px;
+    background: transparent;
+    font-size: 13px;
+    resize: vertical;
+  }
+
+  /* ===== Lightbox ===== */
+  .panel-lightbox{
+    position: fixed;
+    inset: 0;
+    z-index: 120;
+  }
+
+  .panel-lightbox__overlay{
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0,0.80);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+  }
+
+  .panel-lightbox__dialog{
+    position: absolute;
+    right: 24px;
+    top: calc(var(--sticky-header-h) + 16px);
+    width: min(520px, calc(100vw - 48px));
+    max-height: calc(100vh - (var(--sticky-header-h) + 32px));
+    overflow: auto;
+
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 16px;
+    background: rgba(255,255,255,0.10);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    padding: 12px;
+  }
+
+  @media (prefers-color-scheme: dark){
+    .panel-lightbox__dialog{
+      background: rgba(0,0,0,0.28);
+    }
+  }
+
+  .panel-lightbox__close{
+    position: sticky;
+    top: 0;
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 30px;
+    border-radius: 10px;
+    border: 1px solid rgba(127,127,127,0.35);
+    background: rgba(127,127,127,0.10);
+    cursor: pointer;
+    font-size: 18px;
+    font-weight: 900;
+  }
+
+  .panel-lightbox__content img,
+  .panel-lightbox__content video{
+    display: block;
+    width: 100%;
+    height: auto;
+    max-width: 1400px;
+    margin: 0 auto;
+    border-radius: 12px;
+  }
+
+  .panel-lightbox__content audio{
+    width: 100%;
+  }
+
+  .panel-lightbox__caption{
+    margin-top: 10px;
+    font-size: 12px;
+    font-weight: 800;
+    opacity: .92;
+  }
+
+  @media (max-width: 1100px){
+    .page-panel{ display: none; }
+  }
+</style>
diff --git a/src/layouts/EditionLayout.astro b/src/layouts/EditionLayout.astro
index a6ab57f..3c66d5f 100644
--- a/src/layouts/EditionLayout.astro
+++ b/src/layouts/EditionLayout.astro
@@ -3,6 +3,7 @@ import ProposeModal from "../components/ProposeModal.astro";
 import SiteNav from "../components/SiteNav.astro";
 import LevelToggle from "../components/LevelToggle.astro";
 import BuildStamp from "../components/BuildStamp.astro";
+import SidePanel from "../components/SidePanel.astro";
 import "../styles/global.css";
 
 const {
@@ -21,10 +22,14 @@ const canonical = Astro.site
   ? new URL(Astro.url.pathname, Astro.site).href
   : Astro.url.href;
 
-// Cible Gitea (injectée au build)
+const IS_DEV = import.meta.env.DEV;
+
 const GITEA_BASE = import.meta.env.PUBLIC_GITEA_BASE ?? "";
 const GITEA_OWNER = import.meta.env.PUBLIC_GITEA_OWNER ?? "";
 const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
+
+// ✅ OPTIONNEL : bridge serveur (proxy same-origin)
+const ISSUE_BRIDGE_PATH = import.meta.env.PUBLIC_ISSUE_BRIDGE_PATH ?? "";
 ---
 
 <!doctype html>
@@ -45,19 +50,115 @@ const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
     <meta data-pagefind-meta={`level:${String(lvl)}`} />
     <meta data-pagefind-meta={`status:${String(statusKey ?? statusLabel)}`} />
     <meta data-pagefind-meta={`version:${String(version ?? "")}`} />
+
+    {/* ✅ BOOT EARLY : SidePanel dépend de ces globals. */}
+    <script is:inline define:vars={{ IS_DEV, GITEA_BASE, GITEA_OWNER, GITEA_REPO, ISSUE_BRIDGE_PATH }}>
+(() => {
+  const __DEV__ = Boolean(IS_DEV);
+  window.__archiFlags = Object.assign({}, window.__archiFlags, { dev: __DEV__ });
+
+  const base = String(GITEA_BASE || "").replace(/\/+$/, "");
+  const owner = String(GITEA_OWNER || "");
+  const repo = String(GITEA_REPO || "");
+  const giteaReady = Boolean(base && owner && repo);
+  window.__archiGitea = { ready: giteaReady, base, owner, repo };
+
+  const rawBridge = String(ISSUE_BRIDGE_PATH || "").trim();
+  const normBridge = rawBridge
+    ? (rawBridge.startsWith("/") ? rawBridge : ("/" + rawBridge.replace(/^\/+/, ""))).replace(/\/+$/, "")
+    : "";
+  window.__archiIssueBridge = { ready: Boolean(normBridge), path: normBridge };
+
+  const WHOAMI_PATH = "/_auth/whoami";
+  const REQUIRED_GROUP = "editors";
+  const READ_GROUP = "readers";
+
+  function parseWhoamiLine(text, key) {
+    const re = new RegExp(`^${key}:\\s*(.*)$`, "mi");
+    const m = String(text || "").match(re);
+    return (m?.[1] ?? "").trim();
+  }
+  function inGroup(groups, g) {
+    const gg = String(g || "").toLowerCase();
+    return Array.isArray(groups) && groups.some((x) => String(x).toLowerCase() === gg);
+  }
+
+  if (!window.__archiAuthInfoP) {
+    window.__archiAuthInfoP = (async () => {
+      const res = await fetch(`${WHOAMI_PATH}?_=${Date.now()}`, {
+        credentials: "include",
+        cache: "no-store",
+        redirect: "manual",
+        headers: { Accept: "text/plain" },
+      }).catch(() => null);
+
+      if (!res) return { ok: false, user: "", name: "", email: "", groups: [], raw: "" };
+      if (res.status >= 300 && res.status < 400) return { ok: false, user: "", name: "", email: "", groups: [], raw: "" };
+
+      const text = await res.text().catch(() => "");
+      const looksLikeWhoami = /Remote-(User|Groups|Email|Name)\s*:/i.test(text);
+      if (!res.ok || !looksLikeWhoami) return { ok: false, user: "", name: "", email: "", groups: [], raw: text };
+
+      const groups = parseWhoamiLine(text, "Remote-Groups")
+        .split(/[;,]/)
+        .map((s) => s.trim())
+        .filter(Boolean)
+        .map((s) => s.toLowerCase());
+
+      return {
+        ok: true,
+        user: parseWhoamiLine(text, "Remote-User"),
+        name: parseWhoamiLine(text, "Remote-Name"),
+        email: parseWhoamiLine(text, "Remote-Email"),
+        groups,
+        raw: text,
+      };
+    })().catch(() => ({ ok: false, user: "", name: "", email: "", groups: [], raw: "" }));
+  }
+
+  if (!window.__archiCanReadP) {
+    window.__archiCanReadP = window.__archiAuthInfoP.then((info) =>
+      Boolean(info.ok && (inGroup(info.groups, READ_GROUP) || inGroup(info.groups, REQUIRED_GROUP)))
+    );
+  }
+
+  if (!window.__archiIsEditorP) {
+    window.__archiIsEditorP = window.__archiAuthInfoP
+      .then((info) => Boolean(inGroup(info.groups, REQUIRED_GROUP) || (__DEV__ && !info.ok)))
+      .catch(() => false);
+  }
+})();
+    </script>
   </head>
 
-  <body data-doc-title={title} data-doc-version={version}>
+  <body
+    data-doc-title={title}
+    data-doc-version={version}
+    data-reading-level={String(lvl)}
+  >
     <header>
       <SiteNav />
       <div class="edition-bar">
-        <span class="badge"><strong>Édition</strong> : {editionLabel}</span>
-        <span class="badge"><strong>Statut</strong> : {statusLabel}</span>
-        <span class="badge"><strong>Niveau</strong> : {lvl}</span>
-        <span class="badge"><strong>Version</strong> : {version}</span>
+        <span class="badge" data-badge="edition"><strong>Édition</strong> : {editionLabel}</span>
+        <span class="badge" data-badge="status"><strong>Statut</strong> : {statusLabel}</span>
+        <span class="badge" data-badge="version"><strong>Version</strong> : {version}</span>
 
         <a class="resume-btn" id="resume-btn" href="#" hidden>Reprendre la lecture</a>
 
+        <form class="jump-form" id="jump-form" role="search" aria-label="Aller à un paragraphe par identifiant">
+          <input
+            class="jump-input"
+            id="jump-input"
+            type="search"
+            inputmode="search"
+            autocomplete="off"
+            spellcheck="false"
+            placeholder="Aller à ¶ (p-… / URL#p-… / extrait)"
+            aria-label="Identifiant ou extrait de paragraphe"
+          />
+          <button class="jump-btn" id="jump-go" type="submit">Aller</button>
+        </form>
+
         <LevelToggle initialLevel={lvl} />
       </div>
     </header>
@@ -74,35 +175,20 @@ const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
           <slot />
           <BuildStamp />
         </article>
+
+        <SidePanel />
       </div>
     </main>
 
-    <!-- Bandeau lecture (H1/H2/H3 uniquement) -->
     <div class="reading-follow" id="reading-follow" aria-hidden="true">
       <div class="reading-follow__inner">
         <button class="rf-line rf-h1" id="rf-h1" type="button" hidden></button>
         <button class="rf-line rf-h2" id="rf-h2" type="button" hidden></button>
         <button class="rf-line rf-h3" id="rf-h3" type="button" hidden></button>
 
-        <!-- Actions : haut chapitre / haut section -->
         <div class="rf-actions" aria-label="Navigation rapide">
-          <button
-            class="rf-btn"
-            id="rf-top-chapter"
-            type="button"
-            hidden
-            aria-label="Haut du chapitre"
-            title="Haut du chapitre"
-          >↑</button>
-
-          <button
-            class="rf-btn"
-            id="rf-top-section"
-            type="button"
-            hidden
-            aria-label="Haut de la section"
-            title="Haut de la section"
-          >↥</button>
+          <button class="rf-btn" id="rf-top-chapter" type="button" hidden aria-label="Haut du chapitre" title="Haut du chapitre">↑</button>
+          <button class="rf-btn" id="rf-top-section" type="button" hidden aria-label="Haut de la section" title="Haut de la section">↥</button>
         </div>
       </div>
     </div>
@@ -117,67 +203,124 @@ const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
       .page-shell{
         --aside-w: 320px;
         --reading-w: 78ch;
+        --panel-w: 380px;
         --gap: 18px;
 
+        max-width: calc(var(--aside-w) + var(--reading-w) + var(--panel-w) + (var(--gap) * 2));
+        margin: 0 auto;
+
         display: grid;
-        grid-template-columns: 1fr var(--aside-w) minmax(0, var(--reading-w)) 1fr;
+        grid-template-columns: var(--aside-w) minmax(0, var(--reading-w)) var(--panel-w);
         column-gap: var(--gap);
         align-items: start;
       }
 
       .page-aside{
-        grid-column: 2;
+        grid-column: 1;
         position: sticky;
-
-        /* colle sous header + padding haut */
         top: calc(var(--sticky-header-h) + var(--page-gap));
-
-        /* ⛔️ plus de scroll ici */
         overflow: visible;
         max-height: none;
       }
 
       .page-aside__scroll{
-        /* ✅ le scroll est ici, donc englobe TOC global + local */
         max-height: calc(100vh - (var(--sticky-header-h) + var(--page-gap) + 12px));
         overflow: auto;
-
         padding-right: 8px;
         padding-top: 6px;
-
         scrollbar-gutter: stable;
       }
 
+      /* ✅ Mode “lecture continue” :
+        - on garde <details> pour les ancres / JS
+        - mais on supprime l’UX accordéon (summary) et on montre le vrai H2
+      */
+      :global(.reading details.details-section){
+        border: 0 !important;
+        padding: 0 !important;
+        margin: 22px 0 !important;
+        background: transparent !important;
+      }
+
+      /* summary invisible (plus de “Ouvrir la section…”) */
+      :global(.reading details.details-section > summary.details-summary){
+        position: absolute !important;
+        left: -9999px !important;
+        width: 1px !important;
+        height: 1px !important;
+        overflow: hidden !important;
+        white-space: nowrap !important;
+        border: 0 !important;
+        padding: 0 !important;
+        margin: 0 !important;
+      }
+
+      /* pas de “gap” artificiel ajouté après le summary */
+      :global(.reading details .details-body){
+        margin-top: 0 !important;
+      }
+
+      /* le vrai H2 redevient visible */
+      :global(.reading details .details-body > h2:first-child){
+        position: static !important;
+        left: auto !important;
+        width: auto !important;
+        height: auto !important;
+        overflow: visible !important;
+        white-space: normal !important;
+      }
+
+
       .reading{
-        grid-column: 3;
+        grid-column: 2;
         max-width: none;
         margin: 0;
       }
 
-      @media (max-width: 1100px){
+      /* Niveau 1 : panel OFF + lecture large */
+      :global(body[data-reading-level="1"]) .page-shell{
+        --panel-w: 0px;
+        max-width: min(1560px, calc(100vw - 32px));
+        grid-template-columns: var(--aside-w) minmax(0, 1fr);
+      }
+      :global(body[data-reading-level="1"]) .page-panel{ display: none !important; }
+
+      /* Niveau 3 : lecture plus étroite + panel large ; TOC masqué */
+      :global(body[data-reading-level="3"]) .page-shell{
+        --reading-w: 62ch;
+        --panel-w: 560px;
+        max-width: calc(var(--reading-w) + var(--panel-w) + (var(--gap) * 1));
+        grid-template-columns: minmax(0, var(--reading-w)) var(--panel-w);
+      }
+      :global(body[data-reading-level="3"]) .page-aside{ display: none; }
+      :global(body[data-reading-level="3"]) .reading{ grid-column: 1; }
+
+      /* Niveau 4 : TOC à gauche + panel */
+      :global(body[data-reading-level="4"]) .page-shell{
+        --aside-w: 320px;
+        --reading-w: 64ch;
+        --panel-w: 520px;
+        max-width: calc(var(--aside-w) + var(--reading-w) + var(--panel-w) + (var(--gap) * 2));
+        grid-template-columns: var(--aside-w) minmax(0, var(--reading-w)) var(--panel-w);
+      }
+      :global(body[data-reading-level="4"]) .page-aside{ display: block; }
+      :global(body[data-reading-level="4"]) .reading{ grid-column: 2; }
+
+      @media (max-width: 1260px){
         .page-shell{
           max-width: 1180px;
-          margin: 0 auto;
           grid-template-columns: var(--aside-w) minmax(0, 1fr);
         }
-        .page-aside{ grid-column: 1; }
-        .reading{
-          grid-column: 2;
-          max-width: 78ch;
-          margin: 0 auto;
-        }
+        .reading{ max-width: 78ch; margin: 0 auto; }
       }
 
       @media (max-width: 860px){
         .page-shell{
           max-width: 78ch;
-          margin: 0 auto;
           grid-template-columns: 1fr;
         }
         .page-aside{
-          grid-column: 1;
           position: static;
-          overflow: visible;
           margin-bottom: 12px;
         }
         .page-aside__scroll{
@@ -186,411 +329,592 @@ const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
           padding-right: 0;
           padding-top: 0;
         }
-        .reading{
-          grid-column: 1;
-          max-width: 78ch;
-          margin: 0 auto;
-        }
+        .reading{ max-width: 78ch; margin: 0 auto; }
+      }
+
+      /* ===== para-tools layout (non destructif, surcouche) ===== */
+      :global(.reading p[id^="p-"]){
+        position: relative;
+        padding-right: 132px;
+      }
+      :global(.para-tools){
+        position: absolute;
+        right: 0;
+        top: -2px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 6px;
+        z-index: 2;
+      }
+      :global(.para-id){
+        border: 1px solid rgba(127,127,127,0.45);
+        background: rgba(127,127,127,0.08);
+        border-radius: 999px;
+        padding: 2px 8px;
+        font-size: 12px;
+        font-weight: 750;
+        cursor: pointer;
+        user-select: none;
+      }
+      :global(.para-tools-actions){
+        display: flex;
+        gap: 6px;
+      }
+      :global(.para-bookmark){
+        align-self: flex-end;
+      }
+
+      /* ✅ repère visuel du para "pilotant" le SidePanel */
+      :global(.reading p.is-panel-current){
+        background: rgba(140,140,255,0.07);
+        border-radius: 12px;
       }
     </style>
 
-    <script is:inline define:vars={{ GITEA_BASE, GITEA_OWNER, GITEA_REPO }}>
+    <script is:inline>
 (() => {
-  try {
-    const PAGE_GAP = 12;   // doit matcher --page-gap (css)
-    const HYST = 4;        // micro-hystérésis px
+  const safe = (label, fn) => {
+    try { fn(); }
+    catch (e) { console.error(`[EditionLayout] ${label} failed:`, e); }
+  };
 
-    const headerEl = document.querySelector("header");
-    const followEl = document.getElementById("reading-follow");
-    const reading = document.querySelector("article.reading");
+  const PAGE_GAP = 12;
+  const HYST = 4;
 
-    const rfH1 = document.getElementById("rf-h1");
-    const rfH2 = document.getElementById("rf-h2");
-    const rfH3 = document.getElementById("rf-h3");
+  const headerEl = document.querySelector("header");
+  const followEl = document.getElementById("reading-follow");
+  const reading = document.querySelector("article.reading");
 
-    const btnTopChapter = document.getElementById("rf-top-chapter");
-    const btnTopSection = document.getElementById("rf-top-section");
+  const rfH1 = document.getElementById("rf-h1");
+  const rfH2 = document.getElementById("rf-h2");
+  const rfH3 = document.getElementById("rf-h3");
+  const btnTopChapter = document.getElementById("rf-top-chapter");
+  const btnTopSection = document.getElementById("rf-top-section");
 
-    function px(n){ return `${Math.max(0, Math.round(n))}px`; }
-    function setRootVar(name, value) {
-      document.documentElement.style.setProperty(name, value);
-    }
+  const docTitle = document.body?.dataset?.docTitle || document.title || "Archicratie";
+  const docVersion = document.body?.dataset?.docVersion || "";
 
-    function headerH() {
-      return headerEl ? headerEl.getBoundingClientRect().height : 0;
-    }
+  function px(n){ return `${Math.max(0, Math.round(n))}px`; }
+  function setRootVar(name, value) { document.documentElement.style.setProperty(name, value); }
+  function headerH() { return headerEl ? headerEl.getBoundingClientRect().height : 0; }
 
-    function syncHeaderH() {
-      setRootVar("--sticky-header-h", px(headerH()));
-      setRootVar("--page-gap", px(PAGE_GAP));
-    }
+  function syncHeaderH() {
+    setRootVar("--sticky-header-h", px(headerH()));
+    setRootVar("--page-gap", px(PAGE_GAP));
+  }
 
-    function syncReadingRect() {
-      if (!reading) return;
-      const r = reading.getBoundingClientRect();
-      setRootVar("--reading-left", px(r.left));
-      setRootVar("--reading-width", px(r.width));
-    }
+  function syncReadingRect() {
+    if (!reading) return;
+    const r = reading.getBoundingClientRect();
+    setRootVar("--reading-left", px(r.left));
+    setRootVar("--reading-width", px(r.width));
+  }
 
-    function syncHeadingMetrics() {
-      if (!reading) return;
+  function syncHeadingMetrics() {
+    if (!reading) return;
 
-      const h1 = reading.querySelector("h1");
-      const h2 = reading.querySelector("h2");
-      const h3 = reading.querySelector("h3");
+    const h1 = reading.querySelector("h1");
+    const h2 = reading.querySelector("h2");
+    const h3 = reading.querySelector("h3");
 
-      const sync = (el, prefix) => {
-        if (!el) return;
-        const cs = getComputedStyle(el);
-        if (cs.fontSize) setRootVar(`--rf-${prefix}-size`, cs.fontSize);
-        if (cs.lineHeight) setRootVar(`--rf-${prefix}-lh`, cs.lineHeight);
-        if (cs.fontWeight) setRootVar(`--rf-${prefix}-fw`, cs.fontWeight);
-      };
+    const sync = (el, prefix) => {
+      if (!el) return;
+      const cs = getComputedStyle(el);
+      if (cs.fontSize) setRootVar(`--rf-${prefix}-size`, cs.fontSize);
+      if (cs.lineHeight) setRootVar(`--rf-${prefix}-lh`, cs.lineHeight);
+      if (cs.fontWeight) setRootVar(`--rf-${prefix}-fw`, cs.fontWeight);
+    };
 
-      sync(h1, "h1");
-      sync(h2, "h2");
-      sync(h3, "h3");
-    }
+    sync(h1, "h1");
+    sync(h2, "h2");
+    sync(h3, "h3");
+  }
 
-    syncHeaderH();
-    syncReadingRect();
-    syncHeadingMetrics();
+  syncHeaderH(); syncReadingRect(); syncHeadingMetrics();
 
-    if (document.fonts && document.fonts.ready) {
-      document.fonts.ready.then(() => {
-        syncHeaderH();
-        syncReadingRect();
-        syncHeadingMetrics();
-      }).catch(() => {});
-    }
+  if (document.fonts && document.fonts.ready) {
+    document.fonts.ready.then(() => {
+      syncHeaderH(); syncReadingRect(); syncHeadingMetrics();
+    }).catch(() => {});
+  }
 
-    window.addEventListener("resize", () => {
-      requestAnimationFrame(() => {
-        syncHeaderH();
-        syncReadingRect();
-        syncHeadingMetrics();
-      });
-    });
+  function getStickyOffsetPx() {
+    const raw = getComputedStyle(document.documentElement)
+      .getPropertyValue("--sticky-offset-px")
+      .trim();
+    const n = Number.parseFloat(raw);
+    return Number.isFinite(n) ? n : (headerH() + PAGE_GAP);
+  }
 
-    function getStickyOffsetPx() {
-      const raw = getComputedStyle(document.documentElement)
-        .getPropertyValue("--sticky-offset-px")
-        .trim();
-      const n = Number.parseFloat(raw);
-      return Number.isFinite(n) ? n : (headerH() + PAGE_GAP);
-    }
+  function absTop(el) {
+    const r = el.getBoundingClientRect();
+    return r.top + (window.scrollY || 0);
+  }
 
-    function absTop(el) {
-      const r = el.getBoundingClientRect();
-      return r.top + (window.scrollY || 0);
-    }
+  function scrollToElWithOffset(el, extra = 10, behavior = "auto") {
+    const y = absTop(el) - getStickyOffsetPx() - extra;
+    window.scrollTo({ top: Math.max(0, y), behavior });
+  }
 
-    function scrollToElWithOffset(el, extra = 10, behavior = "auto") {
-      const y = absTop(el) - getStickyOffsetPx() - extra;
-      window.scrollTo({ top: Math.max(0, y), behavior });
-    }
+  // ===== details open (robuste) + export =====
+  function openDetailsIfNeeded(el) {
+    try {
+      if (!el) return;
 
-    function openDetailsIfNeeded(el) {
-      const d = el && el.closest && el.closest("details");
-      if (d && !d.open) d.open = true;
-    }
+      let d = el.closest?.("details") || null;
 
-    // ==========================
-    // Bookmarks (pinned + auto)
-    // ==========================
-    const PINNED_KEY = "archicratie:bookmark:pinned";
-    const LAST_KEY = `archicratie:bookmark:last:${window.location.pathname}`;
-
-    function readJSON(key) {
-      try { return JSON.parse(localStorage.getItem(key) || "null"); }
-      catch { return null; }
-    }
-    function writeJSON(key, obj) {
-      try { localStorage.setItem(key, JSON.stringify(obj)); } catch {}
-    }
-
-    function updateResumeButton() {
-      const btn = document.getElementById("resume-btn");
-      if (!btn) return;
-
-      const bm = readJSON(PINNED_KEY) || readJSON(LAST_KEY);
-      if (!bm || !bm.url) { btn.hidden = true; return; }
-
-      btn.hidden = false;
-      btn.href = bm.url;
-      btn.title = bm.title ? `Reprendre : ${bm.title}` : "Reprendre la lecture";
-
-      btn.onclick = (ev) => {
-        try {
-          const here = new URL(window.location.href);
-          here.search = "";
-
-          const target = new URL(bm.url, window.location.origin);
-          target.search = "";
-
-          if (here.pathname === target.pathname) {
-            ev.preventDefault();
-            const id = (target.hash || "").slice(1);
-            if (!id) return;
-
-            const el = document.getElementById(id);
-            if (!el) return;
-
-            openDetailsIfNeeded(el);
-            scrollToElWithOffset(el, 12, "auto");
-            history.replaceState(null, "", here.pathname + "#" + id);
-          }
-        } catch {}
-      };
-    }
-
-    // Nettoyage si un ancien bug a injecté ?body=... dans l'URL
-    if (window.location.search.includes("body=")) {
-      history.replaceState(null, "", window.location.pathname + window.location.hash);
-    }
-
-    // Hotfix compat citabilité : fallback #p-<idx>-<hash>
-    (function resolveLegacyParagraphHash() {
-      const h = window.location.hash || "";
-      const m = h.match(/^#p-(\d+)-[0-9a-f]{8}$/i);
-      if (!m) return;
-
-      const oldId = h.slice(1);
-      if (document.getElementById(oldId)) return;
-
-      const idx = m[1];
-      const prefix = `p-${idx}-`;
-      const replacement = document.querySelector(`[id^="${prefix}"]`);
-      if (!replacement) return;
-
-      console.warn("[anchors] legacy hash fallback used:", `#${oldId}`, "→", `#${replacement.id}`);
-      scrollToElWithOffset(replacement, 12, "auto");
-    })();
-
-    const docTitle = document.body.dataset.docTitle || document.title;
-    const docVersion = document.body.dataset.docVersion || "";
-
-    updateResumeButton();
-
-    // ==========================
-    // Gitea propose (optional)
-    // ==========================
-    const giteaReady = Boolean(GITEA_BASE && GITEA_OWNER && GITEA_REPO);
-    const FULL_TEXT_SOFT_LIMIT = 1600;
-    const URL_HARD_LIMIT = 6500;
-
-    // ✅ Gate par groupe (Traefik→Authelia→LLDAP via /_auth/whoami)
-    const WHOAMI_PATH = "/_auth/whoami";
-    const PROPOSE_REQUIRED_GROUP = "editors";
-
-    let _authInfoPromise = null;
-
-    function parseWhoamiLine(text, key) {
-      const re = new RegExp(`^${key}:\\s*(.*)$`, "mi");
-      const m = String(text || "").match(re);
-      return (m?.[1] ?? "").trim();
-    }
-
-    async function getAuthInfo() {
-      if (_authInfoPromise) return _authInfoPromise;
-
-      _authInfoPromise = (async () => {
-        const res = await fetch(`${WHOAMI_PATH}?_=${Date.now()}`, {
-          credentials: "include",
-          cache: "no-store",
-          redirect: "follow",
-        });
-
-        const text = await res.text().catch(() => "");
-
-        const groups = parseWhoamiLine(text, "Remote-Groups")
-          .split(",")
-          .map((s) => s.trim())
-          .filter(Boolean);
-
-        return {
-          ok: Boolean(res && res.ok),
-          user: parseWhoamiLine(text, "Remote-User"),
-          name: parseWhoamiLine(text, "Remote-Name"),
-          email: parseWhoamiLine(text, "Remote-Email"),
-          groups,
-          raw: text,
-        };
-      })().catch((err) => {
-        console.warn("[proposer] whoami fetch failed", err);
-        return {
-          ok: false,
-          user: "",
-          name: "",
-          email: "",
-          groups: [],
-          raw: "",
-        };
-      });
-
-      return _authInfoPromise;
-    }
-
-    // Promise unique : est-on editor ?
-    // ⚠️ On reste fail-closed, mais NON destructif (on ne supprime pas sur erreur réseau)
-    const isEditorP = giteaReady
-      ? getAuthInfo().then((info) => info.groups.includes(PROPOSE_REQUIRED_GROUP))
-      : Promise.resolve(false);
-
-    const quoteBlock = (s) =>
-      String(s || "")
-        .split(/\r?\n/)
-        .map((l) => (`> ${l}`).trimEnd())
-        .join("\n");
-
-    function buildIssueURL(anchorId, fullText, excerpt) {
-      const base = String(GITEA_BASE).replace(/\/+$/, "");
-      const issue = new URL(`${base}/${GITEA_OWNER}/${GITEA_REPO}/issues/new`);
-
-      const local = new URL(window.location.href);
-      local.search = "";
-      local.hash = anchorId;
-
-      const path = local.pathname;
-      const issueTitle = `[Correction] ${anchorId} — ${docTitle}`;
-
-      const hasFull = Boolean(fullText && fullText.length);
-      const canTryFull = hasFull && fullText.length <= FULL_TEXT_SOFT_LIMIT;
-
-      const makeBody = (embedFull) => {
-        const header = [
-          `Chemin: ${path}`,
-          `URL locale: ${local.toString()}`,
-          `Ancre: #${anchorId}`,
-          `Version: ${docVersion || "(non renseignée)"}`,
-          `Type: type/correction`,
-          `State: state/recevable`,
-          ``,
-        ];
-
-        const texteActuel = embedFull
-          ? [`Texte actuel (copie exacte du paragraphe):`, quoteBlock(fullText)]
-          : [
-              `Texte actuel (extrait):`,
-              quoteBlock(excerpt || ""),
-              ``,
-              `Note: paragraphe long → extrait (pour éviter une URL trop longue).`,
-            ];
-
-        const footer = [
-          ``,
-          `Proposition (remplacer par):`,
-          ``,
-          `Justification:`,
-          ``,
-          `---`,
-          `Note: issue générée depuis le site (pré-remplissage).`,
-        ];
-
-        return header.concat(texteActuel, footer).join("\n");
-      };
-
-      issue.searchParams.set("title", issueTitle);
-      issue.searchParams.set("body", makeBody(Boolean(canTryFull)));
-
-      if (issue.toString().length > URL_HARD_LIMIT) {
-        issue.searchParams.set("body", makeBody(false));
+      if (!d && el.classList?.contains("details-anchor")) {
+        const n = el.nextElementSibling;
+        if (n && n.tagName === "DETAILS") d = n;
       }
 
-      return issue.toString();
+      if (!d) {
+        const s = el.closest?.("summary");
+        if (s && s.parentElement && s.parentElement.tagName === "DETAILS") d = s.parentElement;
+      }
+
+      if (d && d.tagName === "DETAILS" && !d.open) d.open = true;
+    } catch {}
+  }
+  window.__archiOpenDetailsIfNeeded = openDetailsIfNeeded;
+
+  function highlightEl(el) {
+    try {
+      if (!el) return;
+      el.classList.add("para-highlight");
+      setTimeout(() => el.classList.remove("para-highlight"), 2400);
+    } catch {}
+  }
+
+  function highlightFromTarget(el) {
+    try {
+      if (!el) return;
+      if (el.matches?.('.reading p[id^="p-"]')) return highlightEl(el);
+      const p = el.closest?.('.reading p[id^="p-"]');
+      if (p) return highlightEl(p);
+
+      if (el.classList?.contains("details-anchor")) {
+        const d = (el.nextElementSibling && el.nextElementSibling.tagName === "DETAILS") ? el.nextElementSibling : null;
+        const p2 = d ? d.querySelector('.details-body p[id^="p-"]') : null;
+        if (p2) return highlightEl(p2);
+      }
+
+      highlightEl(el);
+    } catch {}
+  }
+
+  function cssEscape(s) {
+    try { return (window.CSS && CSS.escape) ? CSS.escape(String(s)) : String(s).replace(/["\\]/g, "\\$&"); }
+    catch { return String(s).replace(/["\\]/g, "\\$&"); }
+  }
+
+  // ===== Bookmarks (pinned + auto) =====
+  const PINNED_KEY = "archicratie:bookmark:pinned";
+  const LAST_KEY = `archicratie:bookmark:last:${window.location.pathname}`;
+
+  function readJSON(key) {
+    try { return JSON.parse(localStorage.getItem(key) || "null"); }
+    catch { return null; }
+  }
+  function writeJSON(key, obj) {
+    try { localStorage.setItem(key, JSON.stringify(obj)); } catch {}
+  }
+
+  function updateResumeButton() {
+    const btn = document.getElementById("resume-btn");
+    if (!btn) return;
+
+    const bm = readJSON(PINNED_KEY) || readJSON(LAST_KEY);
+    if (!bm || !bm.url) { btn.hidden = true; return; }
+
+    btn.hidden = false;
+    btn.href = bm.url;
+    btn.title = bm.title ? `Reprendre : ${bm.title}` : "Reprendre la lecture";
+
+    btn.onclick = (ev) => {
+      try {
+        const here = new URL(window.location.href);
+        here.search = "";
+
+        const target = new URL(bm.url, window.location.origin);
+        target.search = "";
+
+        if (here.pathname === target.pathname) {
+          ev.preventDefault();
+          const id = (target.hash || "").slice(1);
+          if (!id) return;
+
+          const el = document.getElementById(id);
+          if (!el) return;
+
+          openDetailsIfNeeded(el);
+          scrollToElWithOffset(el, 12, "auto");
+          highlightFromTarget(el);
+          history.replaceState(null, "", here.pathname + "#" + id);
+        }
+      } catch {}
+    };
+  }
+  window.__archiUpdateResumeButton = updateResumeButton;
+
+  if (window.location.search.includes("body=")) {
+    history.replaceState(null, "", window.location.pathname + window.location.hash);
+  }
+
+  // ===== legacy hash fallback (inchangé) =====
+  safe("legacy-hash", () => {
+    const h = window.location.hash || "";
+    const m = h.match(/^#p-(\d+)-[0-9a-f]{8}$/i);
+    if (!m) return;
+
+    const oldId = h.slice(1);
+    if (document.getElementById(oldId)) return;
+
+    const idx = m[1];
+    const prefix = `p-${idx}-`;
+    const replacement = document.querySelector(`.reading [id^="${prefix}"]`);
+    if (!replacement) return;
+
+    console.warn("[anchors] legacy hash fallback used:", `#${oldId}`, "→", `#${replacement.id}`);
+    scrollToElWithOffset(replacement, 12, "auto");
+    highlightFromTarget(replacement);
+  });
+
+  updateResumeButton();
+
+  // ===== Jump (id / URL#id / extrait) =====
+  const jumpForm = document.getElementById("jump-form");
+  const jumpInput = document.getElementById("jump-input");
+
+  function flashJumpError() {
+    if (!jumpInput) return;
+    jumpInput.classList.add("is-error");
+    setTimeout(() => jumpInput.classList.remove("is-error"), 650);
+  }
+
+  function normalizeParaId(input) {
+    const raw = String(input || "").trim();
+    if (!raw) return "";
+    const hashIdx = raw.lastIndexOf("#");
+    const h = (hashIdx >= 0) ? raw.slice(hashIdx + 1) : raw;
+    const id = h.replace(/^#/, "").trim();
+    if (!/^p-\d+-/i.test(id)) return "";
+    return id;
+  }
+
+  function findParaLocalByIdOrPrefix(id) {
+    const exact = document.getElementById(id);
+    if (exact) return exact;
+    return document.querySelector(`.reading [id^="${cssEscape(id)}"]`);
+  }
+
+  function normalizeForSearch(s) {
+    return String(s || "")
+      .toLowerCase()
+      .normalize("NFD")
+      .replace(/\p{Diacritic}/gu, "")
+      .replace(/\s+/g, " ")
+      .trim();
+  }
+
+  let _paraIndexP = null;
+  async function loadParaIndex() {
+    if (_paraIndexP) return _paraIndexP;
+    _paraIndexP = (async () => {
+      const res = await fetch("/para-index.json?_=" + Date.now(), { cache: "no-store" }).catch(() => null);
+      if (res && res.ok) return await res.json();
+      return null;
+    })();
+    return _paraIndexP;
+  }
+
+  function gotoPageAnchor(page, id) {
+    const url = new URL(page, window.location.origin);
+    url.hash = id;
+    window.location.assign(url.toString());
+  }
+
+  async function doJump(input) {
+    const raw = String(input || "").trim();
+    if (!raw) return false;
+
+    const id = normalizeParaId(raw);
+    if (id) {
+      const local = findParaLocalByIdOrPrefix(id);
+      if (local) {
+        openDetailsIfNeeded(local);
+        scrollToElWithOffset(local, 12, "auto");
+        highlightFromTarget(local);
+        history.replaceState(null, "", `${window.location.pathname}#${local.id}`);
+        return true;
+      }
+
+      const idx = await loadParaIndex();
+      if (idx?.byId && idx.items && idx.byId[id] != null) {
+        const item = idx.items[idx.byId[id]];
+        if (item?.page && item?.id) {
+          const targetPath = new URL(item.page, window.location.origin).pathname;
+          if (targetPath === window.location.pathname) {
+            window.location.hash = item.id;
+            return true;
+          }
+          gotoPageAnchor(item.page, item.id);
+          return true;
+        }
+      }
+
+      flashJumpError();
+      return false;
     }
 
-    // ==========================
-    // Paragraph tools (+ pinned bookmark)
-    // ==========================
+    const q = normalizeForSearch(raw);
+    if (q.length < 10) { flashJumpError(); return false; }
+
     const paras = Array.from(document.querySelectorAll('.reading p[id^="p-"]'));
-
-    // Petit helper : fail-closed mais réversible (hide ≠ remove)
-    function hidePropose(el) {
-      try {
-        el.hidden = true;
-        el.style.display = "none";
-        el.setAttribute("aria-hidden", "true");
-        el.setAttribute("tabindex", "-1");
-      } catch {}
-    }
-    function showPropose(el) {
-      try {
-        el.hidden = false;
-        el.style.display = "";
-        el.removeAttribute("aria-hidden");
-        el.removeAttribute("tabindex");
-      } catch {}
-    }
-
     for (const p of paras) {
+      const t = normalizeForSearch(p.innerText || p.textContent || "");
+      if (t.includes(q)) {
+        openDetailsIfNeeded(p);
+        scrollToElWithOffset(p, 12, "auto");
+        highlightFromTarget(p);
+        history.replaceState(null, "", `${window.location.pathname}#${p.id}`);
+        return true;
+      }
+    }
+
+    const idx = await loadParaIndex();
+    if (!idx?.items) { flashJumpError(); return false; }
+
+    let best = null;
+    let bestScore = -1;
+
+    for (const it of idx.items) {
+      if (!it?.text || !it?.page || !it?.id) continue;
+      const t = normalizeForSearch(it.text);
+      const pos = t.indexOf(q);
+      if (pos < 0) continue;
+
+      const score = (100000 - pos) + Math.min(4000, q.length * 8);
+      if (score > bestScore) { bestScore = score; best = it; }
+    }
+
+    if (!best) { flashJumpError(); return false; }
+
+    const targetPath = new URL(best.page, window.location.origin).pathname;
+    if (targetPath === window.location.pathname) {
+      window.location.hash = best.id;
+      return true;
+    }
+    gotoPageAnchor(best.page, best.id);
+    return true;
+  }
+
+  safe("jump-form", () => {
+    if (!jumpForm || !jumpInput) return;
+    jumpForm.addEventListener("submit", async (ev) => {
+      ev.preventDefault();
+      const ok = await doJump(jumpInput.value);
+      if (ok) jumpInput.value = "";
+    });
+  });
+
+  // ===== Gitea globals (déjà posés par le boot head) =====
+  const giteaReady = Boolean(window.__archiGitea && window.__archiGitea.ready);
+
+  const quoteBlock = (s) =>
+    String(s || "")
+      .split(/\r?\n/)
+      .map((l) => (`> ${l}`).trimEnd())
+      .join("\n");
+
+  function buildIssueURLCorrection(anchorId, fullText, excerpt) {
+    const g = window.__archiGitea || { base:"", owner:"", repo:"" };
+    const base = String(g.base).replace(/\/+$/, "");
+    const issue = new URL(`${base}/${g.owner}/${g.repo}/issues/new`);
+
+    const local = new URL(window.location.href);
+    local.search = "";
+    local.hash = anchorId;
+
+    const path = local.pathname;
+    const issueTitle = `[Correction] ${anchorId} — ${docTitle}`;
+
+    const makeBody = (useFull) => {
+      const header = [
+        `Chemin: ${path}`,
+        `URL: ${local.toString()}`,
+        `Ancre: #${anchorId}`,
+        `Version: ${docVersion || "(non renseignée)"}`,
+        `Type: type/correction`,
+        `State: state/recevable`,
+        ``,
+      ];
+
+      const texteActuel = useFull
+        ? [`Texte actuel (copie exacte du paragraphe):`, quoteBlock(fullText || "")]
+        : [
+            `Texte actuel (extrait):`,
+            quoteBlock(excerpt || ""),
+            ``,
+            `Note: paragraphe long → extrait (pour éviter une URL trop longue).`,
+          ];
+
+      const footer = [
+        ``,
+        `Proposition (remplacer par):`,
+        ``,
+        `Justification:`,
+        ``,
+        `---`,
+        `Note: issue générée depuis le site (pré-remplissage).`,
+      ];
+
+      return header.concat(texteActuel, footer).join("\n");
+    };
+
+    issue.searchParams.set("title", issueTitle);
+
+    const fullOk = Boolean(fullText && fullText.length && fullText.length <= 1600);
+    issue.searchParams.set("body", makeBody(fullOk));
+
+    if (issue.toString().length > 6500) {
+      issue.searchParams.set("body", makeBody(false));
+    }
+
+    return issue.toString();
+  }
+
+  // ===== Paragraph tools + pinned bookmark =====
+  const parasAll = Array.from(document.querySelectorAll('.reading p[id^="p-"]'));
+
+  function normalizeSpaces(s) {
+    return String(s || "").replace(/\s+/g, " ").trim();
+  }
+
+  function getSelectionTextWithinPara(pEl) {
+    try {
+      const sel = window.getSelection ? window.getSelection() : null;
+      if (!sel || sel.isCollapsed) return "";
+      const t = String(sel.toString() || "").trim();
+      if (!t) return "";
+      const a = sel.anchorNode;
+      const f = sel.focusNode;
+      if (!a || !f) return "";
+      if (!pEl.contains(a) || !pEl.contains(f)) return "";
+      return normalizeSpaces(t);
+    } catch { return ""; }
+  }
+
+  function getCleanParagraphText(pEl) {
+    try {
+      const clone = pEl.cloneNode(true);
+      clone.querySelectorAll(".para-tools").forEach((n) => n.remove());
+      clone.querySelectorAll("[data-noquote]").forEach((n) => n.remove());
+      return normalizeSpaces(clone.innerText || "");
+    } catch {
+      return normalizeSpaces(pEl.innerText || pEl.textContent || "");
+    }
+  }
+
+  function hideEl(el) {
+    try {
+      el.hidden = true;
+      el.style.display = "none";
+      el.setAttribute("aria-hidden", "true");
+      el.setAttribute("tabindex", "-1");
+    } catch {}
+  }
+  function showEl(el) {
+    try {
+      el.hidden = false;
+      el.style.display = "";
+      el.removeAttribute("aria-hidden");
+      el.removeAttribute("tabindex");
+    } catch {}
+  }
+
+  safe("para-tools", () => {
+    for (const p of parasAll) {
       if (p.querySelector(".para-tools")) continue;
 
       const tools = document.createElement("span");
       tools.className = "para-tools";
+      tools.setAttribute("data-noquote", "1");
 
-      const row = document.createElement("span");
-      row.className = "para-tools-row";
+      const idBtn = document.createElement("button");
+      idBtn.type = "button";
+      idBtn.className = "para-id";
+      idBtn.textContent = p.id;
+      idBtn.title = "Copier le lien du paragraphe";
+      idBtn.addEventListener("click", async () => {
+        try {
+          const u = new URL(window.location.href);
+          u.search = "";
+          u.hash = p.id;
+          await navigator.clipboard.writeText(u.toString());
+          const prev = idBtn.textContent;
+          idBtn.textContent = "Lien copié";
+          setTimeout(() => (idBtn.textContent = prev), 900);
+        } catch {}
+      });
 
-      const a = document.createElement("a");
-      a.className = "para-anchor";
-      a.href = `#${p.id}`;
-      a.setAttribute("aria-label", "Lien vers ce paragraphe");
-      a.textContent = "¶";
+      const actions = document.createElement("span");
+      actions.className = "para-tools-actions";
 
       const citeBtn = document.createElement("button");
       citeBtn.type = "button";
       citeBtn.className = "para-cite";
       citeBtn.textContent = "Citer";
 
-      citeBtn.addEventListener("click", async () => {
+      citeBtn.addEventListener("click", async (ev) => {
         const pageUrl = new URL(window.location.href);
         pageUrl.search = "";
         pageUrl.hash = p.id;
 
-        const cite = `${docTitle}${docVersion ? ` (v${docVersion})` : ""} — ${pageUrl.toString()}`;
+        const signature = `${docTitle}${docVersion ? ` (v${docVersion})` : ""} — ${pageUrl.toString()}`;
+        let payload = signature;
+
+        if (!(ev && ev.shiftKey)) {
+          const selTxt = getSelectionTextWithinPara(p);
+          const paraTxt = selTxt || getCleanParagraphText(p);
+          payload = paraTxt ? `${paraTxt}\n\n${signature}` : signature;
+        }
 
         try {
-          await navigator.clipboard.writeText(cite);
+          await navigator.clipboard.writeText(payload);
           const prev = citeBtn.textContent;
-          citeBtn.textContent = "Copié";
+          citeBtn.textContent = (ev && ev.shiftKey) ? "Lien copié" : "Copié";
           setTimeout(() => (citeBtn.textContent = prev), 900);
         } catch {
-          window.prompt("Copiez la citation :", cite);
+          window.prompt("Copiez la citation :", payload);
         }
       });
 
-      row.appendChild(a);
-      row.appendChild(citeBtn);
+      actions.appendChild(citeBtn);
 
+      let propose = null;
       if (giteaReady) {
-        const propose = document.createElement("a");
+        propose = document.createElement("a");
         propose.className = "para-propose";
         propose.textContent = "Proposer";
         propose.setAttribute("aria-label", "Proposer une correction sur Gitea");
 
-        // ✅ fail-closed (mais NON destructif)
-        propose.dataset.requiresGroup = PROPOSE_REQUIRED_GROUP;
-        hidePropose(propose);
-
-        const raw = (p.textContent || "").trim().replace(/\s+/g, " ");
+        const raw = getCleanParagraphText(p);
         const excerpt = raw.length > 420 ? (raw.slice(0, 420) + "…") : raw;
+        const issueUrl = buildIssueURLCorrection(p.id, raw, excerpt);
 
-        const issueUrl = buildIssueURL(p.id, raw, excerpt);
-
-        // Lien fallback (si JS modal casse totalement)
         propose.href = issueUrl;
-
-        // ✅ Marqueurs pour ProposeModal (interception 2 étapes)
+        propose.target = "_blank";
+        propose.rel = "noopener noreferrer";
         propose.dataset.propose = "1";
         propose.dataset.url = issueUrl;
         propose.dataset.full = raw;
 
-        row.appendChild(propose);
+        hideEl(propose);
+        actions.appendChild(propose);
       }
 
-      tools.appendChild(row);
-
       const bmBtn = document.createElement("button");
       bmBtn.type = "button";
       bmBtn.className = "para-bookmark";
@@ -617,111 +941,334 @@ const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
         setTimeout(() => (bmBtn.textContent = prev), 900);
       });
 
+      tools.appendChild(idBtn);
+      tools.appendChild(actions);
       tools.appendChild(bmBtn);
       p.appendChild(tools);
     }
+  });
 
-    // ✅ Après insertion : on autorise Proposer seulement si groupe editors
-    //    - ok=false => remove (pas d’UI “Proposer” pour les non-éditeurs)
-    //    - erreur fetch => on garde HIDDEN (non destructif) ; un reload pourra réussir
-    if (giteaReady) {
-      isEditorP.then((ok) => {
-        const els = document.querySelectorAll(".para-propose");
-        for (const el of els) {
-          if (ok) showPropose(el);
-          else el.remove();
-        }
-      }).catch((err) => {
-        console.warn("[proposer] gate failed; keeping Proposer hidden", err);
-        document.querySelectorAll(".para-propose").forEach((el) => hidePropose(el));
+  safe("propose-gate", () => {
+    if (!giteaReady) return;
+    const p = window.__archiIsEditorP || Promise.resolve(false);
+    p.then((ok) => {
+      document.querySelectorAll(".para-propose").forEach((el) => {
+        if (ok) showEl(el);
+        else el.remove();
       });
+    }).catch((err) => {
+      console.warn("[proposer] gate failed; keeping Proposer hidden", err);
+      document.querySelectorAll(".para-propose").forEach((el) => hideEl(el));
+    });
+  });
+
+  // ===== Auto-checkpoint (sur paragraphe ACTIF, pas sur hover) =====
+  let lastAuto = 0;
+  function writeLastSeen(id) {
+    const now = Date.now();
+    if (now - lastAuto < 800) return;
+    lastAuto = now;
+
+    const u = new URL(window.location.href);
+    u.search = "";
+    u.hash = id;
+
+    writeJSON(LAST_KEY, {
+      url: u.toString(),
+      path: u.pathname,
+      anchor: id,
+      title: docTitle,
+      version: docVersion,
+      ts: now,
+    });
+  }
+
+  // ===== Détection “para actif” : juste sous reading-follow (✅ fixe le mismatch SidePanel) =====
+  let __activeParaId = "";
+  let __hoverParaId = "";
+  let __panelParaEl = null;
+  let __rafActive = 0;
+
+  function markPanelCurrent(id) {
+    try {
+      if (__panelParaEl) __panelParaEl.classList.remove("is-panel-current");
+      __panelParaEl = null;
+
+      const el = document.getElementById(id);
+      const p = el?.matches?.('.reading p[id^="p-"]') ? el : el?.closest?.('.reading p[id^="p-"]');
+      if (p) {
+        p.classList.add("is-panel-current");
+        __panelParaEl = p;
+      }
+    } catch {}
+  }
+
+  function dispatchCurrentPara(id, kind) {
+    try { window.dispatchEvent(new CustomEvent("archicratie:currentPara", { detail: { id, kind } })); } catch {}
+  }
+
+  function setCurrentPara(id, kind = "active") {
+    if (!id) return;
+    if (window.__archiCurrentParaId === id && kind !== "hover") return;
+
+    window.__archiCurrentParaId = id;
+    window.__archiLastParaId = id; // utile pour level switch
+    markPanelCurrent(id);
+    dispatchCurrentPara(id, kind);
+  }
+
+  function probeParaUnderFollow() {
+    if (!reading) return null;
+
+    const rr = reading.getBoundingClientRect();
+    if (!rr || rr.width < 10) return null;
+
+    const x = Math.round(rr.left + Math.min(140, rr.width * 0.45));
+    const baseY = Math.round(getStickyOffsetPx() + 14);
+
+    const ys = [baseY, baseY + 18, baseY + 36, baseY + 54, baseY + 72, baseY + 90, baseY + 108];
+
+    for (const y of ys) {
+      const stack = (document.elementsFromPoint ? document.elementsFromPoint(x, y) : [document.elementFromPoint(x, y)])
+        .filter(Boolean);
+
+      for (const el of stack) {
+        const p = el.closest?.('.reading p[id^="p-"]');
+        if (p && p.id) return p;
+      }
     }
 
-    // Auto-checkpoint
-    let lastAuto = 0;
-    function writeLastSeen(id) {
-      const now = Date.now();
-      if (now - lastAuto < 800) return;
-      lastAuto = now;
+    const y0 = baseY;
+    for (const p of parasAll) {
+      const r = p.getBoundingClientRect();
+      if (r.top <= y0 && r.bottom > y0) return p;
+      if (r.top > y0) return p;
+    }
+    return null;
+  }
 
-      const u = new URL(window.location.href);
-      u.search = "";
-      u.hash = id;
+  function recomputeActivePara() {
+    const p = probeParaUnderFollow();
+    const id = p?.id || "";
+    if (!id) return;
 
-      writeJSON(LAST_KEY, {
-        url: u.toString(),
-        path: u.pathname,
-        anchor: id,
-        title: docTitle,
-        version: docVersion,
-        ts: now,
-      });
+    if (id !== __activeParaId) {
+      __activeParaId = id;
+      writeLastSeen(id);
+      updateResumeButton();
     }
 
-    const ioPara = new IntersectionObserver((entries) => {
-      const best = entries
-        .filter(e => e.isIntersecting)
-        .sort((a,b) => (b.intersectionRatio - a.intersectionRatio))[0];
+    if (!__hoverParaId) setCurrentPara(__activeParaId, "active");
+  }
 
-      if (!best) return;
-      const el = best.target;
-      if (el && el.id) {
-        writeLastSeen(el.id);
+  function scheduleActive() {
+    if (__rafActive) return;
+    __rafActive = requestAnimationFrame(() => {
+      __rafActive = 0;
+      recomputeActivePara();
+    });
+  }
+
+  safe("active-para", () => {
+    scheduleActive();
+    window.addEventListener("scroll", scheduleActive, { passive: true });
+  });
+
+  safe("hover-para", () => {
+    if (!reading) return;
+
+    let t = 0;
+    reading.addEventListener("pointerover", (ev) => {
+      const p = ev.target?.closest?.('.reading p[id^="p-"]');
+      if (!p || !p.id) return;
+      __hoverParaId = p.id;
+      if (t) { clearTimeout(t); t = 0; }
+      setCurrentPara(__hoverParaId, "hover");
+    });
+
+    reading.addEventListener("pointerout", () => {
+      if (t) clearTimeout(t);
+      t = setTimeout(() => {
+        __hoverParaId = "";
+        if (__activeParaId) setCurrentPara(__activeParaId, "active");
+      }, 120);
+    });
+  });
+
+  // ===== Hash handling (robuste) =====
+  function resolveParaIdFromEl(el) {
+    if (!el) return "";
+    if (el.matches?.('.reading p[id^="p-"]')) return el.id;
+    const p = el.closest?.('.reading p[id^="p-"]');
+    if (p?.id) return p.id;
+
+    if (el.classList?.contains("details-anchor")) {
+      const d = (el.nextElementSibling && el.nextElementSibling.tagName === "DETAILS") ? el.nextElementSibling : null;
+      const p2 = d ? d.querySelector('.details-body p[id^="p-"]') : null;
+      if (p2?.id) return p2.id;
+    }
+    return "";
+  }
+
+  function handleHashTarget(id, behavior = "auto") {
+    try {
+      const clean = String(id || "").replace(/^#/, "").trim();
+      if (!clean) return false;
+
+      const el = document.getElementById(clean);
+      if (!el) return false;
+
+      openDetailsIfNeeded(el);
+      scrollToElWithOffset(el, 12, behavior);
+      highlightFromTarget(el);
+
+      history.replaceState(null, "", `${window.location.pathname}#${clean}`);
+
+      const pid = resolveParaIdFromEl(el);
+      if (pid) {
+        __activeParaId = pid;
+        setCurrentPara(pid, "hash");
+        writeLastSeen(pid);
         updateResumeButton();
       }
-    }, { threshold: [0.6] });
 
-    for (const p of paras) ioPara.observe(p);
+      return true;
+    } catch { return false; }
+  }
 
-    // ==========================
-    // Reading-follow (H1/H2/H3)
-    // ==========================
-    const h1 = reading ? reading.querySelector("h1") : null;
+  safe("hash-links", () => {
+    document.addEventListener("click", (ev) => {
+      const a = ev.target?.closest?.('a[href^="#"]');
+      if (!a) return;
 
-    // H2 : soit via details-anchor (pour citabilité stable), soit via h2[id]
-    const h2Anchors = Array.from(document.querySelectorAll("span.details-anchor[id]"))
+      const href = a.getAttribute("href") || "";
+      if (!href || href === "#") return;
+
+      const id = href.slice(1);
+      if (!id) return;
+      if (!document.getElementById(id)) return;
+
+      ev.preventDefault();
+      handleHashTarget(id, "smooth");
+    });
+
+    window.addEventListener("hashchange", () => {
+      handleHashTarget((window.location.hash || "").slice(1), "auto");
+    });
+  });
+
+  // ===== TOC local sync (inchangé) =====
+  function isScrollable(el) {
+    try {
+      if (!el || !(el instanceof HTMLElement)) return false;
+      const cs = getComputedStyle(el);
+      const oy = cs.overflowY;
+      if (!(oy === "auto" || oy === "scroll" || oy === "overlay")) return false;
+      return el.scrollHeight > el.clientHeight + 2;
+    } catch { return false; }
+  }
+
+  function findScrollParent(fromEl, stopEl) {
+    let n = fromEl;
+    while (n && n !== document.body) {
+      if (stopEl && n === stopEl) break;
+      if (isScrollable(n)) return n;
+      n = n.parentElement;
+    }
+    if (stopEl && isScrollable(stopEl)) return stopEl;
+    return null;
+  }
+
+  function syncTocLocal(activeId) {
+    if (!activeId) return;
+
+    const list =
+      document.querySelector(".toc-local__list") ||
+      document.querySelector("[data-toc-local]") ||
+      document.querySelector(".toc-local ul") ||
+      null;
+
+    if (!list) return;
+
+    const sel = `a[href="#${cssEscape(activeId)}"]`;
+    const link = list.querySelector(sel);
+    if (!link) return;
+
+    list.querySelectorAll("a[aria-current]").forEach((a) => a.removeAttribute("aria-current"));
+    link.setAttribute("aria-current", "location");
+
+    const stop = document.querySelector(".page-aside__scroll") || null;
+    const scrollBox = findScrollParent(link, stop) || stop || list;
+    if (!scrollBox) return;
+
+    const pad = 12;
+    const rLink = link.getBoundingClientRect();
+    const rBox = scrollBox.getBoundingClientRect();
+    const linkTopInBox = (rLink.top - rBox.top) + scrollBox.scrollTop;
+    const target = Math.max(0, Math.round(linkTopInBox - pad));
+
+    try { scrollBox.scrollTo({ top: target, behavior: "auto" }); }
+    catch { scrollBox.scrollTop = target; }
+  }
+  window.__archiSyncTocLocal = syncTocLocal;
+
+  // ===== Reading-follow (H1/H2/H3 only) =====
+  safe("reading-follow", () => {
+    if (!reading || !followEl) return;
+
+    const h1 = reading.querySelector("h1");
+
+    // ✅ FIX: ne pas dépendre du tag <span>; accepter .details-anchor quel que soit le tag,
+    // et utiliser <details> comme marker (top fiable) pour que rf-h2 s'affiche correctement.
+    const h2Anchors = Array.from(reading.querySelectorAll(".details-anchor[id]"))
       .map((s) => {
-        const d = s.closest("details");
+        const d = (s.nextElementSibling && s.nextElementSibling.tagName === "DETAILS")
+          ? s.nextElementSibling
+          : (s.closest?.("details") || null);
+
         const h2 = d ? d.querySelector(".details-body h2") : null;
-        const title = (h2?.textContent || "").trim() || "Section";
-        return h2 ? { id: s.id, anchor: s, marker: s, title, h2 } : null;
+        const sum = d ? d.querySelector("summary") : null;
+
+        const title =
+          ((s.getAttribute("data-title") || "").trim()
+          || (h2?.textContent || "").trim()
+          || (sum?.textContent || "").trim()
+          || "Section");
+
+        const marker = d || s;
+
+        return { id: s.id, anchor: s, marker, title, h2, details: d };
       })
       .filter(Boolean);
 
-    const h2Plain = Array.from(document.querySelectorAll(".reading h2[id]"))
-      .map((h2) => ({
-        id: h2.id,
-        anchor: h2,
-        marker: h2,
-        title: (h2.textContent || "").trim() || "Section",
-        h2
-      }));
+    const h2Plain = Array.from(reading.querySelectorAll("h2[id]"))
+      .map((h2) => ({ id: h2.id, anchor: h2, marker: h2, title: (h2.textContent || "").trim() || "Section", h2 }));
 
-    // On préfère le mode "anchors" s'il existe
     const H2 = (h2Anchors.length ? h2Anchors : h2Plain)
       .slice()
       .sort((a,b) => absTop(a.marker) - absTop(b.marker));
 
-    const H3 = Array.from(document.querySelectorAll(".reading h3[id]"))
+    const H3 = Array.from(reading.querySelectorAll("h3[id]"))
       .map((h3) => ({ id: h3.id, el: h3, title: (h3.textContent || "").trim() || "Sous-section" }));
 
     let curH2 = null;
     let curH3 = null;
     let lastY = window.scrollY || 0;
+    let lastOpenedH2 = "";
 
     function computeLineY(followH) {
-      // “ligne” = bas du bandeau (header + page-gap + bandeau)
       return headerH() + PAGE_GAP + (followH || 0) + HYST;
     }
 
     function pickH2(lineY) {
+      if (!H2.length) return null;
       let cand = null;
-
       for (const t of H2) {
         const top = t.marker.getBoundingClientRect().top;
-        if (top <= lineY) cand = t; else break;
+        if (top <= lineY) cand = t;
+        else break;
       }
-      if (!cand && H2.length) cand = H2[0];
+      if (!cand) cand = H2[0];
 
       const down = (window.scrollY || 0) >= lastY;
       if (!down && cand && curH2 && cand.id !== curH2.id) {
@@ -736,33 +1283,29 @@ const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
       return Boolean(start.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING);
     }
     function isBefore(end, el) {
-      if (!end || !el) return true; // pas de borne haute => OK
+      if (!end || !el) return true;
       return Boolean(end.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING);
     }
 
     function pickH3(lineY, activeH2) {
       if (!activeH2) return null;
 
-      // H3 visibles (pas dans un details fermé)
       const visible = H3.filter((t) => {
         const d = t.el.closest?.("details");
         return !(d && !d.open);
       });
 
-      // Scope : même <details> si applicable (plus robuste)
-      const d2 = activeH2.h2?.closest?.("details") || activeH2.anchor?.closest?.("details") || null;
+      const d2 = activeH2.details || activeH2.h2?.closest?.("details") || null;
       let scoped = d2 ? visible.filter((t) => t.el.closest?.("details") === d2) : visible;
 
-      // Scope DOM : entre H2 courant et H2 suivant (gère aussi les pages "plates")
       const i2 = H2.findIndex((t) => t.id === activeH2.id);
       const nextH2 = (i2 >= 0 && i2 + 1 < H2.length) ? H2[i2 + 1] : null;
 
-      const startNode = activeH2.anchor || activeH2.h2;
-      const endNode = nextH2 ? (nextH2.anchor || nextH2.h2) : null;
+      const startNode = activeH2.anchor || activeH2.h2 || activeH2.marker;
+      const endNode = nextH2 ? (nextH2.anchor || nextH2.h2 || nextH2.marker) : null;
 
       scoped = scoped.filter((t) => isAfter(startNode, t.el) && isBefore(endNode, t.el));
 
-      // Choisir le dernier H3 du scope qui a passé la ligne
       let cand = null;
       for (const t of scoped) {
         const top = t.el.getBoundingClientRect().top;
@@ -772,25 +1315,32 @@ const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
       return cand;
     }
 
+    function maybeOpenActiveSection(activeH2, lineY) {
+      if (!activeH2 || !activeH2.id) return;
+      const pre = activeH2.marker.getBoundingClientRect().top <= (lineY + 140);
+      if (!pre) return;
+      if (activeH2.id !== lastOpenedH2) {
+        lastOpenedH2 = activeH2.id;
+        openDetailsIfNeeded(activeH2.anchor || activeH2.h2 || activeH2.marker);
+      }
+    }
+
     function updateFollow() {
       if (!followEl) return;
 
-      // PASS 1 : H1 visible quand le H1 du reading passe sous la barre
       const baseY = headerH() + PAGE_GAP;
       const showH1 = !!(h1 && (h1.getBoundingClientRect().bottom <= baseY + HYST));
 
-      if (rfH1 && h1 && showH1) {
-        rfH1.hidden = false;
-        rfH1.textContent = (h1.textContent || "").trim();
-      } else if (rfH1) {
-        rfH1.hidden = true;
-      }
+      if (rfH1 && h1 && showH1) { rfH1.hidden = false; rfH1.textContent = (h1.textContent || "").trim(); }
+      else if (rfH1) rfH1.hidden = true;
 
-      // PASS 2 : estimation H2/H3 sans bandeau (pour mesurer hauteur réelle)
       const lineY0 = computeLineY(0);
       curH2 = pickH2(lineY0);
+      maybeOpenActiveSection(curH2, lineY0);
       curH3 = pickH3(lineY0, curH2);
 
+      try { syncTocLocal((curH3 && curH3.id) ? curH3.id : (curH2 && curH2.id) ? curH2.id : ""); } catch {}
+
       if (rfH2 && curH2) { rfH2.hidden = false; rfH2.textContent = curH2.title; }
       else if (rfH2) rfH2.hidden = true;
 
@@ -804,19 +1354,19 @@ const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
       const inner = followEl.querySelector(".reading-follow__inner");
       const followH = (any0 && inner) ? inner.getBoundingClientRect().height : 0;
 
-      // PASS 3 : recalc H2/H3 avec la vraie ligne (bas du bandeau)
       const lineY = computeLineY(followH);
       curH2 = pickH2(lineY);
+      maybeOpenActiveSection(curH2, lineY);
       curH3 = pickH3(lineY, curH2);
 
-      // H2 n’apparaît que s’il est “actif” (titre passé sous la ligne)
+      try { syncTocLocal((curH3 && curH3.id) ? curH3.id : (curH2 && curH2.id) ? curH2.id : ""); } catch {}
+
       if (rfH2 && curH2) {
         const on = curH2.marker.getBoundingClientRect().top <= lineY;
         rfH2.hidden = !on;
         if (on) rfH2.textContent = curH2.title;
       } else if (rfH2) rfH2.hidden = true;
 
-      // H3 : actif seulement si un H3 du H2 actif a passé la ligne
       if (rfH3 && curH3) {
         const on = curH3.el.getBoundingClientRect().top <= lineY;
         rfH3.hidden = !on;
@@ -833,20 +1383,19 @@ const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
       setRootVar("--followbar-h", px(followH2));
       setRootVar("--sticky-offset-px", String(Math.round(headerH() + PAGE_GAP + followH2)));
 
-      // Boutons actions
       if (btnTopChapter) btnTopChapter.hidden = !any;
-
       if (btnTopSection) {
         const ok = Boolean(curH2 && rfH2 && !rfH2.hidden);
         btnTopSection.hidden = !ok;
       }
 
       lastY = window.scrollY || 0;
-
-      // recalage horizontal
       syncReadingRect();
+      scheduleActive();
     }
 
+    window.__archiUpdateFollow = updateFollow;
+
     let ticking = false;
     const onScroll = () => {
       if (ticking) return;
@@ -860,19 +1409,13 @@ const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
     window.addEventListener("scroll", onScroll, { passive: true });
     window.addEventListener("resize", onScroll);
 
-    // clics bandeau
-    if (rfH1) rfH1.addEventListener("click", () => {
-      if (!h1) return;
-      scrollToElWithOffset(h1, 12, "smooth");
-    });
-
+    if (rfH1) rfH1.addEventListener("click", () => { if (h1) scrollToElWithOffset(h1, 12, "smooth"); });
     if (rfH2) rfH2.addEventListener("click", () => {
       if (!curH2) return;
-      openDetailsIfNeeded(curH2.anchor);
-      scrollToElWithOffset(curH2.anchor, 12, "smooth");
+      openDetailsIfNeeded(curH2.anchor || curH2.h2 || curH2.marker);
+      scrollToElWithOffset(curH2.marker, 12, "smooth");
       history.replaceState(null, "", `${window.location.pathname}#${curH2.id}`);
     });
-
     if (rfH3) rfH3.addEventListener("click", () => {
       if (!curH3) return;
       openDetailsIfNeeded(curH3.el);
@@ -880,34 +1423,89 @@ const GITEA_REPO = import.meta.env.PUBLIC_GITEA_REPO ?? "";
       history.replaceState(null, "", `${window.location.pathname}#${curH3.id}`);
     });
 
-    // clics actions
-    if (btnTopChapter) btnTopChapter.addEventListener("click", () => {
-      if (!h1) return;
-      scrollToElWithOffset(h1, 12, "smooth");
-    });
-
+    if (btnTopChapter) btnTopChapter.addEventListener("click", () => { if (h1) scrollToElWithOffset(h1, 12, "smooth"); });
     if (btnTopSection) btnTopSection.addEventListener("click", () => {
       if (!curH2) return;
-      openDetailsIfNeeded(curH2.anchor);
-      scrollToElWithOffset(curH2.anchor, 12, "smooth");
+      openDetailsIfNeeded(curH2.anchor || curH2.h2 || curH2.marker);
+      scrollToElWithOffset(curH2.marker, 12, "smooth");
       history.replaceState(null, "", `${window.location.pathname}#${curH2.id}`);
     });
 
     updateFollow();
 
-    // arrivée avec hash => ouvrir + offset
     const initialHash = (location.hash || "").slice(1);
     if (initialHash) {
       const el = document.getElementById(initialHash);
       if (el) {
         openDetailsIfNeeded(el);
-        setTimeout(() => scrollToElWithOffset(el, 12, "auto"), 0);
+        setTimeout(() => {
+          scrollToElWithOffset(el, 12, "auto");
+          highlightFromTarget(el);
+          scheduleActive();
+        }, 0);
       }
     }
+  });
 
-  } catch (err) {
-    console.error("[EditionLayout] init failed:", err);
+  // ✅ Reflow sync : resize + changement de niveau (restaure le même paragraphe)
+  function afterReflow(fn) {
+    requestAnimationFrame(() => requestAnimationFrame(fn));
   }
+
+  safe("reflow-sync", () => {
+    window.addEventListener("resize", () => {
+      afterReflow(() => {
+        syncHeaderH(); syncReadingRect(); syncHeadingMetrics();
+        try { window.__archiUpdateFollow?.(); } catch {}
+        scheduleActive();
+      });
+    });
+
+    window.addEventListener("archicratie:readingLevel", () => {
+      afterReflow(() => {
+        syncHeaderH(); syncReadingRect(); syncHeadingMetrics();
+        try { window.__archiUpdateFollow?.(); } catch {}
+
+        const ctx = window.__archiLevelSwitchCtx || null;
+        const want =
+          (ctx && ctx.paraId) ||
+          window.__archiCurrentParaId ||
+          __activeParaId ||
+          window.__archiLastParaId ||
+          String(location.hash || "").replace(/^#/, "");
+
+        if (want) {
+          const el = document.getElementById(want);
+          if (el) {
+            openDetailsIfNeeded(el);
+            scrollToElWithOffset(el, 12, "auto");
+            highlightFromTarget(el);
+            history.replaceState(null, "", `${location.pathname}#${want}`);
+            __activeParaId = want;
+            setCurrentPara(want, "level");
+          } else if (ctx && Number.isFinite(ctx.scrollY)) {
+            window.scrollTo({ top: ctx.scrollY, behavior: "auto" });
+          }
+        }
+
+        scheduleActive();
+      });
+    });
+  });
+
+  // ===== Auto-unfold <details> (robuste) =====
+  safe("details-autounfold", () => {
+    if (!reading) return;
+
+    const sections = Array.from(reading.querySelectorAll("details.details-section"));
+    if (!sections.length) return;
+
+    // ✅ Lecture continue : tout ouvert, plus d’accordéon
+    for (const d of sections) d.open = true;
+
+    try { window.__archiUpdateFollow?.(); } catch {}
+    scheduleActive();
+  });
 })();
     </script>
   </body>
diff --git a/src/styles/global.css b/src/styles/global.css
index 4a943aa..8ca3ba7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -80,6 +80,12 @@ main { padding: 0; }
   border-top: 1px dashed rgba(127,127,127,0.35);
   font-size: 14px;
 }
+/* Edition-bar: cacher des badges (non destructif) */
+.edition-bar [data-badge="edition"],
+.edition-bar [data-badge="status"],
+.edition-bar [data-badge="version"]{
+  display: none;
+}
 
 .badge {
   padding: 2px 8px;
@@ -95,7 +101,34 @@ main { padding: 0; }
   padding: 5px 12px;
 }
 
-/* Toggle niveaux */
+/* Jump by paragraph id */
+.jump-form{
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+}
+.jump-input{
+  border: 1px solid rgba(127,127,127,0.55);
+  background: transparent;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 13px;
+  width: 320px;
+}
+.jump-input.is-error{
+  outline: 2px solid rgba(127,127,127,0.55);
+  outline-offset: 2px;
+}
+.jump-btn{
+  border: 1px solid rgba(127,127,127,0.55);
+  background: transparent;
+  padding: 4px 10px;
+  border-radius: 999px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+/* Toggle niveaux (legacy, non bloquant) */
 .level-toggle { display: inline-flex; gap: 6px; }
 .lvl-btn {
   border: 1px solid rgba(127,127,127,0.55);
@@ -112,14 +145,22 @@ main { padding: 0; }
 
 /* Règles niveaux */
 body[data-reading-level="1"] .level-2,
-body[data-reading-level="1"] .level-3 { display: none; }
-body[data-reading-level="2"] .level-3 { display: none; }
+body[data-reading-level="1"] .level-3,
+body[data-reading-level="1"] .level-4 { display: none; }
+
+body[data-reading-level="2"] .level-3,
+body[data-reading-level="2"] .level-4 { display: none; }
+
+body[data-reading-level="3"] .level-2,
+body[data-reading-level="3"] .level-4 { display: none; }
+
+body[data-reading-level="4"] .level-2,
+body[data-reading-level="4"] .level-3 { display: none; }
 
 /* ==========================
    Scroll offset (anchors / headings / paras)
    ========================== */
 
-/* Paragraph tools + bookmark */
 .reading p[id]{
   position: relative;
   padding-right: 14rem;
@@ -183,6 +224,14 @@ body[data-reading-level="2"] .level-3 { display: none; }
 }
 .para-bookmark:hover{ text-decoration: underline; }
 
+/* Highlight (jump / resume / arrivée hash) */
+.para-highlight{
+  background: rgba(127,127,127,0.10);
+  border-radius: 10px;
+  box-shadow: 0 0 0 2px rgba(127,127,127,0.35);
+  transition: box-shadow 160ms ease;
+}
+
 .build-stamp {
   margin-top: 28px;
   padding-top: 14px;
@@ -196,15 +245,51 @@ body[data-reading-level="2"] .level-3 { display: none; }
   border-radius: 16px;
   padding: 10px 12px;
   margin: 14px 0;
+  position: relative;
 }
-.details-summary {
-  cursor: pointer;
-  font-weight: 650;
+
+/* ✅ Handle minimal pour sections fermées : pas de titre visible, mais ouvrable */
+.details-summary{
   list-style: none;
+  cursor: pointer;
+  user-select: none;
+
+  border: 1px dashed rgba(127,127,127,.25);
+  border-radius: 999px;
+  padding: 6px 10px;
+  margin: 10px 0;
+
+  background: rgba(127,127,127,0.06);
+  position: relative;
+
+  /* cache le texte réel (souvent le titre), sans casser l’accessibilité */
+  color: transparent;
 }
 .details-summary::-webkit-details-marker { display: none; }
-.details-summary a { text-decoration: none; }
-.details-summary a:hover { text-decoration: underline; }
+
+.details-summary::before{
+  content: "▸ Ouvrir la section";
+  color: rgba(127,127,127,0.85);
+  font-size: 12px;
+  font-weight: 850;
+}
+@media (prefers-color-scheme: dark){
+  .details-summary::before{ color: rgba(220,220,220,0.82); }
+}
+
+details[open] > .details-summary{
+  /* une fois ouvert, on le rend “SR-only” pour éviter le doublon visuel */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .details-body { margin-top: 10px; }
 
 /* Smooth scroll */
@@ -224,7 +309,6 @@ html{ scroll-behavior: smooth; }
   width: var(--reading-width);
   right: auto;
 
-  /* colle au header */
   top: var(--sticky-header-h);
 
   z-index: 60;
@@ -247,7 +331,7 @@ html{ scroll-behavior: smooth; }
   box-sizing: border-box;
 
   padding: 8px 12px;
-  padding-right: 84px; /* réserve pour les boutons */
+  padding-right: 84px;
 
   border: 1px solid rgba(127,127,127,.20);
   border-top: 0;
@@ -259,7 +343,7 @@ html{ scroll-behavior: smooth; }
 
   box-shadow: 0 10px 22px rgba(0,0,0,.06);
 
-  position: relative; /* pour rf-actions */
+  position: relative;
 }
 
 @media (prefers-color-scheme: dark){
@@ -278,7 +362,6 @@ html{ scroll-behavior: smooth; }
   cursor: pointer;
   margin: 0;
 }
-
 .rf-line[hidden]{ display: none !important; }
 
 .rf-h1{
@@ -298,7 +381,6 @@ html{ scroll-behavior: smooth; }
   font-weight: var(--rf-h3-fw);
   opacity: .92;
 }
-
 .rf-line:hover{ text-decoration: underline; }
 
 /* Actions */
@@ -327,3 +409,14 @@ html{ scroll-behavior: smooth; }
   background: rgba(127,127,127,0.16);
   transform: translateY(-1px);
 }
+
+/* ==========================
+   PATCH CRUCIAL : éviter les “rectangles vides”
+   (details fermés + summary handle minimal)
+   ========================== */
+
+.reading details.details-section:not([open]){
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
-- 
2.49.1