Merge pull request 'chore/prologue-reimport-final-20260327' (#306) from chore/prologue-reimport-final-20260327 into main

Reviewed-on: #306

package.json

@@ -10,7 +10,8 @@
     "clean": "rm -rf dist",
     "build": "astro build",
     "build:clean": "npm run clean && npm run build",
-    "postbuild": "node scripts/inject-anchor-aliases.mjs && node scripts/dedupe-ids-dist.mjs && node scripts/build-para-index.mjs && node scripts/build-annotations-index.mjs && node scripts/purge-dist-dev-whoami.mjs && npx pagefind --site dist",
+    "build:search": "pagefind --site dist",
+    "postbuild": "node scripts/inject-anchor-aliases.mjs && node scripts/dedupe-ids-dist.mjs && node scripts/build-para-index.mjs && node scripts/build-annotations-index.mjs && node scripts/purge-dist-dev-whoami.mjs && npm run build:search",
     "import": "node scripts/import-docx.mjs",
     "apply:ticket": "node scripts/apply-ticket.mjs",
     "audit:dist": "node scripts/audit-dist.mjs",

scripts/import-docx.mjs

@@ -275,7 +275,22 @@ async function main() {
       atlas:          { edition: "atlas",        status: "atlas",                 level: 1 },
     };
 
-    const defaults = schemaDefaultsByCollection[outCollection] || { edition: outCollection, status: "draft", level: 1 };
+    // Compat legacy :
+    // manifest collection="archicratie" + slug="archicrat-ia/..."
+    // => on écrit bien dans src/content/archicrat-ia/...
+    // => mais on conserve edition/status historiques de type archicratie/modele_sociopolitique
+    const defaultsKey =
+      String(it.collection || "").trim() === "archicratie" &&
+      String(it.slug || "").trim().startsWith("archicrat-ia/")
+        ? "archicratie"
+        : outCollection;
+
+    const defaults =
+      schemaDefaultsByCollection[defaultsKey] || {
+        edition: defaultsKey,
+        status: "draft",
+        level: 1,
+      };
 
     const fm = [
       "---",

sources/manifest.yml

@@ -16,7 +16,7 @@ docs:
   - source: sources/docx/archicrat-ia/Prologue—Archicratie-fondation_et_finalite_sociopolitique_et_historique-version_officielle.docx
     collection: archicratie
     slug: archicrat-ia/prologue
-    title: "Prologue — Fondation et finalité sociopolitique et historique"
+    title: "Prologue — Fondation, finalité sociopolitique et historique"
     order: 10
 
   - source: sources/docx/archicrat-ia/Chapitre_1—Fondements_epistemologiques_et_modelisation_Archicratie-version_officielle.docx

src/anchors/anchor-aliases.json

@@ -1,11 +1 @@
-{
-  "/archicrat-ia/prologue/": {
-    "p-0-d7974f88": "p-0-e729df02",
-    "p-17-b8c5bf21": "p-17-3deef56b",
-    "p-22-a416d473": "p-22-5bfa283b",
-    "p-23-d91a7b78": "p-23-0e7b37e9",
-    "p-4-8ed4f807": "p-4-90b2a1cc",
-    "p-5-85126fa5": "p-5-d788c546",
-    "p-7-64a0ca9c": "p-7-4efdb1d4"
-  }
-}
+{}

src/components/GlossaryEntryHero.astro

@@ -91,31 +91,44 @@ const hasScholarlyMeta =
   }
 
   .glossary-entry-head__title{
-    padding: 18px 18px 16px;
+    padding:
+      var(--entry-hero-pad-top, 18px)
+      var(--entry-hero-pad-x, 18px)
+      calc(var(--entry-hero-pad-top, 18px) - 2px);
+    transition: padding 180ms ease;
   }
-
+  
   .glossary-entry-head h1{
     margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
+    font-size: var(--entry-hero-h1-size, clamp(2.2rem, 4vw, 3.15rem));
     line-height: 1.02;
     letter-spacing: -.04em;
     font-weight: 850;
+    transition: font-size 180ms ease;
   }
 
   .glossary-entry-summary{
     display: grid;
-    gap: 14px;
-    padding: 16px 18px 18px;
+    gap: var(--entry-hero-gap, 14px);
+    padding:
+      calc(var(--entry-hero-pad-bottom, 18px) - 2px)
+      var(--entry-hero-pad-x, 18px)
+      var(--entry-hero-pad-bottom, 18px);
     border-top: 1px solid rgba(127,127,127,0.14);
     background: rgba(255,255,255,0.02);
+    transition: gap 180ms ease, padding 180ms ease;
   }
 
   .glossary-entry-dek{
     margin: 0;
-    max-width: 76ch;
-    font-size: 1.04rem;
-    line-height: 1.55;
+    max-width: var(--entry-hero-dek-maxw, 76ch);
+    font-size: var(--entry-hero-dek-size, 1.04rem);
+    line-height: var(--entry-hero-dek-lh, 1.55);
     opacity: .94;
+    transition:
+      max-width 180ms ease,
+      font-size 180ms ease,
+      line-height 180ms ease;
   }
 
   .glossary-entry-signals{
@@ -123,6 +136,7 @@ const hasScholarlyMeta =
     flex-wrap: wrap;
     gap: 8px;
     margin: 0;
+    transition: gap 180ms ease;
   }
 
   .glossary-pill{
@@ -135,6 +149,11 @@ const hasScholarlyMeta =
     background: rgba(127,127,127,0.05);
     font-size: 13px;
     line-height: 1.35;
+    transition:
+      padding 180ms ease,
+      font-size 180ms ease,
+      background 120ms ease,
+      border-color 120ms ease;
   }
 
   .glossary-pill--family{
@@ -148,6 +167,14 @@ const hasScholarlyMeta =
     border: 1px solid rgba(127,127,127,0.18);
     border-radius: 12px;
     background: rgba(127,127,127,0.04);
+    max-height: var(--entry-hero-meta-max-h, 12rem);
+    opacity: var(--entry-hero-meta-opacity, 1);
+    overflow: hidden;
+    transition:
+      max-height 180ms ease,
+      opacity 140ms ease,
+      padding 180ms ease,
+      border-color 180ms ease;
   }
 
   .glossary-entry-meta p{

src/components/GlossaryEntryStickySync.astro

@@ -114,6 +114,10 @@
     z-index: 10;
   }
 
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
+    gap: 6px;
+  }
+
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
     margin-bottom: 0;
     border-bottom-left-radius: 0;
@@ -126,12 +130,21 @@
     padding-bottom: 10px;
   }
 
-  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
-    gap: 6px;
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-dek){
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-pill){
+    padding: 4px 8px;
+    font-size: 12px;
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-meta){
-    padding: 8px 10px;
+    padding: 0;
+    border-color: transparent;
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow){

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>

src/components/GlossaryPortalCta.astro

@@ -0,0 +1,87 @@
+---
+export interface Props {
+  href: string;
+  label: string;
+  icon?: string;
+  className?: string;
+}
+
+const {
+  href,
+  label,
+  icon = "↗",
+  className,
+} = Astro.props;
+---
+
+<a class:list={["glossary-portal-cta", className]} href={href}>
+  <span>{label}</span>
+  <span aria-hidden="true">{icon}</span>
+</a>
+
+<style>
+  .glossary-portal-cta{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 40px;
+    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;
+  }
+
+  .glossary-portal-cta: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;
+  }
+
+  .glossary-portal-cta:focus-visible{
+    outline: 2px solid rgba(0,217,255,0.28);
+    outline-offset: 4px;
+  }
+
+  @media (max-width: 720px){
+    .glossary-portal-cta{
+      width: 100%;
+    }
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-portal-cta{
+      background:
+        linear-gradient(180deg, rgba(0,217,255,0.12), rgba(0,217,255,0.05)),
+        rgba(255,255,255,0.04);
+    }
+
+    .glossary-portal-cta:hover{
+      background:
+        linear-gradient(180deg, rgba(0,217,255,0.16), rgba(0,217,255,0.07)),
+        rgba(255,255,255,0.06);
+    }
+  }
+</style>

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>

src/components/GlossaryPortalPanel.astro

@@ -0,0 +1,96 @@
+---
+export interface Props {
+  id?: string;
+  title: string;
+  count?: string;
+  intro?: string;
+  surface?: boolean;
+  className?: string;
+}
+
+const {
+  id,
+  title,
+  count,
+  intro,
+  surface = false,
+  className,
+} = Astro.props;
+---
+
+<div
+  class:list={[
+    "glossary-portal-panel",
+    surface && "glossary-portal-panel--surface",
+    className,
+  ]}
+>
+  <div class="glossary-portal-panel__head">
+    <h3 id={id}>{title}</h3>
+    {count && <span class="glossary-portal-panel__count">{count}</span>}
+  </div>
+
+  {intro && <p class="glossary-portal-panel__intro">{intro}</p>}
+
+  <slot />
+</div>
+
+<style>
+  .glossary-portal-panel{
+    display: grid;
+    gap: 12px;
+  }
+
+  .glossary-portal-panel--surface{
+    padding: 18px 18px 16px;
+    border: 1px solid var(--glossary-border, 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)),
+      var(--glossary-bg-soft, rgba(127,127,127,0.035));
+  }
+
+  .glossary-portal-panel__head{
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .glossary-portal-panel__head h3{
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.3;
+    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 36px);
+  }
+
+  .glossary-portal-panel__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;
+  }
+
+  .glossary-portal-panel__intro{
+    max-width: 78ch;
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.5;
+    opacity: .9;
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-portal-panel--surface{
+      background:
+        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
+        rgba(255,255,255,0.04);
+    }
+  }
+</style>

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>

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>

src/components/GlossaryRelationCards.astro

@@ -7,12 +7,15 @@ interface Props {
 }
 
 const { relationBlocks = [] } = Astro.props;
