feat(glossaire): refine portal pages and contextual asides
This commit is contained in:
205
src/components/GlossaryHomeAside.astro
Normal file
205
src/components/GlossaryHomeAside.astro
Normal file
@@ -0,0 +1,205 @@
|
||||
---
|
||||
const {
|
||||
allEntries = [],
|
||||
} = Astro.props;
|
||||
|
||||
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(allEntries.map((entry) => [slugOf(entry), entry]));
|
||||
|
||||
function sortByTerm(list = []) {
|
||||
return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
|
||||
}
|
||||
|
||||
function familyOf(entry) {
|
||||
const explicit = entry?.data?.family;
|
||||
if (explicit) return explicit;
|
||||
|
||||
const slug = slugOf(entry);
|
||||
const kind = entry?.data?.kind;
|
||||
|
||||
if (kind === "paradigme") return "paradigme";
|
||||
if (kind === "doctrine") return "doctrine";
|
||||
if (kind === "verbe") return "verbe";
|
||||
|
||||
if (slug === "scene-depreuve") return "scene";
|
||||
if (slug === "autarchicratie") return "pathologie";
|
||||
if (slug === "obliteration-archicratique") return "dynamique";
|
||||
|
||||
if (
|
||||
[
|
||||
"archicratie",
|
||||
"arcalite",
|
||||
"cratialite",
|
||||
"archicration",
|
||||
"co-viabilite",
|
||||
"tension",
|
||||
].includes(slug)
|
||||
) {
|
||||
return "concept-fondamental";
|
||||
}
|
||||
|
||||
if (slug === "archicrations-differentielles-et-formes-hybrides") {
|
||||
return "topologie";
|
||||
}
|
||||
|
||||
if (kind === "topologie" && slug.startsWith("archicrations-")) {
|
||||
return "meta-regime";
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
const fondamentauxWanted = [
|
||||
"archicratie",
|
||||
"arcalite",
|
||||
"cratialite",
|
||||
"archicration",
|
||||
"co-viabilite",
|
||||
"tension",
|
||||
];
|
||||
|
||||
const fondamentaux = sortByTerm(
|
||||
fondamentauxWanted
|
||||
.map((slug) => bySlug.get(slug))
|
||||
.filter(Boolean)
|
||||
);
|
||||
|
||||
const totalEntries = allEntries.length;
|
||||
const paradigmesCount = allEntries.filter((entry) => entry.data.kind === "paradigme").length;
|
||||
const doctrinesCount = allEntries.filter((entry) => entry.data.kind === "doctrine").length;
|
||||
const metaRegimesCount = allEntries.filter((entry) => familyOf(entry) === "meta-regime").length;
|
||||
|
||||
const portalLinks = [
|
||||
{ href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" },
|
||||
{ href: "/glossaire/scenes-archicratiques/", label: "Scènes archicratiques" },
|
||||
{ href: "/glossaire/dynamiques-archicratiques/", label: "Dynamiques archicratiques" },
|
||||
{ href: "/glossaire/tensions-irreductibles/", label: "Tensions irréductibles" },
|
||||
{ href: "/glossaire/archicrations/", label: "Méta-régimes archicratiques" },
|
||||
{ href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
|
||||
{ href: "/glossaire/index-complet/", label: "Index complet" },
|
||||
];
|
||||
---
|
||||
|
||||
<nav class="glossary-home-aside" aria-label="Navigation du portail du glossaire">
|
||||
<div class="glossary-home-aside__block glossary-home-aside__block--intro">
|
||||
<div class="glossary-home-aside__title">Glossaire archicratique</div>
|
||||
<div class="glossary-home-aside__meta">
|
||||
portail de lecture · cartographie conceptuelle
|
||||
</div>
|
||||
|
||||
<div class="glossary-home-aside__pills" aria-label="Repères de navigation">
|
||||
<span class="glossary-home-aside__pill">{totalEntries} entrées</span>
|
||||
<span class="glossary-home-aside__pill">{metaRegimesCount} méta-régimes</span>
|
||||
<span class="glossary-home-aside__pill">
|
||||
{doctrinesCount} doctrine{doctrinesCount > 1 ? "s" : ""} · {paradigmesCount} paradigme{paradigmesCount > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="glossary-home-aside__block">
|
||||
<h2 class="glossary-home-aside__heading">Parcours du glossaire</h2>
|
||||
<ul class="glossary-home-aside__list">
|
||||
{portalLinks.map((item) => (
|
||||
<li><a href={item.href}>{item.label}</a></li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{fondamentaux.length > 0 && (
|
||||
<section class="glossary-home-aside__block">
|
||||
<h2 class="glossary-home-aside__heading">Noyau archicratique</h2>
|
||||
<ul class="glossary-home-aside__list">
|
||||
{fondamentaux.map((entry) => (
|
||||
<li><a href={hrefOf(entry)}>{entry.data.term}</a></li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.glossary-home-aside{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__block{
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
.glossary-home-aside__block--intro{
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__title{
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .2px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.glossary-home-aside__meta{
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
opacity: .78;
|
||||
}
|
||||
|
||||
.glossary-home-aside__pills{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__pill{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 9px;
|
||||
border: 1px solid rgba(127,127,127,0.24);
|
||||
border-radius: 999px;
|
||||
background: rgba(127,127,127,0.04);
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.glossary-home-aside__heading{
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.glossary-home-aside__list{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.glossary-home-aside__list li{
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.glossary-home-aside__list a{
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
.glossary-home-aside__block,
|
||||
.glossary-home-aside__pill{
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
676
src/pages/glossaire/concepts-fondamentaux.astro
Normal file
676
src/pages/glossaire/concepts-fondamentaux.astro
Normal file
@@ -0,0 +1,676 @@
|
||||
---
|
||||
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 bySlug = new Map(entries.map((entry) => [slugOf(entry), entry]));
|
||||
|
||||
const orderedSlugs = [
|
||||
"arcalite",
|
||||
"cratialite",
|
||||
"tension",
|
||||
"archicration",
|
||||
"co-viabilite",
|
||||
"archicratie",
|
||||
];
|
||||
|
||||
const concepts = orderedSlugs
|
||||
.map((slug) => bySlug.get(slug))
|
||||
.filter(Boolean);
|
||||
|
||||
const arcalite = bySlug.get("arcalite");
|
||||
const cratialite = bySlug.get("cratialite");
|
||||
const tension = bySlug.get("tension");
|
||||
const archicration = bySlug.get("archicration");
|
||||
const coViabilite = bySlug.get("co-viabilite");
|
||||
const archicratie = bySlug.get("archicratie");
|
||||
|
||||
const comparisonCards = [
|
||||
{
|
||||
title: "Arcalité / Cratialité",
|
||||
text:
|
||||
"L’arcalité désigne le vecteur de fondation, de cadrage et de légitimation ; la cratialité désigne le vecteur opératoire, transformateur et effectif. L’archicratie ne se comprend qu’à partir de leur coprésence tensionnelle.",
|
||||
},
|
||||
{
|
||||
title: "Archicration / Archicratie",
|
||||
text:
|
||||
"L’archicration est l’opérateur régulateur qui met en forme, distribue et rend révisables les tensions ; l’archicratie est le méta-régime d’ensemble qui résulte de la composition durable entre arcalité, cratialité et archicration.",
|
||||
},
|
||||
{
|
||||
title: "Co-viabilité / simple stabilité",
|
||||
text:
|
||||
"La co-viabilité ne renvoie pas à une immobilité ni à un équilibre figé. Elle désigne la capacité d’un ordre collectif à tenir dans la durée en rendant compatibles des tensions qui ne disparaissent pas.",
|
||||
},
|
||||
];
|
||||
|
||||
const readingSteps = [
|
||||
{
|
||||
num: "01",
|
||||
title: "Commencer par les deux vecteurs premiers",
|
||||
text:
|
||||
"Entrer par l’arcalité et la cratialité pour comprendre que toute régulation articule à la fois des forces de cadrage et des forces d’effectuation.",
|
||||
},
|
||||
{
|
||||
num: "02",
|
||||
title: "Comprendre la tension comme phénomène général",
|
||||
text:
|
||||
"La tension n’est pas un accident local mais la condition ordinaire de coexistence entre dynamiques hétérogènes.",
|
||||
},
|
||||
{
|
||||
num: "03",
|
||||
title: "Saisir le rôle de l’archicration",
|
||||
text:
|
||||
"L’archicration désigne l’opérateur par lequel les tensions sont exposées, distribuées, arbitrées ou rendues révisables.",
|
||||
},
|
||||
{
|
||||
num: "04",
|
||||
title: "Aboutir à la co-viabilité",
|
||||
text:
|
||||
"La co-viabilité permet de penser la tenue d’un collectif sans supprimer la pluralité des tensions qui le traversent.",
|
||||
},
|
||||
{
|
||||
num: "05",
|
||||
title: "Revenir à l’archicratie",
|
||||
text:
|
||||
"L’archicratie nomme alors le régime général dans lequel cette composition devient lisible comme structure de régulation.",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<GlossaryLayout
|
||||
title="Concepts fondamentaux"
|
||||
version="1.0"
|
||||
>
|
||||
<Fragment slot="aside">
|
||||
<nav class="cf-aside" aria-label="Navigation des concepts fondamentaux">
|
||||
<div class="cf-aside__block">
|
||||
<a class="cf-aside__back" href="/glossaire/">← Retour au glossaire</a>
|
||||
<div class="cf-aside__title">Concepts fondamentaux</div>
|
||||
<div class="cf-aside__meta">
|
||||
{concepts.length} notion{concepts.length > 1 ? "s" : ""} cardinale{concepts.length > 1 ? "s" : ""}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cf-aside__block">
|
||||
<h2 class="cf-aside__heading">Dans cette page</h2>
|
||||
<ul class="cf-aside__list">
|
||||
<li><a href="#grammaire-minimale">Grammaire minimale du système</a></li>
|
||||
<li><a href="#six-concepts">Les six concepts cardinaux</a></li>
|
||||
<li><a href="#distinctions-decisives">Distinctions décisives</a></li>
|
||||
<li><a href="#ordre-lecture">Ordre conseillé de lecture</a></li>
|
||||
<li><a href="#prolonger-lecture">Prolonger la lecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="cf-aside__block">
|
||||
<h2 class="cf-aside__heading">Renvois utiles</h2>
|
||||
<ul class="cf-aside__list">
|
||||
<li><a href="/glossaire/scenes-archicratiques/">Scènes archicratiques</a></li>
|
||||
<li><a href="/glossaire/dynamiques-archicratiques/">Dynamiques archicratiques</a></li>
|
||||
<li><a href="/glossaire/archicrations/">Méta-régimes archicratiques</a></li>
|
||||
<li><a href="/glossaire/paradigmes/">Paradigmes et doctrines</a></li>
|
||||
<li><a href="/glossaire/index-complet/">Index complet</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</Fragment>
|
||||
|
||||
<section class="cf-page">
|
||||
<div class="cf-hero">
|
||||
<p class="cf-kicker">Portail du glossaire</p>
|
||||
<h1>Concepts fondamentaux</h1>
|
||||
<p class="cf-intro">
|
||||
Cette page rassemble la grammaire minimale de l’archicratie. Elle ne
|
||||
remplace pas les fiches détaillées, mais elle en organise la lecture en
|
||||
montrant comment les six notions cardinales se répondent, se distinguent
|
||||
et composent ensemble un même système.
|
||||
</p>
|
||||
<p class="cf-intro">
|
||||
Ces concepts ne valent pas comme unités isolées. Ils forment un noyau de
|
||||
lecture à partir duquel peuvent ensuite se comprendre les scènes
|
||||
archicratiques, les dynamiques, les tensions et les méta-régimes de
|
||||
co-viabilité.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="cf-section">
|
||||
<div class="cf-section__head">
|
||||
<h2 id="grammaire-minimale">Grammaire minimale du système</h2>
|
||||
</div>
|
||||
|
||||
<p class="cf-section__intro">
|
||||
La lecture la plus ramassée du paradigme archicratique peut se formuler
|
||||
comme une chaîne de composition : deux vecteurs premiers entrent en
|
||||
tension, cette tension appelle un opérateur régulateur, cet opérateur
|
||||
vise une co-viabilité, et cette composition prend la forme générale
|
||||
d’une archicratie.
|
||||
</p>
|
||||
|
||||
<div class="cf-map" aria-label="Carte des concepts fondamentaux">
|
||||
<div class="cf-map__stage">
|
||||
<div class="cf-map__title">Vecteurs premiers</div>
|
||||
<div class="cf-map__roots">
|
||||
{arcalite ? (
|
||||
<a class="cf-node" href={hrefOf(arcalite)}>ARCALITÉ</a>
|
||||
) : (
|
||||
<span class="cf-node">ARCALITÉ</span>
|
||||
)}
|
||||
|
||||
{cratialite ? (
|
||||
<a class="cf-node" href={hrefOf(cratialite)}>CRATIALITÉ</a>
|
||||
) : (
|
||||
<span class="cf-node">CRATIALITÉ</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cf-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="cf-map__stage">
|
||||
<div class="cf-map__title">Phénomène transversal</div>
|
||||
{tension ? (
|
||||
<a class="cf-node cf-node--wide" href={hrefOf(tension)}>TENSION</a>
|
||||
) : (
|
||||
<span class="cf-node cf-node--wide">TENSION</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="cf-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="cf-map__stage">
|
||||
<div class="cf-map__title">Opérateur régulateur</div>
|
||||
{archicration ? (
|
||||
<a class="cf-node cf-node--wide" href={hrefOf(archicration)}>
|
||||
ARCHICRATION
|
||||
</a>
|
||||
) : (
|
||||
<span class="cf-node cf-node--wide">ARCHICRATION</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="cf-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="cf-map__stage">
|
||||
<div class="cf-map__title">Horizon de tenue</div>
|
||||
{coViabilite ? (
|
||||
<a class="cf-node cf-node--wide" href={hrefOf(coViabilite)}>
|
||||
CO-VIABILITÉ
|
||||
</a>
|
||||
) : (
|
||||
<span class="cf-node cf-node--wide">CO-VIABILITÉ</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="cf-map__arrow" aria-hidden="true">↓</div>
|
||||
|
||||
<div class="cf-map__stage">
|
||||
<div class="cf-map__title">Forme d’ensemble</div>
|
||||
{archicratie ? (
|
||||
<a class="cf-node cf-node--wide" href={hrefOf(archicratie)}>
|
||||
ARCHICRATIE
|
||||
</a>
|
||||
) : (
|
||||
<span class="cf-node cf-node--wide">ARCHICRATIE</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cf-section">
|
||||
<div class="cf-section__head">
|
||||
<h2 id="six-concepts">Les six concepts cardinaux</h2>
|
||||
<span class="cf-section__count">
|
||||
{concepts.length} fiche{concepts.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="cf-section__intro">
|
||||
Chaque fiche peut se lire séparément, mais leur intelligibilité augmente
|
||||
lorsqu’on les aborde comme un ensemble structuré.
|
||||
</p>
|
||||
|
||||
<div class="cf-cards">
|
||||
{concepts.map((entry) => (
|
||||
<a class="cf-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
|
||||
{entry.data.comparisonTraditions && (
|
||||
<small>
|
||||
Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
|
||||
</small>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cf-section">
|
||||
<div class="cf-section__head">
|
||||
<h2 id="distinctions-decisives">Distinctions décisives</h2>
|
||||
<span class="cf-section__count">
|
||||
{comparisonCards.length} distinction{comparisonCards.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="cf-section__intro">
|
||||
Ce portail ne sert pas seulement à regrouper des définitions : il doit
|
||||
aussi empêcher les confusions qui brouilleraient la lecture du système.
|
||||
</p>
|
||||
|
||||
<div class="cf-comparisons">
|
||||
{comparisonCards.map((item) => (
|
||||
<section class="cf-card cf-card--text">
|
||||
<strong>{item.title}</strong>
|
||||
<span>{item.text}</span>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cf-section">
|
||||
<div class="cf-section__head">
|
||||
<h2 id="ordre-lecture">Ordre conseillé de lecture</h2>
|
||||
<span class="cf-section__count">
|
||||
{readingSteps.length} étape{readingSteps.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="cf-section__intro">
|
||||
Pour un lecteur qui découvre l’architecture conceptuelle, cet ordre
|
||||
offre le chemin le plus clair.
|
||||
</p>
|
||||
|
||||
<div class="cf-steps">
|
||||
{readingSteps.map((step) => (
|
||||
<section class="cf-step">
|
||||
<div class="cf-step__num">{step.num}</div>
|
||||
<div class="cf-step__body">
|
||||
<h3>{step.title}</h3>
|
||||
<p>{step.text}</p>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cf-section">
|
||||
<div class="cf-section__head">
|
||||
<h2 id="prolonger-lecture">Prolonger la lecture</h2>
|
||||
</div>
|
||||
|
||||
<p class="cf-section__intro">
|
||||
Une fois cette grammaire minimale stabilisée, la lecture peut s’élargir
|
||||
vers les familles de méta-régimes, les paradigmes de comparaison, les
|
||||
dynamiques archicratiques et l’index complet.
|
||||
</p>
|
||||
|
||||
<div class="cf-cards">
|
||||
<a class="cf-card" href="/glossaire/scenes-archicratiques/">
|
||||
<strong>Scènes archicratiques</strong>
|
||||
<span>
|
||||
Comprendre où les tensions deviennent visibles, discutables et
|
||||
révisables.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="cf-card" href="/glossaire/dynamiques-archicratiques/">
|
||||
<strong>Dynamiques archicratiques</strong>
|
||||
<span>
|
||||
Explorer les processus de déplacement, d’oblitération et de
|
||||
pathologisation de la régulation.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="cf-card" href="/glossaire/archicrations/">
|
||||
<strong>Méta-régimes archicratiques</strong>
|
||||
<span>
|
||||
Parcourir les grandes formes de co-viabilité et leurs modulations
|
||||
historiques.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="cf-card" href="/glossaire/paradigmes/">
|
||||
<strong>Paradigmes et doctrines</strong>
|
||||
<span>
|
||||
Situer l’archicratie dans le paysage théorique avec lequel elle
|
||||
dialogue.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="cf-card" href="/glossaire/index-complet/">
|
||||
<strong>Index complet</strong>
|
||||
<span>
|
||||
Retrouver l’ensemble des entrées du glossaire dans une navigation
|
||||
alphabétique intégrale.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cf-section cf-section--final">
|
||||
<h2>Portée d’ensemble</h2>
|
||||
<p>
|
||||
Lire ces concepts ensemble permet de comprendre que l’
|
||||
<a href="/glossaire/archicratie/">archicratie</a> n’est pas une notion
|
||||
isolée, mais une intelligibilité d’ensemble de la régulation collective.
|
||||
Les six concepts fondamentaux forment ainsi le noyau à partir duquel
|
||||
deviennent lisibles la
|
||||
<a href="/glossaire/scene-depreuve/">scène d’épreuve</a>, l’
|
||||
<a href="/glossaire/archicration/">archicration</a>, la
|
||||
<a href="/glossaire/co-viabilite/">co-viabilité</a> et, plus largement,
|
||||
les différentes formes historiques de co-viabilité.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
.cf-page{
|
||||
padding: 8px 0 24px;
|
||||
}
|
||||
|
||||
.cf-hero{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cf-kicker{
|
||||
font-size: 12px;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
opacity: .72;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cf-intro{
|
||||
max-width: 76ch;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.cf-section{
|
||||
margin-top: 34px;
|
||||
scroll-margin-top: calc(var(--sticky-offset) + 75px);
|
||||
}
|
||||
|
||||
.cf-section h2{
|
||||
scroll-margin-top: calc(var(--sticky-offset) + 75px);
|
||||
}
|
||||
|
||||
.cf-section__head{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cf-section__count{
|
||||
font-size: 13px;
|
||||
opacity: .72;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cf-section__intro{
|
||||
max-width: 78ch;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.cf-map{
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
padding: 16px 18px 18px;
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 18px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
.cf-map__stage{
|
||||
width: min(580px, 100%);
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cf-map__title{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.25;
|
||||
font-weight: 800;
|
||||
letter-spacing: -.01em;
|
||||
opacity: .96;
|
||||
}
|
||||
|
||||
.cf-map__roots{
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cf-node{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 48px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(127,127,127,0.24);
|
||||
border-radius: 999px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .05em;
|
||||
line-height: 1.2;
|
||||
transition: transform 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
.cf-node:hover{
|
||||
transform: translateY(-1px);
|
||||
background: rgba(127,127,127,0.08);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cf-node--wide{
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.cf-map__arrow{
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
opacity: .65;
|
||||
}
|
||||
|
||||
.cf-cards,
|
||||
.cf-comparisons{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.cf-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;
|
||||
}
|
||||
|
||||
.cf-card:hover{
|
||||
transform: translateY(-1px);
|
||||
background: rgba(127,127,127,0.08);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cf-card strong{
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.cf-card span{
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.cf-card small{
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.cf-card--text{
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.cf-card--text:hover{
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cf-steps{
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.cf-step{
|
||||
display: grid;
|
||||
grid-template-columns: 64px minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
align-items: start;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
.cf-step__num{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
border: 1px solid rgba(127,127,127,0.28);
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.cf-step__body h3{
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.cf-step__body p{
|
||||
margin: 8px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.cf-section--final{
|
||||
margin-top: 42px;
|
||||
}
|
||||
|
||||
.cf-aside{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.cf-aside__block{
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
.cf-aside__back{
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cf-aside__title{
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .2px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.cf-aside__meta{
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
opacity: .78;
|
||||
}
|
||||
|
||||
.cf-aside__heading{
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.cf-aside__list{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cf-aside__list li{
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.cf-aside__list a{
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@media (max-width: 720px){
|
||||
.cf-map__roots{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cf-step{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cf-step__num{
|
||||
width: fit-content;
|
||||
min-width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
.cf-map,
|
||||
.cf-node,
|
||||
.cf-card,
|
||||
.cf-step,
|
||||
.cf-aside__block{
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
|
||||
.cf-node:hover,
|
||||
.cf-card:hover{
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
577
src/pages/glossaire/dynamiques-archicratiques.astro
Normal file
577
src/pages/glossaire/dynamiques-archicratiques.astro
Normal file
@@ -0,0 +1,577 @@
|
||||
---
|
||||
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 sortByTerm(list = []) {
|
||||
return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
|
||||
}
|
||||
|
||||
function resolveEntries(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 obliteration = bySlug.get("obliteration-archicratique");
|
||||
const autarchicratie = bySlug.get("autarchicratie");
|
||||
const tension = bySlug.get("tension");
|
||||
const sceneDepreuve = bySlug.get("scene-depreuve");
|
||||
const archicration = bySlug.get("archicration");
|
||||
const archicratie = bySlug.get("archicratie");
|
||||
|
||||
const diagnosisEntries = sortByTerm(
|
||||
[obliteration, autarchicratie].filter(Boolean)
|
||||
);
|
||||
|
||||
const structuralEntries = sortByTerm(
|
||||
[tension, sceneDepreuve, archicration, archicratie].filter(Boolean)
|
||||
);
|
||||
|
||||
const relatedEntries = sortByTerm(
|
||||
uniqueBySlug([
|
||||
...resolveEntries(obliteration?.data?.related ?? []),
|
||||
...resolveEntries(obliteration?.data?.seeAlso ?? []),
|
||||
...resolveEntries(obliteration?.data?.opposedTo ?? []),
|
||||
...resolveEntries(autarchicratie?.data?.related ?? []),
|
||||
...resolveEntries(autarchicratie?.data?.seeAlso ?? []),
|
||||
...resolveEntries(autarchicratie?.data?.opposedTo ?? []),
|
||||
]).filter((entry) => !["obliteration-archicratique", "autarchicratie"].includes(slugOf(entry)))
|
||||
);
|
||||
|
||||
const paradigmEntries = sortByTerm(
|
||||
relatedEntries.filter((entry) => entry.data.kind === "paradigme")
|
||||
);
|
||||
|
||||
const otherEntries = sortByTerm(
|
||||
relatedEntries.filter((entry) => entry.data.kind !== "paradigme")
|
||||
);
|
||||
|
||||
const diagnosisCount = diagnosisEntries.length;
|
||||
const structuralCount = structuralEntries.length;
|
||||
const constellationCount = relatedEntries.length;
|
||||
---
|
||||
|
||||
<GlossaryLayout
|
||||
title="Dynamiques archicratiques"
|
||||
version="1.0"
|
||||
>
|
||||
<Fragment slot="aside">
|
||||
<nav class="dyna-aside" aria-label="Navigation des dynamiques archicratiques">
|
||||
<div class="dyna-aside__block">
|
||||
<a class="dyna-aside__back" href="/glossaire/">← Retour au glossaire</a>
|
||||
<div class="dyna-aside__title">Dynamiques archicratiques</div>
|
||||
<div class="dyna-aside__meta">
|
||||
{diagnosisCount > 0
|
||||
? `${diagnosisCount} diagnostic${diagnosisCount > 1 ? "s" : ""} central${diagnosisCount > 1 ? "ux" : ""}`
|
||||
: "Portail en cours de constitution"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dyna-aside__block">
|
||||
<h2 class="dyna-aside__heading">Dans cette page</h2>
|
||||
<ul class="dyna-aside__list">
|
||||
<li><a href="#noyau-diagnostique">Noyau diagnostique</a></li>
|
||||
{structuralEntries.length > 0 && (
|
||||
<li><a href="#articulations-essentielles">Articulations essentielles</a></li>
|
||||
)}
|
||||
{relatedEntries.length > 0 && (
|
||||
<li><a href="#constellation-theorique">Constellation théorique</a></li>
|
||||
)}
|
||||
<li><a href="#prolonger-la-lecture">Prolonger la lecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dyna-aside__block">
|
||||
<h2 class="dyna-aside__heading">Renvois utiles</h2>
|
||||
<ul class="dyna-aside__list">
|
||||
<li><a href="/glossaire/tension/">Tension</a></li>
|
||||
<li><a href="/glossaire/scene-depreuve/">Scène d’épreuve</a></li>
|
||||
<li><a href="/glossaire/archicration/">Archicration</a></li>
|
||||
<li><a href="/glossaire/archicratie/">Archicratie</a></li>
|
||||
<li><a href="/glossaire/tensions-irreductibles/">Tensions irréductibles</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</Fragment>
|
||||
|
||||
<section class="dyna-page">
|
||||
<div class="dyna-hero">
|
||||
<p class="dyna-kicker">Parcours du glossaire</p>
|
||||
<h1>Dynamiques archicratiques</h1>
|
||||
<p class="dyna-intro">
|
||||
Les dynamiques archicratiques désignent les processus par lesquels une
|
||||
régulation se déplace, se ferme, se rigidifie ou se soustrait à sa
|
||||
propre révisabilité. Elles permettent de penser non seulement la tenue
|
||||
d’un régime, mais aussi ses dérives, ses opacifications et ses
|
||||
pathologies.
|
||||
</p>
|
||||
<p class="dyna-intro">
|
||||
Elles décrivent ainsi le versant processuel de l’archicratie : non plus
|
||||
seulement ce qui tient, mais la manière dont cela se transforme,
|
||||
s’altère, s’autonomise ou devient de moins en moins exposable à
|
||||
l’épreuve collective.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="dyna-section">
|
||||
<div class="dyna-section__head">
|
||||
<h2 id="noyau-diagnostique">Noyau diagnostique</h2>
|
||||
{diagnosisEntries.length > 0 && (
|
||||
<span class="dyna-section__count">
|
||||
{diagnosisEntries.length} entrée{diagnosisEntries.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p class="dyna-section__intro">
|
||||
Cette page rassemble les diagnostics déjà stabilisés dans le glossaire
|
||||
pour penser les dérives internes de la régulation archicratique :
|
||||
l’<strong>oblitération archicratique</strong>, comme processus
|
||||
d’effacement de la visibilité régulatrice, et l’<strong>autarchicratie</strong>,
|
||||
comme forme de fermeture croissante des architectures sur elles-mêmes.
|
||||
</p>
|
||||
|
||||
{diagnosisEntries.length > 0 ? (
|
||||
<div class="dyna-focus-grid">
|
||||
{diagnosisEntries.map((entry) => (
|
||||
<article class="dyna-focus-card">
|
||||
<div class="dyna-focus-card__eyebrow">Diagnostic central</div>
|
||||
<h3>
|
||||
<a href={hrefOf(entry)}>{entry.data.term}</a>
|
||||
</h3>
|
||||
<p class="dyna-focus-card__def">{entry.data.definitionShort}</p>
|
||||
|
||||
{(entry.data.comparisonTraditions?.length > 0 || entry.data.mobilizedAuthors?.length > 0) && (
|
||||
<div class="dyna-focus-card__meta">
|
||||
{entry.data.comparisonTraditions?.length > 0 && (
|
||||
<p>
|
||||
<strong>Traditions de comparaison :</strong>{" "}
|
||||
{entry.data.comparisonTraditions.join(" / ")}
|
||||
</p>
|
||||
)}
|
||||
{entry.data.mobilizedAuthors?.length > 0 && (
|
||||
<p>
|
||||
<strong>Auteurs mobilisés :</strong>{" "}
|
||||
{entry.data.mobilizedAuthors.join(" / ")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p class="dyna-empty">
|
||||
Les fiches principales ne sont pas encore disponibles dans la collection.
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{structuralEntries.length > 0 && (
|
||||
<section class="dyna-section">
|
||||
<div class="dyna-section__head">
|
||||
<h2 id="articulations-essentielles">Articulations essentielles</h2>
|
||||
<span class="dyna-section__count">
|
||||
{structuralCount} notion{structuralCount > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="dyna-section__intro">
|
||||
Les dynamiques archicratiques ne peuvent pas être pensées isolément :
|
||||
elles prennent sens à partir des tensions, de la scène d’épreuve, de
|
||||
l’archicration et du méta-régime d’archicratie lui-même.
|
||||
</p>
|
||||
|
||||
<div class="dyna-cards">
|
||||
{structuralEntries.map((entry) => (
|
||||
<a class="dyna-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
|
||||
{entry.data.comparisonTraditions?.length > 0 && (
|
||||
<small>
|
||||
Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
|
||||
</small>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{relatedEntries.length > 0 && (
|
||||
<section class="dyna-section">
|
||||
<div class="dyna-section__head">
|
||||
<h2 id="constellation-theorique">Constellation théorique</h2>
|
||||
<span class="dyna-section__count">
|
||||
{constellationCount} entrée{constellationCount > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="dyna-section__intro">
|
||||
Ces diagnostics entrent en résonance avec d’autres notions et
|
||||
paradigmes qui permettent de préciser les mécanismes de fermeture, de
|
||||
capture, d’opacification ou de désajustement de la régulation.
|
||||
</p>
|
||||
|
||||
{otherEntries.length > 0 && (
|
||||
<div class="dyna-block">
|
||||
<h3>Notions et diagnostics liés</h3>
|
||||
<div class="dyna-cards">
|
||||
{otherEntries.map((entry) => (
|
||||
<a class="dyna-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
|
||||
{entry.data.comparisonTraditions?.length > 0 && (
|
||||
<small>
|
||||
Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
|
||||
</small>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{paradigmEntries.length > 0 && (
|
||||
<div class="dyna-block">
|
||||
<h3>Paradigmes mobilisés</h3>
|
||||
<div class="dyna-cards">
|
||||
{paradigmEntries.map((entry) => (
|
||||
<a class="dyna-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
|
||||
{entry.data.mobilizedAuthors?.length > 0 && (
|
||||
<small>
|
||||
Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
|
||||
</small>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section class="dyna-section">
|
||||
<div class="dyna-section__head">
|
||||
<h2 id="prolonger-la-lecture">Prolonger la lecture</h2>
|
||||
</div>
|
||||
|
||||
<p class="dyna-section__intro">
|
||||
Cette page sert de portail thématique entre l’accueil général du
|
||||
glossaire et les fiches détaillées. Elle sera amenée à s’étoffer à
|
||||
mesure que le chantier des tensions et des dynamiques sera approfondi.
|
||||
</p>
|
||||
|
||||
<div class="dyna-cards">
|
||||
<a class="dyna-card" href="/glossaire/">
|
||||
<strong>Accueil du glossaire</strong>
|
||||
<span>
|
||||
Revenir à la cartographie générale du système archicratique.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="dyna-card" href="/glossaire/archicrations/">
|
||||
<strong>Méta-régimes archicratiques</strong>
|
||||
<span>
|
||||
Parcourir les grandes formes de co-viabilité dans lesquelles les
|
||||
tensions sont stabilisées.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="dyna-card" href="/glossaire/tensions-irreductibles/">
|
||||
<strong>Tensions irréductibles</strong>
|
||||
<span>
|
||||
Explorer les tensions fondatrices à partir desquelles les dynamiques
|
||||
de régulation deviennent lisibles.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="dyna-card" href="/glossaire/index-complet/">
|
||||
<strong>Index complet</strong>
|
||||
<span>
|
||||
Retrouver l’ensemble des entrées du glossaire dans une navigation
|
||||
alphabétique intégrale.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dyna-section dyna-section--final">
|
||||
<h2>Portée d’ensemble</h2>
|
||||
<p>
|
||||
Les dynamiques archicratiques permettent de penser la régulation non
|
||||
comme une forme immobile, mais comme un devenir. Elles montrent comment
|
||||
une architecture peut continuer d’opérer tout en devenant de moins en
|
||||
moins visible, de moins en moins discutable et de moins en moins
|
||||
révisable. Elles éclairent ainsi le passage entre simple tenue du
|
||||
collectif et dérive d’un régime vers l’opacité, la fermeture ou la
|
||||
captation de sa propre scène d’épreuve.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
.dyna-page{
|
||||
padding: 8px 0 24px;
|
||||
}
|
||||
|
||||
.dyna-hero{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.dyna-kicker{
|
||||
font-size: 12px;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
opacity: .72;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dyna-intro{
|
||||
max-width: 76ch;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.dyna-section{
|
||||
margin-top: 34px;
|
||||
scroll-margin-top: calc(var(--sticky-offset) + 75px);
|
||||
}
|
||||
|
||||
.dyna-section h2{
|
||||
scroll-margin-top: calc(var(--sticky-offset) + 75px);
|
||||
}
|
||||
|
||||
.dyna-section__head{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dyna-section__count{
|
||||
font-size: 13px;
|
||||
opacity: .72;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dyna-section__intro{
|
||||
max-width: 78ch;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.dyna-focus-grid{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.dyna-focus-card{
|
||||
padding: 18px 20px;
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 18px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
.dyna-focus-card__eyebrow{
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.dyna-focus-card h3{
|
||||
margin: 0 0 10px;
|
||||
font-size: clamp(1.35rem, 2vw, 1.7rem);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.dyna-focus-card h3 a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dyna-focus-card__def{
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.dyna-focus-card__meta{
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(127,127,127,0.18);
|
||||
}
|
||||
|
||||
.dyna-focus-card__meta p{
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.dyna-focus-card__meta p + p{
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.dyna-block + .dyna-block{
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.dyna-block h3{
|
||||
margin: 0 0 12px;
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.dyna-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.dyna-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;
|
||||
}
|
||||
|
||||
.dyna-card:hover{
|
||||
transform: translateY(-1px);
|
||||
background: rgba(127,127,127,0.08);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dyna-card strong{
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.dyna-card span{
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.dyna-card small{
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.dyna-empty{
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
opacity: .82;
|
||||
}
|
||||
|
||||
.dyna-section--final{
|
||||
margin-top: 42px;
|
||||
}
|
||||
|
||||
.dyna-aside{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.dyna-aside__block{
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
.dyna-aside__back{
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dyna-aside__title{
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .2px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.dyna-aside__meta{
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
opacity: .78;
|
||||
}
|
||||
|
||||
.dyna-aside__heading{
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.dyna-aside__list{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dyna-aside__list li{
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.dyna-aside__list a{
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
.dyna-focus-card,
|
||||
.dyna-card,
|
||||
.dyna-aside__block{
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
|
||||
.dyna-card:hover{
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
545
src/pages/glossaire/scenes-archicratiques.astro
Normal file
545
src/pages/glossaire/scenes-archicratiques.astro
Normal file
@@ -0,0 +1,545 @@
|
||||
---
|
||||
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 sortByTerm(list = []) {
|
||||
return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
|
||||
}
|
||||
|
||||
function resolveEntries(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 sceneDepreuve = bySlug.get("scene-depreuve");
|
||||
const tension = bySlug.get("tension");
|
||||
const archicration = bySlug.get("archicration");
|
||||
const archicratie = bySlug.get("archicratie");
|
||||
|
||||
const structuralEntries = sortByTerm(
|
||||
[tension, archicration, archicratie].filter(Boolean)
|
||||
);
|
||||
|
||||
const relatedEntries = sceneDepreuve
|
||||
? sortByTerm(
|
||||
uniqueBySlug([
|
||||
...resolveEntries(sceneDepreuve.data.related ?? []),
|
||||
...resolveEntries(sceneDepreuve.data.seeAlso ?? []),
|
||||
...resolveEntries(sceneDepreuve.data.opposedTo ?? []),
|
||||
]).filter((entry) => slugOf(entry) !== "scene-depreuve")
|
||||
)
|
||||
: [];
|
||||
|
||||
const paradigmEntries = sortByTerm(
|
||||
relatedEntries.filter((entry) => entry.data.kind === "paradigme")
|
||||
);
|
||||
|
||||
const otherEntries = sortByTerm(
|
||||
relatedEntries.filter((entry) => entry.data.kind !== "paradigme")
|
||||
);
|
||||
|
||||
const mobilizedAuthors = sceneDepreuve?.data?.mobilizedAuthors ?? [];
|
||||
const comparisonTraditions = sceneDepreuve?.data?.comparisonTraditions ?? [];
|
||||
const constellationCount = relatedEntries.length;
|
||||
---
|
||||
|
||||
<GlossaryLayout
|
||||
title="Scènes archicratiques"
|
||||
version="1.0"
|
||||
>
|
||||
<Fragment slot="aside">
|
||||
<nav class="scene-aside" aria-label="Navigation des scènes archicratiques">
|
||||
<div class="scene-aside__block">
|
||||
<a class="scene-aside__back" href="/glossaire/">← Retour au glossaire</a>
|
||||
<div class="scene-aside__title">Scènes archicratiques</div>
|
||||
<div class="scene-aside__meta">
|
||||
{sceneDepreuve ? "1 notion-pivot" : "Portail en cours de constitution"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scene-aside__block">
|
||||
<h2 class="scene-aside__heading">Dans cette page</h2>
|
||||
<ul class="scene-aside__list">
|
||||
<li><a href="#coeur-de-notion">Cœur de notion</a></li>
|
||||
{structuralEntries.length > 0 && (
|
||||
<li><a href="#articulations-essentielles">Articulations essentielles</a></li>
|
||||
)}
|
||||
{relatedEntries.length > 0 && (
|
||||
<li><a href="#constellation-theorique">Constellation théorique</a></li>
|
||||
)}
|
||||
<li><a href="#prolonger-la-lecture">Prolonger la lecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="scene-aside__block">
|
||||
<h2 class="scene-aside__heading">Renvois utiles</h2>
|
||||
<ul class="scene-aside__list">
|
||||
<li><a href="/glossaire/tension/">Tension</a></li>
|
||||
<li><a href="/glossaire/archicration/">Archicration</a></li>
|
||||
<li><a href="/glossaire/archicratie/">Archicratie</a></li>
|
||||
<li><a href="/glossaire/concepts-fondamentaux/">Concepts fondamentaux</a></li>
|
||||
<li><a href="/glossaire/paradigmes/">Paradigmes et doctrines</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</Fragment>
|
||||
|
||||
<section class="scene-page">
|
||||
<div class="scene-hero">
|
||||
<p class="scene-kicker">Parcours du glossaire</p>
|
||||
<h1>Scènes archicratiques</h1>
|
||||
<p class="scene-intro">
|
||||
Les scènes archicratiques désignent les espaces de comparution,
|
||||
d’exposition, de contestation et de révision par lesquels une
|
||||
architecture régulatrice cesse d’être purement opaque pour devenir
|
||||
visible, discutable et transformable.
|
||||
</p>
|
||||
<p class="scene-intro">
|
||||
Dans l’économie générale du paradigme, elles sont ce qui empêche la
|
||||
régulation de se refermer sur elle-même. Elles ouvrent un espace où les
|
||||
tensions peuvent apparaître, être qualifiées, disputées et réorganisées.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="scene-section">
|
||||
<div class="scene-section__head">
|
||||
<h2 id="coeur-de-notion">Cœur de notion</h2>
|
||||
</div>
|
||||
|
||||
<p class="scene-section__intro">
|
||||
Cette page prend pour pivot la <strong>scène d’épreuve</strong>, notion
|
||||
centrale pour penser l’exposition publique, la mise en discussion et la
|
||||
révisabilité des architectures de régulation.
|
||||
</p>
|
||||
|
||||
{sceneDepreuve ? (
|
||||
<article class="scene-focus-card">
|
||||
<div class="scene-focus-card__eyebrow">Entrée principale</div>
|
||||
<h3>
|
||||
<a href={hrefOf(sceneDepreuve)}>{sceneDepreuve.data.term}</a>
|
||||
</h3>
|
||||
<p class="scene-focus-card__def">{sceneDepreuve.data.definitionShort}</p>
|
||||
|
||||
{(mobilizedAuthors.length > 0 || comparisonTraditions.length > 0) && (
|
||||
<div class="scene-focus-card__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>
|
||||
)}
|
||||
</article>
|
||||
) : (
|
||||
<p class="scene-empty">
|
||||
La fiche principale n’est pas encore disponible dans la collection.
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{structuralEntries.length > 0 && (
|
||||
<section class="scene-section">
|
||||
<div class="scene-section__head">
|
||||
<h2 id="articulations-essentielles">Articulations essentielles</h2>
|
||||
<span class="scene-section__count">
|
||||
{structuralEntries.length} notion{structuralEntries.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="scene-section__intro">
|
||||
La scène n’est pas une notion isolée. Elle s’articule au phénomène de
|
||||
tension, à l’opérateur d’archicration et au méta-régime d’archicratie.
|
||||
</p>
|
||||
|
||||
<div class="scene-cards">
|
||||
{structuralEntries.map((entry) => (
|
||||
<a class="scene-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
|
||||
{entry.data.comparisonTraditions && (
|
||||
<small>
|
||||
Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
|
||||
</small>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{relatedEntries.length > 0 && (
|
||||
<section class="scene-section">
|
||||
<div class="scene-section__head">
|
||||
<h2 id="constellation-theorique">Constellation théorique</h2>
|
||||
<span class="scene-section__count">
|
||||
{constellationCount} entrée{constellationCount > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="scene-section__intro">
|
||||
Cette notion dialogue avec plusieurs diagnostics et paradigmes qui
|
||||
permettent d’en préciser la portée politique, symbolique et
|
||||
régulatrice.
|
||||
</p>
|
||||
|
||||
{otherEntries.length > 0 && (
|
||||
<div class="scene-block">
|
||||
<h3>Notions et diagnostics liés</h3>
|
||||
<div class="scene-cards">
|
||||
{otherEntries.map((entry) => (
|
||||
<a class="scene-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
|
||||
{entry.data.comparisonTraditions && (
|
||||
<small>
|
||||
Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
|
||||
</small>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{paradigmEntries.length > 0 && (
|
||||
<div class="scene-block">
|
||||
<h3>Paradigmes mobilisés</h3>
|
||||
<div class="scene-cards">
|
||||
{paradigmEntries.map((entry) => (
|
||||
<a class="scene-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
|
||||
{entry.data.mobilizedAuthors?.length > 0 && (
|
||||
<small>
|
||||
Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
|
||||
</small>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section class="scene-section">
|
||||
<div class="scene-section__head">
|
||||
<h2 id="prolonger-la-lecture">Prolonger la lecture</h2>
|
||||
</div>
|
||||
|
||||
<p class="scene-section__intro">
|
||||
Cette page a vocation à devenir un portail intermédiaire entre l’accueil
|
||||
du glossaire et les fiches détaillées. Elle prolonge la lecture vers les
|
||||
autres parcours déjà stabilisés du système archicratique.
|
||||
</p>
|
||||
|
||||
<div class="scene-cards">
|
||||
<a class="scene-card" href="/glossaire/">
|
||||
<strong>Accueil du glossaire</strong>
|
||||
<span>
|
||||
Revenir à la cartographie générale du système archicratique.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="scene-card" href="/glossaire/concepts-fondamentaux/">
|
||||
<strong>Concepts fondamentaux</strong>
|
||||
<span>
|
||||
Repartir du noyau conceptuel minimal : arcalité, cratialité, tension,
|
||||
archicration, co-viabilité, archicratie.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="scene-card" href="/glossaire/paradigmes/">
|
||||
<strong>Paradigmes et doctrines</strong>
|
||||
<span>
|
||||
Situer la scène archicratique dans son paysage de comparaison
|
||||
théorique.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="scene-card" href="/glossaire/index-complet/">
|
||||
<strong>Index complet</strong>
|
||||
<span>
|
||||
Retrouver toutes les entrées du glossaire dans l’ordre alphabétique.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="scene-section scene-section--final">
|
||||
<h2>Portée d’ensemble</h2>
|
||||
<p>
|
||||
Les scènes archicratiques rappellent que la régulation ne vaut jamais
|
||||
seulement par son efficacité interne. Elle doit aussi pouvoir paraître,
|
||||
être soumise à l’épreuve, être discutée et éventuellement être révisée.
|
||||
La <a href="/glossaire/scene-depreuve/">scène d’épreuve</a> marque ainsi
|
||||
le point où l’<a href="/glossaire/archicration/">archicration</a> cesse
|
||||
d’être pure opération pour devenir enjeu politique, symbolique et
|
||||
collectif.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
.scene-page{
|
||||
padding: 8px 0 24px;
|
||||
}
|
||||
|
||||
.scene-hero{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.scene-kicker{
|
||||
font-size: 12px;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
opacity: .72;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.scene-intro{
|
||||
max-width: 76ch;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.scene-section{
|
||||
margin-top: 34px;
|
||||
scroll-margin-top: calc(var(--sticky-offset) + 75px);
|
||||
}
|
||||
|
||||
.scene-section h2{
|
||||
scroll-margin-top: calc(var(--sticky-offset) + 75px);
|
||||
}
|
||||
|
||||
.scene-section__head{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.scene-section__count{
|
||||
font-size: 13px;
|
||||
opacity: .72;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scene-section__intro{
|
||||
max-width: 78ch;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.scene-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);
|
||||
}
|
||||
|
||||
.scene-focus-card__eyebrow{
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.scene-focus-card h3{
|
||||
margin: 0 0 10px;
|
||||
font-size: clamp(1.35rem, 2vw, 1.7rem);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.scene-focus-card h3 a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.scene-focus-card__def{
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.scene-focus-card__meta{
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(127,127,127,0.18);
|
||||
}
|
||||
|
||||
.scene-focus-card__meta p{
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.scene-focus-card__meta p + p{
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.scene-block + .scene-block{
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.scene-block h3{
|
||||
margin: 0 0 12px;
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.scene-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.scene-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;
|
||||
}
|
||||
|
||||
.scene-card:hover{
|
||||
transform: translateY(-1px);
|
||||
background: rgba(127,127,127,0.08);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.scene-card strong{
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.scene-card span{
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.scene-card small{
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.scene-empty{
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
opacity: .82;
|
||||
}
|
||||
|
||||
.scene-section--final{
|
||||
margin-top: 42px;
|
||||
}
|
||||
|
||||
.scene-aside{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.scene-aside__block{
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
.scene-aside__back{
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.scene-aside__title{
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .2px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.scene-aside__meta{
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
opacity: .78;
|
||||
}
|
||||
|
||||
.scene-aside__heading{
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.scene-aside__list{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.scene-aside__list li{
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.scene-aside__list a{
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
.scene-focus-card,
|
||||
.scene-card,
|
||||
.scene-aside__block{
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
|
||||
.scene-card:hover{
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
560
src/pages/glossaire/tensions-irreductibles.astro
Normal file
560
src/pages/glossaire/tensions-irreductibles.astro
Normal file
@@ -0,0 +1,560 @@
|
||||
---
|
||||
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 sortByTerm(list = []) {
|
||||
return [...list].sort((a, b) => collator.compare(a.data.term, b.data.term));
|
||||
}
|
||||
|
||||
const tension = bySlug.get("tension");
|
||||
const coViabilite = bySlug.get("co-viabilite");
|
||||
const sceneDepreuve = bySlug.get("scene-depreuve");
|
||||
const archicration = bySlug.get("archicration");
|
||||
const archicratie = bySlug.get("archicratie");
|
||||
|
||||
const foundationEntries = sortByTerm(
|
||||
[tension, coViabilite, sceneDepreuve, archicration, archicratie].filter(Boolean)
|
||||
);
|
||||
|
||||
const resonanceEntries = sortByTerm(
|
||||
[
|
||||
bySlug.get("gouvernementalite-algorithmique"),
|
||||
bySlug.get("preemption-algorithmique"),
|
||||
bySlug.get("democratie-deliberative"),
|
||||
bySlug.get("cosmopolitique"),
|
||||
bySlug.get("technodiversite-et-cosmotechnie"),
|
||||
bySlug.get("pharmacologie-technique"),
|
||||
].filter(Boolean)
|
||||
);
|
||||
|
||||
const irreducibleTensions = [
|
||||
{
|
||||
index: "01",
|
||||
title: "Subsistance vivante / captation capitalistique",
|
||||
text:
|
||||
"Lorsque les conditions matérielles de la vie — eau, sol, temps, soin, énergie — sont traitées comme variables extractibles, la reproduction du vivant entre en conflit avec les logiques de rentabilité et d’accumulation.",
|
||||
},
|
||||
{
|
||||
index: "02",
|
||||
title: "Travail vivant / abstraction de la valeur",
|
||||
text:
|
||||
"Lorsque l’activité humaine concrète est fragmentée, désintermédiée ou précarisée tandis que la valeur se financiarise, se déterritorialise et se calcule à distance, la scène politique du travail tend à se dissoudre.",
|
||||
},
|
||||
{
|
||||
index: "03",
|
||||
title: "Égalisation normative / différenciation singulière",
|
||||
text:
|
||||
"Lorsque l’universalité égalitaire menace d’écraser les écarts situés, ou qu’à l’inverse la singularisation radicale produit des régimes d’exception, la régulation doit chercher une équité sans homogénéisation.",
|
||||
},
|
||||
{
|
||||
index: "04",
|
||||
title: "Liberté d’action / régimes de sécurité algorithmique",
|
||||
text:
|
||||
"Lorsque la protection, la surveillance, la notation ou la préemption encadrent les conduites au nom de la sécurité, la liberté devient incertaine comme capacité d’agir hors-script et hors-cadre prévu.",
|
||||
},
|
||||
{
|
||||
index: "05",
|
||||
title: "Visibilité médiatique / reconnaissance symbolique",
|
||||
text:
|
||||
"Lorsque l’exposition publique remplace la reconnaissance politique, la visibilité n’implique plus d’être entendu, considéré ni institué comme porteur d’un différend légitime.",
|
||||
},
|
||||
{
|
||||
index: "06",
|
||||
title: "Régulation technique / légitimation démocratique",
|
||||
text:
|
||||
"Lorsque des dispositifs techniques, algorithmiques ou automatisés prennent en charge des décisions normatives sans scène de validation collective, l’origine du pouvoir régulateur tend à s’oblitérer.",
|
||||
},
|
||||
{
|
||||
index: "07",
|
||||
title: "Souverainetés territoriales / interdépendances globales",
|
||||
text:
|
||||
"Lorsque les cadres politiques demeurent majoritairement étatiques alors que les crises sont réticulaires, planétaires et transversales, l’échelle de la décision se désaccorde de l’échelle des enjeux.",
|
||||
},
|
||||
{
|
||||
index: "08",
|
||||
title: "Formes de vie / cadres d’habitabilité",
|
||||
text:
|
||||
"Lorsque les normes d’urbanité, de mobilité et d’usage du territoire imposent une homogénéité fonctionnelle, elles entrent en tension avec la pluralité des manières d’habiter, humaines et non humaines.",
|
||||
},
|
||||
{
|
||||
index: "09",
|
||||
title: "Mémoire symbolique / instantanéité computationnelle",
|
||||
text:
|
||||
"Lorsque les régimes de calcul en temps réel dissolvent les temporalités longues de transmission, de récit et d’historicisation, la continuité symbolique du commun devient fragile.",
|
||||
},
|
||||
{
|
||||
index: "10",
|
||||
title: "Co-existence ontologique / nécessité régulatrice",
|
||||
text:
|
||||
"Lorsque l’altérité culturelle, cognitive, biologique ou machinique interdit tout socle substantiel univoque, il faut pourtant instituer une scène commune de régulation sans essence préalable partagée.",
|
||||
},
|
||||
];
|
||||
|
||||
const tensionsCount = irreducibleTensions.length;
|
||||
---
|
||||
|
||||
<GlossaryLayout
|
||||
title="Tensions irréductibles"
|
||||
version="1.0"
|
||||
>
|
||||
<Fragment slot="aside">
|
||||
<nav class="tir-aside" aria-label="Navigation des tensions irréductibles">
|
||||
<div class="tir-aside__block">
|
||||
<a class="tir-aside__back" href="/glossaire/">← Retour au glossaire</a>
|
||||
<div class="tir-aside__title">Tensions irréductibles</div>
|
||||
<div class="tir-aside__meta">
|
||||
{tensionsCount} tension{tensionsCount > 1 ? "s" : ""} structurales
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tir-aside__block">
|
||||
<h2 class="tir-aside__heading">Dans cette page</h2>
|
||||
<ul class="tir-aside__list">
|
||||
<li><a href="#orientation">Orientation</a></li>
|
||||
<li><a href="#dix-tensions">Les dix tensions</a></li>
|
||||
{foundationEntries.length > 0 && (
|
||||
<li><a href="#articulations-fondamentales">Articulations fondamentales</a></li>
|
||||
)}
|
||||
{resonanceEntries.length > 0 && (
|
||||
<li><a href="#resonances-theoriques">Résonances théoriques</a></li>
|
||||
)}
|
||||
<li><a href="#prolonger-la-lecture">Prolonger la lecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tir-aside__block">
|
||||
<h2 class="tir-aside__heading">Renvois utiles</h2>
|
||||
<ul class="tir-aside__list">
|
||||
<li><a href="/glossaire/tension/">Tension</a></li>
|
||||
<li><a href="/glossaire/scene-depreuve/">Scène d’épreuve</a></li>
|
||||
<li><a href="/glossaire/archicration/">Archicration</a></li>
|
||||
<li><a href="/glossaire/co-viabilite/">Co-viabilité</a></li>
|
||||
<li><a href="/glossaire/dynamiques-archicratiques/">Dynamiques archicratiques</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</Fragment>
|
||||
|
||||
<section class="tir-page">
|
||||
<div class="tir-hero">
|
||||
<p class="tir-kicker">Parcours du glossaire</p>
|
||||
<h1>Tensions irréductibles</h1>
|
||||
<p class="tir-intro">
|
||||
Cette page rassemble les dix tensions que le chapitre 5 présente comme
|
||||
<strong> ontologiquement irréductibles</strong> et politiquement fondatrices.
|
||||
Elles ne se confondent pas avec des tensions simplement sectorielles :
|
||||
elles désignent des lignes de conflictualité plus profondes, à partir
|
||||
desquelles une scène archicratique doit organiser la co-viabilité.
|
||||
</p>
|
||||
<p class="tir-intro">
|
||||
Le point décisif n’est donc pas de dresser un inventaire conjoncturel
|
||||
des crises, mais d’identifier des foyers structuraux suffisamment
|
||||
fondamentaux pour traverser durablement les régulations collectives.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="tir-section">
|
||||
<div class="tir-section__head">
|
||||
<h2 id="orientation">Orientation</h2>
|
||||
</div>
|
||||
|
||||
<p class="tir-section__intro">
|
||||
Dans cette perspective, une archicration ne supprime pas les tensions :
|
||||
elle les met en scène, les distribue, les hiérarchise, les arbitre ou
|
||||
les rend révisables. Les tensions irréductibles désignent ainsi le plan
|
||||
à partir duquel devient pensable l’exigence même de régulation.
|
||||
</p>
|
||||
|
||||
<div class="tir-note-card">
|
||||
<strong>Point de méthode</strong>
|
||||
<p>
|
||||
Les tensions irréductibles relèvent ici d’un <em>plan structural</em>.
|
||||
Elles traversent ensuite des secteurs multiples — économiques,
|
||||
écologiques, sociaux, médiatiques, technologiques, géopolitiques ou
|
||||
culturels — sans se réduire à aucun d’entre eux pris isolément.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tir-section">
|
||||
<div class="tir-section__head">
|
||||
<h2 id="dix-tensions">Les dix tensions irréductibles</h2>
|
||||
<span class="tir-section__count">
|
||||
{tensionsCount} tension{tensionsCount > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="tir-section__intro">
|
||||
Le chapitre 5 les présente comme les foyers majeurs de conflictualité
|
||||
auxquels une pensée archicratique doit se confronter.
|
||||
</p>
|
||||
|
||||
<div class="tir-cards">
|
||||
{irreducibleTensions.map((item) => (
|
||||
<article class="tir-card">
|
||||
<div class="tir-card__index">{item.index}</div>
|
||||
<h3>{item.title}</h3>
|
||||
<p>{item.text}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{foundationEntries.length > 0 && (
|
||||
<section class="tir-section">
|
||||
<div class="tir-section__head">
|
||||
<h2 id="articulations-fondamentales">Articulations fondamentales</h2>
|
||||
<span class="tir-section__count">
|
||||
{foundationEntries.length} notion{foundationEntries.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="tir-section__intro">
|
||||
Ces tensions ne prennent sens, dans le glossaire, qu’en relation avec
|
||||
quelques notions cardinales : la tension elle-même, la scène
|
||||
d’épreuve, l’archicration, la co-viabilité et l’archicratie.
|
||||
</p>
|
||||
|
||||
<div class="tir-link-cards">
|
||||
{foundationEntries.map((entry) => (
|
||||
<a class="tir-link-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
|
||||
{entry.data.comparisonTraditions?.length > 0 && (
|
||||
<small>
|
||||
Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
|
||||
</small>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{resonanceEntries.length > 0 && (
|
||||
<section class="tir-section">
|
||||
<div class="tir-section__head">
|
||||
<h2 id="resonances-theoriques">Résonances théoriques</h2>
|
||||
<span class="tir-section__count">
|
||||
{resonanceEntries.length} entrée{resonanceEntries.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="tir-section__intro">
|
||||
Plusieurs paradigmes déjà présents dans le glossaire permettent
|
||||
d’éclairer certains versants de ces tensions : gouvernementalité
|
||||
algorithmique, préemption, cosmopolitique, technodiversité,
|
||||
pharmacologie technique ou légitimation démocratique.
|
||||
</p>
|
||||
|
||||
<div class="tir-link-cards">
|
||||
{resonanceEntries.map((entry) => (
|
||||
<a class="tir-link-card" href={hrefOf(entry)}>
|
||||
<strong>{entry.data.term}</strong>
|
||||
<span>{entry.data.definitionShort}</span>
|
||||
|
||||
{entry.data.mobilizedAuthors?.length > 0 && (
|
||||
<small>
|
||||
Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
|
||||
</small>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section class="tir-section">
|
||||
<div class="tir-section__head">
|
||||
<h2 id="prolonger-la-lecture">Prolonger la lecture</h2>
|
||||
</div>
|
||||
|
||||
<p class="tir-section__intro">
|
||||
Cette page fixe le socle conceptuel des tensions irréductibles. Elle
|
||||
pourra ensuite servir de base à un approfondissement plus détaillé, sans
|
||||
alourdir l’accueil général du glossaire.
|
||||
</p>
|
||||
|
||||
<div class="tir-link-cards">
|
||||
<a class="tir-link-card" href="/glossaire/dynamiques-archicratiques/">
|
||||
<strong>Dynamiques archicratiques</strong>
|
||||
<span>
|
||||
Revenir aux processus de fermeture, d’oblitération et de dérive de
|
||||
la régulation.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="tir-link-card" href="/glossaire/archicrations/">
|
||||
<strong>Méta-régimes archicratiques</strong>
|
||||
<span>
|
||||
Parcourir les grandes formes de co-viabilité qui stabilisent les
|
||||
tensions sans les abolir.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="tir-link-card" href="/glossaire/paradigmes/">
|
||||
<strong>Paradigmes et doctrines</strong>
|
||||
<span>
|
||||
Situer ces tensions dans un paysage théorique plus large.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="tir-link-card" href="/glossaire/index-complet/">
|
||||
<strong>Index complet</strong>
|
||||
<span>
|
||||
Retrouver l’ensemble des entrées du glossaire dans une navigation
|
||||
alphabétique intégrale.
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tir-section tir-section--final">
|
||||
<h2>Portée d’ensemble</h2>
|
||||
<p>
|
||||
Les tensions irréductibles ne décrivent pas des accidents secondaires de
|
||||
la vie collective, mais les lignes de fracture à partir desquelles toute
|
||||
régulation devient nécessaire. Elles indiquent pourquoi aucune
|
||||
co-viabilité ne peut être pensée comme simple équilibre, et pourquoi une
|
||||
archicration digne de ce nom doit toujours affronter, mettre en forme et
|
||||
rouvrir ce qui ne peut être définitivement résorbé.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
.tir-page{
|
||||
padding: 8px 0 24px;
|
||||
}
|
||||
|
||||
.tir-hero{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.tir-kicker{
|
||||
font-size: 12px;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
opacity: .72;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.tir-intro{
|
||||
max-width: 76ch;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.tir-section{
|
||||
margin-top: 34px;
|
||||
scroll-margin-top: calc(var(--sticky-offset) + 75px);
|
||||
}
|
||||
|
||||
.tir-section h2{
|
||||
scroll-margin-top: calc(var(--sticky-offset) + 75px);
|
||||
}
|
||||
|
||||
.tir-section__head{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tir-section__count{
|
||||
font-size: 13px;
|
||||
opacity: .72;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tir-section__intro{
|
||||
max-width: 78ch;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.tir-note-card{
|
||||
margin-top: 14px;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
.tir-note-card strong{
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.tir-note-card p{
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.tir-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.tir-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
.tir-card__index{
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .12em;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.tir-card h3{
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.32;
|
||||
}
|
||||
|
||||
.tir-card p{
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.tir-link-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.tir-link-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;
|
||||
}
|
||||
|
||||
.tir-link-card:hover{
|
||||
transform: translateY(-1px);
|
||||
background: rgba(127,127,127,0.08);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tir-link-card strong{
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.tir-link-card span{
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.tir-link-card small{
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.tir-section--final{
|
||||
margin-top: 42px;
|
||||
}
|
||||
|
||||
.tir-aside{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.tir-aside__block{
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
.tir-aside__back{
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tir-aside__title{
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .2px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.tir-aside__meta{
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
opacity: .78;
|
||||
}
|
||||
|
||||
.tir-aside__heading{
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.tir-aside__list{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tir-aside__list li{
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.tir-aside__list a{
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
.tir-note-card,
|
||||
.tir-card,
|
||||
.tir-link-card,
|
||||
.tir-aside__block{
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
|
||||
.tir-link-card:hover{
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user