diff --git a/src/components/GlossaryPortalAside.astro b/src/components/GlossaryPortalAside.astro
new file mode 100644
index 0000000..1bb7693
--- /dev/null
+++ b/src/components/GlossaryPortalAside.astro
@@ -0,0 +1,122 @@
+---
+interface LinkItem {
+  href: string;
+  label: string;
+}
+
+interface Props {
+  ariaLabel: string;
+  title: string;
+  meta?: string;
+  backHref?: string;
+  backLabel?: string;
+  pageItems?: LinkItem[];
+  usefulLinks?: LinkItem[];
+}
+
+const {
+  ariaLabel,
+  title,
+  meta,
+  backHref = "/glossaire/",
+  backLabel = "← Retour au glossaire",
+  pageItems = [],
+  usefulLinks = [],
+} = Astro.props;
+---
+
+<nav class="glossary-portal-aside" aria-label={ariaLabel}>
+  <div class="glossary-portal-aside__block">
+    <a class="glossary-portal-aside__back" href={backHref}>{backLabel}</a>
+    <div class="glossary-portal-aside__title">{title}</div>
+    {meta && <div class="glossary-portal-aside__meta">{meta}</div>}
+  </div>
+
+  {pageItems.length > 0 && (
+    <div class="glossary-portal-aside__block">
+      <h2 class="glossary-portal-aside__heading">Dans cette page</h2>
+      <ul class="glossary-portal-aside__list">
+        {pageItems.map((item) => (
+          <li><a href={item.href}>{item.label}</a></li>
+        ))}
+      </ul>
+    </div>
+  )}
+
+  {usefulLinks.length > 0 && (
+    <div class="glossary-portal-aside__block">
+      <h2 class="glossary-portal-aside__heading">Renvois utiles</h2>
+      <ul class="glossary-portal-aside__list">
+        {usefulLinks.map((item) => (
+          <li><a href={item.href}>{item.label}</a></li>
+        ))}
+      </ul>
+    </div>
+  )}
+</nav>
+
+<style>
+  .glossary-portal-aside{
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .glossary-portal-aside__block{
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 16px;
+    padding: 12px;
+    background: rgba(127,127,127,0.05);
+  }
+
+  .glossary-portal-aside__back{
+    display: inline-block;
+    margin-bottom: 8px;
+    font-size: 13px;
+    font-weight: 700;
+    text-decoration: none;
+  }
+
+  .glossary-portal-aside__title{
+    font-size: 14px;
+    font-weight: 800;
+    letter-spacing: .2px;
+    line-height: 1.25;
+  }
+
+  .glossary-portal-aside__meta{
+    margin-top: 8px;
+    font-size: 12px;
+    line-height: 1.35;
+    opacity: .78;
+  }
+
+  .glossary-portal-aside__heading{
+    margin: 0 0 10px;
+    font-size: 13px;
+    font-weight: 800;
+    opacity: .9;
+  }
+
+  .glossary-portal-aside__list{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .glossary-portal-aside__list li{
+    margin: 6px 0;
+  }
+
+  .glossary-portal-aside__list a{
+    text-decoration: none;
+    font-size: 13px;
+    line-height: 1.3;
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-portal-aside__block{
+      background: rgba(255,255,255,0.04);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/GlossaryPortalHero.astro b/src/components/GlossaryPortalHero.astro
new file mode 100644
index 0000000..eec5282
--- /dev/null
+++ b/src/components/GlossaryPortalHero.astro
@@ -0,0 +1,190 @@
+---
+interface Props {
+  prefix: string;
+  kicker: string;
+  title: string;
+  intro: string;
+  moreParagraphs?: string[];
+  introMaxWidth?: string;
+  followIntroMaxWidth?: string;
+  moreMaxHeight?: string;
+}
+
+const {
+  prefix,
+  kicker,
+  title,
+  intro,
+  moreParagraphs = [],
+  introMaxWidth = "72ch",
+  followIntroMaxWidth = "68ch",
+  moreMaxHeight = "18rem",
+} = Astro.props;
+---
+
+<div
+  class="glossary-portal-hero glossary-page-hero"
+  data-glossary-portal-hero
+  style={`--portal-hero-intro-max-w:${introMaxWidth}; --portal-hero-follow-intro-max-w:${followIntroMaxWidth}; --portal-hero-more-max-h:${moreMaxHeight};`}
+>
+  <p class="glossary-portal-hero__kicker">{kicker}</p>
+  <h1>{title}</h1>
+
+  <p class="glossary-portal-hero__intro">
+    {intro}
+  </p>
+
+  {moreParagraphs.length > 0 && (
+    <div class="glossary-portal-hero__collapsible">
+      <div
+        class="glossary-portal-hero__more"
+        id={`${prefix}-hero-more`}
+        data-glossary-portal-more
+        aria-hidden="false"
+      >
+        {moreParagraphs.map((paragraph) => (
+          <p class="glossary-portal-hero__intro">{paragraph}</p>
+        ))}
+      </div>
+
+      <button
+        class="glossary-portal-hero__toggle"
+        id={`${prefix}-hero-toggle`}
+        data-glossary-portal-toggle
+        type="button"
+        aria-controls={`${prefix}-hero-more`}
+        aria-expanded="false"
+        hidden
+      >
+        lire la suite
+      </button>
+    </div>
+  )}
+</div>
+
+<style>
+  .glossary-portal-hero{
+    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);
+    display: grid;
+    row-gap: 14px;
+    transition:
+      margin-bottom 180ms ease,
+      border-radius 180ms ease,
+      padding 180ms ease,
+      row-gap 180ms ease;
+  }
+
+  .glossary-portal-hero__kicker{
+    margin: 0;
+    font-size: 12px;
+    letter-spacing: .08em;
+    text-transform: uppercase;
+    opacity: .72;
+  }
+
+  .glossary-portal-hero h1{
+    margin: 0;
+    font-size: clamp(2.2rem, 4vw, 3.15rem);
+    line-height: 1.02;
+    letter-spacing: -.04em;
+    font-weight: 850;
+    transition: font-size 180ms ease;
+  }
+
+  .glossary-portal-hero__intro{
+    margin: 0;
+    max-width: var(--portal-hero-intro-max-w);
+    font-size: 1.04rem;
+    line-height: 1.55;
+    opacity: .94;
+    transition:
+      font-size 180ms ease,
+      line-height 180ms ease,
+      max-width 180ms ease;
+  }
+
+  .glossary-portal-hero__collapsible{
+    display: grid;
+    row-gap: 6px;
+  }
+
+  .glossary-portal-hero__more{
+    display: grid;
+    row-gap: 14px;
+    max-height: var(--portal-hero-more-max-h);
+    overflow: hidden;
+    opacity: 1;
+    transition:
+      max-height 220ms ease,
+      opacity 180ms ease;
+  }
+
+  .glossary-portal-hero__toggle{
+    display: none;
+    align-self: flex-start;
+    width: fit-content;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 11px;
+    line-height: 1.2;
+    letter-spacing: .01em;
+    opacity: .56;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: .12em;
+    text-decoration-thickness: 1px;
+  }
+
+  .glossary-portal-hero__toggle:hover{
+    opacity: .84;
+  }
+
+  .glossary-portal-hero__toggle:focus-visible{
+    outline: 2px solid rgba(0,217,255,0.24);
+    outline-offset: 4px;
+    border-radius: 4px;
+  }
+
+  .glossary-portal-hero__toggle[hidden]{
+    display: none !important;
+  }
+
+  @media (max-width: 860px){
+    .glossary-portal-hero{
+      position: static;
+      border-radius: 22px;
+      margin-bottom: 20px;
+      padding: 14px 14px 16px;
+      row-gap: 12px;
+    }
+
+    .glossary-portal-hero__intro{
+      max-width: none;
+    }
+
+    .glossary-portal-hero__more{
+      max-height: none;
+      opacity: 1;
+      overflow: visible;
+    }
+
+    .glossary-portal-hero__toggle{
+      display: none !important;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/GlossaryPortalSection.astro b/src/components/GlossaryPortalSection.astro
new file mode 100644
index 0000000..13f67f1
--- /dev/null
+++ b/src/components/GlossaryPortalSection.astro
@@ -0,0 +1,67 @@
+---
+interface Props {
+  id: string;
+  title: string;
+  count?: string;
+  intro?: string;
+  final?: boolean;
+  className?: string;
+}
+
+const {
+  id,
+  title,
+  count,
+  intro,
+  final = false,
+  className,
+} = Astro.props;
+---
+
+<section class:list={["glossary-portal-section", final && "glossary-portal-section--final", className]}>
+  <div class="glossary-portal-section__head">
+    <h2 id={id}>{title}</h2>
+    {count && <span class="glossary-portal-section__count">{count}</span>}
+  </div>
+
+  {intro && <p class="glossary-portal-section__intro">{intro}</p>}
+
+  <slot />
+</section>
+
+<style>
+  .glossary-portal-section{
+    margin-top: 34px;
+    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
+  }
+
+  .glossary-portal-section h2{
+    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
+  }
+
+  .glossary-portal-section__head{
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+    position: static;
+  }
+
+  .glossary-portal-section__count{
+    font-size: 13px;
+    opacity: .72;
+    white-space: nowrap;
+  }
+
+  .glossary-portal-section__intro{
+    max-width: 78ch;
+    margin: 0;
+    opacity: .92;
+  }
+
+  .glossary-portal-section--final{
+    margin-top: 42px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/GlossaryPortalStickySync.astro b/src/components/GlossaryPortalStickySync.astro
new file mode 100644
index 0000000..b1effad
--- /dev/null
+++ b/src/components/GlossaryPortalStickySync.astro
@@ -0,0 +1,294 @@
+---
+interface Props {
+  heroMoreId: string;
+  heroToggleId: string;
+  sectionHeadSelector?: string;
+  mobileBreakpoint?: number;
+  autoCollapseDelta?: number;
+}
+
+const {
+  heroMoreId,
+  heroToggleId,
+  sectionHeadSelector = ".glossary-portal-section__head",
+  mobileBreakpoint = 860,
+  autoCollapseDelta = 160,
+} = Astro.props;
+---
+
+<script
+  is:inline
+  define:vars={{ heroMoreId, heroToggleId, sectionHeadSelector, mobileBreakpoint, autoCollapseDelta }}
+>
+  (() => {
+    const boot = () => {
+      const body = document.body;
+      const root = document.documentElement;
+      const hero = document.querySelector("[data-glossary-portal-hero]");
+      const follow = document.getElementById("reading-follow");
+      const heroMore = document.getElementById(heroMoreId);
+      const heroToggle = document.getElementById(heroToggleId);
+
+      if (!body || !root || !hero || !follow) return;
+
+      const BODY_CLASS = "is-glossary-portal-page";
+      const FOLLOW_ON_CLASS = "glossary-portal-follow-on";
+      const EXPANDED_CLASS = "glossary-portal-hero-expanded";
+      const mqMobile = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);
+
+      let expandedAtY = null;
+      let lastScrollY = window.scrollY || 0;
+      let raf = 0;
+
+      body.classList.add(BODY_CLASS);
+
+      const heroHeight = () =>
+        Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
+
+      const stripLocalSticky = () => {
+        document.querySelectorAll(sectionHeadSelector).forEach((el) => {
+          el.classList.remove("is-sticky");
+          el.removeAttribute("data-sticky-active");
+        });
+      };
+
+      const computeFollowOn = () =>
+        !mqMobile.matches &&
+        follow.classList.contains("is-on") &&
+        follow.style.display !== "none" &&
+        follow.getAttribute("aria-hidden") !== "true";
+
+      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 on = computeFollowOn();
+        body.classList.toggle(FOLLOW_ON_CLASS, on);
+        return on;
+      };
+
+      const collapseHero = () => {
+        if (!body.classList.contains(EXPANDED_CLASS)) return;
+
+        body.classList.remove(EXPANDED_CLASS);
+        expandedAtY = null;
+
+        if (heroMore) {
+          heroMore.setAttribute("aria-hidden", "true");
+        }
+
+        if (heroToggle) {
+          heroToggle.hidden = false;
+          heroToggle.setAttribute("aria-expanded", "false");
+        }
+
+        try {
+          window.__archiUpdateFollow?.();
+        } catch {}
+
+        schedule();
+      };
+
+      const expandHero = () => {
+        body.classList.add(EXPANDED_CLASS);
+        expandedAtY = window.scrollY || 0;
+
+        if (heroMore) {
+          heroMore.setAttribute("aria-hidden", "false");
+        }
+
+        if (heroToggle) {
+          heroToggle.hidden = true;
+          heroToggle.setAttribute("aria-expanded", "true");
+        }
+
+        try {
+          window.__archiUpdateFollow?.();
+        } catch {}
+
+        schedule();
+      };
+
+      const syncHeroState = () => {
+        const followOn = computeFollowOn();
+        const expanded = body.classList.contains(EXPANDED_CLASS);
+        const collapsed = followOn && !expanded;
+
+        if (!followOn || mqMobile.matches) {
+          body.classList.remove(EXPANDED_CLASS);
+          expandedAtY = null;
+
+          if (heroMore) {
+            heroMore.setAttribute("aria-hidden", "false");
+          }
+
+          if (heroToggle) {
+            heroToggle.hidden = true;
+            heroToggle.setAttribute("aria-expanded", "false");
+          }
+
+          return;
+        }
+
+        if (heroMore) {
+          heroMore.setAttribute("aria-hidden", collapsed ? "true" : "false");
+        }
+
+        if (heroToggle) {
+          heroToggle.hidden = !collapsed;
+          heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
+        }
+      };
+
+      const maybeAutoCollapseOnScroll = () => {
+        if (mqMobile.matches) {
+          lastScrollY = window.scrollY || 0;
+          return;
+        }
+
+        if (!computeFollowOn()) {
+          lastScrollY = window.scrollY || 0;
+          return;
+        }
+
+        if (!body.classList.contains(EXPANDED_CLASS)) {
+          lastScrollY = window.scrollY || 0;
+          return;
+        }
+
+        if (expandedAtY == null) {
+          lastScrollY = window.scrollY || 0;
+          return;
+        }
+
+        const currentY = window.scrollY || 0;
+        const scrollingDown = currentY > lastScrollY;
+        const delta = currentY - expandedAtY;
+
+        if (scrollingDown && delta >= autoCollapseDelta) {
+          collapseHero();
+        }
+
+        lastScrollY = currentY;
+      };
+
+      const syncAll = () => {
+        stripLocalSticky();
+        syncFollowState();
+        syncHeroState();
+        applyLocalStickyHeight();
+      };
+
+      const schedule = () => {
+        if (raf) return;
+        raf = requestAnimationFrame(() => {
+          raf = 0;
+          requestAnimationFrame(syncAll);
+        });
+      };
+
+      heroToggle?.addEventListener("click", expandHero);
+
+      const onScroll = () => {
+        maybeAutoCollapseOnScroll();
+        schedule();
+      };
+
+      const followObserver = new MutationObserver(schedule);
+      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("scroll", onScroll, { passive: true });
+      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>
+
+<style>
+  :global(body.is-glossary-portal-page #reading-follow){
+    z-index: 10;
+  }
+
+  :global(body.is-glossary-portal-page.glossary-portal-follow-on .glossary-portal-hero){
+    margin-bottom: 0;
+    padding: 12px 16px 14px;
+    row-gap: 10px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  :global(body.is-glossary-portal-page.glossary-portal-follow-on .glossary-portal-hero h1){
+    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
+  }
+
+  :global(body.is-glossary-portal-page.glossary-portal-follow-on .glossary-portal-hero__intro){
+    max-width: var(--portal-hero-follow-intro-max-w, 68ch);
+    font-size: .98rem;
+    line-height: 1.48;
+  }
+
+  :global(body.is-glossary-portal-page.glossary-portal-follow-on:not(.glossary-portal-hero-expanded) .glossary-portal-hero__more){
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  :global(body.is-glossary-portal-page.glossary-portal-follow-on:not(.glossary-portal-hero-expanded) .glossary-portal-hero__toggle){
+    display: inline-flex;
+  }
+
+  :global(body.is-glossary-portal-page.glossary-portal-follow-on #reading-follow .reading-follow__inner){
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  :global(body.is-glossary-portal-page .glossary-portal-section__head.is-sticky),
+  :global(body.is-glossary-portal-page .glossary-portal-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;
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/glossaire/archicrations.astro b/src/pages/glossaire/archicrations.astro
index 2621f30..1482fa5 100644
--- a/src/pages/glossaire/archicrations.astro
+++ b/src/pages/glossaire/archicrations.astro
@@ -1,14 +1,20 @@
 ---
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
+import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
+import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
+import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
+import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
 import { getCollection } from "astro:content";
+import {
+  buildGlossaryBySlug,
+  hrefOfGlossaryEntry,
+} from "../../lib/glossary";
 
 const entries = await getCollection("glossaire");
 
-const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
-const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
-
 const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
-const bySlug = new Map(entries.map((entry) => [slugOf(entry), entry]));
+const bySlug = buildGlossaryBySlug(entries);
+const hrefOf = hrefOfGlossaryEntry;
 
 function resolve(slugs = []) {
   return slugs
@@ -74,6 +80,19 @@ const sections = [
 ];
 
 const totalCount = sections.reduce((sum, section) => sum + section.items.length, 0);
+
+const pageItems = sections.map((section) => ({
+  href: `#${section.id}`,
+  label: section.title,
+}));
+
+const usefulLinks = [
+  { href: "/glossaire/archicration/", label: "Archicration" },
+  { href: "/glossaire/archicratie/", label: "Archicratie" },
+  { href: "/glossaire/arcalite/", label: "Arcalité" },
+  { href: "/glossaire/cratialite/", label: "Cratialité" },
+  { href: "/glossaire/co-viabilite/", label: "Co-viabilité" },
+];
 ---
 
 <GlossaryLayout
@@ -82,99 +101,49 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
   stickyMode="glossary-portal"
 >
   <Fragment slot="aside">
-    <nav class="archi-aside" aria-label="Navigation des archicrations">
-      <div class="archi-aside__block">
-        <a class="archi-aside__back" href="/glossaire/">← Retour au glossaire</a>
-        <div class="archi-aside__title">Archicrations</div>
-        <div class="archi-aside__meta">{totalCount} types cartographiés</div>
-      </div>
-
-      <div class="archi-aside__block">
-        <h2 class="archi-aside__heading">Dans cette page</h2>
-        <ul class="archi-aside__list">
-          {sections.map((section) => (
-            <li><a href={`#${section.id}`}>{section.title}</a></li>
-          ))}
-        </ul>
-      </div>
-
-      <div class="archi-aside__block">
-        <h2 class="archi-aside__heading">Renvois utiles</h2>
-        <ul class="archi-aside__list">
-          <li><a href="/glossaire/archicration/">Archicration</a></li>
-          <li><a href="/glossaire/archicratie/">Archicratie</a></li>
-          <li><a href="/glossaire/arcalite/">Arcalité</a></li>
-          <li><a href="/glossaire/cratialite/">Cratialité</a></li>
-          <li><a href="/glossaire/co-viabilite/">Co-viabilité</a></li>
-        </ul>
-      </div>
-    </nav>
+    <GlossaryPortalAside
+      ariaLabel="Navigation des archicrations"
+      title="Archicrations"
+      meta={`${totalCount} type${totalCount > 1 ? "s" : ""} cartographié${totalCount > 1 ? "s" : ""}`}
+      pageItems={pageItems}
+      usefulLinks={usefulLinks}
+    />
   </Fragment>
 
-  <section class="archi-page" data-archi-page>
-    <div class="archi-hero glossary-page-hero" data-archi-hero>
-      <p class="archi-kicker">Topologie archicratique</p>
-      <h1>Archicrations</h1>
-
-      <p class="archi-intro">
-        Cette page rassemble les principales formes d’archicration distinguées
-        dans le glossaire. Elle propose une vue d’ensemble des grands régimes de
-        co-viabilité à partir desquels un collectif se stabilise, se transmet,
-        se transforme ou se recompose.
-      </p>
-
-      <div class="archi-hero-collapsible">
-        <div
-          class="archi-hero-more"
-          id="archi-hero-more"
-          data-archi-more
-          aria-hidden="false"
-        >
-          <p class="archi-intro">
-            Les catégories proposées ci-dessous ne valent pas comme cases closes,
-            mais comme repères de lecture permettant de situer les différentes
-            topologies de régulation et leurs articulations.
-          </p>
-        </div>
-
-        <button
-          class="archi-hero-toggle"
-          id="archi-hero-toggle"
-          data-archi-more-toggle
-          type="button"
-          aria-controls="archi-hero-more"
-          aria-expanded="false"
-          hidden
-        >
-          lire la suite
-        </button>
-      </div>
-    </div>
+  <section class="archi-page">
+    <GlossaryPortalHero
+      prefix="archi"
+      kicker="Topologie archicratique"
+      title="Archicrations"
+      intro="Cette page rassemble les principales formes d’archicration distinguées dans le glossaire. Elle propose une vue d’ensemble des grands régimes de co-viabilité à partir desquels un collectif se stabilise, se transmet, se transforme ou se recompose."
+      moreParagraphs={[
+        "Les catégories proposées ci-dessous ne valent pas comme cases closes, mais comme repères de lecture permettant de situer les différentes topologies de régulation et leurs articulations.",
+      ]}
+      introMaxWidth="72ch"
+      followIntroMaxWidth="68ch"
+      moreMaxHeight="18rem"
+    />
 
     {sections.map((section) => (
-      <section class="archi-section">
-        <div class="archi-section__head">
-          <h2 id={section.id}>{section.title}</h2>
-          <span class="archi-section__count">
-            {section.items.length} fiche{section.items.length > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="archi-section__intro">{section.intro}</p>
-
+      <GlossaryPortalSection
+        id={section.id}
+        title={section.title}
+        count={`${section.items.length} fiche${section.items.length > 1 ? "s" : ""}`}
+        intro={section.intro}
+      >
         <div class="archi-cards">
           {section.items.map((entry) => (
             <a class="archi-card" href={hrefOf(entry)}>
               <strong>{entry.data.term}</strong>
               <span>{entry.data.definitionShort}</span>
 
-              {entry.data.comparisonTraditions && (
+              {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                 <small>
                   Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                 </small>
               )}
 
-              {entry.data.mobilizedAuthors?.length > 0 && (
+              {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
                 <small>
                   Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
                 </small>
@@ -182,11 +151,14 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
             </a>
           ))}
         </div>
-      </section>
+      </GlossaryPortalSection>
     ))}
 
-    <section class="archi-section archi-section--final">
-      <h2>Portée d’ensemble</h2>
+    <GlossaryPortalSection
+      id="portee-densemble"
+      title="Portée d’ensemble"
+      final={true}
+    >
       <p>
         Cette cartographie permet de lire les archicrations non comme des formes
         isolées, mais comme des topologies de régulation susceptibles de se
@@ -195,232 +167,13 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
         <a href="/glossaire/archicratie/">archicratie</a> peut être pensée comme
         intelligibilité d’ensemble des formes de co-viabilité.
       </p>
-    </section>
+    </GlossaryPortalSection>
   </section>
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const hero = document.querySelector("[data-archi-hero]");
-        const follow = document.getElementById("reading-follow");
-        const heroMore = document.getElementById("archi-hero-more");
-        const heroToggle = document.getElementById("archi-hero-toggle");
-
-        if (!body || !root || !hero || !follow) return;
-
-        const BODY_CLASS = "is-archicrations-page";
-        const FOLLOW_ON_CLASS = "archi-follow-on";
-        const EXPANDED_CLASS = "archi-hero-expanded";
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const AUTO_COLLAPSE_DELTA = 160;
-
-        let expandedAtY = null;
-        let lastScrollY = window.scrollY || 0;
-
-        body.classList.add(BODY_CLASS);
-
-        const heroHeight = () =>
-          Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
-
-        const stripLocalSticky = () => {
-          document.querySelectorAll(".archi-section__head").forEach((el) => {
-            el.classList.remove("is-sticky");
-            el.removeAttribute("data-sticky-active");
-          });
-        };
-
-        const computeFollowOn = () =>
-          !mqMobile.matches &&
-          follow.classList.contains("is-on") &&
-          follow.style.display !== "none" &&
-          follow.getAttribute("aria-hidden") !== "true";
-
-        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 on = computeFollowOn();
-          body.classList.toggle(FOLLOW_ON_CLASS, on);
-          return on;
-        };
-
-        const collapseHero = () => {
-          if (!body.classList.contains(EXPANDED_CLASS)) return;
-
-          body.classList.remove(EXPANDED_CLASS);
-          expandedAtY = null;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "true");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = false;
-            heroToggle.setAttribute("aria-expanded", "false");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const expandHero = () => {
-          body.classList.add(EXPANDED_CLASS);
-          expandedAtY = window.scrollY || 0;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = true;
-            heroToggle.setAttribute("aria-expanded", "true");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const syncHeroState = () => {
-          const followOn = computeFollowOn();
-          const expanded = body.classList.contains(EXPANDED_CLASS);
-          const collapsed = followOn && !expanded;
-
-          if (!followOn || mqMobile.matches) {
-            body.classList.remove(EXPANDED_CLASS);
-            expandedAtY = null;
-
-            if (heroMore) {
-              heroMore.setAttribute("aria-hidden", "false");
-            }
-
-            if (heroToggle) {
-              heroToggle.hidden = true;
-              heroToggle.setAttribute("aria-expanded", "false");
-            }
-
-            return;
-          }
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", collapsed ? "true" : "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = !collapsed;
-            heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
-          }
-        };
-
-        const maybeAutoCollapseOnScroll = () => {
-          if (mqMobile.matches) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!computeFollowOn()) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!body.classList.contains(EXPANDED_CLASS)) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (expandedAtY == null) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          const currentY = window.scrollY || 0;
-          const scrollingDown = currentY > lastScrollY;
-          const delta = currentY - expandedAtY;
-
-          if (scrollingDown && delta >= AUTO_COLLAPSE_DELTA) {
-            collapseHero();
-          }
-
-          lastScrollY = currentY;
-        };
-
-        const syncAll = () => {
-          stripLocalSticky();
-          syncFollowState();
-          syncHeroState();
-          applyLocalStickyHeight();
-        };
-
-        let raf = 0;
-        const schedule = () => {
-          if (raf) return;
-          raf = requestAnimationFrame(() => {
-            raf = 0;
-            requestAnimationFrame(syncAll);
-          });
-        };
-
-        heroToggle?.addEventListener("click", () => {
-          expandHero();
-        });
-
-        const onScroll = () => {
-          maybeAutoCollapseOnScroll();
-          schedule();
-        };
-
-        const followObserver = new MutationObserver(schedule);
-        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("scroll", onScroll, { passive: true });
-        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>
+  <GlossaryPortalStickySync
+    heroMoreId="archi-hero-more"
+    heroToggleId="archi-hero-toggle"
+  />
 </GlossaryLayout>
 
 <style>
@@ -428,139 +181,6 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
     padding: 8px 0 24px;
   }
 
-  .archi-hero{
-    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);
-    display: grid;
-    row-gap: 14px;
-    transition:
-      margin-bottom 180ms ease,
-      border-radius 180ms ease,
-      padding 180ms ease,
-      row-gap 180ms ease;
-  }
-
-  .archi-kicker{
-    margin: 0;
-    font-size: 12px;
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    opacity: .72;
-  }
-
-  .archi-hero h1{
-    margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
-    line-height: 1.02;
-    letter-spacing: -.04em;
-    font-weight: 850;
-    transition: font-size 180ms ease;
-  }
-
-  .archi-intro{
-    margin: 0;
-    max-width: 72ch;
-    font-size: 1.04rem;
-    line-height: 1.55;
-    opacity: .94;
-    transition:
-      font-size 180ms ease,
-      line-height 180ms ease,
-      max-width 180ms ease;
-  }
-
-  .archi-hero-collapsible{
-    display: grid;
-    row-gap: 6px;
-  }
-
-  .archi-hero-more{
-    display: grid;
-    row-gap: 14px;
-    max-height: 18rem;
-    overflow: hidden;
-    opacity: 1;
-    transition:
-      max-height 220ms ease,
-      opacity 180ms ease;
-  }
-
-  .archi-hero-toggle{
-    display: none;
-    align-self: flex-start;
-    width: fit-content;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 11px;
-    line-height: 1.2;
-    letter-spacing: .01em;
-    text-transform: none;
-    opacity: .56;
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: .12em;
-    text-decoration-thickness: 1px;
-  }
-
-  .archi-hero-toggle:hover{
-    opacity: .84;
-  }
-
-  .archi-hero-toggle:focus-visible{
-    outline: 2px solid rgba(0,217,255,0.24);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  .archi-hero-toggle[hidden]{
-    display: none !important;
-  }
-
-  .archi-section{
-    margin-top: 34px;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .archi-section h2{
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .archi-section__head{
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
-    position: static;
-  }
-
-  .archi-section__count{
-    font-size: 13px;
-    opacity: .72;
-    white-space: nowrap;
-  }
-
-  .archi-section__intro{
-    max-width: 78ch;
-    margin: 0;
-    opacity: .92;
-  }
-
   .archi-cards{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -604,153 +224,8 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
     opacity: .72;
   }
 
-  .archi-section--final{
-    margin-top: 42px;
-  }
-
-  .archi-aside{
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-  }
-
-  .archi-aside__block{
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 12px;
-    background: rgba(127,127,127,0.05);
-  }
-
-  .archi-aside__back{
-    display: inline-block;
-    margin-bottom: 8px;
-    font-size: 13px;
-    font-weight: 700;
-    text-decoration: none;
-  }
-
-  .archi-aside__title{
-    font-size: 14px;
-    font-weight: 800;
-    letter-spacing: .2px;
-    line-height: 1.25;
-  }
-
-  .archi-aside__meta{
-    margin-top: 8px;
-    font-size: 12px;
-    line-height: 1.35;
-    opacity: .78;
-  }
-
-  .archi-aside__heading{
-    margin: 0 0 10px;
-    font-size: 13px;
-    font-weight: 800;
-    opacity: .9;
-  }
-
-  .archi-aside__list{
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .archi-aside__list li{
-    margin: 6px 0;
-  }
-
-  .archi-aside__list a{
-    text-decoration: none;
-    font-size: 13px;
-    line-height: 1.3;
-  }
-
-  :global(body.is-archicrations-page #reading-follow){
-    z-index: 10;
-  }
-
-  :global(body.is-archicrations-page.archi-follow-on .archi-hero){
-    margin-bottom: 0;
-    padding: 12px 16px 14px;
-    row-gap: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :global(body.is-archicrations-page.archi-follow-on .archi-hero h1){
-    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
-  }
-
-  :global(body.is-archicrations-page.archi-follow-on .archi-intro){
-    max-width: 68ch;
-    font-size: .98rem;
-    line-height: 1.48;
-  }
-
-  :global(body.is-archicrations-page.archi-follow-on:not(.archi-hero-expanded) .archi-hero-more){
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  :global(body.is-archicrations-page.archi-follow-on:not(.archi-hero-expanded) .archi-hero-toggle){
-    display: inline-flex;
-  }
-
-  :global(body.is-archicrations-page.archi-follow-on #reading-follow .reading-follow__inner){
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  :global(body.is-archicrations-page .archi-section__head.is-sticky),
-  :global(body.is-archicrations-page .archi-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){
-    .archi-hero{
-      position: static;
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
-    }
-
-    .archi-intro{
-      max-width: none;
-    }
-
-    .archi-hero-more{
-      max-height: none;
-      opacity: 1;
-      overflow: visible;
-    }
-
-    .archi-hero-toggle{
-      display: none !important;
-    }
-
-    :global(body.is-archicrations-page.archi-follow-on .archi-hero){
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
-    }
-  }
-
   @media (prefers-color-scheme: dark){
-    .archi-card,
-    .archi-aside__block{
+    .archi-card{
       background: rgba(255,255,255,0.04);
     }
 
diff --git a/src/pages/glossaire/concepts-fondamentaux.astro b/src/pages/glossaire/concepts-fondamentaux.astro
index 45e07f1..aa01ac3 100644
--- a/src/pages/glossaire/concepts-fondamentaux.astro
+++ b/src/pages/glossaire/concepts-fondamentaux.astro
@@ -1,13 +1,19 @@
 ---
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
+import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
+import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
+import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
+import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
 import { getCollection } from "astro:content";
+import {
+  buildGlossaryBySlug,
+  hrefOfGlossaryEntry,
+} from "../../lib/glossary";
 
 const entries = await getCollection("glossaire");
 
-const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
-const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
-
-const bySlug = new Map(entries.map((entry) => [slugOf(entry), entry]));
+const bySlug = buildGlossaryBySlug(entries);
+const hrefOf = hrefOfGlossaryEntry;
 
 const orderedSlugs = [
   "arcalite",
@@ -79,6 +85,55 @@ const readingSteps = [
       "L’archicratie nomme alors le régime général dans lequel cette composition devient lisible comme structure de régulation.",
   },
 ];
+
+const pageItems = [
+  { href: "#grammaire-minimale", label: "Grammaire minimale du système" },
+  { href: "#six-concepts", label: "Les six concepts cardinaux" },
+  { href: "#distinctions-decisives", label: "Distinctions décisives" },
+  { href: "#ordre-lecture", label: "Ordre conseillé de lecture" },
+  { href: "#prolonger-lecture", label: "Prolonger la lecture" },
+];
+
+const usefulLinks = [
+  { href: "/glossaire/scenes-archicratiques/", label: "Scènes archicratiques" },
+  { href: "/glossaire/dynamiques-archicratiques/", label: "Dynamiques archicratiques" },
+  { href: "/glossaire/archicrations/", label: "Méta-régimes archicratiques" },
+  { href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
+  { href: "/glossaire/index-complet/", label: "Index complet" },
+];
+
+const prolongerLinks = [
+  {
+    href: "/glossaire/scenes-archicratiques/",
+    title: "Scènes archicratiques",
+    text:
+      "Comprendre où les tensions deviennent visibles, discutables et révisables.",
+  },
+  {
+    href: "/glossaire/dynamiques-archicratiques/",
+    title: "Dynamiques archicratiques",
+    text:
+      "Explorer les processus de déplacement, d’oblitération et de pathologisation de la régulation.",
+  },
+  {
+    href: "/glossaire/archicrations/",
+    title: "Méta-régimes archicratiques",
+    text:
+      "Parcourir les grandes formes de co-viabilité et leurs modulations historiques.",
+  },
+  {
+    href: "/glossaire/paradigmes/",
+    title: "Paradigmes et doctrines",
+    text:
+      "Situer l’archicratie dans le paysage théorique avec lequel elle dialogue.",
+  },
+  {
+    href: "/glossaire/index-complet/",
+    title: "Index complet",
+    text:
+      "Retrouver l’ensemble des entrées du glossaire dans une navigation alphabétique intégrale.",
+  },
+];
 ---
 
 <GlossaryLayout
@@ -87,93 +142,34 @@ const readingSteps = [
   stickyMode="glossary-portal"
 >
   <Fragment slot="aside">
-    <nav class="cf-aside" aria-label="Navigation des concepts fondamentaux">
-      <div class="cf-aside__block">
-        <a class="cf-aside__back" href="/glossaire/">← Retour au glossaire</a>
-        <div class="cf-aside__title">Concepts fondamentaux</div>
-        <div class="cf-aside__meta">
-          {concepts.length} notion{concepts.length > 1 ? "s" : ""} cardinale{concepts.length > 1 ? "s" : ""}
-        </div>
-      </div>
-
-      <div class="cf-aside__block">
-        <h2 class="cf-aside__heading">Dans cette page</h2>
-        <ul class="cf-aside__list">
-          <li><a href="#grammaire-minimale">Grammaire minimale du système</a></li>
-          <li><a href="#six-concepts">Les six concepts cardinaux</a></li>
-          <li><a href="#distinctions-decisives">Distinctions décisives</a></li>
-          <li><a href="#ordre-lecture">Ordre conseillé de lecture</a></li>
-          <li><a href="#prolonger-lecture">Prolonger la lecture</a></li>
-        </ul>
-      </div>
-
-      <div class="cf-aside__block">
-        <h2 class="cf-aside__heading">Renvois utiles</h2>
-        <ul class="cf-aside__list">
-          <li><a href="/glossaire/scenes-archicratiques/">Scènes archicratiques</a></li>
-          <li><a href="/glossaire/dynamiques-archicratiques/">Dynamiques archicratiques</a></li>
-          <li><a href="/glossaire/archicrations/">Méta-régimes archicratiques</a></li>
-          <li><a href="/glossaire/paradigmes/">Paradigmes et doctrines</a></li>
-          <li><a href="/glossaire/index-complet/">Index complet</a></li>
-        </ul>
-      </div>
-    </nav>
+    <GlossaryPortalAside
+      ariaLabel="Navigation des concepts fondamentaux"
+      title="Concepts fondamentaux"
+      meta={`${concepts.length} notion${concepts.length > 1 ? "s" : ""} cardinale${concepts.length > 1 ? "s" : ""}`}
+      pageItems={pageItems}
+      usefulLinks={usefulLinks}
+    />
   </Fragment>
 
-  <section class="cf-page" data-cf-page>
-    <div class="cf-hero glossary-page-hero" data-cf-hero>
-      <p class="cf-kicker">Portail du glossaire</p>
-      <h1>Concepts fondamentaux</h1>
-
-      <p class="cf-intro">
-        Cette page rassemble la grammaire minimale de l’archicratie. Elle ne
-        remplace pas les fiches détaillées, mais elle en organise la lecture en
-        montrant comment les six notions cardinales se répondent, se distinguent
-        et composent ensemble un même système.
-      </p>
-
-      <div class="cf-hero-collapsible">
-        <div
-          class="cf-hero-more"
-          id="cf-hero-more"
-          data-cf-more
-          aria-hidden="false"
-        >
-          <p class="cf-intro">
-            Ces concepts ne valent pas comme unités isolées. Ils forment un noyau de
-            lecture à partir duquel peuvent ensuite se comprendre les scènes
-            archicratiques, les dynamiques, les tensions et les méta-régimes de
-            co-viabilité.
-          </p>
-        </div>
-
-        <button
-          class="cf-hero-toggle"
-          id="cf-hero-toggle"
-          data-cf-more-toggle
-          type="button"
-          aria-controls="cf-hero-more"
-          aria-expanded="false"
-          hidden
-        >
-          lire la suite
-        </button>
-      </div>
-    </div>
-
-    <section class="cf-section">
-      <div class="cf-section__head">
-        <h2 id="grammaire-minimale">Grammaire minimale du système</h2>
-      </div>
-
-      <p class="cf-section__intro">
-        La lecture la plus ramassée du paradigme archicratique peut se formuler
-        comme une chaîne de composition : deux vecteurs premiers entrent en
-        tension, cette tension appelle un opérateur régulateur, cet opérateur
-        vise une co-viabilité, et cette composition prend la forme générale
-        d’une archicratie.
-      </p>
+  <section class="cf-page">
+    <GlossaryPortalHero
+      prefix="cf"
+      kicker="Portail du glossaire"
+      title="Concepts fondamentaux"
+      intro="Cette page rassemble la grammaire minimale de l’archicratie. Elle ne remplace pas les fiches détaillées, mais elle en organise la lecture en montrant comment les six notions cardinales se répondent, se distinguent et composent ensemble un même système."
+      moreParagraphs={[
+        "Ces concepts ne valent pas comme unités isolées. Ils forment un noyau de lecture à partir duquel peuvent ensuite se comprendre les scènes archicratiques, les dynamiques, les tensions et les méta-régimes de co-viabilité.",
+      ]}
+      introMaxWidth="76ch"
+      followIntroMaxWidth="68ch"
+      moreMaxHeight="12rem"
+    />
 
+    <GlossaryPortalSection
+      id="grammaire-minimale"
+      title="Grammaire minimale du système"
+      intro="La lecture la plus ramassée du paradigme archicratique peut se formuler comme une chaîne de composition : deux vecteurs premiers entrent en tension, cette tension appelle un opérateur régulateur, cet opérateur vise une co-viabilité, et cette composition prend la forme générale d’une archicratie."
+    >
       <div class="cf-map" aria-label="Carte des concepts fondamentaux">
         <div class="cf-map__stage">
           <div class="cf-map__title">Vecteurs premiers</div>
@@ -242,21 +238,14 @@ const readingSteps = [
           )}
         </div>
       </div>
-    </section>
-
-    <section class="cf-section">
-      <div class="cf-section__head">
-        <h2 id="six-concepts">Les six concepts cardinaux</h2>
-        <span class="cf-section__count">
-          {concepts.length} fiche{concepts.length > 1 ? "s" : ""}
-        </span>
-      </div>
-
-      <p class="cf-section__intro">
-        Chaque fiche peut se lire séparément, mais leur intelligibilité augmente
-        lorsqu’on les aborde comme un ensemble structuré.
-      </p>
+    </GlossaryPortalSection>
 
+    <GlossaryPortalSection
+      id="six-concepts"
+      title="Les six concepts cardinaux"
+      count={`${concepts.length} fiche${concepts.length > 1 ? "s" : ""}`}
+      intro="Chaque fiche peut se lire séparément, mais leur intelligibilité augmente lorsqu’on les aborde comme un ensemble structuré."
+    >
       <div class="cf-cards">
         {concepts.map((entry) => (
           <a class="cf-card" href={hrefOf(entry)}>
@@ -265,21 +254,14 @@ const readingSteps = [
           </a>
         ))}
       </div>
-    </section>
-
-    <section class="cf-section">
-      <div class="cf-section__head">
-        <h2 id="distinctions-decisives">Distinctions décisives</h2>
-        <span class="cf-section__count">
-          {comparisonCards.length} distinction{comparisonCards.length > 1 ? "s" : ""}
-        </span>
-      </div>
-
-      <p class="cf-section__intro">
-        Ce portail ne sert pas seulement à regrouper des définitions : il doit
-        aussi empêcher les confusions qui brouilleraient la lecture du système.
-      </p>
+    </GlossaryPortalSection>
 
+    <GlossaryPortalSection
+      id="distinctions-decisives"
+      title="Distinctions décisives"
+      count={`${comparisonCards.length} distinction${comparisonCards.length > 1 ? "s" : ""}`}
+      intro="Ce portail ne sert pas seulement à regrouper des définitions : il doit aussi empêcher les confusions qui brouilleraient la lecture du système."
+    >
       <div class="cf-comparisons">
         {comparisonCards.map((item) => (
           <section class="cf-card cf-card--text">
@@ -288,21 +270,14 @@ const readingSteps = [
           </section>
         ))}
       </div>
-    </section>
-
-    <section class="cf-section">
-      <div class="cf-section__head">
-        <h2 id="ordre-lecture">Ordre conseillé de lecture</h2>
-        <span class="cf-section__count">
-          {readingSteps.length} étape{readingSteps.length > 1 ? "s" : ""}
-        </span>
-      </div>
-
-      <p class="cf-section__intro">
-        Pour un lecteur qui découvre l’architecture conceptuelle, cet ordre
-        offre le chemin le plus clair.
-      </p>
+    </GlossaryPortalSection>
 
+    <GlossaryPortalSection
+      id="ordre-lecture"
+      title="Ordre conseillé de lecture"
+      count={`${readingSteps.length} étape${readingSteps.length > 1 ? "s" : ""}`}
+      intro="Pour un lecteur qui découvre l’architecture conceptuelle, cet ordre offre le chemin le plus clair."
+    >
       <div class="cf-steps">
         {readingSteps.map((step) => (
           <section class="cf-step">
@@ -314,64 +289,28 @@ const readingSteps = [
           </section>
         ))}
       </div>
-    </section>
-
-    <section class="cf-section">
-      <div class="cf-section__head">
-        <h2 id="prolonger-lecture">Prolonger la lecture</h2>
-      </div>
-
-      <p class="cf-section__intro">
-        Une fois cette grammaire minimale stabilisée, la lecture peut s’élargir
-        vers les familles de méta-régimes, les paradigmes de comparaison, les
-        dynamiques archicratiques et l’index complet.
-      </p>
+    </GlossaryPortalSection>
 
+    <GlossaryPortalSection
+      id="prolonger-lecture"
+      title="Prolonger la lecture"
+      intro="Une fois cette grammaire minimale stabilisée, la lecture peut s’élargir vers les familles de méta-régimes, les paradigmes de comparaison, les dynamiques archicratiques et l’index complet."
+    >
       <div class="cf-cards">
-        <a class="cf-card" href="/glossaire/scenes-archicratiques/">
-          <strong>Scènes archicratiques</strong>
-          <span>
-            Comprendre où les tensions deviennent visibles, discutables et
-            révisables.
-          </span>
-        </a>
-
-        <a class="cf-card" href="/glossaire/dynamiques-archicratiques/">
-          <strong>Dynamiques archicratiques</strong>
-          <span>
-            Explorer les processus de déplacement, d’oblitération et de
-            pathologisation de la régulation.
-          </span>
-        </a>
-
-        <a class="cf-card" href="/glossaire/archicrations/">
-          <strong>Méta-régimes archicratiques</strong>
-          <span>
-            Parcourir les grandes formes de co-viabilité et leurs modulations
-            historiques.
-          </span>
-        </a>
-
-        <a class="cf-card" href="/glossaire/paradigmes/">
-          <strong>Paradigmes et doctrines</strong>
-          <span>
-            Situer l’archicratie dans le paysage théorique avec lequel elle
-            dialogue.
-          </span>
-        </a>
-
-        <a class="cf-card" href="/glossaire/index-complet/">
-          <strong>Index complet</strong>
-          <span>
-            Retrouver l’ensemble des entrées du glossaire dans une navigation
-            alphabétique intégrale.
-          </span>
-        </a>
+        {prolongerLinks.map((item) => (
+          <a class="cf-card" href={item.href}>
+            <strong>{item.title}</strong>
+            <span>{item.text}</span>
+          </a>
+        ))}
       </div>
-    </section>
+    </GlossaryPortalSection>
 
-    <section class="cf-section cf-section--final">
-      <h2>Portée d’ensemble</h2>
+    <GlossaryPortalSection
+      id="portee-densemble"
+      title="Portée d’ensemble"
+      final={true}
+    >
       <p>
         Lire ces concepts ensemble permet de comprendre que l’
         <a href="/glossaire/archicratie/">archicratie</a> n’est pas une notion
@@ -383,232 +322,13 @@ const readingSteps = [
         <a href="/glossaire/co-viabilite/">co-viabilité</a> et, plus largement,
         les différentes formes historiques de co-viabilité.
       </p>
-    </section>
+    </GlossaryPortalSection>
   </section>
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const hero = document.querySelector("[data-cf-hero]");
-        const follow = document.getElementById("reading-follow");
-        const heroMore = document.getElementById("cf-hero-more");
-        const heroToggle = document.getElementById("cf-hero-toggle");
-
-        if (!body || !root || !hero || !follow) return;
-
-        const BODY_CLASS = "is-concepts-fondamentaux-page";
-        const FOLLOW_ON_CLASS = "cf-follow-on";
-        const EXPANDED_CLASS = "cf-hero-expanded";
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const AUTO_COLLAPSE_DELTA = 160;
-
-        let expandedAtY = null;
-        let lastScrollY = window.scrollY || 0;
-
-        body.classList.add(BODY_CLASS);
-
-        const heroHeight = () =>
-          Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
-
-        const stripLocalSticky = () => {
-          document.querySelectorAll(".cf-section__head").forEach((el) => {
-            el.classList.remove("is-sticky");
-            el.removeAttribute("data-sticky-active");
-          });
-        };
-
-        const computeFollowOn = () =>
-          !mqMobile.matches &&
-          follow.classList.contains("is-on") &&
-          follow.style.display !== "none" &&
-          follow.getAttribute("aria-hidden") !== "true";
-
-        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 on = computeFollowOn();
-          body.classList.toggle(FOLLOW_ON_CLASS, on);
-          return on;
-        };
-
-        const collapseHero = () => {
-          if (!body.classList.contains(EXPANDED_CLASS)) return;
-
-          body.classList.remove(EXPANDED_CLASS);
-          expandedAtY = null;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "true");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = false;
-            heroToggle.setAttribute("aria-expanded", "false");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const expandHero = () => {
-          body.classList.add(EXPANDED_CLASS);
-          expandedAtY = window.scrollY || 0;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = true;
-            heroToggle.setAttribute("aria-expanded", "true");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const syncHeroState = () => {
-          const followOn = computeFollowOn();
-          const expanded = body.classList.contains(EXPANDED_CLASS);
-          const collapsed = followOn && !expanded;
-
-          if (!followOn || mqMobile.matches) {
-            body.classList.remove(EXPANDED_CLASS);
-            expandedAtY = null;
-
-            if (heroMore) {
-              heroMore.setAttribute("aria-hidden", "false");
-            }
-
-            if (heroToggle) {
-              heroToggle.hidden = true;
-              heroToggle.setAttribute("aria-expanded", "false");
-            }
-
-            return;
-          }
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", collapsed ? "true" : "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = !collapsed;
-            heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
-          }
-        };
-
-        const maybeAutoCollapseOnScroll = () => {
-          if (mqMobile.matches) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!computeFollowOn()) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!body.classList.contains(EXPANDED_CLASS)) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (expandedAtY == null) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          const currentY = window.scrollY || 0;
-          const scrollingDown = currentY > lastScrollY;
-          const delta = currentY - expandedAtY;
-
-          if (scrollingDown && delta >= AUTO_COLLAPSE_DELTA) {
-            collapseHero();
-          }
-
-          lastScrollY = currentY;
-        };
-
-        const syncAll = () => {
-          stripLocalSticky();
-          syncFollowState();
-          syncHeroState();
-          applyLocalStickyHeight();
-        };
-
-        let raf = 0;
-        const schedule = () => {
-          if (raf) return;
-          raf = requestAnimationFrame(() => {
-            raf = 0;
-            requestAnimationFrame(syncAll);
-          });
-        };
-
-        heroToggle?.addEventListener("click", () => {
-          expandHero();
-        });
-
-        const onScroll = () => {
-          maybeAutoCollapseOnScroll();
-          schedule();
-        };
-
-        const followObserver = new MutationObserver(schedule);
-        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("scroll", onScroll, { passive: true });
-        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>
+  <GlossaryPortalStickySync
+    heroMoreId="cf-hero-more"
+    heroToggleId="cf-hero-toggle"
+  />
 </GlossaryLayout>
 
 <style>
@@ -616,139 +336,6 @@ const readingSteps = [
     padding: 8px 0 24px;
   }
 
-  .cf-hero{
-    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);
-    display: grid;
-    row-gap: 14px;
-    transition:
-      margin-bottom 180ms ease,
-      border-radius 180ms ease,
-      padding 180ms ease,
-      row-gap 180ms ease;
-  }
-
-  .cf-kicker{
-    margin: 0;
-    font-size: 12px;
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    opacity: .72;
-  }
-
-  .cf-hero h1{
-    margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
-    line-height: 1.02;
-    letter-spacing: -.04em;
-    font-weight: 850;
-    transition: font-size 180ms ease;
-  }
-
-  .cf-intro{
-    max-width: 76ch;
-    margin: 0;
-    font-size: 1.04rem;
-    line-height: 1.55;
-    opacity: .94;
-    transition:
-      font-size 180ms ease,
-      line-height 180ms ease,
-      max-width 180ms ease;
-  }
-
-  .cf-hero-collapsible{
-    display: grid;
-    row-gap: 6px;
-  }
-
-  .cf-hero-more{
-    display: grid;
-    row-gap: 14px;
-    max-height: 12rem;
-    overflow: hidden;
-    opacity: 1;
-    transition:
-      max-height 220ms ease,
-      opacity 180ms ease;
-  }
-
-  .cf-hero-toggle{
-    display: none;
-    align-self: flex-start;
-    width: fit-content;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 11px;
-    line-height: 1.2;
-    letter-spacing: .01em;
-    text-transform: none;
-    opacity: .56;
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: .12em;
-    text-decoration-thickness: 1px;
-  }
-
-  .cf-hero-toggle:hover{
-    opacity: .84;
-  }
-
-  .cf-hero-toggle:focus-visible{
-    outline: 2px solid rgba(0,217,255,0.24);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  .cf-hero-toggle[hidden]{
-    display: none !important;
-  }
-
-  .cf-section{
-    margin-top: 34px;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .cf-section h2{
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .cf-section__head{
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
-    position: static;
-  }
-
-  .cf-section__count{
-    font-size: 13px;
-    opacity: .72;
-    white-space: nowrap;
-  }
-
-  .cf-section__intro{
-    max-width: 78ch;
-    margin: 0;
-    opacity: .92;
-  }
-
   .cf-map{
     display: grid;
     justify-items: center;
@@ -913,119 +500,6 @@ const readingSteps = [
     opacity: .92;
   }
 
-  .cf-section--final{
-    margin-top: 42px;
-  }
-
-  .cf-aside{
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-  }
-
-  .cf-aside__block{
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 12px;
-    background: rgba(127,127,127,0.05);
-  }
-
-  .cf-aside__back{
-    display: inline-block;
-    margin-bottom: 8px;
-    font-size: 13px;
-    font-weight: 700;
-    text-decoration: none;
-  }
-
-  .cf-aside__title{
-    font-size: 14px;
-    font-weight: 800;
-    letter-spacing: .2px;
-    line-height: 1.25;
-  }
-
-  .cf-aside__meta{
-    margin-top: 8px;
-    font-size: 12px;
-    line-height: 1.35;
-    opacity: .78;
-  }
-
-  .cf-aside__heading{
-    margin: 0 0 10px;
-    font-size: 13px;
-    font-weight: 800;
-    opacity: .9;
-  }
-
-  .cf-aside__list{
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .cf-aside__list li{
-    margin: 6px 0;
-  }
-
-  .cf-aside__list a{
-    text-decoration: none;
-    font-size: 13px;
-    line-height: 1.3;
-  }
-
-  :global(body.is-concepts-fondamentaux-page #reading-follow){
-    z-index: 10;
-  }
-
-  :global(body.is-concepts-fondamentaux-page.cf-follow-on .cf-hero){
-    margin-bottom: 0;
-    padding: 12px 16px 14px;
-    row-gap: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :global(body.is-concepts-fondamentaux-page.cf-follow-on .cf-hero h1){
-    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
-  }
-
-  :global(body.is-concepts-fondamentaux-page.cf-follow-on .cf-intro){
-    max-width: 68ch;
-    font-size: .98rem;
-    line-height: 1.48;
-  }
-
-  :global(body.is-concepts-fondamentaux-page.cf-follow-on:not(.cf-hero-expanded) .cf-hero-more){
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  :global(body.is-concepts-fondamentaux-page.cf-follow-on:not(.cf-hero-expanded) .cf-hero-toggle){
-    display: inline-flex;
-  }
-
-  :global(body.is-concepts-fondamentaux-page.cf-follow-on #reading-follow .reading-follow__inner){
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  :global(body.is-concepts-fondamentaux-page .cf-section__head.is-sticky),
-  :global(body.is-concepts-fondamentaux-page .cf-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: 720px){
     .cf-map__roots{
       grid-template-columns: 1fr;
@@ -1041,43 +515,11 @@ const readingSteps = [
     }
   }
 
-  @media (max-width: 860px){
-    .cf-hero{
-      position: static;
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
-    }
-
-    .cf-intro{
-      max-width: none;
-    }
-
-    .cf-hero-more{
-      max-height: none;
-      opacity: 1;
-      overflow: visible;
-    }
-
-    .cf-hero-toggle{
-      display: none !important;
-    }
-
-    :global(body.is-concepts-fondamentaux-page.cf-follow-on .cf-hero){
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
-    }
-  }
-
   @media (prefers-color-scheme: dark){
     .cf-map,
     .cf-node,
     .cf-card,
-    .cf-step,
-    .cf-aside__block{
+    .cf-step{
       background: rgba(255,255,255,0.04);
     }
 
diff --git a/src/pages/glossaire/dynamiques-archicratiques.astro b/src/pages/glossaire/dynamiques-archicratiques.astro
index 2385d9a..54044f4 100644
--- a/src/pages/glossaire/dynamiques-archicratiques.astro
+++ b/src/pages/glossaire/dynamiques-archicratiques.astro
@@ -1,14 +1,25 @@
 ---
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
+import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
+import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
+import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
+import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
 import { getCollection } from "astro:content";
+import {
+  buildGlossaryBySlug,
+  hrefOfGlossaryEntry,
+} from "../../lib/glossary";
 
 const entries = await getCollection("glossaire");
 
-const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
-const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
+const collator = new Intl.Collator("fr", {
+  sensitivity: "base",
+  numeric: true,
+});
 
-const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
-const bySlug = new Map(entries.map((entry) => [slugOf(entry), entry]));
+const bySlug = buildGlossaryBySlug(entries);
+const hrefOf = hrefOfGlossaryEntry;
+const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
 
 function sortByTerm(list = []) {
   return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
@@ -23,12 +34,14 @@ function resolveEntries(slugs = []) {
 function uniqueBySlug(list = []) {
   const seen = new Set();
   const out = [];
+
   for (const entry of list) {
     const slug = slugOf(entry);
     if (seen.has(slug)) continue;
     seen.add(slug);
     out.push(entry);
   }
+
   return out;
 }
 
@@ -71,6 +84,53 @@ const otherEntries = sortByTerm(
 const diagnosisCount = diagnosisEntries.length;
 const structuralCount = structuralEntries.length;
 const constellationCount = relatedEntries.length;
+const otherCount = otherEntries.length;
+const paradigmCount = paradigmEntries.length;
+
+const pageItems = [
+  { href: "#noyau-diagnostique", label: "Noyau diagnostique" },
+  ...(structuralEntries.length > 0
+    ? [{ href: "#articulations-essentielles", label: "Articulations essentielles" }]
+    : []),
+  ...(relatedEntries.length > 0
+    ? [{ href: "#constellation-theorique", label: "Constellation théorique" }]
+    : []),
+  { href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
+];
+
+const usefulLinks = [
+  { href: "/glossaire/tension/", label: "Tension" },
+  { href: "/glossaire/scene-depreuve/", label: "Scène d’épreuve" },
+  { href: "/glossaire/archicration/", label: "Archicration" },
+  { href: "/glossaire/archicratie/", label: "Archicratie" },
+  { href: "/glossaire/tensions-irreductibles/", label: "Tensions irréductibles" },
+];
+
+const prolongerLinks = [
+  {
+    href: "/glossaire/",
+    title: "Accueil du glossaire",
+    text: "Revenir à la cartographie générale du système archicratique.",
+  },
+  {
+    href: "/glossaire/archicrations/",
+    title: "Méta-régimes archicratiques",
+    text:
+      "Parcourir les grandes formes de co-viabilité dans lesquelles les tensions sont stabilisées.",
+  },
+  {
+    href: "/glossaire/tensions-irreductibles/",
+    title: "Tensions irréductibles",
+    text:
+      "Explorer les tensions fondatrices à partir desquelles les dynamiques de régulation deviennent lisibles.",
+  },
+  {
+    href: "/glossaire/index-complet/",
+    title: "Index complet",
+    text:
+      "Retrouver l’ensemble des entrées du glossaire dans une navigation alphabétique intégrale.",
+  },
+];
 ---
 
 <GlossaryLayout
@@ -79,104 +139,43 @@ const constellationCount = relatedEntries.length;
   stickyMode="glossary-portal"
 >
   <Fragment slot="aside">
-    <nav class="dyna-aside" aria-label="Navigation des dynamiques archicratiques">
-      <div class="dyna-aside__block">
-        <a class="dyna-aside__back" href="/glossaire/">← Retour au glossaire</a>
-        <div class="dyna-aside__title">Dynamiques archicratiques</div>
-        <div class="dyna-aside__meta">
-          {diagnosisCount > 0
-            ? `${diagnosisCount} diagnostic${diagnosisCount > 1 ? "s" : ""} central${diagnosisCount > 1 ? "ux" : ""}`
-            : "Portail en cours de constitution"}
-        </div>
-      </div>
-
-      <div class="dyna-aside__block">
-        <h2 class="dyna-aside__heading">Dans cette page</h2>
-        <ul class="dyna-aside__list">
-          <li><a href="#noyau-diagnostique">Noyau diagnostique</a></li>
-          {structuralEntries.length > 0 && (
-            <li><a href="#articulations-essentielles">Articulations essentielles</a></li>
-          )}
-          {relatedEntries.length > 0 && (
-            <li><a href="#constellation-theorique">Constellation théorique</a></li>
-          )}
-          <li><a href="#prolonger-la-lecture">Prolonger la lecture</a></li>
-        </ul>
-      </div>
-
-      <div class="dyna-aside__block">
-        <h2 class="dyna-aside__heading">Renvois utiles</h2>
-        <ul class="dyna-aside__list">
-          <li><a href="/glossaire/tension/">Tension</a></li>
-          <li><a href="/glossaire/scene-depreuve/">Scène d’épreuve</a></li>
-          <li><a href="/glossaire/archicration/">Archicration</a></li>
-          <li><a href="/glossaire/archicratie/">Archicratie</a></li>
-          <li><a href="/glossaire/tensions-irreductibles/">Tensions irréductibles</a></li>
-        </ul>
-      </div>
-    </nav>
+    <GlossaryPortalAside
+      ariaLabel="Navigation des dynamiques archicratiques"
+      title="Dynamiques archicratiques"
+      meta={
+        diagnosisCount > 0
+          ? `${diagnosisCount} diagnostic${diagnosisCount > 1 ? "s" : ""} central${diagnosisCount > 1 ? "ux" : ""}`
+          : "Portail en cours de constitution"
+      }
+      pageItems={pageItems}
+      usefulLinks={usefulLinks}
+    />
   </Fragment>
 
-  <section class="dyna-page" data-dyna-page>
-    <div class="dyna-hero glossary-page-hero" data-dyna-hero>
-      <p class="dyna-kicker">Parcours du glossaire</p>
-      <h1>Dynamiques archicratiques</h1>
-
-      <p class="dyna-intro">
-        Les dynamiques archicratiques désignent les processus par lesquels une
-        régulation se déplace, se ferme, se rigidifie ou se soustrait à sa
-        propre révisabilité. Elles permettent de penser non seulement la tenue
-        d’un régime, mais aussi ses dérives, ses opacifications et ses
-        pathologies.
-      </p>
-
-      <div class="dyna-hero-collapsible">
-        <div
-          class="dyna-hero-more"
-          id="dyna-hero-more"
-          data-dyna-more
-          aria-hidden="false"
-        >
-          <p class="dyna-intro">
-            Elles décrivent ainsi le versant processuel de l’archicratie : non plus
-            seulement ce qui tient, mais la manière dont cela se transforme,
-            s’altère, s’autonomise ou devient de moins en moins exposable à
-            l’épreuve collective.
-          </p>
-        </div>
-
-        <button
-          class="dyna-hero-toggle"
-          id="dyna-hero-toggle"
-          data-dyna-more-toggle
-          type="button"
-          aria-controls="dyna-hero-more"
-          aria-expanded="false"
-          hidden
-        >
-          lire la suite
-        </button>
-      </div>
-    </div>
-
-    <section class="dyna-section">
-      <div class="dyna-section__head">
-        <h2 id="noyau-diagnostique">Noyau diagnostique</h2>
-        {diagnosisEntries.length > 0 && (
-          <span class="dyna-section__count">
-            {diagnosisEntries.length} entrée{diagnosisEntries.length > 1 ? "s" : ""}
-          </span>
-        )}
-      </div>
-
-      <p class="dyna-section__intro">
-        Cette page rassemble les diagnostics déjà stabilisés dans le glossaire
-        pour penser les dérives internes de la régulation archicratique :
-        l’<strong>oblitération archicratique</strong>, comme processus
-        d’effacement de la visibilité régulatrice, et l’<strong>autarchicratie</strong>,
-        comme forme de fermeture croissante des architectures sur elles-mêmes.
-      </p>
+  <section class="dyna-page">
+    <GlossaryPortalHero
+      prefix="dyna"
+      kicker="Parcours du glossaire"
+      title="Dynamiques archicratiques"
+      intro="Les dynamiques archicratiques désignent les processus par lesquels une régulation se déplace, se ferme, se rigidifie ou se soustrait à sa propre révisabilité. Elles permettent de penser non seulement la tenue d’un régime, mais aussi ses dérives, ses opacifications et ses pathologies."
+      moreParagraphs={[
+        "Elles décrivent ainsi le versant processuel de l’archicratie : non plus seulement ce qui tient, mais la manière dont cela se transforme, s’altère, s’autonomise ou devient de moins en moins exposable à l’épreuve collective.",
+      ]}
+      introMaxWidth="72ch"
+      followIntroMaxWidth="68ch"
+      moreMaxHeight="18rem"
+    />
 
+    <GlossaryPortalSection
+      id="noyau-diagnostique"
+      title="Noyau diagnostique"
+      count={
+        diagnosisEntries.length > 0
+          ? `${diagnosisEntries.length} entrée${diagnosisEntries.length > 1 ? "s" : ""}`
+          : undefined
+      }
+      intro="Cette page rassemble les diagnostics déjà stabilisés dans le glossaire pour penser les dérives internes de la régulation archicratique : l’oblitération archicratique, comme processus d’effacement de la visibilité régulatrice, et l’autarchicratie, comme forme de fermeture croissante des architectures sur elles-mêmes."
+    >
       {diagnosisEntries.length > 0 ? (
         <div class="dyna-focus-grid">
           {diagnosisEntries.map((entry) => (
@@ -187,15 +186,17 @@ const constellationCount = relatedEntries.length;
               </h3>
               <p class="dyna-focus-card__def">{entry.data.definitionShort}</p>
 
-              {(entry.data.comparisonTraditions?.length > 0 || entry.data.mobilizedAuthors?.length > 0) && (
+              {((entry.data.comparisonTraditions?.length ?? 0) > 0 ||
+                (entry.data.mobilizedAuthors?.length ?? 0) > 0) && (
                 <div class="dyna-focus-card__meta">
-                  {entry.data.comparisonTraditions?.length > 0 && (
+                  {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                     <p>
                       <strong>Traditions de comparaison :</strong>{" "}
                       {entry.data.comparisonTraditions.join(" / ")}
                     </p>
                   )}
-                  {entry.data.mobilizedAuthors?.length > 0 && (
+
+                  {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
                     <p>
                       <strong>Auteurs mobilisés :</strong>{" "}
                       {entry.data.mobilizedAuthors.join(" / ")}
@@ -211,30 +212,22 @@ const constellationCount = relatedEntries.length;
           Les fiches principales ne sont pas encore disponibles dans la collection.
         </p>
       )}
-    </section>
+    </GlossaryPortalSection>
 
     {structuralEntries.length > 0 && (
-      <section class="dyna-section">
-        <div class="dyna-section__head">
-          <h2 id="articulations-essentielles">Articulations essentielles</h2>
-          <span class="dyna-section__count">
-            {structuralCount} notion{structuralCount > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="dyna-section__intro">
-          Les dynamiques archicratiques ne peuvent pas être pensées isolément :
-          elles prennent sens à partir des tensions, de la scène d’épreuve, de
-          l’archicration et du méta-régime d’archicratie lui-même.
-        </p>
-
+      <GlossaryPortalSection
+        id="articulations-essentielles"
+        title="Articulations essentielles"
+        count={`${structuralCount} notion${structuralCount > 1 ? "s" : ""}`}
+        intro="Les dynamiques archicratiques ne peuvent pas être pensées isolément : elles prennent sens à partir des tensions, de la scène d’épreuve, de l’archicration et du méta-régime d’archicratie lui-même."
+      >
         <div class="dyna-cards">
           {structuralEntries.map((entry) => (
             <a class="dyna-card" href={hrefOf(entry)}>
               <strong>{entry.data.term}</strong>
               <span>{entry.data.definitionShort}</span>
 
-              {entry.data.comparisonTraditions?.length > 0 && (
+              {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                 <small>
                   Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                 </small>
@@ -242,34 +235,38 @@ const constellationCount = relatedEntries.length;
             </a>
           ))}
         </div>
-      </section>
+      </GlossaryPortalSection>
     )}
 
     {relatedEntries.length > 0 && (
-      <section class="dyna-section">
-        <div class="dyna-section__head">
-          <h2 id="constellation-theorique">Constellation théorique</h2>
-          <span class="dyna-section__count">
-            {constellationCount} entrée{constellationCount > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="dyna-section__intro">
-          Ces diagnostics entrent en résonance avec d’autres notions et
-          paradigmes qui permettent de préciser les mécanismes de fermeture, de
-          capture, d’opacification ou de désajustement de la régulation.
-        </p>
-
+      <GlossaryPortalSection
+        id="constellation-theorique"
+        title="Constellation théorique"
+        count={`${constellationCount} entrée${constellationCount > 1 ? "s" : ""}`}
+        intro="Ces diagnostics entrent en résonance avec d’autres notions et paradigmes qui permettent de préciser les mécanismes de fermeture, de capture, d’opacification ou de désajustement de la régulation."
+      >
         {otherEntries.length > 0 && (
-          <div class="dyna-block">
-            <h3 id="notions-et-diagnostics-lies">Notions et diagnostics liés</h3>
+          <div class="dyna-block dyna-block--panel">
+            <div class="dyna-block__head">
+              <h3 id="notions-et-diagnostics-lies">Notions et diagnostics liés</h3>
+              <span class="dyna-block__count">
+                {otherCount} entrée{otherCount > 1 ? "s" : ""}
+              </span>
+            </div>
+
+            <p class="dyna-block__intro">
+              Ces entrées prolongent l’analyse des dérives archicratiques vers
+              des questions d’empêchement, d’invisibilisation, de fermeture ou
+              de capture de la scène régulatrice.
+            </p>
+
             <div class="dyna-cards">
               {otherEntries.map((entry) => (
                 <a class="dyna-card" href={hrefOf(entry)}>
                   <strong>{entry.data.term}</strong>
                   <span>{entry.data.definitionShort}</span>
 
-                  {entry.data.comparisonTraditions?.length > 0 && (
+                  {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                     <small>
                       Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                     </small>
@@ -281,15 +278,27 @@ const constellationCount = relatedEntries.length;
         )}
 
         {paradigmEntries.length > 0 && (
-          <div class="dyna-block">
-            <h3 id="paradigmes-mobilises">Paradigmes mobilisés</h3>
+          <div class="dyna-block dyna-block--panel">
+            <div class="dyna-block__head">
+              <h3 id="paradigmes-mobilises">Paradigmes mobilisés</h3>
+              <span class="dyna-block__count">
+                {paradigmCount} paradigme{paradigmCount > 1 ? "s" : ""}
+              </span>
+            </div>
+
+            <p class="dyna-block__intro">
+              Ces paradigmes servent de ressources comparatives pour penser les
+              processus de rigidification, d’autonomisation et d’opacification
+              des régimes de régulation.
+            </p>
+
             <div class="dyna-cards">
               {paradigmEntries.map((entry) => (
                 <a class="dyna-card" href={hrefOf(entry)}>
                   <strong>{entry.data.term}</strong>
                   <span>{entry.data.definitionShort}</span>
 
-                  {entry.data.mobilizedAuthors?.length > 0 && (
+                  {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
                     <small>
                       Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
                     </small>
@@ -299,56 +308,29 @@ const constellationCount = relatedEntries.length;
             </div>
           </div>
         )}
-      </section>
+      </GlossaryPortalSection>
     )}
 
-    <section class="dyna-section">
-      <div class="dyna-section__head">
-        <h2 id="prolonger-la-lecture">Prolonger la lecture</h2>
-      </div>
-
-      <p class="dyna-section__intro">
-        Cette page sert de portail thématique entre l’accueil général du
-        glossaire et les fiches détaillées. Elle sera amenée à s’étoffer à
-        mesure que le chantier des tensions et des dynamiques sera approfondi.
-      </p>
-
+    <GlossaryPortalSection
+      id="prolonger-la-lecture"
+      title="Prolonger la lecture"
+      intro="Cette page sert de portail thématique entre l’accueil général du glossaire et les fiches détaillées. Elle sera amenée à s’étoffer à mesure que le chantier des tensions et des dynamiques sera approfondi."
+    >
       <div class="dyna-cards">
-        <a class="dyna-card" href="/glossaire/">
-          <strong>Accueil du glossaire</strong>
-          <span>
-            Revenir à la cartographie générale du système archicratique.
-          </span>
-        </a>
-
-        <a class="dyna-card" href="/glossaire/archicrations/">
-          <strong>Méta-régimes archicratiques</strong>
-          <span>
-            Parcourir les grandes formes de co-viabilité dans lesquelles les
-            tensions sont stabilisées.
-          </span>
-        </a>
-
-        <a class="dyna-card" href="/glossaire/tensions-irreductibles/">
-          <strong>Tensions irréductibles</strong>
-          <span>
-            Explorer les tensions fondatrices à partir desquelles les dynamiques
-            de régulation deviennent lisibles.
-          </span>
-        </a>
-
-        <a class="dyna-card" href="/glossaire/index-complet/">
-          <strong>Index complet</strong>
-          <span>
-            Retrouver l’ensemble des entrées du glossaire dans une navigation
-            alphabétique intégrale.
-          </span>
-        </a>
+        {prolongerLinks.map((item) => (
+          <a class="dyna-card" href={item.href}>
+            <strong>{item.title}</strong>
+            <span>{item.text}</span>
+          </a>
+        ))}
       </div>
-    </section>
+    </GlossaryPortalSection>
 
-    <section class="dyna-section dyna-section--final">
-      <h2>Portée d’ensemble</h2>
+    <GlossaryPortalSection
+      id="portee-densemble"
+      title="Portée d’ensemble"
+      final={true}
+    >
       <p>
         Les dynamiques archicratiques permettent de penser la régulation non
         comme une forme immobile, mais comme un devenir. Elles montrent comment
@@ -358,232 +340,13 @@ const constellationCount = relatedEntries.length;
         collectif et dérive d’un régime vers l’opacité, la fermeture ou la
         captation de sa propre scène d’épreuve.
       </p>
-    </section>
+    </GlossaryPortalSection>
   </section>
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const hero = document.querySelector("[data-dyna-hero]");
-        const follow = document.getElementById("reading-follow");
-        const heroMore = document.getElementById("dyna-hero-more");
-        const heroToggle = document.getElementById("dyna-hero-toggle");
-
-        if (!body || !root || !hero || !follow) return;
-
-        const BODY_CLASS = "is-dynamiques-archicratiques-page";
-        const FOLLOW_ON_CLASS = "dyna-follow-on";
-        const EXPANDED_CLASS = "dyna-hero-expanded";
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const AUTO_COLLAPSE_DELTA = 160;
-
-        let expandedAtY = null;
-        let lastScrollY = window.scrollY || 0;
-
-        body.classList.add(BODY_CLASS);
-
-        const heroHeight = () =>
-          Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
-
-        const stripLocalSticky = () => {
-          document.querySelectorAll(".dyna-section__head").forEach((el) => {
-            el.classList.remove("is-sticky");
-            el.removeAttribute("data-sticky-active");
-          });
-        };
-
-        const computeFollowOn = () =>
-          !mqMobile.matches &&
-          follow.classList.contains("is-on") &&
-          follow.style.display !== "none" &&
-          follow.getAttribute("aria-hidden") !== "true";
-
-        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 on = computeFollowOn();
-          body.classList.toggle(FOLLOW_ON_CLASS, on);
-          return on;
-        };
-
-        const collapseHero = () => {
-          if (!body.classList.contains(EXPANDED_CLASS)) return;
-
-          body.classList.remove(EXPANDED_CLASS);
-          expandedAtY = null;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "true");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = false;
-            heroToggle.setAttribute("aria-expanded", "false");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const expandHero = () => {
-          body.classList.add(EXPANDED_CLASS);
-          expandedAtY = window.scrollY || 0;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = true;
-            heroToggle.setAttribute("aria-expanded", "true");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const syncHeroState = () => {
-          const followOn = computeFollowOn();
-          const expanded = body.classList.contains(EXPANDED_CLASS);
-          const collapsed = followOn && !expanded;
-
-          if (!followOn || mqMobile.matches) {
-            body.classList.remove(EXPANDED_CLASS);
-            expandedAtY = null;
-
-            if (heroMore) {
-              heroMore.setAttribute("aria-hidden", "false");
-            }
-
-            if (heroToggle) {
-              heroToggle.hidden = true;
-              heroToggle.setAttribute("aria-expanded", "false");
-            }
-
-            return;
-          }
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", collapsed ? "true" : "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = !collapsed;
-            heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
-          }
-        };
-
-        const maybeAutoCollapseOnScroll = () => {
-          if (mqMobile.matches) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!computeFollowOn()) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!body.classList.contains(EXPANDED_CLASS)) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (expandedAtY == null) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          const currentY = window.scrollY || 0;
-          const scrollingDown = currentY > lastScrollY;
-          const delta = currentY - expandedAtY;
-
-          if (scrollingDown && delta >= AUTO_COLLAPSE_DELTA) {
-            collapseHero();
-          }
-
-          lastScrollY = currentY;
-        };
-
-        const syncAll = () => {
-          stripLocalSticky();
-          syncFollowState();
-          syncHeroState();
-          applyLocalStickyHeight();
-        };
-
-        let raf = 0;
-        const schedule = () => {
-          if (raf) return;
-          raf = requestAnimationFrame(() => {
-            raf = 0;
-            requestAnimationFrame(syncAll);
-          });
-        };
-
-        heroToggle?.addEventListener("click", () => {
-          expandHero();
-        });
-
-        const onScroll = () => {
-          maybeAutoCollapseOnScroll();
-          schedule();
-        };
-
-        const followObserver = new MutationObserver(schedule);
-        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("scroll", onScroll, { passive: true });
-        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>
+  <GlossaryPortalStickySync
+    heroMoreId="dyna-hero-more"
+    heroToggleId="dyna-hero-toggle"
+  />
 </GlossaryLayout>
 
 <style>
@@ -591,139 +354,6 @@ const constellationCount = relatedEntries.length;
     padding: 8px 0 24px;
   }
 
-  .dyna-hero{
-    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);
-    display: grid;
-    row-gap: 14px;
-    transition:
-      margin-bottom 180ms ease,
-      border-radius 180ms ease,
-      padding 180ms ease,
-      row-gap 180ms ease;
-  }
-
-  .dyna-kicker{
-    margin: 0;
-    font-size: 12px;
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    opacity: .72;
-  }
-
-  .dyna-hero h1{
-    margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
-    line-height: 1.02;
-    letter-spacing: -.04em;
-    font-weight: 850;
-    transition: font-size 180ms ease;
-  }
-
-  .dyna-intro{
-    margin: 0;
-    max-width: 72ch;
-    font-size: 1.04rem;
-    line-height: 1.55;
-    opacity: .94;
-    transition:
-      font-size 180ms ease,
-      line-height 180ms ease,
-      max-width 180ms ease;
-  }
-
-  .dyna-hero-collapsible{
-    display: grid;
-    row-gap: 6px;
-  }
-
-  .dyna-hero-more{
-    display: grid;
-    row-gap: 14px;
-    max-height: 18rem;
-    overflow: hidden;
-    opacity: 1;
-    transition:
-      max-height 220ms ease,
-      opacity 180ms ease;
-  }
-
-  .dyna-hero-toggle{
-    display: none;
-    align-self: flex-start;
-    width: fit-content;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 11px;
-    line-height: 1.2;
-    letter-spacing: .01em;
-    text-transform: none;
-    opacity: .56;
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: .12em;
-    text-decoration-thickness: 1px;
-  }
-
-  .dyna-hero-toggle:hover{
-    opacity: .84;
-  }
-
-  .dyna-hero-toggle:focus-visible{
-    outline: 2px solid rgba(0,217,255,0.24);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  .dyna-hero-toggle[hidden]{
-    display: none !important;
-  }
-
-  .dyna-section{
-    margin-top: 34px;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .dyna-section h2{
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .dyna-section__head{
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
-    position: static;
-  }
-
-  .dyna-section__count{
-    font-size: 13px;
-    opacity: .72;
-    white-space: nowrap;
-  }
-
-  .dyna-section__intro{
-    max-width: 78ch;
-    margin: 0;
-    opacity: .92;
-  }
-
   .dyna-focus-grid{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -781,14 +411,58 @@ const constellationCount = relatedEntries.length;
     margin-top: 6px;
   }
 
+  .dyna-block{
+    margin-top: 18px;
+  }
+
   .dyna-block + .dyna-block{
     margin-top: 22px;
   }
 
+  .dyna-block--panel{
+    padding: 18px 18px 16px;
+    border: 1px solid rgba(127,127,127,0.18);
+    border-radius: 18px;
+    background:
+      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
+      rgba(127,127,127,0.035);
+  }
+
+  .dyna-block__head{
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+  }
+
   .dyna-block h3{
-    margin: 0 0 12px;
+    margin: 0;
     font-size: 15px;
     line-height: 1.3;
+    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 36px);
+  }
+
+  .dyna-block__count{
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+    padding: 0 10px;
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 999px;
+    font-size: 12px;
+    line-height: 1.2;
+    opacity: .78;
+    white-space: nowrap;
+  }
+
+  .dyna-block__intro{
+    max-width: 78ch;
+    margin: 0 0 12px;
+    font-size: 14px;
+    line-height: 1.5;
+    opacity: .9;
   }
 
   .dyna-cards{
@@ -807,7 +481,10 @@ const constellationCount = relatedEntries.length;
     border-radius: 16px;
     background: rgba(127,127,127,0.05);
     text-decoration: none;
-    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+    transition:
+      transform 120ms ease,
+      background 120ms ease,
+      border-color 120ms ease;
   }
 
   .dyna-card:hover{
@@ -840,154 +517,17 @@ const constellationCount = relatedEntries.length;
     opacity: .82;
   }
 
-  .dyna-section--final{
-    margin-top: 42px;
-  }
-
-  .dyna-aside{
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-  }
-
-  .dyna-aside__block{
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 12px;
-    background: rgba(127,127,127,0.05);
-  }
-
-  .dyna-aside__back{
-    display: inline-block;
-    margin-bottom: 8px;
-    font-size: 13px;
-    font-weight: 700;
-    text-decoration: none;
-  }
-
-  .dyna-aside__title{
-    font-size: 14px;
-    font-weight: 800;
-    letter-spacing: .2px;
-    line-height: 1.25;
-  }
-
-  .dyna-aside__meta{
-    margin-top: 8px;
-    font-size: 12px;
-    line-height: 1.35;
-    opacity: .78;
-  }
-
-  .dyna-aside__heading{
-    margin: 0 0 10px;
-    font-size: 13px;
-    font-weight: 800;
-    opacity: .9;
-  }
-
-  .dyna-aside__list{
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .dyna-aside__list li{
-    margin: 6px 0;
-  }
-
-  .dyna-aside__list a{
-    text-decoration: none;
-    font-size: 13px;
-    line-height: 1.3;
-  }
-
-  :global(body.is-dynamiques-archicratiques-page #reading-follow){
-    z-index: 10;
-  }
-
-  :global(body.is-dynamiques-archicratiques-page.dyna-follow-on .dyna-hero){
-    margin-bottom: 0;
-    padding: 12px 16px 14px;
-    row-gap: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :global(body.is-dynamiques-archicratiques-page.dyna-follow-on .dyna-hero h1){
-    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
-  }
-
-  :global(body.is-dynamiques-archicratiques-page.dyna-follow-on .dyna-intro){
-    max-width: 68ch;
-    font-size: .98rem;
-    line-height: 1.48;
-  }
-
-  :global(body.is-dynamiques-archicratiques-page.dyna-follow-on:not(.dyna-hero-expanded) .dyna-hero-more){
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  :global(body.is-dynamiques-archicratiques-page.dyna-follow-on:not(.dyna-hero-expanded) .dyna-hero-toggle){
-    display: inline-flex;
-  }
-
-  :global(body.is-dynamiques-archicratiques-page.dyna-follow-on #reading-follow .reading-follow__inner){
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  :global(body.is-dynamiques-archicratiques-page .dyna-section__head.is-sticky),
-  :global(body.is-dynamiques-archicratiques-page .dyna-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){
-    .dyna-hero{
-      position: static;
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
-    }
-
-    .dyna-intro{
-      max-width: none;
-    }
-
-    .dyna-hero-more{
-      max-height: none;
-      opacity: 1;
-      overflow: visible;
-    }
-
-    .dyna-hero-toggle{
-      display: none !important;
-    }
-
-    :global(body.is-dynamiques-archicratiques-page.dyna-follow-on .dyna-hero){
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
+  @media (max-width: 720px){
+    .dyna-block--panel{
+      padding: 16px;
+      border-radius: 16px;
     }
   }
 
   @media (prefers-color-scheme: dark){
     .dyna-focus-card,
-    .dyna-card,
-    .dyna-aside__block{
+    .dyna-block--panel,
+    .dyna-card{
       background: rgba(255,255,255,0.04);
     }
 
diff --git a/src/pages/glossaire/index-complet.astro b/src/pages/glossaire/index-complet.astro
index 7ed74cf..85080bb 100644
--- a/src/pages/glossaire/index-complet.astro
+++ b/src/pages/glossaire/index-complet.astro
@@ -1,11 +1,14 @@
 ---
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
+import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
+import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
+import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
+import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
 import { getCollection } from "astro:content";
+import { hrefOfGlossaryEntry } from "../../lib/glossary";
 
 const entries = await getCollection("glossaire");
-
-const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
-const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
+const hrefOf = hrefOfGlossaryEntry;
 
 const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
 
@@ -55,6 +58,49 @@ const paradigmesCount = entries.filter((entry) => entry.data.kind === "paradigme
 const doctrinesCount = entries.filter((entry) => entry.data.kind === "doctrine").length;
 const verbesCount = entries.filter((entry) => entry.data.kind === "verbe").length;
 const casIaCount = entries.filter((entry) => entry.data.domain === "cas-ia").length;
+
+const pageItems = [
+  { href: "#index-alphabetique", label: "Index alphabétique" },
+  { href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
+];
+
+const usefulLinks = [
+  { href: "/glossaire/", label: "Accueil du glossaire" },
+  { href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" },
+  { href: "/glossaire/paradigme-archicratique/", label: "Paradigme archicratique" },
+  { href: "/glossaire/scenes-archicratiques/", label: "Scènes archicratiques" },
+  { href: "/glossaire/dynamiques-archicratiques/", label: "Dynamiques archicratiques" },
+  { href: "/glossaire/tensions-irreductibles/", label: "Tensions irréductibles" },
+  { href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
+  { href: "/glossaire/archicrations/", label: "Méta-régimes archicratiques" },
+];
+
+const prolongerLinks = [
+  {
+    href: "/glossaire/",
+    title: "Accueil du glossaire",
+    text:
+      "Revenir à la cartographie générale du système archicratique.",
+  },
+  {
+    href: "/glossaire/concepts-fondamentaux/",
+    title: "Concepts fondamentaux",
+    text:
+      "Repartir du noyau minimal : arcalité, cratialité, tension, archicration, co-viabilité, archicratie.",
+  },
+  {
+    href: "/glossaire/paradigmes/",
+    title: "Paradigmes et doctrines",
+    text:
+      "Retrouver le paysage théorique au sein duquel l’archicratie se situe et se distingue.",
+  },
+  {
+    href: "/glossaire/archicrations/",
+    title: "Méta-régimes archicratiques",
+    text:
+      "Parcourir les grandes formes de co-viabilité et leurs modulations historiques.",
+  },
+];
 ---
 
 <GlossaryLayout
@@ -63,104 +109,50 @@ const casIaCount = entries.filter((entry) => entry.data.domain === "cas-ia").len
   stickyMode="glossary-portal"
 >
   <Fragment slot="aside">
-    <nav class="gic-aside" aria-label="Navigation de l’index complet du glossaire">
-      <div class="gic-aside__block">
-        <a class="gic-aside__back" href="/glossaire/">← Retour au glossaire</a>
-        <div class="gic-aside__title">Index complet</div>
-        <div class="gic-aside__meta">
-          {totalEntries} entrée{totalEntries > 1 ? "s" : ""} · {totalLetters} lettre{totalLetters > 1 ? "s" : ""}
-        </div>
-      </div>
-
-      <div class="gic-aside__block">
-        <h2 class="gic-aside__heading">Repères de lecture</h2>
-
-        <div class="gic-aside__pills" aria-label="Repères de l’index">
-          <span class="gic-aside__pill">
-            {paradigmesCount} paradigme{paradigmesCount > 1 ? "s" : ""}
-          </span>
-          <span class="gic-aside__pill">
-            {doctrinesCount} doctrine{doctrinesCount > 1 ? "s" : ""}
-          </span>
-          <span class="gic-aside__pill">
-            {verbesCount} verbe{verbesCount > 1 ? "s" : ""}
-          </span>
-          <span class="gic-aside__pill">
-            {casIaCount} entrée{casIaCount > 1 ? "s" : ""} cas IA
-          </span>
-        </div>
-
-        <p class="gic-aside__note">
-          Cet index complète les portails thématiques : il permet de retrouver
-          rapidement une fiche, puis de repartir vers les grandes cartographies du glossaire.
-        </p>
-      </div>
-
-      <div class="gic-aside__block">
-        <h2 class="gic-aside__heading">Portails utiles</h2>
-        <ul class="gic-aside__list">
-          <li><a href="/glossaire/">Accueil du glossaire</a></li>
-          <li><a href="/glossaire/concepts-fondamentaux/">Concepts fondamentaux</a></li>
-          <li><a href="/glossaire/paradigme-archicratique/">Paradigme archicratique</a></li>
-          <li><a href="/glossaire/scenes-archicratiques/">Scènes archicratiques</a></li>
-          <li><a href="/glossaire/dynamiques-archicratiques/">Dynamiques archicratiques</a></li>
-          <li><a href="/glossaire/tensions-irreductibles/">Tensions irréductibles</a></li>
-          <li><a href="/glossaire/paradigmes/">Paradigmes et doctrines</a></li>
-          <li><a href="/glossaire/archicrations/">Méta-régimes archicratiques</a></li>
-        </ul>
-      </div>
-    </nav>
+    <GlossaryPortalAside
+      ariaLabel="Navigation de l’index complet du glossaire"
+      title="Index complet"
+      meta={`${totalEntries} entrée${totalEntries > 1 ? "s" : ""} · ${totalLetters} lettre${totalLetters > 1 ? "s" : ""}`}
+      pageItems={pageItems}
+      usefulLinks={usefulLinks}
+    />
   </Fragment>
 
-  <section class="gic-page" data-gic-page>
-    <div class="gic-hero glossary-page-hero" data-gic-hero>
-      <p class="gic-kicker">Référentiel terminologique</p>
-      <h1>Index complet du glossaire</h1>
+  <section class="gic-page">
+    <GlossaryPortalHero
+      prefix="gic"
+      kicker="Référentiel terminologique"
+      title="Index complet du glossaire"
+      intro="Cette page rassemble l’ensemble des entrées du glossaire dans un ordre alphabétique intégral."
+      moreParagraphs={[
+        "Elle complète l’accueil conceptuel du glossaire par une navigation plus encyclopédique, plus directe et plus exhaustive.",
+      ]}
+      introMaxWidth="72ch"
+      followIntroMaxWidth="68ch"
+      moreMaxHeight="12rem"
+    />
 
-      <p class="gic-intro">
-        Cette page rassemble l’ensemble des entrées du glossaire dans un ordre alphabétique intégral.
-      </p>
-
-      <div class="gic-hero-collapsible">
-        <div
-          class="gic-hero-more"
-          id="gic-hero-more"
-          data-gic-more
-          aria-hidden="false"
-        >
-          <p class="gic-intro">
-            Elle complète l’accueil conceptuel du glossaire par une navigation plus encyclopédique,
-            plus directe et plus exhaustive.
-          </p>
-        </div>
-
-        <button
-          class="gic-hero-toggle"
-          id="gic-hero-toggle"
-          data-gic-more-toggle
-          type="button"
-          aria-controls="gic-hero-more"
-          aria-expanded="false"
-          hidden
-        >
-          lire la suite
-        </button>
-      </div>
-    </div>
-
-    <section class="gic-section">
-      <div class="gic-section__head">
-        <h2 id="index-alphabetique">Index alphabétique</h2>
-        <span class="gic-section__count">
-          {totalEntries} entrée{totalEntries > 1 ? "s" : ""}
+    <GlossaryPortalSection
+      id="index-alphabetique"
+      title="Index alphabétique"
+      count={`${totalEntries} entrée${totalEntries > 1 ? "s" : ""}`}
+      intro="Naviguer par lettre permet de retrouver rapidement chaque fiche du glossaire, tout en conservant ses principaux marqueurs de lecture."
+    >
+      <div class="gic-stats" aria-label="Repères de l’index">
+        <span class="gic-stat-pill">
+          {paradigmesCount} paradigme{paradigmesCount > 1 ? "s" : ""}
+        </span>
+        <span class="gic-stat-pill">
+          {doctrinesCount} doctrine{doctrinesCount > 1 ? "s" : ""}
+        </span>
+        <span class="gic-stat-pill">
+          {verbesCount} verbe{verbesCount > 1 ? "s" : ""}
+        </span>
+        <span class="gic-stat-pill">
+          {casIaCount} entrée{casIaCount > 1 ? "s" : ""} cas IA
         </span>
       </div>
 
-      <p class="gic-section__intro">
-        Naviguer par lettre permet de retrouver rapidement chaque fiche du glossaire,
-        tout en conservant ses principaux marqueurs de lecture.
-      </p>
-
       <nav class="gic-letters" id="gic-letters-source" aria-label="Lettres de l’index">
         {groupedAlpha.map(([letter]) => (
           <a href={`#letter-${letter}`}>{letter}</a>
@@ -178,14 +170,14 @@ const casIaCount = entries.filter((entry) => entry.data.domain === "cas-ia").len
           <a href={`#letter-${letter}`}>{letter}</a>
         ))}
       </nav>
-    </section>
+    </GlossaryPortalSection>
 
     <div class="gic-groups">
       {groupedAlpha.map(([letter, items]) => (
-        <section class="gic-section gic-group" id={`letter-${letter}`}>
-          <div class="gic-section__head">
-            <h2>{letter}</h2>
-            <span class="gic-section__count">
+        <section class="gic-group" id={`letter-${letter}`}>
+          <div class="gic-group__head">
+            <h3>{letter}</h3>
+            <span class="gic-group__count">
               {items.length} entrée{items.length > 1 ? "s" : ""}
             </span>
           </div>
@@ -211,291 +203,104 @@ const casIaCount = entries.filter((entry) => entry.data.domain === "cas-ia").len
       ))}
     </div>
 
-    <section class="gic-section gic-section--final">
-      <div class="gic-section__head">
-        <h2 id="prolonger-la-lecture">Prolonger la lecture</h2>
-      </div>
-
-      <p class="gic-section__intro">
-        Cet index intégral complète les portails thématiques sans s’y substituer.
-        Il permet de repartir ensuite vers les grandes cartographies déjà stabilisées du glossaire.
-      </p>
-
+    <GlossaryPortalSection
+      id="prolonger-la-lecture"
+      title="Prolonger la lecture"
+      intro="Cet index intégral complète les portails thématiques sans s’y substituer. Il permet de repartir ensuite vers les grandes cartographies déjà stabilisées du glossaire."
+    >
       <div class="gic-cards">
-        <a class="gic-card" href="/glossaire/">
-          <strong>Accueil du glossaire</strong>
-          <span>
-            Revenir à la cartographie générale du système archicratique.
-          </span>
-        </a>
-
-        <a class="gic-card" href="/glossaire/concepts-fondamentaux/">
-          <strong>Concepts fondamentaux</strong>
-          <span>
-            Repartir du noyau minimal : arcalité, cratialité, tension, archicration,
-            co-viabilité, archicratie.
-          </span>
-        </a>
-
-        <a class="gic-card" href="/glossaire/paradigmes/">
-          <strong>Paradigmes et doctrines</strong>
-          <span>
-            Retrouver le paysage théorique au sein duquel l’archicratie se situe
-            et se distingue.
-          </span>
-        </a>
-
-        <a class="gic-card" href="/glossaire/archicrations/">
-          <strong>Méta-régimes archicratiques</strong>
-          <span>
-            Parcourir les grandes formes de co-viabilité et leurs modulations historiques.
-          </span>
-        </a>
+        {prolongerLinks.map((item) => (
+          <a class="gic-card" href={item.href}>
+            <strong>{item.title}</strong>
+            <span>{item.text}</span>
+          </a>
+        ))}
       </div>
-    </section>
+    </GlossaryPortalSection>
+
+    <GlossaryPortalSection
+      id="portee-densemble"
+      title="Portée d’ensemble"
+      final={true}
+    >
+      <p>
+        L’index complet ne remplace pas les parcours thématiques : il les complète.
+        Il offre une entrée alphabétique stable dans le lexique archicratique, afin
+        de retrouver rapidement une fiche, puis de repartir vers les grands portails
+        conceptuels, topologiques, dynamiques ou théoriques du glossaire.
+      </p>
+    </GlossaryPortalSection>
   </section>
 
+  <GlossaryPortalStickySync
+    heroMoreId="gic-hero-more"
+    heroToggleId="gic-hero-toggle"
+    sectionHeadSelector=".glossary-portal-section__head, .gic-group__head"
+  />
+
   <script is:inline>
     (() => {
       const boot = () => {
         const body = document.body;
-        const root = document.documentElement;
-        const hero = document.querySelector("[data-gic-hero]");
         const follow = document.getElementById("reading-follow");
-        const heroMore = document.getElementById("gic-hero-more");
-        const heroToggle = document.getElementById("gic-hero-toggle");
         const lettersSource = document.getElementById("gic-letters-source");
         const lettersFollow = document.getElementById("gic-follow-letters");
 
-        if (!body || !root || !hero || !follow) return;
+        if (!body) return;
+        body.classList.add("is-index-complet-page");
 
-        const BODY_CLASS = "is-index-complet-page";
-        const FOLLOW_ON_CLASS = "gic-follow-on";
-        const EXPANDED_CLASS = "gic-hero-expanded";
-        const LETTERS_DOCKED_CLASS = "gic-letters-docked";
+        if (!follow || !lettersSource || !lettersFollow) return;
+
+        const DOCKED_CLASS = "gic-letters-docked";
         const mqMobile = window.matchMedia("(max-width: 860px)");
-        const AUTO_COLLAPSE_DELTA = 160;
+        let raf = 0;
 
-        let expandedAtY = null;
-        let lastScrollY = window.scrollY || 0;
-
-        body.classList.add(BODY_CLASS);
-
-        const heroHeight = () =>
-          Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
-
-        const stripLocalSticky = () => {
-          document.querySelectorAll(".gic-section__head").forEach((el) => {
-            el.classList.remove("is-sticky");
-            el.removeAttribute("data-sticky-active");
-          });
+        const hideFollowLetters = () => {
+          body.classList.remove(DOCKED_CLASS);
+          lettersFollow.hidden = true;
+          lettersFollow.setAttribute("aria-hidden", "true");
+          lettersFollow.style.top = "";
         };
 
-        const computeFollowOn = () =>
-          !mqMobile.matches &&
-          follow.classList.contains("is-on") &&
-          follow.style.display !== "none" &&
-          follow.getAttribute("aria-hidden") !== "true";
-
-        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 on = computeFollowOn();
-          body.classList.toggle(FOLLOW_ON_CLASS, on);
-          return on;
-        };
-
-        const collapseHero = () => {
-          if (!body.classList.contains(EXPANDED_CLASS)) return;
-
-          body.classList.remove(EXPANDED_CLASS);
-          expandedAtY = null;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "true");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = false;
-            heroToggle.setAttribute("aria-expanded", "false");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const expandHero = () => {
-          body.classList.add(EXPANDED_CLASS);
-          expandedAtY = window.scrollY || 0;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = true;
-            heroToggle.setAttribute("aria-expanded", "true");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const syncHeroState = () => {
-          const followOn = computeFollowOn();
-          const expanded = body.classList.contains(EXPANDED_CLASS);
-          const collapsed = followOn && !expanded;
-
-          if (!followOn || mqMobile.matches) {
-            body.classList.remove(EXPANDED_CLASS);
-            expandedAtY = null;
-
-            if (heroMore) {
-              heroMore.setAttribute("aria-hidden", "false");
-            }
-
-            if (heroToggle) {
-              heroToggle.hidden = true;
-              heroToggle.setAttribute("aria-expanded", "false");
-            }
-
-            return;
-          }
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", collapsed ? "true" : "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = !collapsed;
-            heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
-          }
-        };
-
-                const syncFollowLettersTop = () => {
-          if (!lettersFollow) return;
-
-          const inner = follow.querySelector(".reading-follow__inner");
+        const sync = () => {
           const followIsOn =
+            !mqMobile.matches &&
             follow.classList.contains("is-on") &&
             follow.style.display !== "none" &&
             follow.getAttribute("aria-hidden") !== "true";
 
-          if (!followIsOn || !inner) {
-            lettersFollow.style.top = "";
-            return;
-          }
-
-          const followRect = follow.getBoundingClientRect();
-          const innerRect = inner.getBoundingClientRect();
-          const top = followRect.top + innerRect.height;
-
-          lettersFollow.style.top = `${Math.round(top)}px`;
-        };
-
-        const syncLettersDockState = () => {
-          if (!lettersSource || !lettersFollow) return;
-
-          if (mqMobile.matches || !computeFollowOn()) {
-            body.classList.remove(LETTERS_DOCKED_CLASS);
-            lettersFollow.hidden = true;
-            lettersFollow.setAttribute("aria-hidden", "true");
+          if (!followIsOn) {
+            hideFollowLetters();
             return;
           }
 
           const inner = follow.querySelector(".reading-follow__inner");
           if (!inner) {
-            body.classList.remove(LETTERS_DOCKED_CLASS);
-            lettersFollow.hidden = true;
-            lettersFollow.setAttribute("aria-hidden", "true");
+            hideFollowLetters();
             return;
           }
 
-          const sourceRect = lettersSource.getBoundingClientRect();
+          const followRect = follow.getBoundingClientRect();
           const innerRect = inner.getBoundingClientRect();
+          const sourceRect = lettersSource.getBoundingClientRect();
 
-          const shouldDock = sourceRect.top <= (innerRect.bottom + 6);
+          lettersFollow.style.top = `${Math.round(followRect.top + innerRect.height)}px`;
 
-          body.classList.toggle(LETTERS_DOCKED_CLASS, shouldDock);
+          const shouldDock = sourceRect.top <= innerRect.bottom + 6;
+
+          body.classList.toggle(DOCKED_CLASS, shouldDock);
           lettersFollow.hidden = !shouldDock;
           lettersFollow.setAttribute("aria-hidden", shouldDock ? "false" : "true");
         };
 
-        const maybeAutoCollapseOnScroll = () => {
-          if (mqMobile.matches) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!computeFollowOn()) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!body.classList.contains(EXPANDED_CLASS)) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (expandedAtY == null) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          const currentY = window.scrollY || 0;
-          const scrollingDown = currentY > lastScrollY;
-          const delta = currentY - expandedAtY;
-
-          if (scrollingDown && delta >= AUTO_COLLAPSE_DELTA) {
-            collapseHero();
-          }
-
-          lastScrollY = currentY;
-        };
-
-        const syncAll = () => {
-          stripLocalSticky();
-          syncFollowState();
-          syncHeroState();
-          applyLocalStickyHeight();
-          syncFollowLettersTop();
-          syncLettersDockState();
-        };
-
-        let raf = 0;
         const schedule = () => {
           if (raf) return;
           raf = requestAnimationFrame(() => {
             raf = 0;
-            requestAnimationFrame(syncAll);
+            sync();
           });
         };
 
-        heroToggle?.addEventListener("click", () => {
-          expandHero();
-        });
-
-        const onScroll = () => {
-          maybeAutoCollapseOnScroll();
-          syncFollowLettersTop();
-          syncLettersDockState();
-          schedule();
-        };
-
         const followObserver = new MutationObserver(schedule);
         followObserver.observe(follow, {
           attributes: true,
@@ -503,14 +308,7 @@ const casIaCount = entries.filter((entry) => entry.data.domain === "cas-ia").len
           subtree: false,
         });
 
-        const heroResizeObserver =
-          typeof ResizeObserver !== "undefined"
-            ? new ResizeObserver(schedule)
-            : null;
-
-        heroResizeObserver?.observe(hero);
-
-        window.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("scroll", schedule, { passive: true });
         window.addEventListener("resize", schedule);
         window.addEventListener("pageshow", schedule);
 
@@ -541,139 +339,27 @@ const casIaCount = entries.filter((entry) => entry.data.domain === "cas-ia").len
     padding: 8px 0 24px;
   }
 
-  .gic-hero{
-    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);
-    display: grid;
-    row-gap: 14px;
-    transition:
-      margin-bottom 180ms ease,
-      border-radius 180ms ease,
-      padding 180ms ease,
-      row-gap 180ms ease;
-  }
-
-  .gic-kicker{
-    margin: 0;
-    font-size: 12px;
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    opacity: .72;
-  }
-
-  .gic-hero h1{
-    margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3rem);
-    line-height: 1.02;
-    letter-spacing: -.04em;
-    font-weight: 850;
-    transition: font-size 180ms ease;
-  }
-
-  .gic-intro{
-    margin: 0;
-    max-width: 72ch;
-    font-size: 1.04rem;
-    line-height: 1.55;
-    opacity: .94;
-    transition:
-      font-size 180ms ease,
-      line-height 180ms ease,
-      max-width 180ms ease;
-  }
-
-  .gic-hero-collapsible{
-    display: grid;
-    row-gap: 6px;
-  }
-
-  .gic-hero-more{
-    display: grid;
-    row-gap: 14px;
-    max-height: 12rem;
-    overflow: hidden;
-    opacity: 1;
-    transition:
-      max-height 220ms ease,
-      opacity 180ms ease;
-  }
-
-  .gic-hero-toggle{
-    display: none;
-    align-self: flex-start;
-    width: fit-content;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 11px;
-    line-height: 1.2;
-    letter-spacing: .01em;
-    text-transform: none;
-    opacity: .56;
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: .12em;
-    text-decoration-thickness: 1px;
-  }
-
-  .gic-hero-toggle:hover{
-    opacity: .84;
-  }
-
-  .gic-hero-toggle:focus-visible{
-    outline: 2px solid rgba(0,217,255,0.24);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  .gic-hero-toggle[hidden]{
-    display: none !important;
-  }
-
-  .gic-section{
-    margin-top: 34px;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .gic-section h2{
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .gic-section__head{
+  .gic-stats{
     display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
     flex-wrap: wrap;
-    margin-bottom: 10px;
-    position: static;
+    gap: 8px;
+    margin-top: 14px;
   }
 
-  .gic-section__count{
-    font-size: 13px;
-    opacity: .72;
+  .gic-stat-pill{
+    display: inline-flex;
+    align-items: center;
+    min-height: 30px;
+    padding: 0 11px;
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 999px;
+    background: rgba(127,127,127,0.04);
+    font-size: 12px;
+    line-height: 1.2;
+    opacity: .9;
     white-space: nowrap;
   }
 
-  .gic-section__intro{
-    max-width: 78ch;
-    margin: 0;
-    opacity: .92;
-  }
-
   .gic-letters{
     display: flex;
     flex-wrap: wrap;
@@ -681,6 +367,28 @@ const casIaCount = entries.filter((entry) => entry.data.domain === "cas-ia").len
     margin-top: 14px;
   }
 
+  .gic-letters a,
+  .gic-follow-letters a{
+    min-width: 34px;
+    text-align: center;
+    border: 1px solid rgba(127,127,127,0.24);
+    border-radius: 10px;
+    padding: 5px 8px;
+    text-decoration: none;
+    transition:
+      transform 120ms ease,
+      background 120ms ease,
+      border-color 120ms ease;
+  }
+
+  .gic-letters a:hover,
+  .gic-follow-letters a:hover{
+    transform: translateY(-1px);
+    background: rgba(127,127,127,0.08);
+    border-color: rgba(0,217,255,0.16);
+    text-decoration: none;
+  }
+
   .gic-follow-letters{
     position: fixed;
     left: var(--reading-left);
@@ -709,78 +417,53 @@ const casIaCount = entries.filter((entry) => entry.data.domain === "cas-ia").len
     transition: opacity 160ms ease, transform 160ms ease;
   }
 
-  .gic-follow-letters a{
-    min-width: 34px;
-    text-align: center;
-    border: 1px solid rgba(127,127,127,0.24);
-    border-radius: 10px;
-    padding: 5px 8px;
-    text-decoration: none;
-    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
-  }
-
-  .gic-follow-letters a:hover{
-    transform: translateY(-1px);
-    background: rgba(127,127,127,0.08);
-    border-color: rgba(0,217,255,0.16);
-    text-decoration: none;
-  }
-
   :global(body.is-index-complet-page.gic-letters-docked .gic-follow-letters){
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
   }
 
-  :global(body.is-index-complet-page.gic-follow-on.gic-letters-docked #reading-follow .reading-follow__inner){
+  :global(body.is-index-complet-page.is-glossary-portal-page.glossary-portal-follow-on.gic-letters-docked #reading-follow .reading-follow__inner){
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  @media (max-width: 860px){
-    .gic-follow-letters{
-      display: none !important;
-    }
-  }
-
-  @media (prefers-color-scheme: dark){
-    .gic-follow-letters{
-      background: rgba(0,0,0,.58);
-      box-shadow: 0 10px 22px rgba(0,0,0,.18);
-    }
-
-    .gic-follow-letters a:hover{
-      background: rgba(255,255,255,0.07);
-    }
-  }
-
-  .gic-letters a{
-    min-width: 34px;
-    text-align: center;
-    border: 1px solid rgba(127,127,127,0.24);
-    border-radius: 10px;
-    padding: 5px 8px;
-    text-decoration: none;
-    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
-  }
-
-  .gic-letters a:hover{
-    transform: translateY(-1px);
-    background: rgba(127,127,127,0.08);
-    border-color: rgba(0,217,255,0.16);
-    text-decoration: none;
-  }
-
   .gic-groups{
     display: flex;
     flex-direction: column;
     gap: 28px;
+    margin-top: 28px;
   }
 
   .gic-group{
     scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
   }
 
+  .gic-group h3{
+    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
+  }
+
+  .gic-group__head{
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+  }
+
+  .gic-group__head h3{
+    margin: 0;
+    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
+    line-height: 1.2;
+  }
+
+  .gic-group__count{
+    font-size: 13px;
+    opacity: .72;
+    white-space: nowrap;
+  }
+
   .gic-list{
     display: grid;
     gap: 12px;
@@ -795,11 +478,11 @@ const casIaCount = entries.filter((entry) => entry.data.domain === "cas-ia").len
 
   .gic-term{
     display: inline-block;
+    margin-bottom: 6px;
     font-weight: 800;
     font-size: 1.04rem;
     line-height: 1.3;
     text-decoration: none;
-    margin-bottom: 6px;
   }
 
   .gic-def{
@@ -839,7 +522,10 @@ const casIaCount = entries.filter((entry) => entry.data.domain === "cas-ia").len
     border-radius: 16px;
     background: rgba(127,127,127,0.05);
     text-decoration: none;
-    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+    transition:
+      transform 120ms ease,
+      background 120ms ease,
+      border-color 120ms ease;
   }
 
   .gic-card:hover{
@@ -860,203 +546,28 @@ const casIaCount = entries.filter((entry) => entry.data.domain === "cas-ia").len
     opacity: .92;
   }
 
-  .gic-section--final{
-    margin-top: 42px;
-  }
-
-  .gic-aside{
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-  }
-
-  .gic-aside__block{
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 12px;
-    background: rgba(127,127,127,0.05);
-  }
-
-  .gic-aside__back{
-    display: inline-block;
-    margin-bottom: 8px;
-    font-size: 13px;
-    font-weight: 700;
-    text-decoration: none;
-  }
-
-  .gic-aside__title{
-    font-size: 14px;
-    font-weight: 800;
-    letter-spacing: .2px;
-    line-height: 1.25;
-  }
-
-  .gic-aside__meta{
-    margin-top: 8px;
-    font-size: 12px;
-    line-height: 1.35;
-    opacity: .78;
-  }
-
-  .gic-aside__heading{
-    margin: 0 0 10px;
-    font-size: 13px;
-    font-weight: 800;
-    opacity: .9;
-  }
-
-    .gic-aside__pills{
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .gic-aside__pill{
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 9px;
-    border: 1px solid rgba(127,127,127,0.24);
-    border-radius: 999px;
-    background: rgba(127,127,127,0.04);
-    font-size: 12px;
-    line-height: 1.3;
-    opacity: .9;
-  }
-
-  .gic-aside__note{
-    margin: 10px 0 0;
-    font-size: 12px;
-    line-height: 1.45;
-    opacity: .78;
-  }
-
-  .gic-aside__list{
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .gic-aside__list li{
-    margin: 6px 0;
-  }
-
-  .gic-aside__list a{
-    text-decoration: none;
-    font-size: 13px;
-    line-height: 1.3;
-  }
-
-  .gic-aside__letters{
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .gic-aside__letters a{
-    min-width: 30px;
-    text-align: center;
-    border: 1px solid rgba(127,127,127,0.24);
-    border-radius: 10px;
-    padding: 4px 7px;
-    text-decoration: none;
-    font-size: 12px;
-    line-height: 1.2;
-  }
-
-  :global(body.is-index-complet-page #reading-follow){
-    z-index: 10;
-  }
-
-  :global(body.is-index-complet-page.gic-follow-on .gic-hero){
-    margin-bottom: 0;
-    padding: 12px 16px 14px;
-    row-gap: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :global(body.is-index-complet-page.gic-follow-on .gic-hero h1){
-    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
-  }
-
-  :global(body.is-index-complet-page.gic-follow-on .gic-intro){
-    max-width: 68ch;
-    font-size: .98rem;
-    line-height: 1.48;
-  }
-
-  :global(body.is-index-complet-page.gic-follow-on:not(.gic-hero-expanded) .gic-hero-more){
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  :global(body.is-index-complet-page.gic-follow-on:not(.gic-hero-expanded) .gic-hero-toggle){
-    display: inline-flex;
-  }
-
-  :global(body.is-index-complet-page.gic-follow-on #reading-follow .reading-follow__inner){
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  :global(body.is-index-complet-page .gic-section__head.is-sticky),
-  :global(body.is-index-complet-page .gic-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){
-    .gic-hero{
-      position: static;
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
-    }
-
-    .gic-intro{
-      max-width: none;
-    }
-
-    .gic-hero-more{
-      max-height: none;
-      opacity: 1;
-      overflow: visible;
-    }
-
-    .gic-hero-toggle{
+    .gic-follow-letters{
       display: none !important;
     }
-
-    :global(body.is-index-complet-page.gic-follow-on .gic-hero){
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
-    }
   }
 
   @media (prefers-color-scheme: dark){
+    .gic-stat-pill,
     .gic-item,
     .gic-card,
-    .gic-aside__block,
-    .gic-aside__pill{
+    .gic-follow-letters{
       background: rgba(255,255,255,0.04);
     }
 
     .gic-letters a:hover,
+    .gic-follow-letters a:hover,
     .gic-card:hover{
       background: rgba(255,255,255,0.07);
     }
+
+    .gic-follow-letters{
+      box-shadow: 0 10px 22px rgba(0,0,0,.18);
+    }
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/glossaire/paradigme-archicratique.astro b/src/pages/glossaire/paradigme-archicratique.astro
index cc322e6..0587781 100644
--- a/src/pages/glossaire/paradigme-archicratique.astro
+++ b/src/pages/glossaire/paradigme-archicratique.astro
@@ -1,13 +1,21 @@
 ---
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
+import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
+import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
+import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
+import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
 import { getCollection } from "astro:content";
+import {
+  buildGlossaryBySlug,
+  hrefOfGlossaryEntry,
+} from "../../lib/glossary";
 
 const entries = await getCollection("glossaire");
 
 const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
-const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
+const hrefOf = hrefOfGlossaryEntry;
 
-const bySlug = new Map(entries.map((entry) => [slugOf(entry), entry]));
+const bySlug = buildGlossaryBySlug(entries);
 
 function resolveOrderedEntries(slugs = []) {
   return slugs
@@ -129,6 +137,11 @@ const tensionEntries = resolveOrderedEntries([
   "souverainetes-territoriales-et-interdependances-globales",
   "memoire-symbolique-et-instantaneite-computationnelle",
   "coexistence-ontologique-et-necessite-regulatrice",
+  "liberte-daction-et-regimes-de-securite-algorithmique",
+  "visibilite-mediatique-et-reconnaissance-symbolique",
+  "egalisation-normative-et-differenciation-singuliere",
+  "pluralite-natalite-action",
+  "technodiversite-et-cosmotechnie",
 ]);
 
 const casIaEntries = resolveOrderedEntries([
@@ -145,27 +158,32 @@ const portalLinks = [
   {
     href: "/glossaire/concepts-fondamentaux/",
     title: "Concepts fondamentaux",
-    text: "Repartir du noyau minimal du paradigme : archicratie, tension, arcalité, cratialité, archicration et co-viabilité.",
+    text:
+      "Repartir du noyau minimal du paradigme : archicratie, tension, arcalité, cratialité, archicration et co-viabilité.",
   },
   {
     href: "/glossaire/scenes-archicratiques/",
     title: "Scènes archicratiques",
-    text: "Explorer les formes de comparution, d’épreuve, d’empêchement et de réouverture de la régulation.",
+    text:
+      "Explorer les formes de comparution, d’épreuve, d’empêchement et de réouverture de la régulation.",
   },
   {
     href: "/glossaire/tensions-irreductibles/",
     title: "Tensions irréductibles",
-    text: "Revenir aux foyers structuraux de conflictualité à partir desquels l’archicration devient nécessaire.",
+    text:
+      "Revenir aux foyers structuraux de conflictualité à partir desquels l’archicration devient nécessaire.",
   },
   {
     href: "/glossaire/paradigmes/",
     title: "Paradigmes et doctrines",
-    text: "Situer le paradigme archicratique dans son paysage de comparaison théorique.",
+    text:
+      "Situer le paradigme archicratique dans son paysage de comparaison théorique.",
   },
   {
     href: "/glossaire/archicrations/",
     title: "Archicrations",
-    text: "Parcourir les grands méta-régimes de co-viabilité et leurs formes différentielles ou hybrides.",
+    text:
+      "Parcourir les grands méta-régimes de co-viabilité et leurs formes différentielles ou hybrides.",
   },
 ];
 
@@ -178,17 +196,20 @@ const readingLinks = [
   {
     href: "/glossaire/scenes-archicratiques/",
     title: "Scènes archicratiques",
-    text: "Prolonger la lecture du paradigme par la question des scènes de comparution.",
+    text:
+      "Prolonger la lecture du paradigme par la question des scènes de comparution.",
   },
   {
     href: "/glossaire/paradigmes/",
     title: "Paradigmes et doctrines",
-    text: "Retrouver les grandes traditions intellectuelles mises en dialogue avec l’archicratie.",
+    text:
+      "Retrouver les grandes traditions intellectuelles mises en dialogue avec l’archicratie.",
   },
   {
     href: "/glossaire/index-complet/",
     title: "Index complet",
-    text: "Reparcourir l’ensemble du glossaire dans l’ordre alphabétique.",
+    text:
+      "Reparcourir l’ensemble du glossaire dans l’ordre alphabétique.",
   },
 ];
 
@@ -209,6 +230,27 @@ const constellationCount = uniqueBySlug([
 
 const tensionCount = tensionEntries.length;
 const translationCount = casIaEntries.length;
+const featuredParadigmCount = paradigmEntries.length;
+const featuredDoctrineCount = doctrineEntries.length;
+
+const pageItems = [
+  { href: "#coeur-de-paradigme", label: "Cœur de paradigme" },
+  { href: "#ce-que-deplace-le-paradigme", label: "Ce que déplace le paradigme" },
+  { href: "#noyau-conceptuel", label: "Noyau conceptuel" },
+  { href: "#architecture-interne", label: "Architecture interne" },
+  { href: "#constellation-theorique", label: "Constellation théorique" },
+  { href: "#tensions-irreductibles", label: "Tensions irréductibles" },
+  { href: "#traductions-et-prolongements", label: "Traductions et prolongements" },
+  { href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
+];
+
+const usefulLinks = [
+  { href: "/glossaire/archicratie/", label: "Archicratie" },
+  { href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" },
+  { href: "/glossaire/scenes-archicratiques/", label: "Scènes archicratiques" },
+  { href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
+  { href: "/glossaire/index-complet/", label: "Index complet" },
+];
 ---
 
 <GlossaryLayout
@@ -217,106 +259,35 @@ const translationCount = casIaEntries.length;
   stickyMode="glossary-portal"
 >
   <Fragment slot="aside">
-    <nav class="pa-aside" aria-label="Navigation du paradigme archicratique">
-      <div class="pa-aside__block">
-        <a class="pa-aside__back" href="/glossaire/">← Retour au glossaire</a>
-        <div class="pa-aside__title">Paradigme archicratique</div>
-        <div class="pa-aside__meta">
-          Portail central du glossaire
-        </div>
-      </div>
-
-      <div class="pa-aside__block">
-        <h2 class="pa-aside__heading">Dans cette page</h2>
-        <ul class="pa-aside__list">
-          <li><a href="#coeur-de-paradigme">Cœur de paradigme</a></li>
-          <li><a href="#ce-que-deplace-le-paradigme">Ce que déplace le paradigme</a></li>
-          <li><a href="#noyau-conceptuel">Noyau conceptuel</a></li>
-          <li><a href="#architecture-interne">Architecture interne</a></li>
-          <li><a href="#constellation-theorique">Constellation théorique</a></li>
-          <li><a href="#tensions-irreductibles">Tensions irréductibles</a></li>
-          <li><a href="#traductions-et-prolongements">Traductions et prolongements</a></li>
-          <li><a href="#prolonger-la-lecture">Prolonger la lecture</a></li>
-        </ul>
-      </div>
-
-      <div class="pa-aside__block">
-        <h2 class="pa-aside__heading">Renvois utiles</h2>
-        <ul class="pa-aside__list">
-          <li><a href="/glossaire/archicratie/">Archicratie</a></li>
-          <li><a href="/glossaire/concepts-fondamentaux/">Concepts fondamentaux</a></li>
-          <li><a href="/glossaire/scenes-archicratiques/">Scènes archicratiques</a></li>
-          <li><a href="/glossaire/paradigmes/">Paradigmes et doctrines</a></li>
-          <li><a href="/glossaire/index-complet/">Index complet</a></li>
-        </ul>
-      </div>
-    </nav>
+    <GlossaryPortalAside
+      ariaLabel="Navigation du paradigme archicratique"
+      title="Paradigme archicratique"
+      meta="Portail central du glossaire"
+      pageItems={pageItems}
+      usefulLinks={usefulLinks}
+    />
   </Fragment>
 
-  <section class="pa-page" data-pa-page>
-    <div class="pa-hero glossary-page-hero" data-pa-hero>
-      <p class="pa-kicker">Parcours du glossaire</p>
-      <h1>Paradigme archicratique</h1>
-
-      <p class="pa-intro">
-        Le paradigme archicratique propose d’intelligibiliser les sociétés
-        humaines à partir de leurs <strong>architectures de régulation</strong> :
-        non pas seulement à partir du gouvernement visible, du droit positif,
-        du marché ou de la souveraineté, mais à partir de la manière dont un
-        ordre collectif se fonde, s’effectue, se met en scène, se ferme,
-        s’expose ou se réouvre.
-      </p>
-
-      <div class="pa-hero-collapsible">
-        <div
-          class="pa-hero-more"
-          id="pa-hero-more"
-          data-pa-more
-          aria-hidden="false"
-        >
-          <p class="pa-intro">
-            Il ne réduit donc jamais la régulation à une seule logique. Il cherche
-            au contraire à penser ensemble les prises de fondation, les chaînes
-            d’effectuation, les scènes de comparution, les dynamiques de fermeture
-            ou d’oblitération et les conditions de la co-viabilité d’un monde
-            commun.
-          </p>
-
-          <p class="pa-intro">
-            Cette page sert de portail de synthèse. Elle organise une vue d’ensemble
-            du système archicratique : son noyau conceptuel, son architecture
-            interne, ses formes typologiques, ses comparaisons théoriques, ses
-            tensions irréductibles et ses traductions contemporaines, notamment
-            dans le cas des systèmes d’IA.
-          </p>
-        </div>
-
-        <button
-          class="pa-hero-toggle"
-          id="pa-hero-toggle"
-          data-pa-more-toggle
-          type="button"
-          aria-controls="pa-hero-more"
-          aria-expanded="false"
-          hidden
-        >
-          lire la suite
-        </button>
-      </div>
-    </div>
-
-    <section class="pa-section">
-      <div class="pa-section__head">
-        <h2 id="coeur-de-paradigme">Cœur de paradigme</h2>
-      </div>
-
-      <p class="pa-section__intro">
-        Cette page prend pour pivot la notion d’<strong>Archicratie</strong>,
-        entendue comme méta-régime de régulation par lequel les sociétés
-        organisent la co-viabilité de leurs dynamiques internes à travers des
-        compositions variables d’arcalité, de cratialité et d’archicration.
-      </p>
+  <section class="pa-page">
+    <GlossaryPortalHero
+      prefix="pa"
+      kicker="Parcours du glossaire"
+      title="Paradigme archicratique"
+      intro="Le paradigme archicratique propose d’intelligibiliser les sociétés humaines à partir de leurs architectures de régulation : non pas seulement à partir du gouvernement visible, du droit positif, du marché ou de la souveraineté, mais à partir de la manière dont un ordre collectif se fonde, s’effectue, se met en scène, se ferme, s’expose ou se réouvre."
+      moreParagraphs={[
+        "Il ne réduit donc jamais la régulation à une seule logique. Il cherche au contraire à penser ensemble les prises de fondation, les chaînes d’effectuation, les scènes de comparution, les dynamiques de fermeture ou d’oblitération et les conditions de la co-viabilité d’un monde commun.",
+        "Cette page sert de portail de synthèse. Elle organise une vue d’ensemble du système archicratique : son noyau conceptuel, son architecture interne, ses formes typologiques, ses comparaisons théoriques, ses tensions irréductibles et ses traductions contemporaines, notamment dans le cas des systèmes d’IA.",
+      ]}
+      introMaxWidth="72ch"
+      followIntroMaxWidth="68ch"
+      moreMaxHeight="28rem"
+    />
 
+    <GlossaryPortalSection
+      id="coeur-de-paradigme"
+      title="Cœur de paradigme"
+      intro="Cette page prend pour pivot la notion d’Archicratie, entendue comme méta-régime de régulation par lequel les sociétés organisent la co-viabilité de leurs dynamiques internes à travers des compositions variables d’arcalité, de cratialité et d’archicration."
+    >
       {archicratie ? (
         <article class="pa-focus-card">
           <div class="pa-focus-card__eyebrow">Entrée principale</div>
@@ -345,23 +316,14 @@ const translationCount = casIaEntries.length;
           La fiche principale n’est pas encore disponible dans la collection.
         </p>
       )}
-    </section>
-
-    <section class="pa-section">
-      <div class="pa-section__head">
-        <h2 id="ce-que-deplace-le-paradigme">Ce que déplace le paradigme</h2>
-        <span class="pa-section__count">
-          {displacementItems.length} déplacement{displacementItems.length > 1 ? "s" : ""}
-        </span>
-      </div>
-
-      <p class="pa-section__intro">
-        Le paradigme archicratique ne vient pas simplement ajouter un terme de
-        plus au vocabulaire politique. Il déplace le centre de gravité de
-        l’analyse en réorientant la manière même de poser la question de
-        l’ordre, de la régulation et de leur mise à l’épreuve.
-      </p>
+    </GlossaryPortalSection>
 
+    <GlossaryPortalSection
+      id="ce-que-deplace-le-paradigme"
+      title="Ce que déplace le paradigme"
+      count={`${displacementItems.length} déplacement${displacementItems.length > 1 ? "s" : ""}`}
+      intro="Le paradigme archicratique ne vient pas simplement ajouter un terme de plus au vocabulaire politique. Il déplace le centre de gravité de l’analyse en réorientant la manière même de poser la question de l’ordre, de la régulation et de leur mise à l’épreuve."
+    >
       <div class="pa-cards">
         {displacementItems.map((item) => (
           <article class="pa-note-card">
@@ -370,32 +332,22 @@ const translationCount = casIaEntries.length;
           </article>
         ))}
       </div>
-    </section>
+    </GlossaryPortalSection>
 
     {coreEntries.length > 0 && (
-      <section class="pa-section">
-        <div class="pa-section__head">
-          <h2 id="noyau-conceptuel">Noyau conceptuel</h2>
-          <span class="pa-section__count">
-            {coreEntries.length} notion{coreEntries.length > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="pa-section__intro">
-          Le paradigme archicratique ne se laisse pas réduire à une notion
-          unique. Il repose sur un noyau de concepts co-dépendants qui
-          permettent de penser ensemble les fondements de l’ordre, ses chaînes
-          d’effectuation, ses scènes de comparution et les conditions de sa
-          tenue co-viable.
-        </p>
-
+      <GlossaryPortalSection
+        id="noyau-conceptuel"
+        title="Noyau conceptuel"
+        count={`${coreEntries.length} notion${coreEntries.length > 1 ? "s" : ""}`}
+        intro="Le paradigme archicratique ne se laisse pas réduire à une notion unique. Il repose sur un noyau de concepts co-dépendants qui permettent de penser ensemble les fondements de l’ordre, ses chaînes d’effectuation, ses scènes de comparution et les conditions de sa tenue co-viable."
+      >
         <div class="pa-cards">
           {coreEntries.map((entry) => (
             <a class="pa-card" href={hrefOf(entry)}>
               <strong>{entry.data.term}</strong>
               <span>{entry.data.definitionShort}</span>
 
-              {entry.data.comparisonTraditions?.length > 0 && (
+              {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                 <small>
                   Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                 </small>
@@ -403,27 +355,25 @@ const translationCount = casIaEntries.length;
             </a>
           ))}
         </div>
-      </section>
+      </GlossaryPortalSection>
     )}
 
     {(sceneEntries.length > 0 || dynamicEntries.length > 0 || methodEntries.length > 0) && (
-      <section class="pa-section">
-        <div class="pa-section__head">
-          <h2 id="architecture-interne">Architecture interne</h2>
-          <span class="pa-section__count">
-            {internalCount} entrée{internalCount > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="pa-section__intro">
-          Le paradigme ne se réduit pas à un noyau abstrait. Il déploie une
-          architecture interne faite de scènes, de topologies, de dynamiques,
-          de pathologies, de figures et d’opérateurs méthodologiques.
-        </p>
-
+      <GlossaryPortalSection
+        id="architecture-interne"
+        title="Architecture interne"
+        count={`${internalCount} entrée${internalCount > 1 ? "s" : ""}`}
+        intro="Le paradigme ne se réduit pas à un noyau abstrait. Il déploie une architecture interne faite de scènes, de topologies, de dynamiques, de pathologies, de figures et d’opérateurs méthodologiques."
+      >
         {sceneEntries.length > 0 && (
           <div class="pa-block">
-            <h3 id="scenes-topologies-et-instituabilite">Scènes, topologies et instituabilité</h3>
+            <div class="pa-block__head">
+              <h3 id="scenes-topologies-et-instituabilite">Scènes, topologies et instituabilité</h3>
+              <span class="pa-block__count">
+                {sceneEntries.length} entrée{sceneEntries.length > 1 ? "s" : ""}
+              </span>
+            </div>
+
             <p class="pa-block__intro">
               Le paradigme archicratique ne pense pas seulement ce qui régule,
               mais aussi les lieux, les formats et les conditions par lesquels
@@ -436,7 +386,7 @@ const translationCount = casIaEntries.length;
                   <strong>{entry.data.term}</strong>
                   <span>{entry.data.definitionShort}</span>
 
-                  {entry.data.comparisonTraditions?.length > 0 && (
+                  {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                     <small>
                       Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                     </small>
@@ -449,7 +399,13 @@ const translationCount = casIaEntries.length;
 
         {dynamicEntries.length > 0 && (
           <div class="pa-block">
-            <h3 id="dynamiques-et-pathologies">Dynamiques et pathologies</h3>
+            <div class="pa-block__head">
+              <h3 id="dynamiques-et-pathologies">Dynamiques et pathologies</h3>
+              <span class="pa-block__count">
+                {dynamicEntries.length} entrée{dynamicEntries.length > 1 ? "s" : ""}
+              </span>
+            </div>
+
             <p class="pa-block__intro">
               Toute architecture de régulation se transforme, se ferme, se
               dégrade ou se réouvre. Le paradigme ne décrit donc pas seulement
@@ -469,7 +425,13 @@ const translationCount = casIaEntries.length;
 
         {methodEntries.length > 0 && (
           <div class="pa-block">
-            <h3 id="figures-et-operateurs-methodologiques">Figures et opérateurs méthodologiques</h3>
+            <div class="pa-block__head">
+              <h3 id="figures-et-operateurs-methodologiques">Figures et opérateurs méthodologiques</h3>
+              <span class="pa-block__count">
+                {methodEntries.length} entrée{methodEntries.length > 1 ? "s" : ""}
+              </span>
+            </div>
+
             <p class="pa-block__intro">
               Le paradigme suppose enfin des figures, des qualifications et des
               instruments d’analyse capables de rendre la régulation lisible,
@@ -486,28 +448,65 @@ const translationCount = casIaEntries.length;
             </div>
           </div>
         )}
-      </section>
+      </GlossaryPortalSection>
     )}
 
     {(typologyEntries.length > 0 || paradigmEntries.length > 0 || doctrineEntries.length > 0) && (
-      <section class="pa-section">
-        <div class="pa-section__head">
-          <h2 id="constellation-theorique">Constellation théorique</h2>
-          <span class="pa-section__count">
-            {constellationCount} entrée{constellationCount > 1 ? "s" : ""}
-          </span>
+      <GlossaryPortalSection
+        id="constellation-theorique"
+        title="Constellation théorique"
+        intro="Le paradigme archicratique s’ouvre vers une constellation plus large : typologie des régimes de co-viabilité, traditions concurrentes ou complémentaires et doctrines fondatrices à partir desquelles ses déplacements deviennent plus nettement comparables."
+      >
+        <div class="pa-theory-hub">
+          <div class="pa-theory-hub__top">
+            <div class="pa-theory-hub__head">
+              <div class="pa-theory-hub__eyebrow">Volet théorique dédié</div>
+              <h3>Panorama théorique complet</h3>
+            </div>
+
+            <span class="pa-theory-hub__count">
+              {constellationCount} entrée{constellationCount > 1 ? "s" : ""}
+            </span>
+          </div>
+
+          <p class="pa-theory-hub__intro">
+            Ici, le portail-mère ne retient qu’un ensemble resserré de repères
+            structurants. La cartographie théorique exhaustive est déployée
+            dans une page dédiée, distincte du parcours central.
+          </p>
+
+          <div class="pa-theory-hub__toolbar">
+            <div
+              class="pa-theory-hub__chips"
+              aria-label="Accès rapide aux sous-sections théoriques"
+            >
+              <a class="pa-chip pa-chip--link" href="#typologie-des-regimes-de-co-viabilite">
+                {typologyEntries.length} repère{typologyEntries.length > 1 ? "s" : ""} typologique{typologyEntries.length > 1 ? "s" : ""}
+              </a>
+              <a class="pa-chip pa-chip--link" href="#paradigmes-mobilises">
+                {featuredParadigmCount} paradigme{featuredParadigmCount > 1 ? "s" : ""} mis en avant
+              </a>
+              <a class="pa-chip pa-chip--link" href="#doctrines-fondatrices">
+                {featuredDoctrineCount} doctrine{featuredDoctrineCount > 1 ? "s" : ""} mise{featuredDoctrineCount > 1 ? "s" : ""} en avant
+              </a>
+            </div>
+
+            <a class="pa-theory-button" href="/glossaire/paradigmes/">
+              <span>Ouvrir la cartographie théorique</span>
+              <span aria-hidden="true">↗</span>
+            </a>
+          </div>
         </div>
 
-        <p class="pa-section__intro">
-          Le paradigme archicratique s’ouvre vers une constellation plus large :
-          typologie des régimes de co-viabilité, traditions concurrentes ou
-          complémentaires et doctrines fondatrices à partir desquelles ses
-          déplacements deviennent plus nettement comparables.
-        </p>
-
         {typologyEntries.length > 0 && (
-          <div class="pa-block">
-            <h3 id="typologie-des-regimes-de-co-viabilite">Typologie des régimes de co-viabilité</h3>
+          <div class="pa-block pa-block--panel">
+            <div class="pa-block__head">
+              <h3 id="typologie-des-regimes-de-co-viabilite">Typologie des régimes de co-viabilité</h3>
+              <span class="pa-block__count">
+                {typologyEntries.length} entrée{typologyEntries.length > 1 ? "s" : ""}
+              </span>
+            </div>
+
             <p class="pa-block__intro">
               Le paradigme ne vaut pas seulement comme noyau conceptuel. Il
               s’ouvre aussi sur une typologie des formes de régulation et sur
@@ -527,12 +526,19 @@ const translationCount = casIaEntries.length;
         )}
 
         {paradigmEntries.length > 0 && (
-          <div class="pa-block">
-            <h3 id="paradigmes-mobilises">Paradigmes mobilisés</h3>
+          <div class="pa-block pa-block--panel">
+            <div class="pa-block__head">
+              <h3 id="paradigmes-mobilises">Paradigmes mobilisés</h3>
+              <span class="pa-block__count">
+                {featuredParadigmCount} repère{featuredParadigmCount > 1 ? "s" : ""} mis en avant
+              </span>
+            </div>
+
             <p class="pa-block__intro">
               L’archicratie ne s’élabore pas dans un vide théorique. Elle
               dialogue avec plusieurs paradigmes qui éclairent ses voisinages,
-              ses contrastes et ses points d’appui.
+              ses contrastes et ses points d’appui. Le portail central en
+              retient ici quelques-uns, choisis pour leur portée comparative.
             </p>
 
             <div class="pa-cards">
@@ -541,7 +547,7 @@ const translationCount = casIaEntries.length;
                   <strong>{entry.data.term}</strong>
                   <span>{entry.data.definitionShort}</span>
 
-                  {entry.data.mobilizedAuthors?.length > 0 && (
+                  {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
                     <small>
                       Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
                     </small>
@@ -553,8 +559,14 @@ const translationCount = casIaEntries.length;
         )}
 
         {doctrineEntries.length > 0 && (
-          <div class="pa-block">
-            <h3 id="doctrines-fondatrices">Doctrines fondatrices</h3>
+          <div class="pa-block pa-block--panel">
+            <div class="pa-block__head">
+              <h3 id="doctrines-fondatrices">Doctrines fondatrices</h3>
+              <span class="pa-block__count">
+                {featuredDoctrineCount} repère{featuredDoctrineCount > 1 ? "s" : ""} mis en avant
+              </span>
+            </div>
+
             <p class="pa-block__intro">
               Certaines doctrines classiques continuent de servir de contrepoints
               ou de points de départ obligés. Le paradigme archicratique les
@@ -568,7 +580,7 @@ const translationCount = casIaEntries.length;
                   <strong>{entry.data.term}</strong>
                   <span>{entry.data.definitionShort}</span>
 
-                  {entry.data.mobilizedAuthors?.length > 0 && (
+                  {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
                     <small>
                       Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
                     </small>
@@ -578,25 +590,16 @@ const translationCount = casIaEntries.length;
             </div>
           </div>
         )}
-      </section>
+      </GlossaryPortalSection>
     )}
 
     {tensionEntries.length > 0 && (
-      <section class="pa-section">
-        <div class="pa-section__head">
-          <h2 id="tensions-irreductibles">Tensions irréductibles</h2>
-          <span class="pa-section__count">
-            {tensionCount} tension{tensionCount > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="pa-section__intro">
-          Le paradigme archicratique ne pense pas la régulation comme suppression
-          des contradictions, mais comme organisation de tensions durables,
-          souvent irréductibles, à partir desquelles la co-viabilité devient
-          nécessaire.
-        </p>
-
+      <GlossaryPortalSection
+        id="tensions-irreductibles"
+        title="Tensions irréductibles"
+        count={`${tensionCount} tension${tensionCount > 1 ? "s" : ""}`}
+        intro="Le paradigme archicratique ne pense pas la régulation comme suppression des contradictions, mais comme organisation de tensions durables, souvent irréductibles, à partir desquelles la co-viabilité devient nécessaire."
+      >
         <div class="pa-cards">
           {tensionEntries.map((entry) => (
             <a class="pa-card" href={hrefOf(entry)}>
@@ -605,29 +608,25 @@ const translationCount = casIaEntries.length;
             </a>
           ))}
         </div>
-      </section>
+      </GlossaryPortalSection>
     )}
 
     {(casIaEntries.length > 0 || portalLinks.length > 0) && (
-      <section class="pa-section">
-        <div class="pa-section__head">
-          <h2 id="traductions-et-prolongements">Traductions et prolongements</h2>
-          <span class="pa-section__count">
-            {translationCount} dispositif{translationCount > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="pa-section__intro">
-          L’un des intérêts majeurs du paradigme archicratique est de permettre
-          des traductions institutionnelles concrètes. Dans le cas des systèmes
-          d’IA, il donne lieu à des dispositifs destinés à rouvrir les chaînes
-          de décision, documenter les justifications et reconstruire de
-          véritables scènes de comparution.
-        </p>
-
+      <GlossaryPortalSection
+        id="traductions-et-prolongements"
+        title="Traductions et prolongements"
+        count={`${translationCount} dispositif${translationCount > 1 ? "s" : ""}`}
+        intro="L’un des intérêts majeurs du paradigme archicratique est de permettre des traductions institutionnelles concrètes. Dans le cas des systèmes d’IA, il donne lieu à des dispositifs destinés à rouvrir les chaînes de décision, documenter les justifications et reconstruire de véritables scènes de comparution."
+      >
         {casIaEntries.length > 0 && (
-          <div class="pa-block">
-            <h3 id="traduction-contemporaine-cas-ia">Traduction contemporaine : Cas IA</h3>
+          <div class="pa-block pa-block--panel">
+            <div class="pa-block__head">
+              <h3 id="traduction-contemporaine-cas-ia">Traduction contemporaine : Cas IA</h3>
+              <span class="pa-block__count">
+                {casIaEntries.length} dispositif{casIaEntries.length > 1 ? "s" : ""}
+              </span>
+            </div>
+
             <div class="pa-cards">
               {casIaEntries.map((entry) => (
                 <a class="pa-card" href={hrefOf(entry)}>
@@ -640,8 +639,14 @@ const translationCount = casIaEntries.length;
         )}
 
         {portalLinks.length > 0 && (
-          <div class="pa-block">
-            <h3 id="portails-voisins-deja-stabilises">Portails voisins déjà stabilisés</h3>
+          <div class="pa-block pa-block--panel">
+            <div class="pa-block__head">
+              <h3 id="portails-voisins-deja-stabilises">Portails voisins déjà stabilisés</h3>
+              <span class="pa-block__count">
+                {portalLinks.length} portail{portalLinks.length > 1 ? "s" : ""}
+              </span>
+            </div>
+
             <div class="pa-cards">
               {portalLinks.map((item) => (
                 <a class="pa-card" href={item.href}>
@@ -652,20 +657,14 @@ const translationCount = casIaEntries.length;
             </div>
           </div>
         )}
-      </section>
+      </GlossaryPortalSection>
     )}
 
-    <section class="pa-section">
-      <div class="pa-section__head">
-        <h2 id="prolonger-la-lecture">Prolonger la lecture</h2>
-      </div>
-
-      <p class="pa-section__intro">
-        Cette page a vocation à servir de portail-mère du glossaire. Elle
-        oriente vers les autres parcours déjà stabilisés sans se substituer aux
-        fiches détaillées ni aux pages thématiques spécialisées.
-      </p>
-
+    <GlossaryPortalSection
+      id="prolonger-la-lecture"
+      title="Prolonger la lecture"
+      intro="Cette page a vocation à servir de portail-mère du glossaire. Elle oriente vers les autres parcours déjà stabilisés sans se substituer aux fiches détaillées ni aux pages thématiques spécialisées."
+    >
       <div class="pa-cards">
         {readingLinks.map((item) => (
           <a class="pa-card" href={item.href}>
@@ -674,10 +673,13 @@ const translationCount = casIaEntries.length;
           </a>
         ))}
       </div>
-    </section>
+    </GlossaryPortalSection>
 
-    <section class="pa-section pa-section--final">
-      <h2>Portée d’ensemble</h2>
+    <GlossaryPortalSection
+      id="portee-densemble"
+      title="Portée d’ensemble"
+      final={true}
+    >
       <p>
         Le paradigme archicratique ne demande pas seulement <em>qui gouverne</em>.
         Il demande par quelles architectures un ordre collectif tient, se
@@ -691,232 +693,13 @@ const translationCount = casIaEntries.length;
         seulement technique, ni simplement opaque, mais toujours susceptible
         d’être comprise, diagnostiquée, mise à l’épreuve et réinstituée.
       </p>
-    </section>
+    </GlossaryPortalSection>
   </section>
 
-<script is:inline>
-  (() => {
-    const boot = () => {
-      const body = document.body;
-      const root = document.documentElement;
-      const hero = document.querySelector("[data-pa-hero]");
-      const follow = document.getElementById("reading-follow");
-      const heroMore = document.getElementById("pa-hero-more");
-      const heroToggle = document.getElementById("pa-hero-toggle");
-
-      if (!body || !root || !hero || !follow) return;
-
-      const BODY_CLASS = "is-paradigme-archicratique-page";
-      const FOLLOW_ON_CLASS = "pa-follow-on";
-      const EXPANDED_CLASS = "pa-hero-expanded";
-      const mqMobile = window.matchMedia("(max-width: 860px)");
-      const AUTO_COLLAPSE_DELTA = 160;
-
-      let expandedAtY = null;
-      let lastScrollY = window.scrollY || 0;
-
-      body.classList.add(BODY_CLASS);
-
-      const heroHeight = () =>
-        Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
-
-      const stripLocalSticky = () => {
-        document.querySelectorAll(".pa-section__head").forEach((el) => {
-          el.classList.remove("is-sticky");
-          el.removeAttribute("data-sticky-active");
-        });
-      };
-
-      const computeFollowOn = () =>
-        !mqMobile.matches &&
-        follow.classList.contains("is-on") &&
-        follow.style.display !== "none" &&
-        follow.getAttribute("aria-hidden") !== "true";
-
-      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 on = computeFollowOn();
-        body.classList.toggle(FOLLOW_ON_CLASS, on);
-        return on;
-      };
-
-      const collapseHero = () => {
-        if (!body.classList.contains(EXPANDED_CLASS)) return;
-
-        body.classList.remove(EXPANDED_CLASS);
-        expandedAtY = null;
-
-        if (heroMore) {
-          heroMore.setAttribute("aria-hidden", "true");
-        }
-
-        if (heroToggle) {
-          heroToggle.hidden = false;
-          heroToggle.setAttribute("aria-expanded", "false");
-        }
-
-        try {
-          window.__archiUpdateFollow?.();
-        } catch {}
-
-        schedule();
-      };
-
-      const expandHero = () => {
-        body.classList.add(EXPANDED_CLASS);
-        expandedAtY = window.scrollY || 0;
-
-        if (heroMore) {
-          heroMore.setAttribute("aria-hidden", "false");
-        }
-
-        if (heroToggle) {
-          heroToggle.hidden = true;
-          heroToggle.setAttribute("aria-expanded", "true");
-        }
-
-        try {
-          window.__archiUpdateFollow?.();
-        } catch {}
-
-        schedule();
-      };
-
-      const syncHeroState = () => {
-        const followOn = computeFollowOn();
-        const expanded = body.classList.contains(EXPANDED_CLASS);
-        const collapsed = followOn && !expanded;
-
-        if (!followOn || mqMobile.matches) {
-          body.classList.remove(EXPANDED_CLASS);
-          expandedAtY = null;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = true;
-            heroToggle.setAttribute("aria-expanded", "false");
-          }
-
-          return;
-        }
-
-        if (heroMore) {
-          heroMore.setAttribute("aria-hidden", collapsed ? "true" : "false");
-        }
-
-        if (heroToggle) {
-          heroToggle.hidden = !collapsed;
-          heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
-        }
-      };
-
-      const maybeAutoCollapseOnScroll = () => {
-        if (mqMobile.matches) {
-          lastScrollY = window.scrollY || 0;
-          return;
-        }
-
-        if (!computeFollowOn()) {
-          lastScrollY = window.scrollY || 0;
-          return;
-        }
-
-        if (!body.classList.contains(EXPANDED_CLASS)) {
-          lastScrollY = window.scrollY || 0;
-          return;
-        }
-
-        if (expandedAtY == null) {
-          lastScrollY = window.scrollY || 0;
-          return;
-        }
-
-        const currentY = window.scrollY || 0;
-        const scrollingDown = currentY > lastScrollY;
-        const delta = currentY - expandedAtY;
-
-        if (scrollingDown && delta >= AUTO_COLLAPSE_DELTA) {
-          collapseHero();
-        }
-
-        lastScrollY = currentY;
-      };
-
-      const syncAll = () => {
-        stripLocalSticky();
-        syncFollowState();
-        syncHeroState();
-        applyLocalStickyHeight();
-      };
-
-      let raf = 0;
-      const schedule = () => {
-        if (raf) return;
-        raf = requestAnimationFrame(() => {
-          raf = 0;
-          requestAnimationFrame(syncAll);
-        });
-      };
-
-      heroToggle?.addEventListener("click", () => {
-        expandHero();
-      });
-
-      const onScroll = () => {
-        maybeAutoCollapseOnScroll();
-        schedule();
-      };
-
-      const followObserver = new MutationObserver(schedule);
-      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("scroll", onScroll, { passive: true });
-      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>
+  <GlossaryPortalStickySync
+    heroMoreId="pa-hero-more"
+    heroToggleId="pa-hero-toggle"
+  />
 </GlossaryLayout>
 
 <style>
@@ -924,139 +707,6 @@ const translationCount = casIaEntries.length;
     padding: 8px 0 24px;
   }
 
-  .pa-hero{
-    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);
-    display: grid;
-    row-gap: 14px;
-    transition:
-      margin-bottom 180ms ease,
-      border-radius 180ms ease,
-      padding 180ms ease,
-      row-gap 180ms ease;
-  }
-
-  .pa-kicker{
-    margin: 0;
-    font-size: 12px;
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    opacity: .72;
-  }
-
-  .pa-hero h1{
-    margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
-    line-height: 1.02;
-    letter-spacing: -.04em;
-    font-weight: 850;
-    transition: font-size 180ms ease;
-  }
-
-  .pa-intro{
-    margin: 0;
-    max-width: 72ch;
-    font-size: 1.04rem;
-    line-height: 1.55;
-    opacity: .94;
-    transition:
-      font-size 180ms ease,
-      line-height 180ms ease,
-      max-width 180ms ease;
-  }
-
-  .pa-hero-collapsible{
-    display: grid;
-    row-gap: 6px;
-  }
-
-  .pa-hero-more{
-    display: grid;
-    row-gap: 14px;
-    max-height: 28rem;
-    overflow: hidden;
-    opacity: 1;
-    transition:
-      max-height 220ms ease,
-      opacity 180ms ease;
-  }
-
-  .pa-hero-toggle{
-    display: none;
-    align-self: flex-start;
-    width: fit-content;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 11px;
-    line-height: 1.2;
-    letter-spacing: .01em;
-    text-transform: none;
-    opacity: .56;
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: .12em;
-    text-decoration-thickness: 1px;
-  }
-
-  .pa-hero-toggle:hover{
-    opacity: .84;
-  }
-
-  .pa-hero-toggle:focus-visible{
-    outline: 2px solid rgba(0,217,255,0.24);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  .pa-hero-toggle[hidden]{
-    display: none !important;
-  }
-
-  .pa-section{
-    margin-top: 34px;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .pa-section h2{
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .pa-section__head{
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
-    position: static;
-  }
-
-  .pa-section__count{
-    font-size: 13px;
-    opacity: .72;
-    white-space: nowrap;
-  }
-
-  .pa-section__intro{
-    max-width: 78ch;
-    margin: 0;
-    opacity: .92;
-  }
-
   .pa-focus-card{
     margin-top: 14px;
     padding: 18px 20px;
@@ -1108,14 +758,47 @@ const translationCount = casIaEntries.length;
     margin-top: 6px;
   }
 
-  .pa-block + .pa-block{
-    margin-top: 22px;
+  .pa-block{
+    margin-top: 18px;
+  }
+
+  .pa-block--panel{
+    padding: 18px 18px 16px;
+    border: 1px solid rgba(127,127,127,0.18);
+    border-radius: 18px;
+    background:
+      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
+      rgba(127,127,127,0.035);
+  }
+
+  .pa-block__head{
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
   }
 
   .pa-block h3{
-    margin: 0 0 10px;
+    margin: 0;
     font-size: 15px;
     line-height: 1.3;
+    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 36px);
+  }
+
+  .pa-block__count{
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+    padding: 0 10px;
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 999px;
+    font-size: 12px;
+    line-height: 1.2;
+    opacity: .78;
+    white-space: nowrap;
+    background: rgba(127,127,127,0.04);
   }
 
   .pa-block__intro{
@@ -1181,160 +864,222 @@ const translationCount = casIaEntries.length;
     opacity: .82;
   }
 
-  .pa-section--final{
-    margin-top: 42px;
+  .pa-theory-hub{
+    display: grid;
+    gap: 12px;
+    margin-top: 14px;
+    padding: 18px 20px;
+    border: 1px solid rgba(127,127,127,0.20);
+    border-radius: 22px;
+    background:
+      linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.04)),
+      radial-gradient(700px 180px at 12% 0%, rgba(0,217,255,0.06), transparent 62%),
+      rgba(127,127,127,0.04);
   }
 
-  .pa-aside{
+  .pa-theory-hub__top{
     display: flex;
-    flex-direction: column;
-    gap: 14px;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
   }
 
-  .pa-aside__block{
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 12px;
-    background: rgba(127,127,127,0.05);
+  .pa-theory-hub__head{
+    display: grid;
+    gap: 6px;
   }
 
-  .pa-aside__back{
-    display: inline-block;
-    margin-bottom: 8px;
-    font-size: 13px;
-    font-weight: 700;
-    text-decoration: none;
-  }
-
-  .pa-aside__title{
-    font-size: 14px;
-    font-weight: 800;
-    letter-spacing: .2px;
-    line-height: 1.25;
-  }
-
-  .pa-aside__meta{
-    margin-top: 8px;
+  .pa-theory-hub__eyebrow{
     font-size: 12px;
-    line-height: 1.35;
-    opacity: .78;
-  }
-
-  .pa-aside__heading{
-    margin: 0 0 10px;
-    font-size: 13px;
     font-weight: 800;
-    opacity: .9;
+    letter-spacing: .08em;
+    text-transform: uppercase;
+    opacity: .72;
   }
 
-  .pa-aside__list{
-    list-style: none;
+  .pa-theory-hub h3{
     margin: 0;
-    padding: 0;
+    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
+    line-height: 1.2;
   }
 
-  .pa-aside__list li{
-    margin: 6px 0;
-  }
-
-  .pa-aside__list a{
-    text-decoration: none;
-    font-size: 13px;
-    line-height: 1.3;
-  }
-
-  :global(body.is-paradigme-archicratique-page #reading-follow){
-    z-index: 10;
-  }
-
-  :global(body.is-paradigme-archicratique-page.pa-follow-on .pa-hero){
-    margin-bottom: 0;
-    padding: 12px 16px 14px;
-    row-gap: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :global(body.is-paradigme-archicratique-page.pa-follow-on .pa-hero h1){
-    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
-  }
-
-  :global(body.is-paradigme-archicratique-page.pa-follow-on .pa-intro){
-    max-width: 68ch;
-    font-size: .98rem;
-    line-height: 1.48;
-  }
-
-  :global(body.is-paradigme-archicratique-page.pa-follow-on:not(.pa-hero-expanded) .pa-hero-more){
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  :global(body.is-paradigme-archicratique-page.pa-follow-on:not(.pa-hero-expanded) .pa-hero-toggle){
+  .pa-theory-hub__count{
     display: inline-flex;
+    align-items: center;
+    min-height: 28px;
+    padding: 0 11px;
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 999px;
+    background: rgba(127,127,127,0.04);
+    font-size: 12px;
+    line-height: 1.2;
+    opacity: .82;
+    white-space: nowrap;
   }
 
-  :global(body.is-paradigme-archicratique-page.pa-follow-on #reading-follow .reading-follow__inner){
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+  .pa-theory-hub__intro{
+    margin: 0;
+    max-width: 78ch;
+    font-size: 14px;
+    line-height: 1.55;
+    opacity: .94;
   }
 
-  :global(body.is-paradigme-archicratique-page .pa-section__head.is-sticky),
-  :global(body.is-paradigme-archicratique-page .pa-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;
+  .pa-theory-hub__toolbar{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
   }
 
-  @media (max-width: 860px){
-    .pa-hero{
-      position: static;
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
+  .pa-theory-hub__chips{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .pa-chip{
+    display: inline-flex;
+    align-items: center;
+    min-height: 30px;
+    padding: 0 11px;
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 999px;
+    background: rgba(127,127,127,0.05);
+    font-size: 12px;
+    line-height: 1.2;
+    opacity: .9;
+    white-space: nowrap;
+  }
+
+  .pa-chip--link{
+    text-decoration: none;
+    transition:
+      transform 120ms ease,
+      border-color 120ms ease,
+      background 120ms ease,
+      opacity 120ms ease;
+  }
+
+  .pa-chip--link:hover{
+    transform: translateY(-1px);
+    border-color: rgba(0,217,255,0.22);
+    background: rgba(0,217,255,0.06);
+    opacity: 1;
+    text-decoration: none;
+  }
+
+  .pa-chip--link:focus-visible{
+    outline: 2px solid rgba(0,217,255,0.28);
+    outline-offset: 3px;
+  }
+
+  .pa-theory-button{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 38px;
+    padding: 0 14px;
+    border: 1px solid rgba(0,217,255,0.24);
+    border-radius: 999px;
+    background:
+      linear-gradient(180deg, rgba(0,217,255,0.10), rgba(0,217,255,0.04)),
+      rgba(127,127,127,0.06);
+    box-shadow:
+      inset 0 1px 0 rgba(255,255,255,0.05),
+      0 0 0 1px rgba(0,217,255,0.04);
+    text-decoration: none;
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: .01em;
+    white-space: nowrap;
+    transition:
+      transform 120ms ease,
+      background 120ms ease,
+      border-color 120ms ease,
+      box-shadow 120ms ease;
+  }
+
+  .pa-theory-button:hover{
+    transform: translateY(-1px);
+    border-color: rgba(0,217,255,0.34);
+    background:
+      linear-gradient(180deg, rgba(0,217,255,0.14), rgba(0,217,255,0.06)),
+      rgba(127,127,127,0.08);
+    box-shadow:
+      inset 0 1px 0 rgba(255,255,255,0.06),
+      0 0 0 1px rgba(0,217,255,0.08),
+      0 10px 28px rgba(0,0,0,0.18);
+    text-decoration: none;
+  }
+
+  .pa-theory-button:focus-visible{
+    outline: 2px solid rgba(0,217,255,0.28);
+    outline-offset: 4px;
+  }
+
+  @media (max-width: 900px){
+    .pa-theory-hub__toolbar{
+      align-items: stretch;
     }
 
-    .pa-intro{
-      max-width: none;
+    .pa-theory-button{
+      width: 100%;
     }
+  }
 
-    .pa-hero-more{
-      max-height: none;
-      opacity: 1;
-      overflow: visible;
-    }
-
-    .pa-hero-toggle{
-      display: none !important;
-    }
-
-    :global(body.is-paradigme-archicratique-page.pa-follow-on .pa-hero){
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
+  @media (max-width: 720px){
+    .pa-theory-hub{
+      padding: 16px;
+      border-radius: 18px;
     }
   }
 
   @media (prefers-color-scheme: dark){
     .pa-focus-card,
     .pa-card,
-    .pa-note-card,
-    .pa-aside__block{
+    .pa-note-card{
+      background: rgba(255,255,255,0.04);
+    }
+
+    .pa-block--panel{
+      background:
+        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
+        rgba(255,255,255,0.025);
+    }
+
+    .pa-theory-hub{
+      background:
+        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
+        radial-gradient(700px 180px at 12% 0%, rgba(0,217,255,0.08), transparent 62%),
+        rgba(255,255,255,0.025);
+    }
+
+    .pa-chip{
       background: rgba(255,255,255,0.04);
     }
 
     .pa-card:hover{
       background: rgba(255,255,255,0.07);
     }
+
+    .pa-chip--link:hover{
+      background: rgba(0,217,255,0.08);
+    }
+
+    .pa-theory-button{
+      background:
+        linear-gradient(180deg, rgba(0,217,255,0.12), rgba(0,217,255,0.05)),
+        rgba(255,255,255,0.04);
+    }
+
+    .pa-theory-button:hover{
+      background:
+        linear-gradient(180deg, rgba(0,217,255,0.16), rgba(0,217,255,0.07)),
+        rgba(255,255,255,0.06);
+    }
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/glossaire/paradigmes.astro b/src/pages/glossaire/paradigmes.astro
index 7364f29..5ee36d1 100644
--- a/src/pages/glossaire/paradigmes.astro
+++ b/src/pages/glossaire/paradigmes.astro
@@ -1,12 +1,16 @@
 ---
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
+import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
+import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
+import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
+import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
 import { getCollection } from "astro:content";
+import { hrefOfGlossaryEntry } from "../../lib/glossary";
 
 const entries = await getCollection("glossaire");
 
 const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
-const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
-const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
+const hrefOf = hrefOfGlossaryEntry;
 
 function sortByTerm(list = []) {
   return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
@@ -22,6 +26,51 @@ const doctrines = sortByTerm(
 
 const doctrinesCount = doctrines.length;
 const paradigmesCount = paradigmes.length;
+
+const pageItems = [
+  ...(doctrines.length > 0
+    ? [{ href: "#doctrines", label: "Doctrines fondatrices" }]
+    : []),
+  ...(paradigmes.length > 0
+    ? [{ href: "#paradigmes", label: "Paradigmes régulateurs" }]
+    : []),
+  { href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
+];
+
+const usefulLinks = [
+  { href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" },
+  { href: "/glossaire/scenes-archicratiques/", label: "Scènes archicratiques" },
+  { href: "/glossaire/archicrations/", label: "Méta-régimes archicratiques" },
+  { href: "/glossaire/dynamiques-archicratiques/", label: "Dynamiques archicratiques" },
+  { href: "/glossaire/index-complet/", label: "Index complet" },
+];
+
+const prolongerLinks = [
+  {
+    href: "/glossaire/concepts-fondamentaux/",
+    title: "Concepts fondamentaux",
+    text:
+      "Revenir au noyau minimal : arcalité, cratialité, tension, archicration, co-viabilité, archicratie.",
+  },
+  {
+    href: "/glossaire/scenes-archicratiques/",
+    title: "Scènes archicratiques",
+    text:
+      "Comprendre où les architectures de régulation deviennent visibles, disputables et révisables.",
+  },
+  {
+    href: "/glossaire/archicrations/",
+    title: "Méta-régimes archicratiques",
+    text:
+      "Parcourir les grandes formes de co-viabilité et leurs modulations historiques.",
+  },
+  {
+    href: "/glossaire/index-complet/",
+    title: "Index complet",
+    text:
+      "Retrouver l’ensemble des entrées du glossaire dans une navigation alphabétique intégrale.",
+  },
+];
 ---
 
 <GlossaryLayout
@@ -30,111 +79,64 @@ const paradigmesCount = paradigmes.length;
   stickyMode="glossary-portal"
 >
   <Fragment slot="aside">
-    <nav class="theo-aside" aria-label="Navigation des paradigmes et doctrines">
-      <div class="theo-aside__block">
-        <a class="theo-aside__back" href="/glossaire/">← Retour au glossaire</a>
-        <div class="theo-aside__title">Paradigmes et doctrines</div>
-        <div class="theo-aside__meta">
-          doctrines fondatrices · paradigmes régulateurs
-        </div>
-      </div>
-
-      <div class="theo-aside__block">
-        <h2 class="theo-aside__heading">Dans cette page</h2>
-        <ul class="theo-aside__list">
-          {doctrines.length > 0 && (
-            <li><a href="#doctrines">Doctrines fondatrices</a></li>
-          )}
-          {paradigmes.length > 0 && (
-            <li><a href="#paradigmes">Paradigmes régulateurs</a></li>
-          )}
-          <li><a href="#prolonger-la-lecture">Prolonger la lecture</a></li>
-        </ul>
-      </div>
-
-      <div class="theo-aside__block">
-        <h2 class="theo-aside__heading">Renvois utiles</h2>
-        <ul class="theo-aside__list">
-          <li><a href="/glossaire/concepts-fondamentaux/">Concepts fondamentaux</a></li>
-          <li><a href="/glossaire/scenes-archicratiques/">Scènes archicratiques</a></li>
-          <li><a href="/glossaire/archicrations/">Méta-régimes archicratiques</a></li>
-          <li><a href="/glossaire/dynamiques-archicratiques/">Dynamiques archicratiques</a></li>
-          <li><a href="/glossaire/index-complet/">Index complet</a></li>
-        </ul>
-      </div>
-    </nav>
+    <GlossaryPortalAside
+      ariaLabel="Navigation des paradigmes et doctrines"
+      title="Paradigmes et doctrines"
+      meta="doctrines fondatrices · paradigmes régulateurs"
+      pageItems={pageItems}
+      usefulLinks={usefulLinks}
+    />
   </Fragment>
 
-  <section class="theo-page" data-theo-page>
-    <div class="theo-hero glossary-page-hero" data-theo-hero>
-      <p class="theo-kicker">Cartographie théorique</p>
-      <h1>Paradigmes et doctrines</h1>
+  <section class="theo-page">
+    <GlossaryPortalHero
+      prefix="theo"
+      kicker="Cartographie théorique"
+      title="Paradigmes et doctrines"
+      intro="L’archicratie ne se déploie pas dans le vide. Elle s’inscrit dans un paysage intellectuel plus large où se croisent des doctrines fondatrices de l’ordre et des paradigmes de régulation des collectifs."
+      moreParagraphs={[
+        "On appellera ici doctrines fondatrices les formulations qui posent un principe premier de légitimité, de souveraineté ou d’ordre politique. On appellera paradigmes régulateurs les cadres théoriques qui décrivent des modes de tenue, de conflictualité, d’administration, de reproduction ou de transformation des sociétés.",
+      ]}
+      introMaxWidth="72ch"
+      followIntroMaxWidth="68ch"
+      moreMaxHeight="18rem"
+    />
 
-      <p class="theo-intro">
-        L’archicratie ne se déploie pas dans le vide. Elle s’inscrit dans un
-        paysage intellectuel plus large où se croisent des doctrines
-        fondatrices de l’ordre et des paradigmes de régulation des collectifs.
-      </p>
-
-      <div class="theo-hero-collapsible">
-        <div
-          class="theo-hero-more"
-          id="theo-hero-more"
-          data-theo-more
-          aria-hidden="false"
-        >
-          <p class="theo-intro">
-            On appellera ici <strong>doctrines fondatrices</strong> les formulations
-            qui posent un principe premier de légitimité, de souveraineté ou d’ordre
-            politique. On appellera <strong>paradigmes régulateurs</strong> les
-            cadres théoriques qui décrivent des modes de tenue, de conflictualité,
-            d’administration, de reproduction ou de transformation des sociétés.
-          </p>
-        </div>
-
-        <button
-          class="theo-hero-toggle"
-          id="theo-hero-toggle"
-          data-theo-more-toggle
-          type="button"
-          aria-controls="theo-hero-more"
-          aria-expanded="false"
-          hidden
-        >
-          lire la suite
-        </button>
-      </div>
+    <div class="theo-overview" aria-label="Repères de lecture théorique">
+      <article class="theo-overview__item">
+        <strong>Doctrines fondatrices</strong>
+        <span>Principes premiers de légitimité, de souveraineté et de fondation de l’ordre.</span>
+      </article>
+      <article class="theo-overview__item">
+        <strong>Paradigmes régulateurs</strong>
+        <span>Cadres décrivant la tenue, le conflit, l’administration ou la transformation des collectifs.</span>
+      </article>
+      <article class="theo-overview__item">
+        <strong>Portée comparative</strong>
+        <span>Le paysage dans lequel l’archicratie situe ses proximités, ses écarts et sa singularité.</span>
+      </article>
     </div>
 
     {doctrines.length > 0 && (
-      <section class="theo-section">
-        <div class="theo-section__head">
-          <h2 id="doctrines">Doctrines fondatrices</h2>
-          <span class="theo-section__count">
-            {doctrinesCount} entrée{doctrinesCount > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="theo-section__intro">
-          Ces doctrines posent un principe premier d’autorité, de légitimité ou
-          d’ordre collectif. Elles servent de points de comparaison pour penser
-          ce qui, dans une régulation, relève de la fondation, de la souveraineté
-          ou du principe architectonique initial.
-        </p>
-
+      <GlossaryPortalSection
+        id="doctrines"
+        title="Doctrines fondatrices"
+        count={`${doctrinesCount} entrée${doctrinesCount > 1 ? "s" : ""}`}
+        intro="Ces doctrines posent un principe premier d’autorité, de légitimité ou d’ordre collectif. Elles servent de points de comparaison pour penser ce qui, dans une régulation, relève de la fondation, de la souveraineté ou du principe architectonique initial."
+      >
         <div class="theo-cards">
           {doctrines.map((entry) => (
             <a class="theo-card" href={hrefOf(entry)}>
               <strong>{entry.data.term}</strong>
               <span>{entry.data.definitionShort}</span>
 
-              {entry.data.mobilizedAuthors?.length > 0 && (
+              {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
                 <small>
                   Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
                 </small>
               )}
 
-              {entry.data.comparisonTraditions?.length > 0 && (
+              {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                 <small>
                   Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                 </small>
@@ -142,38 +144,29 @@ const paradigmesCount = paradigmes.length;
             </a>
           ))}
         </div>
-      </section>
+      </GlossaryPortalSection>
     )}
 
     {paradigmes.length > 0 && (
-      <section class="theo-section">
-        <div class="theo-section__head">
-          <h2 id="paradigmes">Paradigmes régulateurs</h2>
-          <span class="theo-section__count">
-            {paradigmesCount} entrée{paradigmesCount > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="theo-section__intro">
-          Ces paradigmes décrivent des formes de conflictualité, de gouvernement,
-          de régulation, de reproduction ou de transformation des collectifs.
-          Ils constituent le champ théorique au sein duquel l’archicratie entre
-          en discussion, se compare et précise sa singularité.
-        </p>
-
+      <GlossaryPortalSection
+        id="paradigmes"
+        title="Paradigmes régulateurs"
+        count={`${paradigmesCount} entrée${paradigmesCount > 1 ? "s" : ""}`}
+        intro="Ces paradigmes décrivent des formes de conflictualité, de gouvernement, de régulation, de reproduction ou de transformation des collectifs. Ils constituent le champ théorique au sein duquel l’archicratie entre en discussion, se compare et précise sa singularité."
+      >
         <div class="theo-cards">
           {paradigmes.map((entry) => (
             <a class="theo-card" href={hrefOf(entry)}>
               <strong>{entry.data.term}</strong>
               <span>{entry.data.definitionShort}</span>
 
-              {entry.data.mobilizedAuthors?.length > 0 && (
+              {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
                 <small>
                   Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
                 </small>
               )}
 
-              {entry.data.comparisonTraditions?.length > 0 && (
+              {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                 <small>
                   Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                 </small>
@@ -181,58 +174,29 @@ const paradigmesCount = paradigmes.length;
             </a>
           ))}
         </div>
-      </section>
+      </GlossaryPortalSection>
     )}
 
-    <section class="theo-section">
-      <div class="theo-section__head">
-        <h2 id="prolonger-la-lecture">Prolonger la lecture</h2>
-      </div>
-
-      <p class="theo-section__intro">
-        Cette page sert de portail entre la cartographie théorique générale et
-        les autres ensembles du glossaire. Elle permet de relier les doctrines
-        et paradigmes aux scènes, aux dynamiques, aux méta-régimes et au noyau
-        conceptuel archicratique.
-      </p>
-
+    <GlossaryPortalSection
+      id="prolonger-la-lecture"
+      title="Prolonger la lecture"
+      intro="Cette page sert de portail entre la cartographie théorique générale et les autres ensembles du glossaire. Elle permet de relier les doctrines et paradigmes aux scènes, aux dynamiques, aux méta-régimes et au noyau conceptuel archicratique."
+    >
       <div class="theo-cards">
-        <a class="theo-card" href="/glossaire/concepts-fondamentaux/">
-          <strong>Concepts fondamentaux</strong>
-          <span>
-            Revenir au noyau minimal : arcalité, cratialité, tension,
-            archicration, co-viabilité, archicratie.
-          </span>
-        </a>
-
-        <a class="theo-card" href="/glossaire/scenes-archicratiques/">
-          <strong>Scènes archicratiques</strong>
-          <span>
-            Comprendre où les architectures de régulation deviennent visibles,
-            disputables et révisables.
-          </span>
-        </a>
-
-        <a class="theo-card" href="/glossaire/archicrations/">
-          <strong>Méta-régimes archicratiques</strong>
-          <span>
-            Parcourir les grandes formes de co-viabilité et leurs modulations
-            historiques.
-          </span>
-        </a>
-
-        <a class="theo-card" href="/glossaire/index-complet/">
-          <strong>Index complet</strong>
-          <span>
-            Retrouver l’ensemble des entrées du glossaire dans une navigation
-            alphabétique intégrale.
-          </span>
-        </a>
+        {prolongerLinks.map((item) => (
+          <a class="theo-card" href={item.href}>
+            <strong>{item.title}</strong>
+            <span>{item.text}</span>
+          </a>
+        ))}
       </div>
-    </section>
+    </GlossaryPortalSection>
 
-    <section class="theo-section theo-section--final">
-      <h2>Portée d’ensemble</h2>
+    <GlossaryPortalSection
+      id="portee-densemble"
+      title="Portée d’ensemble"
+      final={true}
+    >
       <p>
         Lire doctrines et paradigmes ensemble permet de situer l’archicratie
         dans un espace comparatif plus vaste. Les doctrines éclairent les formes
@@ -241,232 +205,13 @@ const paradigmesCount = paradigmes.length;
         alors non comme un isolat conceptuel, mais comme une intelligibilité
         régulatrice située dans un paysage théorique dense et disputé.
       </p>
-    </section>
+    </GlossaryPortalSection>
   </section>
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const hero = document.querySelector("[data-theo-hero]");
-        const follow = document.getElementById("reading-follow");
-        const heroMore = document.getElementById("theo-hero-more");
-        const heroToggle = document.getElementById("theo-hero-toggle");
-
-        if (!body || !root || !hero || !follow) return;
-
-        const BODY_CLASS = "is-paradigmes-page";
-        const FOLLOW_ON_CLASS = "theo-follow-on";
-        const EXPANDED_CLASS = "theo-hero-expanded";
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const AUTO_COLLAPSE_DELTA = 160;
-
-        let expandedAtY = null;
-        let lastScrollY = window.scrollY || 0;
-
-        body.classList.add(BODY_CLASS);
-
-        const heroHeight = () =>
-          Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
-
-        const stripLocalSticky = () => {
-          document.querySelectorAll(".theo-section__head").forEach((el) => {
-            el.classList.remove("is-sticky");
-            el.removeAttribute("data-sticky-active");
-          });
-        };
-
-        const computeFollowOn = () =>
-          !mqMobile.matches &&
-          follow.classList.contains("is-on") &&
-          follow.style.display !== "none" &&
-          follow.getAttribute("aria-hidden") !== "true";
-
-        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 on = computeFollowOn();
-          body.classList.toggle(FOLLOW_ON_CLASS, on);
-          return on;
-        };
-
-        const collapseHero = () => {
-          if (!body.classList.contains(EXPANDED_CLASS)) return;
-
-          body.classList.remove(EXPANDED_CLASS);
-          expandedAtY = null;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "true");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = false;
-            heroToggle.setAttribute("aria-expanded", "false");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const expandHero = () => {
-          body.classList.add(EXPANDED_CLASS);
-          expandedAtY = window.scrollY || 0;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = true;
-            heroToggle.setAttribute("aria-expanded", "true");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const syncHeroState = () => {
-          const followOn = computeFollowOn();
-          const expanded = body.classList.contains(EXPANDED_CLASS);
-          const collapsed = followOn && !expanded;
-
-          if (!followOn || mqMobile.matches) {
-            body.classList.remove(EXPANDED_CLASS);
-            expandedAtY = null;
-
-            if (heroMore) {
-              heroMore.setAttribute("aria-hidden", "false");
-            }
-
-            if (heroToggle) {
-              heroToggle.hidden = true;
-              heroToggle.setAttribute("aria-expanded", "false");
-            }
-
-            return;
-          }
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", collapsed ? "true" : "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = !collapsed;
-            heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
-          }
-        };
-
-        const maybeAutoCollapseOnScroll = () => {
-          if (mqMobile.matches) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!computeFollowOn()) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!body.classList.contains(EXPANDED_CLASS)) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (expandedAtY == null) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          const currentY = window.scrollY || 0;
-          const scrollingDown = currentY > lastScrollY;
-          const delta = currentY - expandedAtY;
-
-          if (scrollingDown && delta >= AUTO_COLLAPSE_DELTA) {
-            collapseHero();
-          }
-
-          lastScrollY = currentY;
-        };
-
-        const syncAll = () => {
-          stripLocalSticky();
-          syncFollowState();
-          syncHeroState();
-          applyLocalStickyHeight();
-        };
-
-        let raf = 0;
-        const schedule = () => {
-          if (raf) return;
-          raf = requestAnimationFrame(() => {
-            raf = 0;
-            requestAnimationFrame(syncAll);
-          });
-        };
-
-        heroToggle?.addEventListener("click", () => {
-          expandHero();
-        });
-
-        const onScroll = () => {
-          maybeAutoCollapseOnScroll();
-          schedule();
-        };
-
-        const followObserver = new MutationObserver(schedule);
-        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("scroll", onScroll, { passive: true });
-        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>
+  <GlossaryPortalStickySync
+    heroMoreId="theo-hero-more"
+    heroToggleId="theo-hero-toggle"
+  />
 </GlossaryLayout>
 
 <style>
@@ -474,137 +219,31 @@ const paradigmesCount = paradigmes.length;
     padding: 8px 0 24px;
   }
 
-  .theo-hero{
-    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);
+  .theo-overview{
     display: grid;
-    row-gap: 14px;
-    transition:
-      margin-bottom 180ms ease,
-      border-radius 180ms ease,
-      padding 180ms ease,
-      row-gap 180ms ease;
-  }
-
-  .theo-kicker{
-    margin: 0;
-    font-size: 12px;
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    opacity: .72;
-  }
-
-  .theo-hero h1{
-    margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
-    line-height: 1.02;
-    letter-spacing: -.04em;
-    font-weight: 850;
-    transition: font-size 180ms ease;
-  }
-
-  .theo-intro{
-    margin: 0;
-    max-width: 72ch;
-    font-size: 1.04rem;
-    line-height: 1.55;
-    opacity: .94;
-    transition:
-      font-size 180ms ease,
-      line-height 180ms ease,
-      max-width 180ms ease;
-  }
-
-  .theo-hero-collapsible{
-    display: grid;
-    row-gap: 6px;
-  }
-
-  .theo-hero-more{
-    display: grid;
-    row-gap: 14px;
-    max-height: 18rem;
-    overflow: hidden;
-    opacity: 1;
-    transition:
-      max-height 220ms ease,
-      opacity 180ms ease;
-  }
-
-  .theo-hero-toggle{
-    display: none;
-    align-self: flex-start;
-    width: fit-content;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 11px;
-    line-height: 1.2;
-    letter-spacing: .01em;
-    text-transform: none;
-    opacity: .56;
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: .12em;
-    text-decoration-thickness: 1px;
-  }
-
-  .theo-hero-toggle:hover{
-    opacity: .84;
-  }
-
-  .theo-hero-toggle:focus-visible{
-    outline: 2px solid rgba(0,217,255,0.24);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  .theo-hero-toggle[hidden]{
-    display: none !important;
-  }
-
-  .theo-section{
-    margin-top: 34px;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .theo-section h2{
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .theo-section__head{
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 12px;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
-    position: static;
+    margin: 18px 0 8px;
   }
 
-  .theo-section__count{
+  .theo-overview__item{
+    display: grid;
+    gap: 6px;
+    padding: 14px 16px;
+    border: 1px solid rgba(127,127,127,0.20);
+    border-radius: 16px;
+    background: rgba(127,127,127,0.04);
+  }
+
+  .theo-overview__item strong{
+    font-size: 14px;
+    line-height: 1.3;
+  }
+
+  .theo-overview__item span{
     font-size: 13px;
-    opacity: .72;
-    white-space: nowrap;
-  }
-
-  .theo-section__intro{
-    max-width: 78ch;
-    margin: 0;
-    opacity: .92;
+    line-height: 1.45;
+    opacity: .86;
   }
 
   .theo-cards{
@@ -650,153 +289,15 @@ const paradigmesCount = paradigmes.length;
     opacity: .72;
   }
 
-  .theo-section--final{
-    margin-top: 42px;
-  }
-
-  .theo-aside{
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-  }
-
-  .theo-aside__block{
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 12px;
-    background: rgba(127,127,127,0.05);
-  }
-
-  .theo-aside__back{
-    display: inline-block;
-    margin-bottom: 8px;
-    font-size: 13px;
-    font-weight: 700;
-    text-decoration: none;
-  }
-
-  .theo-aside__title{
-    font-size: 14px;
-    font-weight: 800;
-    letter-spacing: .2px;
-    line-height: 1.25;
-  }
-
-  .theo-aside__meta{
-    margin-top: 8px;
-    font-size: 12px;
-    line-height: 1.35;
-    opacity: .78;
-  }
-
-  .theo-aside__heading{
-    margin: 0 0 10px;
-    font-size: 13px;
-    font-weight: 800;
-    opacity: .9;
-  }
-
-  .theo-aside__list{
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .theo-aside__list li{
-    margin: 6px 0;
-  }
-
-  .theo-aside__list a{
-    text-decoration: none;
-    font-size: 13px;
-    line-height: 1.3;
-  }
-
-  :global(body.is-paradigmes-page #reading-follow){
-    z-index: 10;
-  }
-
-  :global(body.is-paradigmes-page.theo-follow-on .theo-hero){
-    margin-bottom: 0;
-    padding: 12px 16px 14px;
-    row-gap: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :global(body.is-paradigmes-page.theo-follow-on .theo-hero h1){
-    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
-  }
-
-  :global(body.is-paradigmes-page.theo-follow-on .theo-intro){
-    max-width: 68ch;
-    font-size: .98rem;
-    line-height: 1.48;
-  }
-
-  :global(body.is-paradigmes-page.theo-follow-on:not(.theo-hero-expanded) .theo-hero-more){
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  :global(body.is-paradigmes-page.theo-follow-on:not(.theo-hero-expanded) .theo-hero-toggle){
-    display: inline-flex;
-  }
-
-  :global(body.is-paradigmes-page.theo-follow-on #reading-follow .reading-follow__inner){
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  :global(body.is-paradigmes-page .theo-section__head.is-sticky),
-  :global(body.is-paradigmes-page .theo-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){
-    .theo-hero{
-      position: static;
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
-    }
-
-    .theo-intro{
-      max-width: none;
-    }
-
-    .theo-hero-more{
-      max-height: none;
-      opacity: 1;
-      overflow: visible;
-    }
-
-    .theo-hero-toggle{
-      display: none !important;
-    }
-
-    :global(body.is-paradigmes-page.theo-follow-on .theo-hero){
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
+  @media (max-width: 920px){
+    .theo-overview{
+      grid-template-columns: 1fr;
     }
   }
 
   @media (prefers-color-scheme: dark){
-    .theo-card,
-    .theo-aside__block{
+    .theo-overview__item,
+    .theo-card{
       background: rgba(255,255,255,0.04);
     }
 
diff --git a/src/pages/glossaire/scenes-archicratiques.astro b/src/pages/glossaire/scenes-archicratiques.astro
index 68af976..47fa1fd 100644
--- a/src/pages/glossaire/scenes-archicratiques.astro
+++ b/src/pages/glossaire/scenes-archicratiques.astro
@@ -1,14 +1,26 @@
 ---
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
+import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
+import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
+import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
+import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
 import { getCollection } from "astro:content";
+import {
+  buildGlossaryBySlug,
+  hrefOfGlossaryEntry,
+} from "../../lib/glossary";
 
 const entries = await getCollection("glossaire");
 
-const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
-const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
+const collator = new Intl.Collator("fr", {
+  sensitivity: "base",
+  numeric: true,
+});
 
-const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
-const bySlug = new Map(entries.map((entry) => [slugOf(entry), entry]));
+const bySlug = buildGlossaryBySlug(entries);
+const hrefOf = hrefOfGlossaryEntry;
+
+const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
 
 function sortByTerm(list = []) {
   return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
@@ -23,12 +35,14 @@ function resolveEntries(slugs = []) {
 function uniqueBySlug(list = []) {
   const seen = new Set();
   const out = [];
+
   for (const entry of list) {
     const slug = slugOf(entry);
     if (seen.has(slug)) continue;
     seen.add(slug);
     out.push(entry);
   }
+
   return out;
 }
 
@@ -61,7 +75,56 @@ const otherEntries = sortByTerm(
 
 const mobilizedAuthors = sceneDepreuve?.data?.mobilizedAuthors ?? [];
 const comparisonTraditions = sceneDepreuve?.data?.comparisonTraditions ?? [];
+
+const structuralCount = structuralEntries.length;
 const constellationCount = relatedEntries.length;
+const otherCount = otherEntries.length;
+const paradigmCount = paradigmEntries.length;
+
+const pageItems = [
+  { href: "#coeur-de-notion", label: "Cœur de notion" },
+  ...(structuralEntries.length > 0
+    ? [{ href: "#articulations-essentielles", label: "Articulations essentielles" }]
+    : []),
+  ...(relatedEntries.length > 0
+    ? [{ href: "#constellation-theorique", label: "Constellation théorique" }]
+    : []),
+  { href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
+];
+
+const usefulLinks = [
+  { href: "/glossaire/tension/", label: "Tension" },
+  { href: "/glossaire/archicration/", label: "Archicration" },
+  { href: "/glossaire/archicratie/", label: "Archicratie" },
+  { href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" },
+  { href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
+];
+
+const prolongerLinks = [
+  {
+    href: "/glossaire/",
+    title: "Accueil du glossaire",
+    text: "Revenir à la cartographie générale du système archicratique.",
+  },
+  {
+    href: "/glossaire/concepts-fondamentaux/",
+    title: "Concepts fondamentaux",
+    text:
+      "Repartir du noyau conceptuel minimal : arcalité, cratialité, tension, archicration, co-viabilité, archicratie.",
+  },
+  {
+    href: "/glossaire/paradigmes/",
+    title: "Paradigmes et doctrines",
+    text:
+      "Situer la scène archicratique dans son paysage de comparaison théorique.",
+  },
+  {
+    href: "/glossaire/index-complet/",
+    title: "Index complet",
+    text:
+      "Retrouver toutes les entrées du glossaire dans l’ordre alphabétique.",
+  },
+];
 ---
 
 <GlossaryLayout
@@ -70,93 +133,34 @@ const constellationCount = relatedEntries.length;
   stickyMode="glossary-portal"
 >
   <Fragment slot="aside">
-    <nav class="scene-aside" aria-label="Navigation des scènes archicratiques">
-      <div class="scene-aside__block">
-        <a class="scene-aside__back" href="/glossaire/">← Retour au glossaire</a>
-        <div class="scene-aside__title">Scènes archicratiques</div>
-        <div class="scene-aside__meta">
-          {sceneDepreuve ? "1 notion-pivot" : "Portail en cours de constitution"}
-        </div>
-      </div>
-
-      <div class="scene-aside__block">
-        <h2 class="scene-aside__heading">Dans cette page</h2>
-        <ul class="scene-aside__list">
-          <li><a href="#coeur-de-notion">Cœur de notion</a></li>
-          {structuralEntries.length > 0 && (
-            <li><a href="#articulations-essentielles">Articulations essentielles</a></li>
-          )}
-          {relatedEntries.length > 0 && (
-            <li><a href="#constellation-theorique">Constellation théorique</a></li>
-          )}
-          <li><a href="#prolonger-la-lecture">Prolonger la lecture</a></li>
-        </ul>
-      </div>
-
-      <div class="scene-aside__block">
-        <h2 class="scene-aside__heading">Renvois utiles</h2>
-        <ul class="scene-aside__list">
-          <li><a href="/glossaire/tension/">Tension</a></li>
-          <li><a href="/glossaire/archicration/">Archicration</a></li>
-          <li><a href="/glossaire/archicratie/">Archicratie</a></li>
-          <li><a href="/glossaire/concepts-fondamentaux/">Concepts fondamentaux</a></li>
-          <li><a href="/glossaire/paradigmes/">Paradigmes et doctrines</a></li>
-        </ul>
-      </div>
-    </nav>
+    <GlossaryPortalAside
+      ariaLabel="Navigation des scènes archicratiques"
+      title="Scènes archicratiques"
+      meta={sceneDepreuve ? "1 notion-pivot" : "Portail en cours de constitution"}
+      pageItems={pageItems}
+      usefulLinks={usefulLinks}
+    />
   </Fragment>
 
-  <section class="scene-page" data-scene-page>
-  <div class="scene-hero glossary-page-hero" data-scene-hero>
-    <p class="scene-kicker">Parcours du glossaire</p>
-    <h1>Scènes archicratiques</h1>
-
-    <p class="scene-intro">
-      Les scènes archicratiques désignent les espaces de comparution,
-      d’exposition, de contestation et de révision par lesquels une
-      architecture régulatrice cesse d’être purement opaque pour devenir
-      visible, discutable et transformable.
-    </p>
-
-    <div class="scene-hero-collapsible">
-      <div
-        class="scene-hero-more"
-        id="scene-hero-more"
-        data-scene-more
-        aria-hidden="false"
-      >
-        <p class="scene-intro">
-          Dans l’économie générale du paradigme, elles sont ce qui empêche la
-          régulation de se refermer sur elle-même. Elles ouvrent un espace où les
-          tensions peuvent apparaître, être qualifiées, disputées et réorganisées.
-        </p>
-      </div>
-
-      <button
-        class="scene-hero-toggle"
-        id="scene-hero-toggle"
-        data-scene-more-toggle
-        type="button"
-        aria-controls="scene-hero-more"
-        aria-expanded="false"
-        hidden
-      >
-        lire la suite
-      </button>
-    </div>
-  </div>
-
-    <section class="scene-section">
-      <div class="scene-section__head">
-        <h2 id="coeur-de-notion">Cœur de notion</h2>
-      </div>
-
-      <p class="scene-section__intro">
-        Cette page prend pour pivot la <strong>scène d’épreuve</strong>, notion
-        centrale pour penser l’exposition publique, la mise en discussion et la
-        révisabilité des architectures de régulation.
-      </p>
+  <section class="scene-page">
+    <GlossaryPortalHero
+      prefix="scene"
+      kicker="Parcours du glossaire"
+      title="Scènes archicratiques"
+      intro="Les scènes archicratiques désignent les espaces de comparution, d’exposition, de contestation et de révision par lesquels une architecture régulatrice cesse d’être purement opaque pour devenir visible, discutable et transformable."
+      moreParagraphs={[
+        "Dans l’économie générale du paradigme, elles sont ce qui empêche la régulation de se refermer sur elle-même. Elles ouvrent un espace où les tensions peuvent apparaître, être qualifiées, disputées et réorganisées.",
+      ]}
+      introMaxWidth="76ch"
+      followIntroMaxWidth="72ch"
+      moreMaxHeight="18rem"
+    />
 
+    <GlossaryPortalSection
+      id="coeur-de-notion"
+      title="Cœur de notion"
+      intro="Cette page prend pour pivot la scène d’épreuve, notion centrale pour penser l’exposition publique, la mise en discussion et la révisabilité des architectures de régulation."
+    >
       {sceneDepreuve ? (
         <article class="scene-focus-card">
           <div class="scene-focus-card__eyebrow">Entrée principale</div>
@@ -172,6 +176,7 @@ const constellationCount = relatedEntries.length;
                   <strong>Auteurs mobilisés :</strong> {mobilizedAuthors.join(" / ")}
                 </p>
               )}
+
               {comparisonTraditions.length > 0 && (
                 <p>
                   <strong>Traditions de comparaison :</strong> {comparisonTraditions.join(" / ")}
@@ -185,29 +190,22 @@ const constellationCount = relatedEntries.length;
           La fiche principale n’est pas encore disponible dans la collection.
         </p>
       )}
-    </section>
+    </GlossaryPortalSection>
 
     {structuralEntries.length > 0 && (
-      <section class="scene-section">
-        <div class="scene-section__head">
-          <h2 id="articulations-essentielles">Articulations essentielles</h2>
-          <span class="scene-section__count">
-            {structuralEntries.length} notion{structuralEntries.length > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="scene-section__intro">
-          La scène n’est pas une notion isolée. Elle s’articule au phénomène de
-          tension, à l’opérateur d’archicration et au méta-régime d’archicratie.
-        </p>
-
+      <GlossaryPortalSection
+        id="articulations-essentielles"
+        title="Articulations essentielles"
+        count={`${structuralCount} notion${structuralCount > 1 ? "s" : ""}`}
+        intro="La scène n’est pas une notion isolée. Elle s’articule au phénomène de tension, à l’opérateur d’archicration et au méta-régime d’archicratie."
+      >
         <div class="scene-cards">
           {structuralEntries.map((entry) => (
             <a class="scene-card" href={hrefOf(entry)}>
               <strong>{entry.data.term}</strong>
               <span>{entry.data.definitionShort}</span>
 
-              {entry.data.comparisonTraditions && (
+              {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                 <small>
                   Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                 </small>
@@ -215,34 +213,38 @@ const constellationCount = relatedEntries.length;
             </a>
           ))}
         </div>
-      </section>
+      </GlossaryPortalSection>
     )}
 
     {relatedEntries.length > 0 && (
-      <section class="scene-section">
-        <div class="scene-section__head">
-          <h2 id="constellation-theorique">Constellation théorique</h2>
-          <span class="scene-section__count">
-            {constellationCount} entrée{constellationCount > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="scene-section__intro">
-          Cette notion dialogue avec plusieurs diagnostics et paradigmes qui
-          permettent d’en préciser la portée politique, symbolique et
-          régulatrice.
-        </p>
-
+      <GlossaryPortalSection
+        id="constellation-theorique"
+        title="Constellation théorique"
+        count={`${constellationCount} entrée${constellationCount > 1 ? "s" : ""}`}
+        intro="Cette notion dialogue avec plusieurs diagnostics et paradigmes qui permettent d’en préciser la portée politique, symbolique et régulatrice."
+      >
         {otherEntries.length > 0 && (
-          <div class="scene-block">
-            <h3>Notions et diagnostics liés</h3>
+          <div class="scene-block scene-block--panel">
+            <div class="scene-block__head">
+              <h3 id="notions-et-diagnostics-lies">Notions et diagnostics liés</h3>
+              <span class="scene-block__count">
+                {otherCount} entrée{otherCount > 1 ? "s" : ""}
+              </span>
+            </div>
+
+            <p class="scene-block__intro">
+              Ces entrées prolongent la scène d’épreuve vers des questions
+              d’instituabilité, de fermeture, d’empêchement ou de visibilité
+              de la régulation.
+            </p>
+
             <div class="scene-cards">
               {otherEntries.map((entry) => (
                 <a class="scene-card" href={hrefOf(entry)}>
                   <strong>{entry.data.term}</strong>
                   <span>{entry.data.definitionShort}</span>
 
-                  {entry.data.comparisonTraditions && (
+                  {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                     <small>
                       Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                     </small>
@@ -254,15 +256,28 @@ const constellationCount = relatedEntries.length;
         )}
 
         {paradigmEntries.length > 0 && (
-          <div class="scene-block">
-            <h3>Paradigmes mobilisés</h3>
+          <div class="scene-block scene-block--panel">
+            <div class="scene-block__head">
+              <h3 id="paradigmes-mobilises">Paradigmes mobilisés</h3>
+              <span class="scene-block__count">
+                {paradigmCount} paradigme{paradigmCount > 1 ? "s" : ""}
+              </span>
+            </div>
+
+            <p class="scene-block__intro">
+              Ces paradigmes servent de points d’appui comparatifs pour mieux
+              comprendre ce qui, dans la scène archicratique, relève de la
+              conflictualité, de l’apparition publique ou de la mise en litige
+              de la régulation.
+            </p>
+
             <div class="scene-cards">
               {paradigmEntries.map((entry) => (
                 <a class="scene-card" href={hrefOf(entry)}>
                   <strong>{entry.data.term}</strong>
                   <span>{entry.data.definitionShort}</span>
 
-                  {entry.data.mobilizedAuthors?.length > 0 && (
+                  {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
                     <small>
                       Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
                     </small>
@@ -272,55 +287,29 @@ const constellationCount = relatedEntries.length;
             </div>
           </div>
         )}
-      </section>
+      </GlossaryPortalSection>
     )}
 
-    <section class="scene-section">
-      <div class="scene-section__head">
-        <h2 id="prolonger-la-lecture">Prolonger la lecture</h2>
-      </div>
-
-      <p class="scene-section__intro">
-        Cette page a vocation à devenir un portail intermédiaire entre l’accueil
-        du glossaire et les fiches détaillées. Elle prolonge la lecture vers les
-        autres parcours déjà stabilisés du système archicratique.
-      </p>
-
+    <GlossaryPortalSection
+      id="prolonger-la-lecture"
+      title="Prolonger la lecture"
+      intro="Cette page a vocation à devenir un portail intermédiaire entre l’accueil du glossaire et les fiches détaillées. Elle prolonge la lecture vers les autres parcours déjà stabilisés du système archicratique."
+    >
       <div class="scene-cards">
-        <a class="scene-card" href="/glossaire/">
-          <strong>Accueil du glossaire</strong>
-          <span>
-            Revenir à la cartographie générale du système archicratique.
-          </span>
-        </a>
-
-        <a class="scene-card" href="/glossaire/concepts-fondamentaux/">
-          <strong>Concepts fondamentaux</strong>
-          <span>
-            Repartir du noyau conceptuel minimal : arcalité, cratialité, tension,
-            archicration, co-viabilité, archicratie.
-          </span>
-        </a>
-
-        <a class="scene-card" href="/glossaire/paradigmes/">
-          <strong>Paradigmes et doctrines</strong>
-          <span>
-            Situer la scène archicratique dans son paysage de comparaison
-            théorique.
-          </span>
-        </a>
-
-        <a class="scene-card" href="/glossaire/index-complet/">
-          <strong>Index complet</strong>
-          <span>
-            Retrouver toutes les entrées du glossaire dans l’ordre alphabétique.
-          </span>
-        </a>
+        {prolongerLinks.map((item) => (
+          <a class="scene-card" href={item.href}>
+            <strong>{item.title}</strong>
+            <span>{item.text}</span>
+          </a>
+        ))}
       </div>
-    </section>
+    </GlossaryPortalSection>
 
-    <section class="scene-section scene-section--final">
-      <h2>Portée d’ensemble</h2>
+    <GlossaryPortalSection
+      id="portee-densemble"
+      title="Portée d’ensemble"
+      final={true}
+    >
       <p>
         Les scènes archicratiques rappellent que la régulation ne vaut jamais
         seulement par son efficacité interne. Elle doit aussi pouvoir paraître,
@@ -330,232 +319,13 @@ const constellationCount = relatedEntries.length;
         d’être pure opération pour devenir enjeu politique, symbolique et
         collectif.
       </p>
-    </section>
+    </GlossaryPortalSection>
   </section>
 
-<script is:inline>
-  (() => {
-    const boot = () => {
-      const body = document.body;
-      const root = document.documentElement;
-      const hero = document.querySelector("[data-scene-hero]");
-      const follow = document.getElementById("reading-follow");
-      const heroMore = document.getElementById("scene-hero-more");
-      const heroToggle = document.getElementById("scene-hero-toggle");
-
-      if (!body || !root || !hero || !follow) return;
-
-      const BODY_CLASS = "is-scenes-archicratiques-page";
-      const FOLLOW_ON_CLASS = "scene-follow-on";
-      const EXPANDED_CLASS = "scene-hero-expanded";
-      const mqMobile = window.matchMedia("(max-width: 860px)");
-      const AUTO_COLLAPSE_DELTA = 160;
-
-      let expandedAtY = null;
-      let lastScrollY = window.scrollY || 0;
-
-      body.classList.add(BODY_CLASS);
-
-      const heroHeight = () =>
-        Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
-
-      const stripLocalSticky = () => {
-        document.querySelectorAll(".scene-section__head").forEach((el) => {
-          el.classList.remove("is-sticky");
-          el.removeAttribute("data-sticky-active");
-        });
-      };
-
-      const computeFollowOn = () =>
-        !mqMobile.matches &&
-        follow.classList.contains("is-on") &&
-        follow.style.display !== "none" &&
-        follow.getAttribute("aria-hidden") !== "true";
-
-      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 on = computeFollowOn();
-        body.classList.toggle(FOLLOW_ON_CLASS, on);
-        return on;
-      };
-
-      const collapseHero = () => {
-        if (!body.classList.contains(EXPANDED_CLASS)) return;
-
-        body.classList.remove(EXPANDED_CLASS);
-        expandedAtY = null;
-
-        if (heroMore) {
-          heroMore.setAttribute("aria-hidden", "true");
-        }
-
-        if (heroToggle) {
-          heroToggle.hidden = false;
-          heroToggle.setAttribute("aria-expanded", "false");
-        }
-
-        try {
-          window.__archiUpdateFollow?.();
-        } catch {}
-
-        schedule();
-      };
-
-      const expandHero = () => {
-        body.classList.add(EXPANDED_CLASS);
-        expandedAtY = window.scrollY || 0;
-
-        if (heroMore) {
-          heroMore.setAttribute("aria-hidden", "false");
-        }
-
-        if (heroToggle) {
-          heroToggle.hidden = true;
-          heroToggle.setAttribute("aria-expanded", "true");
-        }
-
-        try {
-          window.__archiUpdateFollow?.();
-        } catch {}
-
-        schedule();
-      };
-
-      const syncHeroState = () => {
-        const followOn = computeFollowOn();
-        const expanded = body.classList.contains(EXPANDED_CLASS);
-        const collapsed = followOn && !expanded;
-
-        if (!followOn || mqMobile.matches) {
-          body.classList.remove(EXPANDED_CLASS);
-          expandedAtY = null;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = true;
-            heroToggle.setAttribute("aria-expanded", "false");
-          }
-
-          return;
-        }
-
-        if (heroMore) {
-          heroMore.setAttribute("aria-hidden", collapsed ? "true" : "false");
-        }
-
-        if (heroToggle) {
-          heroToggle.hidden = !collapsed;
-          heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
-        }
-      };
-
-      const maybeAutoCollapseOnScroll = () => {
-        if (mqMobile.matches) {
-          lastScrollY = window.scrollY || 0;
-          return;
-        }
-
-        if (!computeFollowOn()) {
-          lastScrollY = window.scrollY || 0;
-          return;
-        }
-
-        if (!body.classList.contains(EXPANDED_CLASS)) {
-          lastScrollY = window.scrollY || 0;
-          return;
-        }
-
-        if (expandedAtY == null) {
-          lastScrollY = window.scrollY || 0;
-          return;
-        }
-
-        const currentY = window.scrollY || 0;
-        const scrollingDown = currentY > lastScrollY;
-        const delta = currentY - expandedAtY;
-
-        if (scrollingDown && delta >= AUTO_COLLAPSE_DELTA) {
-          collapseHero();
-        }
-
-        lastScrollY = currentY;
-      };
-
-      const syncAll = () => {
-        stripLocalSticky();
-        syncFollowState();
-        syncHeroState();
-        applyLocalStickyHeight();
-      };
-
-      let raf = 0;
-      const schedule = () => {
-        if (raf) return;
-        raf = requestAnimationFrame(() => {
-          raf = 0;
-          requestAnimationFrame(syncAll);
-        });
-      };
-
-      heroToggle?.addEventListener("click", () => {
-        expandHero();
-      });
-
-      const onScroll = () => {
-        maybeAutoCollapseOnScroll();
-        schedule();
-      };
-
-      const followObserver = new MutationObserver(schedule);
-      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("scroll", onScroll, { passive: true });
-      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>
+  <GlossaryPortalStickySync
+    heroMoreId="scene-hero-more"
+    heroToggleId="scene-hero-toggle"
+  />
 </GlossaryLayout>
 
 <style>
@@ -563,138 +333,6 @@ const constellationCount = relatedEntries.length;
     padding: 8px 0 24px;
   }
 
-  .scene-hero{
-    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);
-    display: grid;
-    row-gap: 14px;
-    transition:
-      margin-bottom 180ms ease,
-      border-radius 180ms ease,
-      padding 180ms ease,
-      row-gap 180ms ease;
-  }
-
-  .scene-kicker{
-    margin: 0;
-    font-size: 12px;
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    opacity: .72;
-  }
-
-  .scene-hero h1{
-    margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
-    line-height: 1.02;
-    letter-spacing: -.04em;
-    font-weight: 850;
-    transition: font-size 180ms ease;
-  }
-
-  .scene-intro{
-    max-width: 76ch;
-    margin: 0;
-    font-size: 1.04rem;
-    line-height: 1.55;
-    opacity: .94;
-    transition:
-      font-size 180ms ease,
-      line-height 180ms ease,
-      max-width 180ms ease;
-  }
-
-  .scene-hero-collapsible{
-    display: grid;
-    row-gap: 6px;
-  }
-
-  .scene-hero-more{
-    display: grid;
-    row-gap: 14px;
-    max-height: 28rem;
-    overflow: hidden;
-    opacity: 1;
-    transition:
-      max-height 220ms ease,
-      opacity 180ms ease;
-  }
-
-  .scene-hero-toggle{
-    display: none;
-    align-self: flex-start;
-    width: fit-content;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 11px;
-    line-height: 1.2;
-    letter-spacing: .01em;
-    text-transform: none;
-    opacity: .56;
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: .12em;
-    text-decoration-thickness: 1px;
-  }
-
-  .scene-hero-toggle:hover{
-    opacity: .84;
-  }
-
-  .scene-hero-toggle:focus-visible{
-    outline: 2px solid rgba(0,217,255,0.24);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  .scene-hero-toggle[hidden]{
-    display: none !important;
-  }
-  .scene-section{
-    margin-top: 34px;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .scene-section h2{
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .scene-section__head{
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
-    position: static;
-  }
-
-  .scene-section__count{
-    font-size: 13px;
-    opacity: .72;
-    white-space: nowrap;
-  }
-
-  .scene-section__intro{
-    max-width: 78ch;
-    margin: 0;
-    opacity: .92;
-  }
-
   .scene-focus-card{
     margin-top: 14px;
     padding: 18px 20px;
@@ -746,14 +384,58 @@ const constellationCount = relatedEntries.length;
     margin-top: 6px;
   }
 
+  .scene-block{
+    margin-top: 18px;
+  }
+
+  .scene-block--panel{
+    padding: 18px 18px 16px;
+    border: 1px solid rgba(127,127,127,0.18);
+    border-radius: 18px;
+    background:
+      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
+      rgba(127,127,127,0.035);
+  }
+
   .scene-block + .scene-block{
     margin-top: 22px;
   }
 
+  .scene-block__head{
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+  }
+
   .scene-block h3{
-    margin: 0 0 12px;
+    margin: 0;
     font-size: 15px;
     line-height: 1.3;
+    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 36px);
+  }
+
+  .scene-block__count{
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+    padding: 0 10px;
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 999px;
+    font-size: 12px;
+    line-height: 1.2;
+    opacity: .78;
+    white-space: nowrap;
+  }
+
+  .scene-block__intro{
+    max-width: 78ch;
+    margin: 0 0 12px;
+    font-size: 14px;
+    line-height: 1.5;
+    opacity: .9;
   }
 
   .scene-cards{
@@ -772,7 +454,10 @@ const constellationCount = relatedEntries.length;
     border-radius: 16px;
     background: rgba(127,127,127,0.05);
     text-decoration: none;
-    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+    transition:
+      transform 120ms ease,
+      background 120ms ease,
+      border-color 120ms ease;
   }
 
   .scene-card:hover{
@@ -805,142 +490,17 @@ const constellationCount = relatedEntries.length;
     opacity: .82;
   }
 
-  .scene-section--final{
-    margin-top: 42px;
-  }
-
-  .scene-aside{
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-  }
-
-  .scene-aside__block{
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 12px;
-    background: rgba(127,127,127,0.05);
-  }
-
-  .scene-aside__back{
-    display: inline-block;
-    margin-bottom: 8px;
-    font-size: 13px;
-    font-weight: 700;
-    text-decoration: none;
-  }
-
-  .scene-aside__title{
-    font-size: 14px;
-    font-weight: 800;
-    letter-spacing: .2px;
-    line-height: 1.25;
-  }
-
-  .scene-aside__meta{
-    margin-top: 8px;
-    font-size: 12px;
-    line-height: 1.35;
-    opacity: .78;
-  }
-
-  .scene-aside__heading{
-    margin: 0 0 10px;
-    font-size: 13px;
-    font-weight: 800;
-    opacity: .9;
-  }
-
-  .scene-aside__list{
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .scene-aside__list li{
-    margin: 6px 0;
-  }
-
-  .scene-aside__list a{
-    text-decoration: none;
-    font-size: 13px;
-    line-height: 1.3;
-  }
-
-  :global(body.is-scenes-archicratiques-page.scene-follow-on .scene-hero){
-    margin-bottom: 0;
-    padding: 12px 16px 14px;
-    row-gap: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :global(body.is-scenes-archicratiques-page.scene-follow-on .scene-hero h1){
-    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
-  }
-
-  :global(body.is-scenes-archicratiques-page.scene-follow-on .scene-intro){
-    max-width: 72ch;
-    font-size: .98rem;
-    line-height: 1.48;
-  }
-
-  :global(body.is-scenes-archicratiques-page.scene-follow-on:not(.scene-hero-expanded) .scene-hero-more){
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  :global(body.is-scenes-archicratiques-page.scene-follow-on:not(.scene-hero-expanded) .scene-hero-toggle){
-    display: inline-flex;
-  }
-
-  :global(body.is-scenes-archicratiques-page.scene-follow-on #reading-follow .reading-follow__inner){
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  :global(body.is-scenes-archicratiques-page #reading-follow){
-    z-index: 10;
-  }
-
-  :global(body.is-scenes-archicratiques-page .scene-section__head.is-sticky),
-  :global(body.is-scenes-archicratiques-page .scene-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){
-    .scene-hero{
-      position: static;
-      border-radius: 22px;
-      margin-bottom: 20px;
-      row-gap: 12px;
-    }
-
-    .scene-hero-more{
-      max-height: none;
-      opacity: 1;
-      overflow: visible;
-    }
-
-    .scene-hero-toggle{
-      display: none !important;
+  @media (max-width: 720px){
+    .scene-block--panel{
+      padding: 16px;
+      border-radius: 16px;
     }
   }
 
   @media (prefers-color-scheme: dark){
     .scene-focus-card,
-    .scene-card,
-    .scene-aside__block{
+    .scene-block--panel,
+    .scene-card{
       background: rgba(255,255,255,0.04);
     }
 
diff --git a/src/pages/glossaire/tensions-irreductibles.astro b/src/pages/glossaire/tensions-irreductibles.astro
index 69d4127..3b61b94 100644
--- a/src/pages/glossaire/tensions-irreductibles.astro
+++ b/src/pages/glossaire/tensions-irreductibles.astro
@@ -1,14 +1,24 @@
 ---
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
+import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
+import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
+import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
+import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
 import { getCollection } from "astro:content";
+import {
+  buildGlossaryBySlug,
+  hrefOfGlossaryEntry,
+} from "../../lib/glossary";
 
 const entries = await getCollection("glossaire");
 
-const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
-const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
+const collator = new Intl.Collator("fr", {
+  sensitivity: "base",
+  numeric: true,
+});
 
-const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
-const bySlug = new Map(entries.map((entry) => [slugOf(entry), entry]));
+const bySlug = buildGlossaryBySlug(entries);
+const hrefOf = hrefOfGlossaryEntry;
 
 function sortByTerm(list = []) {
   return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
@@ -112,6 +122,55 @@ const irreducibleTensions = [
 }));
 
 const tensionsCount = irreducibleTensions.length;
+const foundationCount = foundationEntries.length;
+const resonanceCount = resonanceEntries.length;
+
+const pageItems = [
+  { href: "#orientation", label: "Orientation" },
+  { href: "#dix-tensions", label: "Les dix tensions" },
+  ...(foundationEntries.length > 0
+    ? [{ href: "#articulations-fondamentales", label: "Articulations fondamentales" }]
+    : []),
+  ...(resonanceEntries.length > 0
+    ? [{ href: "#resonances-theoriques", label: "Résonances théoriques" }]
+    : []),
+  { href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
+];
+
+const usefulLinks = [
+  { href: "/glossaire/tension/", label: "Tension" },
+  { href: "/glossaire/scene-depreuve/", label: "Scène d’épreuve" },
+  { href: "/glossaire/archicration/", label: "Archicration" },
+  { href: "/glossaire/co-viabilite/", label: "Co-viabilité" },
+  { href: "/glossaire/dynamiques-archicratiques/", label: "Dynamiques archicratiques" },
+];
+
+const prolongerLinks = [
+  {
+    href: "/glossaire/dynamiques-archicratiques/",
+    title: "Dynamiques archicratiques",
+    text:
+      "Revenir aux processus de fermeture, d’oblitération et de dérive de la régulation.",
+  },
+  {
+    href: "/glossaire/archicrations/",
+    title: "Méta-régimes archicratiques",
+    text:
+      "Parcourir les grandes formes de co-viabilité qui stabilisent les tensions sans les abolir.",
+  },
+  {
+    href: "/glossaire/paradigmes/",
+    title: "Paradigmes et doctrines",
+    text:
+      "Situer ces tensions dans un paysage théorique plus large.",
+  },
+  {
+    href: "/glossaire/index-complet/",
+    title: "Index complet",
+    text:
+      "Retrouver l’ensemble des entrées du glossaire dans une navigation alphabétique intégrale.",
+  },
+];
 ---
 
 <GlossaryLayout
@@ -120,96 +179,34 @@ const tensionsCount = irreducibleTensions.length;
   stickyMode="glossary-portal"
 >
   <Fragment slot="aside">
-    <nav class="tir-aside" aria-label="Navigation des tensions irréductibles">
-      <div class="tir-aside__block">
-        <a class="tir-aside__back" href="/glossaire/">← Retour au glossaire</a>
-        <div class="tir-aside__title">Tensions irréductibles</div>
-        <div class="tir-aside__meta">
-          {tensionsCount} tension{tensionsCount > 1 ? "s" : ""} structurale{tensionsCount > 1 ? "s" : ""}
-        </div>
-      </div>
-
-      <div class="tir-aside__block">
-        <h2 class="tir-aside__heading">Dans cette page</h2>
-        <ul class="tir-aside__list">
-          <li><a href="#orientation">Orientation</a></li>
-          <li><a href="#dix-tensions">Les dix tensions</a></li>
-          {foundationEntries.length > 0 && (
-            <li><a href="#articulations-fondamentales">Articulations fondamentales</a></li>
-          )}
-          {resonanceEntries.length > 0 && (
-            <li><a href="#resonances-theoriques">Résonances théoriques</a></li>
-          )}
-          <li><a href="#prolonger-la-lecture">Prolonger la lecture</a></li>
-        </ul>
-      </div>
-
-      <div class="tir-aside__block">
-        <h2 class="tir-aside__heading">Renvois utiles</h2>
-        <ul class="tir-aside__list">
-          <li><a href="/glossaire/tension/">Tension</a></li>
-          <li><a href="/glossaire/scene-depreuve/">Scène d’épreuve</a></li>
-          <li><a href="/glossaire/archicration/">Archicration</a></li>
-          <li><a href="/glossaire/co-viabilite/">Co-viabilité</a></li>
-          <li><a href="/glossaire/dynamiques-archicratiques/">Dynamiques archicratiques</a></li>
-        </ul>
-      </div>
-    </nav>
+    <GlossaryPortalAside
+      ariaLabel="Navigation des tensions irréductibles"
+      title="Tensions irréductibles"
+      meta={`${tensionsCount} tension${tensionsCount > 1 ? "s" : ""} structurale${tensionsCount > 1 ? "s" : ""}`}
+      pageItems={pageItems}
+      usefulLinks={usefulLinks}
+    />
   </Fragment>
 
-  <section class="tir-page" data-tir-page>
-    <div class="tir-hero glossary-page-hero" data-tir-hero>
-      <p class="tir-kicker">Parcours du glossaire</p>
-      <h1>Tensions irréductibles</h1>
-
-      <p class="tir-intro">
-        Cette page rassemble les dix tensions que le chapitre 5 présente comme
-        <strong> ontologiquement irréductibles</strong> et politiquement fondatrices.
-        Elles ne se confondent pas avec des tensions simplement sectorielles :
-        elles désignent des lignes de conflictualité plus profondes, à partir
-        desquelles une scène archicratique doit organiser la co-viabilité.
-      </p>
-
-      <div class="tir-hero-collapsible">
-        <div
-          class="tir-hero-more"
-          id="tir-hero-more"
-          data-tir-more
-          aria-hidden="false"
-        >
-          <p class="tir-intro">
-            Le point décisif n’est donc pas de dresser un inventaire conjoncturel
-            des crises, mais d’identifier des foyers structuraux suffisamment
-            fondamentaux pour traverser durablement les régulations collectives.
-          </p>
-        </div>
-
-        <button
-          class="tir-hero-toggle"
-          id="tir-hero-toggle"
-          data-tir-more-toggle
-          type="button"
-          aria-controls="tir-hero-more"
-          aria-expanded="false"
-          hidden
-        >
-          lire la suite
-        </button>
-      </div>
-    </div>
-
-    <section class="tir-section">
-      <div class="tir-section__head">
-        <h2 id="orientation">Orientation</h2>
-      </div>
-
-      <p class="tir-section__intro">
-        Dans cette perspective, une archicration ne supprime pas les tensions :
-        elle les met en scène, les distribue, les hiérarchise, les arbitre ou
-        les rend révisables. Les tensions irréductibles désignent ainsi le plan
-        à partir duquel devient pensable l’exigence même de régulation.
-      </p>
+  <section class="tir-page">
+    <GlossaryPortalHero
+      prefix="tir"
+      kicker="Parcours du glossaire"
+      title="Tensions irréductibles"
+      intro="Cette page rassemble les dix tensions que le chapitre 5 présente comme ontologiquement irréductibles et politiquement fondatrices. Elles ne se confondent pas avec des tensions simplement sectorielles : elles désignent des lignes de conflictualité plus profondes, à partir desquelles une scène archicratique doit organiser la co-viabilité."
+      moreParagraphs={[
+        "Le point décisif n’est donc pas de dresser un inventaire conjoncturel des crises, mais d’identifier des foyers structuraux suffisamment fondamentaux pour traverser durablement les régulations collectives.",
+      ]}
+      introMaxWidth="72ch"
+      followIntroMaxWidth="68ch"
+      moreMaxHeight="18rem"
+    />
 
+    <GlossaryPortalSection
+      id="orientation"
+      title="Orientation"
+      intro="Dans cette perspective, une archicration ne supprime pas les tensions : elle les met en scène, les distribue, les hiérarchise, les arbitre ou les rend révisables. Les tensions irréductibles désignent ainsi le plan à partir duquel devient pensable l’exigence même de régulation."
+    >
       <div class="tir-note-card">
         <strong>Point de méthode</strong>
         <p>
@@ -219,23 +216,16 @@ const tensionsCount = irreducibleTensions.length;
           culturels — sans se réduire à aucun d’entre eux pris isolément.
         </p>
       </div>
-    </section>
-
-    <section class="tir-section">
-      <div class="tir-section__head">
-        <h2 id="dix-tensions">Les dix tensions irréductibles</h2>
-        <span class="tir-section__count">
-          {tensionsCount} tension{tensionsCount > 1 ? "s" : ""}
-        </span>
-      </div>
-
-      <p class="tir-section__intro">
-        Le chapitre 5 les présente comme les foyers majeurs de conflictualité
-        auxquels une pensée archicratique doit se confronter.
-      </p>
+    </GlossaryPortalSection>
 
+    <GlossaryPortalSection
+      id="dix-tensions"
+      title="Les dix tensions irréductibles"
+      count={`${tensionsCount} tension${tensionsCount > 1 ? "s" : ""}`}
+      intro="Le chapitre 5 les présente comme les foyers majeurs de conflictualité auxquels une pensée archicratique doit se confronter."
+    >
       <div class="tir-cards">
-        {irreducibleTensions.map((item) => (
+        {irreducibleTensions.map((item) =>
           item.entry ? (
             <a class="tir-card tir-card--link" href={hrefOf(item.entry)}>
               <div class="tir-card__index">{item.index}</div>
@@ -249,122 +239,108 @@ const tensionsCount = irreducibleTensions.length;
               <p>{item.text}</p>
             </article>
           )
-        ))}
+        )}
       </div>
-    </section>
+    </GlossaryPortalSection>
 
     {foundationEntries.length > 0 && (
-      <section class="tir-section">
-        <div class="tir-section__head">
-          <h2 id="articulations-fondamentales">Articulations fondamentales</h2>
-          <span class="tir-section__count">
-            {foundationEntries.length} notion{foundationEntries.length > 1 ? "s" : ""}
-          </span>
+      <GlossaryPortalSection
+        id="articulations-fondamentales"
+        title="Articulations fondamentales"
+        count={`${foundationCount} notion${foundationCount > 1 ? "s" : ""}`}
+        intro="Ces tensions ne prennent sens, dans le glossaire, qu’en relation avec quelques notions cardinales : la tension elle-même, la scène d’épreuve, l’archicration, la co-viabilité et l’archicratie."
+      >
+        <div class="tir-block tir-block--panel">
+          <div class="tir-block__head">
+            <h3 id="noyau-structural">Noyau structural de la régulation</h3>
+            <span class="tir-block__count">
+              {foundationCount} entrée{foundationCount > 1 ? "s" : ""}
+            </span>
+          </div>
+
+          <p class="tir-block__intro">
+            Ces notions donnent la grammaire minimale à partir de laquelle les
+            tensions irréductibles peuvent être exposées, disputées et rendues
+            politiquement traitables.
+          </p>
+
+          <div class="tir-link-cards">
+            {foundationEntries.map((entry) => (
+              <a class="tir-link-card" href={hrefOf(entry)}>
+                <strong>{entry.data.term}</strong>
+                <span>{entry.data.definitionShort}</span>
+
+                {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
+                  <small>
+                    Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
+                  </small>
+                )}
+              </a>
+            ))}
+          </div>
         </div>
-
-        <p class="tir-section__intro">
-          Ces tensions ne prennent sens, dans le glossaire, qu’en relation avec
-          quelques notions cardinales : la tension elle-même, la scène
-          d’épreuve, l’archicration, la co-viabilité et l’archicratie.
-        </p>
-
-        <div class="tir-link-cards">
-          {foundationEntries.map((entry) => (
-            <a class="tir-link-card" href={hrefOf(entry)}>
-              <strong>{entry.data.term}</strong>
-              <span>{entry.data.definitionShort}</span>
-
-              {entry.data.comparisonTraditions?.length > 0 && (
-                <small>
-                  Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
-                </small>
-              )}
-            </a>
-          ))}
-        </div>
-      </section>
+      </GlossaryPortalSection>
     )}
 
     {resonanceEntries.length > 0 && (
-      <section class="tir-section">
-        <div class="tir-section__head">
-          <h2 id="resonances-theoriques">Résonances théoriques</h2>
-          <span class="tir-section__count">
-            {resonanceEntries.length} entrée{resonanceEntries.length > 1 ? "s" : ""}
-          </span>
+      <GlossaryPortalSection
+        id="resonances-theoriques"
+        title="Résonances théoriques"
+        count={`${resonanceCount} entrée${resonanceCount > 1 ? "s" : ""}`}
+        intro="Plusieurs paradigmes déjà présents dans le glossaire permettent d’éclairer certains versants de ces tensions : gouvernementalité algorithmique, préemption, cosmopolitique, technodiversité, pharmacologie technique ou légitimation démocratique."
+      >
+        <div class="tir-block tir-block--panel">
+          <div class="tir-block__head">
+            <h3 id="points-dappui-comparatifs">Points d’appui comparatifs</h3>
+            <span class="tir-block__count">
+              {resonanceCount} entrée{resonanceCount > 1 ? "s" : ""}
+            </span>
+          </div>
+
+          <p class="tir-block__intro">
+            Ces entrées ne remplacent pas la cartographie des tensions
+            irréductibles. Elles en éclairent certains versants en fournissant
+            des ressources d’analyse déjà stabilisées ailleurs dans le glossaire.
+          </p>
+
+          <div class="tir-link-cards">
+            {resonanceEntries.map((entry) => (
+              <a class="tir-link-card" href={hrefOf(entry)}>
+                <strong>{entry.data.term}</strong>
+                <span>{entry.data.definitionShort}</span>
+
+                {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
+                  <small>
+                    Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
+                  </small>
+                )}
+              </a>
+            ))}
+          </div>
         </div>
-
-        <p class="tir-section__intro">
-          Plusieurs paradigmes déjà présents dans le glossaire permettent
-          d’éclairer certains versants de ces tensions : gouvernementalité
-          algorithmique, préemption, cosmopolitique, technodiversité,
-          pharmacologie technique ou légitimation démocratique.
-        </p>
-
-        <div class="tir-link-cards">
-          {resonanceEntries.map((entry) => (
-            <a class="tir-link-card" href={hrefOf(entry)}>
-              <strong>{entry.data.term}</strong>
-              <span>{entry.data.definitionShort}</span>
-
-              {entry.data.mobilizedAuthors?.length > 0 && (
-                <small>
-                  Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
-                </small>
-              )}
-            </a>
-          ))}
-        </div>
-      </section>
+      </GlossaryPortalSection>
     )}
 
-    <section class="tir-section">
-      <div class="tir-section__head">
-        <h2 id="prolonger-la-lecture">Prolonger la lecture</h2>
-      </div>
-
-      <p class="tir-section__intro">
-        Cette page fixe le socle conceptuel des tensions irréductibles. Elle
-        pourra ensuite servir de base à un approfondissement plus détaillé, sans
-        alourdir l’accueil général du glossaire.
-      </p>
-
+    <GlossaryPortalSection
+      id="prolonger-la-lecture"
+      title="Prolonger la lecture"
+      intro="Cette page fixe le socle conceptuel des tensions irréductibles. Elle pourra ensuite servir de base à un approfondissement plus détaillé, sans alourdir l’accueil général du glossaire."
+    >
       <div class="tir-link-cards">
-        <a class="tir-link-card" href="/glossaire/dynamiques-archicratiques/">
-          <strong>Dynamiques archicratiques</strong>
-          <span>
-            Revenir aux processus de fermeture, d’oblitération et de dérive de
-            la régulation.
-          </span>
-        </a>
-
-        <a class="tir-link-card" href="/glossaire/archicrations/">
-          <strong>Méta-régimes archicratiques</strong>
-          <span>
-            Parcourir les grandes formes de co-viabilité qui stabilisent les
-            tensions sans les abolir.
-          </span>
-        </a>
-
-        <a class="tir-link-card" href="/glossaire/paradigmes/">
-          <strong>Paradigmes et doctrines</strong>
-          <span>
-            Situer ces tensions dans un paysage théorique plus large.
-          </span>
-        </a>
-
-        <a class="tir-link-card" href="/glossaire/index-complet/">
-          <strong>Index complet</strong>
-          <span>
-            Retrouver l’ensemble des entrées du glossaire dans une navigation
-            alphabétique intégrale.
-          </span>
-        </a>
+        {prolongerLinks.map((item) => (
+          <a class="tir-link-card" href={item.href}>
+            <strong>{item.title}</strong>
+            <span>{item.text}</span>
+          </a>
+        ))}
       </div>
-    </section>
+    </GlossaryPortalSection>
 
-    <section class="tir-section tir-section--final">
-      <h2>Portée d’ensemble</h2>
+    <GlossaryPortalSection
+      id="portee-densemble"
+      title="Portée d’ensemble"
+      final={true}
+    >
       <p>
         Les tensions irréductibles ne décrivent pas des accidents secondaires de
         la vie collective, mais les lignes de fracture à partir desquelles toute
@@ -373,232 +349,13 @@ const tensionsCount = irreducibleTensions.length;
         archicration digne de ce nom doit toujours affronter, mettre en forme et
         rouvrir ce qui ne peut être définitivement résorbé.
       </p>
-    </section>
+    </GlossaryPortalSection>
   </section>
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const hero = document.querySelector("[data-tir-hero]");
-        const follow = document.getElementById("reading-follow");
-        const heroMore = document.getElementById("tir-hero-more");
-        const heroToggle = document.getElementById("tir-hero-toggle");
-
-        if (!body || !root || !hero || !follow) return;
-
-        const BODY_CLASS = "is-tensions-irreductibles-page";
-        const FOLLOW_ON_CLASS = "tir-follow-on";
-        const EXPANDED_CLASS = "tir-hero-expanded";
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const AUTO_COLLAPSE_DELTA = 160;
-
-        let expandedAtY = null;
-        let lastScrollY = window.scrollY || 0;
-
-        body.classList.add(BODY_CLASS);
-
-        const heroHeight = () =>
-          Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
-
-        const stripLocalSticky = () => {
-          document.querySelectorAll(".tir-section__head").forEach((el) => {
-            el.classList.remove("is-sticky");
-            el.removeAttribute("data-sticky-active");
-          });
-        };
-
-        const computeFollowOn = () =>
-          !mqMobile.matches &&
-          follow.classList.contains("is-on") &&
-          follow.style.display !== "none" &&
-          follow.getAttribute("aria-hidden") !== "true";
-
-        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 on = computeFollowOn();
-          body.classList.toggle(FOLLOW_ON_CLASS, on);
-          return on;
-        };
-
-        const collapseHero = () => {
-          if (!body.classList.contains(EXPANDED_CLASS)) return;
-
-          body.classList.remove(EXPANDED_CLASS);
-          expandedAtY = null;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "true");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = false;
-            heroToggle.setAttribute("aria-expanded", "false");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const expandHero = () => {
-          body.classList.add(EXPANDED_CLASS);
-          expandedAtY = window.scrollY || 0;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = true;
-            heroToggle.setAttribute("aria-expanded", "true");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const syncHeroState = () => {
-          const followOn = computeFollowOn();
-          const expanded = body.classList.contains(EXPANDED_CLASS);
-          const collapsed = followOn && !expanded;
-
-          if (!followOn || mqMobile.matches) {
-            body.classList.remove(EXPANDED_CLASS);
-            expandedAtY = null;
-
-            if (heroMore) {
-              heroMore.setAttribute("aria-hidden", "false");
-            }
-
-            if (heroToggle) {
-              heroToggle.hidden = true;
-              heroToggle.setAttribute("aria-expanded", "false");
-            }
-
-            return;
-          }
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", collapsed ? "true" : "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = !collapsed;
-            heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
-          }
-        };
-
-        const maybeAutoCollapseOnScroll = () => {
-          if (mqMobile.matches) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!computeFollowOn()) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!body.classList.contains(EXPANDED_CLASS)) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (expandedAtY == null) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          const currentY = window.scrollY || 0;
-          const scrollingDown = currentY > lastScrollY;
-          const delta = currentY - expandedAtY;
-
-          if (scrollingDown && delta >= AUTO_COLLAPSE_DELTA) {
-            collapseHero();
-          }
-
-          lastScrollY = currentY;
-        };
-
-        const syncAll = () => {
-          stripLocalSticky();
-          syncFollowState();
-          syncHeroState();
-          applyLocalStickyHeight();
-        };
-
-        let raf = 0;
-        const schedule = () => {
-          if (raf) return;
-          raf = requestAnimationFrame(() => {
-            raf = 0;
-            requestAnimationFrame(syncAll);
-          });
-        };
-
-        heroToggle?.addEventListener("click", () => {
-          expandHero();
-        });
-
-        const onScroll = () => {
-          maybeAutoCollapseOnScroll();
-          schedule();
-        };
-
-        const followObserver = new MutationObserver(schedule);
-        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("scroll", onScroll, { passive: true });
-        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>
+  <GlossaryPortalStickySync
+    heroMoreId="tir-hero-more"
+    heroToggleId="tir-hero-toggle"
+  />
 </GlossaryLayout>
 
 <style>
@@ -606,139 +363,6 @@ const tensionsCount = irreducibleTensions.length;
     padding: 8px 0 24px;
   }
 
-  .tir-hero{
-    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);
-    display: grid;
-    row-gap: 14px;
-    transition:
-      margin-bottom 180ms ease,
-      border-radius 180ms ease,
-      padding 180ms ease,
-      row-gap 180ms ease;
-  }
-
-  .tir-kicker{
-    margin: 0;
-    font-size: 12px;
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    opacity: .72;
-  }
-
-  .tir-hero h1{
-    margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
-    line-height: 1.02;
-    letter-spacing: -.04em;
-    font-weight: 850;
-    transition: font-size 180ms ease;
-  }
-
-  .tir-intro{
-    margin: 0;
-    max-width: 72ch;
-    font-size: 1.04rem;
-    line-height: 1.55;
-    opacity: .94;
-    transition:
-      font-size 180ms ease,
-      line-height 180ms ease,
-      max-width 180ms ease;
-  }
-
-  .tir-hero-collapsible{
-    display: grid;
-    row-gap: 6px;
-  }
-
-  .tir-hero-more{
-    display: grid;
-    row-gap: 14px;
-    max-height: 18rem;
-    overflow: hidden;
-    opacity: 1;
-    transition:
-      max-height 220ms ease,
-      opacity 180ms ease;
-  }
-
-  .tir-hero-toggle{
-    display: none;
-    align-self: flex-start;
-    width: fit-content;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 11px;
-    line-height: 1.2;
-    letter-spacing: .01em;
-    text-transform: none;
-    opacity: .56;
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: .12em;
-    text-decoration-thickness: 1px;
-  }
-
-  .tir-hero-toggle:hover{
-    opacity: .84;
-  }
-
-  .tir-hero-toggle:focus-visible{
-    outline: 2px solid rgba(0,217,255,0.24);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  .tir-hero-toggle[hidden]{
-    display: none !important;
-  }
-
-  .tir-section{
-    margin-top: 34px;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .tir-section h2{
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .tir-section__head{
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
-    position: static;
-  }
-
-  .tir-section__count{
-    font-size: 13px;
-    opacity: .72;
-    white-space: nowrap;
-  }
-
-  .tir-section__intro{
-    max-width: 78ch;
-    margin: 0;
-    opacity: .92;
-  }
-
   .tir-note-card{
     margin-top: 14px;
     padding: 16px 18px;
@@ -781,7 +405,10 @@ const tensionsCount = irreducibleTensions.length;
 
   .tir-card--link{
     text-decoration: none;
-    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+    transition:
+      transform 120ms ease,
+      background 120ms ease,
+      border-color 120ms ease;
   }
 
   .tir-card--link:hover{
@@ -811,6 +438,56 @@ const tensionsCount = irreducibleTensions.length;
     opacity: .92;
   }
 
+  .tir-block{
+    margin-top: 18px;
+  }
+
+  .tir-block--panel{
+    padding: 18px 18px 16px;
+    border: 1px solid rgba(127,127,127,0.18);
+    border-radius: 18px;
+    background:
+      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
+      rgba(127,127,127,0.035);
+  }
+
+  .tir-block__head{
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+  }
+
+  .tir-block h3{
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.3;
+    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 36px);
+  }
+
+  .tir-block__count{
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+    padding: 0 10px;
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 999px;
+    font-size: 12px;
+    line-height: 1.2;
+    opacity: .78;
+    white-space: nowrap;
+  }
+
+  .tir-block__intro{
+    max-width: 78ch;
+    margin: 0 0 12px;
+    font-size: 14px;
+    line-height: 1.5;
+    opacity: .9;
+  }
+
   .tir-link-cards{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -827,7 +504,10 @@ const tensionsCount = irreducibleTensions.length;
     border-radius: 16px;
     background: rgba(127,127,127,0.05);
     text-decoration: none;
-    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+    transition:
+      transform 120ms ease,
+      background 120ms ease,
+      border-color 120ms ease;
   }
 
   .tir-link-card:hover{
@@ -854,155 +534,18 @@ const tensionsCount = irreducibleTensions.length;
     opacity: .72;
   }
 
-  .tir-section--final{
-    margin-top: 42px;
-  }
-
-  .tir-aside{
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-  }
-
-  .tir-aside__block{
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 12px;
-    background: rgba(127,127,127,0.05);
-  }
-
-  .tir-aside__back{
-    display: inline-block;
-    margin-bottom: 8px;
-    font-size: 13px;
-    font-weight: 700;
-    text-decoration: none;
-  }
-
-  .tir-aside__title{
-    font-size: 14px;
-    font-weight: 800;
-    letter-spacing: .2px;
-    line-height: 1.25;
-  }
-
-  .tir-aside__meta{
-    margin-top: 8px;
-    font-size: 12px;
-    line-height: 1.35;
-    opacity: .78;
-  }
-
-  .tir-aside__heading{
-    margin: 0 0 10px;
-    font-size: 13px;
-    font-weight: 800;
-    opacity: .9;
-  }
-
-  .tir-aside__list{
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .tir-aside__list li{
-    margin: 6px 0;
-  }
-
-  .tir-aside__list a{
-    text-decoration: none;
-    font-size: 13px;
-    line-height: 1.3;
-  }
-
-  :global(body.is-tensions-irreductibles-page #reading-follow){
-    z-index: 10;
-  }
-
-  :global(body.is-tensions-irreductibles-page.tir-follow-on .tir-hero){
-    margin-bottom: 0;
-    padding: 12px 16px 14px;
-    row-gap: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :global(body.is-tensions-irreductibles-page.tir-follow-on .tir-hero h1){
-    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
-  }
-
-  :global(body.is-tensions-irreductibles-page.tir-follow-on .tir-intro){
-    max-width: 68ch;
-    font-size: .98rem;
-    line-height: 1.48;
-  }
-
-  :global(body.is-tensions-irreductibles-page.tir-follow-on:not(.tir-hero-expanded) .tir-hero-more){
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  :global(body.is-tensions-irreductibles-page.tir-follow-on:not(.tir-hero-expanded) .tir-hero-toggle){
-    display: inline-flex;
-  }
-
-  :global(body.is-tensions-irreductibles-page.tir-follow-on #reading-follow .reading-follow__inner){
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  :global(body.is-tensions-irreductibles-page .tir-section__head.is-sticky),
-  :global(body.is-tensions-irreductibles-page .tir-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){
-    .tir-hero{
-      position: static;
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
-    }
-
-    .tir-intro{
-      max-width: none;
-    }
-
-    .tir-hero-more{
-      max-height: none;
-      opacity: 1;
-      overflow: visible;
-    }
-
-    .tir-hero-toggle{
-      display: none !important;
-    }
-
-    :global(body.is-tensions-irreductibles-page.tir-follow-on .tir-hero){
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
+  @media (max-width: 720px){
+    .tir-block--panel{
+      padding: 16px;
+      border-radius: 16px;
     }
   }
 
   @media (prefers-color-scheme: dark){
     .tir-note-card,
     .tir-card,
-    .tir-link-card,
-    .tir-aside__block{
+    .tir-block--panel,
+    .tir-link-card{
       background: rgba(255,255,255,0.04);
     }
 
diff --git a/src/pages/glossaire/verbes-de-la-scene.astro b/src/pages/glossaire/verbes-de-la-scene.astro
index 2c5d793..860f656 100644
--- a/src/pages/glossaire/verbes-de-la-scene.astro
+++ b/src/pages/glossaire/verbes-de-la-scene.astro
@@ -1,5 +1,9 @@
 ---
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
+import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
+import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
+import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
+import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
 
 const sections = [
   {
@@ -189,6 +193,52 @@ const sections = [
 ];
 
 const totalCount = sections.reduce((sum, section) => sum + section.items.length, 0);
+
+const pageItems = [
+  ...sections.map((section) => ({
+    href: `#${section.id}`,
+    label: section.title,
+  })),
+  { href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
+];
+
+const usefulLinks = [
+  { href: "/glossaire/scene-depreuve/", label: "Scène d’épreuve" },
+  { href: "/glossaire/archicration/", label: "Archicration" },
+  { href: "/glossaire/obliteration-archicratique/", label: "Oblitération archicratique" },
+  { href: "/glossaire/archicration-obliteree/", label: "Archicration oblitérée" },
+  { href: "/glossaire/synchrotopie/", label: "Synchrotopie" },
+  { href: "/glossaire/hypotopie/", label: "Hypotopie" },
+  { href: "/glossaire/hypertopie/", label: "Hypertopie" },
+  { href: "/glossaire/atopie/", label: "Atopie" },
+];
+
+const prolongerLinks = [
+  {
+    href: "/glossaire/scene-depreuve/",
+    title: "Scène d’épreuve",
+    text:
+      "Revenir à la notion-pivot de comparution, d’exposition et de mise en discussion régulatrice.",
+  },
+  {
+    href: "/glossaire/scenes-archicratiques/",
+    title: "Scènes archicratiques",
+    text:
+      "Retrouver le portail synthétique des scènes, topologies et formats de comparution.",
+  },
+  {
+    href: "/glossaire/dynamiques-archicratiques/",
+    title: "Dynamiques archicratiques",
+    text:
+      "Explorer les processus de fermeture, de capture, d’oblitération et de dérive des scènes.",
+  },
+  {
+    href: "/glossaire/index-complet/",
+    title: "Index complet",
+    text:
+      "Retrouver l’ensemble des entrées du glossaire dans une navigation alphabétique intégrale.",
+  },
+];
 ---
 
 <GlossaryLayout
@@ -197,88 +247,36 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
   stickyMode="glossary-portal"
 >
   <Fragment slot="aside">
-    <nav class="verbs-aside" aria-label="Navigation des verbes de la scène">
-      <div class="verbs-aside__block">
-        <a class="verbs-aside__back" href="/glossaire/">← Retour au glossaire</a>
-        <div class="verbs-aside__title">Verbes de la scène</div>
-        <div class="verbs-aside__meta">{totalCount} verbes cartographiés</div>
-      </div>
-
-      <div class="verbs-aside__block">
-        <h2 class="verbs-aside__heading">Dans cette page</h2>
-        <ul class="verbs-aside__list">
-          {sections.map((section) => (
-            <li><a href={`#${section.id}`}>{section.title}</a></li>
-          ))}
-        </ul>
-      </div>
-
-      <div class="verbs-aside__block">
-        <h2 class="verbs-aside__heading">Renvois utiles</h2>
-        <ul class="verbs-aside__list">
-          <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-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>
-          <li><a href="/glossaire/atopie/">Atopie</a></li>
-        </ul>
-      </div>
-    </nav>
+    <GlossaryPortalAside
+      ariaLabel="Navigation des verbes de la scène"
+      title="Verbes de la scène"
+      meta={`${totalCount} verbe${totalCount > 1 ? "s" : ""} cartographié${totalCount > 1 ? "s" : ""}`}
+      pageItems={pageItems}
+      usefulLinks={usefulLinks}
+    />
   </Fragment>
 
-  <section class="verbs-page" data-verbs-page>
-    <div class="verbs-hero glossary-page-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">
-        Cette page ne rassemble pas des notions de régime, de topologie ou de processus,
-        mais des verbes d’analyse. Elle sert à qualifier ce qui arrive à une scène :
-        comment elle s’ouvre, comment elle s’éloigne, comment elle se ferme,
-        comment elle est capturée, et comment un archicrate peut encore y répondre.
-      </p>
-
-      <div class="verbs-hero-collapsible">
-        <div
-          class="verbs-hero-more"
-          id="verbs-hero-more"
-          data-verbs-more
-          aria-hidden="false"
-        >
-          <p class="verbs-intro">
-            Elle constitue ainsi un outil de description fin, complémentaire des fiches
-            consacrées aux scènes, aux topologies et aux dynamiques archicratiques.
-          </p>
-        </div>
-
-        <button
-          class="verbs-hero-toggle"
-          id="verbs-hero-toggle"
-          data-verbs-more-toggle
-          type="button"
-          aria-controls="verbs-hero-more"
-          aria-expanded="false"
-          hidden
-        >
-          lire la suite
-        </button>
-      </div>
-    </div>
+  <section class="verbs-page">
+    <GlossaryPortalHero
+      prefix="verbs"
+      kicker="Mini-glossaire systémique"
+      title="Verbes de la scène archicratique"
+      intro="Cette page ne rassemble pas des notions de régime, de topologie ou de processus, mais des verbes d’analyse. Elle sert à qualifier ce qui arrive à une scène : comment elle s’ouvre, comment elle s’éloigne, comment elle se ferme, comment elle est capturée, et comment un archicrate peut encore y répondre."
+      moreParagraphs={[
+        "Elle constitue ainsi un outil de description fin, complémentaire des fiches consacrées aux scènes, aux topologies et aux dynamiques archicratiques.",
+      ]}
+      introMaxWidth="76ch"
+      followIntroMaxWidth="68ch"
+      moreMaxHeight="12rem"
+    />
 
     {sections.map((section) => (
-      <section class="verbs-section">
-        <div class="verbs-section__head">
-          <h2 id={section.id}>{section.title}</h2>
-          <span class="verbs-section__count">
-            {section.items.length} verbe{section.items.length > 1 ? "s" : ""}
-          </span>
-        </div>
-
-        <p class="verbs-section__intro">{section.intro}</p>
-
+      <GlossaryPortalSection
+        id={section.id}
+        title={section.title}
+        count={`${section.items.length} verbe${section.items.length > 1 ? "s" : ""}`}
+        intro={section.intro}
+      >
         <div class="verbs-cards">
           {section.items.map((item) => (
             <article class="verbs-card">
@@ -291,11 +289,29 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
             </article>
           ))}
         </div>
-      </section>
+      </GlossaryPortalSection>
     ))}
 
-    <section class="verbs-section verbs-section--final">
-      <h2>Portée d’ensemble</h2>
+    <GlossaryPortalSection
+      id="prolonger-la-lecture"
+      title="Prolonger la lecture"
+      intro="Cette page forme un mini-glossaire d’action. Elle permet de mieux qualifier ce qui arrive concrètement aux scènes archicratiques et prolonge la lecture vers les pages de concepts, de topologies et de dynamiques."
+    >
+      <div class="verbs-cards">
+        {prolongerLinks.map((item) => (
+          <a class="verbs-card verbs-card--link" href={item.href}>
+            <h3>{item.title}</h3>
+            <p class="verbs-card__definition">{item.text}</p>
+          </a>
+        ))}
+      </div>
+    </GlossaryPortalSection>
+
+    <GlossaryPortalSection
+      id="portee-densemble"
+      title="Portée d’ensemble"
+      final={true}
+    >
       <p>
         Ces verbes permettent de distinguer plus finement les niveaux du paradigme :
         une <a href="/glossaire/scene-depreuve/">scène</a> dit où quelque chose peut comparaître,
@@ -304,232 +320,13 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
         un processus comme la <a href="/glossaire/desarchicration/">désarchicration</a>
         dit ce qui se transforme, et ces verbes disent ce qu’on fait concrètement à la scène.
       </p>
-    </section>
+    </GlossaryPortalSection>
   </section>
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const hero = document.querySelector("[data-verbs-hero]");
-        const follow = document.getElementById("reading-follow");
-        const heroMore = document.getElementById("verbs-hero-more");
-        const heroToggle = document.getElementById("verbs-hero-toggle");
-
-        if (!body || !root || !hero || !follow) return;
-
-        const BODY_CLASS = "is-verbes-de-la-scene-page";
-        const FOLLOW_ON_CLASS = "verbs-follow-on";
-        const EXPANDED_CLASS = "verbs-hero-expanded";
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const AUTO_COLLAPSE_DELTA = 160;
-
-        let expandedAtY = null;
-        let lastScrollY = window.scrollY || 0;
-
-        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 computeFollowOn = () =>
-          !mqMobile.matches &&
-          follow.classList.contains("is-on") &&
-          follow.style.display !== "none" &&
-          follow.getAttribute("aria-hidden") !== "true";
-
-        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 on = computeFollowOn();
-          body.classList.toggle(FOLLOW_ON_CLASS, on);
-          return on;
-        };
-
-        const collapseHero = () => {
-          if (!body.classList.contains(EXPANDED_CLASS)) return;
-
-          body.classList.remove(EXPANDED_CLASS);
-          expandedAtY = null;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "true");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = false;
-            heroToggle.setAttribute("aria-expanded", "false");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const expandHero = () => {
-          body.classList.add(EXPANDED_CLASS);
-          expandedAtY = window.scrollY || 0;
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = true;
-            heroToggle.setAttribute("aria-expanded", "true");
-          }
-
-          try {
-            window.__archiUpdateFollow?.();
-          } catch {}
-
-          schedule();
-        };
-
-        const syncHeroState = () => {
-          const followOn = computeFollowOn();
-          const expanded = body.classList.contains(EXPANDED_CLASS);
-          const collapsed = followOn && !expanded;
-
-          if (!followOn || mqMobile.matches) {
-            body.classList.remove(EXPANDED_CLASS);
-            expandedAtY = null;
-
-            if (heroMore) {
-              heroMore.setAttribute("aria-hidden", "false");
-            }
-
-            if (heroToggle) {
-              heroToggle.hidden = true;
-              heroToggle.setAttribute("aria-expanded", "false");
-            }
-
-            return;
-          }
-
-          if (heroMore) {
-            heroMore.setAttribute("aria-hidden", collapsed ? "true" : "false");
-          }
-
-          if (heroToggle) {
-            heroToggle.hidden = !collapsed;
-            heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
-          }
-        };
-
-        const maybeAutoCollapseOnScroll = () => {
-          if (mqMobile.matches) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!computeFollowOn()) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (!body.classList.contains(EXPANDED_CLASS)) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          if (expandedAtY == null) {
-            lastScrollY = window.scrollY || 0;
-            return;
-          }
-
-          const currentY = window.scrollY || 0;
-          const scrollingDown = currentY > lastScrollY;
-          const delta = currentY - expandedAtY;
-
-          if (scrollingDown && delta >= AUTO_COLLAPSE_DELTA) {
-            collapseHero();
-          }
-
-          lastScrollY = currentY;
-        };
-
-        const syncAll = () => {
-          stripLocalSticky();
-          syncFollowState();
-          syncHeroState();
-          applyLocalStickyHeight();
-        };
-
-        let raf = 0;
-        const schedule = () => {
-          if (raf) return;
-          raf = requestAnimationFrame(() => {
-            raf = 0;
-            requestAnimationFrame(syncAll);
-          });
-        };
-
-        heroToggle?.addEventListener("click", () => {
-          expandHero();
-        });
-
-        const onScroll = () => {
-          maybeAutoCollapseOnScroll();
-          schedule();
-        };
-
-        const followObserver = new MutationObserver(schedule);
-        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("scroll", onScroll, { passive: true });
-        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>
+  <GlossaryPortalStickySync
+    heroMoreId="verbs-hero-more"
+    heroToggleId="verbs-hero-toggle"
+  />
 </GlossaryLayout>
 
 <style>
@@ -537,139 +334,6 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
     padding: 8px 0 24px;
   }
 
-  .verbs-hero{
-    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);
-    display: grid;
-    row-gap: 14px;
-    transition:
-      margin-bottom 180ms ease,
-      border-radius 180ms ease,
-      padding 180ms ease,
-      row-gap 180ms ease;
-  }
-
-  .verbs-kicker{
-    margin: 0;
-    font-size: 12px;
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    opacity: .72;
-  }
-
-  .verbs-hero h1{
-    margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
-    line-height: 1.02;
-    letter-spacing: -.04em;
-    font-weight: 850;
-    transition: font-size 180ms ease;
-  }
-
-  .verbs-intro{
-    max-width: 76ch;
-    margin: 0;
-    font-size: 1.04rem;
-    line-height: 1.55;
-    opacity: .94;
-    transition:
-      font-size 180ms ease,
-      line-height 180ms ease,
-      max-width 180ms ease;
-  }
-
-  .verbs-hero-collapsible{
-    display: grid;
-    row-gap: 6px;
-  }
-
-  .verbs-hero-more{
-    display: grid;
-    row-gap: 14px;
-    max-height: 12rem;
-    overflow: hidden;
-    opacity: 1;
-    transition:
-      max-height 220ms ease,
-      opacity 180ms ease;
-  }
-
-  .verbs-hero-toggle{
-    display: none;
-    align-self: flex-start;
-    width: fit-content;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 11px;
-    line-height: 1.2;
-    letter-spacing: .01em;
-    text-transform: none;
-    opacity: .56;
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: .12em;
-    text-decoration-thickness: 1px;
-  }
-
-  .verbs-hero-toggle:hover{
-    opacity: .84;
-  }
-
-  .verbs-hero-toggle:focus-visible{
-    outline: 2px solid rgba(0,217,255,0.24);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  .verbs-hero-toggle[hidden]{
-    display: none !important;
-  }
-
-  .verbs-section{
-    margin-top: 34px;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .verbs-section h2{
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
-  }
-
-  .verbs-section__head{
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
-    position: static;
-  }
-
-  .verbs-section__count{
-    font-size: 13px;
-    opacity: .72;
-    white-space: nowrap;
-  }
-
-  .verbs-section__intro{
-    max-width: 78ch;
-    margin: 0;
-    opacity: .92;
-  }
-
   .verbs-cards{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -685,10 +349,19 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
     border: 1px solid rgba(127,127,127,0.22);
     border-radius: 16px;
     background: rgba(127,127,127,0.05);
-    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
+    transition:
+      background 120ms ease,
+      border-color 120ms ease,
+      transform 120ms ease;
   }
 
-  .verbs-card:hover{
+  .verbs-card--link{
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .verbs-card:hover,
+  .verbs-card--link:hover{
     transform: translateY(-1px);
     background: rgba(127,127,127,0.08);
     border-color: rgba(0,217,255,0.16);
@@ -716,157 +389,13 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
     opacity: .92;
   }
 
-  .verbs-section--final{
-    margin-top: 42px;
-  }
-
-  .verbs-aside{
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-  }
-
-  .verbs-aside__block{
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 12px;
-    background: rgba(127,127,127,0.05);
-  }
-
-  .verbs-aside__back{
-    display: inline-block;
-    margin-bottom: 8px;
-    font-size: 13px;
-    font-weight: 700;
-    text-decoration: none;
-  }
-
-  .verbs-aside__title{
-    font-size: 14px;
-    font-weight: 800;
-    letter-spacing: .2px;
-    line-height: 1.25;
-  }
-
-  .verbs-aside__meta{
-    margin-top: 8px;
-    font-size: 12px;
-    line-height: 1.35;
-    opacity: .78;
-  }
-
-  .verbs-aside__heading{
-    margin: 0 0 10px;
-    font-size: 13px;
-    font-weight: 800;
-    opacity: .9;
-  }
-
-  .verbs-aside__list{
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .verbs-aside__list li{
-    margin: 6px 0;
-  }
-
-  .verbs-aside__list a{
-    text-decoration: none;
-    font-size: 13px;
-    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;
-    padding: 12px 16px 14px;
-    row-gap: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :global(body.is-verbes-de-la-scene-page.verbs-follow-on .verbs-hero h1){
-    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
-  }
-
-  :global(body.is-verbes-de-la-scene-page.verbs-follow-on .verbs-intro){
-    max-width: 68ch;
-    font-size: .98rem;
-    line-height: 1.48;
-  }
-
-  :global(body.is-verbes-de-la-scene-page.verbs-follow-on:not(.verbs-hero-expanded) .verbs-hero-more){
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  :global(body.is-verbes-de-la-scene-page.verbs-follow-on:not(.verbs-hero-expanded) .verbs-hero-toggle){
-    display: inline-flex;
-  }
-
-  :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;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
-    }
-
-    .verbs-intro{
-      max-width: none;
-    }
-
-    .verbs-hero-more{
-      max-height: none;
-      opacity: 1;
-      overflow: visible;
-    }
-
-    .verbs-hero-toggle{
-      display: none !important;
-    }
-
-    :global(body.is-verbes-de-la-scene-page.verbs-follow-on .verbs-hero){
-      border-radius: 22px;
-      margin-bottom: 20px;
-      padding: 14px 14px 16px;
-      row-gap: 12px;
-    }
-  }
-
   @media (prefers-color-scheme: dark){
-    .verbs-card,
-    .verbs-aside__block{
+    .verbs-card{
       background: rgba(255,255,255,0.04);
     }
 
-    .verbs-card:hover{
+    .verbs-card:hover,
+    .verbs-card--link:hover{
       background: rgba(255,255,255,0.07);
     }
   }