Files
archicratie-edition/src/pages/glossaire/paradigme-archicratique.astro
Archicratia a9f2a5bbd4
All checks were successful
SMOKE / smoke (push) Successful in 5s
CI / build-and-anchors (push) Successful in 54s
CI / build-and-anchors (pull_request) Successful in 43s
feat(glossaire): harmonize portal pages and sticky reading ux
2026-03-26 12:58:17 +01:00

942 lines
31 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
import GlossaryPortalPanel from "../../components/GlossaryPortalPanel.astro";
import GlossaryPortalCta from "../../components/GlossaryPortalCta.astro";
import { getCollection } from "astro:content";
import {
buildGlossaryBySlug,
hrefOfGlossaryEntry,
} from "../../lib/glossary";
const entries = await getCollection("glossaire");
const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
const hrefOf = hrefOfGlossaryEntry;
const bySlug = buildGlossaryBySlug(entries);
function resolveOrderedEntries(slugs = []) {
return slugs
.map((slug) => bySlug.get(slug))
.filter(Boolean);
}
function uniqueBySlug(list = []) {
const seen = new Set();
const out = [];
for (const entry of list) {
const slug = slugOf(entry);
if (seen.has(slug)) continue;
seen.add(slug);
out.push(entry);
}
return out;
}
const archicratie = bySlug.get("archicratie");
const coreEntries = resolveOrderedEntries([
"archicratie",
"tension",
"arcalite",
"cratialite",
"archicration",
"co-viabilite",
]);
const displacementItems = [
{
title: "Du pouvoir visible vers larchitecture de régulation",
text:
"Lanalyse ne se limite plus aux acteurs qui gouvernent explicitement. Elle remonte vers les dispositifs, médiations et compositions qui rendent la régulation effective, durable ou opaque.",
},
{
title: "Du commandement vers la co-viabilité",
text:
"La question centrale nest plus seulement celle de lobéissance, de la décision ou de la souveraineté, mais celle de la tenue dun monde commun traversé de tensions multiples.",
},
{
title: "De linstitution isolée vers la triade archicratique",
text:
"Le paradigme pense les régulations comme compositions variables darcalité, de cratialité et darchicration, plutôt que comme blocs univoques déjà donnés.",
},
{
title: "De lefficacité à la comparution",
text:
"Une régulation ne vaut pas seulement par ses effets. Elle doit aussi pouvoir comparaître, être diagnostiquée, contestée, révisée et éventuellement réinstituée.",
},
];
const sceneEntries = resolveOrderedEntries([
"scene-depreuve",
"scene-darchicration",
"scene-manquante",
"scene-empechee",
"institution-invisible",
"monde-instituable",
"atopie",
"synchrotopie",
]);
const dynamicEntries = resolveOrderedEntries([
"archicratisation",
"desarchicration",
"autarchicration",
"autarchicratie",
"obliteration-archicratique",
"archicration-obliteree",
"hyperarcalite",
"hypercratialite",
]);
const methodEntries = resolveOrderedEntries([
"archicrate",
"figures-archicratiques",
"archicratique",
"desarchicratique",
"archicratistique",
"archidiagnostic",
]);
const typologyEntries = resolveOrderedEntries([
"meta-regime",
"meta-regime-archicratique",
"regime-de-co-viabilite",
"archeogenese",
"archicrations-differentielles-et-formes-hybrides",
"archicrations-proto-symboliques",
"archicrations-scripturo-normatives",
"archicrations-normativo-politiques",
"archicrations-marchandes",
"archicrations-techno-logistiques",
]);
const paradigmEntries = resolveOrderedEntries([
"gouvernementalite",
"domination-legale-rationnelle",
"cybernetique",
"democratie-deliberative",
"dissensus-politique",
"gouvernance-des-communs",
"agencement-machinique",
"technodiversite-et-cosmotechnie",
]);
const doctrineEntries = resolveOrderedEntries([
"decisionnisme-souverain",
"contractualisme-hobbesien",
"droit-naturel-et-propriete",
"volonte-generale",
]);
const tensionEntries = resolveOrderedEntries([
"subsistance-vivante-et-captation-capitalistique",
"travail-vivant-et-abstraction-de-la-valeur",
"egalisation-normative-et-differenciation-singuliere",
"liberte-daction-et-regimes-de-securite-algorithmique",
"visibilite-mediatique-et-reconnaissance-symbolique",
"regulation-technique-et-legitimation-democratique",
"souverainetes-territoriales-et-interdependances-globales",
"formes-de-vie-et-cadres-dhabitabilite",
"memoire-symbolique-et-instantaneite-computationnelle",
"coexistence-ontologique-et-necessite-regulatrice",
]);
const casIaEntries = resolveOrderedEntries([
"audit-archicratique",
"cartographie-des-scenes-manquantes",
"journal-de-justification",
"droit-au-differe-contradictoire",
"tribunal-de-lalgorithme",
"coupe-circuit-citoyen",
"visa-daffectation",
]);
const portalLinks = [
{
href: "/glossaire/concepts-fondamentaux/",
title: "Concepts fondamentaux",
text:
"Repartir du noyau minimal du paradigme : archicratie, tension, arcalité, cratialité, archicration et co-viabilité.",
},
{
href: "/glossaire/scenes-archicratiques/",
title: "Scènes archicratiques",
text:
"Explorer les formes de comparution, dépreuve, dempêchement et de réouverture de la régulation.",
},
{
href: "/glossaire/tensions-irreductibles/",
title: "Tensions irréductibles",
text:
"Revenir aux foyers structuraux de conflictualité à partir desquels larchicration devient nécessaire.",
},
{
href: "/glossaire/paradigmes/",
title: "Paradigmes et doctrines",
text:
"Situer le paradigme archicratique dans son paysage de comparaison théorique.",
},
{
href: "/glossaire/archicrations/",
title: "Archicrations",
text:
"Parcourir les grands méta-régimes de co-viabilité et leurs formes différentielles ou hybrides.",
},
];
const readingLinks = [
{
href: "/glossaire/concepts-fondamentaux/",
title: "Concepts fondamentaux",
text: "Revenir au noyau cardinal du système archicratique.",
},
{
href: "/glossaire/scenes-archicratiques/",
title: "Scènes archicratiques",
text:
"Prolonger la lecture du paradigme par la question des scènes de comparution.",
},
{
href: "/glossaire/paradigmes/",
title: "Paradigmes et doctrines",
text:
"Retrouver les grandes traditions intellectuelles mises en dialogue avec larchicratie.",
},
{
href: "/glossaire/index-complet/",
title: "Index complet",
text:
"Reparcourir lensemble du glossaire dans lordre alphabétique.",
},
];
const aliases = archicratie?.data?.aliases ?? [];
const comparisonTraditions = archicratie?.data?.comparisonTraditions ?? [];
const internalCount = uniqueBySlug([
...sceneEntries,
...dynamicEntries,
...methodEntries,
]).length;
const constellationCount = uniqueBySlug([
...typologyEntries,
...paradigmEntries,
...doctrineEntries,
]).length;
const tensionCount = tensionEntries.length;
const translationCount = casIaEntries.length;
const featuredParadigmCount = paradigmEntries.length;
const featuredDoctrineCount = doctrineEntries.length;
const pageItems = [
{ href: "#coeur-de-paradigme", label: "Cœur de paradigme" },
{ href: "#ce-que-deplace-le-paradigme", label: "Ce que déplace le paradigme" },
{ href: "#noyau-conceptuel", label: "Noyau conceptuel" },
{ href: "#architecture-interne", label: "Architecture interne" },
{ href: "#constellation-theorique", label: "Constellation théorique" },
{ href: "#tensions-irreductibles", label: "Tensions irréductibles" },
{ href: "#traductions-et-prolongements", label: "Traductions et prolongements" },
{ href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
];
const usefulLinks = [
{ href: "/glossaire/archicratie/", label: "Archicratie" },
{ href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" },
{ href: "/glossaire/scenes-archicratiques/", label: "Scènes archicratiques" },
{ href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
{ href: "/glossaire/index-complet/", label: "Index complet" },
];
---
<GlossaryLayout
title="Paradigme archicratique"
version="1.0"
stickyMode="glossary-portal"
>
<Fragment slot="aside">
<GlossaryPortalAside
ariaLabel="Navigation du paradigme archicratique"
title="Paradigme archicratique"
meta="Portail central du glossaire"
pageItems={pageItems}
usefulLinks={usefulLinks}
/>
</Fragment>
<section class="pa-page">
<GlossaryPortalHero
prefix="pa"
kicker="Parcours du glossaire"
title="Paradigme archicratique"
intro="Le paradigme archicratique propose dintelligibiliser les sociétés humaines à partir de leurs architectures de régulation : non pas seulement à partir du gouvernement visible, du droit positif, du marché ou de la souveraineté, mais à partir de la manière dont un ordre collectif se fonde, seffectue, se met en scène, se ferme, sexpose ou se réouvre."
moreParagraphs={[
"Il ne réduit donc jamais la régulation à une seule logique. Il cherche au contraire à penser ensemble les prises de fondation, les chaînes deffectuation, les scènes de comparution, les dynamiques de fermeture ou doblitération et les conditions de la co-viabilité dun monde commun.",
"Cette page sert de portail de synthèse. Elle organise une vue densemble du système archicratique : son noyau conceptuel, son architecture interne, ses formes typologiques, ses comparaisons théoriques, ses tensions irréductibles et ses traductions contemporaines, notamment dans le cas des systèmes dIA.",
]}
introMaxWidth="72ch"
followIntroMaxWidth="68ch"
moreMaxHeight="28rem"
/>
<GlossaryPortalSection
id="coeur-de-paradigme"
title="Cœur de paradigme"
intro="Cette page prend pour pivot la notion dArchicratie, entendue comme méta-régime de régulation par lequel les sociétés organisent la co-viabilité de leurs dynamiques internes à travers des compositions variables darcalité, de cratialité et darchicration."
>
{archicratie ? (
<article class="pa-focus-card">
<div class="pa-focus-card__eyebrow">Entrée principale</div>
<h3>
<a href={hrefOf(archicratie)}>{archicratie.data.term}</a>
</h3>
<p class="pa-focus-card__def">{archicratie.data.definitionShort}</p>
{(aliases.length > 0 || comparisonTraditions.length > 0) && (
<div class="pa-focus-card__meta">
{aliases.length > 0 && (
<p>
<strong>Alias :</strong> {aliases.join(" / ")}
</p>
)}
{comparisonTraditions.length > 0 && (
<p>
<strong>Traditions de comparaison :</strong> {comparisonTraditions.join(" / ")}
</p>
)}
</div>
)}
</article>
) : (
<p class="pa-empty">
La fiche principale nest pas encore disponible dans la collection.
</p>
)}
</GlossaryPortalSection>
<GlossaryPortalSection
id="ce-que-deplace-le-paradigme"
title="Ce que déplace le paradigme"
count={`${displacementItems.length} déplacement${displacementItems.length > 1 ? "s" : ""}`}
intro="Le paradigme archicratique ne vient pas simplement ajouter un terme de plus au vocabulaire politique. Il déplace le centre de gravité de lanalyse en réorientant la manière même de poser la question de lordre, de la régulation et de leur mise à lépreuve."
>
<div class="pa-cards">
{displacementItems.map((item) => (
<article class="pa-note-card">
<strong>{item.title}</strong>
<span>{item.text}</span>
</article>
))}
</div>
</GlossaryPortalSection>
{coreEntries.length > 0 && (
<GlossaryPortalSection
id="noyau-conceptuel"
title="Noyau conceptuel"
count={`${coreEntries.length} notion${coreEntries.length > 1 ? "s" : ""}`}
intro="Le paradigme archicratique ne se laisse pas réduire à une notion unique. Il repose sur un noyau de concepts co-dépendants qui permettent de penser ensemble les fondements de lordre, ses chaînes deffectuation, ses scènes de comparution et les conditions de sa tenue co-viable."
>
<div class="pa-cards">
{coreEntries.map((entry) => (
<a class="pa-card" href={hrefOf(entry)}>
<strong>{entry.data.term}</strong>
<span>{entry.data.definitionShort}</span>
{(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
<small>
Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
</small>
)}
</a>
))}
</div>
</GlossaryPortalSection>
)}
{(sceneEntries.length > 0 || dynamicEntries.length > 0 || methodEntries.length > 0) && (
<GlossaryPortalSection
id="architecture-interne"
title="Architecture interne"
count={`${internalCount} entrée${internalCount > 1 ? "s" : ""}`}
intro="Le paradigme ne se réduit pas à un noyau abstrait. Il déploie une architecture interne faite de scènes, de topologies, de dynamiques, de pathologies, de figures et dopérateurs méthodologiques."
>
{sceneEntries.length > 0 && (
<GlossaryPortalPanel
id="scenes-topologies-et-instituabilite"
title="Scènes, topologies et instituabilité"
count={`${sceneEntries.length} entrée${sceneEntries.length > 1 ? "s" : ""}`}
intro="Le paradigme archicratique ne pense pas seulement ce qui régule, mais aussi les lieux, les formats et les conditions par lesquels cette régulation peut comparaître ou se dérober."
surface={true}
className="pa-block"
>
<div class="pa-cards">
{sceneEntries.map((entry) => (
<a class="pa-card" href={hrefOf(entry)}>
<strong>{entry.data.term}</strong>
<span>{entry.data.definitionShort}</span>
{(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
<small>
Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
</small>
)}
</a>
))}
</div>
</GlossaryPortalPanel>
)}
{dynamicEntries.length > 0 && (
<GlossaryPortalPanel
id="dynamiques-et-pathologies"
title="Dynamiques et pathologies"
count={`${dynamicEntries.length} entrée${dynamicEntries.length > 1 ? "s" : ""}`}
intro="Toute architecture de régulation se transforme, se ferme, se dégrade ou se réouvre. Le paradigme ne décrit donc pas seulement des formes, mais aussi leurs trajectoires."
surface={true}
className="pa-block"
>
<div class="pa-cards">
{dynamicEntries.map((entry) => (
<a class="pa-card" href={hrefOf(entry)}>
<strong>{entry.data.term}</strong>
<span>{entry.data.definitionShort}</span>
</a>
))}
</div>
</GlossaryPortalPanel>
)}
{methodEntries.length > 0 && (
<GlossaryPortalPanel
id="figures-et-operateurs-methodologiques"
title="Figures et opérateurs méthodologiques"
count={`${methodEntries.length} entrée${methodEntries.length > 1 ? "s" : ""}`}
intro="Le paradigme suppose enfin des figures, des qualifications et des instruments danalyse capables de rendre la régulation lisible, diagnosable, cartographiable et politiquement adressable."
surface={true}
className="pa-block"
>
<div class="pa-cards">
{methodEntries.map((entry) => (
<a class="pa-card" href={hrefOf(entry)}>
<strong>{entry.data.term}</strong>
<span>{entry.data.definitionShort}</span>
</a>
))}
</div>
</GlossaryPortalPanel>
)}
</GlossaryPortalSection>
)}
{(typologyEntries.length > 0 || paradigmEntries.length > 0 || doctrineEntries.length > 0) && (
<GlossaryPortalSection
id="constellation-theorique"
title="Constellation théorique"
count={`${constellationCount} entrée${constellationCount > 1 ? "s" : ""}`}
intro="Le paradigme archicratique souvre vers une constellation plus large : typologie des régimes de co-viabilité, traditions concurrentes ou complémentaires et doctrines fondatrices à partir desquelles ses déplacements deviennent plus nettement comparables."
>
<div class="pa-theory-hub">
<div class="pa-theory-hub__top">
<div class="pa-theory-hub__head">
<div class="pa-theory-hub__eyebrow">Volet théorique dédié</div>
<h3>Panorama théorique complet</h3>
</div>
<span class="pa-theory-hub__count">
{constellationCount} entrée{constellationCount > 1 ? "s" : ""}
</span>
</div>
<p class="pa-theory-hub__intro">
Ici, le portail-mère ne retient quun ensemble resserré de repères
structurants. La cartographie théorique exhaustive est déployée
dans une page dédiée, distincte du parcours central.
</p>
<div class="pa-theory-hub__toolbar">
<div
class="pa-theory-hub__chips"
aria-label="Accès rapide aux sous-sections théoriques"
>
<a class="pa-chip pa-chip--link" href="#typologie-des-regimes-de-co-viabilite">
{typologyEntries.length} repère{typologyEntries.length > 1 ? "s" : ""} typologique{typologyEntries.length > 1 ? "s" : ""}
</a>
<a class="pa-chip pa-chip--link" href="#paradigmes-mobilises">
{featuredParadigmCount} paradigme{featuredParadigmCount > 1 ? "s" : ""} mis en avant
</a>
<a class="pa-chip pa-chip--link" href="#doctrines-fondatrices">
{featuredDoctrineCount} doctrine{featuredDoctrineCount > 1 ? "s" : ""} mise{featuredDoctrineCount > 1 ? "s" : ""} en avant
</a>
</div>
<GlossaryPortalCta
href="/glossaire/paradigmes/"
label="Ouvrir la cartographie théorique"
className="pa-theory-hub__cta"
/>
</div>
</div>
{typologyEntries.length > 0 && (
<GlossaryPortalPanel
id="typologie-des-regimes-de-co-viabilite"
title="Typologie des régimes de co-viabilité"
count={`${typologyEntries.length} entrée${typologyEntries.length > 1 ? "s" : ""}`}
intro="Le paradigme ne vaut pas seulement comme noyau conceptuel. Il souvre aussi sur une typologie des formes de régulation et sur les grandes matrices à partir desquelles les sociétés organisent leur tenue collective."
surface={true}
className="pa-block"
>
<div class="pa-cards">
{typologyEntries.map((entry) => (
<a class="pa-card" href={hrefOf(entry)}>
<strong>{entry.data.term}</strong>
<span>{entry.data.definitionShort}</span>
</a>
))}
</div>
</GlossaryPortalPanel>
)}
{paradigmEntries.length > 0 && (
<GlossaryPortalPanel
id="paradigmes-mobilises"
title="Paradigmes mobilisés"
count={`${featuredParadigmCount} repère${featuredParadigmCount > 1 ? "s" : ""} mis en avant`}
intro="Larchicratie ne sélabore pas dans un vide théorique. Elle dialogue avec plusieurs paradigmes qui éclairent ses voisinages, ses contrastes et ses points dappui. Le portail central en retient ici quelques-uns, choisis pour leur portée comparative."
surface={true}
className="pa-block"
>
<div class="pa-cards">
{paradigmEntries.map((entry) => (
<a class="pa-card" href={hrefOf(entry)}>
<strong>{entry.data.term}</strong>
<span>{entry.data.definitionShort}</span>
{(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
<small>
Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
</small>
)}
</a>
))}
</div>
</GlossaryPortalPanel>
)}
{doctrineEntries.length > 0 && (
<GlossaryPortalPanel
id="doctrines-fondatrices"
title="Doctrines fondatrices"
count={`${featuredDoctrineCount} repère${featuredDoctrineCount > 1 ? "s" : ""} mis en avant`}
intro="Certaines doctrines classiques continuent de servir de contrepoints ou de points de départ obligés. Le paradigme archicratique les reprend, les déplace et les resitue dans une écologie plus large de la régulation."
surface={true}
className="pa-block"
>
<div class="pa-cards">
{doctrineEntries.map((entry) => (
<a class="pa-card" href={hrefOf(entry)}>
<strong>{entry.data.term}</strong>
<span>{entry.data.definitionShort}</span>
{(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
<small>
Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
</small>
)}
</a>
))}
</div>
</GlossaryPortalPanel>
)}
</GlossaryPortalSection>
)}
{tensionEntries.length > 0 && (
<GlossaryPortalSection
id="tensions-irreductibles"
title="Tensions irréductibles"
count={`${tensionCount} tension${tensionCount > 1 ? "s" : ""}`}
intro="Le paradigme archicratique ne pense pas la régulation comme suppression des contradictions, mais comme organisation de tensions durables, souvent irréductibles, à partir desquelles la co-viabilité devient nécessaire."
>
<div class="pa-cards">
{tensionEntries.map((entry) => (
<a class="pa-card" href={hrefOf(entry)}>
<strong>{entry.data.term}</strong>
<span>{entry.data.definitionShort}</span>
</a>
))}
</div>
</GlossaryPortalSection>
)}
{(casIaEntries.length > 0 || portalLinks.length > 0) && (
<GlossaryPortalSection
id="traductions-et-prolongements"
title="Traductions et prolongements"
count={`${translationCount} dispositif${translationCount > 1 ? "s" : ""}`}
intro="Lun des intérêts majeurs du paradigme archicratique est de permettre des traductions institutionnelles concrètes. Dans le cas des systèmes dIA, il donne lieu à des dispositifs destinés à rouvrir les chaînes de décision, documenter les justifications et reconstruire de véritables scènes de comparution."
>
{casIaEntries.length > 0 && (
<GlossaryPortalPanel
id="traduction-contemporaine-cas-ia"
title="Traduction contemporaine : Cas IA"
count={`${casIaEntries.length} dispositif${casIaEntries.length > 1 ? "s" : ""}`}
surface={true}
className="pa-block"
>
<div class="pa-cards">
{casIaEntries.map((entry) => (
<a class="pa-card" href={hrefOf(entry)}>
<strong>{entry.data.term}</strong>
<span>{entry.data.definitionShort}</span>
</a>
))}
</div>
</GlossaryPortalPanel>
)}
{portalLinks.length > 0 && (
<GlossaryPortalPanel
id="portails-voisins-deja-stabilises"
title="Portails voisins déjà stabilisés"
count={`${portalLinks.length} portail${portalLinks.length > 1 ? "s" : ""}`}
surface={true}
className="pa-block"
>
<div class="pa-cards">
{portalLinks.map((item) => (
<a class="pa-card" href={item.href}>
<strong>{item.title}</strong>
<span>{item.text}</span>
</a>
))}
</div>
</GlossaryPortalPanel>
)}
</GlossaryPortalSection>
)}
<GlossaryPortalSection
id="prolonger-la-lecture"
title="Prolonger la lecture"
intro="Cette page a vocation à servir de portail-mère du glossaire. Elle oriente vers les autres parcours déjà stabilisés sans se substituer aux fiches détaillées ni aux pages thématiques spécialisées."
>
<div class="pa-cards">
{readingLinks.map((item) => (
<a class="pa-card" href={item.href}>
<strong>{item.title}</strong>
<span>{item.text}</span>
</a>
))}
</div>
</GlossaryPortalSection>
<GlossaryPortalSection
id="portee-densemble"
title="Portée densemble"
final={true}
>
<p>
Le paradigme archicratique ne demande pas seulement <em>qui gouverne</em>.
Il demande par quelles architectures un ordre collectif tient, se
transforme, se dispute, soblitère ou se réouvre. En articulant
<a href="/glossaire/arcalite/">fondation</a>,
<a href="/glossaire/cratialite/"> effectuation</a>,
<a href="/glossaire/archicration/"> exposition régulatrice</a>,
<a href="/glossaire/tension/"> tension</a> et
<a href="/glossaire/co-viabilite/"> co-viabilité</a>, il permet de
penser des mondes où la régulation nest ni purement souveraine, ni
seulement technique, ni simplement opaque, mais toujours susceptible
dêtre comprise, diagnostiquée, mise à lépreuve et réinstituée.
</p>
</GlossaryPortalSection>
</section>
<GlossaryPortalStickySync
heroMoreId="pa-hero-more"
heroToggleId="pa-hero-toggle"
/>
</GlossaryLayout>
<style>
.pa-page{
padding: 8px 0 24px;
}
.pa-focus-card{
margin-top: 14px;
padding: 18px 20px;
border: 1px solid rgba(127,127,127,0.22);
border-radius: 18px;
background: rgba(127,127,127,0.05);
}
.pa-focus-card__eyebrow{
margin-bottom: 10px;
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .72;
}
.pa-focus-card h3{
margin: 0 0 10px;
font-size: clamp(1.35rem, 2vw, 1.7rem);
line-height: 1.15;
}
.pa-focus-card h3 a{
text-decoration: none;
}
.pa-focus-card__def{
margin: 0;
font-size: 1rem;
line-height: 1.55;
opacity: .95;
}
.pa-focus-card__meta{
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(127,127,127,0.18);
}
.pa-focus-card__meta p{
margin: 0;
font-size: 13px;
line-height: 1.5;
opacity: .9;
}
.pa-focus-card__meta p + p{
margin-top: 6px;
}
.pa-block{
margin-top: 18px;
}
.pa-cards{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
margin-top: 14px;
}
.pa-card,
.pa-note-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);
}
.pa-card{
text-decoration: none;
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.pa-card:hover{
transform: translateY(-1px);
background: rgba(127,127,127,0.08);
border-color: rgba(0,217,255,0.16);
text-decoration: none;
}
.pa-card strong,
.pa-note-card strong{
font-size: 15px;
line-height: 1.3;
}
.pa-card span,
.pa-note-card span{
font-size: 14px;
line-height: 1.45;
opacity: .92;
}
.pa-card small{
font-size: 12px;
line-height: 1.4;
opacity: .72;
}
.pa-empty{
margin: 0;
font-style: italic;
opacity: .82;
}
.pa-theory-hub{
display: grid;
gap: 12px;
margin-top: 14px;
padding: 18px 20px;
border: 1px solid rgba(127,127,127,0.20);
border-radius: 22px;
background:
linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.04)),
radial-gradient(700px 180px at 12% 0%, rgba(0,217,255,0.06), transparent 62%),
rgba(127,127,127,0.04);
}
.pa-theory-hub__top{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.pa-theory-hub__head{
display: grid;
gap: 6px;
}
.pa-theory-hub__eyebrow{
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .72;
}
.pa-theory-hub h3{
margin: 0;
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
line-height: 1.2;
}
.pa-theory-hub__count{
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 11px;
border: 1px solid rgba(127,127,127,0.22);
border-radius: 999px;
background: rgba(127,127,127,0.04);
font-size: 12px;
line-height: 1.2;
opacity: .82;
white-space: nowrap;
}
.pa-theory-hub__intro{
margin: 0;
max-width: 78ch;
font-size: 14px;
line-height: 1.55;
opacity: .94;
}
.pa-theory-hub__toolbar{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.pa-theory-hub__chips{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pa-chip{
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 11px;
border: 1px solid rgba(127,127,127,0.22);
border-radius: 999px;
background: rgba(127,127,127,0.05);
font-size: 12px;
line-height: 1.2;
opacity: .9;
white-space: nowrap;
}
.pa-chip--link{
text-decoration: none;
transition:
transform 120ms ease,
border-color 120ms ease,
background 120ms ease,
opacity 120ms ease;
}
.pa-chip--link:hover{
transform: translateY(-1px);
border-color: rgba(0,217,255,0.22);
background: rgba(0,217,255,0.06);
opacity: 1;
text-decoration: none;
}
.pa-chip--link:focus-visible{
outline: 2px solid rgba(0,217,255,0.28);
outline-offset: 3px;
}
.pa-theory-hub__cta{
flex: 0 0 auto;
}
@media (max-width: 900px){
.pa-theory-hub__toolbar{
align-items: stretch;
}
.pa-theory-hub__cta{
width: 100%;
}
}
@media (max-width: 720px){
.pa-theory-hub{
padding: 16px;
border-radius: 18px;
}
}
@media (prefers-color-scheme: dark){
.pa-focus-card,
.pa-card,
.pa-note-card{
background: rgba(255,255,255,0.04);
}
.pa-theory-hub{
background:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
radial-gradient(700px 180px at 12% 0%, rgba(0,217,255,0.08), transparent 62%),
rgba(255,255,255,0.025);
}
.pa-chip{
background: rgba(255,255,255,0.04);
}
.pa-card:hover{
background: rgba(255,255,255,0.07);
}
.pa-chip--link:hover{
background: rgba(0,217,255,0.08);
}
}
</style>