refactor(glossaire): componentize glossary entry page

Reviewed-on: #295

src/components/GlossaryAside.astro

@@ -1,258 +1,32 @@
 ---
+import {
+  getGlossaryEntryAsideData,
+  getGlossaryPortalLinks,
+  hrefOfGlossaryEntry,
+  slugOfGlossaryEntry,
+} from "../lib/glossary";
+
 const {
   currentEntry,
   allEntries = [],
 } = Astro.props;
 
-const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
-const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
+const currentSlug = slugOfGlossaryEntry(currentEntry);
 
-const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
-const bySlug = new Map(allEntries.map((entry) => [slugOf(entry), entry]));
-const currentSlug = slugOf(currentEntry);
+const {
+  displayFamily,
+  displayDomain,
+  displayLevel,
+  showNoyau,
+  showSameFamily,
+  fondamentaux,
+  sameFamilyTitle,
+  sameFamilyEntries,
+  relationSections,
+  contextualTheory,
+} = getGlossaryEntryAsideData(currentEntry, allEntries);
 
-const fondamentauxWanted = [
-  "archicratie",
-  "tension",
-  "arcalite",
-  "cratialite",
-  "archicration",
-  "co-viabilite",
-];
-
-const fondamentaux = fondamentauxWanted
-  .map((slug) => bySlug.get(slug))
-  .filter(Boolean);
-
-function resolveList(slugs = []) {
-  return slugs
-    .map((slug) => bySlug.get(String(slug || "").trim()))
-    .filter(Boolean);
-}
-
-function uniqueBySlug(entries) {
-  const seen = new Set();
-  const out = [];
-  for (const entry of entries) {
-    const slug = slugOf(entry);
-    if (seen.has(slug)) continue;
-    seen.add(slug);
-    out.push(entry);
-  }
-  return out;
-}
-
-function sortByTerm(entries = []) {
-  return [...entries].sort((a, b) => collator.compare(a.data.term, b.data.term));
-}
-
-function familyOf(entry) {
-  return entry?.data?.family ?? "";
-}
-
-function kindOf(entry) {
-  return entry?.data?.kind ?? "";
-}
-
-const relatedEntries = sortByTerm(
-  uniqueBySlug(resolveList(currentEntry.data.related ?? []))
-);
-
-const opposedEntries = sortByTerm(
-  uniqueBySlug(resolveList(currentEntry.data.opposedTo ?? []))
-);
-
-const seeAlsoEntries = sortByTerm(
-  uniqueBySlug(resolveList(currentEntry.data.seeAlso ?? []))
-);
-
-const familyLabels = {
-  "concept-fondamental": "Concept fondamental",
-  scene: "Scène",
-  dynamique: "Dynamique",
-  pathologie: "Pathologie",
-  topologie: "Topologie",
-  "meta-regime": "Méta-régime",
-  paradigme: "Paradigme",
-  doctrine: "Doctrine",
-  verbe: "Verbe",
-  "dispositif-ia": "Dispositif IA",
-  "tension-irreductible": "Tension irréductible",
-  figure: "Figure",
-  qualification: "Qualification",
-  epistemologie: "Épistémologie",
-};
-
-const kindLabels = {
-  concept: "Concept",
-  diagnostic: "Diagnostic",
-  topologie: "Topologie",
-  verbe: "Verbe",
-  paradigme: "Paradigme",
-  doctrine: "Doctrine",
-  dispositif: "Dispositif",
-  figure: "Figure",
-  qualification: "Qualification",
-  epistemologie: "Épistémologie",
-};
-
-const domainLabels = {
-  transversal: "Transversal",
-  theorie: "Théorie",
-  "cas-ia": "Cas IA",
-};
-
-const levelLabels = {
-  fondamental: "Fondamental",
-  intermediaire: "Intermédiaire",
-  avance: "Avancé",
-};
-
-const currentFamily = familyOf(currentEntry);
-const displayFamily =
-  familyLabels[currentFamily] ??
-  kindLabels[currentEntry.data.kind] ??
-  "Fiche";
-
-const displayDomain =
-  domainLabels[currentEntry.data.domain] ??
-  currentEntry.data.domain;
-
-const displayLevel =
-  levelLabels[currentEntry.data.level] ??
-  currentEntry.data.level;
-
-function entriesOfSameFamily(entry) {
-  const family = familyOf(entry);
-
-  if (!family) return [];
-
-  if (family === "concept-fondamental") {
-    return fondamentaux;
-  }
-
-  return sortByTerm(
-    allEntries.filter((item) => familyOf(item) === family)
-  );
-}
-
-const sameFamilyEntries = entriesOfSameFamily(currentEntry);
-
-const familySectionTitles = {
-  "concept-fondamental": "Noyau archicratique",
-  scene: "Scènes archicratiques",
-  dynamique: "Dynamiques archicratiques",
-  pathologie: "Pathologies archicratiques",
-  topologie: "Topologies voisines",
-  "meta-regime": "Méta-régimes archicratiques",
-  paradigme: "Paradigmes voisins",
-  doctrine: "Doctrines fondatrices",
-  verbe: "Verbes de la scène",
-  "dispositif-ia": "Dispositifs IA",
-  "tension-irreductible": "Tensions irréductibles",
-  figure: "Figures archicratiques",
-  qualification: "Qualifications archicratiques",
-  epistemologie: "Outillage épistémologique",
-};
-
-const sameFamilyTitle =
-  familySectionTitles[currentFamily] ?? "Même famille";
-
-function isTheoryEntry(entry) {
-  const family = familyOf(entry);
-  const kind = kindOf(entry);
-
-  return (
-    family === "paradigme" ||
-    family === "doctrine" ||
-    kind === "paradigme" ||
-    kind === "doctrine"
-  );
-}
-
-function contextualTheoryFor(entry) {
-  const fromRelations = uniqueBySlug([
-    ...resolveList(entry.data.related ?? []),
-    ...resolveList(entry.data.seeAlso ?? []),
-    ...resolveList(entry.data.opposedTo ?? []),
-  ])
-    .filter((item) => slugOf(item) !== currentSlug)
-    .filter((item) => isTheoryEntry(item));
-
-  if (fromRelations.length > 0) {
-    return sortByTerm(fromRelations).slice(0, 6);
-  }
-
-  if (familyOf(entry) === "paradigme") {
-    const preferred = [
-      "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",
-    ];
-
-    return uniqueBySlug(
-      preferred
-        .filter((slug) => slug !== currentSlug)
-        .map((slug) => bySlug.get(slug))
-        .filter(Boolean)
-    ).slice(0, 8);
-  }
-
-  if (familyOf(entry) === "doctrine") {
-    const preferred = [
-      "contractualisme-hobbesien",
-      "droit-naturel-et-propriete",
-      "volonte-generale",
-      "decisionnisme-souverain",
-    ];
-
-    return uniqueBySlug(
-      preferred
-        .filter((slug) => slug !== currentSlug)
-        .map((slug) => bySlug.get(slug))
-        .filter(Boolean)
-    ).slice(0, 6);
-  }
-
-  return [];
-}
-
-const contextualTheory = contextualTheoryFor(currentEntry);
-
-const showNoyau = currentFamily !== "concept-fondamental" && fondamentaux.length > 0;
-
-const showSameFamily =
-  sameFamilyEntries.length > 0 && currentFamily !== "concept-fondamental";
-
-const relationSections = [
-  {
-    title: "Concepts liés",
-    items: relatedEntries,
-  },
-  {
-    title: "En tension avec",
-    items: opposedEntries,
-  },
-  {
-    title: "Voir aussi",
-    items: seeAlsoEntries,
-  },
-].filter((section) => section.items.length > 0);
+const portalLinks = getGlossaryPortalLinks();
 ---
 
 <nav class="glossary-aside" aria-label="Navigation du glossaire">