+const relationsHeadingId = "relations-conceptuelles";
 ---
 
 {relationBlocks.length > 0 && (
-  <section class="glossary-relations" aria-label="Relations conceptuelles">
-    <h2>Relations conceptuelles</h2>
-
+  <section
+    class="glossary-relations"
+    aria-labelledby={relationsHeadingId}
+  >
+    <h2 id={relationsHeadingId}>Relations conceptuelles</h2>
     <div class="glossary-relations-grid">
       {relationBlocks.map((block) => (
         <section class={`glossary-relations-card ${block.className}`}>

src/content/archicrat-ia/prologue.mdx

@@ -12,21 +12,22 @@ source:
   kind: docx
   path: "sources/docx/archicrat-ia/Prologue—Archicratie-fondation_et_finalite_sociopolitique_et_historique-version_officielle.docx"
 ---
-Nous vivons une époque saturée de diagnostics sur les formes de domination, les mutations du pouvoir, les détournements de la souveraineté. Depuis une vingtaine d’années, les appellations s’accumulent : démocratie illibérale, ploutocratie, happycratie, gouvernement algorithmique, démocrature… À travers ces tentatives de nommer le désordre du présent, un fait se répète, de manière sourde : la scène politique semble désorientée. Les catégories héritées — État, pouvoir, représentation, volonté générale, contrat social — apparaissent de moins en moins capables de décrire ce qui nous gouverne effectivement.
+Nous vivons dans une époque saturée de diagnostics sur les formes de domination, les mutations du pouvoir, les détournements de la souveraineté. Depuis une vingtaine d’années, les appellations s’accumulent : *démocratie illibérale*, *ploutocratie*, *happycratie*, *gouvernement algorithmique*, *démocrature*… À travers ces tentatives de nommer le désordre du présent, un fait se répète, de manière sourde : la scène politique semble désorientée. Les catégories héritées — *État*, *pouvoir*, *représentation*, *volonté générale*, *contrat social* — apparaissent de moins en moins capables de décrire ce qui nous gouverne effectivement.
 
 C’est cette perte de prise sur le réel que ce livre souhaite prendre au sérieux. Non pour lui ajouter un terme de plus au lexique fatigué des contre-pouvoirs ou des impuissances, mais pour repartir d’un point plus fondamental, presque en-deçà de la question politique classique. Ce point, c’est celui de la *tenue d’un monde commun* — c’est-à-dire la possibilité, pour des êtres dissemblables, vulnérables, inégaux, traversés de contradictions et situés dans des temporalités hétérogènes, de coexister sans s’annihiler.
 
 Cette tenue du monde n’équivaut ni à la paix civile, ni à la stabilité des institutions, ni à l’ordre établi. C’est une difficulté conceptuelle que d’envisager *la possibilité pour un ordre de durer sans s’effondrer*, alors même qu’il est traversé en permanence par des forces et des légitimités qui le travaillent, l’éprouvent, le modifient, l’usent, le contestent, le prolongent ou le sapent. Cette possibilité de tenir le monde commun, nous la nommons *co-viabilité*.
 
-Le terme n’est pas trivial. Il ne s’agit pas simplement d’une viabilité partagée, ni d’une coexistence pacifique, ni même d’une durabilité écologique élargie. Il s’agit d’un état dynamique, instable, fragile, dans lequel un ensemble — une société, d’un système biologique, d’une formation historique, d’un milieu technique ou d’un monde institué — parvient à maintenir une *existence viable*, *malgré et grâce à ses tensions constitutives*.
+Le terme n’est pas trivial. Il ne désigne ni une simple viabilité partagée, ni une coexistence pacifiée, ni une durabilité écologique élargie. Il renvoie à la possibilité, toujours fragile, pour un monde hétérogène de maintenir une existence viable en travaillant, sans les abolir, les tensions qui le traversent.
 
-La co-viabilité ne désigne ni un état d’équilibre, ni une finalité normative. Elle nomme un état dynamique et instable, dans lequel un monde — société, milieu technique, formation historique — tient non pas par homogénéité ou harmonie, mais parce qu’il parvient à réguler ce qui le menace sans se détruire lui-même. Il compose entre des éléments hétérogènes — forces d’inertie et d’innovation, attachements profonds et ruptures nécessaires — sans chercher à les unifier. C’est cette disposition active, faite de compromis fragiles et d’ajustements toujours révisables, que nous tenons pour première.
+La *co-viabilité* ne désigne ni un état d’équilibre, ni une finalité normative. Elle nomme un état dynamique et instable, dans lequel un ensemble — une société, un système biologique, une formation historique, un milieu technique ou un monde institué — tient non pas par homogénéité ou harmonie, mais parce qu’il parvient à réguler ce qui le menace sans se détruire lui-même. Il compose entre des éléments hétérogènes — forces d’inertie et d’innovation, attachements profonds et ruptures nécessaires — sans chercher à les unifier. C’est cette disposition active, faite de compromis fragiles et d’ajustements toujours révisables, que nous tenons pour première, et non dérivée.
 
-Ce qui revient à dire que la question politique — au sens fort — n’a peut-être jamais été qui commande ? Mais bien plus : Comment un ordre tient-il malgré ce qui le défait ? Quels sont les dispositifs qui permettent à une société de ne pas se désagréger sous l’effet de ses propres contradictions ? Comment sont régulées les tensions qui traversent le tissu du monde commun sans le déchirer ? Cette bascule de perspective prolonge des intuitions anciennes. Max Weber (Économie et société, 1922) rappelait que ce qui fait tenir un ordre, ce n’est pas seulement la force ou la loi, mais les « chances de validité » socialement reconnues. Norbert Elias (La dynamique de l’Occident, 1939/1975) montrait, quant à lui, que les sociétés se maintiennent par des équilibres toujours précaires entre interdépendances, rivalités et pacifications. Notre démarche s’inscrit dans ce sillage : travailler cette interrogation sur les conditions de viabilité d’un monde commun soumis à ses propres tensions constitutives.
+Ce qui revient à dire que la question politique — au sens fort — n’a peut-être jamais été qui commande ? Mais bien plus : *Comment un ordre tient-il malgré ce qui le défait ?* *Quels sont les dispositifs qui permettent à une société de ne pas se désagréger sous l’effet de ses propres contradictions ?* *Comment sont régulées les tensions qui traversent le tissu du monde commun sans le déchirer ?*  
+Cette bascule de perspective prolonge des intuitions anciennes. Max Weber (*Économie et société*, 1922) rappelait que ce qui fait tenir un ordre, ce n’est pas seulement la force ou la loi, mais les « chances de validité » socialement reconnues. Norbert Elias (*La dynamique de l’Occident*, 1939/1975) montrait, quant à lui, que les sociétés se maintiennent par des équilibres toujours précaires entre interdépendances, rivalités et pacifications. Notre démarche s’inscrit dans ce sillage : travailler cette interrogation sur les *conditions de viabilité d’un monde commun*.
 
 Ce changement de perspective implique une rupture profonde dans la manière même de poser la question politique. Pendant des siècles, les sociétés ont pensé le politique à partir de principes transcendants — Dieu, Nature, Volonté générale, Pacte social. Ces principes, supposés extérieurs aux conflits du présent, garantissaient l’ordre en surplomb. Comme le rappelle Michel Foucault, il n’y a pas de principe extérieur au jeu des forces : seulement des rapports de pouvoir situés, modulés, réversibles. C’est précisément cette exigence — trouver dans les relations elles-mêmes les ressources nécessaires pour maintenir des mondes vivables — qui définit notre époque.
 
-Ce qui émerge n’est pas de nouveaux principes, ni une nouvelle idéologie, mais une exigence beaucoup plus modeste, mais aussi beaucoup plus difficile à satisfaire : celle de trouver dans les relations elles-mêmes — entre groupes, entre institutions, entre individus, entre temporalités — les ressources nécessaires pour maintenir leurs mondes viables. Autrement dit : c’est dans les tensions, à même les conflits, au sein des alliances, au cœur des désaccords et des polémiques, que semble se construire la régulation. Non plus au-dessus, par un décret transcendant, mais au-dedans, par un agencement toujours révisable. C’est cela que nous voulons dire — sans technicité inutile — quand nous parlons d’un déplacement vers une instance de régulation située de co-viabilité : un espace commun où les forces hétérogènes, souvent antagonistes, peuvent coexister, se contredire, se confronter, s’éprouver, sans pour autant systématiquement se détruire mutuellement.
+Ce qui émerge n’est pas de nouveaux principes, ni une nouvelle idéologie, mais une exigence beaucoup plus modeste, mais aussi beaucoup plus difficile à satisfaire : celle de trouver dans les relations elles-mêmes — entre groupes, entre institutions, entre individus, entre temporalités — les ressources nécessaires pour maintenir leurs mondes viables. Autrement dit : c’est *dans* les tensions, *à même* les conflits, *au sein* des alliances, *au cœur* des désaccords et des polémiques, que semble se construire la régulation. Non plus *au-dessus*, par un décret transcendant, mais *au-dedans*, par un agencement toujours révisable. C’est cela que nous voulons dire — sans technicité inutile — quand nous parlons d’un déplacement vers une *instance de régulation située de co-viabilité* : un espace commun où les forces hétérogènes, souvent antagonistes, peuvent coexister, se contredire, se confronter, s’éprouver, sans se détruire mutuellement.
 
 Penser le politique depuis cette approche, c’est renoncer à l’idée même qu’un ordre puisse se fonder définitivement, une fois pour toutes. C’est reconnaître que ce qui fait tenir une société n’est jamais un principe unique, un commandement souverain, une légitimité première, mais *un espace d’épreuve toujours rejoué* où se négocient, se recadrent, s’opposent, s’ajustent des forces hétérogènes dont l’accord est constamment partiel, toujours temporaire, perpétuellement instable.
 
@@ -46,7 +47,7 @@ Cela ne veut pas dire que le politique ait disparu, mais plutôt qu’il tend pe
 
 C’est un marché carbone qui, au nom de seuils agrégés à l’échelle continentale, conduit à la fermeture d’un site industriel local, sans qu’aucune figure politique ne puisse rendre visible ni opposable l’arbitrage opéré. C’est un algorithme de régulation hospitalière qui, face à une tension budgétaire ou épidémiologique, déprogramme automatiquement des interventions chirurgicales — sans qu’aucun médecin, aucun patient, aucun responsable politique ne puisse véritablement en discuter les critères. C’est une plateforme numérique de traitement des titres de séjour qui suspend une demande pour “anomalie de saisie”, sans contact humain, sans justification claire, sans voie de recours instituée. C’est un logiciel de pilotage budgétaire, adossé à des indicateurs d’efficience, qui impose la réduction d’une politique sociale sans passage par une arène délibérative. C’est aussi un score algorithmique de risque bancaire qui écarte discrètement une famille d’un prêt, bien avant qu’elle ait pu formuler son projet.
 
-Contrairement aux apparences, ce qui s’offre au regard n’est plus la figure massive du pouvoir trônant dans la clarté de ses apparats, mais la trame patiente d’une régulation en mouvement. Disparues, les instances fixes ; effacée, la demeure solennelle de l’autorité. Le réel geste de gouvernance s’insinue dans des protocoles, se glisse sournoisement dans la routine, s’entrelace irrémédiablement dans les habitudes, se ramifie inextricablement dans d’innombrables appareils sans visage. Nul acte inaugural n’en marque ostensiblement la naissance, nulle proclamation n’en scande les rythmes. On constate seulement que la régulation avance sans fracas, tisse patiemment la toile discrète sur laquelle se déplacent nos vies. Ce n’est plus tant le décret ni la loi qui pèsent, bien plus les enchevêtrements de normes, l’imperceptible maillage de procédures et l’ajustement continu de directives flexibles.
+Contrairement aux apparences, ce qui s’offre au regard n’est plus la figure massive du pouvoir trônant dans la clarté de ses apparats, mais la trame patiente d’une régulation en mouvement. Disparues, les instances fixes ; effacée, la demeure solennelle de l’autorité. Le réel geste de gouvernance s’insinue insidieusement dans des protocoles, se glisse sournoisement dans la routine, s’entrelace irrémédiablement dans les habitudes, se ramifie inextricablement dans d’innombrables appareils sans visage. Nul acte inaugural n’en marque ostensiblement la naissance, nulle proclamation n’en scande les rythmes. On constate seulement que la régulation avance sans fracas, tisse patiemment la toile discrète sur laquelle se déplacent nos vies. Ce n’est plus tant le décret ni la loi qui pèsent, bien plus les enchevêtrements de normes, l’imperceptible maillage de procédures et l’ajustement continu de directives flexibles.
 
 La contrainte n’accable plus par l’ostentation de l’ordre, mais s’inocule par la subtilité des systèmes. Ainsi, il s’agit désormais de façonner, par l’agencement soigné d’équilibres, de données, de flux, où chacun se trouve relié, indexé, impliqué à même cette dentelle administrative, sans jamais croiser le centre, sans jamais savoir nommer celui ou ce qui agit. La régulation moderne tresse ainsi un univers de seuils mobiles et d’agencements souples, où l’on ne peut jamais tout à fait fixer le moment ni le lieu du pouvoir agissant — mais où, à chaque pli de la vie collective, se lit l’empreinte d’une architecture invisible.
 
@@ -54,11 +55,11 @@ La difficulté d’y résister tient moins à une violence perceptible qu’à l
 
 Cela signifie que le politique s’est décousu de ses formes historiques. Il continue d’agir, de décider, d’orienter — mais sous d’autres modalités, dans d’autres lieux, avec d’autres instruments, selon des régimes d’opérativité qu’aucune des catégories anciennes ne parvient plus à saisir, à rendre intelligible et à traduire sans trahir.
 
-Autrement dit, nous avons changé d’époque sans encore avoir pu changé de lexique. Nous continuons de penser avec des formes obsolètes ce qui s’active sous nos yeux. Nous employons les mots d’hier pour décrire des processus qui les excèdent de toutes parts. Nous parlons de gouvernements, là où il faudrait parler de structures de régulation composite. Nous discutons de lois, là où il faudrait décrire des protocoles, des seuils, des scénographies d’ajustement, des mécanismes de *feedback* algorithmique, des normes sans normalisateurs.
+Autrement dit, nous avons changé d’époque sans encore avoir pu changer de lexique. Nous continuons de penser avec des formes obsolètes ce qui s’active sous nos yeux. Nous employons les mots d’hier pour décrire des processus qui les excèdent de toutes parts. Nous parlons de gouvernements, là où il faudrait parler de structures de régulation composite. Nous discutons de lois, là où il faudrait décrire des protocoles, des seuils, des scénographies d’ajustement, des mécanismes de *feedback* algorithmique, des normes sans normalisateurs.
 
-Cette disjonction entre l’expérience vécue de la contrainte et le vocabulaire disponible pour l'exprimer n’est pas qu’un problème théorique. Elle produit une désorientation profonde. Elle empêche de penser le réel, de localiser les responsabilités et rend inopérantes les critiques. Elle altère la capacité collective à formuler des exigences, jusqu’à dissoudre les repères et les registres d’action.
+Cette disjonction entre l’expérience vécue de la contrainte et le vocabulaire disponible pour la dire n’est pas qu’un problème théorique. Elle produit une désorientation profonde. Elle empêche de penser le réel, de localiser les responsabilités et rend inopérantes les critiques. Elle altère la capacité collective à formuler des exigences, jusqu’à dissoudre les repères et les registres d’action.
 
-Cette impuissance démocratique à nommer, situer et orienter les formes réelles de la régulation — impuissance qui tend à se généraliser — apparaît parfois au grand jour dans des situations d’apparente clarté, ce qui est peut‑être le plus troublant. En témoigne un exemple rendu brûlant par l’actualité française de 2025 : la proposition de ce qu’on a appelé la taxe Zucman. Formulée par l’économiste Gabriel Zucman, cette mesure prévoit l’instauration d’un impôt minimal annuel sur le patrimoine des ultra-riches, en France comme à l’échelle mondiale, au‑delà d’un seuil d’environ 100 millions d’euros. Le taux proposé, de l’ordre de 2% de la valeur totale du patrimoine net, qu’il soit liquide ou non (actions non cotées, participations, biens immobiliers), soulève toutefois d’importants problèmes de paiement et d’évaluation.
+Cette impuissance démocratique généralisée à nommer, situer, orienter les formes réelles de la régulation se donne parfois à voir dans des situations d’apparente clarté — et c’est peut-être là le plus troublant. Prenons un exemple rendu brûlant par l’actualité française en 2025 : la proposition de ce que l’on appelle la *taxe Zucman*. Formulée par l’éminent économiste Gabriel Zucman, cette mesure vise à instaurer un impôt minimal annuel sur le patrimoine des ultra-riches — en France et dans le monde — au-delà d’un seuil (autour de 100 millions d’euros). Le taux proposé est d’environ 2 % sur la valeur totale du patrimoine net, qu’il soit liquide ou partiellement non liquide (actions non cotées, participations, biens immobiliers), ce qui pose des défis de paiement et d’évaluation.
 
 L’idée est de corriger ce que Zucman identifie comme un déséquilibre fiscal majeur : les très grandes fortunes paient aujourd’hui, proportionnellement, beaucoup moins que ce que permettrait une imposition équitable et progressive, notamment en raison de l’évasion fiscale, de la mise sous structures opaques par *holding*, du transfert du patrimoine privée en patrimoine professionnel ou de la dissociation entre richesse effective et revenu imposable.
 
@@ -102,9 +103,9 @@ Cette désactivation des anciennes scènes de visibilité ne relève pas d’une
 
 Ce court-circuitage du résultat du référendum n’a pas seulement provoqué un malaise démocratique : il a signalé l’obsolescence d’une arène politique qui prétend encore incarner la souveraineté populaire, tout en s’ajustant aux impératifs d’une régulation supranationale désindexée de tout espace de débat. Depuis, les grandes décisions se prennent largement hors scène, dans des configurations qui échappent aux rituels de la légitimation représentative. L’épisode du TCE fut ainsi moins une exception qu’un révélateur : la souveraineté n’a pas disparu, elle s’est déplacée et s’est muée ; et ce sont les lieux traditionnels de confrontation — qui permettaient de la contester — qui perdent peu à peu de leur puissance.
 
-Il en résulte aujourd’hui ce que l’on pourrait nommer *une vacance des figures politiques*. Non pas un vide institutionnel — les appareils demeurent — ni un abandon total du pouvoir — les décisions continuent de tomber — mais bien un effacement progressif des repères identifiables à travers lesquelles ce pouvoir pouvait encore être *pensé*, *nommé*, *interrogé*, *disputé ou dénoncé*. Ce qui fait défaut, ce ne sont ni les procédures, ni les organigrammes, ni les énoncés de façade ; le pouvoir ne parvient plus à lui donner horizon partagé, épreuve contradictoire et adresse signifiante.
+Il en résulte aujourd’hui ce que l’on pourrait nommer une vacance des figures politiques. Non pas un vide institutionnel — les appareils demeurent — ni un abandon total du pouvoir — les décisions continuent de tomber — mais un effacement progressif des repères identifiables à travers lesquels ce pouvoir pouvait encore être pensé, nommé, interrogé, disputé ou dénoncé. Ce qui fait défaut, ce ne sont ni les procédures, ni les organigrammes, ni les énoncés de façade, mais les conditions mêmes d’un horizon partagé, d’une épreuve contradictoire et d’une adresse signifiante du pouvoir.
 
-Les institutions demeurent et fonctionnent. Des lois sont encore votées, des ordonnances promulguées, des discours prononcés dans des formes toujours codifiées. Pourtant, ces énoncés institutionnels, malgré leur constance formelle, peinent à produire de l’attachement, du conflit réglé, du récit commun. Il faut dire que lorsque les grandes directives sont déjà prises ailleurs, et qu’une tutelle s’exerce sur les marges de manœuvre budgétaire et les politiques publiques, tout programme de rupture avec l’existant ne peut advenir sans discrédit. Ceci conduit jusqu’à présent à entériner et à traduire en terme juridique les grands principes issus des institutions européennes. Ainsi nos partis politiques et nos institutions s’amenuisent et perdent de leur influence : elles peinent à percer les seuils et à générer des événements rassembleurs. Ils surviennent, puis s’évanouissent — rarement débattus, rarement disputés. Ils tentent néanmoins de transformer mais restent peu crédibles. La vie démocratique ne parvient plus à infléchir ledit pouvoir dans une visée d’horizon partagé puisque sa souveraineté s’est vue entachée.
+Les institutions demeurent et fonctionnent. Des lois sont encore votées, des ordonnances promulguées, des discours prononcés dans des formes toujours codifiées. Pourtant, ces énoncés institutionnels, malgré leur constance formelle, peinent à produire de l’attachement, du conflit réglé et du récit commun. Lorsque les grandes directives sont déjà prises ailleurs, et qu’une tutelle s’exerce sur les marges de manœuvre budgétaire et les politiques publiques, tout programme de rupture avec l’existant se trouve d’emblée frappé de discrédit. Il en résulte une tendance à entériner et à traduire en termes juridiques les grands principes issus des institutions européennes. Ainsi, nos partis politiques et nos institutions s’amenuisent et perdent de leur influence : ils peinent à ouvrir des brèches, à franchir des seuils, à générer des événements rassembleurs. Les moments qu’ils produisent surviennent puis s’évanouissent — rarement débattus, rarement disputés. Ils prétendent encore transformer, mais peinent de plus en plus à convaincre. La vie démocratique ne parvient plus à infléchir ledit pouvoir dans une visée d’horizon partagé puisque sa souveraineté se voit entachée.
 
 Peut-être faut-il alors suspendre un instant le flux de l’analyse pour ouvrir la perspective : entendre ce que cette disparition fait à nos imaginaires. Car perdre les lieux de confrontation, ce n’est pas perdre uniquement un espace politique — c’est voir s’effacer le langage commun de la mise en tension, de l’épreuve contradictoire, du désaccord rendu partageable. En somme, celui-ci n’est pas qu’un cadre, mais aussi une forme sensible, un rythme, un tempo, un théâtre où pouvaient s’exprimer les dissensus, mais aussi se nouer des alliances, des compromis, des co-habitations et des promesses de coexistence. C’est cette mise en forme qui vacille aujourd’hui — et avec elle, notre capacité à rendre visibles les lignes de fracture, les régimes d’attachement, les besoins vitaux et leurs modalités d’arbitrage.
 
@@ -142,7 +143,7 @@ Dans notre analyse, le moment néolibéral a précisément perturbé cette artic
 
 Pour en sortir, il faut retrouver les gestes fondamentaux à partir desquels un monde collectif peut encore être rendu lisible et vivable. Ce geste, nous le nommons ici : *archéologie de la régulation*. Si l’on veut comprendre ce qui se défait dans les régulations contemporaines — non pas de manière conjoncturelle, mais de façon structurelle —, il est impératif de remonter en amont des formes politiques connues, jusqu’aux forces sémantiques primitives que notre lexique transporte souvent à son insu.
 
-C’est en reprenant le fil depuis ses origines étymologiques que nous pourrons reconstituer la force d’arrachement de ces termes, les faire parler à nouveau — non comme vestiges, mais comme opérateurs toujours actifs, toujours présents, sous des formes multiples et plurielles. Ce détour par la langue n’est pas un exercice érudit. C’est une tentative de ré-accorder le langage à l’expérience vécu, de ressaisir les prises fondamentales du pouvoir à travers leurs gestes constituants et fondateurs.
+C’est en reprenant le fil depuis ses origines étymologiques que nous pourrons reconstituer la force d’arrachement de ces termes, les faire parler à nouveau — non comme vestiges, mais comme opérateurs toujours actifs, toujours présents, sous des formes multiples et plurielles. Ce détour par la langue n’est pas un exercice érudit. C’est une tentative de réaccorder le langage à l’expérience vécue, de ressaisir les prises fondamentales du pouvoir à travers leurs gestes constituants et fondateurs.
 
 Ainsi, les suffixes en *-archie* et en *-cratie*, que nous avons évoqués plus haut comme désignations de régimes, sont bien plus que des marqueurs grammaticaux, ils condensent des opérations fondamentales du politique. Plus précisément, ils signalent deux gestes constitutifs et irréductibles dans toute structuration collective : *celui du fondement* (*arkhè*) *et celui de l’exercice* (*kratos*). Le premier désigne l’*origine légitime* ; le second, la *puissance agissante*. Mais dans leur réduction lexicale, ces deux gestes ont été figés et dissociés en formes de régime, perdant de vue leur fonction dynamique et conjointe dans tout ordre social : *fonder* et *faire agir.* C’est pour restituer leur opérativité conceptuelle que nous introduisons ici les termes d’*arcalité* et de *cratialité*.
 
@@ -216,65 +217,65 @@ Mais si ces deux pôles — celui du fondement (*arcalité*) et celui de l’op
 
 Et c’est précisément ce point d’articulation que nous voulons nommer, penser et problématiser ici.
 
-Si l’*arcalité* est *ce qui légitime*, et la *cratialité* *ce qui exerce*, alors l’*archicration* est le *nœud de leur articulation effective*. Elle désigne cette opération composite, toujours située, par laquelle un pouvoir donné fonde son action et agit selon son fondement — ou, inversement, agit tout en produisant sa propre légitimation — à la condition de se laisser exposer dans une scène d’épreuve. L’*archicration* est ce *point de nouage où se rejoignent la question du pourquoi* (*pourquoi ce pouvoir est-il reconnu ?*) *et celle du comment* (*comment ce pouvoir opère-t-il effectivement ?*), là où cette rencontre devient publiquement opposable. Non pas deux dimensions juxtaposées, mais deux régimes co-constitutifs de toute scène régulatrice.
+Si l’arcalité désigne ce au nom de quoi un ordre prétend agir, et la cratialité les chaînes par lesquelles il agit effectivement, alors l’archicration désigne la scène instituée où cet ordre expose, à sa manière, ses fondements et ses dispositifs à une épreuve, à une contestation, à une confirmation ou à une reconfiguration.
 
-Ainsi, de la fusion des deux termes (*arkhè* et *krateîn*) naît l’*archicration* : *l’acte de fonder en agissant, ou d’agir en fondant*. Factuellement, dans les régulations politiques concrètes, il n’y a jamais de pouvoir qui se contente de dire sans faire, ni d’agir sans justifier. Tout dispositif un tant soit peu structurant articule, à sa manière, un *arkhè* *qui justifie* et un *krateîn qui effectue*.
+L’archicration est la scène dans laquelle se rejoignent la question du pourquoi (pourquoi ce pouvoir est-il reconnu ?) et celle du comment (comment ce pouvoir opère-t-il effectivement ?), lorsque cette rencontre devient exposable, disputable et publiquement opposable. Il ne s’agit pas de deux dimensions juxtaposées, mais de deux régimes dont l’articulation ne devient politiquement décisive qu’à travers une épreuve instituée.
+
+Ainsi comprise, l’archicration ne nomme pas la totalité de l’acte politique, mais la scène où un ordre se rend à nouveau adressable, en exposant ses fondements et ses opérations à une épreuve réglée. Factuellement, dans les régulations politiques concrètes, il n’y a jamais de pouvoir qui se contente de dire sans faire, ni d’agir sans justifier. Tout dispositif un tant soit peu structurant articule, à sa manière, un *arkhè* *qui justifie* et un *krateîn qui effectue*.
 
 La force heuristique du concept d’*archicration*, c’est donc de réinscrire dans un même geste ce que la modernité politique avait tendance à dissocier : d’un côté, la légitimation (par le droit, le peuple, Dieu, la science…), de l’autre, l’effectuation (par les lois, les institutions, les techniques, les procédures…). Le pouvoir moderne s’est souvent construit sur une prétention à l’extériorité : l’action devait découler d’un principe, comme si l’on pouvait d’abord fonder, ensuite agir. Cette dissociation était une fiction structurante, utile pour l’ordre symbolique, mais inopérante pour une lecture du réel.
 
-En vérité, les régulations contemporaines — et peut-être une grande partie des régulations passées, cela reste à être étayé — peuvent être relues comme des agencements archicratifs, plus ou moins explicites, plus ou moins stables, mais toujours composite : l’État-nation est une *archicration* qui articule une *arcalité constitutionnelle* (la souveraineté populaire) à des *cratialités institutionnelles* (le gouvernement, l’administration, la police, l’armée, etc.). Il en va de même pour les grandes plateformes numériques qui articulent des *arcalités technoscientifiques* (la promesse de l’innovation, la rationalité du code, la neutralité de l’algorithme) à des *cratialités infra-visibles* (le filtrage, l’instrumentation, la captation de données, la modulation du comportement). Même un ordre religieux — ou un régime dit théocratique — n’échappe pas à cette logique : il articule des *arcalités transcendantes* (le texte révélé, la Loi divine, les prophètes, le Messie) à des *cratialités rituelles et doctrinales* (l’interprétation, la sanction, le commandement, la discipline).
+En vérité, les régulations contemporaines peuvent être relues comme des configurations archicratiques, c’est-à-dire comme des agencements variables d’arcalité, de cratialité et d’archicration. L’État-nation, par exemple, articule une arcalité constitutionnelle à des cratialités institutionnelles, et n’institue des archicrations qu’à travers certaines scènes déterminées — assemblées, tribunaux, procédures de recours, controverses publiques, dispositifs de révision. Même un ordre religieux — ou un régime dit théocratique — n’échappe pas à cette logique : il articule des *arcalités transcendantes* (le texte révélé, la Loi divine, les prophètes, le Messie) à des *cratialités rituelles et doctrinales* (l’interprétation, la sanction, le commandement, la discipline).
 
-L’*archicration* ne désigne donc pas un régime parmi d’autres. Elle nomme, selon toute hypothèse, le nœud vivant d’une régulation politique qui accepte de se rendre visible, différée et contestable, dès lors qu’elle vise à perdurer. De sorte qu’un pouvoir qui échoue à fonder ce qu’il opère s’expose à l’arbitraire ; un pouvoir qui échoue à opérer ce qu’il fonde s’épuise dans l’impuissance. De même, le simulacre surgit quand l’*arcalité* se dissocie de toute effectuation ; l’instabilité s’installe quand la *cratialité* ne s’adosse à aucun principe partagé. Ce que nous appelons *archicration*, c’est donc ce point de tension active et scénique où s’articulent — ou se désarticulent — le fondement et l’opération, la forme et la force, la justification et l’exécution.
+L’archicration ne désigne pas un régime parmi d’autres. Elle nomme la scène instituée où une régulation expose, selon des formes variables — parfois ouvertes, parfois captées, parfois violentes ou asymétriques — l’articulation de ses fondements et de ses opérations à une épreuve réglée, dès lors qu’elle vise à perdurer. De sorte qu’un pouvoir qui échoue à fonder ce qu’il opère s’expose à l’arbitraire ; un pouvoir qui échoue à opérer ce qu’il fonde s’épuise dans l’impuissance. De même, le simulacre surgit quand l’*arcalité* se dissocie de toute effectuation ; l’instabilité s’installe quand la *cratialité* ne s’adosse à aucun principe partagé. Ce que nous appelons archicration, c’est donc la scène instituée où s’articulent — ou se désarticulent — le fondement et l’opération, la forme et la force, la justification et l’exécution, sous la possibilité d’une épreuve réglée.
 
-Or, c’est lorsque cette articulation devient asymétrique, disjointe, ou captée, que le politique mute en profondeur — non plus sous la forme d’un changement visible de régime, mais d’un glissement silencieux des coordonnées de la régulation. Et parmi les figures contemporaines de cette désarticulation archicrative, le moment néolibéral occupe une place stratégique, tant par son étendue historique que par sa profondeur de reconfiguration. Non qu’il ait aboli la régulation — il l’a redéployée. Non qu’il ait supprimé le politique — il l’a déplacé, technicisé, encodé, rendu algorithme.
+Or, c’est lorsque cette articulation devient asymétrique, disjointe ou captée, que le politique mute en profondeur — non plus sous la forme d’un changement visible de régime, mais d’un glissement silencieux des coordonnées de la régulation. Et parmi les figures contemporaines de cette désarticulation archicrative, le moment néolibéral occupe une place stratégique, tant par son étendue historique que par sa profondeur de reconfiguration. Non qu’il ait aboli la régulation — il l’a redéployée. Non qu’il ait supprimé le politique — il l’a déplacé, technicisé, encodé, rendu algorithme.
 
-À partir des années 1970, sous l’impulsion d’intellectuels comme Friedrich Hayek et Milton Friedman, relayés par les *Chicago Boys,* amplifiés par les politiques de Ronald Reagan et Margaret Thatcher, puis par les prescriptions des grandes organisations transnationales (FMI, Banque mondiale, OMC), le néolibéralisme s’est imposé sans conquête déclarée, par glissement, par ruse, par standardisation. Il n’a pas remplacé les institutions du politique, il les a désactivés en douceur ; il n’a pas détruit l’État, il a recodé ses prérogatives régulatrices selon une nouvelle logique : celles de l’efficience, du marché, du seuil, du calcul et d’un retour sur ses fonctions régaliennes.
+À partir des années 1970, dans un contexte de mondialisation, de financiarisation croissante, de désindustrialisation occidentale et de crise des médiations collectives, le néolibéralisme s’est imposé sans conquête déclarée, par glissement, par ruse et par standardisation. Il n’a pas remplacé les institutions du politique : il les a désactivées en douceur ; il n’a pas détruit l’État : il a recodé ses prérogatives régulatrices selon une logique d’efficience, de marché, de seuil, de calcul et de recentrage sur ses fonctions régaliennes.
 
 D’un côté, cette idéologie a déplacé l’*arcalité* : le principe de fondement ne repose plus sur la souveraineté populaire, la loi, ou la délibération publique, mais sur l’*efficience marchande*. Le marché libre est présenté comme naturel, universel, neutre — et se promeut comme seul critère de légitimité. C’est ce que nous appelons ici *arcalité performative* : le fondement est produit par la performance elle-même. Le succès vaut justification. La croissance devient norme. L’indicateur remplace le débat.
 
 D’un autre côté, elle redéfinit la *cratialité* : la régulation ne passe plus par des institutions politiques visibles, mais par une gouvernance par les normes, les seuils, les indicateurs, les standards, les classements (*rankings*) et les interfaces. La décision n’est plus revendiquée ; elle s’élabore en algorithme opérationnel. Le pouvoir module, ajuste, et encode. Ce que Wendy Brown a appelé, dans *Undoing the Demos*, la “rationalité néolibérale” ne se résume pas à un discours ou à une doctrine — c’est une *cratialité généralisée*, une *logique de fonctionnement incorporée* dans les infrastructures mêmes du quotidien, où toute alternative devient impensable.
 
-Le mot d’ordre de “dérégulation” prôné par les tenants du néolibéralisme masquaient en réalité un déplacement massif de la régulation et non son annihilation. Ce qui a disparu peu à peu, ce ne sont pas les règles — elles pullulent — mais les scènes d’arbitrage où l’on pouvait encore en contester le sens, la pertinence, les effets. Les espaces publics de reconnaissance où elles pouvaient encore être mises à l’épreuve se sont effacés ou disséminés. Ainsi, chaque réforme — des retraites, de l’assurance chômage, de l’université, de l’hôpital ou de la fiscalité — est dès lors présentée non comme un choix idéologique, mais comme une évidence technico-financière, une réponse dite “rationnelle” à une contrainte supposée incontournable.
+Le mot d’ordre de “dérégulation” prôné par les tenants du néolibéralisme masquait en réalité un déplacement massif de la régulation, et non son annihilation. Ce qui a disparu peu à peu, ce ne sont pas les règles — elles pullulent — mais les scènes d’arbitrage où l’on pouvait encore en contester le sens, la pertinence, les effets. Les espaces publics de reconnaissance où elles pouvaient encore être mises à l’épreuve se sont effacés ou disséminés. Ainsi, chaque réforme — des retraites, de l’assurance chômage, de l’université, de l’hôpital ou de la fiscalité — est dès lors présentée non comme un choix idéologique, mais comme une évidence technico-financière, une réponse dite “rationnelle” à une contrainte supposée incontournable.
 
-Ce qui s’impose alors est une reconfiguration radicale des conditions d’existence. Le pouvoir n’est ni aboli ni dissimulé — il est redistribué dans des registres et des protocoles privés, encodé dans des métriques non explicites, traduit dans des novlangues tout en se distillant dans des environnements régulateurs où la fabrique du politique a été méthodiquement neutralisée. Ce que le *néolibéralisme* installe, c’est donc une *pseudo-archicration sans scène*, là où la délibération démocratique est dessaisie. Il produit un agencement dans lequel la légitimation ne s’édicte plus, mais s’infiltre sous forme de performance antérieure ; dans lequel la régulation ne tranche plus publiquement, mais opère en souterrain, au travers d’indicateurs, de seuils, d’algorithmes, de traités supranationaux, de conventions de marché.
+Ce qui s’impose alors est une reconfiguration radicale des conditions d’existence. Le pouvoir n’est ni aboli ni dissimulé — il est redistribué dans des registres et des protocoles privés, encodé dans des métriques non explicites, traduit dans des novlangues tout en se distillant dans des environnements régulateurs où la fabrique du politique a été méthodiquement neutralisée. Ce que le néolibéralisme installe, ce n’est pas une dérégulation au sens strict, mais une désarchicration tendancielle : les opérations se poursuivent, les justifications circulent, tandis que les scènes où elles pourraient être réellement éprouvées sont neutralisées, mimées ou confisquées. Il produit un agencement dans lequel la légitimation ne s’édicte plus, mais s’infiltre sous forme de performance antérieure ; dans lequel la régulation ne tranche plus publiquement, mais opère en souterrain, au travers d’indicateurs, de seuils, d’algorithmes, de traités supranationaux, de conventions de marché.
 
-Arrêtons-nous un instant pour bien préciser les termes de notre propos. Par *scène*, nous entendons l’*instance d’épreuve où des* *forces*, des *acteurs*, des *registres* ou des *institutions* d’ordres différents *se confrontent sous règles explicites.* Il ne s’agit donc pas uniquement du seul théâtre institutionnel ; nous parlons ici d’un espace d’apparition conflictuelle, où puisse se rendre audible les dissensus (Jacques Rancière, *La Mésentente*, 1995).
+Arrêtons-nous un instant pour bien préciser les termes de notre propos. Par scène, nous entendons l’instance d’épreuve où des forces, des acteurs, des registres ou des institutions d’ordres différents se confrontent sous des règles explicites. Il ne s’agit donc pas du seul théâtre institutionnel ; nous parlons ici d’un espace d’apparition conflictuelle, où peuvent se rendre audibles les dissensus (Jacques Rancière, *La Mésentente*, 1995).
 
-Dès lors, penser l’*archicration*, c’est chercher à rendre lisible le point de tension vive où un ordre se constitue en tenant ensemble des forces hétérogènes. Ce que nous proposons ici n’est pas un modèle, mais un geste : un mode d’attention aux lignes d’opération du pouvoir, une manière de cartographier les régulations en acte, une tentative de réouverture d’espaces démocratiques. L’objectif étant de refonder la possibilité d’épreuves là où l’opacité et l’occultation s’est installée, et pour rouvrir un espace de visibilité critique là où l’efficacité s’auto-justifie et prétend se suffire à elle-même.
+Dès lors, penser l’archicration, c’est chercher à rendre lisible la scène où un ordre se constitue en exposant à l’épreuve réglée l’articulation de forces hétérogènes. Ce que nous proposons ici n’est pas un modèle, mais un geste : un mode d’attention aux lignes d’opération du pouvoir, une manière de cartographier les régulations en acte, une tentative de réouverture d’espaces démocratiques. L’enjeu est de refonder la possibilité d’épreuves là où l’opacité et l’occultation se sont installées, et de rouvrir un espace de visibilité critique là où l’efficacité s’autojustifie et prétend se suffire à elle-même.
 
 Sous notre prisme d’analyse, l’*archicration* s’éprouve comme une réalité concrète, un espace vivant traversé de tensions permanentes, où se cherche sans cesse un fragile *équilibre entre des formes d’assise, des forces productives et des vulnérabilités constitutives*. Or, cet équilibre n’a rien de garanti : il peut basculer, se rompre, se déformer.
 
-Que faut-il entendre par là ? Certaines *configurations archicratives* tendent à surinvestir l’*affectation* — entendu par là, les dimensions idéologique, symbolique, émotionnelle qui prétendent donner sens et légitimer un ordre — tout en négligeant l’*effectuation,* soit la capacité de traduire ces principes en dispositifs opératoires stables et durables. L’exemple de la République jacobine de 1793 en fournit une illustration saisissante : exaltée par la fiction d’une souveraineté populaire absolue, elle n’a pas su consolider ses mécanismes de régulation pour perdurer. L’énergie de l’idéal a vite été dévorée par l’incapacité d’instaurer des équilibres viables, précipitant le régime dans la Terreur et l’épuisement institutionnel.
+Que faut-il entendre par là ? Certaines configurations archicratives tendent à surinvestir l’affectation — entendue ici comme l’ensemble des dimensions idéologiques, symboliques et émotionnelles qui prétendent donner sens et légitimer un ordre — tout en négligeant l’effectuation, soit la capacité de traduire ces principes en dispositifs opératoires stables et durables.
 
 D’autres *archicrations*, à l’inverse, s’enferment dans l’*effectuation* en oubliant tout récit justificatif. L’Union européenne en fournit un cas exemplaire : sa gouvernance repose sur une accumulation de normes techniques, de seuils budgétaires, de critères de convergence, d’indicateurs chiffrés (3 % de déficit, 60 % de dette, pactes de stabilité, règles de concurrence, standards environnementaux...). Ce régime régulateur, d’une efficacité incontestable dans sa capacité à contraindre les États membres, opère par une effectuation puissante, mais trop souvent déliée d’un langage politique partagé. Les décisions se justifient au nom de la « rationalité économique » ou de la « soutenabilité financière », sans se traduire dans un récit de légitimité accessible aux citoyens. C’est cette asymétrie — abondance de dispositifs opératoires, rareté des justifications symboliques — qui alimente le sentiment d’un déficit démocratique chronique, relevé par de nombreux observateurs et confirmé par les épisodes de rejet populaire (référendum français de 2005, Brexit, poussées eurosceptiques). Ici, l’*archicration* s’épuise dans l’opération : elle agit, ajuste, module, mais peine à convaincre et à rassembler.
 
-À l’autre extrême, certaines *archicrations* se construisent sur une *fausse fusion* entre fondement et opération. Les régimes autoritaires modernes, comme ceux de la Russie de Vladimir Poutine ou de la Turquie de Recep Tayyip Erdogan, en offrent des incarnations saisissantes. L’*arkhè* proclamé — la Nation, la Tradition, la Religion, parfois la Civilisation — est érigé en principe indiscutable, en vérité d’origine inattaquable. Mais cette légitimation abstraite fonctionne comme paravent et sert de couverture à des pratiques de régulation brutales, des répressions ciblées, des ajustements institutionnels opportunistes, des captations oligarchiques et des dispositifs de contrôle opaque. L’illusion d’une concordance parfaite entre fondement et action masque en réalité une dissociation : le fondement est vidé de son contenu normatif, réduit à une invocation rituelle, tandis que l’effectuation se déploie dans la violence, l’arbitraire ou la manipulation technique. Dans ce type d’*archicration captée*, l’absence de véritable contradictoire — presse muselée, opposition criminalisée, société civile réduite — empêche toute mise à l’épreuve du pouvoir. Au lieu d’être travaillé dans une tension féconde, l’équilibre *arcalité/cratialité* est réduit à un simulacre qui absolutise le principe pour mieux immuniser l’action.
+À l’autre extrême, certaines *archicrations* se construisent sur une *fausse fusion* entre fondement et opération. Les régimes autoritaires modernes, comme ceux de la Russie de Vladimir Poutine ou de la Turquie de Recep Tayyip Erdogan, en offrent des incarnations saisissantes. L’*arkhè* proclamé — la Nation, la Tradition, la Religion, parfois la Civilisation — est érigé en principe indiscutable, en vérité d’origine inattaquable. Mais cette légitimation abstraite fonctionne comme paravent et sert de couverture à des pratiques de régulation brutales, des répressions ciblées, des ajustements institutionnels opportunistes, des captations oligarchiques et des dispositifs de contrôle opaque. L’illusion d’une concordance parfaite entre fondement et action masque en réalité une dissociation : le fondement est vidé de son contenu normatif, réduit à une invocation rituelle, tandis que l’effectuation se déploie dans la violence, l’arbitraire ou la manipulation technique. Dans ce type de configuration régulatrice à archicration captée, l’absence de véritable contradictoire — presse muselée, opposition criminalisée, société civile réduite — empêche toute mise à l’épreuve du pouvoir. Au lieu d’être travaillé dans une tension féconde, l’équilibre *arcalité/cratialité* est réduit à un simulacre qui absolutise le principe pour mieux immuniser l’action.
 
 C’est pourquoi penser la régulation politique à travers le prisme de l’*archicration*, ce n’est pas inventer un nouveau régime ni esquisser une utopie institutionnelle. C’est surtout déplacer le regard. Refuser de prendre les formes pour des essences, les régimes pour des totalités closes ou les normes pour des évidences. C’est ouvrir une autre cartographie du pouvoir, fondée non sur les déclarations, mais sur les agencements ; non seulement sur les formes héritées, mais aussi sur les opérations effectives. Une cartographie qui permette d’interroger chaque configuration politique en termes d’articulation concrète entre ce qui justifie (l’*arcalité*) et ce qui agit (la *cratialité*).
 
 C’est là le cœur du geste archicratique : restituer aux sociétés la lisibilité critique de leurs propres agencements, là où le pouvoir cherche à effacer ses fondements, et sa régulation à se rendre inattaquable.
 
-Mais allons plus loin. Si l’*archicration* désigne, dans une régulation, le moment où l’articulation mouvante de la légitimation et de l’opération devient scénique, explicite et publiquement opposable, alors l’*archicratie* peut être pensée comme la configuration historique dominante dans laquelle cette articulation s’effectue aujourd’hui sous condition de défiguration, de dissimulation et de dissémination.
+Mais allons plus loin. Si l’archicration désigne, dans une régulation, la scène instituée où l’articulation entre arcalité et cratialité devient exposable, différable et opposable, alors l’archicratie nomme le seuil à partir duquel une configuration politique devient habitable parce qu’elle maintient distinctes, articulées et exposables l’arcalité, la cratialité et l’archicration. La gouvernementalité contemporaine, telle que Michel Foucault en a dégagé la logique dans ses cours au Collège de France (*Sécurité, territoire, population*, 1977–1978 ; *Naissance de la biopolitique*, 1978–1979), éclaire au contraire l’un des empêchements majeurs de ce seuil : dissémination technique de l’opération, fragilisation des fondements exposables, compression ou neutralisation des scènes d’épreuve. Ce n’est donc pas l’archicratie que nous voyons proliférer aujourd’hui, mais des formes désarchicratiques, archicratistiques ou autarchicratiques, dans lesquelles la régulation se poursuit tandis que sa mise en scène contradictoire devient de plus en plus difficile, fictive ou captée.
 
-Par *archicratie*, nous entendons une forme contemporaine de *gouvernementalité désancrée* — au sens où Michel Foucault a dégagé, dans ses cours au Collège de France, comme *méta-régime de rationalité politique* qui déportent l’exercice du pouvoir vers des dispositifs et des techniques (Sécurité, territoire, population, 1977–1978 ; Naissance de la biopolitique, 1978–1979) — dans laquelle l’arène politique est défaite, le fondement rendu flottant, et l’opération disséminée dans des dispositifs qui ne se laissent plus nommer, ni questionner. Il ne s’agit ni d’un type de régime, ni d’un idéal-type ; c’est une *condition régulatrice dépolitisée* — où l’*arcalité* est rendue *automatisée* (par et pour la data) et où, l’*archicration* étant *oblitérée*, la *cratialité* s’exerce *hors de toute instance publique* (algorithme, protocole, contrat, externalisation).
-
-Cette entrée en matière aura eu comme visée de dégager le lieu exact où se joue aujourd’hui notre impuissance politique. Cette situation n’est pas un déficit de principes ni un excès de pouvoir ; c’est le dérèglement a-démocratique des régimes de régulation, rendu illisible faute de scènes délibératives et d’instruments partagés.
+Cette entrée en matière vise à dégager le lieu exact où se joue aujourd’hui notre impuissance politique. Cette situation n’est pas un déficit de principes ni un excès de pouvoir ; c’est le dérèglement a-démocratique des régimes de régulation, rendu illisible faute de scènes délibératives et d’instruments partagés.
 
 C’est en remontant aux rouages primitifs du pouvoir — l’*arcalité*, *polarité des formes d’affectation* ; la *cratialité*, *polarité des forces d’effectuation* — que nous déplaçons la question politique des figures du gouvernement vers les prises différenciées de sa régulation.
 
-En nommant *archicration* cette *articulation dynamique* — souvent instable — *entre ce qui affecte le pouvoir et ce qui en déploie les effets*, nous avons pu construire une première grille de lecture propre aux configurations contemporaines, où les dispositifs agissent sans toujours se légitimer, et où les fondements proclamés — droits humains, droits du travail, droits du vivant — voient décroître leur force d’obligation effective, au profit d’agencements opératoires qui ne se légitiment plus qu’à la marge.
+En nommant archicration non pas l’articulation en général entre fondement et opération, mais la scène instituée où cette articulation devient visible, éprouvable et partiellement opposable, nous nous donnons une première grille de lecture des configurations contemporaines, où les dispositifs agissent sans toujours se légitimer, et où les fondements proclamés — droits humains, droits du travail, droits du vivant — voient décroître leur force d’obligation effective, au profit d’agencements opératoires qui ne se légitiment plus qu’à la marge.
 
 Ce que cette notion permet de mettre au jour, ne se limite pas au fonctionnement des régulations, mais aux difficultés croissantes à les voir être interrogées, éprouvées, exposées au contradictoire. Loin de n’être qu’une propriété secondaire, cette mise à distance de toute possibilité de contestation structurée constitue désormais un trait central de notre condition politique. Ce qui agit n’est plus exposé qu’à la marge de la discussion publique et ce qui régule dorénavant s’exerce de plus en plus en silence, dans l’ombre, à l’abri des regards, dans un retrait radical du débat sur ses formes, ses conditions, ses seuils, ses formats.
 
 Mais ce geste inaugural — critique, archéologique, modélisateur — ne restera légitime et significatif que s’il s’éprouve. Et c’est justement à cette mise à l’épreuve que se consacreront les chapitres à venir. Car le paradigme archicratique n’est pas pur appareillage conceptuel, il est avant tout une méthode de dévoilement, une topologie des régimes régulateurs, un cadre opératoire pour penser la viabilité politique en situation.
 
-Le chapitre I en établira le socle épistémologique rigoureux, en articulant les trois prises fondamentales du modèle — *arcalité, cratialité, archicration* — à une grammaire formelle et symbolique, pensée comme modèle falsifiable, susceptible de simulation et d’interprétation. Il posera la structure tripolaire comme condition d’une intelligibilité systémique, traversable tant par l’histoire que par la technique ou la psychologie collective.
+Le chapitre I en établira le socle épistémologique rigoureux, en articulant les trois prises fondamentales du modèle — arcalité, cratialité, archicration — à une grammaire formelle et symbolique, pensée comme modèle falsifiable, susceptible de formalisation et d’interprétation. Il posera la structure tripolaire comme condition d’une intelligibilité systémique, traversable tant par l’histoire que par la technique ou la psychologie collective.
 
 Le chapitre II délaissera toute abstraction normative pour réinscrire le politique dans la généalogie profonde des régimes de co-viabilité. Il retracera, de manière située et incarnée, les formes empiriques de régulation, depuis les dispositifs totémiques mésolithiques jusqu’aux technorégulations cryptographiques contemporaines. Il tentera de montrer que toute société se constitue d’abord comme régime de *co-viabilité* régulée — dont certaines configurations seulement atteignent un seuil proprement archicratique — bien avant de se penser comme État, comme droit, ou comme nation.
 
 Le chapitre III, d’inspiration philosophique, viendra tester l’*archicratie* comme outil de relecture des grandes pensées du pouvoir. Plutôt que de les aligner par écoles ou doctrines, il les confrontera à une grille archicratique : *quelle arcalité y opère ? Quelle cratialité s’y manifeste ? Quelle scène d’épreuve, d’opposition, ou de captation y est rendue possible ou empêchée ?* Ce faisant, il opérera un déplacement crucial passant de la justification du pouvoir à la morphologie des régimes de régulation.
 
-Le chapitre IV, d’orientation techno-historique, incarnera ces tensions dans l’histoire matérielle même de la modernité. Il ne se contentera pas de relire les révolutions industrielles comme des ruptures productives, mais comme des reconfigurations archicratiques profondes. Chaque mutation technique — de la vapeur à l’électricité, du numérique à l’automatisme — a transformé la manière dont un pouvoir se légitime, agit, se distribue ou se dérobe. La technologie, dans sa manifestation même, devient une instance cratiale, et parfois une matrice d’*archicration* détournée, empêchée ou rendu invisible. C’est donc à une lecture de la régulation des bifurcations industrielles que ce chapitre s’attachera, afin d’en révéler les architectures implicites de pouvoir.
+Le chapitre IV, d’orientation techno-historique, incarnera ces tensions dans l’histoire matérielle même de la modernité. Il ne se contentera pas de relire les révolutions industrielles comme des ruptures productives, mais comme des reconfigurations archicratiques profondes. Chaque mutation technique — de la vapeur à l’électricité, du numérique à l’automatisme — a transformé la manière dont un pouvoir se légitime, agit, se distribue ou se dérobe. La technologie, dans sa manifestation même, devient une instance cratiale, et parfois une matrice d’archicration détournée, empêchée ou rendue invisible. C’est donc à une lecture de la régulation des bifurcations industrielles que ce chapitre s’attachera, afin d’en révéler les architectures implicites de pouvoir.
 
 Enfin, le chapitre V affrontera la conflictualité maximale de notre temps : celle des tensions de co-viabilité. Il abordera, l’une après l’autre, les grandes scènes critiques — économique, écologique, sociale, médiatique, psychique, politique, technologique, géopolitique, cosmopolitique et culturelle — en les traitant non comme objets disciplinaires, mais comme *archicrations* problématiques. Chaque tension y sera relue comme une bifurcation possible : vers une régulation viable, une impasse pathologique ou une captation silencieuse. Ce chapitre constituera le point de bascule, le test ultime du paradigme archicratique : *permet-il de nous aider à discerner, sans dogme, ce qui tient un monde debout — ou le fait vaciller ?*
 

src/layouts/EditionLayout.astro

@@ -1478,6 +1478,33 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 
     const h1 = reading.querySelector("h1");
 
+    const topChapterLabel =
+      isGlossaryEntryMode
+        ? "Haut de la fiche"
+        : isGlossaryEdition
+          ? "Haut de la page"
+          : "Haut du chapitre";
+
+    if (btnTopChapter) {
+      btnTopChapter.setAttribute("aria-label", topChapterLabel);
+      btnTopChapter.setAttribute("title", topChapterLabel);
+    }
+
+    function scrollToTopChapter(behavior = "smooth") {
+      if (isGlossaryEdition) {
+        window.scrollTo({ top: 0, behavior });
+        return;
+      }
+
+      if (h1) {
+        scrollToElWithOffset(h1, 12, behavior);
+      }
+    }
+
+    function getH2ScrollTarget(item) {
+      return item?.h2 || item?.anchor || item?.marker || null;
+    }
+
     const h2Anchors = Array.from(reading.querySelectorAll(".details-anchor[id]"))
       .map((s) => {
         const d = (s.nextElementSibling && s.nextElementSibling.tagName === "DETAILS")
@@ -1500,6 +1527,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       .filter(Boolean);
 
     const h2Plain = Array.from(reading.querySelectorAll("h2[id]"))
+      .filter((h2) => !h2.closest("details.details-section"))
       .map((h2) => ({
         id: h2.id,
         anchor: h2,
@@ -1508,7 +1536,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
         h2,
       }));
 
-    const H2 = (h2Anchors.length ? h2Anchors : h2Plain)
+    const H2 = [...h2Anchors, ...h2Plain]
       .slice()
       .sort((a, b) => absTop(a.marker) - absTop(b.marker));
 
@@ -1700,7 +1728,12 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
       syncGlossaryFollowState(followEl.classList.contains("is-on") && followH > 0);
 
       if (btnTopChapter) {
-        btnTopChapter.hidden = !(rfH1 && !rfH1.hidden);
+        const showTopChapter =
+          isGlossaryEdition
+            ? Boolean(followEl.classList.contains("is-on"))
+            : Boolean(rfH1 && !rfH1.hidden);
+
+        btnTopChapter.hidden = !showTopChapter;
       }
 
       if (btnTopSection) {
@@ -1736,8 +1769,11 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
     if (rfH2) {
       rfH2.addEventListener("click", () => {
         if (!curH2) return;
-        openDetailsIfNeeded(curH2.anchor || curH2.h2 || curH2.marker);
-        scrollToElWithOffset(curH2.marker, 12, "smooth");
+        const target = getH2ScrollTarget(curH2);
+        if (!target) return;
+
+        openDetailsIfNeeded(target);
+        scrollToElWithOffset(target, 12, "smooth");
         history.replaceState(null, "", `${window.location.pathname}#${curH2.id}`);
       });
     }
@@ -1753,15 +1789,18 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
 
     if (btnTopChapter) {
       btnTopChapter.addEventListener("click", () => {
-        if (h1) scrollToElWithOffset(h1, 12, "smooth");
+        scrollToTopChapter("smooth");
       });
     }
 
     if (btnTopSection) {
       btnTopSection.addEventListener("click", () => {
         if (!curH2) return;
-        openDetailsIfNeeded(curH2.anchor || curH2.h2 || curH2.marker);
-        scrollToElWithOffset(curH2.marker, 12, "smooth");
+        const target = getH2ScrollTarget(curH2);
+        if (!target) return;
+
+        openDetailsIfNeeded(target);
+        scrollToElWithOffset(target, 12, "smooth");
         history.replaceState(null, "", `${window.location.pathname}#${curH2.id}`);
       });
     }

src/layouts/GlossaryLayout.astro

@@ -26,6 +26,38 @@ const {
 </EditionLayout>
 
 <style is:global>
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"]{
+    --entry-hero-pad-top: 18px;
+    --entry-hero-pad-x: 18px;
+    --entry-hero-pad-bottom: 18px;
+    --entry-hero-gap: 14px;
+
+    --entry-hero-h1-size: clamp(2.2rem, 4vw, 3.15rem);
+
+    --entry-hero-dek-size: 1.04rem;
+    --entry-hero-dek-lh: 1.55;
+    --entry-hero-dek-maxw: 76ch;
+
+    --entry-hero-meta-max-h: 12rem;
+    --entry-hero-meta-opacity: 1;
+  }
+
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"].glossary-entry-follow-on{
+    --entry-hero-pad-top: 8px;
+    --entry-hero-pad-x: 14px;
+    --entry-hero-pad-bottom: 6px;
+    --entry-hero-gap: 6px;
+
+    --entry-hero-h1-size: clamp(1.45rem, 2.4vw, 1.9rem);
+
+    --entry-hero-dek-size: .90rem;
+    --entry-hero-dek-lh: 1.32;
+    --entry-hero-dek-maxw: 56ch;
+
+    --entry-hero-meta-max-h: 0px;
+    --entry-hero-meta-opacity: 0;
+  }
+
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]{
     --portal-hero-pad-top: 18px;
     --portal-hero-pad-x: 18px;

src/lib/glossary.ts

@@ -201,6 +201,36 @@ export function uniqueGlossaryEntries(
   return out;
 }
 
+export function slugsOfGlossaryEntries(
+    entries: GlossaryEntry[] = [],
+  ): Set<string> {
+    const slugs = new Set<string>();
+  
+    for (const entry of entries) {
+      const slug = slugOfGlossaryEntry(entry);
+      if (!slug) continue;
+      slugs.add(slug);
+    }
+  
+    return slugs;
+  }
+  
+  export function excludeGlossaryEntries(
+    entries: GlossaryEntry[] = [],
+    excluded: Iterable<string> = [],
+  ): GlossaryEntry[] {
+    const excludedSlugs = new Set(
+      Array.from(excluded)
+        .map((value) => normalizeGlossarySlug(value))
+        .filter(Boolean),
+    );
+  
+    return entries.filter((entry) => {
+      const slug = slugOfGlossaryEntry(entry);
+      return Boolean(slug) && !excludedSlugs.has(slug);
+    });
+  }
+
 export function resolveGlossaryEntriesInSourceOrder(
   slugs: string[] = [],
   allEntries: GlossaryEntry[] = [],
@@ -504,11 +534,27 @@ export function getGlossaryEntryAsideData(
   allEntries: GlossaryEntry[] = [],
 ): GlossaryEntryAsideData {
   const currentFamily = familyOf(currentEntry);
+  const currentSlug = slugOfGlossaryEntry(currentEntry);
+
   const fondamentaux = getFondamentaux(allEntries);
-  const sameFamilyEntries = getEntriesOfSameFamily(currentEntry, allEntries);
   const sameFamilyTitle = getSameFamilyTitle(currentEntry);
   const relationSections = getRelationSections(currentEntry, allEntries);
-  const contextualTheory = getContextualTheory(currentEntry, allEntries);
+
+  const relationEntries = uniqueGlossaryEntries(
+    relationSections.flatMap((section) => section.items),
+  );
+  const relationSlugs = slugsOfGlossaryEntries(relationEntries);
+
+  const contextualTheory = excludeGlossaryEntries(
+    getContextualTheory(currentEntry, allEntries),
+    new Set([currentSlug, ...relationSlugs]),
+  ).slice(0, 6);
+  const contextualTheorySlugs = slugsOfGlossaryEntries(contextualTheory);
+
+  const sameFamilyEntries = excludeGlossaryEntries(
+    getEntriesOfSameFamily(currentEntry, allEntries),
+    new Set([currentSlug, ...relationSlugs, ...contextualTheorySlugs]),
+  ).slice(0, 8);
 
   const showNoyau =
     currentFamily !== "concept-fondamental" &&

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,49 @@ 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/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é" },
+];
+
+const prolongerLinks = [
+  {
+    href: "/glossaire/concepts-fondamentaux/",
+    title: "Concepts fondamentaux",
+    text:
+      "Revenir au noyau minimal : arcalité, cratialité, tension, archicration, co-viabilité et archicratie.",
+  },
+  {
+    href: "/glossaire/paradigmes/",
+    title: "Paradigmes et doctrines",
+    text:
+      "Situer les archicrations dans le paysage théorique au sein duquel l’archicratie se compare et se distingue.",
+  },
+  {
+    href: "/glossaire/tensions-irreductibles/",
+    title: "Tensions irréductibles",
+    text:
+      "Revenir aux foyers structuraux de conflictualité que les archicrations stabilisent sans les abolir.",
+  },
+  {
+    href: "/glossaire/index-complet/",
+    title: "Index complet",
+    text:
+      "Retrouver l’ensemble des entrées du glossaire dans une navigation alphabétique intégrale.",
+  },
+];
 ---
 
 <GlossaryLayout
@@ -82,99 +131,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 +181,29 @@ 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="prolonger-la-lecture"
+      title="Prolonger la lecture"
+      intro="Cette cartographie des archicrations peut ensuite être replacée dans le noyau conceptuel, dans le paysage théorique général et dans l’index complet du glossaire."
+    >
+      <div class="archi-cards">
+        {prolongerLinks.map((item) => (
+          <a class="archi-card" href={item.href}>
+            <strong>{item.title}</strong>
+            <span>{item.text}</span>
+          </a>
+        ))}
+      </div>
+    </GlossaryPortalSection>
+
+    <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 +212,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 +226,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 +269,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);
     }
 

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-la-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);
     }
 

src/pages/glossaire/index.astro

@@ -39,6 +39,9 @@ const tension = bySlug.get("tension");
 const sceneDepreuve = bySlug.get("scene-depreuve");
 const archicration = bySlug.get("archicration");
 
+const conceptsPageHref = "/glossaire/concepts-fondamentaux/";
+const scenesPageHref = "/glossaire/scenes-archicratiques/";
+const dynamiquesPageHref = "/glossaire/dynamiques-archicratiques/";
 const paradigmeArchicratiquePageHref = "/glossaire/paradigme-archicratique/";
 const metaRegimesPageHref = "/glossaire/archicrations/";
 const tensionsPageHref = "/glossaire/tensions-irreductibles/";
@@ -215,6 +218,8 @@ const approfondirPortalItems = [
         title="Concepts fondamentaux"
         followSection="Concepts fondamentaux"
         intro="Ces notions forment la grammaire minimale de l’archicratie. Elles donnent accès à la structure générale du système."
+        ctaHref={conceptsPageHref}
+        ctaLabel="Ouvrir le portail"
       >
         <GlossaryCardGrid entries={fondamentaux} />
       </GlossaryHomeSection>
@@ -237,6 +242,8 @@ const approfondirPortalItems = [
         title="Scènes archicratiques"
         followSection="Scènes archicratiques"
         intro="Les scènes archicratiques rendent possible la comparution des architectures de régulation. Elles sont le lieu où l’ordre peut être exposé, discuté et révisé."
+        ctaHref={scenesPageHref}
+        ctaLabel="Ouvrir le portail"
       >
         <GlossaryCardGrid entries={scenes} wide={true} />
       </GlossaryHomeSection>
@@ -248,6 +255,8 @@ const approfondirPortalItems = [
         title="Dynamiques archicratiques"
         followSection="Dynamiques archicratiques"
         intro="Cette famille rassemble les processus de déplacement, les dérives et les formes de pathologisation de la régulation archicratique."
+        ctaHref={dynamiquesPageHref}
+        ctaLabel="Ouvrir le portail"
       >
         <GlossaryCardGrid entries={dynamiques} />
       </GlossaryHomeSection>
@@ -274,6 +283,7 @@ const approfondirPortalItems = [
     >
       <GlossaryPortalGrid items={approfondirPortalItems} secondary={true} />
     </GlossaryHomeSection>
+  </section>
 
   <script is:inline>
     (() => {

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);
     }
 

src/pages/glossaire/scenes-archicratiques.astro

@@ -1,14 +1,27 @@
 ---
 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 GlossaryPortalPanel from "../../components/GlossaryPortalPanel.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 +36,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 +76,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 +134,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 +177,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 +191,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 +214,32 @@ 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>
+          <GlossaryPortalPanel
+            id="notions-et-diagnostics-lies"
+            title="Notions et diagnostics liés"
+            count={`${otherCount} entrée${otherCount > 1 ? "s" : ""}`}
+            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."
+            surface={true}
+            className="scene-block"
+          >
             <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>
@@ -250,19 +247,25 @@ const constellationCount = relatedEntries.length;
                 </a>
               ))}
             </div>
-          </div>
+          </GlossaryPortalPanel>
         )}
 
         {paradigmEntries.length > 0 && (
-          <div class="scene-block">
-            <h3>Paradigmes mobilisés</h3>
+          <GlossaryPortalPanel
+            id="paradigmes-mobilises"
+            title="Paradigmes mobilisés"
+            count={`${paradigmCount} paradigme${paradigmCount > 1 ? "s" : ""}`}
+            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."
+            surface={true}
+            className="scene-block"
+          >
             <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>
@@ -270,57 +273,31 @@ const constellationCount = relatedEntries.length;
                 </a>
               ))}
             </div>
-          </div>
+          </GlossaryPortalPanel>
         )}
