Merge pull request 'feat(glossaire): extend taxonomy and align Astro 6 content config' (#216) from feat/glossaire-paradigmes into main

Reviewed-on: #216

src/components/EditionToc.astro

@@ -8,11 +8,20 @@ const {
   label = "Table des matières"
 } = Astro.props;
 
-const entries = (await getCollection(collection))
-  .sort((a, b) => (a.data.order ?? 0) - (b.data.order ?? 0));
+const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
+const hrefOf = (entry) => `${basePath}/${slugOf(entry)}/`;
 
-const routeSlug = (entry) => String(entry.id || "").replace(/\.(md|mdx)$/i, "");
-const href = (entry) => `${basePath}/${routeSlug(entry)}/`;
+const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
+
+const entries = [...await getCollection(collection)].sort((a, b) => {
+  const ao = Number(a.data.order ?? 9999);
+  const bo = Number(b.data.order ?? 9999);
+  if (ao !== bo) return ao - bo;
+
+  const at = String(a.data.title ?? a.data.term ?? slugOf(a));
+  const bt = String(b.data.title ?? b.data.term ?? slugOf(b));
+  return collator.compare(at, bt);
+});
 ---
 
 <nav class="toc-global" aria-label={label}>
@@ -22,12 +31,12 @@ const href = (entry) => `${basePath}/${routeSlug(entry)}/`;
 
   <ol class="toc-global__list">
     {entries.map((e) => {
-      const entrySlug = routeSlug(e);
-      const active = entrySlug === currentSlug;
+      const slug = slugOf(e);
+      const active = slug === currentSlug;
 
       return (
         <li class={`toc-item ${active ? "is-active" : ""}`}>
-          <a class="toc-link" href={href(e)} aria-current={active ? "page" : undefined}>
+          <a class="toc-link" href={hrefOf(e)} aria-current={active ? "page" : undefined}>
             <span class="toc-link__row">
               {active ? (
                 <span class="toc-active-indicator" aria-hidden="true">👉</span>

src/content.config.ts

@@ -61,7 +61,7 @@ const glossaire = defineCollection({
     concepts: z.array(z.string().min(1)).default([]),
     links: z.array(linkSchema).default([]),
 
-    kind: z.enum(["concept", "topologie", "diagnostic", "verbe"]),
+    kind: z.enum(["concept", "topologie", "diagnostic", "verbe", "paradigme"]),
     domain: z.enum(["transversal", "theorie", "cas-ia"]),
     level: z.enum(["fondamental", "intermediaire", "avance"]),
     related: z.array(z.string().min(1)).default([]),

src/content/cas-ia/annexe-glossaire-audit.mdx

@@ -6,7 +6,7 @@ level: 1
 version: "0.1.0"
 concepts: []
 links: []
-order: 100
+order: 195
 summary: ""
 source:
   kind: docx

src/content/cas-ia/chapitre-1.mdx

@@ -6,7 +6,7 @@ level: 1
 version: "0.1.0"
 concepts: []
 links: []
-order: 20
+order: 120
 summary: ""
 source:
   kind: docx

src/content/cas-ia/chapitre-2.mdx

@@ -6,7 +6,7 @@ level: 1
 version: "0.1.0"
 concepts: []
 links: []
-order: 30
+order: 130
 summary: ""
 source:
   kind: docx

src/content/cas-ia/chapitre-3.mdx

@@ -6,7 +6,7 @@ level: 1
 version: "0.1.0"
 concepts: []
 links: []
-order: 40
+order: 140
 summary: ""
 source:
   kind: docx

src/content/cas-ia/chapitre-4.mdx

@@ -6,7 +6,7 @@ level: 1
 version: "0.1.0"
 concepts: []
 links: []
-order: 50
+order: 150
 summary: ""
 source:
   kind: docx

src/content/cas-ia/chapitre-5.mdx

@@ -6,7 +6,7 @@ level: 1
 version: "0.1.0"
 concepts: []
 links: []
-order: 60
+order: 160
 summary: ""
 source:
   kind: docx

src/content/cas-ia/chapitre-6.mdx

@@ -6,7 +6,7 @@ level: 1
 version: "0.1.0"
 concepts: []
 links: []
-order: 70
+order: 170
 summary: ""
 source:
   kind: docx

src/content/cas-ia/chapitre-7.mdx

@@ -6,7 +6,7 @@ level: 1
 version: "0.1.0"
 concepts: []
 links: []
-order: 80
+order: 180
 summary: ""
 source:
   kind: docx

src/content/cas-ia/conclusion.mdx

@@ -6,7 +6,7 @@ level: 1
 version: "0.1.0"
 concepts: []
 links: []
-order: 90
+order: 190
 summary: ""
 source:
   kind: docx

src/content/cas-ia/introduction.mdx

@@ -12,7 +12,6 @@ source:
   kind: docx
   path: "sources/docx/cas-ia/Cas_Pratique-Archicratie_et_gouvernance_des_systemes_IA-Introduction.docx"
 ---
-1.  Introduction générale — Mettre un système d’IA en scène
 
 Ce texte est un prolongement opératoire de l’essai-thèse sur l’*archicratie*. Il n’ajoute pas un nouveau pan théorique, ni un chapitre caché : il montre *comment* utiliser le paradigme archicratique pour instruire un cas concret, massif, déjà à l’œuvre. Il propose un audit archicratique d’un grand système d’intelligence artificielle de fondation, tel qu’il est intégré dans des dispositifs de décision publics et privés. Autrement dit : il s’agit d’examiner, avec les outils construits par la thèse, ce qui se passe quand un modèle d’IA ne se contente plus de produire des textes ou des prédictions dans l’abstrait, mais devient un opérateur régulateur au cœur des politiques sociales, des institutions de santé, des systèmes de justice, des ressources humaines, des plateformes d’information.
 

src/content/glossaire/arcalite.md

@@ -11,9 +11,9 @@ links: []
 kind: "concept"
 domain: "transversal"
 level: "fondamental"
-related: ["archicratie", "archicration", "cratialite"]
+related: ["archicratie", "archicration", "cratialite", "tension"]
 opposedTo: []
-seeAlso: ["co-viabilite"]
+seeAlso: ["co-viabilite", "tension"]
 ---
 
 L’arcalité désigne l’ensemble des structures relativement durables qui donnent consistance, forme et stabilité à un ordre social ou technique.

src/content/glossaire/archicratie.md

@@ -5,7 +5,7 @@ aliases: ["Paradigme archicratique"]
 edition: "glossaire"
 status: "referentiel"
 version: "0.1.0"
-definitionShort: "Régime d’intelligibilité et d’analyse centré sur les architectures de régulation qui rendent possible la co-viabilité des sociétés complexes."
+definitionShort: "Régime d’intelligibilité centré sur les architectures de régulation qui organisent les tensions et rendent possible la co-viabilité des sociétés complexes."
 concepts: ["archicratie", "arcalite", "cratialite", "archicration", "co-viabilite"]
 links: []
 kind: "concept"
@@ -13,7 +13,7 @@ domain: "transversal"
 level: "fondamental"
 related: ["arcalite", "cratialite", "archicration", "co-viabilite"]
 opposedTo: ["autarchicratie"]
-seeAlso: ["scene-depreuve", "obliteration-archicratique"]
+seeAlso: ["scene-depreuve", "obliteration-archicratique", "tension"]
 ---
 
 L’archicratie désigne le cadre théorique à partir duquel les sociétés sont analysées non seulement à travers leurs institutions visibles ou leurs régimes déclarés, mais à partir des architectures de régulation qui rendent possible leur tenue effective.

src/content/glossaire/archicration.md

@@ -11,9 +11,9 @@ links: []
 kind: "concept"
 domain: "transversal"
 level: "fondamental"
-related: ["archicratie", "arcalite", "cratialite", "scene-depreuve"]
+related: ["archicratie", "arcalite", "cratialite", "scene-depreuve", "tension"]
 opposedTo: ["obliteration-archicratique"]
-seeAlso: ["autarchicratie"]
+seeAlso: ["autarchicratie", "tension"]
 ---
 
 L’archicration désigne la scène ou la configuration d’épreuve dans laquelle les structures d’un ordre et ses prises effectives peuvent être amenées ensemble en visibilité, en confrontation et en révision.

src/content/glossaire/co-viabilite.md

@@ -5,15 +5,15 @@ aliases: []
 edition: "glossaire"
 status: "referentiel"
 version: "0.1.0"
-definitionShort: "Capacité d’un ensemble social à maintenir compatibles ses dynamiques internes sans se désagréger."
+definitionShort: "Capacité d’un ordre collectif à maintenir la coexistence durable de dynamiques multiples en organisant les tensions qui les traversent."
 concepts: ["co-viabilite", "archicratie", "arcalite", "cratialite", "archicration"]
 links: []
 kind: "concept"
 domain: "transversal"
 level: "fondamental"
-related: ["archicratie", "arcalite", "cratialite", "archicration"]
+related: ["archicratie", "arcalite", "cratialite", "archicration", "tension"]
 opposedTo: []
-seeAlso: ["autarchicratie"]
+seeAlso: ["autarchicratie", "tension"]
 ---
 
 La co-viabilité désigne la capacité d’un système social à absorber, redistribuer et organiser les tensions qui le traversent de manière à préserver la continuité de la vie collective.

src/content/glossaire/cratialite.md

@@ -11,9 +11,9 @@ links: []
 kind: "concept"
 domain: "transversal"
 level: "fondamental"
-related: ["archicratie", "archicration", "arcalite"]
+related: ["archicratie", "archicration", "arcalite", "tension"]
 opposedTo: []
-seeAlso: ["autarchicratie"]
+seeAlso: ["autarchicratie", "tension"]
 ---
 
 La cratialité désigne la dimension effective, dynamique et opératoire d’un ordre : ce par quoi il agit, s’applique, se déploie et transforme la réalité sociale.

src/content/glossaire/tension.md

@@ -0,0 +1,48 @@
+---
+title: "Tension"
+term: "Tension"
+aliases: []
+edition: "glossaire"
+status: "referentiel"
+version: "0.1.0"
+definitionShort: "Différentiel, pression ou rapport dynamique entre forces, structures, normes ou flux, dont le traitement conditionne la tenue d’un ordre social ou technique."
+concepts: ["tension", "archicratie", "co-viabilite", "arcalite", "cratialite", "archicration"]
+links: []
+kind: "concept"
+domain: "transversal"
+level: "fondamental"
+related: ["archicratie", "co-viabilite", "arcalite", "cratialite", "archicration"]
+opposedTo: []
+seeAlso: ["autarchicratie", "obliteration-archicratique"]
+---
+
+La tension désigne l’état dynamique dans lequel des forces, des structures, des normes, des intérêts ou des flux entrent en rapport de pression, de différenciation ou d’ajustement.
+
+## Distinction
+
+La tension ne se réduit ni au conflit ouvert ni à la crise manifeste. Elle peut être latente, diffuse ou distribuée, tout en demeurant déterminante pour la tenue d’un ordre collectif.
+
+Elle n’est pas nécessairement négative : certaines tensions sont structurantes et rendent possible l’équilibre dynamique d’un système.
+
+## Fonction dans le paradigme
+
+Dans le paradigme archicratique, les sociétés ne se définissent pas par l’absence de tensions, mais par les architectures capables d’organiser ces tensions et d’éviter leur transformation en ruptures destructrices.
+
+L’analyse archicratique porte donc sur les dispositifs qui permettent de rendre ces tensions visibles, traitables et compatibles avec la continuité collective.
+
+## Usages
+
+Le terme sert à analyser :
+
+- les différentiels entre structures et dynamiques ;
+- les pressions exercées sur un ordre régulateur ;
+- les points de désajustement ou de surcharge ;
+- les conditions de la co-viabilité.
+
+## Renvois
+
+- [Archicratie](/glossaire/archicratie/)
+- [Co-viabilité](/glossaire/co-viabilite/)
+- [Arcalité](/glossaire/arcalite/)
+- [Cratialité](/glossaire/cratialite/)
+- [Archicration](/glossaire/archicration/)

src/pages/api/glossaire.json.ts

@@ -3,15 +3,21 @@ import { getCollection } from "astro:content";
 
 export const prerender = true;
 
+const slugOf = (entry: { id: string }) => String(entry.id).replace(/\.(md|mdx)$/i, "");
+
 export const GET: APIRoute = async () => {
   const entries = await getCollection("glossaire");
-  const index = entries.map((e) => ({
-    slug: e.slug,
-    term: e.data.term,
-    aliases: e.data.aliases ?? [],
-    definitionShort: e.data.definitionShort,
-    href: `/glossaire/${e.slug}/`,
-  }));
+
+  const index = entries.map((e) => {
+    const slug = slugOf(e);
+    return {
+      slug,
+      term: e.data.term,
+      aliases: e.data.aliases ?? [],
+      definitionShort: e.data.definitionShort,
+      href: `/glossaire/${slug}/`,
+    };
+  });
 
   return new Response(JSON.stringify(index), {
     headers: {
@@ -19,4 +25,4 @@ export const GET: APIRoute = async () => {
       "Cache-Control": "public, max-age=3600",
     },
   });
-};
+};

src/pages/glossaire/index.astro

@@ -3,19 +3,323 @@ import SiteLayout from "../../layouts/SiteLayout.astro";
 import { getCollection } from "astro:content";
 
 const entries = await getCollection("glossaire");
-entries.sort((a, b) => a.data.term.localeCompare(b.data.term, "fr"));
+
+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 sorted = [...entries].sort((a, b) => collator.compare(a.data.term, b.data.term));
+
+function groupByInitial(list) {
+  const map = new Map();
+
+  for (const entry of list) {
+    const letter = (entry.data.term || "").trim().charAt(0).toUpperCase() || "#";
+    if (!map.has(letter)) map.set(letter, []);
+    map.get(letter).push(entry);
+  }
+
+  return [...map.entries()].sort((a, b) => collator.compare(a[0], b[0]));
+}
+
+const groupedAlpha = groupByInitial(sorted);
+
+const byPredicate = (fn) => sorted.filter(fn);
+
+const fondamentaux = byPredicate(
+  (e) => e.data.kind === "concept" && e.data.level === "fondamental"
+);
+
+const intermediaires = byPredicate(
+  (e) => e.data.kind === "concept" && e.data.level === "intermediaire"
+);
+
+const avances = byPredicate(
+  (e) => e.data.kind === "concept" && e.data.level === "avance"
+);
+
+const diagnostics = byPredicate((e) => e.data.kind === "diagnostic");
+const topologies = byPredicate((e) => e.data.kind === "topologie");
+const verbes = byPredicate((e) => e.data.kind === "verbe");
+const paradigmes = byPredicate((e) => e.data.kind === "paradigme");
 ---
 
 <SiteLayout title="Glossaire archicratique">
-  <h1>Glossaire archicratique</h1>
-  <ul>
-    {entries.map((e) => (
-      <li>
-        <a href={`/glossaire/${String(e.id).replace(/\.(md|mdx)$/i, "")}/`}>
-          {e.data.term}
-        </a>{" "}
-        — <em>{e.data.definitionShort}</em>
-      </li>
-    ))}
-  </ul>
-</SiteLayout>
+  <section class="glossary-home">
+    <header class="glossary-hero">
+      <p class="glossary-kicker">Référentiel terminologique</p>
+      <h1>Glossaire archicratique</h1>
+      <p class="glossary-intro">
+        Ce glossaire rassemble les concepts, diagnostics, topologies et verbes
+        utiles à la lecture du paradigme archicratique. Son organisation repose
+        sur les métadonnées de chaque entrée afin de maintenir une structure
+        cohérente, extensible et lisible.
+      </p>
+    </header>
+
+    <nav class="glossary-toc" aria-label="Sommaire du glossaire">
+      <a href="#reperes">Repères</a>
+      <a href="#paradigmes">Paradigmes mobilisés</a>
+      {paradigmes.length > 0 && (
+        <section id="paradigmes" class="glossary-section">
+          <h2>Paradigmes mobilisés</h2>
+          <p class="glossary-intro">
+            Ces entrées ne relèvent pas du noyau conceptuel archicratique au sens strict.
+            Elles désignent les cadres théoriques, paradigmes ou traditions de pensée
+            avec lesquels l’archicratie entre en dialogue, en déplacement ou en différenciation.
+          </p>
+
+          <div class="glossary-cards">
+            {paradigmes.map((e) => (
+              <a class="glossary-card" href={hrefOf(e)}>
+                <strong>{e.data.term}</strong>
+                <span>{e.data.definitionShort}</span>
+              </a>
+            ))}
+          </div>
+        </section>
+      )}
+      <a href="#alphabetique">Index alphabétique</a>
+    </nav>
+
+    <section id="reperes" class="glossary-section">
+      <h2>Repères</h2>
+
+      {fondamentaux.length > 0 && (
+        <section class="glossary-block">
+          <h3>Repères fondamentaux</h3>
+          <div class="glossary-cards">
+            {fondamentaux.map((e) => (
+              <a class="glossary-card" href={hrefOf(e)}>
+                <strong>{e.data.term}</strong>
+                <span>{e.data.definitionShort}</span>
+              </a>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {intermediaires.length > 0 && (
+        <section class="glossary-block">
+          <h3>Concepts intermédiaires</h3>
+          <div class="glossary-cards">
+            {intermediaires.map((e) => (
+              <a class="glossary-card" href={hrefOf(e)}>
+                <strong>{e.data.term}</strong>
+                <span>{e.data.definitionShort}</span>
+              </a>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {avances.length > 0 && (
+        <section class="glossary-block">
+          <h3>Concepts avancés</h3>
+          <div class="glossary-cards">
+            {avances.map((e) => (
+              <a class="glossary-card" href={hrefOf(e)}>
+                <strong>{e.data.term}</strong>
+                <span>{e.data.definitionShort}</span>
+              </a>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {diagnostics.length > 0 && (
+        <section class="glossary-block">
+          <h3>Diagnostics</h3>
+          <div class="glossary-cards">
+            {diagnostics.map((e) => (
+              <a class="glossary-card" href={hrefOf(e)}>
+                <strong>{e.data.term}</strong>
+                <span>{e.data.definitionShort}</span>
+              </a>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {topologies.length > 0 && (
+        <section class="glossary-block">
+          <h3>Topologies</h3>
+          <div class="glossary-cards">
+            {topologies.map((e) => (
+              <a class="glossary-card" href={hrefOf(e)}>
+                <strong>{e.data.term}</strong>
+                <span>{e.data.definitionShort}</span>
+              </a>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {verbes.length > 0 && (
+        <section class="glossary-block">
+          <h3>Verbes de la scène archicratique</h3>
+          <div class="glossary-cards">
+            {verbes.map((e) => (
+              <a class="glossary-card" href={hrefOf(e)}>
+                <strong>{e.data.term}</strong>
+                <span>{e.data.definitionShort}</span>
+              </a>
+            ))}
+          </div>
+        </section>
+      )}
+    </section>
+
+    <section id="alphabetique" class="glossary-section">
+      <h2>Index alphabétique</h2>
+
+      <nav class="glossary-alpha-nav" aria-label="Lettres du glossaire">
+        {groupedAlpha.map(([letter]) => (
+          <a href={`#letter-${letter}`}>{letter}</a>
+        ))}
+      </nav>
+
+      <div class="glossary-alpha-groups">
+        {groupedAlpha.map(([letter, items]) => (
+          <section class="glossary-letter-group" id={`letter-${letter}`}>
+            <h3>{letter}</h3>
+            <ul class="glossary-list">
+              {items.map((e) => (
+                <li>
+                  <a href={hrefOf(e)}>{e.data.term}</a>
+                  <span> — {e.data.definitionShort}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ))}
+      </div>
+    </section>
+  </section>
+</SiteLayout>
+
+<style>
+  .glossary-home{
+    padding: 8px 0 32px;
+  }
+
+  .glossary-hero{
+    margin-bottom: 24px;
+  }
+
+  .glossary-kicker{
+    font-size: 12px;
+    letter-spacing: .08em;
+    text-transform: uppercase;
+    opacity: .72;
+    margin-bottom: 8px;
+  }
+
+  .glossary-intro{
+    max-width: 72ch;
+    opacity: .92;
+  }
+
+  .glossary-toc{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin: 18px 0 30px;
+  }
+
+  .glossary-toc a{
+    border: 1px solid rgba(127,127,127,0.28);
+    border-radius: 999px;
+    padding: 6px 12px;
+    text-decoration: none;
+  }
+
+  .glossary-section{
+    margin-top: 34px;
+  }
+
+  .glossary-block{
+    margin-top: 18px;
+  }
+
+  .glossary-cards{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 12px;
+    margin-top: 12px;
+  }
+
+  .glossary-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;
+  }
+
+  .glossary-card:hover{
+    transform: translateY(-1px);
+    background: rgba(127,127,127,0.08);
+    text-decoration: none;
+  }
+
+  .glossary-card strong{
+    font-size: 15px;
+  }
+
+  .glossary-card span{
+    font-size: 14px;
+    line-height: 1.45;
+    opacity: .92;
+  }
+
+  .glossary-alpha-nav{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 12px 0 20px;
+  }
+
+  .glossary-alpha-nav a{
+    min-width: 32px;
+    text-align: center;
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 10px;
+    padding: 5px 8px;
+    text-decoration: none;
+  }
+
+  .glossary-alpha-groups{
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .glossary-letter-group h3{
+    margin-bottom: 10px;
+  }
+
+  .glossary-list{
+    margin: 0;
+    padding-left: 18px;
+  }
+
+  .glossary-list li{
+    margin-bottom: 8px;
+  }
+
+  @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/styles/global.css

@@ -539,4 +539,91 @@ html{ scroll-behavior: smooth; }
             min-height: 100dvh;
           }
         }
-      }
+      }
+
+/* ==========================
+   Glossaire
+   ========================== */
+
+   .glossary-intro{
+    margin-bottom: 14px;
+  }
+  
+  .glossary-section{
+    margin: 24px 0;
+  }
+  
+  .glossary-section-nav{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin: 18px 0 12px;
+  }
+  
+  .glossary-section-nav a,
+  .glossary-alpha-nav a{
+    border: 1px solid rgba(127,127,127,0.35);
+    border-radius: 999px;
+    padding: 4px 10px;
+    transition: background 120ms ease, transform 120ms ease;
+  }
+  
+  .glossary-section-nav a:hover,
+  .glossary-alpha-nav a:hover{
+    background: rgba(127,127,127,0.10);
+    transform: translateY(-1px);
+    text-decoration: none;
+  }
+  
+  .glossary-grid{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 14px;
+    margin-top: 14px;
+  }
+  
+  .glossary-card{
+    border: 1px solid rgba(127,127,127,0.22);
+    border-radius: 16px;
+    padding: 14px;
+    background: rgba(127,127,127,0.05);
+  }
+  
+  .glossary-card h3{
+    margin-top: 0;
+    margin-bottom: 8px;
+    line-height: 1.25;
+  }
+  
+  .glossary-card__def{
+    margin-bottom: 10px;
+  }
+  
+  .glossary-meta{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    font-size: 12px;
+    opacity: .85;
+  }
+  
+  .glossary-meta span{
+    border: 1px solid rgba(127,127,127,0.28);
+    border-radius: 999px;
+    padding: 2px 8px;
+  }
+  
+  .glossary-alpha-nav{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 12px 0 18px;
+  }
+  
+  .glossary-alpha-group{
+    margin: 20px 0;
+  }
+  
+  .glossary-alpha-group h3{
+    margin-bottom: 8px;
+  }