refactor(glossaire): centralize aside and home data

Reviewed-on: #293

src/components/GlossaryAside.astro

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

src/components/GlossaryHomeAside.astro

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

src/lib/glossary.ts

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

@@ -3,37 +3,29 @@ import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
 import GlossaryHomeAside from "../../components/GlossaryHomeAside.astro";
 import { getCollection } from "astro:content";
 import {
-  buildGlossaryBySlug,
-  countGlossaryEntriesByKind,
-  familyOf,
-  getGlossaryEntriesByFamily,
+  getGlossaryHomeData,
+  getGlossaryHomeStats,
   hrefOfGlossaryEntry,
-  sortGlossaryEntries,
 } from "../../lib/glossary";
 
 const entries = await getCollection("glossaire");
 
-const bySlug = buildGlossaryBySlug(entries);
+const {
+  fondamentaux,
+  scenes,
+  dynamiques,
+  metaRegimesPreview,
+  arcalite,
+  cratialite,
+  tension,
+  sceneDepreuve,
+  archicration,
+} = getGlossaryHomeData(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");
-
-const paradigmesCount = countGlossaryEntriesByKind(entries, "paradigme");
-const doctrinesCount = countGlossaryEntriesByKind(entries, "doctrine");
-
-const metaRegimesPreview = metaRegimes.slice(0, 6);
-
-const arcalite = bySlug.get("arcalite");
-const cratialite = bySlug.get("cratialite");
-const tension = bySlug.get("tension");
-const sceneDepreuve = bySlug.get("scene-depreuve");
-const archicration = bySlug.get("archicration");
+const {
+  paradigmesCount,
+  doctrinesCount,
+} = getGlossaryHomeStats(entries);
 
 const paradigmeArchicratiquePageHref = "/glossaire/paradigme-archicratique/";
 const metaRegimesPageHref = "/glossaire/archicrations/";
@@ -53,289 +45,334 @@ 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>
+    <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>
 
-        <section class="glossary-map-block glossary-section" aria-labelledby="glossary-map-title">
-          <div class="glossary-map-block__head">
-            <h2 id="glossary-map-title" data-follow-section="Cartographie du système archicratique">
-              Cartographie du système archicratique
+    <section
+      class="glossary-map-block glossary-section"
+      aria-labelledby="glossary-map-title"
+    >
+      <div class="glossary-map-block__head">
+        <h2
+          id="glossary-map-title"
+          data-follow-section="Cartographie du système archicratique"
+        >
+          Cartographie du système archicratique
+        </h2>
+        <p>
+          La lecture la plus simple du système part de deux vecteurs premiers,
+          l’arcalité et la cratialité, dont la rencontre produit des tensions.
+          Ces tensions doivent être mises en scène, traitées par l’archicration,
+          puis stabilisées dans des méta-régimes de co-viabilité.
+        </p>
+      </div>
+
+      <div class="glossary-map" aria-label="Carte conceptuelle du glossaire">
+        <div class="glossary-map__stage">
+          <div class="glossary-map__title">Forces en composition</div>
+          <div class="glossary-map__roots">
+            {arcalite ? (
+              <a class="glossary-map__node" href={hrefOfGlossaryEntry(arcalite)}>
+                ARCALITÉ
+              </a>
+            ) : (
+              <span class="glossary-map__node">ARCALITÉ</span>
+            )}
+
+            {cratialite ? (
+              <a class="glossary-map__node" href={hrefOfGlossaryEntry(cratialite)}>
+                CRATIALITÉ
+              </a>
+            ) : (
+              <span class="glossary-map__node">CRATIALITÉ</span>
+            )}
+          </div>
+        </div>
+
+        <div class="glossary-map__arrow" aria-hidden="true">↓</div>
+
+        <div class="glossary-map__stage">
+          <div class="glossary-map__title">Phénomène transversal</div>
+          {tension ? (
+            <a
+              class="glossary-map__node glossary-map__node--wide"
+              href={hrefOfGlossaryEntry(tension)}
+            >
+              TENSION
+            </a>
+          ) : (
+            <span class="glossary-map__node glossary-map__node--wide">
+              TENSION
+            </span>
+          )}
+        </div>
+
+        <div class="glossary-map__arrow" aria-hidden="true">↓</div>
+
+        <div class="glossary-map__stage">
+          <div class="glossary-map__title">Comparution</div>
+          {sceneDepreuve ? (
+            <a
+              class="glossary-map__node glossary-map__node--wide"
+              href={hrefOfGlossaryEntry(sceneDepreuve)}
+            >
+              MISE EN SCÈNE
+            </a>
+          ) : (
+            <span class="glossary-map__node glossary-map__node--wide">
+              MISE EN SCÈNE
+            </span>
+          )}
+        </div>
+
+        <div class="glossary-map__arrow" aria-hidden="true">↓</div>
+
+        <div class="glossary-map__stage">
+          <div class="glossary-map__title">Opérateur régulateur</div>
+          {archicration ? (
+            <a
+              class="glossary-map__node glossary-map__node--wide"
+              href={hrefOfGlossaryEntry(archicration)}
+            >
+              ARCHICRATION
+            </a>
+          ) : (
+            <span class="glossary-map__node glossary-map__node--wide">
+              ARCHICRATION
+            </span>
+          )}
+        </div>
+
+        <div class="glossary-map__arrow" aria-hidden="true">↓</div>
+
+        <div class="glossary-map__stage">
+          <div class="glossary-map__title">Formes de stabilisation</div>
+          <a
+            class="glossary-map__node glossary-map__node--wide"
+            href={metaRegimesPageHref}
+          >
+            MÉTA-RÉGIMES
+          </a>
+        </div>
+      </div>
+    </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>
-              La lecture la plus simple du système part de deux vecteurs premiers,
-              l’arcalité et la cratialité, dont la rencontre produit des tensions.
-              Ces tensions doivent être mises en scène, traitées par l’archicration,
-              puis stabilisées dans des méta-régimes de co-viabilité.
+            <p class="glossary-intro">
+              Ces notions forment la grammaire minimale de l’archicratie.
+              Elles donnent accès à la structure générale du système.
             </p>
           </div>
+        </div>
 
-          <div class="glossary-map" aria-label="Carte conceptuelle du glossaire">
-            <div class="glossary-map__stage">
-              <div class="glossary-map__title">Forces en composition</div>
-              <div class="glossary-map__roots">
-                {arcalite ? (
-                  <a class="glossary-map__node" href={hrefOfGlossaryEntry(arcalite)}>ARCALITÉ</a>
-                ) : (
-                  <span class="glossary-map__node">ARCALITÉ</span>
-                )}
-
-                {cratialite ? (
-                  <a class="glossary-map__node" href={hrefOfGlossaryEntry(cratialite)}>CRATIALITÉ</a>
-                ) : (
-                  <span class="glossary-map__node">CRATIALITÉ</span>
-                )}
-              </div>
-            </div>
-
-            <div class="glossary-map__arrow" aria-hidden="true">↓</div>
-
-            <div class="glossary-map__stage">
-              <div class="glossary-map__title">Phénomène transversal</div>
-              {tension ? (
-                <a class="glossary-map__node glossary-map__node--wide" href={hrefOfGlossaryEntry(tension)}>
-                  TENSION
-                </a>
-              ) : (
-                <span class="glossary-map__node glossary-map__node--wide">TENSION</span>
-              )}
-            </div>
-
-            <div class="glossary-map__arrow" aria-hidden="true">↓</div>
-
-            <div class="glossary-map__stage">
-              <div class="glossary-map__title">Comparution</div>
-              {sceneDepreuve ? (
-                <a class="glossary-map__node glossary-map__node--wide" href={hrefOfGlossaryEntry(sceneDepreuve)}>
-                  MISE EN SCÈNE
-                </a>
-              ) : (
-                <span class="glossary-map__node glossary-map__node--wide">MISE EN SCÈNE</span>
-              )}
-            </div>
-
-            <div class="glossary-map__arrow" aria-hidden="true">↓</div>
-
-            <div class="glossary-map__stage">
-              <div class="glossary-map__title">Opérateur régulateur</div>
-              {archicration ? (
-                <a class="glossary-map__node glossary-map__node--wide" href={hrefOfGlossaryEntry(archicration)}>
-                  ARCHICRATION
-                </a>
-              ) : (
-                <span class="glossary-map__node glossary-map__node--wide">ARCHICRATION</span>
-              )}
-            </div>
-
-            <div class="glossary-map__arrow" aria-hidden="true">↓</div>
-
-            <div class="glossary-map__stage">
-              <div class="glossary-map__title">Formes de stabilisation</div>
-              <a class="glossary-map__node glossary-map__node--wide" href={metaRegimesPageHref}>
-                MÉTA-RÉGIMES
-              </a>
-            </div>
-          </div>
-        </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={hrefOfGlossaryEntry(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
-          </section>
-        )}
-
-        <section id="paradigme-archicratique" class="glossary-section">
-          <div class="glossary-section__head">
-            <div>
-              <h2 data-follow-section="Paradigme archicratique">Paradigme archicratique</h2>
-              <p class="glossary-intro">
-                Cette page de synthèse offre une vue d’ensemble du système
-                archicratique. Elle articule le noyau conceptuel, les scènes de
-                comparution, les dynamiques, les tensions irréductibles, les
-                méta-régimes de co-viabilité et le paysage théorique dans lequel
-                l’archicratie se situe et se distingue.
-              </p>
-            </div>
-
-            <a class="glossary-cta" href={paradigmeArchicratiquePageHref}>
-              Ouvrir la synthèse
+        <div class="glossary-cards">
+          {fondamentaux.map((entry) => (
+            <a class="glossary-card" href={hrefOfGlossaryEntry(entry)}>
+              <strong>{entry.data.term}</strong>
+              <span>{entry.data.definitionShort}</span>
             </a>
-          </div>
-
-          <div class="glossary-portals">
-            <a class="glossary-portal-card" href={paradigmeArchicratiquePageHref}>
-              <strong>Paradigme archicratique</strong>
-              <span>
-                Saisir la logique d’ensemble du système archicratique : de
-                l’arcalité et de la cratialité jusqu’aux scènes, aux tensions, aux
-                formes de co-viabilité et aux traditions de comparaison
-                mobilisées.
-              </span>
-              <small>Portail de synthèse générale</small>
-            </a>
-          </div>
-        </section>
-
-        {scenes.length > 0 && (
-          <section id="scenes-archicratiques" class="glossary-section">
-            <div class="glossary-section__head">
-              <div>
-                <h2 data-follow-section="Scènes archicratiques">Scènes archicratiques</h2>
-                <p class="glossary-intro">
-                  Les scènes archicratiques rendent possible la comparution des
-                  architectures de régulation. Elles sont le lieu où l’ordre peut
-                  être exposé, discuté et révisé.
-                </p>
-              </div>
-            </div>
-
-            <div class="glossary-cards">
-              {scenes.map((entry) => (
-                <a class="glossary-card glossary-card--wide" href={hrefOfGlossaryEntry(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
-          </section>
-        )}
-
-        {dynamiques.length > 0 && (
-          <section id="dynamiques-archicratiques" class="glossary-section">
-            <div class="glossary-section__head">
-              <div>
-                <h2 data-follow-section="Dynamiques archicratiques">Dynamiques archicratiques</h2>
-                <p class="glossary-intro">
-                  Cette famille rassemble les processus de déplacement, les dérives
-                  et les formes de pathologisation de la régulation archicratique.
-                </p>
-              </div>
-            </div>
-
-            <div class="glossary-cards">
-              {dynamiques.map((entry) => (
-                <a class="glossary-card" href={hrefOfGlossaryEntry(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
-          </section>
-        )}
-
-        <section id="meta-regimes-archicratiques" class="glossary-section">
-          <div class="glossary-section__head">
-            <div>
-              <h2 data-follow-section="Méta-régimes archicratiques">Méta-régimes archicratiques</h2>
-              <p class="glossary-intro">
-                Les méta-régimes décrivent les grandes formes historiques et
-                topologiques par lesquelles une société organise durablement ses
-                tensions et sa co-viabilité.
-              </p>
-            </div>
-
-            <a class="glossary-cta" href={metaRegimesPageHref}>
-              Explorer la cartographie complète
-            </a>
-          </div>
-
-          {metaRegimesPreview.length > 0 && (
-            <div class="glossary-cards">
-              {metaRegimesPreview.map((entry) => (
-                <a class="glossary-card" href={hrefOfGlossaryEntry(entry)}>
-                  <strong>{entry.data.term}</strong>
-                  <span>{entry.data.definitionShort}</span>
-                </a>
-              ))}
-            </div>
-          )}
-        </section>
-
-        <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>
+          ))}
+        </div>
       </section>
+    )}
+
+    <section id="paradigme-archicratique" class="glossary-section">
+      <div class="glossary-section__head">
+        <div>
+          <h2 data-follow-section="Paradigme archicratique">
+            Paradigme archicratique
+          </h2>
+          <p class="glossary-intro">
+            Cette page de synthèse offre une vue d’ensemble du système
+            archicratique. Elle articule le noyau conceptuel, les scènes de
+            comparution, les dynamiques, les tensions irréductibles, les
+            méta-régimes de co-viabilité et le paysage théorique dans lequel
+            l’archicratie se situe et se distingue.
+          </p>
+        </div>
+
+        <a class="glossary-cta" href={paradigmeArchicratiquePageHref}>
+          Ouvrir la synthèse
+        </a>
+      </div>
+
+      <div class="glossary-portals">
+        <a class="glossary-portal-card" href={paradigmeArchicratiquePageHref}>
+          <strong>Paradigme archicratique</strong>
+          <span>
+            Saisir la logique d’ensemble du système archicratique : de
+            l’arcalité et de la cratialité jusqu’aux scènes, aux tensions, aux
+            formes de co-viabilité et aux traditions de comparaison
+            mobilisées.
+          </span>
+          <small>Portail de synthèse générale</small>
+        </a>
+      </div>
+    </section>
+
+    {scenes.length > 0 && (
+      <section id="scenes-archicratiques" class="glossary-section">
+        <div class="glossary-section__head">
+          <div>
+            <h2 data-follow-section="Scènes archicratiques">
+              Scènes archicratiques
+            </h2>
+            <p class="glossary-intro">
+              Les scènes archicratiques rendent possible la comparution des
+              architectures de régulation. Elles sont le lieu où l’ordre peut
+              être exposé, discuté et révisé.
+            </p>
+          </div>
+        </div>
+
+        <div class="glossary-cards">
+          {scenes.map((entry) => (
+            <a
+              class="glossary-card glossary-card--wide"
+              href={hrefOfGlossaryEntry(entry)}
+            >
+              <strong>{entry.data.term}</strong>
+              <span>{entry.data.definitionShort}</span>
+            </a>
+          ))}
+        </div>
+      </section>
+    )}
+
+    {dynamiques.length > 0 && (
+      <section id="dynamiques-archicratiques" class="glossary-section">
+        <div class="glossary-section__head">
+          <div>
+            <h2 data-follow-section="Dynamiques archicratiques">
+              Dynamiques archicratiques
+            </h2>
+            <p class="glossary-intro">
+              Cette famille rassemble les processus de déplacement, les dérives
+              et les formes de pathologisation de la régulation archicratique.
+            </p>
+          </div>
+        </div>
+
+        <div class="glossary-cards">
+          {dynamiques.map((entry) => (
+            <a class="glossary-card" href={hrefOfGlossaryEntry(entry)}>
+              <strong>{entry.data.term}</strong>
+              <span>{entry.data.definitionShort}</span>
+            </a>
+          ))}
+        </div>
+      </section>
+    )}
+
+    <section id="meta-regimes-archicratiques" class="glossary-section">
+      <div class="glossary-section__head">
+        <div>
+          <h2 data-follow-section="Méta-régimes archicratiques">
+            Méta-régimes archicratiques
+          </h2>
+          <p class="glossary-intro">
+            Les méta-régimes décrivent les grandes formes historiques et
+            topologiques par lesquelles une société organise durablement ses
+            tensions et sa co-viabilité.
+          </p>
+        </div>
+
+        <a class="glossary-cta" href={metaRegimesPageHref}>
+          Explorer la cartographie complète
+        </a>
+      </div>
+
+      {metaRegimesPreview.length > 0 && (
+        <div class="glossary-cards">
+          {metaRegimesPreview.map((entry) => (
+            <a class="glossary-card" href={hrefOfGlossaryEntry(entry)}>
+              <strong>{entry.data.term}</strong>
+              <span>{entry.data.definitionShort}</span>
+            </a>
+          ))}
+        </div>
+      )}
+    </section>
+
+    <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>
 
   <script is:inline>
     (() => {