-      </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 +307,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 +321,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 +372,8 @@ const constellationCount = relatedEntries.length;
     margin-top: 6px;
   }
 
-  .scene-block + .scene-block{
-    margin-top: 22px;
-  }
-
-  .scene-block h3{
-    margin: 0 0 12px;
-    font-size: 15px;
-    line-height: 1.3;
+  .scene-block{
+    margin-top: 18px;
   }
 
   .scene-cards{
@@ -772,7 +392,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 +428,9 @@ 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 (prefers-color-scheme: dark){
     .scene-focus-card,
-    .scene-card,
-    .scene-aside__block{
+    .scene-card{
       background: rgba(255,255,255,0.04);
     }
 

src/pages/glossaire/tensions-irreductibles.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 GlossaryPortalPanel from "../../components/GlossaryPortalPanel.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 +123,53 @@ const irreducibleTensions = [
 }));
 
 const tensionsCount = irreducibleTensions.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 +178,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 +215,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 +238,94 @@ 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>
-        </div>
+      <GlossaryPortalSection
+        id="articulations-fondamentales"
+        title="Articulations fondamentales"
+        count={`${foundationEntries.length} notion${foundationEntries.length > 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."
+      >
+        <GlossaryPortalPanel
+          id="notions-cardinales"
+          title="Notions cardinales"
+          count={`${foundationEntries.length} repère${foundationEntries.length > 1 ? "s" : ""}`}
+          surface={true}
+          className="tir-block"
+        >
+          <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>
 
-        <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>
+                {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
+                  <small>
+                    Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
+                  </small>
+                )}
+              </a>
+            ))}
+          </div>
+        </GlossaryPortalPanel>
+      </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>
-        </div>
+      <GlossaryPortalSection
+        id="resonances-theoriques"
+        title="Résonances théoriques"
+        count={`${resonanceEntries.length} entrée${resonanceEntries.length > 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."
+      >
+        <GlossaryPortalPanel
+          id="paradigmes-et-resonances"
+          title="Paradigmes et résonances"
+          count={`${resonanceEntries.length} entrée${resonanceEntries.length > 1 ? "s" : ""}`}
+          surface={true}
+          className="tir-block"
+        >
+          <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>
 
-        <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>
+                {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
+                  <small>
+                    Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
+                  </small>
+                )}
+              </a>
+            ))}
+          </div>
+        </GlossaryPortalPanel>
+      </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 +334,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 +348,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;
@@ -761,6 +370,10 @@ const tensionsCount = irreducibleTensions.length;
     opacity: .92;
   }
 
