test(anchors): refresh prologue baseline after intentional text cleanup

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/GlossaryAside.astro

@@ -1,14 +1,7 @@
 ---
 import {
-  familyOf,
-  getContextualTheory,
-  getDisplayDomain,
-  getDisplayFamily,
-  getDisplayLevel,
-  getEntriesOfSameFamily,
-  getFondamentaux,
-  getRelationSections,
-  getSameFamilyTitle,
+  getGlossaryEntryAsideData,
+  getGlossaryPortalLinks,
   hrefOfGlossaryEntry,
   slugOfGlossaryEntry,
 } from "../lib/glossary";
@@ -19,28 +12,21 @@ const {
 } = Astro.props;
 
 const currentSlug = slugOfGlossaryEntry(currentEntry);
-const currentFamily = familyOf(currentEntry);
 
-const fondamentaux = getFondamentaux(allEntries);
+const {
+  displayFamily,
+  displayDomain,
+  displayLevel,
+  showNoyau,
+  showSameFamily,
+  fondamentaux,
+  sameFamilyTitle,
+  sameFamilyEntries,
+  relationSections,
+  contextualTheory,
+} = getGlossaryEntryAsideData(currentEntry, allEntries);
 
-const displayFamily = getDisplayFamily(currentEntry);
-const displayDomain = getDisplayDomain(currentEntry);
-const displayLevel = getDisplayLevel(currentEntry);
-
-const sameFamilyEntries = getEntriesOfSameFamily(currentEntry, allEntries);
-const sameFamilyTitle = getSameFamilyTitle(currentEntry);
-
-const contextualTheory = getContextualTheory(currentEntry, allEntries);
-
-const showNoyau =
-  currentFamily !== "concept-fondamental" &&
-  fondamentaux.length > 0;
-
-const showSameFamily =
-  sameFamilyEntries.length > 0 &&
-  currentFamily !== "concept-fondamental";
-
-const relationSections = getRelationSections(currentEntry, allEntries);
+const portalLinks = getGlossaryPortalLinks();
 ---
 
 <nav class="glossary-aside" aria-label="Navigation du glossaire">
@@ -52,20 +38,23 @@ const relationSections = getRelationSections(currentEntry, allEntries);
       <span class="glossary-aside__pill glossary-aside__pill--family">
         {displayFamily}
       </span>
-      <span class="glossary-aside__pill">{displayDomain}</span>
-      <span class="glossary-aside__pill">{displayLevel}</span>
+
+      {displayDomain && (
+        <span class="glossary-aside__pill">{displayDomain}</span>
+      )}
+
+      {displayLevel && (
+        <span class="glossary-aside__pill">{displayLevel}</span>
+      )}
     </div>
   </div>
 
   <section class="glossary-aside__block">
     <h2 class="glossary-aside__heading">Portails</h2>
     <ul class="glossary-aside__list">
-      <li><a href="/glossaire/">Accueil du glossaire</a></li>
-      <li><a href="/glossaire/index-complet/">Index complet</a></li>
-      <li><a href="/glossaire/paradigme-archicratique/">Paradigme archicratique</a></li>
-      <li><a href="/glossaire/archicrations/">Archicrations</a></li>
-      <li><a href="/glossaire/paradigmes/">Paradigmes et doctrines</a></li>
-      <li><a href="/glossaire/tensions-irreductibles/">Tensions irréductibles</a></li>
+      {portalLinks.map((item) => (
+        <li><a href={item.href}>{item.label}</a></li>
+      ))}
     </ul>
   </section>
 

src/components/GlossaryCardGrid.astro

@@ -0,0 +1,83 @@
+---
+import { hrefOfGlossaryEntry, type GlossaryEntry } from "../lib/glossary";
+
+export interface Props {
+  entries?: GlossaryEntry[];
+  wide?: boolean;
+}
+
+const {
+  entries = [],
+  wide = false,
+} = Astro.props;
+---
+
+<div class="glossary-cards">
+  {entries.map((entry) => (
+    <a
+      class:list={[
+        "glossary-card",
+        wide && "glossary-card--wide",
+      ]}
+      href={hrefOfGlossaryEntry(entry)}
+    >
+      <strong>{entry.data.term}</strong>
+      <span>{entry.data.definitionShort}</span>
+    </a>
+  ))}
+</div>
+
+<style>
+  .glossary-cards{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 12px;
+    margin-top: 14px;
+  }
+
+  .glossary-card{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 14px 16px;
+    border: 1px solid var(--glossary-border);
+    border-radius: 18px;
+    background: var(--glossary-bg-soft);
+    text-decoration: none;
+    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+  }
+
+  .glossary-card:hover{
+    transform: translateY(-1px);
+    background: var(--glossary-bg-soft-strong);
+    border-color: rgba(0,217,255,0.16);
+    text-decoration: none;
+  }
+
+  .glossary-card--wide{
+    grid-column: 1 / -1;
+  }
+
+  .glossary-card strong{
+    color: var(--glossary-accent);
+    font-size: 1.04rem;
+    line-height: 1.28;
+  }
+
+  .glossary-card span{
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    opacity: .94;
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-card{
+      background: rgba(255,255,255,0.04);
+    }
+
+    .glossary-card:hover{
+      background: rgba(255,255,255,0.07);
+    }
+  }
+</style>

src/components/GlossaryEntryBody.astro

@@ -0,0 +1,16 @@
+<div class="glossary-entry-body">
+  <slot />
+</div>
+
+<style>
+  .glossary-entry-body{
+    margin-bottom: 28px;
+  }
+
+  :global(.glossary-entry-body h2),
+  :global(.glossary-entry-body h3),
+  :global(.glossary-relations h2),
+  :global(.glossary-relations h3){
+    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 18px);
+  }
+</style>

src/components/GlossaryEntryHero.astro