@@ -264,20 +38,23 @@ const relationSections = [
       <span class="glossary-aside__pill glossary-aside__pill--family">
         {displayFamily}
       </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>
 
@@ -286,11 +63,11 @@ const relationSections = [
       <h2 class="glossary-aside__heading">Noyau archicratique</h2>
       <ul class="glossary-aside__list">
         {fondamentaux.map((entry) => {
-          const active = slugOf(entry) === currentSlug;
+          const active = slugOfGlossaryEntry(entry) === currentSlug;
           return (
             <li>
               <a
-                href={hrefOf(entry)}
+                href={hrefOfGlossaryEntry(entry)}
                 aria-current={active ? "page" : undefined}
                 class={active ? "is-active" : undefined}
               >
@@ -308,11 +85,11 @@ const relationSections = [
       <h2 class="glossary-aside__heading">{sameFamilyTitle}</h2>
       <ul class="glossary-aside__list">
         {sameFamilyEntries.map((entry) => {
-          const active = slugOf(entry) === currentSlug;
+          const active = slugOfGlossaryEntry(entry) === currentSlug;
           return (
             <li>
               <a
-                href={hrefOf(entry)}
+                href={hrefOfGlossaryEntry(entry)}
                 aria-current={active ? "page" : undefined}
                 class={active ? "is-active" : undefined}
               >
@@ -334,7 +111,7 @@ const relationSections = [
           <h3 class="glossary-aside__subheading">{section.title}</h3>
           <ul class="glossary-aside__list">
             {section.items.map((entry) => (
-              <li><a href={hrefOf(entry)}>{entry.data.term}</a></li>
+              <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
             ))}
           </ul>
         </>
@@ -347,7 +124,7 @@ const relationSections = [
       <h2 class="glossary-aside__heading">Paysage théorique</h2>
       <ul class="glossary-aside__list">
         {contextualTheory.map((entry) => (
-          <li><a href={hrefOf(entry)}>{entry.data.term}</a></li>
+          <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</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,203 @@
+---
+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: 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;
+  }
+
+  @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,172 @@
+<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-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: 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,88 +1,24 @@
 ---
+import {
+  getFondamentaux,
+  getGlossaryHomeStats,
+  getGlossaryPortalLinks,
+  hrefOfGlossaryEntry,
+} from "../lib/glossary";
+
 const {
   allEntries = [],
 } = Astro.props;
 
-const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
-const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
+const fondamentaux = getFondamentaux(allEntries);
+const portalLinks = getGlossaryPortalLinks();
 
-const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
-const bySlug = new Map(allEntries.map((entry) => [slugOf(entry), entry]));
-
-function sortByTerm(list = []) {
-  return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
-}
-
-function familyOf(entry) {
-  const explicit = entry?.data?.family;
-  if (explicit) return explicit;
-
-  const slug = slugOf(entry);
-  const kind = entry?.data?.kind;
-
-  if (kind === "paradigme") return "paradigme";
-  if (kind === "doctrine") return "doctrine";
-  if (kind === "verbe") return "verbe";
-
-  if (slug === "scene-depreuve") return "scene";
-  if (slug === "autarchicratie") return "pathologie";
-  if (slug === "obliteration-archicratique") return "dynamique";
-
-  if (
-    [
-      "archicratie",
-      "arcalite",
-      "cratialite",
-      "archicration",
-      "co-viabilite",
-      "tension",
-    ].includes(slug)
-  ) {
-    return "concept-fondamental";
-  }
-
-  if (slug === "archicrations-differentielles-et-formes-hybrides") {
-    return "topologie";
-  }
-
-  if (kind === "topologie" && slug.startsWith("archicrations-")) {
-    return "meta-regime";
-  }
-
-  return "";
-}
-
-const fondamentauxWanted = [
-  "archicratie",
-  "arcalite",
-  "cratialite",
-  "archicration",
-  "co-viabilite",
-  "tension",
-];
-
-const fondamentaux = sortByTerm(
-  fondamentauxWanted
-    .map((slug) => bySlug.get(slug))
-    .filter(Boolean)
-);
-
-const totalEntries = allEntries.length;
-const paradigmesCount = allEntries.filter((entry) => entry.data.kind === "paradigme").length;
-const doctrinesCount = allEntries.filter((entry) => entry.data.kind === "doctrine").length;
-const metaRegimesCount = allEntries.filter((entry) => familyOf(entry) === "meta-regime").length;
-
-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">
@@ -115,7 +51,7 @@ const portalLinks = [
       <h2 class="glossary-home-aside__heading">Noyau archicratique</h2>
       <ul class="glossary-home-aside__list">
         {fondamentaux.map((entry) => (
-          <li><a href={hrefOf(entry)}>{entry.data.term}</a></li>
+          <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
         ))}
       </ul>
     </section>

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

@@ -0,0 +1,89 @@
+---
+import type { GlossaryRelationBlock } from "../lib/glossary";
+import { hrefOfGlossaryEntry } from "../lib/glossary";
+
+interface Props {
+  relationBlocks: GlossaryRelationBlock[];
+}
+
+const { relationBlocks = [] } = Astro.props;
+---
+
+{relationBlocks.length > 0 && (
+  <section class="glossary-relations" aria-label="Relations conceptuelles">
+    <h2>Relations conceptuelles</h2>
+
+    <div class="glossary-relations-grid">
+      {relationBlocks.map((block) => (
+        <section class={`glossary-relations-card ${block.className}`}>
+          <h3>{block.title}</h3>
+          <ul>
+            {block.items.map((item) => (
+              <li>
+                <a href={hrefOfGlossaryEntry(item)}>{item.data.term}</a>
+                <span> — {item.data.definitionShort}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ))}
+    </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/lib/glossary.ts

@@ -0,0 +1,561 @@
+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,
+});
+
+export const FAMILY_LABELS: Record<string, string> = {
+  "concept-fondamental": "Concept fondamental",
+  scene: "Scène",
+  dynamique: "Dynamique",
+  pathologie: "Pathologie",
+  topologie: "Topologie",
+  "meta-regime": "Méta-régime",
+  paradigme: "Paradigme",
+  doctrine: "Doctrine",
+  verbe: "Verbe",
+  "dispositif-ia": "Dispositif IA",
+  "tension-irreductible": "Tension irréductible",
+  figure: "Figure",
+  qualification: "Qualification",
+  epistemologie: "Épistémologie",
+};
+
+export const KIND_LABELS: Record<string, string> = {
+  concept: "Concept",
+  diagnostic: "Diagnostic",
+  topologie: "Topologie",
+  verbe: "Verbe",
+  paradigme: "Paradigme",
+  doctrine: "Doctrine",
+  dispositif: "Dispositif",
+  figure: "Figure",
+  qualification: "Qualification",
+  epistemologie: "Épistémologie",
+};
+
+export const DOMAIN_LABELS: Record<string, string> = {
+  transversal: "Transversal",
+  theorie: "Théorie",
+  "cas-ia": "Cas IA",
+};
+
+export const LEVEL_LABELS: Record<string, string> = {
+  fondamental: "Fondamental",
+  intermediaire: "Intermédiaire",
+  avance: "Avancé",
+};
+
+export const FONDAMENTAUX_WANTED = [
+  "archicratie",
+  "arcalite",
+  "cratialite",
+  "archicration",
+  "co-viabilite",
+  "tension",
+] as const;
+
+export const FAMILY_SECTION_TITLES: Record<string, string> = {
+  "concept-fondamental": "Noyau archicratique",
+  scene: "Scènes archicratiques",
+  dynamique: "Dynamiques archicratiques",
+  pathologie: "Pathologies archicratiques",
+  topologie: "Topologies voisines",
+  "meta-regime": "Méta-régimes archicratiques",
+  paradigme: "Paradigmes voisins",
+  doctrine: "Doctrines fondatrices",
+  verbe: "Verbes de la scène",
+  "dispositif-ia": "Dispositifs IA",
+  "tension-irreductible": "Tensions irréductibles",
+  figure: "Figures archicratiques",
+  qualification: "Qualifications archicratiques",
+  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()
+    .replace(/^\/+|\/+$/g, "")
+    .replace(/\.(md|mdx)$/i, "")
+    .toLowerCase();
+}
+
+export function slugOfGlossaryEntry(
+  entry: Pick<GlossaryEntry, "id"> | null | undefined,
+): string {
+  return normalizeGlossarySlug(entry?.id ?? "");
+}
+
+export function hrefOfGlossaryEntry(
+  entry: Pick<GlossaryEntry, "id"> | null | undefined,
+): string {
+  const slug = slugOfGlossaryEntry(entry);
+  return slug ? `/glossaire/${slug}/` : "/glossaire/";
+}
+
+export function buildGlossaryBySlug(
+  entries: GlossaryEntry[] = [],
+): Map<string, GlossaryEntry> {
+  return new Map(entries.map((entry) => [slugOfGlossaryEntry(entry), entry]));
+}
+
+export function sortGlossaryEntries(
+  entries: GlossaryEntry[] = [],
+): GlossaryEntry[] {
+  return [...entries].sort((a, b) =>
+    GLOSSARY_COLLATOR.compare(a.data.term, b.data.term),
+  );
+}
+
+export function uniqueGlossaryEntries(
+  entries: GlossaryEntry[] = [],
+): GlossaryEntry[] {
+  const seen = new Set<string>();
+  const out: GlossaryEntry[] = [];
+
+  for (const entry of entries) {
+    const slug = slugOfGlossaryEntry(entry);
+    if (!slug || seen.has(slug)) continue;
+    seen.add(slug);
+    out.push(entry);
+  }
+
+  return out;
+}
+
+export function resolveGlossaryEntriesInSourceOrder(
+  slugs: string[] = [],
+  allEntries: GlossaryEntry[] = [],
+): GlossaryEntry[] {
+  const bySlug = buildGlossaryBySlug(allEntries);
+  const seen = new Set<string>();
+  const resolved: GlossaryEntry[] = [];
+
+  for (const rawSlug of slugs) {
+    const slug = normalizeGlossarySlug(rawSlug);
+    if (!slug || seen.has(slug)) continue;
+
+    const entry = bySlug.get(slug);
+    if (!entry) continue;
+
+    seen.add(slug);
+    resolved.push(entry);
+  }
+
+  return resolved;
+}
+
+export function resolveGlossaryEntries(
+  slugs: string[] = [],
+  allEntries: GlossaryEntry[] = [],
+): GlossaryEntry[] {
+  return sortGlossaryEntries(
+    resolveGlossaryEntriesInSourceOrder(slugs, allEntries),
+  );
+}
+
+export function rawFamilyOf(
+  entry: GlossaryEntry | null | undefined,
+): string {
+  return String(entry?.data?.family ?? "");
+}
+
+export function kindOf(
+  entry: GlossaryEntry | null | undefined,
+): string {
+  return String(entry?.data?.kind ?? "");
+}
+
+export function familyOf(
+  entry: GlossaryEntry | null | undefined,
+): string {
+  const explicit = rawFamilyOf(entry);
+  if (explicit) return explicit;
+
+  const slug = slugOfGlossaryEntry(entry);
+  const kind = kindOf(entry);
+
+  if (kind === "paradigme") return "paradigme";
+  if (kind === "doctrine") return "doctrine";
+  if (kind === "verbe") return "verbe";
+
+  if (slug === "scene-depreuve") return "scene";
+  if (slug === "autarchicratie") return "pathologie";
+  if (slug === "obliteration-archicratique") return "dynamique";
+
+  if (
+    FONDAMENTAUX_WANTED.includes(
+      slug as (typeof FONDAMENTAUX_WANTED)[number],
+    )
+  ) {
+    return "concept-fondamental";
+  }
+
+  if (slug === "archicrations-differentielles-et-formes-hybrides") {
+    return "topologie";
+  }
+
+  if (kind === "topologie" && slug.startsWith("archicrations-")) {
+    return "meta-regime";
+  }
+
+  return "";
+}
+
+export function getDisplayFamily(
+  entry: GlossaryEntry | null | undefined,
+): string {
+  const familyKey = rawFamilyOf(entry) || familyOf(entry);
+  return FAMILY_LABELS[familyKey] ?? KIND_LABELS[kindOf(entry)] ?? "Fiche";
+}
+
+export function getDisplayDomain(
+  entry: GlossaryEntry | null | undefined,
+): string {
+  const key = String(entry?.data?.domain ?? "");
+  return key ? (DOMAIN_LABELS[key] ?? key) : "";
+}
+
+export function getDisplayLevel(
+  entry: GlossaryEntry | null | undefined,
+): string {
+  const key = String(entry?.data?.level ?? "");
+  return key ? (LEVEL_LABELS[key] ?? key) : "";
+}
+
+export function getFondamentaux(
+  entries: GlossaryEntry[] = [],
+): GlossaryEntry[] {
+  const bySlug = buildGlossaryBySlug(entries);
+
+  return sortGlossaryEntries(
+    FONDAMENTAUX_WANTED
+      .map((slug) => bySlug.get(slug))
+      .filter(Boolean) as GlossaryEntry[],
+  );
+}
+
+export function getGlossaryEntriesByFamily(
+  entries: GlossaryEntry[] = [],
+  familyKey: string,
+): GlossaryEntry[] {
+  return sortGlossaryEntries(
+    entries.filter((entry) => familyOf(entry) === familyKey),
+  );
+}
+
+export function countGlossaryEntriesByKind(
+  entries: GlossaryEntry[] = [],
+  kindKey: string,
+): number {
+  return entries.filter((entry) => kindOf(entry) === kindKey).length;
+}
+
+export function countGlossaryEntriesByFamily(
+  entries: GlossaryEntry[] = [],
+  familyKey: string,
+): number {
+  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[] = [],
+): GlossaryEntry[] {
+  const familyKey = familyOf(entry);
+  if (!familyKey) return [];
+
+  if (familyKey === "concept-fondamental") {
+    return getFondamentaux(allEntries);
+  }
+
+  return getGlossaryEntriesByFamily(allEntries, familyKey);
+}
+
+export function getSameFamilyTitle(
+  entry: GlossaryEntry,
+): string {
+  return FAMILY_SECTION_TITLES[familyOf(entry)] ?? "Même famille";
+}
+
+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);
+}
+
+export function getRelationSections(
+  entry: GlossaryEntry,
+  allEntries: GlossaryEntry[] = [],
+): GlossaryRelationSection[] {
+  return getRelationBlocks(entry, allEntries).map(({ title, items }) => ({
+    title,
+    items,
+  }));
+}
+
+function isTheoryEntry(entry: GlossaryEntry): boolean {
+  const familyKey = familyOf(entry);
+  const kindKey = kindOf(entry);
+
+  return (
+    familyKey === "paradigme" ||
+    familyKey === "doctrine" ||
+    kindKey === "paradigme" ||
+    kindKey === "doctrine"
+  );
+}
+
+export function getContextualTheory(
+  entry: GlossaryEntry,
+  allEntries: GlossaryEntry[] = [],
+): GlossaryEntry[] {
+  const currentSlug = slugOfGlossaryEntry(entry);
+  const bySlug = buildGlossaryBySlug(allEntries);
+
+  const fromRelations = uniqueGlossaryEntries([
+    ...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 fromRelations.slice(0, 6);
+  }
+
+  if (familyOf(entry) === "paradigme") {
+    return uniqueGlossaryEntries(
+      PREFERRED_PARADIGME_SLUGS
+        .filter((slug) => slug !== currentSlug)
+        .map((slug) => bySlug.get(slug))
+        .filter(Boolean) as GlossaryEntry[],
+    ).slice(0, 8);
+  }
+
+  if (familyOf(entry) === "doctrine") {
+    return uniqueGlossaryEntries(
+      PREFERRED_DOCTRINE_SLUGS
+        .filter((slug) => slug !== currentSlug)
+        .map((slug) => bySlug.get(slug))
+        .filter(Boolean) as GlossaryEntry[],
+    ).slice(0, 6);
+  }
+
+  return [];
+}
+
+export function getGlossaryEntryAsideData(
+  currentEntry: GlossaryEntry,
+  allEntries: GlossaryEntry[] = [],
+): GlossaryEntryAsideData {
+  const currentFamily = familyOf(currentEntry);
+  const fondamentaux = getFondamentaux(allEntries);
+  const sameFamilyEntries = getEntriesOfSameFamily(currentEntry, allEntries);
+  const sameFamilyTitle = getSameFamilyTitle(currentEntry);
+  const relationSections = getRelationSections(currentEntry, allEntries);
+  const contextualTheory = getContextualTheory(currentEntry, allEntries);
+
+  const 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

@@ -1,7 +1,19 @@
 ---
 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,
+  getDisplayFamily,
+  getDisplayLevel,
+  getRelationBlocks,
+  normalizeGlossarySlug,
+} from "../../lib/glossary";
 
 export async function getStaticPaths() {
   const entries = await getCollection("glossaire");
@@ -9,20 +21,12 @@ export async function getStaticPaths() {
   const seen = new Set();
 
   for (const entry of entries) {
-    const canonicalSlug = String(entry.id || "")
-      .trim()
-      .replace(/^\/+|\/+$/g, "")
-      .replace(/\.(md|mdx)$/i, "")
-      .toLowerCase();
+    const canonicalSlug = normalizeGlossarySlug(entry.id);
 
     if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(canonicalSlug)) continue;
 
     const addPath = (rawSlug) => {
-      const requestedSlug = String(rawSlug || "")
-        .trim()
-        .replace(/^\/+|\/+$/g, "")
-        .replace(/\.(md|mdx)$/i, "")
-        .toLowerCase();
+      const requestedSlug = normalizeGlossarySlug(rawSlug);
 
       if (!requestedSlug) return;
       if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(requestedSlug)) return;
@@ -56,112 +60,11 @@ const { Content } = await render(entry);
 const isAliasRoute = requestedSlug !== canonicalSlug;
 const canonicalHref = `/glossaire/${canonicalSlug}/`;
 
-const slugOf = (item) =>
-  String(item.id || "")
-    .trim()
-    .replace(/^\/+|\/+$/g, "")
-    .replace(/\.(md|mdx)$/i, "");
+const relationBlocks = getRelationBlocks(entry, allEntries);
 
-const hrefOf = (item) => `/glossaire/${slugOf(item)}/`;
-
-const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
-const bySlug = new Map(
-  allEntries.map((item) => [slugOf(item).toLowerCase(), item])
-);
-
-function resolveEntries(slugs = []) {
-  const seen = new Set();
-
-  return slugs
-    .map((slug) => bySlug.get(String(slug || "").trim().toLowerCase()))
-    .filter(Boolean)
-    .filter((item) => {
-      const slug = slugOf(item);
-      if (seen.has(slug)) return false;
-      seen.add(slug);
-      return true;
-    })
-    .sort((a, b) => collator.compare(a.data.term, b.data.term));
-}
-
-const relatedEntries = resolveEntries(entry.data.related ?? []);
-const opposedEntries = resolveEntries(entry.data.opposedTo ?? []);
-const seeAlsoEntries = resolveEntries(entry.data.seeAlso ?? []);
-
-const relationBlocks = [
-  {
-    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);
-
-const familyLabels = {
-  "concept-fondamental": "Concept fondamental",
-  scene: "Scène",
-  dynamique: "Dynamique",
-  pathologie: "Pathologie",
-  topologie: "Topologie",
-  "meta-regime": "Méta-régime",
-  paradigme: "Paradigme",
-  doctrine: "Doctrine",
-  verbe: "Verbe",
-  "dispositif-ia": "Dispositif IA",
-  "tension-irreductible": "Tension irréductible",
-};
-
-const kindLabels = {
-  concept: "Concept",
-  diagnostic: "Diagnostic",
-  topologie: "Topologie",
-  verbe: "Verbe",
-  paradigme: "Paradigme",
-  doctrine: "Doctrine",
-  dispositif: "Dispositif",
-  figure: "Figure",
-  qualification: "Qualification",
-  epistemologie: "Épistémologie",
-};
-
-const domainLabels = {
-  transversal: "Transversal",
-  theorie: "Théorie",
-  "cas-ia": "Cas IA",
-};
-
-const levelLabels = {
-  fondamental: "Fondamental",
-  intermediaire: "Intermédiaire",
-  avance: "Avancé",
-};
-
-const familyKey = entry.data.family ?? "";
-const displayFamily =
-  familyLabels[familyKey] ??
-  kindLabels[entry.data.kind] ??
-  "Fiche";
-
-const displayDomain = entry.data.domain
-  ? (domainLabels[entry.data.domain] ?? entry.data.domain)
-  : "";
-
-const displayLevel = entry.data.level
-  ? (levelLabels[entry.data.level] ?? entry.data.level)
-  : "";
-
-const hasScholarlyMeta =
-  (entry.data.mobilizedAuthors?.length ?? 0) > 0 ||
-  (entry.data.comparisonTraditions?.length ?? 0) > 0;
+const displayFamily = getDisplayFamily(entry);
+const displayDomain = getDisplayDomain(entry);
+const displayLevel = getDisplayLevel(entry);
 ---
 
 <GlossaryLayout
@@ -174,454 +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>
 
-  {relationBlocks.length > 0 && (
-    <section class="glossary-relations" aria-label="Relations conceptuelles">
-      <h2>Relations conceptuelles</h2>
+  <GlossaryRelationCards relationBlocks={relationBlocks} />
 
-      <div class="glossary-relations-grid">
-        {relationBlocks.map((block) => (
-          <section class={`glossary-relations-card ${block.className}`}>
-            <h3>{block.title}</h3>
-            <ul>
-              {block.items.map((item) => (
-                <li>
-                  <a href={hrefOf(item)}>{item.data.term}</a>
-                  <span> — {item.data.definitionShort}</span>
-                </li>
-              ))}
-            </ul>
-          </section>
-        ))}
-      </div>
-    </section>
-  )}
+  <GlossaryEntryStickySync />
 </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>

src/pages/glossaire/index.astro

@@ -1,75 +1,35 @@
 ---
 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,
+  countGlossaryEntriesByKind,
+  familyOf,
+  getGlossaryEntriesByFamily,
+  hrefOfGlossaryEntry,
+  sortGlossaryEntries,
+} 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 = buildGlossaryBySlug(entries);
 
-const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
-const bySlug = new Map(entries.map((entry) => [slugOf(entry), entry]));
-
-function sortByTerm(list = []) {
-  return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
-}
-
-function familyOf(entry) {
-  const explicit = entry?.data?.family;
-  if (explicit) return explicit;
-
-  const slug = slugOf(entry);
-  const kind = entry?.data?.kind;
-
-  if (kind === "paradigme") return "paradigme";
-  if (kind === "doctrine") return "doctrine";
-  if (kind === "verbe") return "verbe";
-
-  if (slug === "scene-depreuve") return "scene";
-  if (slug === "autarchicratie") return "pathologie";
-  if (slug === "obliteration-archicratique") return "dynamique";
-
-  if ([
-    "archicratie",
-    "arcalite",
-    "cratialite",
-    "archicration",
-    "co-viabilite",
-    "tension",
-  ].includes(slug)) {
-    return "concept-fondamental";
-  }
-
-  if (slug === "archicrations-differentielles-et-formes-hybrides") {
-    return "topologie";
-  }
-
-  if (kind === "topologie" && slug.startsWith("archicrations-")) {
-    return "meta-regime";
-  }
-
-  return "";
-}
-
-const fondamentaux = sortByTerm(
-  entries.filter((entry) => familyOf(entry) === "concept-fondamental")
+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");
 
-const scenes = sortByTerm(
-  entries.filter((entry) => familyOf(entry) === "scene")
-);
-
-const dynamiques = sortByTerm(
-  entries.filter((entry) => ["dynamique", "pathologie"].includes(familyOf(entry)))
-);
-
-const metaRegimes = sortByTerm(
-  entries.filter((entry) => familyOf(entry) === "meta-regime")
-);
-
-const paradigmesCount = entries.filter((entry) => entry.data.kind === "paradigme").length;
-const doctrinesCount = entries.filter((entry) => entry.data.kind === "doctrine").length;
+const paradigmesCount = countGlossaryEntriesByKind(entries, "paradigme");
+const doctrinesCount = countGlossaryEntriesByKind(entries, "doctrine");
 
 const metaRegimesPreview = metaRegimes.slice(0, 6);
 
@@ -85,6 +45,47 @@ 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
@@ -97,26 +98,17 @@ 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">
+    <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">
+        <h2
+          id="glossary-map-title"
+          data-follow-section="Cartographie du système archicratique"
+        >
           Cartographie du système archicratique
         </h2>
         <p>
@@ -132,13 +124,17 @@ const indexCompletPageHref = "/glossaire/index-complet/";
           <div class="glossary-map__title">Forces en composition</div>
           <div class="glossary-map__roots">
             {arcalite ? (
-                  <a class="glossary-map__node" href={hrefOf(arcalite)}>ARCALITÉ</a>
+              <a class="glossary-map__node" href={hrefOfGlossaryEntry(arcalite)}>
+                ARCALITÉ
+              </a>
             ) : (
               <span class="glossary-map__node">ARCALITÉ</span>
             )}
 
             {cratialite ? (
-                  <a class="glossary-map__node" href={hrefOf(cratialite)}>CRATIALITÉ</a>
+              <a class="glossary-map__node" href={hrefOfGlossaryEntry(cratialite)}>
+                CRATIALITÉ
+              </a>
             ) : (
               <span class="glossary-map__node">CRATIALITÉ</span>
             )}
@@ -150,11 +146,16 @@ const indexCompletPageHref = "/glossaire/index-complet/";
         <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={hrefOf(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>
+            <span class="glossary-map__node glossary-map__node--wide">
+              TENSION
+            </span>
           )}
         </div>
 
@@ -163,11 +164,16 @@ const indexCompletPageHref = "/glossaire/index-complet/";
         <div class="glossary-map__stage">
           <div class="glossary-map__title">Comparution</div>
           {sceneDepreuve ? (
-                <a class="glossary-map__node glossary-map__node--wide" href={hrefOf(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>
+            <span class="glossary-map__node glossary-map__node--wide">
+              MISE EN SCÈNE
+            </span>
           )}
         </div>
 
@@ -176,11 +182,16 @@ const indexCompletPageHref = "/glossaire/index-complet/";
         <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={hrefOf(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>
+            <span class="glossary-map__node glossary-map__node--wide">
+              ARCHICRATION
+            </span>
           )}
         </div>
 
@@ -188,7 +199,10 @@ const indexCompletPageHref = "/glossaire/index-complet/";
 
         <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}>
+          <a
+            class="glossary-map__node glossary-map__node--wide"
+            href={metaRegimesPageHref}
+          >
             MÉTA-RÉGIMES
           </a>
         </div>
@@ -196,190 +210,70 @@ const indexCompletPageHref = "/glossaire/index-complet/";
     </section>
 
     {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-cards">
-              {fondamentaux.map((entry) => (
-                <a class="glossary-card" href={hrefOf(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
-          </section>
+      <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."
+      >
+        <GlossaryCardGrid entries={fondamentaux} />
+      </GlossaryHomeSection>
     )}
 
-        <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
-            </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>
+    <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 && (
-          <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={hrefOf(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
-          </section>
+      <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é."
+      >
+        <GlossaryCardGrid entries={scenes} wide={true} />
+      </GlossaryHomeSection>
     )}
 
     {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={hrefOf(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
-          </section>
+      <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."
+      >
+        <GlossaryCardGrid entries={dynamiques} />
+      </GlossaryHomeSection>
     )}
 
-        <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>
-
+    <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 && (
-            <div class="glossary-cards">
-              {metaRegimesPreview.map((entry) => (
-                <a class="glossary-card" href={hrefOf(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
+        <GlossaryCardGrid entries={metaRegimesPreview} />
       )}
-        </section>
+    </GlossaryHomeSection>
 
-        <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-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>
-            </a>
-
-            <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>
-
-            <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>
-            </a>
-
-            <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>
+    <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>
 
   <script is:inline>
     (() => {
@@ -546,76 +440,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;
@@ -625,20 +449,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);
@@ -721,95 +531,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;