refactor(glossaire): componentize glossary entry page

Reviewed-on: #295

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/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

@@ -30,3 +30,60 @@ const { relationBlocks = [] } = Astro.props;
     </div>
   </section>
 )}
+
+<style>
+  .glossary-relations{
+    margin-top: 26px;
+    padding-top: 18px;
+    border-top: 1px solid rgba(127,127,127,0.18);
+  }
+
+  .glossary-relations h2{
+    margin-bottom: 14px;
+  }
+
+  .glossary-relations-grid{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 12px;
+  }
+
+  .glossary-relations-card{
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 16px;
+    padding: 14px 16px;
+    background: rgba(127,127,127,0.05);
+  }
+
+  .glossary-relations-card h3{
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 15px;
+    line-height: 1.35;
+  }
+
+  .glossary-relations-card ul{
+    margin: 0;
+    padding-left: 18px;
+  }
+
+  .glossary-relations-card li{
+    margin-bottom: 8px;
+    font-size: 14px;
+    line-height: 1.45;
+  }
+
+  .glossary-relations-card li:last-child{
+    margin-bottom: 0;
+  }
+
+  .glossary-relations-card span{
+    opacity: .9;
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-relations-card{
+      background: rgba(255,255,255,0.04);
+    }
+  }
+</style>

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

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

src/pages/glossaire/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;