@@ -0,0 +1,230 @@
+---
+interface Props {
+  term: string;
+  definitionShort: string;
+  displayFamily: string;
+  displayDomain?: string;
+  displayLevel?: string;
+  mobilizedAuthors?: string[];
+  comparisonTraditions?: string[];
+}
+
+const {
+  term,
+  definitionShort,
+  displayFamily,
+  displayDomain = "",
+  displayLevel = "",
+  mobilizedAuthors = [],
+  comparisonTraditions = [],
+} = Astro.props;
+
+const hasScholarlyMeta =
+  mobilizedAuthors.length > 0 ||
+  comparisonTraditions.length > 0;
+---
+
+<header class="glossary-entry-head" data-ge-hero>
+  <div class="glossary-entry-head__title">
+    <h1>{term}</h1>
+  </div>
+
+  <div class="glossary-entry-summary">
+    <p class="glossary-entry-dek">
+      <em>{definitionShort}</em>
+    </p>
+
+    <div class="glossary-entry-signals" aria-label="Repères de lecture">
+      <span class="glossary-pill glossary-pill--family">
+        <strong>Famille :</strong> {displayFamily}
+      </span>
+
+      {displayDomain && (
+        <span class="glossary-pill">
+          <strong>Domaine :</strong> {displayDomain}
+        </span>
+      )}
+
+      {displayLevel && (
+        <span class="glossary-pill">
+          <strong>Niveau :</strong> {displayLevel}
+        </span>
+      )}
+    </div>
+
+    {hasScholarlyMeta && (
+      <div class="glossary-entry-meta">
+        {mobilizedAuthors.length > 0 && (
+          <p>
+            <strong>Auteurs mobilisés :</strong> {mobilizedAuthors.join(" / ")}
+          </p>
+        )}
+
+        {comparisonTraditions.length > 0 && (
+          <p>
+            <strong>Traditions de comparaison :</strong> {comparisonTraditions.join(" / ")}
+          </p>
+        )}
+      </div>
+    )}
+  </div>
+</header>
+
+<style>
+  .glossary-entry-head{
+    position: sticky;
+    top: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px));
+    z-index: 11;
+    margin: 0 0 24px;
+    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);
+    overflow: hidden;
+    transition:
+      border-radius 180ms ease,
+      box-shadow 180ms ease,
+      border-color 180ms ease;
+  }
+
+  .glossary-entry-head__title{
+    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: 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: 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: 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{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0;
+    transition: gap 180ms ease;
+  }
+
+  .glossary-pill{
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 10px;
+    border: 1px solid rgba(127,127,127,0.24);
+    border-radius: 999px;
+    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{
+    border-color: rgba(127,127,127,0.36);
+    font-weight: 700;
+  }
+
+  .glossary-entry-meta{
+    margin: 0;
+    padding: 10px 12px;
+    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{
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .glossary-entry-meta p + p{
+    margin-top: 6px;
+  }
+
+  @media (max-width: 720px){
+    .glossary-entry-signals{
+      gap: 6px;
+    }
+
+    .glossary-pill{
+      font-size: 12px;
+    }
+  }
+
+  @media (max-width: 860px){
+    .glossary-entry-head{
+      position: static;
+      border-radius: 22px;
+      margin-bottom: 20px;
+    }
+
+    .glossary-entry-head__title{
+      padding: 14px 14px 12px;
+    }
+
+    .glossary-entry-summary{
+      gap: 12px;
+      padding: 14px;
+    }
+
+    .glossary-entry-dek{
+      max-width: none;
+    }
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-entry-meta{
+      background: rgba(255,255,255,0.03);
+    }
+
+    .glossary-pill{
+      background: rgba(255,255,255,0.04);
+    }
+  }
+</style>

src/components/GlossaryEntryLegacyNote.astro

@@ -0,0 +1,31 @@
+---
+interface Props {
+  canonicalHref: string;
+  term: string;
+}
+
+const { canonicalHref, term } = Astro.props;
+---
+
+<p class="glossary-legacy-note">
+  Cette entrée a été renommée. L’intitulé canonique est :
+  <a href={canonicalHref}>{term}</a>.
+</p>
+
+<style>
+  .glossary-legacy-note{
+    padding: 10px 12px;
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 12px;
+    background: rgba(127,127,127,0.05);
+    font-size: 14px;
+    line-height: 1.45;
+    margin-bottom: 18px;
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-legacy-note{
+      background: rgba(255,255,255,0.04);
+    }
+  }
+</style>

src/components/GlossaryEntryStickySync.astro

@@ -0,0 +1,185 @@
+<script is:inline>
+  (() => {
+    const boot = () => {
+      const body = document.body;
+      const root = document.documentElement;
+      const hero = document.querySelector("[data-ge-hero]");
+      const follow = document.getElementById("reading-follow");
+      const mqMobile = window.matchMedia("(max-width: 860px)");
+
+      if (!body || !root || !hero || !follow) return;
+
+      const BODY_CLASS = "is-glossary-entry-page";
+      const FOLLOW_ON_CLASS = "glossary-entry-follow-on";
+
+      let lastHeight = -1;
+      let lastFollowOn = null;
+      let raf = 0;
+
+      body.classList.add(BODY_CLASS);
+
+      const heroHeight = () =>
+        Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
+
+      const computeFollowOn = () =>
+        !mqMobile.matches &&
+        follow.classList.contains("is-on") &&
+        follow.style.display !== "none" &&
+        follow.getAttribute("aria-hidden") !== "true";
+
+      const stripLocalSticky = () => {
+        document
+          .querySelectorAll(
+            ".glossary-entry-body h2, .glossary-entry-body h3, .glossary-relations h2, .glossary-relations h3"
+          )
+          .forEach((el) => {
+            el.classList.remove("is-sticky");
+            el.removeAttribute("data-sticky-active");
+          });
+      };
+
+      const applyLocalStickyHeight = () => {
+        const h = mqMobile.matches ? 0 : heroHeight();
+        if (h === lastHeight) return;
+        lastHeight = h;
+
+        if (typeof window.__archiSetLocalStickyHeight === "function") {
+          window.__archiSetLocalStickyHeight(h);
+        } else {
+          root.style.setProperty("--glossary-local-sticky-h", `${h}px`);
+        }
+      };
+
+      const syncFollowState = () => {
+        const on = computeFollowOn();
+        if (on === lastFollowOn) return;
+        lastFollowOn = on;
+        body.classList.toggle(FOLLOW_ON_CLASS, on);
+      };
+
+      const syncAll = () => {
+        stripLocalSticky();
+        syncFollowState();
+        applyLocalStickyHeight();
+      };
+
+      const schedule = () => {
+        if (raf) return;
+        raf = requestAnimationFrame(() => {
+          raf = 0;
+          syncAll();
+        });
+      };
+
+      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("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-entry-page #reading-follow){
+    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;
+    border-bottom-right-radius: 0;
+  }
+
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-summary){
+    gap: 10px;
+    padding-top: 12px;
+    padding-bottom: 10px;
+  }
+
+  :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: 0;
+    border-color: transparent;
+  }
+
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow){
+    transform: translateY(-1px);
+  }
+
+  :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow .reading-follow__inner){
+    margin-top: -1px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  :global(body.is-glossary-entry-page .glossary-entry-body h2.is-sticky),
+  :global(body.is-glossary-entry-page .glossary-entry-body h2[data-sticky-active="true"]),
+  :global(body.is-glossary-entry-page .glossary-entry-body h3.is-sticky),
+  :global(body.is-glossary-entry-page .glossary-entry-body h3[data-sticky-active="true"]),
+  :global(body.is-glossary-entry-page .glossary-relations h2.is-sticky),
+  :global(body.is-glossary-entry-page .glossary-relations h2[data-sticky-active="true"]),
+  :global(body.is-glossary-entry-page .glossary-relations h3.is-sticky),
+  :global(body.is-glossary-entry-page .glossary-relations h3[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){
+    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
+      margin-bottom: 20px;
+      border-radius: 22px;
+    }
+  }
+</style>

src/components/GlossaryHomeAside.astro

@@ -1,8 +1,8 @@
 ---
 import {
-  countGlossaryEntriesByFamily,
-  countGlossaryEntriesByKind,
   getFondamentaux,
+  getGlossaryHomeStats,
+  getGlossaryPortalLinks,
   hrefOfGlossaryEntry,
 } from "../lib/glossary";
 
@@ -11,23 +11,14 @@ const {
 } = Astro.props;
 
 const fondamentaux = getFondamentaux(allEntries);
+const portalLinks = getGlossaryPortalLinks();
 
-const totalEntries = allEntries.length;
-const paradigmesCount = countGlossaryEntriesByKind(allEntries, "paradigme");
-const doctrinesCount = countGlossaryEntriesByKind(allEntries, "doctrine");
-const metaRegimesCount = countGlossaryEntriesByFamily(allEntries, "meta-regime");
-
-const portalLinks = [
-  { href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" },
-  { href: "/glossaire/index-complet/", label: "Index complet" },
-  { href: "/glossaire/paradigme-archicratique/", label: "Paradigme archicratique" },
-  { href: "/glossaire/scenes-archicratiques/", label: "Scènes archicratiques" },
-  { href: "/glossaire/dynamiques-archicratiques/", label: "Dynamiques archicratiques" },
-  { href: "/glossaire/tensions-irreductibles/", label: "Tensions irréductibles" },
-  { href: "/glossaire/archicrations/", label: "Méta-régimes archicratiques" },
-  { href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
-  { href: "/glossaire/verbes-de-la-scene/", label: "Verbes de la scène" },
-];
+const {
+  totalEntries,
+  paradigmesCount,
+  doctrinesCount,
+  metaRegimesCount,
+} = getGlossaryHomeStats(allEntries);
 ---
 
 <nav class="glossary-home-aside" aria-label="Navigation du portail du glossaire">

src/components/GlossaryHomeHero.astro

@@ -0,0 +1,103 @@
+---
+export interface Props {
+  kicker?: string;
+  title?: string;
+  intro?: string;
+}
+
+const {
+  kicker = "Référentiel terminologique",
+  title = "Glossaire archicratique",
+  intro = "Ce glossaire n’est pas seulement un index de définitions. Il constitue une porte d’entrée dans la pensée archicratique : une cartographie raisonnée des concepts fondamentaux, des scènes, des dynamiques et des méta-régimes à partir desquels une société peut être décrite comme organisation de tensions et recherche de co-viabilité.",
+} = Astro.props;
+---
+
+<header class="glossary-hero" id="glossary-hero">
+  <p class="glossary-kicker">{kicker}</p>
+  <h1>{title}</h1>
+  <p class="glossary-intro">{intro}</p>
+  <h2
+    class="glossary-hero-follow"
+    id="glossary-hero-follow"
+    aria-hidden="true"
+  ></h2>
+</header>
+
+<style>
+  .glossary-hero{
+    position: sticky;
+    top: var(--glossary-sticky-top);
+    z-index: 12;
+    margin-bottom: 28px;
+    padding: 14px 16px 18px;
+    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.90)),
+      radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
+    transition:
+      background 300ms cubic-bezier(.22,.8,.22,1),
+      border-color 300ms cubic-bezier(.22,.8,.22,1),
+      box-shadow 300ms cubic-bezier(.22,.8,.22,1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    display: grid;
+    row-gap: 12px;
+  }
+
+  .glossary-kicker{
+    margin: 0;
+    font-size: 12px;
+    letter-spacing: .12em;
+    text-transform: uppercase;
+    opacity: .72;
+  }
+
+  .glossary-hero h1{
+    margin: 0;
+    font-size: clamp(2.2rem, 4vw, 3.15rem);
+    line-height: 1.02;
+    letter-spacing: -.04em;
+    font-weight: 850;
+  }
+
+  .glossary-intro{
+    margin: 0;
+    max-width: 72ch;
+    font-size: 1.05rem;
+    line-height: 1.55;
+    opacity: .94;
+  }
+
+  .glossary-hero-follow{
+    margin: 2px 0 0;
+    min-height: var(--glossary-follow-height);
+    display: flex;
+    align-items: flex-end;
+    opacity: 0;
+    transform: translateY(10px) scale(.985);
+    filter: blur(6px);
+    transition:
+      opacity 220ms cubic-bezier(.22,1,.36,1),
+      transform 320ms cubic-bezier(.22,1,.36,1),
+      filter 320ms cubic-bezier(.22,1,.36,1);
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    will-change: opacity, transform, filter;
+  }
+
+  .glossary-hero-follow.is-visible{
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+
+  @media (max-width: 760px){
+    .glossary-hero{
+      top: calc(var(--glossary-sticky-top) - 2px);
+      padding: 12px 14px 16px;
+    }
+  }
+</style>

src/components/GlossaryHomeSection.astro

@@ -0,0 +1,109 @@
+---
+export interface Props {
+  id?: string;
+  title: string;
+  intro?: string;
+  followSection?: string;
+  ctaHref?: string;
+  ctaLabel?: string;
+}
+
+const {
+  id,
+  title,
+  intro,
+  followSection,
+  ctaHref,
+  ctaLabel,
+} = Astro.props;
+
+const resolvedFollowSection = (followSection || title || "").trim();
+const showCta = Boolean(ctaHref && ctaLabel);
+---
+
+<section id={id} class="glossary-section">
+  <div class="glossary-section__head">
+    <div>
+      <h2 data-follow-section={resolvedFollowSection}>{title}</h2>
+
+      {intro && (
+        <p class="glossary-intro">{intro}</p>
+      )}
+    </div>
+
+    {showCta && (
+      <a class="glossary-cta" href={ctaHref}>
+        {ctaLabel}
+      </a>
+    )}
+  </div>
+
+  <slot />
+</section>
+
+<style>
+  .glossary-section{
+    margin-top: 42px;
+    scroll-margin-top: calc(var(--glossary-sticky-top) + 190px);
+  }
+
+  .glossary-section__head{
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-bottom: 14px;
+  }
+
+  .glossary-section h2{
+    margin: 0;
+    font-size: clamp(2rem, 3vw, 2.55rem);
+    line-height: 1.06;
+    letter-spacing: -.03em;
+    font-weight: 800;
+  }
+
+  .glossary-intro{
+    margin: 0;
+    max-width: 72ch;
+    font-size: 1.05rem;
+    line-height: 1.55;
+    opacity: .94;
+  }
+
+  .glossary-section__head .glossary-intro{
+    margin-top: 10px;
+  }
+
+  .glossary-cta{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 40px;
+    border: 1px solid var(--glossary-border-strong);
+    border-radius: 999px;
+    padding: 7px 14px;
+    color: var(--glossary-accent);
+    text-decoration: none;
+    white-space: nowrap;
+    transition: transform 120ms ease, background 120ms ease;
+  }
+
+  .glossary-cta:hover{
+    background: var(--glossary-bg-soft-strong);
+    text-decoration: none;
+    transform: translateY(-1px);
+  }
+
+  @media (max-width: 760px){
+    .glossary-section__head{
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .glossary-cta{
+      width: fit-content;
+    }
+  }
+</style>

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/GlossaryPortalGrid.astro

@@ -0,0 +1,91 @@
+---
+export type GlossaryPortalGridItem = {
+  href: string;
+  title: string;
+  description: string;
+  meta: string;
+};
+
+export interface Props {
+  items?: GlossaryPortalGridItem[];
+  secondary?: boolean;
+}
+
+const {
+  items = [],
+  secondary = false,
+} = Astro.props;
+---
+
+<div
+  class:list={[
+    "glossary-portals",
+    secondary && "glossary-portals--secondary",
+  ]}
+>
+  {items.map((item) => (
+    <a class="glossary-portal-card" href={item.href}>
+      <strong>{item.title}</strong>
+      <span>{item.description}</span>
+      <small>{item.meta}</small>
+    </a>
+  ))}
+</div>
+
+<style>
+  .glossary-portals{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 14px;
+    margin-top: 14px;
+  }
+
+  .glossary-portal-card{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px 18px;
+    border: 1px solid var(--glossary-border);
+    border-radius: 18px;
+    background: var(--glossary-bg-soft);
+    text-decoration: none;
+    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+  }
+
+  .glossary-portal-card:hover{
+    transform: translateY(-1px);
+    background: var(--glossary-bg-soft-strong);
+    border-color: rgba(0,217,255,0.16);
+    text-decoration: none;
+  }
+
+  .glossary-portal-card strong{
+    color: var(--glossary-accent);
+    font-size: 1.08rem;
+    line-height: 1.28;
+  }
+
+  .glossary-portal-card span{
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    opacity: .94;
+  }
+
+  .glossary-portal-card small{
+    color: var(--glossary-accent);
+    font-size: .94rem;
+    line-height: 1.35;
+    opacity: .9;
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-portal-card{
+      background: rgba(255,255,255,0.04);
+    }
+
+    .glossary-portal-card:hover{
+      background: rgba(255,255,255,0.07);
+    }
+  }
+</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}`}>
@@ -30,3 +33,60 @@ const { relationBlocks = [] } = Astro.props;
     </div>
   </section>
 )}
+
+<style>
+  .glossary-relations{
+    margin-top: 26px;
+    padding-top: 18px;
+    border-top: 1px solid rgba(127,127,127,0.18);
+  }
+
+  .glossary-relations h2{
+    margin-bottom: 14px;
+  }
+
+  .glossary-relations-grid{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 12px;
+  }
+
+  .glossary-relations-card{
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 16px;
+    padding: 14px 16px;
+    background: rgba(127,127,127,0.05);
+  }
+
+  .glossary-relations-card h3{
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 15px;
+    line-height: 1.35;
+  }
+
+  .glossary-relations-card ul{
+    margin: 0;
+    padding-left: 18px;
+  }
+
+  .glossary-relations-card li{
+    margin-bottom: 8px;
+    font-size: 14px;
+    line-height: 1.45;
+  }
+
+  .glossary-relations-card li:last-child{
+    margin-bottom: 0;
+  }
+
+  .glossary-relations-card span{
+    opacity: .9;
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-relations-card{
+      background: rgba(255,255,255,0.04);
+    }
+  }
+</style>

src/content/archicrat-ia/prologue.mdx

@@ -12,25 +12,26 @@ 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 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, plus profondément : *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, ce ne sont pas de nouveaux principes ni une nouvelle idéologie, mais une exigence beaucoup plus modeste, et 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.
 
-Par conséquent, un ordre durerait moins par ses fondements proclamés que par ses *capacités régulatrices effectives*. Autant dire que ce sont les dispositifs, les formats, les médiations — parfois massifs, parfois imperceptibles — par lesquels un ordre parvient à faire coexister ce qui, en droit, pourrait s’exclure : des intérêts antagonistes, des affects discordants, des récits historiques incompatibles, des régimes de valeur irréconciliables, des temporalités sociales déphasées, des exigences contradictoires en matière de justice, d'efficacité, de mémoire ou d'avenir.
+Par conséquent, un ordre durerait moins par ses fondements proclamés que par ses *capacités régulatrices effectives*. Autant dire que ce sont les dispositifs, les formats, les médiations — parfois massifs, parfois imperceptibles — par lesquels un ordre parvient à faire coexister ce qui, en droit, pourrait s’exclure : des intérêts antagonistes, des affects discordants, des récits historiques incompatibles, des régimes de valeur irréconciliables, des temporalités sociales déphasées, des exigences contradictoires en matière de justice, d’efficacité, de mémoire ou d’avenir.
 
 Cet ordre ne les efface pas. Il ne les réconcilie pas dans un consensus fictif. Il ne les fusionne pas dans une synthèse idéologique illusoire. Il les tient ensemble sans les résoudre, par des équilibres instables, des arrangements contingents, des formats d’ajustement plus ou moins durables. C’est là que se situe toute la puissance — et la fragilité — de la régulation : tenir sans annuler, moduler sans effacer, organiser sans clore.
 
@@ -46,21 +47,21 @@ 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. Les instances fixes ont disparu ; la demeure solennelle de l’autorité s’est effacée. Le geste réel de gouvernance s’insinue dans des protocoles, se glisse dans la routine, s’entrelace dans les habitudes, se ramifie 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 et tisse patiemment la toile discrète sur laquelle se déplacent nos vies. Ce ne sont plus tant le décret ou la loi qui pèsent que 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.
+La contrainte n’accable plus par l’ostentation de l’ordre, mais s’inocule par la subtilité des systèmes. Désormais, l’agencement d’équilibres, de données et de flux façonne un monde où chacun se trouve relié, indexé, impliqué dans 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.
 
-La difficulté d’y résister tient moins à une violence perceptible qu’à leur ontologie d’évidence. Elles ne s’avancent pas comme autorités, ne se proclament pas comme pouvoir : elles fonctionnent, nous relient et donc elles opèrent. Et cette opération sans légitimation démocratique — pouvoir sans figure, contrainte sans théâtre — rend caduques nos anciennes grilles d’interprétation. Désormais, ce qui nous affecte le plus ne s’énonce plus, il s’impose sans discours jusqu’au plus intime.
+La difficulté d’y résister tient moins à une violence perceptible qu’à leur évidence ontologique. Elles ne s’avancent pas comme des autorités, ne se proclament pas comme pouvoir : elles fonctionnent, nous relient et, ce faisant, opèrent. Et cette opération sans légitimation démocratique — pouvoir sans figure, contrainte sans théâtre — rend caduques nos anciennes grilles d’interprétation. Désormais, ce qui nous affecte le plus ne s’énonce plus ; il s’impose sans discours jusqu’au plus intime.
 
 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.
+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 en structures opaques via des *holdings*, du transfert du patrimoine privé en patrimoine professionnel ou de la dissociation entre richesse effective et revenu imposable.
 
 Si cette proposition est débattue publiquement — soutenue dans certains milieux politiques, évoquée dans les médias, portée par des organisations internationales — elle ne s’est pourtant pas traduite jusqu’à présent en un espace de régulation pleinement opérationnel : pas de dispositif stable, pas de mécanisme universel, pas d’instance de coordination internationale suffisamment puissante ni opposable pour rendre cette taxe effective à l’échelle voulue.
 
@@ -72,7 +73,7 @@ Ce hiatus, cette fracture, ce décrochage entre l’enjeu perceptible dans l’e
 
 Et face à cette évanescence, deux réflexes s’affrontent. L’un, nostalgique, cherche à réhabiliter les anciennes figures du pouvoir : l’autorité, la loi, la souveraineté, comme si elles pouvaient encore réactiver un ordre en désagrégation. L’autre, sceptique, postule qu’il n’y a plus rien à faire — que nous vivons l’épuisement définitif de l’arène politique, sa disparition dans le flux, le calcul, le désordre entropique des systèmes.
 
-Pour autant quelque chose continue d’agir, de structurer, de différencier, même en l’absence de pouvoir identifiable. Ce quelque chose, c’est la manière dont une société régule ses tensions internes : non plus en les effaçant, mais en les tenant, en les exposant, en les configurant dans des dispositifs — visibles ou non — capables de contenir sans abolir, de moduler sans figer, de différer sans éluder.
+Pour autant, quelque chose continue d’agir, de structurer, de différencier, même en l’absence de pouvoir identifiable. Ce quelque chose, c’est la manière dont une société régule ses tensions internes : non plus en les effaçant, mais en les tenant, en les exposant, en les configurant dans des dispositifs — visibles ou non — capables de contenir sans abolir, de moduler sans figer, de différer sans éluder.
 
 Nous devons donc reprendre à neuf la question la plus enfouie de la politique : *qu’est-ce qui fait qu’un monde collectif tient ?* Non plus dans l’abstrait, mais dans la matérialité de ses pratiques, la texture de ses conflits, l’architecture de ses médiations. *Par quels agencements tient-il ?* *À travers quelles épreuves ? Selon quelles temporalités ? Et sous quelles conditions de réversibilité ?*
 
@@ -84,7 +85,7 @@ Or ce qui s’efface désormais, c’est la capacité collective à en formuler
 
 Ces termes politiques s’organisent autour de deux grands suffixes — *-archie* et *-cratie* — forgés dans les débats de la Grèce antique, et largement sédimentés dans les lexiques modernes. Les suffixes en -*archie* désignent un *pouvoir fondé sur un principe premier* (*arkhè*), une origine ou une légitimité verticale : monarchie, oligarchie, etc. Ceux en -*cratie* désignent plutôt les *modalités pratiques d’exercice du pouvoir* (*kratos*) : démocratie, technocratie, bureaucratie, etc.
 
-Cette distinction entre fondement et exercice, légitimation et opération, traverse toute la modernité politique. Cependant cette séparation ne permet plus aujourd’hui de saisir la réalité des régulations effectives. Car les scènes d’*arkhè* se sont en grande partie effondrées sans être remplacées, tandis que les *kratos* contemporains tendent à s’exercer sans adresse, sans représentation, sans théâtre. L’on disserte sur les vertus de la démocratie, mais le *dèmos* n’a plus de lieu de confrontation effective : *serait-ce la rue ? Seraient-ce les réseaux sociaux ? Seraient-ce les médias ? Serait-ce le Parlement ?* Force est de constater qu’il n’en est rien : la première est réprimée ; les seconds sont filtrés et compartimentés ; les suivants sont contrôlés par une poignée de milliardaires ; et ce dernier est loin de représenter l’entièreté de la société. L’on invoque la République, mais la *res publica* — la chose publique, appellation la plus vague et la plus creuse que l’on puisse donner de l’espace politique — se dissout dans des logiques qui échappent à toute délibération commune : absence de débat, passage en force, brutalisme institutionnel. Quant au langage politique, il continue d’énoncer des structures et des projets, mais il ne parvient pas à décrire les opérations effectives de régulation tant le système socio-économique, en plus de s’être libéralisé et privatisé, s’est étendu et complexifié tout en confiant les leviers d’action au niveau supranational.
+Cette distinction entre fondement et exercice, légitimation et opération, traverse toute la modernité politique. Cependant, cette séparation ne permet plus aujourd’hui de saisir la réalité des régulations effectives. Car les scènes d’*arkhè* se sont en grande partie effondrées sans être remplacées, tandis que les *kratos* contemporains tendent à s’exercer sans adresse, sans représentation, sans théâtre. L’on disserte sur les vertus de la démocratie, mais le *dèmos* n’a plus de lieu de confrontation effective : *serait-ce la rue ? Seraient-ce les réseaux sociaux ? Seraient-ce les médias ? Serait-ce le Parlement ?* Force est de constater qu’il n’en est rien : la première est réprimée ; les seconds sont filtrés et compartimentés ; les troisièmes sont contrôlés par une poignée de milliardaires ; et ce dernier est loin de représenter l’ensemble de la société. L’on invoque la République, mais la *res publica* — la chose publique, appellation la plus vague et la plus creuse que l’on puisse donner de l’espace politique — se dissout dans des logiques qui échappent à toute délibération commune : absence de débat, passage en force, brutalisme institutionnel. Quant au langage politique, il continue d’énoncer des structures et des projets, mais il ne parvient pas à décrire les opérations effectives de régulation, tant le système socio-économique, en plus de s’être libéralisé et privatisé, s’est étendu et complexifié tout en confiant les leviers d’action au niveau supranational.
 
 C’est précisément cette disjonction — entre les principes supposés légitimer le pouvoir, et les dispositifs qui en assurent l’effectuation — qui produit aujourd’hui notre impuissance à penser la régulation. Car aucun de ces termes ne dit où se tiennent les tensions, comment elles sont traitées, par quelles instances elles sont articulées. Aucune *-archie* ne garantit aujourd’hui la dispute de ses fondements. Aucune *-cratie* n’organise les conditions de son opposabilité. Et pendant que nous nous obstinons à nommer des formes de régime, les processus réels de régulation — eux — échappent à tout espace visible d’épreuve. Jusqu’à présent, ils opèrent privés de contradictoire, dépourvus de délai, amputés d’institutions de réversibilité. Autrement dit : nous sommes gouvernés sans être gouvernés, régulés sans régulation légitimée, affectés sans instance délibérative.
 
@@ -92,57 +93,57 @@ Cette dissociation — entre pouvoir nommé et régulation agissante — peut se
 
 Cet épisode, souvent évoqué sur le ton de l’anecdote, mérite d’être considéré ici comme un symptôme politique majeur. Il indique que la régulation ne passe plus nécessairement par la verticalité du pouvoir, mais par des dispositifs latents, des agencements structurels, des inerties normatives et des coordinations transversales ou distribuées. Il montre qu’un ordre peut fonctionner sans fondement renouvelé, tenir sans pilotage, résister sans commande visible. Pierre Rosanvallon le soulignait (*La Légitimité démocratique*, 2008), en affirmant que les sociétés reposent aussi sur des « formes de légitimité latentes », moins spectaculaires que le vote ou la loi, mais non moins décisives. L’expérience belge illustre avec force cette persistance d’une régulation sans gouvernement explicite. Ce phénomène suggère que l’architecture régulatrice n’est plus identifiable aux lieux habituels de la souveraineté.
 
-Pour autant, le pouvoir n’a pas disparu ; il s’exerce désormais depuis d’autres formes que celles qui le légitimaient. C’est qu’il s’est délocalisé, désinstitutionnalisé, déréférencé— tout en continuant à structurer silencieusement la vie collective. Et c’est dans cet écart grandissant — entre l’absence de gouvernement et la persistance d’une régulation — que se dessine le cœur de la problématique contemporain : pour nombre d’entre nous, nous continuons à chercher le pouvoir là où il n’est plus, et à négliger les régulations implicites là où elles deviennent de plus en plus décisives.
+Pour autant, le pouvoir n’a pas disparu ; il s’exerce désormais depuis d’autres formes que celles qui le légitimaient. Il s’est délocalisé, désinstitutionnalisé, déréférencé — tout en continuant à structurer silencieusement la vie collective. Et c’est dans cet écart grandissant — entre l’absence de gouvernement et la persistance d’une régulation — que se dessine le cœur de la problématique contemporaine : pour nombre d’entre nous, nous continuons à chercher le pouvoir là où il n’est plus, et à négliger les régulations implicites là où elles deviennent de plus en plus décisives.
 
-Pour que ces dispositifs puissent fonctionner ainsi, discrètement et efficacement, sans qu’on puisse les identifier ni les contester, il faut d’abord que les lieux où ils auraient pu être exposés, discutés ou débattus soient neutralisés, effacés, disqualifiés ou rendus inutiles. Les lieux de pouvoir s’évaporent progressivement, les moyens d’expression se désagrègent, et les cadres d’appel à la responsabilité deviennent in-entendables. L’arène du politique ne disparaît pas brutalement, elle se désagrège lentement à mesure que ses conditions d’existence — la mise en scène, la confrontation et la mise à l’épreuve — se retirent.
+Pour que ces dispositifs puissent fonctionner ainsi, discrètement et efficacement, sans qu’on puisse les identifier ni les contester, il faut d’abord que les lieux où ils auraient pu être exposés, discutés ou débattus soient neutralisés, effacés, disqualifiés ou rendus inutiles. Les lieux de pouvoir s’évaporent progressivement, les moyens d’expression se désagrègent, et les cadres d’appel à la responsabilité deviennent inaudibles. L’arène du politique ne disparaît pas brutalement, elle se désagrège lentement à mesure que ses conditions d’existence — la mise en scène, la confrontation et la mise à l’épreuve — se retirent.
 
-Les anciens espaces d’exposition — Parlement, place publique, journal, commission, agora, tribune — ne remplissent plus leur fonction instituante. Non qu’elles soient abolies : elles subsistent, mais tournent à vide par éléments de langage superposés, par logiques oblitératrices, par interruptions des moments d’interpellation et des déploiements de pensées contre-propositionnelles. Elles parlent sans prise. Elles évoquent sans effet. Elles promettent sans adossement réel. En somme, elles hypnotisent et désactivent. Et tandis qu’elles persistent comme formes, les lieux effectifs de la régulation — là où s’arbitrent réellement les seuils, s’ajustent véritablement les normes, se décident les niveaux de tolérance ou d’exclusion — se déplacent hors de la portée de tous.
+Les anciens espaces d’exposition — Parlement, place publique, journal, commission, agora, tribune — ne remplissent plus leur fonction instituante. Non qu’ils aient été abolis : ils subsistent, mais tournent à vide, pris dans la superposition d’éléments de langage, dans des logiques oblitératrices, dans l’interruption des moments d’interpellation et dans l’empêchement des pensées contre-propositionnelles. Ils parlent sans prise. Ils évoquent sans effet. Ils promettent sans adossement réel. En somme, ils hypnotisent et désactivent. Et tandis qu’ils persistent comme formes, les lieux effectifs de la régulation — là où s’arbitrent réellement les seuils, s’ajustent véritablement les normes, se décident les niveaux de tolérance ou d’exclusion — se déplacent hors de la portée de tous.
 
-Cette désactivation des anciennes scènes de visibilité ne relève pas d’une abstraction — elle a connu, en France, un moment décisif et révélateur : le référendum de 2005 sur le traité constitutionnel européen (TCE). Ce vote ayant pourtant agrégé près de 55 % de refus, n’a pas produit les effets régulateurs que l’on aurait pu attendre. Deux ans plus tard, son contenu central était repris dans le traité de Lisbonne, adopté par voie parlementaire à Versailles, sans jamais redonner la parole aux citoyens.
+Cette désactivation des anciennes scènes de visibilité ne relève pas d’une abstraction — elle a connu, en France, un moment décisif et révélateur : le référendum de 2005 sur le traité constitutionnel européen (TCE). Ce vote, qui a pourtant recueilli près de 55 % de refus, n’a pas produit les effets régulateurs que l’on aurait pu attendre. Deux ans plus tard, son contenu central était repris dans le traité de Lisbonne, adopté par voie parlementaire à Versailles, sans jamais redonner la parole aux citoyens.
 
 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.
 
-Depuis les élections se succèdent, mais l’offre programmatique s’uniformise. En France, lors des campagnes présidentielles de 2022, plusieurs observateurs ont noté une quasi-absence de débats contradictoires sur les infrastructures écologiques, la gestion de l’eau, les algorithmes de tri social ou les seuils budgétaires européens — sujets pourtant structurants et centraux des problématiques actuelles. La parole politique reste intense, mais elle survole en ignorant les points réels d’adhérence et de discordance. Elle n’expose ni la texture du monde vécu ni la réalité du tissu productif. Elle ne donne plus à saisir ni la forme ni la scène où les arbitrages s’opèrent. Elle devient commentaire sans impact, phrase choc ou viralité polémique sans colonne vertébrale permettant de se figurer les problématiques.
+Depuis lors, les élections se succèdent, mais l’offre programmatique s’uniformise. En France, lors des campagnes présidentielles de 2022, plusieurs observateurs ont noté une quasi-absence de débats contradictoires sur les infrastructures écologiques, la gestion de l’eau, les algorithmes de tri social ou les seuils budgétaires européens — sujets pourtant structurants et centraux. La parole politique reste intense, mais elle survole en ignorant les points réels d’adhérence et de discordance. Elle n’expose ni la texture du monde vécu ni la réalité du tissu productif. Elle ne donne plus à saisir ni la forme ni la scène où les arbitrages s’opèrent. Elle devient commentaire sans impact, phrase choc ou viralité polémique, sans colonne vertébrale permettant de se figurer les problématiques.
 
-Côté médias, le constat est plus ambivalent, mais tout aussi troublant. D’un côté, l’information est surabondante ; de l’autre, les controverses s’enlisent dans le flux. On discute des intentions, rarement des formats. On spécule sur les effets, sans jamais problématiser les dispositifs. Un exemple emblématique en est l’émission télévisée *“Face à Baba”*, ou le “Grand Débat National” post-Gilets Jaunes qui suscita beaucoup de prises de parole, tout en ayant peu de prise sur le réel. Il y eut certes des paroles fortes, mais sans aucune structure d’intégration. Il y eut des opinions tranchées, mais sans l’énonciation d’une architecture délibérative. De sorte que la parole a circulé, mais elle n’avait pas autorité à s’instituer. Elle n’était pas dans le bon lieu. Le plateau télévisé n’ayant pour autre vocation que l’audience.
+Côté médias, le constat est plus ambivalent, mais tout aussi troublant. D’un côté, l’information est surabondante ; de l’autre, les controverses s’enlisent dans le flux. On discute des intentions, rarement des formats. On spécule sur les effets, sans jamais problématiser les dispositifs. L’émission télévisée « Face à Baba » ou le « Grand Débat national » post-Gilets jaunes en offrent des exemples emblématiques : ils ont suscité de nombreuses prises de parole, tout en ayant peu de prise sur le réel. Il y eut certes des paroles fortes, mais sans véritable structure d’intégration. Il y eut des opinions tranchées, mais sans l’énonciation d’une architecture délibérative. De sorte que la parole a circulé, mais elle n’avait pas autorité à s’instituer. Elle n’était pas dans le bon lieu : le plateau télévisé n’a d’autre vocation que l’audience.
 
-Même les commissions d’enquête, qui historiquement cristallisaient un moment de vérité ou de remaniement, semblent affectées. Le rapport de l’Assemblée nationale sur la gestion de la pandémie de Covid-19, par exemple, a bien été publié en 2022. Il formule des dizaines de propositions. Mais pourtant, peu d’entre elles ont fait l’objet d’une reprise effective, ni dans la sphère politique, ni dans la sphére médiatique, ni dans la transformation des pratiques administratives. Là encore, la procédure opère — mais sans relai, sans engagement, sans espace de transformation. Même s’il faut le reconnaître, certaines analyses ont néanmoins nourri un débat plus large sur l’état de la santé publique, contribuant à renforcer la vigilance citoyenne sur les infrastructures hospitalières.
+Même les commissions d’enquête, qui, historiquement, cristallisaient un moment de vérité ou de remaniement, semblent affectées. Le rapport de l’Assemblée nationale sur la gestion de la pandémie de Covid-19, par exemple, a bien été publié en 2022. Il formule des dizaines de propositions. Pourtant, peu d’entre elles ont fait l’objet d’une reprise effective, ni dans la sphère politique, ni dans la sphère médiatique, ni dans la transformation des pratiques administratives. Là encore, la procédure opère — mais sans relais, sans engagement, sans espace de transformation. Même s’il faut le reconnaître, certaines analyses ont néanmoins nourri un débat plus large sur l’état de la santé publique, contribuant à renforcer la vigilance citoyenne sur les infrastructures hospitalières.
 
 Un autre exemple, plus récent encore, illustre avec une intensité toute particulière ce décalage entre mise en scène délibérative et opérativité réelle : celui de la Convention Citoyenne pour le Climat, initiée en France en 2019 à la suite du mouvement des Gilets Jaunes. Ce dispositif inédit proposait à 150 citoyennes et citoyens, tirés au sort, de formuler des propositions concrètes pour réduire les émissions de gaz à effet de serre (GES) dans un esprit de justice sociale. La procédure fut longue, exigeante, documentée. Les membres furent encadrés par des scientifiques, des spécialistes, des juristes, des praticiens. Leurs recommandations — 149 au total — furent saluées, y compris par les experts du climat, comme ambitieuses, sérieuses, largement compatibles avec les engagements climatiques de la France. Le président de la République s’était engagé à les transmettre « sans filtre ».
 
-Et pourtant. À l’issue de la convention, la grande majorité des propositions furent vidées de leur substance, renvoyées en commissions, ou transformées jusqu’à l’inverse de leur logique initiale. Certaines furent reprises à la marge dans la loi « Climat et Résilience », d’autres enterrées sans débat, d’autres encore tournées en dérision. L’expression « sans filtre » fut rapidement abandonnée, remplacée par des formules dilatoires. L’instance réflexive a existé, mais elle n’a pas su instituer. La parole a circulé, mais elle n’a pas performé. La procédure bien que dense, n’a pas permis là encore l’instauration d’une architecture de régulation efficiente.
+Et pourtant. À l’issue de la convention, la grande majorité des propositions furent vidées de leur substance, renvoyées en commissions ou transformées jusqu’à l’inverse de leur logique initiale. Certaines furent reprises à la marge dans la loi « Climat et Résilience », d’autres enterrées sans débat, d’autres encore tournées en dérision. L’expression « sans filtre » fut rapidement abandonnée, remplacée par des formules dilatoires. L’instance réflexive a existé, mais elle n’a pas su instituer. La parole a circulé, mais elle n’a pas performé. La procédure, bien que dense, n’a pas permis, là encore, l’instauration d’une architecture de régulation efficiente.
 
 En ce sens, la Convention n’a pas échoué parce qu’elle était utopique ; elle a échoué parce qu’elle n’a pas trouvé d’ancrage régulateur dans l’architecture politique réelle. Cet exemple montre bien comment un dispositif peut produire de la parole et de la visibilité, sans pour autant parvenir à instituer une régulation opérante. Ce n’est donc pas un lieu de confrontation sans conflit, mais une instance délibérative qui n’a pas donné suite. Et c’est ce type d’effacement — non spectaculaire, mais systémique — qui constitue aujourd’hui le symptôme d’une archéologie du politique désamarrée de ses obligations démocratiques.
 
-Contrairement au discours du sens commun pointant la responsabilité du chef de l’État, nous pensons que le pouvoir s’est désincarné. Bien que les figures de l’autorité demeurent — titres, fonctions, attributs symboliques — elles ne rassemblent plus ni contestation structurée (opposant), ni reconnaissance affective (popularité), ni légitimation opérante (autorité). Pendant ce temps, la conflictualité n’a jamais autant submergé le tissu social : désaccords éthiques, désynchronisations temporelles, fractures territoriales, crises multifactorielles, paupérisation systémique, violences symboliques ou physiques. Et malgré nous, cette conflictualité ne trouve plus les lieux où s’exprimer sans exploser. Elle ne se problématise plus dans des dispositifs communs, mais éclate en formes de colère dispersées, parfois illisibles, parfois délégitimées avant même d’avoir trouvé son expression stabilisée. Tel fut le cas du mouvement des Gilets Jaunes.
+Contrairement au discours du sens commun, qui pointe la responsabilité du chef de l’État, nous pensons que le pouvoir s’est désincarné. Bien que les figures de l’autorité demeurent — titres, fonctions, attributs symboliques —, elles ne cristallisent plus ni contestation structurée, ni reconnaissance affective, ni légitimation opérante. Pendant ce temps, la conflictualité n’a jamais autant submergé le tissu social : désaccords éthiques, désynchronisations temporelles, fractures territoriales, crises multifactorielles, paupérisation systémique, violences symboliques ou physiques. Et, pourtant, cette conflictualité ne trouve plus les lieux où s’exprimer sans exploser. Elle ne se problématise plus dans des dispositifs communs, mais éclate en formes de colère dispersées, parfois illisibles, parfois délégitimées avant même d’avoir trouvé une expression stabilisée. Tel fut le cas du mouvement des Gilets jaunes.
 
-Et pendant ce temps, les décisions, elles, se ramassent à la pelle : fermeture d’un service hospitalier, recentrage budgétaire, ajustement d’un seuil d’éligibilité, réforme à marche forcée du régime des retraites, réforme de l’assurance chômage, redéfinition d’indicateurs d’évaluation du marché de l’emploi, déremboursements médicaux, désindexation d’aide sociale, etc., etc. Ces décisions viennent, mais sans adresse explicite, sans exposition des arbitrages effectués, sans procès public, sans contradictoire. Elles sont le fruit d’instances spécifiques rendues opaques et qui n’apparaissent pas, ou n’assument pas leur fonction politique. Elles opèrent sous couvert de technique, mais agissent comme pouvoir — sans l’assumer publiquement.
+Et pendant ce temps, les décisions, elles, s’accumulent : fermeture d’un service hospitalier, recentrage budgétaire, ajustement d’un seuil d’éligibilité, réforme à marche forcée du régime des retraites, réforme de l’assurance chômage, redéfinition d’indicateurs d’évaluation du marché de l’emploi, déremboursements médicaux, désindexation d’aide sociale, etc. Ces décisions adviennent sans adresse explicite, sans exposition des arbitrages effectués, sans procès public, sans contradictoire. Elles sont le fruit d’instances spécifiques rendues opaques, qui n’apparaissent pas ou n’assument pas leur fonction politique. Elles opèrent sous couvert de technique, mais agissent comme pouvoir — sans l’assumer publiquement.
 
-Ainsi, ce n’est pas la *capacité d’agir* qui fait défaut — comme nous le voyons les régulations persistent — mais la *possibilité de rendre visible ce qui agit*. Ce qui tend à s’effacer, ce n’est pas le politique comme mécanisme de régulation, mais comme *espace de mise à l’épreuve*. Nous habitons un monde saturé de normes, mais privé de figures crédibles de justification. Les arbitrages se multiplient sans explication, sans délibération, sans lieu d’arbitrage démocratiquement établi.
+Ainsi, ce n’est pas la capacité d’agir qui fait défaut — les régulations persistent, comme nous le voyons bien —, mais la possibilité de rendre visible ce qui agit. Ce qui tend à s’effacer, ce n’est pas le politique comme mécanisme de régulation, mais le politique comme espace de mise à l’épreuve. Nous habitons un monde saturé de normes, mais privé de figures crédibles de justification. Les arbitrages se multiplient sans explication, sans délibération, sans lieu d’arbitrage démocratiquement établi.
 
 Et c’est précisément cette disparition d’espaces de controverses et de confrontation — cette disparition des lieux où se mettait en forme le différend, où s’exposait le conflit, où se partageait le sensible — qui constitue une perte capitale. Car c’est par la mise en scène des dissensus que les sociétés humaines ont, pendant des siècles, pu penser ensemble ce qui les liait, les divisait, les orientait. C’est sur cette instance d’épreuve qu’étaient rendues visibles les visions du monde qui s’affrontaient, les justifications qui s’opposaient, les intérêts qui s’exprimaient. Supprimez la scène d’exposition — et ce n’est pas le pouvoir qui disparaît, mais la possibilité d’en débattre. De sorte que la régulation dans les faits ne s’interrompt jamais : c’est la possibilité même qu’elle devienne affaire publique qui s’efface. Quant à l’ordre des choses, il ne se dissout pas, il se mue. Et c’est notre capacité collective à le mettre en cause qui se délite faute de compréhension et de préhension.
 
-Privés de lieux publics partagés, devenus propriétés privées, nous sommes aussi privés d’une mise en conflit visible et compréhensible. Pourtant, les tensions sont nombreuses, mais elles restent muettes, sans récit commun ni cadre d’expression. Ce qui nous divise cesse d’apparaître clairement. Ce qui nous déchire n’a plus de langage partagé performatif. Ce qui devrait susciter débat et polémique s’efface dans l’indifférence ou se réduit à une simple gestion technique de l’opinion et de la propagande. Le jeu politique ne dispute plus l’ordre du monde, car il semble ne plus le pouvoir, elle en devient seulement le décor figé, répétant sans contradiction les mêmes ritournelles idéologiques.
+Privés de lieux publics partagés, devenus propriétés privées, nous sommes aussi privés d’une mise en conflit visible et compréhensible. Pourtant, les tensions sont nombreuses, mais elles restent muettes, sans récit commun ni cadre d’expression. Ce qui nous divise cesse d’apparaître clairement. Ce qui nous déchire n’a plus de langage partagé performatif. Ce qui devrait susciter débat et polémique s’efface dans l’indifférence ou se réduit à une simple gestion technique de l’opinion et de la propagande. Le jeu politique ne dispute plus l’ordre du monde, car il ne semble même plus pouvoir le contester ; il en devient seulement le décor figé, répétant sans contradiction les mêmes ritournelles idéologiques.
 
-Or, sans polémique et sans cadre robuste de pensée, il n’y a plus de politique au sens fort. Il y a de la décision, de la gestion, de la réaction, du pilotage. Mais il n’y a plus d’espace où les fins pourraient être débattues, les normes interrogées, les tensions rendues visibles. Ce qui demeure, c’est une sorte de théâtre spectral — où le pouvoir mime encore ses rituels, mais sans adossement, sans prise, sans mise en jeu. Et ce décor fantomatique maintient en vie un imaginaire périmé : celui d’un pouvoir situé, identifiable, contestable. Mais cet imaginaire n’opère plus. Il flotte comme une relique, un fantasme d’époque révolue. C’est tout du moins ce que nous pensons.
+Or, sans polémique et sans cadre robuste de pensée, il n’y a plus de politique au sens fort. Il y a de la décision, de la gestion, de la réaction, du pilotage. Mais il n’y a plus d’espace où les fins pourraient être débattues, les normes interrogées, les tensions rendues visibles. Ce qui demeure, c’est une sorte de théâtre spectral — où le pouvoir mime encore ses rituels, mais sans adossement, sans prise, sans mise en jeu. Et ce décor fantomatique maintient en vie un imaginaire périmé : celui d’un pouvoir situé, identifiable, contestable. Mais cet imaginaire n’opère plus. Il flotte comme une relique, un fantasme d’époque révolue. C’est du moins ce que nous pensons.
 
 Ce qui se prépare alors — sans être encore nommé —, c’est un changement de condition politique. Une métamorphose souterraine, silencieuse, mais décisive. Nous traversons un déplacement du sol même sur lequel reposait notre compréhension du pouvoir, du conflit, de la régulation. Et ce déplacement appelle un autre langage. Non pas un mot de plus dans une série — mais un geste de pensée qui permette de reconfigurer les coordonnées même à partir desquelles nous pourrions analyser ce qui fait tenir les mondes. Ce changement de condition politique n’est pas une abstraction. Il s’est incarné historiquement, idéologiquement, structurellement. Et l’un de ses vecteurs majeurs — rarement interrogé comme tel — fut le tournant néolibéral du XXᵉ siècle.
 
-Avec son avènement, ce qui mute, c'est la fabrique même de la régulation. Ce qui s’est déplacé, ce sont les modalités par lesquelles un ordre devient opérant, ajusté, imposable — sans jamais se dire tel. Le néolibéralisme, en ce sens, décompose les conditions mêmes de la conflictualité démocratique. Il n’a pas réduit les règles : il a effacé les lieux de confrontation où l’on pouvait encore les contester. Il a opéré une reconfiguration des coordonnées fondamentales du politique : *qui agit ? selon quelles justifications ? selon quels formats ? Et où peut-on encore l’interroger ?*
+Avec son avènement, ce qui mute, c’est la fabrique même de la régulation. Ce qui s’est déplacé, ce sont les modalités par lesquelles un ordre devient opérant, ajusté, imposable — sans jamais se dire tel. Le néolibéralisme, en ce sens, décompose les conditions mêmes de la conflictualité démocratique. Il n’a pas réduit les règles : il a effacé les lieux de confrontation où l’on pouvait encore les contester. Il a opéré une reconfiguration des coordonnées fondamentales du politique : *qui agit ? selon quelles justifications ? selon quels formats ? Et où peut-on encore l’interroger ?*
 
-Nous voici donc au bord d’un tournant : bien plus qu’un langage politique qui s’épuise, ce sont les gestes mêmes qui permettaient de nommer, de rendre visible, de mettre à l’épreuve les régulations. Il nous faut donc changer de focale. Non plus partir des régimes connus, des formes visibles du pouvoir, des catégories héritées. Mais remonter au plus près des gestes primitifs qui configurent toute forme de régulation : ce qui fonde, ce qui fait agir, et ce qui articule les deux dans des formes tangibles, contestables, visibles et viables qui pourraient expliquer le mouvement évolutif des sociétés.
+Nous voici donc à l’orée d’un tournant : plus encore qu’un langage politique qui s’épuise, ce sont les gestes mêmes qui permettaient de nommer, de rendre visible, de mettre à l’épreuve les régulations qui se défont. Il nous faut donc changer de focale. Non plus partir des régimes connus, des formes visibles du pouvoir, des catégories héritées, mais remonter au plus près des gestes primitifs qui configurent toute forme de régulation : ce qui fonde, ce qui fait agir, et ce qui articule les deux dans des formes tangibles, contestables, visibles et viables, susceptibles d’éclairer le mouvement évolutif des sociétés.
 
 Dans notre analyse, le moment néolibéral a précisément perturbé cette articulation. Il a introduit un brouillage entre l’origine du pouvoir et ses effets, entre ce qui autorise et ce qui contraint, entre ce qui se dit et ce qui agit. Et c’est dans ce brouillage que se loge aujourd’hui l’impensé du politique contemporain.
 
 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é*.
 
@@ -156,7 +157,7 @@ Alors pourquoi introduire le mot *arcalité*, au risque du néologisme ? Parce q
 
 L’*arcalité* est donc un concept transversal et multiple : elle traverse les époques, les cultures, les régimes — tout en changeant de visage et de figures. Elle peut prendre la forme d’un texte sacré, d’un contrat social, d’une Constitution, d’un mythe fondateur, d’une promesse technoscientifique, ou même d’un jeu d’indicateurs économiques. Elle peut être verticalement imposée ou horizontalement négociée. Elle peut être stabilisée dans le droit ou émerger dans la rue. Mais dans tous les cas, elle opère comme ce qui justifie le pouvoir, ce qui lui donne son aura d’évidence, ce qui naturalise ses opérations en les rendant pensables et acceptables.
 
-Mais au-delà de ces premiers assertions, l’*arcalité* se présente aussi comme un outil épistémologique pour l’analyse des régimes de légitimation — elle peut servir comme *opérateur heuristique* pour lire les sociétés dans leurs *structures de croyance, de reconnaissance, de justification*. Elle permet d’analyser des situations aussi différentes que la réforme d’un système de retraite, le recours à une IA dans la sélection universitaire ou la fondation d’un État théocratique, non pas en fonction de leur contenu normatif, mais en fonction de *ce qui est supposé justifier leur existence*, *ce qui les autorise à s’imposer*.
+Mais au-delà de ces premières assertions, l’arcalité se présente aussi comme un outil épistémologique pour l’analyse des régimes de légitimation — elle peut servir d’opérateur heuristique pour lire les sociétés dans leurs structures de croyance, de reconnaissance, de justification. Elle permet d’analyser des situations aussi différentes que la réforme d’un système de retraite, le recours à une IA dans la sélection universitaire ou la fondation d’un État théocratique, non pas en fonction de leur contenu normatif, mais en fonction de ce qui est supposé justifier leur existence et de ce qui les autorise à s’imposer.
 
 Pour commencer à en saisir la portée, il nous faut sommairement déplier l’*arcalité* dans ses déclinaisons historiques et symboliques. Elle ne renvoie pas à un type de régime, mais à *ce qui autorise un pouvoir à s’exercer sans être récusé* : une scène de légitimation, explicite ou tacite. Ainsi, sous l’Ancien Régime, l’autorité du roi n’était pas justifiée par sa compétence, mais par une *sacralité divine incarnée dans le sang, la lignée, le rite* — une *arcalité théologico-politique* où l’*arkhè* se vivait du trône jusqu’à l’autel.
 
@@ -170,9 +171,9 @@ Ainsi, dans la *Déclaration des droits de la Pachamama* (Bolivie, 2010), la Ter
 
 Dans les technostructures contemporaines, comme les agences de notation, les protocoles de régulation algorithmique, ou les plateformes numériques, l’*arcalité* devient *data* : ce sont les chiffres, les indicateurs, les modèles prédictifs qui justifient l’action. L’autorité repose sur la *robustesse du calcul*, la *neutralité supposée du code*, la *précision des seuils*. Ce que Yuval Noah Harari (*Homo deus, une brève histoire du futur*, 2017) appelle le “*dataïsme”* en est une figure actualisée exemplaire, où le flux des données devient source même de vérités.
 
-Enfin, dans certaines configurations capitalistiques contemporaines, l’*arcalité* prend une forme radicalement *autoréférentielle* : elle ne s’appuie plus sur une extériorité normative, ni même sur une validation juridique ou démocratique, mais sur la seule *performance passée érigée en légitimité présente*. C’est ce que l’on pourrait appeler une *arcalité autogénérative*, où le succès ne demande plus de justification externe — il en révèle sa propre preuve. Une entreprise qui attire des investissements massifs, une plateforme dont la valorisation boursière croît de manière exponentielle, une *startup* qui atteint le statut de “licorne” (plus d’un milliard de dollars de capitalisation), n’a plus besoin de se légitimer par un utilité sociale, une finalité collective ou un adossement institutionnel : *le simple fait d’avoir réussi* suffit à valider l’ensemble des choix stratégiques. Elle s’impose précisément parce qu’elle se donne à voir comme ayant *toujours déjà* fonctionné.
+Enfin, dans certaines configurations capitalistiques contemporaines, l’*arcalité* prend une forme radicalement *autoréférentielle* : elle ne s’appuie plus sur une extériorité normative, ni même sur une validation juridique ou démocratique, mais sur la seule *performance passée érigée en légitimité présente*. C’est ce que l’on pourrait appeler une *arcalité autogénérative*, où le succès ne demande plus de justification externe — il en révèle sa propre preuve. Une entreprise qui attire des investissements massifs, une plateforme dont la valorisation boursière croît de manière exponentielle, une *startup* qui atteint le statut de “licorne” (plus d’un milliard de dollars de capitalisation), n’a plus besoin de se légitimer par une utilité sociale, une finalité collective ou un adossement institutionnel : *le simple fait d’avoir réussi* suffit à valider l’ensemble des choix stratégiques. Elle s’impose précisément parce qu’elle se donne à voir comme ayant *toujours déjà* fonctionné.
 
-Mais l’*arcalité* dans ses multiples manifestations, si décisive soit-elle, ne suffit pas à faire tenir un monde. Car un ordre social, quel qu’il soit, ne repose jamais uniquement sur ses principes le légitimant. Il doit aussi pouvoir opérer, agir, décider, trancher, maintenir — parfois même contraindre ou punir. Il ne suffit pas qu’un pouvoir soit justifié ; encore faut-il qu’il se déploie, qu’il prenne forme dans des pratiques, des formats, des opérateurs. En somme, il ne suffit pas qu’un ordre se dise fondé ; il faut encore qu’il s’exerce.
+Mais l’arcalité, dans ses multiples manifestations, si décisive soit-elle, ne suffit pas à faire tenir un monde. Car un ordre social, quel qu’il soit, ne repose jamais uniquement sur les principes qui le légitiment. Il doit aussi pouvoir opérer, agir, décider, trancher, maintenir — parfois même contraindre ou punir. Il ne suffit pas qu’un pouvoir soit justifié ; encore faut-il qu’il se déploie, qu’il prenne forme dans des pratiques, des formats, des opérateurs. En somme, il ne suffit pas qu’un ordre se dise fondé ; il faut encore qu’il s’exerce.
 
 Il faut pour cela un autre registre, un autre plan de la régulation : celui de l’action. C’est ici qu’intervient ce que nous nommons la *cratialité* — terme forgé comme pour les régimes en -cratie — à partir de *kratos* (κράτος), qui désigne en grec ancien la force, la puissance agissante, la capacité à faire advenir quelque chose dans le réel. Si l’*arcalité est ce qui autorise*, la *cratialité est ce qui opère*. L’une pose les conditions de validité, l’autre produit les effets. L’une fonde, l’autre exerce.
 
@@ -196,7 +197,7 @@ Dans de nombreux États postcoloniaux, la *cratialité* conserve en grande parti
 
 À l’ère écologique, la *cratialité* passe par la *norme chiffrée* : marchés du carbone, seuils ISO, critères ESG. Le droit à polluer se négocie, se calcule, s’échange. Il s’agit moins de régulation morale que d’un *pilotage algorithmique* des équilibres. Bien que la Terre devienne une *arcalité*, sa régulation, elle, repose sur une *cratialité technico-financière*, opaque, désarrimée de tout débat public.
 
-Enfin, dans les régimes numériques contemporains, la *cratialité* se dissout dans les infrastructures : IA décisionnelles, *scoring* social, plateformes automatisées. Comme l’écrit Shoshana Zuboff, nous sommes entrés dans l’ère du *capitalisme de surveillance*, où la gouvernance s’exerce sans discours et sans voie de recours. Byung-Chul Han y voit un “pouvoir transparent total” où celui-ci n’est plus énoncé — il agit, module, filtre et exclut.
+Enfin, dans les régimes numériques contemporains, la cratialité se dissout dans les infrastructures : IA décisionnelles, scoring social, plateformes automatisées. Comme l’écrit Shoshana Zuboff, nous sommes entrés dans l’ère du capitalisme de surveillance, où la gouvernance s’exerce sans discours et sans voie de recours. Byung-Chul Han y voit un « pouvoir transparent total », où le pouvoir n’est plus énoncé — il agit, module, filtre et exclut.
 
 Après ce tour d’horizon des *cratialités* à travers l’espace et le temps, s’il fallait justifier, en dernière instance, l’introduction d*e* ce concept, ce serait en raison d’un vide analytique que les cadres existants ne parviennent plus à combler. La question n’est pas tant de créer un terme de plus, que de rendre dicible une opération fondamentale du pouvoir : celle qui consiste à *agir sans autorité explicite*, à contraindre sans justification, à réguler sans discours. En ce sens, la *cratialité* ne s’oppose pas à l’*arcalité*, elles se complètent. Elles révèlent l’une à l’autre leur limite. Car il est possible d’agir sans légitimer, de structurer sans fonder, d’opérer sans lieu de confrontation ni narration instituante.
 
@@ -204,9 +205,9 @@ Le concept de *cratialité* nous offre le terme pour penser ce pouvoir qui ne se
 
 C’est pourquoi la *cratialité* ne se confond ni avec la domination, ni avec le pouvoir institutionnel, ni même avec la technique. Elle traverse les formes, en tant qu’*opérativité sans fondement*. Elle n’explique pas pourquoi un ordre existe — elle permet de comprendre comment il s’exerce effectivement. Et c’est là sa puissance critique : déloger le politique de ses seules figures visibles, pour révéler les régulations silencieuses, les contraintes discrètes, les mécanismes délégués, les automatisations sans autorité véritablement légitime. Elle ouvre ainsi une contre-archéologie du pouvoir, attentive à ce qui agit sans se dire, à ce qui règle sans apparaître.
 
-Sur le plan épistémologique, la *cratialité* permet donc un déplacement décisif : elle nous extrait du dualisme éculé entre légitimité et illégitimité, démocratie et anarchie, État et société civile. Elle invite à penser un entre-deux, un “tiers-opératoire” : là où le politique s’institue non par la Loi ou par le Chaos, mais par l’*agencement de dispositifs producteurs de réalité*. Ce pouvoir-là ne commande pas : il invente et configure. Il ne tranche pas : il jauge et module. Il ne s’expose pas : il infiltre et s’impose. Et c’est pourquoi il faut un mot pour le désigner — non pas pour l’isoler, mais pour en cartographier les régimes, les formats, les seuils d’acceptabilité.
+Sur le plan épistémologique, la cratialité permet donc un déplacement décisif : elle nous extrait du dualisme éculé entre légitimité et illégitimité, démocratie et anarchie, État et société civile. Elle invite à penser un entre-deux, un « tiers opératoire » : là où le politique s’institue non par la Loi ou par le Chaos, mais par l’agencement de dispositifs producteurs de réalité. Ce pouvoir-là ne commande pas : il invente et configure. Il ne tranche pas : il jauge et module. Il ne s’expose pas : il infiltre et s’impose. Et c’est pourquoi il faut un mot pour le désigner — non pas pour l’isoler, mais pour en cartographier les régimes, les formats, les seuils d’acceptabilité.
 
-Sur le plan critique, la *cratialité* permet aussi de distinguer l’effet de l’auteur : ce n’est pas parce que personne ne commande que rien ne s’impose. Ce n’est pas parce qu’une norme n’a pas été votée qu’elle n’opère pas, et à l’opposé, ce n’est pas parce qu’une norme est appliquée qu’elle opère nécessairement. C’est toute la différence entre l’ordre prescrit et l’ordre effectif — différence aujourd’hui cruciale, tant la puissance régulatrice des systèmes dépasse celle des gouvernements.
+Sur le plan critique, la cratialité permet aussi de distinguer l’effet de l’auteur : ce n’est pas parce que personne ne commande que rien ne s’impose. Ce n’est pas parce qu’une norme n’a pas été votée qu’elle n’opère pas et, inversement, ce n’est pas parce qu’une norme est appliquée qu’elle opère nécessairement. C’est toute la différence entre l’ordre prescrit et l’ordre effectif — différence aujourd’hui cruciale, tant la puissance régulatrice des systèmes dépasse celle des gouvernements.
 
 Enfin, sur le plan opératoire, la *cratialité* fournit une grille de lecture transversale des phénomènes contemporains : du design d’une application mobile à la réorganisation d’un hôpital, du protocole logistique d’un port à la normalisation de la parole publique, du filtrage des contenus en ligne à la gestion algorithmique de l’emploi. Partout où quelque chose agit sans se dire comme pouvoir, sans se nommer comme décision, sans s’assumer comme contrainte, la *cratialité* est à l’œuvre.
 
@@ -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.
+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 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 adé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 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.
+C’est en remontant aux rouages primitifs du pouvoir — l’*arcalité*, polarité des formes d’affectation, et 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.
 
-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 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.
 
-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.
-
-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.
+Ce que cette notion permet de mettre au jour ne se limite pas au fonctionnement des régulations, mais concerne aussi les difficultés croissantes à les voir 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’aux marges de la discussion publique, et ce qui régule s’exerce désormais 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

@@ -2,6 +2,53 @@ import type { CollectionEntry } from "astro:content";
 
 export type GlossaryEntry = CollectionEntry<"glossaire">;
 
+export type GlossaryPortalLink = {
+  href: string;
+  label: string;
+};
+
+export type GlossaryRelationSection = {
+  title: string;
+  items: GlossaryEntry[];
+};
+
+export type GlossaryRelationBlock = GlossaryRelationSection & {
+  className: string;
+};
+
+export type GlossaryHomeStats = {
+  totalEntries: number;
+  paradigmesCount: number;
+  doctrinesCount: number;
+  metaRegimesCount: number;
+};
+
+export type GlossaryEntryAsideData = {
+  displayFamily: string;
+  displayDomain: string;
+  displayLevel: string;
+  showNoyau: boolean;
+  showSameFamily: boolean;
+  fondamentaux: GlossaryEntry[];
+  sameFamilyTitle: string;
+  sameFamilyEntries: GlossaryEntry[];
+  relationSections: GlossaryRelationSection[];
+  contextualTheory: GlossaryEntry[];
+};
+
+export type GlossaryHomeData = {
+  fondamentaux: GlossaryEntry[];
+  scenes: GlossaryEntry[];
+  dynamiques: GlossaryEntry[];
+  metaRegimes: GlossaryEntry[];
+  metaRegimesPreview: GlossaryEntry[];
+  arcalite?: GlossaryEntry;
+  cratialite?: GlossaryEntry;
+  tension?: GlossaryEntry;
+  sceneDepreuve?: GlossaryEntry;
+  archicration?: GlossaryEntry;
+};
+
 export const GLOSSARY_COLLATOR = new Intl.Collator("fr", {
   sensitivity: "base",
   numeric: true,
@@ -75,6 +122,34 @@ export const FAMILY_SECTION_TITLES: Record<string, string> = {
   epistemologie: "Outillage épistémologique",
 };
 
+const PREFERRED_PARADIGME_SLUGS = [
+  "gouvernementalite",
+  "gouvernementalite-algorithmique",
+  "cybernetique",
+  "biopolitique",
+  "domination-legale-rationnelle",
+  "democratie-deliberative",
+  "gouvernance-des-communs",
+  "agencement-machinique",
+  "pharmacologie-technique",
+  "preemption-algorithmique",
+  "dissensus-politique",
+  "lieu-vide-du-pouvoir",
+  "habitus-et-violence-symbolique",
+  "theorie-de-la-resonance",
+  "conatus-et-multitude",
+  "configuration-et-interdependance",
+  "technodiversite-et-cosmotechnie",
+  "grammatisation-et-proletarisation-cognitive",
+] as const;
+
+const PREFERRED_DOCTRINE_SLUGS = [
+  "contractualisme-hobbesien",
+  "droit-naturel-et-propriete",
+  "volonte-generale",
+  "decisionnisme-souverain",
+] as const;
+
 export function normalizeGlossarySlug(value: unknown): string {
   return String(value ?? "")
     .trim()
@@ -99,9 +174,7 @@ export function hrefOfGlossaryEntry(
 export function buildGlossaryBySlug(
   entries: GlossaryEntry[] = [],
 ): Map<string, GlossaryEntry> {
-  return new Map(
-    entries.map((entry) => [slugOfGlossaryEntry(entry), entry]),
-  );
+  return new Map(entries.map((entry) => [slugOfGlossaryEntry(entry), entry]));
 }
 
 export function sortGlossaryEntries(
@@ -128,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[] = [],
@@ -151,12 +254,12 @@ export function resolveGlossaryEntriesInSourceOrder(
 }
 
 export function resolveGlossaryEntries(
-    slugs: string[] = [],
-    allEntries: GlossaryEntry[] = [],
-  ): GlossaryEntry[] {
-    return sortGlossaryEntries(
-      resolveGlossaryEntriesInSourceOrder(slugs, allEntries),
-    );
+  slugs: string[] = [],
+  allEntries: GlossaryEntry[] = [],
+): GlossaryEntry[] {
+  return sortGlossaryEntries(
+    resolveGlossaryEntriesInSourceOrder(slugs, allEntries),
+  );
 }
 
 export function rawFamilyOf(
@@ -188,7 +291,11 @@ export function familyOf(
   if (slug === "autarchicratie") return "pathologie";
   if (slug === "obliteration-archicratique") return "dynamique";
 
-  if (FONDAMENTAUX_WANTED.includes(slug as (typeof FONDAMENTAUX_WANTED)[number])) {
+  if (
+    FONDAMENTAUX_WANTED.includes(
+      slug as (typeof FONDAMENTAUX_WANTED)[number],
+    )
+  ) {
     return "concept-fondamental";
   }
 
@@ -259,6 +366,47 @@ export function countGlossaryEntriesByFamily(
   return entries.filter((entry) => familyOf(entry) === familyKey).length;
 }
 
+export function getGlossaryPortalLinks(): GlossaryPortalLink[] {
+  return [
+    { href: "/glossaire/", label: "Accueil du glossaire" },
+    { href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" },
+    { href: "/glossaire/index-complet/", label: "Index complet" },
+    {
+      href: "/glossaire/paradigme-archicratique/",
+      label: "Paradigme archicratique",
+    },
+    {
+      href: "/glossaire/scenes-archicratiques/",
+      label: "Scènes archicratiques",
+    },
+    {
+      href: "/glossaire/dynamiques-archicratiques/",
+      label: "Dynamiques archicratiques",
+    },
+    {
+      href: "/glossaire/tensions-irreductibles/",
+      label: "Tensions irréductibles",
+    },
+    {
+      href: "/glossaire/archicrations/",
+      label: "Méta-régimes archicratiques",
+    },
+    { href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
+    { href: "/glossaire/verbes-de-la-scene/", label: "Verbes de la scène" },
+  ];
+}
+
+export function getGlossaryHomeStats(
+  allEntries: GlossaryEntry[] = [],
+): GlossaryHomeStats {
+  return {
+    totalEntries: allEntries.length,
+    paradigmesCount: countGlossaryEntriesByKind(allEntries, "paradigme"),
+    doctrinesCount: countGlossaryEntriesByKind(allEntries, "doctrine"),
+    metaRegimesCount: countGlossaryEntriesByFamily(allEntries, "meta-regime"),
+  };
+}
+
 export function getEntriesOfSameFamily(
   entry: GlossaryEntry,
   allEntries: GlossaryEntry[] = [],
@@ -279,56 +427,50 @@ export function getSameFamilyTitle(
   return FAMILY_SECTION_TITLES[familyOf(entry)] ?? "Même famille";
 }
 
-export type GlossaryRelationBlock = {
-  title: string;
-  items: GlossaryEntry[];
-  className: string;
-};
-
 export function getRelationBlocks(
-    entry: GlossaryEntry,
-    allEntries: GlossaryEntry[] = [],
-  ): GlossaryRelationBlock[] {
-    const currentSlug = slugOfGlossaryEntry(entry);
-  
-    const relatedEntries = resolveGlossaryEntriesInSourceOrder(
-      entry.data.related ?? [],
-      allEntries,
-    ).filter((item) => slugOfGlossaryEntry(item) !== currentSlug);
-  
-    const opposedEntries = resolveGlossaryEntriesInSourceOrder(
-      entry.data.opposedTo ?? [],
-      allEntries,
-    ).filter((item) => slugOfGlossaryEntry(item) !== currentSlug);
-  
-    const seeAlsoEntries = resolveGlossaryEntriesInSourceOrder(
-      entry.data.seeAlso ?? [],
-      allEntries,
-    ).filter((item) => slugOfGlossaryEntry(item) !== currentSlug);
-  
-    return [
-      {
-        title: "Concepts liés",
-        items: relatedEntries,
-        className: "is-related",
-      },
-      {
-        title: "En tension avec",
-        items: opposedEntries,
-        className: "is-opposed",
-      },
-      {
-        title: "Voir aussi",
-        items: seeAlsoEntries,
-        className: "is-see-also",
-      },
-    ].filter((block) => block.items.length > 0);
-  }
+  entry: GlossaryEntry,
+  allEntries: GlossaryEntry[] = [],
+): GlossaryRelationBlock[] {
+  const currentSlug = slugOfGlossaryEntry(entry);
+
+  const relatedEntries = resolveGlossaryEntriesInSourceOrder(
+    entry.data.related ?? [],
+    allEntries,
+  ).filter((item) => slugOfGlossaryEntry(item) !== currentSlug);
+
+  const opposedEntries = resolveGlossaryEntriesInSourceOrder(
+    entry.data.opposedTo ?? [],
+    allEntries,
+  ).filter((item) => slugOfGlossaryEntry(item) !== currentSlug);
+
+  const seeAlsoEntries = resolveGlossaryEntriesInSourceOrder(
+    entry.data.seeAlso ?? [],
+    allEntries,
+  ).filter((item) => slugOfGlossaryEntry(item) !== currentSlug);
+
+  return [
+    {
+      title: "Concepts liés",
+      items: relatedEntries,
+      className: "is-related",
+    },
+    {
+      title: "En tension avec",
+      items: opposedEntries,
+      className: "is-opposed",
+    },
+    {
+      title: "Voir aussi",
+      items: seeAlsoEntries,
+      className: "is-see-also",
+    },
+  ].filter((block) => block.items.length > 0);
+}
 
 export function getRelationSections(
   entry: GlossaryEntry,
   allEntries: GlossaryEntry[] = [],
-): Array<{ title: string; items: GlossaryEntry[] }> {
+): GlossaryRelationSection[] {
   return getRelationBlocks(entry, allEntries).map(({ title, items }) => ({
     title,
     items,
@@ -347,34 +489,6 @@ function isTheoryEntry(entry: GlossaryEntry): boolean {
   );
 }
 
-const PREFERRED_PARADIGME_SLUGS = [
-  "gouvernementalite",
-  "gouvernementalite-algorithmique",
-  "cybernetique",
-  "biopolitique",
-  "domination-legale-rationnelle",
-  "democratie-deliberative",
-  "gouvernance-des-communs",
-  "agencement-machinique",
-  "pharmacologie-technique",
-  "preemption-algorithmique",
-  "dissensus-politique",
-  "lieu-vide-du-pouvoir",
-  "habitus-et-violence-symbolique",
-  "theorie-de-la-resonance",
-  "conatus-et-multitude",
-  "configuration-et-interdependance",
-  "technodiversite-et-cosmotechnie",
-  "grammatisation-et-proletarisation-cognitive",
-] as const;
-
-const PREFERRED_DOCTRINE_SLUGS = [
-  "contractualisme-hobbesien",
-  "droit-naturel-et-propriete",
-  "volonte-generale",
-  "decisionnisme-souverain",
-] as const;
-
 export function getContextualTheory(
   entry: GlossaryEntry,
   allEntries: GlossaryEntry[] = [],
@@ -383,15 +497,15 @@ export function getContextualTheory(
   const bySlug = buildGlossaryBySlug(allEntries);
 
   const fromRelations = uniqueGlossaryEntries([
-    ...resolveGlossaryEntries(entry.data.related ?? [], allEntries),
-    ...resolveGlossaryEntries(entry.data.seeAlso ?? [], allEntries),
-    ...resolveGlossaryEntries(entry.data.opposedTo ?? [], allEntries),
+    ...resolveGlossaryEntriesInSourceOrder(entry.data.related ?? [], allEntries),
+    ...resolveGlossaryEntriesInSourceOrder(entry.data.seeAlso ?? [], allEntries),
+    ...resolveGlossaryEntriesInSourceOrder(entry.data.opposedTo ?? [], allEntries),
   ])
     .filter((item) => slugOfGlossaryEntry(item) !== currentSlug)
     .filter((item) => isTheoryEntry(item));
 
   if (fromRelations.length > 0) {
-    return sortGlossaryEntries(fromRelations).slice(0, 6);
+    return fromRelations.slice(0, 6);
   }
 
   if (familyOf(entry) === "paradigme") {
@@ -413,4 +527,81 @@ export function getContextualTheory(
   }
 
   return [];
-}
+}
+
+export function getGlossaryEntryAsideData(
+  currentEntry: GlossaryEntry,
+  allEntries: GlossaryEntry[] = [],
+): GlossaryEntryAsideData {
+  const currentFamily = familyOf(currentEntry);
+  const currentSlug = slugOfGlossaryEntry(currentEntry);
+
+  const fondamentaux = getFondamentaux(allEntries);
+  const sameFamilyTitle = getSameFamilyTitle(currentEntry);
+  const relationSections = getRelationSections(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" &&
+    fondamentaux.length > 0;
+
+  const showSameFamily =
+    currentFamily !== "concept-fondamental" &&
+    sameFamilyEntries.length > 0;
+
+  return {
+    displayFamily: getDisplayFamily(currentEntry),
+    displayDomain: getDisplayDomain(currentEntry),
+    displayLevel: getDisplayLevel(currentEntry),
+    showNoyau,
+    showSameFamily,
+    fondamentaux,
+    sameFamilyTitle,
+    sameFamilyEntries: showSameFamily ? sameFamilyEntries : [],
+    relationSections,
+    contextualTheory,
+  };
+}
+
+export function getGlossaryHomeData(
+  entries: GlossaryEntry[] = [],
+): GlossaryHomeData {
+  const bySlug = buildGlossaryBySlug(entries);
+
+  const fondamentaux = getGlossaryEntriesByFamily(entries, "concept-fondamental");
+  const scenes = getGlossaryEntriesByFamily(entries, "scene");
+  const dynamiques = sortGlossaryEntries(
+    entries.filter((entry) =>
+      ["dynamique", "pathologie"].includes(familyOf(entry)),
+    ),
+  );
+  const metaRegimes = getGlossaryEntriesByFamily(entries, "meta-regime");
+
+  return {
+    fondamentaux,
+    scenes,
+    dynamiques,
+    metaRegimes,
+    metaRegimesPreview: metaRegimes.slice(0, 6),
+    arcalite: bySlug.get("arcalite"),
+    cratialite: bySlug.get("cratialite"),
+    tension: bySlug.get("tension"),
+    sceneDepreuve: bySlug.get("scene-depreuve"),
+    archicration: bySlug.get("archicration"),
+  };
+}

src/pages/glossaire/[...slug].astro

@@ -2,6 +2,10 @@
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
 import GlossaryAside from "../../components/GlossaryAside.astro";
 import GlossaryRelationCards from "../../components/GlossaryRelationCards.astro";
+import GlossaryEntryLegacyNote from "../../components/GlossaryEntryLegacyNote.astro";
+import GlossaryEntryHero from "../../components/GlossaryEntryHero.astro";
+import GlossaryEntryBody from "../../components/GlossaryEntryBody.astro";
+import GlossaryEntryStickySync from "../../components/GlossaryEntryStickySync.astro";
 import { getCollection, render } from "astro:content";
 import {
   getDisplayDomain,
@@ -61,10 +65,6 @@ const relationBlocks = getRelationBlocks(entry, allEntries);
 const displayFamily = getDisplayFamily(entry);
 const displayDomain = getDisplayDomain(entry);
 const displayLevel = getDisplayLevel(entry);
-
-const hasScholarlyMeta =
-  (entry.data.mobilizedAuthors?.length ?? 0) > 0 ||
-  (entry.data.comparisonTraditions?.length ?? 0) > 0;
 ---
 
 <GlossaryLayout
@@ -77,434 +77,27 @@ const hasScholarlyMeta =
   </Fragment>
 
   {isAliasRoute && (
-    <p class="glossary-legacy-note">
-      Cette entrée a été renommée. L’intitulé canonique est :
-      <a href={canonicalHref}>{entry.data.term}</a>.
-    </p>
+    <GlossaryEntryLegacyNote
+      canonicalHref={canonicalHref}
+      term={entry.data.term}
+    />
   )}
 
-  <header class="glossary-entry-head" data-ge-hero>
-    <div class="glossary-entry-head__title">
-      <h1>{entry.data.term}</h1>
-    </div>
+  <GlossaryEntryHero
+    term={entry.data.term}
+    definitionShort={entry.data.definitionShort}
+    displayFamily={displayFamily}
+    displayDomain={displayDomain}
+    displayLevel={displayLevel}
+    mobilizedAuthors={entry.data.mobilizedAuthors ?? []}
+    comparisonTraditions={entry.data.comparisonTraditions ?? []}
+  />
 
-    <div class="glossary-entry-summary">
-      <p class="glossary-entry-dek">
-        <em>{entry.data.definitionShort}</em>
-      </p>
-
-      <div class="glossary-entry-signals" aria-label="Repères de lecture">
-        <span class="glossary-pill glossary-pill--family">
-          <strong>Famille :</strong> {displayFamily}
-        </span>
-
-        {displayDomain && (
-          <span class="glossary-pill">
-            <strong>Domaine :</strong> {displayDomain}
-          </span>
-        )}
-
-        {displayLevel && (
-          <span class="glossary-pill">
-            <strong>Niveau :</strong> {displayLevel}
-          </span>
-        )}
-      </div>
-
-      {hasScholarlyMeta && (
-        <div class="glossary-entry-meta">
-          {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
-            <p>
-              <strong>Auteurs mobilisés :</strong> {entry.data.mobilizedAuthors.join(" / ")}
-            </p>
-          )}
-
-          {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
-            <p>
-              <strong>Traditions de comparaison :</strong> {entry.data.comparisonTraditions.join(" / ")}
-            </p>
-          )}
-        </div>
-      )}
-    </div>
-  </header>
-
-  <div class="glossary-entry-body">
+  <GlossaryEntryBody>
     <Content />
-  </div>
+  </GlossaryEntryBody>
 
   <GlossaryRelationCards relationBlocks={relationBlocks} />
-</GlossaryLayout>
 
-<script is:inline>
-  (() => {
-    const boot = () => {
-      const body = document.body;
-      const root = document.documentElement;
-      const hero = document.querySelector("[data-ge-hero]");
-      const follow = document.getElementById("reading-follow");
-      const mqMobile = window.matchMedia("(max-width: 860px)");
-
-      if (!body || !root || !hero || !follow) return;
-
-      const BODY_CLASS = "is-glossary-entry-page";
-      const FOLLOW_ON_CLASS = "glossary-entry-follow-on";
-
-      let lastHeight = -1;
-      let lastFollowOn = null;
-      let raf = 0;
-
-      body.classList.add(BODY_CLASS);
-
-      const heroHeight = () =>
-        Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
-
-      const computeFollowOn = () =>
-        !mqMobile.matches &&
-        follow.classList.contains("is-on") &&
-        follow.style.display !== "none" &&
-        follow.getAttribute("aria-hidden") !== "true";
-
-      const stripLocalSticky = () => {
-        document
-          .querySelectorAll(
-            ".glossary-entry-body h2, .glossary-entry-body h3, .glossary-relations h2, .glossary-relations h3"
-          )
-          .forEach((el) => {
-            el.classList.remove("is-sticky");
-            el.removeAttribute("data-sticky-active");
-          });
-      };
-
-      const applyLocalStickyHeight = () => {
-        const h = mqMobile.matches ? 0 : heroHeight();
-        if (h === lastHeight) return;
-        lastHeight = h;
-
-        if (typeof window.__archiSetLocalStickyHeight === "function") {
-          window.__archiSetLocalStickyHeight(h);
-        } else {
-          root.style.setProperty("--glossary-local-sticky-h", `${h}px`);
-        }
-      };
-
-      const syncFollowState = () => {
-        const on = computeFollowOn();
-        if (on === lastFollowOn) return;
-        lastFollowOn = on;
-        body.classList.toggle(FOLLOW_ON_CLASS, on);
-      };
-
-      const syncAll = () => {
-        stripLocalSticky();
-        syncFollowState();
-        applyLocalStickyHeight();
-      };
-
-      const schedule = () => {
-        if (raf) return;
-        raf = requestAnimationFrame(() => {
-          raf = 0;
-          syncAll();
-        });
-      };
-
-      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("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>
-  .glossary-legacy-note{
-    padding: 10px 12px;
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 12px;
-    background: rgba(127,127,127,0.05);
-    font-size: 14px;
-    line-height: 1.45;
-    margin-bottom: 18px;
-  }
-
-  .glossary-entry-head{
-    position: sticky;
-    top: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px));
-    z-index: 11;
-    margin: 0 0 24px;
-    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);
-    overflow: hidden;
-    transition:
-      border-radius 180ms ease,
-      box-shadow 180ms ease,
-      border-color 180ms ease;
-  }
-
-  .glossary-entry-head__title{
-    padding: 18px 18px 16px;
-  }
-
-  .glossary-entry-head h1{
-    margin: 0;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
-    line-height: 1.02;
-    letter-spacing: -.04em;
-    font-weight: 850;
-  }
-
-  .glossary-entry-summary{
-    display: grid;
-    gap: 14px;
-    padding: 16px 18px 18px;
-    border-top: 1px solid rgba(127,127,127,0.14);
-    background: rgba(255,255,255,0.02);
-  }
-
-  .glossary-entry-dek{
-    margin: 0;
-    max-width: 76ch;
-    font-size: 1.04rem;
-    line-height: 1.55;
-    opacity: .94;
-  }
-
-  .glossary-entry-signals{
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 0;
-  }
-
-  .glossary-pill{
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 5px 10px;
-    border: 1px solid rgba(127,127,127,0.24);
-    border-radius: 999px;
-    background: rgba(127,127,127,0.05);
-    font-size: 13px;
-    line-height: 1.35;
-  }
-
-  .glossary-pill--family{
-    border-color: rgba(127,127,127,0.36);
-    font-weight: 700;
-  }
-
-  .glossary-entry-meta{
-    margin: 0;
-    padding: 10px 12px;
-    border: 1px solid rgba(127,127,127,0.18);
-    border-radius: 12px;
-    background: rgba(127,127,127,0.04);
-  }
-
-  .glossary-entry-meta p{
-    margin: 0;
-    font-size: 14px;
-    line-height: 1.5;
-  }
-
-  .glossary-entry-meta p + p{
-    margin-top: 6px;
-  }
-
-  .glossary-entry-body{
-    margin-bottom: 28px;
-  }
-
-  .glossary-entry-body h2,
-  .glossary-entry-body h3,
-  .glossary-relations h2,
-  .glossary-relations h3{
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 18px);
-  }
-
-  .glossary-relations{
-    margin-top: 26px;
-    padding-top: 18px;
-    border-top: 1px solid rgba(127,127,127,0.18);
-  }
-
-  .glossary-relations h2{
-    margin-bottom: 14px;
-  }
-
-  .glossary-relations-grid{
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: 12px;
-  }
-
-  .glossary-relations-card{
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 16px;
-    padding: 14px 16px;
-    background: rgba(127,127,127,0.05);
-  }
-
-  .glossary-relations-card h3{
-    margin-top: 0;
-    margin-bottom: 10px;
-    font-size: 15px;
-    line-height: 1.35;
-  }
-
-  .glossary-relations-card ul{
-    margin: 0;
-    padding-left: 18px;
-  }
-
-  .glossary-relations-card li{
-    margin-bottom: 8px;
-    font-size: 14px;
-    line-height: 1.45;
-  }
-
-  .glossary-relations-card li:last-child{
-    margin-bottom: 0;
-  }
-
-  .glossary-relations-card span{
-    opacity: .9;
-  }
-
-  :global(body.is-glossary-entry-page #reading-follow){
-    z-index: 10;
-  }
-
-  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
-    margin-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-summary){
-    gap: 10px;
-    padding-top: 12px;
-    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-meta){
-    padding: 8px 10px;
-  }
-
-  :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow){
-    transform: translateY(-1px);
-  }
-
-  :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow .reading-follow__inner){
-    margin-top: -1px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  :global(body.is-glossary-entry-page .glossary-entry-body h2.is-sticky),
-  :global(body.is-glossary-entry-page .glossary-entry-body h2[data-sticky-active="true"]),
-  :global(body.is-glossary-entry-page .glossary-entry-body h3.is-sticky),
-  :global(body.is-glossary-entry-page .glossary-entry-body h3[data-sticky-active="true"]),
-  :global(body.is-glossary-entry-page .glossary-relations h2.is-sticky),
-  :global(body.is-glossary-entry-page .glossary-relations h2[data-sticky-active="true"]),
-  :global(body.is-glossary-entry-page .glossary-relations h3.is-sticky),
-  :global(body.is-glossary-entry-page .glossary-relations h3[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){
-    .glossary-entry-signals{
-      gap: 6px;
-    }
-
-    .glossary-pill{
-      font-size: 12px;
-    }
-  }
-
-  @media (max-width: 860px){
-    .glossary-entry-head{
-      position: static;
-      border-radius: 22px;
-      margin-bottom: 20px;
-    }
-
-    .glossary-entry-head__title{
-      padding: 14px 14px 12px;
-    }
-
-    .glossary-entry-summary{
-      gap: 12px;
-      padding: 14px;
-    }
-
-    .glossary-entry-dek{
-      max-width: none;
-    }
-
-    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
-      margin-bottom: 20px;
-      border-radius: 22px;
-    }
-  }
-
-  @media (prefers-color-scheme: dark){
-    .glossary-entry-meta{
-      background: rgba(255,255,255,0.03);
-    }
-
-    .glossary-legacy-note,
-    .glossary-pill,
-    .glossary-relations-card{
-      background: rgba(255,255,255,0.04);
-    }
-  }
-</style>
+  <GlossaryEntryStickySync />
+</GlossaryLayout>

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

@@ -1,6 +1,10 @@
 ---
 import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
 import GlossaryHomeAside from "../../components/GlossaryHomeAside.astro";
+import GlossaryHomeHero from "../../components/GlossaryHomeHero.astro";
+import GlossaryHomeSection from "../../components/GlossaryHomeSection.astro";
+import GlossaryCardGrid from "../../components/GlossaryCardGrid.astro";
+import GlossaryPortalGrid from "../../components/GlossaryPortalGrid.astro";
 import { getCollection } from "astro:content";
 import {
   buildGlossaryBySlug,
@@ -35,12 +39,56 @@ 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/";
 const verbesPageHref = "/glossaire/verbes-de-la-scene/";
 const paradigmesPageHref = "/glossaire/paradigmes/";
 const indexCompletPageHref = "/glossaire/index-complet/";
+
+const paradigmePortalItems = [
+  {
+    href: paradigmeArchicratiquePageHref,
+    title: "Paradigme archicratique",
+    description:
+      "Saisir la logique d’ensemble du système archicratique : de l’arcalité et de la cratialité jusqu’aux scènes, aux tensions, aux formes de co-viabilité et aux traditions de comparaison mobilisées.",
+    meta: "Portail de synthèse générale",
+  },
+];
+
+const approfondirPortalItems = [
+  {
+    href: tensionsPageHref,
+    title: "Tensions irréductibles",
+    description:
+      "Parcourir les dix tensions ontologiquement irréductibles et politiquement fondatrices à partir desquelles la co-viabilité doit être pensée.",
+    meta: "10 tensions structurantes",
+  },
+  {
+    href: verbesPageHref,
+    title: "Verbes de la scène",
+    description:
+      "Disposer d’un mini-glossaire opératoire pour décrire l’ouverture, l’entrave, la capture, la fermeture ou la remise en scène des architectures régulatrices.",
+    meta: "19 verbes d’analyse",
+  },
+  {
+    href: paradigmesPageHref,
+    title: "Cartographie théorique",
+    description:
+      "Situer l’archicratie dans son paysage de doctrines fondatrices et de paradigmes régulateurs.",
+    meta: `${doctrinesCount} doctrine${doctrinesCount > 1 ? "s" : ""} · ${paradigmesCount} paradigme${paradigmesCount > 1 ? "s" : ""}`,
+  },
+  {
+    href: indexCompletPageHref,
+    title: "Index complet",
+    description:
+      "Retrouver l’ensemble des entrées du glossaire dans une navigation alphabétique intégrale.",
+    meta: `${entries.length} entrée${entries.length > 1 ? "s" : ""}`,
+  },
+];
 ---
 
 <GlossaryLayout
@@ -53,289 +101,189 @@ const indexCompletPageHref = "/glossaire/index-complet/";
   </Fragment>
 
   <section class="glossary-home">
-        <header class="glossary-hero" id="glossary-hero">
-          <p class="glossary-kicker">Référentiel terminologique</p>
-          <h1>Glossaire archicratique</h1>
-          <p class="glossary-intro">
-            Ce glossaire n’est pas seulement un index de définitions. Il constitue
-            une porte d’entrée dans la pensée archicratique : une cartographie
-            raisonnée des concepts fondamentaux, des scènes, des dynamiques et des
-            méta-régimes à partir desquels une société peut être décrite comme
-            organisation de tensions et recherche de co-viabilité.
-          </p>
-          <h2
-            class="glossary-hero-follow"
-            id="glossary-hero-follow"
-            aria-hidden="true"
-          ></h2>
-        </header>
+    <GlossaryHomeHero />
 
-        <section class="glossary-map-block glossary-section" aria-labelledby="glossary-map-title">
-          <div class="glossary-map-block__head">
-            <h2 id="glossary-map-title" data-follow-section="Cartographie du système archicratique">
-              Cartographie du système archicratique
-            </h2>
-            <p>
-              La lecture la plus simple du système part de deux vecteurs premiers,
-              l’arcalité et la cratialité, dont la rencontre produit des tensions.
-              Ces tensions doivent être mises en scène, traitées par l’archicration,
-              puis stabilisées dans des méta-régimes de co-viabilité.
-            </p>
-          </div>
+    <section
+      class="glossary-map-block glossary-section"
+      aria-labelledby="glossary-map-title"
+    >
+      <div class="glossary-map-block__head">
+        <h2
+          id="glossary-map-title"
+          data-follow-section="Cartographie du système archicratique"
+        >
+          Cartographie du système archicratique
+        </h2>
+        <p>
+          La lecture la plus simple du système part de deux vecteurs premiers,
+          l’arcalité et la cratialité, dont la rencontre produit des tensions.
+          Ces tensions doivent être mises en scène, traitées par l’archicration,
+          puis stabilisées dans des méta-régimes de co-viabilité.
+        </p>
+      </div>
 
-          <div class="glossary-map" aria-label="Carte conceptuelle du glossaire">
-            <div class="glossary-map__stage">
-              <div class="glossary-map__title">Forces en composition</div>
-              <div class="glossary-map__roots">
-                {arcalite ? (
-                  <a class="glossary-map__node" href={hrefOfGlossaryEntry(arcalite)}>ARCALITÉ</a>
-                ) : (
-                  <span class="glossary-map__node">ARCALITÉ</span>
-                )}
-
-                {cratialite ? (
-                  <a class="glossary-map__node" href={hrefOfGlossaryEntry(cratialite)}>CRATIALITÉ</a>
-                ) : (
-                  <span class="glossary-map__node">CRATIALITÉ</span>
-                )}
-              </div>
-            </div>
-
-            <div class="glossary-map__arrow" aria-hidden="true">↓</div>
-
-            <div class="glossary-map__stage">
-              <div class="glossary-map__title">Phénomène transversal</div>
-              {tension ? (
-                <a class="glossary-map__node glossary-map__node--wide" href={hrefOfGlossaryEntry(tension)}>
-                  TENSION
-                </a>
-              ) : (
-                <span class="glossary-map__node glossary-map__node--wide">TENSION</span>
-              )}
-            </div>
-
-            <div class="glossary-map__arrow" aria-hidden="true">↓</div>
-
-            <div class="glossary-map__stage">
-              <div class="glossary-map__title">Comparution</div>
-              {sceneDepreuve ? (
-                <a class="glossary-map__node glossary-map__node--wide" href={hrefOfGlossaryEntry(sceneDepreuve)}>
-                  MISE EN SCÈNE
-                </a>
-              ) : (
-                <span class="glossary-map__node glossary-map__node--wide">MISE EN SCÈNE</span>
-              )}
-            </div>
-
-            <div class="glossary-map__arrow" aria-hidden="true">↓</div>
-
-            <div class="glossary-map__stage">
-              <div class="glossary-map__title">Opérateur régulateur</div>
-              {archicration ? (
-                <a class="glossary-map__node glossary-map__node--wide" href={hrefOfGlossaryEntry(archicration)}>
-                  ARCHICRATION
-                </a>
-              ) : (
-                <span class="glossary-map__node glossary-map__node--wide">ARCHICRATION</span>
-              )}
-            </div>
-
-            <div class="glossary-map__arrow" aria-hidden="true">↓</div>
-
-            <div class="glossary-map__stage">
-              <div class="glossary-map__title">Formes de stabilisation</div>
-              <a class="glossary-map__node glossary-map__node--wide" href={metaRegimesPageHref}>
-                MÉTA-RÉGIMES
+      <div class="glossary-map" aria-label="Carte conceptuelle du glossaire">
+        <div class="glossary-map__stage">
+          <div class="glossary-map__title">Forces en composition</div>
+          <div class="glossary-map__roots">
+            {arcalite ? (
+              <a class="glossary-map__node" href={hrefOfGlossaryEntry(arcalite)}>
+                ARCALITÉ
               </a>
-            </div>
+            ) : (
+              <span class="glossary-map__node">ARCALITÉ</span>
+            )}
+
+            {cratialite ? (
+              <a class="glossary-map__node" href={hrefOfGlossaryEntry(cratialite)}>
+                CRATIALITÉ
+              </a>
+            ) : (
+              <span class="glossary-map__node">CRATIALITÉ</span>
+            )}
           </div>
-        </section>
+        </div>
 
-        {fondamentaux.length > 0 && (
-          <section id="concepts-fondamentaux" class="glossary-section">
-            <div class="glossary-section__head">
-              <div>
-                <h2 data-follow-section="Concepts fondamentaux">Concepts fondamentaux</h2>
-                <p class="glossary-intro">
-                  Ces notions forment la grammaire minimale de l’archicratie.
-                  Elles donnent accès à la structure générale du système.
-                </p>
-              </div>
-            </div>
+        <div class="glossary-map__arrow" aria-hidden="true">↓</div>
 
-            <div class="glossary-cards">
-              {fondamentaux.map((entry) => (
-                <a class="glossary-card" href={hrefOfGlossaryEntry(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
-          </section>
-        )}
-
-        <section id="paradigme-archicratique" class="glossary-section">
-          <div class="glossary-section__head">
-            <div>
-              <h2 data-follow-section="Paradigme archicratique">Paradigme archicratique</h2>
-              <p class="glossary-intro">
-                Cette page de synthèse offre une vue d’ensemble du système
-                archicratique. Elle articule le noyau conceptuel, les scènes de
-                comparution, les dynamiques, les tensions irréductibles, les
-                méta-régimes de co-viabilité et le paysage théorique dans lequel
-                l’archicratie se situe et se distingue.
-              </p>
-            </div>
-
-            <a class="glossary-cta" href={paradigmeArchicratiquePageHref}>
-              Ouvrir la synthèse
+        <div class="glossary-map__stage">
+          <div class="glossary-map__title">Phénomène transversal</div>
+          {tension ? (
+            <a
+              class="glossary-map__node glossary-map__node--wide"
+              href={hrefOfGlossaryEntry(tension)}
+            >
+              TENSION
             </a>
-          </div>
-
-          <div class="glossary-portals">
-            <a class="glossary-portal-card" href={paradigmeArchicratiquePageHref}>
-              <strong>Paradigme archicratique</strong>
-              <span>
-                Saisir la logique d’ensemble du système archicratique : de
-                l’arcalité et de la cratialité jusqu’aux scènes, aux tensions, aux
-                formes de co-viabilité et aux traditions de comparaison
-                mobilisées.
-              </span>
-              <small>Portail de synthèse générale</small>
-            </a>
-          </div>
-        </section>
-
-        {scenes.length > 0 && (
-          <section id="scenes-archicratiques" class="glossary-section">
-            <div class="glossary-section__head">
-              <div>
-                <h2 data-follow-section="Scènes archicratiques">Scènes archicratiques</h2>
-                <p class="glossary-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é.
-                </p>
-              </div>
-            </div>
-
-            <div class="glossary-cards">
-              {scenes.map((entry) => (
-                <a class="glossary-card glossary-card--wide" href={hrefOfGlossaryEntry(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
-          </section>
-        )}
-
-        {dynamiques.length > 0 && (
-          <section id="dynamiques-archicratiques" class="glossary-section">
-            <div class="glossary-section__head">
-              <div>
-                <h2 data-follow-section="Dynamiques archicratiques">Dynamiques archicratiques</h2>
-                <p class="glossary-intro">
-                  Cette famille rassemble les processus de déplacement, les dérives
-                  et les formes de pathologisation de la régulation archicratique.
-                </p>
-              </div>
-            </div>
-
-            <div class="glossary-cards">
-              {dynamiques.map((entry) => (
-                <a class="glossary-card" href={hrefOfGlossaryEntry(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
-          </section>
-        )}
-
-        <section id="meta-regimes-archicratiques" class="glossary-section">
-          <div class="glossary-section__head">
-            <div>
-              <h2 data-follow-section="Méta-régimes archicratiques">Méta-régimes archicratiques</h2>
-              <p class="glossary-intro">
-                Les méta-régimes décrivent les grandes formes historiques et
-                topologiques par lesquelles une société organise durablement ses
-                tensions et sa co-viabilité.
-              </p>
-            </div>
-
-            <a class="glossary-cta" href={metaRegimesPageHref}>
-              Explorer la cartographie complète
-            </a>
-          </div>
-
-          {metaRegimesPreview.length > 0 && (
-            <div class="glossary-cards">
-              {metaRegimesPreview.map((entry) => (
-                <a class="glossary-card" href={hrefOfGlossaryEntry(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
+          ) : (
+            <span class="glossary-map__node glossary-map__node--wide">
+              TENSION
+            </span>
           )}
-        </section>
+        </div>
 
-        <section id="approfondir" class="glossary-section">
-          <div class="glossary-section__head">
-            <div>
-              <h2 data-follow-section="Prolonger la lecture">Prolonger la lecture</h2>
-              <p class="glossary-intro">
-                Quatre parcours complémentaires permettent d’élargir la lecture :
-                l’un vers les tensions irréductibles, l’un vers les verbes de la scène
-                archicratique, l’un vers le paysage théorique dans lequel l’archicratie
-                se situe et se distingue, l’autre vers l’ensemble alphabétique complet
-                des entrées du glossaire.
-              </p>
-            </div>
-          </div>
+        <div class="glossary-map__arrow" aria-hidden="true">↓</div>
 
-          <div class="glossary-portals glossary-portals--secondary">
-            <a class="glossary-portal-card" href={tensionsPageHref}>
-              <strong>Tensions irréductibles</strong>
-              <span>
-                Parcourir les dix tensions ontologiquement irréductibles et
-                politiquement fondatrices à partir desquelles la co-viabilité doit
-                être pensée.
-              </span>
-              <small>10 tensions structurantes</small>
+        <div class="glossary-map__stage">
+          <div class="glossary-map__title">Comparution</div>
+          {sceneDepreuve ? (
+            <a
+              class="glossary-map__node glossary-map__node--wide"
+              href={hrefOfGlossaryEntry(sceneDepreuve)}
+            >
+              MISE EN SCÈNE
             </a>
+          ) : (
+            <span class="glossary-map__node glossary-map__node--wide">
+              MISE EN SCÈNE
+            </span>
+          )}
+        </div>
 
-            <a class="glossary-portal-card" href={verbesPageHref}>
-              <strong>Verbes de la scène</strong>
-              <span>
-                Disposer d’un mini-glossaire opératoire pour décrire l’ouverture,
-                l’entrave, la capture, la fermeture ou la remise en scène des
-                architectures régulatrices.
-              </span>
-              <small>19 verbes d’analyse</small>
-            </a>
+        <div class="glossary-map__arrow" aria-hidden="true">↓</div>
 
-            <a class="glossary-portal-card" href={paradigmesPageHref}>
-              <strong>Cartographie théorique</strong>
-              <span>
-                Situer l’archicratie dans son paysage de doctrines fondatrices et de
-                paradigmes régulateurs.
-              </span>
-              <small>{doctrinesCount} doctrine{doctrinesCount > 1 ? "s" : ""} · {paradigmesCount} paradigme{paradigmesCount > 1 ? "s" : ""}</small>
+        <div class="glossary-map__stage">
+          <div class="glossary-map__title">Opérateur régulateur</div>
+          {archicration ? (
+            <a
+              class="glossary-map__node glossary-map__node--wide"
+              href={hrefOfGlossaryEntry(archicration)}
+            >
+              ARCHICRATION
             </a>
+          ) : (
+            <span class="glossary-map__node glossary-map__node--wide">
+              ARCHICRATION
+            </span>
+          )}
+        </div>
 
-            <a class="glossary-portal-card" href={indexCompletPageHref}>
-              <strong>Index complet</strong>
-              <span>
-                Retrouver l’ensemble des entrées du glossaire dans une navigation
-                alphabétique intégrale.
-              </span>
-              <small>{entries.length} entrée{entries.length > 1 ? "s" : ""}</small>
-            </a>
-          </div>
-        </section>
-      </section>
+        <div class="glossary-map__arrow" aria-hidden="true">↓</div>
+
+        <div class="glossary-map__stage">
+          <div class="glossary-map__title">Formes de stabilisation</div>
+          <a
+            class="glossary-map__node glossary-map__node--wide"
+            href={metaRegimesPageHref}
+          >
+            MÉTA-RÉGIMES
+          </a>
+        </div>
+      </div>
+    </section>
+
+    {fondamentaux.length > 0 && (
+      <GlossaryHomeSection
+        id="concepts-fondamentaux"
+        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>
+    )}
+
+    <GlossaryHomeSection
+      id="paradigme-archicratique"
+      title="Paradigme archicratique"
+      followSection="Paradigme archicratique"
+      intro="Cette page de synthèse offre une vue d’ensemble du système archicratique. Elle articule le noyau conceptuel, les scènes de comparution, les dynamiques, les tensions irréductibles, les méta-régimes de co-viabilité et le paysage théorique dans lequel l’archicratie se situe et se distingue."
+      ctaHref={paradigmeArchicratiquePageHref}
+      ctaLabel="Ouvrir la synthèse"
+    >
+      <GlossaryPortalGrid items={paradigmePortalItems} />
+    </GlossaryHomeSection>
+
+    {scenes.length > 0 && (
+      <GlossaryHomeSection
+        id="scenes-archicratiques"
+        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>
+    )}
+
+    {dynamiques.length > 0 && (
+      <GlossaryHomeSection
+        id="dynamiques-archicratiques"
+        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>
+    )}
+
+    <GlossaryHomeSection
+      id="meta-regimes-archicratiques"
+      title="Méta-régimes archicratiques"
+      followSection="Méta-régimes archicratiques"
+      intro="Les méta-régimes décrivent les grandes formes historiques et topologiques par lesquelles une société organise durablement ses tensions et sa co-viabilité."
+      ctaHref={metaRegimesPageHref}
+      ctaLabel="Explorer la cartographie complète"
+    >
+      {metaRegimesPreview.length > 0 && (
+        <GlossaryCardGrid entries={metaRegimesPreview} />
+      )}
+    </GlossaryHomeSection>
+
+    <GlossaryHomeSection
+      id="approfondir"
+      title="Prolonger la lecture"
+      followSection="Prolonger la lecture"
+      intro="Quatre parcours complémentaires permettent d’élargir la lecture : l’un vers les tensions irréductibles, l’un vers les verbes de la scène archicratique, l’un vers le paysage théorique dans lequel l’archicratie se situe et se distingue, l’autre vers l’ensemble alphabétique complet des entrées du glossaire."
+    >
+      <GlossaryPortalGrid items={approfondirPortalItems} secondary={true} />
+    </GlossaryHomeSection>
+  </section>
 
   <script is:inline>
     (() => {
@@ -502,76 +450,6 @@ const indexCompletPageHref = "/glossaire/index-complet/";
       position: static;
     }
 
-    .glossary-hero{
-      position: sticky;
-      top: var(--glossary-sticky-top);
-      z-index: 12;
-      margin-bottom: 28px;
-      padding: 14px 16px 18px;
-      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.90)),
-        radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
-      transition:
-        background 300ms cubic-bezier(.22,.8,.22,1),
-        border-color 300ms cubic-bezier(.22,.8,.22,1),
-        box-shadow 300ms cubic-bezier(.22,.8,.22,1);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      display: grid;
-      row-gap: 12px;
-    }
-
-    .glossary-kicker{
-      margin: 0;
-      font-size: 12px;
-      letter-spacing: .12em;
-      text-transform: uppercase;
-      opacity: .72;
-    }
-
-    .glossary-hero h1{
-      margin: 0;
-      font-size: clamp(2.2rem, 4vw, 3.15rem);
-      line-height: 1.02;
-      letter-spacing: -.04em;
-      font-weight: 850;
-    }
-
-    .glossary-intro{
-      margin: 0;
-      max-width: 72ch;
-      font-size: 1.05rem;
-      line-height: 1.55;
-      opacity: .94;
-    }
-
-    .glossary-hero-follow{
-      margin: 2px 0 0;
-      min-height: var(--glossary-follow-height);
-      display: flex;
-      align-items: flex-end;
-      opacity: 0;
-      transform: translateY(10px) scale(.985);
-      filter: blur(6px);
-      transition:
-        opacity 220ms cubic-bezier(.22,1,.36,1),
-        transform 320ms cubic-bezier(.22,1,.36,1),
-        filter 320ms cubic-bezier(.22,1,.36,1);
-      pointer-events: none;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      will-change: opacity, transform, filter;
-    }
-
-    .glossary-hero-follow.is-visible{
-      opacity: 1;
-      transform: translateY(0) scale(1);
-      filter: blur(0);
-    }
-
     .glossary-map-block__head h2,
     .glossary-section h2{
       margin: 0;
@@ -581,20 +459,6 @@ const indexCompletPageHref = "/glossaire/index-complet/";
       font-weight: 800;
     }
 
-    .glossary-section{
-      margin-top: 42px;
-      scroll-margin-top: calc(var(--glossary-sticky-top) + 190px);
-    }
-
-    .glossary-section__head{
-      display: flex;
-      justify-content: space-between;
-      align-items: start;
-      gap: 16px;
-      flex-wrap: wrap;
-      margin-bottom: 14px;
-    }
-
     .glossary-map-block{
       padding: 18px 18px 20px;
       border: 1px solid var(--glossary-border);
@@ -677,95 +541,6 @@ const indexCompletPageHref = "/glossaire/index-complet/";
       opacity: .72;
     }
 
-    .glossary-cta{
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 40px;
-      border: 1px solid var(--glossary-border-strong);
-      border-radius: 999px;
-      padding: 7px 14px;
-      color: var(--glossary-accent);
-      text-decoration: none;
-      white-space: nowrap;
-      transition: transform 120ms ease, background 120ms ease;
-    }
-
-    .glossary-cta:hover{
-      background: var(--glossary-bg-soft-strong);
-      text-decoration: none;
-      transform: translateY(-1px);
-    }
-
-    .glossary-cards{
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-      gap: 12px;
-      margin-top: 14px;
-    }
-
-    .glossary-card{
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      padding: 14px 16px;
-      border: 1px solid var(--glossary-border);
-      border-radius: 18px;
-      background: var(--glossary-bg-soft);
-      text-decoration: none;
-      transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
-    }
-
-    .glossary-card:hover{
-      transform: translateY(-1px);
-      background: var(--glossary-bg-soft-strong);
-      border-color: rgba(0,217,255,0.16);
-      text-decoration: none;
-    }
-
-    .glossary-card--wide{
-      grid-column: 1 / -1;
-    }
-
-    .glossary-card strong{
-      color: var(--glossary-accent);
-      font-size: 1.04rem;
-      line-height: 1.28;
-    }
-
-    .glossary-card span{
-      color: inherit;
-      font-size: 1rem;
-      line-height: 1.5;
-      opacity: .94;
-    }
-
-    .glossary-portals{
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-      gap: 14px;
-      margin-top: 14px;
-    }
-
-    .glossary-portal-card{
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      padding: 16px 18px;
-      border: 1px solid var(--glossary-border);
-      border-radius: 18px;
-      background: var(--glossary-bg-soft);
-      text-decoration: none;
-      transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
-    }
-
-    .glossary-portal-card:hover{
-      transform: translateY(-1px);
-      background: var(--glossary-bg-soft-strong);
-      border-color: rgba(0,217,255,0.16);
-      text-decoration: none;
-    }
-
     .glossary-portal-card strong{
       color: var(--glossary-accent);
       font-size: 1.08rem;

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