style(mobile): widen reading in landscape on small screens (css-only)

src/layouts/EditionLayout.astro

@@ -5,6 +5,7 @@ import LevelToggle from "../components/LevelToggle.astro";
 import BuildStamp from "../components/BuildStamp.astro";
 import SidePanel from "../components/SidePanel.astro";
 import "../styles/global.css";
+import "../styles/panel.css";
 
 const {
   title,
@@ -261,17 +262,24 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         padding: var(--page-gap) 16px 48px;
       }
 
+      /* ✅ Grille robustifiée + panel plus confortable (base) */
       .page-shell{
         --aside-w: 320px;
         --reading-w: 78ch;
-        --panel-w: 380px;
+        --panel-w: 420px;
         --gap: 18px;
 
-        max-width: calc(var(--aside-w) + var(--reading-w) + var(--panel-w) + (var(--gap) * 2));
+        max-width: min(
+          calc(var(--aside-w) + var(--reading-w) + var(--panel-w) + (var(--gap) * 2)),
+          calc(100vw - 32px)
+        );
         margin: 0 auto;
 
         display: grid;
-        grid-template-columns: var(--aside-w) minmax(0, var(--reading-w)) var(--panel-w);
+        grid-template-columns:
+          var(--aside-w)
+          minmax(0, var(--reading-w))
+          minmax(0, var(--panel-w));
         column-gap: var(--gap);
         align-items: start;
       }
@@ -346,23 +354,38 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       }
       :global(body[data-reading-level="1"]) .page-panel{ display: none !important; }
 
-      /* Niveau 3 : lecture plus étroite + panel large ; TOC masqué */
+      /* 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);
+        --reading-w: 60ch;
+        --panel-w: clamp(720px, 48vw, 940px);
+
+        max-width: min(
+          calc(var(--reading-w) + var(--panel-w) + var(--gap)),
+          calc(100vw - 32px)
+        );
+
+        grid-template-columns:
+          minmax(0, var(--reading-w))
+          minmax(0, 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 */
+      /* Niveau 4 : TOC à gauche + panel confortable */
       :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);
+        --panel-w: clamp(520px, 36vw, 720px);
+
+        max-width: min(
+          calc(var(--aside-w) + var(--reading-w) + var(--panel-w) + (var(--gap) * 2)),
+          calc(100vw - 32px)
+        );
+
+        grid-template-columns:
+          var(--aside-w)
+          minmax(0, var(--reading-w))
+          minmax(0, var(--panel-w));
       }
       :global(body[data-reading-level="4"]) .page-aside{ display: block; }
       :global(body[data-reading-level="4"]) .reading{ grid-column: 2; }
@@ -1158,6 +1181,45 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     });
   });
 
+  /* ✅ NOUVEAU : clic paragraphe => snap sous reading-follow + SidePanel aligné */
+  safe("click-para-align", () => {
+    if (!reading) return;
+
+    reading.addEventListener("click", (ev) => {
+      try {
+        const t = ev.target;
+
+        // ne pas casser les boutons / liens / para-tools
+        if (t && t.closest && t.closest(".para-tools")) return;
+        const a = t && t.closest ? t.closest("a") : null;
+        if (a) return;
+
+        const p = t && t.closest ? t.closest('.reading p[id^="p-"]') : null;
+        if (!p || !p.id) return;
+
+        // si sélection texte en cours => ne pas snap
+        const sel = window.getSelection ? window.getSelection() : null;
+        if (sel && !sel.isCollapsed) return;
+
+        openDetailsIfNeeded(p);
+
+        // snap immédiat sous followbar
+        scrollToElWithOffset(p, 12, "auto");
+
+        // URL stable
+        history.replaceState(null, "", `${location.pathname}#${p.id}`);
+
+        // force la source de vérité (SidePanel suit via event archicratie:currentPara)
+        __hoverParaId = "";
+        __activeParaId = p.id;
+        setCurrentPara(p.id, "click");
+
+        writeLastSeen(p.id);
+        updateResumeButton();
+      } catch {}
+    }, { passive: true });
+  });
+
   // ===== Hash handling (robuste) =====
   function resolveParaIdFromEl(el) {
     if (!el) return "";
@@ -1281,8 +1343,6 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 
     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.nextElementSibling && s.nextElementSibling.tagName === "DETAILS")
@@ -1572,4 +1632,4 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 })();
     </script>
   </body>
-</html>
+</html>