feat(glossaire): enrichit la cartographie archicratique et les archicrations

src/pages/glossaire/archicrations.astro

@@ -0,0 +1,338 @@
+---
+import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
+import { getCollection } from "astro:content";
+
+const entries = await getCollection("glossaire");
+
+const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
+const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;
+
+const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
+const bySlug = new Map(entries.map((entry) => [slugOf(entry), entry]));
+
+function resolve(slugs = []) {
+  return slugs
+    .map((slug) => bySlug.get(slug))
+    .filter(Boolean)
+    .sort((a, b) => collator.compare(a.data.term, b.data.term));
+}
+
+const sections = [
+  {
+    id: "symboliques-sacrales",
+    title: "Archicrations symboliques et sacrales",
+    intro:
+      "Formes de co-viabilité où l’ordre collectif se stabilise à partir d’ancrages symboliques premiers, de médiations rituelles, de sacralités diffuses ou d’infrastructures de soutien à la tenue du groupe.",
+    items: resolve([
+      "archicrations-proto-symboliques",
+      "archicrations-sacrales-non-etatiques",
+      "archicrations-techno-logistiques",
+    ]),
+  },
+  {
+    id: "scripturales-theologiques",
+    title: "Archicrations scripturales et théologiques",
+    intro:
+      "Formes où la régulation repose sur l’inscription, l’autorité du texte, la mise en ordre cosmologique du monde ou la médiation théologique.",
+    items: resolve([
+      "archicrations-scripturo-normatives",
+      "archicrations-scripturo-cosmologiques",
+      "archicrations-theologiques",
+    ]),
+  },
+  {
+    id: "memorielles-epistemiques-symboliques",
+    title: "Archicrations mémorielles, épistémiques et symboliques",
+    intro:
+      "Formes dans lesquelles la tenue du collectif dépend du récit du passé, de l’institution du vrai ou de la circulation de formes symboliques partageables.",
+    items: resolve([
+      "archicrations-historiographiques",
+      "archicrations-epistemiques",
+      "archicrations-esthetico-symboliques",
+    ]),
+  },
+  {
+    id: "politico-cratiales",
+    title: "Archicrations politico-cratiales",
+    intro:
+      "Formes de régulation dans lesquelles l’ordre collectif se structure principalement autour de la norme, de l’échange ou de la puissance organisée.",
+    items: resolve([
+      "archicrations-normativo-politiques",
+      "archicrations-marchandes",
+      "archicrations-guerrieres",
+    ]),
+  },
+  {
+    id: "differentielles-hybrides",
+    title: "Configurations différentielles et hybrides",
+    intro:
+      "Formes mixtes, modulées ou composites dans lesquelles plusieurs régimes se superposent, s’inhibent ou s’entrelacent sans se réduire à une forme unifiée.",
+    items: resolve([
+      "archicrations-differentielles-et-formes-hybrides",
+    ]),
+  },
+];
+
+const totalCount = sections.reduce((sum, section) => sum + section.items.length, 0);
+---
+
+<GlossaryLayout
+  title="Archicrations"
+  version="1.0"
+>
+  <Fragment slot="aside">
+    <nav class="archi-aside" aria-label="Navigation des archicrations">
+      <div class="archi-aside__block">
+        <a class="archi-aside__back" href="/glossaire/">← Retour au glossaire</a>
+        <div class="archi-aside__title">Archicrations</div>
+        <div class="archi-aside__meta">{totalCount} types cartographiés</div>
+      </div>
+
+      <div class="archi-aside__block">
+        <h2 class="archi-aside__heading">Dans cette page</h2>
+        <ul class="archi-aside__list">
+          {sections.map((section) => (
+            <li><a href={`#${section.id}`}>{section.title}</a></li>
+          ))}
+        </ul>
+      </div>
+
+      <div class="archi-aside__block">
+        <h2 class="archi-aside__heading">Renvois utiles</h2>
+        <ul class="archi-aside__list">
+          <li><a href="/glossaire/archicration/">Archicration</a></li>
+          <li><a href="/glossaire/archicratie/">Archicratie</a></li>
+          <li><a href="/glossaire/arcalite/">Arcalité</a></li>
+          <li><a href="/glossaire/cratialite/">Cratialité</a></li>
+          <li><a href="/glossaire/co-viabilite/">Co-viabilité</a></li>
+        </ul>
+      </div>
+    </nav>
+  </Fragment>
+
+  <section class="archi-page">
+    <div class="archi-hero">
+      <p class="archi-kicker">Topologie archicratique</p>
+      <h1>Archicrations</h1>
+      <p class="archi-intro">
+        Cette page rassemble les principales formes d’archicration distinguées
+        dans le glossaire. Elle propose une vue d’ensemble des grands régimes de
+        co-viabilité à partir desquels un collectif se stabilise, se transmet,
+        se transforme ou se recompose.
+      </p>
+      <p class="archi-intro">
+        Les catégories proposées ci-dessous ne valent pas comme cases closes,
+        mais comme repères de lecture permettant de situer les différentes
+        topologies de régulation et leurs articulations.
+      </p>
+    </div>
+
+    {sections.map((section) => (
+      <section class="archi-section">
+        <div class="archi-section__head">
+            <h2 id={section.id}>{section.title}</h2>
+          <span class="archi-section__count">
+            {section.items.length} fiche{section.items.length > 1 ? "s" : ""}
+          </span>
+        </div>
+
+        <p class="archi-section__intro">{section.intro}</p>
+
+        <div class="archi-cards">
+          {section.items.map((entry) => (
+            <a class="archi-card" href={hrefOf(entry)}>
+              <strong>{entry.data.term}</strong>
+              <span>{entry.data.definitionShort}</span>
+
+              {entry.data.tradition && (
+                <small>Tradition : {entry.data.tradition}</small>
+              )}
+
+              {entry.data.authors?.length > 0 && (
+                <small>Auteurs liés : {entry.data.authors.join(", ")}</small>
+              )}
+            </a>
+          ))}
+        </div>
+      </section>
+    ))}
+
+    <section class="archi-section archi-section--final">
+      <h2>Portée d’ensemble</h2>
+      <p>
+        Cette cartographie permet de lire les archicrations non comme des formes
+        isolées, mais comme des topologies de régulation susceptibles de se
+        renforcer, de se concurrencer ou de s’hybrider. Elle éclaire ainsi la
+        manière dont l’
+        <a href="/glossaire/archicratie/">archicratie</a> peut être pensée comme
+        intelligibilité d’ensemble des formes de co-viabilité.
+      </p>
+    </section>
+  </section>
+</GlossaryLayout>
+
+<style>
+  .archi-page{
+    padding: 8px 0 24px;
+  }
+
+  .archi-hero{
+    margin-bottom: 24px;
+  }
+
+  .archi-kicker{
+    font-size: 12px;
+    letter-spacing: .08em;
+    text-transform: uppercase;
+    opacity: .72;
+    margin-bottom: 8px;
+  }
+
+  .archi-intro{
+    max-width: 76ch;
+    opacity: .92;
+  }
+
+  .archi-section{
+    margin-top: 34px;
+    scroll-margin-top: calc(var(--sticky-offset) + 75px);
+  }
+
+  .archi-section h2{
+    scroll-margin-top: calc(var(--sticky-offset) + 75px);
+  }
+
+  .archi-section__head{
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .archi-section__count{
+    font-size: 13px;
+    opacity: .72;
+    white-space: nowrap;
+  }
+
+  .archi-section__intro{
+    max-width: 78ch;
+    opacity: .92;
+  }
+
+  .archi-cards{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 12px;
+    margin-top: 14px;
+  }
+
+  .archi-card{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 14px 16px;
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 16px;
+    background: rgba(127,127,127,0.05);
+    text-decoration: none;
+    transition: transform 120ms ease, background 120ms ease;
+  }
+
+  .archi-card:hover{
+    transform: translateY(-1px);
+    background: rgba(127,127,127,0.08);
+    text-decoration: none;
+  }
+
+  .archi-card strong{
+    font-size: 15px;
+    line-height: 1.3;
+  }
+
+  .archi-card span{
+    font-size: 14px;
+    line-height: 1.45;
+    opacity: .92;
+  }
+
+  .archi-card small{
+    font-size: 12px;
+    line-height: 1.4;
+    opacity: .72;
+  }
+
+  .archi-section--final{
+    margin-top: 42px;
+  }
+
+  .archi-aside{
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .archi-aside__block{
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 16px;
+    padding: 12px;
+    background: rgba(127,127,127,0.05);
+  }
+
+  .archi-aside__back{
+    display: inline-block;
+    margin-bottom: 8px;
+    font-size: 13px;
+    font-weight: 700;
+    text-decoration: none;
+  }
+
+  .archi-aside__title{
+    font-size: 14px;
+    font-weight: 800;
+    letter-spacing: .2px;
+    line-height: 1.25;
+  }
+
+  .archi-aside__meta{
+    margin-top: 8px;
+    font-size: 12px;
+    line-height: 1.35;
+    opacity: .78;
+  }
+
+  .archi-aside__heading{
+    margin: 0 0 10px;
+    font-size: 13px;
+    font-weight: 800;
+    opacity: .9;
+  }
+
+  .archi-aside__list{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .archi-aside__list li{
+    margin: 6px 0;
+  }
+
+  .archi-aside__list a{
+    text-decoration: none;
+    font-size: 13px;
+    line-height: 1.3;
+  }
+
+  @media (prefers-color-scheme: dark){
+    .archi-card,
+    .archi-aside__block{
+        background: rgba(255,255,255,0.04);
+    }
+
+    .archi-card:hover{
+      background: rgba(255,255,255,0.07);
+    }
+  }
+</style>