+  .tir-block{
+    margin-top: 18px;
+  }
+
   .tir-cards{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -854,155 +467,10 @@ 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 (prefers-color-scheme: dark){
     .tir-note-card,
     .tir-card,
-    .tir-link-card,
-    .tir-aside__block{
+    .tir-link-card{
       background: rgba(255,255,255,0.04);
     }
 

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/scenes-archicratiques/",
+    title: "Scènes archicratiques",
+    text:
+      "Revenir aux formes de comparution, d’épreuve, d’empêchement et de réouverture de la régulation.",
+  },
+  {
+    href: "/glossaire/dynamiques-archicratiques/",
+    title: "Dynamiques archicratiques",
+    text:
+      "Explorer les processus de fermeture, d’oblitération ou de dérive auxquels les verbes de la scène donnent une texture plus fine.",
+  },
+  {
+    href: "/glossaire/paradigme-archicratique/",
+    title: "Paradigme archicratique",
+    text:
+      "Replacer ce mini-glossaire opératoire dans l’architecture générale du système archicratique.",
+  },
+  {
+    href: "/glossaire/index-complet/",
+    title: "Index complet",
+    text:
+      "Retrouver toutes les 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,30 @@ 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="Ce mini-glossaire opératoire complète les portails conceptuels du site. Il permet de décrire plus finement les opérations concrètes qui affectent une scène de régulation."
+    >
+      <div class="verbs-cards">
+        {prolongerLinks.map((item) => (
+          <a class="verbs-card verbs-card--link" href={item.href}>
+            <div class="verbs-card__index">↗</div>
+            <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 +321,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 +335,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));
@@ -688,6 +353,11 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
     transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
   }
 
+  .verbs-card--link{
+    text-decoration: none;
+    color: inherit;
+  }
+
   .verbs-card:hover{
     transform: translateY(-1px);
     background: rgba(127,127,127,0.08);
@@ -716,153 +386,8 @@ 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);
     }