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/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/pages/glossaire/index.astro

@@ -1,31 +1,43 @@
 ---
 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 {
-  getGlossaryHomeData,
-  getGlossaryHomeStats,
+  buildGlossaryBySlug,
+  countGlossaryEntriesByKind,
+  familyOf,
+  getGlossaryEntriesByFamily,
   hrefOfGlossaryEntry,
+  sortGlossaryEntries,
 } from "../../lib/glossary";
 
 const entries = await getCollection("glossaire");
 
-const {
-  fondamentaux,
-  scenes,
-  dynamiques,
-  metaRegimesPreview,
-  arcalite,
-  cratialite,
-  tension,
-  sceneDepreuve,
-  archicration,
-} = getGlossaryHomeData(entries);
+const bySlug = buildGlossaryBySlug(entries);
 
-const {
-  paradigmesCount,
-  doctrinesCount,
-} = getGlossaryHomeStats(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 paradigmeArchicratiquePageHref = "/glossaire/paradigme-archicratique/";
 const metaRegimesPageHref = "/glossaire/archicrations/";
@@ -33,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
@@ -45,22 +98,7 @@ 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"
@@ -172,207 +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={hrefOfGlossaryEntry(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={hrefOfGlossaryEntry(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={hrefOfGlossaryEntry(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={hrefOfGlossaryEntry(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>
     (() => {
@@ -539,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;
@@ -618,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);
@@ -714,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;