Merge pull request 'fix(glossaire): description précise du correctif' (#284) from fix/nom-court-et-clair into main

Reviewed-on: #284

src/components/GlossaryHomeAside.astro

@@ -79,6 +79,7 @@ const portalLinks = [
   { href: "/glossaire/tensions-irreductibles/", label: "Tensions irréductibles" },
   { href: "/glossaire/archicrations/", label: "Méta-régimes archicratiques" },
   { href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
+  { href: "/glossaire/verbes-de-la-scene/", label: "Verbes de la scène" },
   { href: "/glossaire/index-complet/", label: "Index complet" },
 ];
 ---

src/pages/glossaire/verbes-de-la-scene.astro

@@ -194,6 +194,7 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
 <GlossaryLayout
   title="Verbes de la scène"
   version="1.0"
+  stickyMode="glossary-portal"
 >
   <Fragment slot="aside">
     <nav class="verbs-aside" aria-label="Navigation des verbes de la scène">
@@ -218,7 +219,7 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
           <li><a href="/glossaire/scene-depreuve/">Scène d’épreuve</a></li>
           <li><a href="/glossaire/archicration/">Archicration</a></li>
           <li><a href="/glossaire/obliteration-archicratique/">Oblitération archicratique</a></li>
-          <li><a href="/glossaire/archicration-obliterée/">Archicration oblitérée</a></li>
+          <li><a href="/glossaire/archicration-obliteree/">Archicration oblitérée</a></li>
           <li><a href="/glossaire/synchrotopie/">Synchrotopie</a></li>
           <li><a href="/glossaire/hypotopie/">Hypotopie</a></li>
           <li><a href="/glossaire/hypertopie/">Hypertopie</a></li>
@@ -228,8 +229,8 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
     </nav>
   </Fragment>
 
-  <section class="verbs-page">
+  <section class="verbs-page" data-verbs-page>
-    <div class="verbs-hero">
+    <div class="verbs-hero" data-verbs-hero>
       <p class="verbs-kicker">Mini-glossaire systémique</p>
       <h1>Verbes de la scène archicratique</h1>
       <p class="verbs-intro">
@@ -245,9 +246,9 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
     </div>
 
     {sections.map((section) => (
-      <section class="verbs-section" id={section.id}>
+      <section class="verbs-section">
         <div class="verbs-section__head">
-          <h2>{section.title}</h2>
+          <h2 id={section.id}>{section.title}</h2>
           <span class="verbs-section__count">
             {section.items.length} verbe{section.items.length > 1 ? "s" : ""}
           </span>
@@ -282,6 +283,112 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
       </p>
     </section>
   </section>
+
+  <script is:inline>
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const root = document.documentElement;
+        const hero = document.querySelector("[data-verbs-hero]");
+
+        if (!body || !root || !hero) return;
+
+        const BODY_CLASS = "is-verbes-de-la-scene-page";
+        const FOLLOW_ON_CLASS = "verbs-follow-on";
+        const mqMobile = window.matchMedia("(max-width: 860px)");
+
+        body.classList.add(BODY_CLASS);
+
+        const heroHeight = () =>
+          Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
+
+        const stripLocalSticky = () => {
+          document.querySelectorAll(".verbs-section__head").forEach((el) => {
+            el.classList.remove("is-sticky");
+            el.removeAttribute("data-sticky-active");
+          });
+        };
+
+        const applyLocalStickyHeight = () => {
+          const h = mqMobile.matches ? 0 : heroHeight();
+
+          if (typeof window.__archiSetLocalStickyHeight === "function") {
+            window.__archiSetLocalStickyHeight(h);
+          } else {
+            root.style.setProperty("--glossary-local-sticky-h", `${h}px`);
+          }
+        };
+
+        const syncFollowState = () => {
+          const follow = document.getElementById("reading-follow");
+
+          const followOn =
+            !mqMobile.matches &&
+            !!follow &&
+            follow.classList.contains("is-on") &&
+            follow.style.display !== "none" &&
+            follow.getAttribute("aria-hidden") !== "true";
+
+          body.classList.toggle(FOLLOW_ON_CLASS, followOn);
+        };
+
+        const syncAll = () => {
+          stripLocalSticky();
+          applyLocalStickyHeight();
+          syncFollowState();
+        };
+
+        let raf = 0;
+        const schedule = () => {
+          if (raf) return;
+          raf = requestAnimationFrame(() => {
+            raf = 0;
+            requestAnimationFrame(syncAll);
+          });
+        };
+
+        const follow = document.getElementById("reading-follow");
+        const followObserver =
+          follow
+            ? new MutationObserver(schedule)
+            : null;
+
+        followObserver?.observe(follow, {
+          attributes: true,
+          attributeFilter: ["class", "style", "aria-hidden"],
+          subtree: false,
+        });
+
+        const heroResizeObserver =
+          typeof ResizeObserver !== "undefined"
+            ? new ResizeObserver(schedule)
+            : null;
+
+        heroResizeObserver?.observe(hero);
+
+        window.addEventListener("resize", schedule);
+        window.addEventListener("pageshow", schedule);
+
+        if (document.fonts?.ready) {
+          document.fonts.ready.then(schedule).catch(() => {});
+        }
+
+        if (mqMobile.addEventListener) {
+          mqMobile.addEventListener("change", schedule);
+        } else if (mqMobile.addListener) {
+          mqMobile.addListener(schedule);
+        }
+
+        schedule();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
 </GlossaryLayout>
 
 <style>
@@ -290,29 +397,58 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
   }
 
   .verbs-hero{
-    margin-bottom: 24px;
+    position: sticky;
+    top: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px));
+    z-index: 11;
+    margin: 0 0 24px;
+    padding: 18px 18px 20px;
+    border: 1px solid rgba(127,127,127,0.18);
+    border-radius: 28px;
+    background:
+      linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.92)),
+      radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    transition:
+      margin-bottom 180ms ease,
+      border-radius 180ms ease;
   }
 
   .verbs-kicker{
+    margin: 0 0 10px;
     font-size: 12px;
     letter-spacing: .08em;
     text-transform: uppercase;
     opacity: .72;
-    margin-bottom: 8px;
+  }
+
+  .verbs-hero h1{
+    margin: 0 0 14px;
+    font-size: clamp(2.2rem, 4vw, 3.15rem);
+    line-height: 1.02;
+    letter-spacing: -.04em;
+    font-weight: 850;
   }
 
   .verbs-intro{
     max-width: 76ch;
-    opacity: .92;
+    margin: 0;
+    font-size: 1.04rem;
+    line-height: 1.55;
+    opacity: .94;
+  }
+
+  .verbs-intro + .verbs-intro{
+    margin-top: 14px;
   }
 
   .verbs-section{
     margin-top: 34px;
-    scroll-margin-top: calc(var(--sticky-offset) + 75px);
+    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
   }
 
   .verbs-section h2{
-    scroll-margin-top: calc(var(--sticky-offset) + 75px);
+    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
   }
 
   .verbs-section__head{
@@ -321,6 +457,8 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
     justify-content: space-between;
     gap: 12px;
     flex-wrap: wrap;
+    margin-bottom: 10px;
+    position: static;
   }
 
   .verbs-section__count{
@@ -331,6 +469,7 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
 
   .verbs-section__intro{
     max-width: 78ch;
+    margin: 0;
     opacity: .92;
   }
 
@@ -435,6 +574,47 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
     line-height: 1.3;
   }
 
+  :global(body.is-verbes-de-la-scene-page #reading-follow){
+    z-index: 10;
+  }
+
+  :global(body.is-verbes-de-la-scene-page.verbs-follow-on .verbs-hero){
+    margin-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  :global(body.is-verbes-de-la-scene-page.verbs-follow-on #reading-follow .reading-follow__inner){
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  :global(body.is-verbes-de-la-scene-page .verbs-section__head.is-sticky),
+  :global(body.is-verbes-de-la-scene-page .verbs-section__head[data-sticky-active="true"]){
+    position: static !important;
+    top: auto !important;
+    z-index: auto !important;
+    padding: 0 !important;
+    border: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+  }
+
+  @media (max-width: 860px){
+    .verbs-hero{
+      position: static;
+      border-radius: 22px;
+      margin-bottom: 20px;
+    }
+
+    :global(body.is-verbes-de-la-scene-page.verbs-follow-on .verbs-hero){
+      border-radius: 22px;
+      margin-bottom: 20px;
+    }
+  }
+
   @media (prefers-color-scheme: dark){
     .verbs-card,
     .verbs-aside__block{