998 lines
27 KiB
Plaintext
998 lines
27 KiB
Plaintext
---
|
||
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"
|
||
stickyMode="glossary-portal"
|
||
>
|
||
<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" data-dyna-page>
|
||
<div class="dyna-hero glossary-page-hero" data-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>
|
||
|
||
<div class="dyna-hero-collapsible">
|
||
<div
|
||
class="dyna-hero-more"
|
||
id="dyna-hero-more"
|
||
data-dyna-more
|
||
aria-hidden="false"
|
||
>
|
||
<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>
|
||
|
||
<button
|
||
class="dyna-hero-toggle"
|
||
id="dyna-hero-toggle"
|
||
data-dyna-more-toggle
|
||
type="button"
|
||
aria-controls="dyna-hero-more"
|
||
aria-expanded="false"
|
||
hidden
|
||
>
|
||
lire la suite
|
||
</button>
|
||
</div>
|
||
</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 id="notions-et-diagnostics-lies">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 id="paradigmes-mobilises">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>
|
||
|
||
<script is:inline>
|
||
(() => {
|
||
const boot = () => {
|
||
const body = document.body;
|
||
const root = document.documentElement;
|
||
const hero = document.querySelector("[data-dyna-hero]");
|
||
const follow = document.getElementById("reading-follow");
|
||
const heroMore = document.getElementById("dyna-hero-more");
|
||
const heroToggle = document.getElementById("dyna-hero-toggle");
|
||
|
||
if (!body || !root || !hero || !follow) return;
|
||
|
||
const BODY_CLASS = "is-dynamiques-archicratiques-page";
|
||
const FOLLOW_ON_CLASS = "dyna-follow-on";
|
||
const EXPANDED_CLASS = "dyna-hero-expanded";
|
||
const mqMobile = window.matchMedia("(max-width: 860px)");
|
||
const AUTO_COLLAPSE_DELTA = 160;
|
||
|
||
let expandedAtY = null;
|
||
let lastScrollY = window.scrollY || 0;
|
||
|
||
body.classList.add(BODY_CLASS);
|
||
|
||
const heroHeight = () =>
|
||
Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
|
||
|
||
const stripLocalSticky = () => {
|
||
document.querySelectorAll(".dyna-section__head").forEach((el) => {
|
||
el.classList.remove("is-sticky");
|
||
el.removeAttribute("data-sticky-active");
|
||
});
|
||
};
|
||
|
||
const computeFollowOn = () =>
|
||
!mqMobile.matches &&
|
||
follow.classList.contains("is-on") &&
|
||
follow.style.display !== "none" &&
|
||
follow.getAttribute("aria-hidden") !== "true";
|
||
|
||
const applyLocalStickyHeight = () => {
|
||
const h = mqMobile.matches ? 0 : heroHeight();
|
||
|
||
if (typeof window.__archiSetLocalStickyHeight === "function") {
|
||
window.__archiSetLocalStickyHeight(h);
|
||
} else {
|
||
root.style.setProperty("--glossary-local-sticky-h", `${h}px`);
|
||
}
|
||
};
|
||
|
||
const syncFollowState = () => {
|
||
const on = computeFollowOn();
|
||
body.classList.toggle(FOLLOW_ON_CLASS, on);
|
||
return on;
|
||
};
|
||
|
||
const collapseHero = () => {
|
||
if (!body.classList.contains(EXPANDED_CLASS)) return;
|
||
|
||
body.classList.remove(EXPANDED_CLASS);
|
||
expandedAtY = null;
|
||
|
||
if (heroMore) {
|
||
heroMore.setAttribute("aria-hidden", "true");
|
||
}
|
||
|
||
if (heroToggle) {
|
||
heroToggle.hidden = false;
|
||
heroToggle.setAttribute("aria-expanded", "false");
|
||
}
|
||
|
||
try {
|
||
window.__archiUpdateFollow?.();
|
||
} catch {}
|
||
|
||
schedule();
|
||
};
|
||
|
||
const expandHero = () => {
|
||
body.classList.add(EXPANDED_CLASS);
|
||
expandedAtY = window.scrollY || 0;
|
||
|
||
if (heroMore) {
|
||
heroMore.setAttribute("aria-hidden", "false");
|
||
}
|
||
|
||
if (heroToggle) {
|
||
heroToggle.hidden = true;
|
||
heroToggle.setAttribute("aria-expanded", "true");
|
||
}
|
||
|
||
try {
|
||
window.__archiUpdateFollow?.();
|
||
} catch {}
|
||
|
||
schedule();
|
||
};
|
||
|
||
const syncHeroState = () => {
|
||
const followOn = computeFollowOn();
|
||
const expanded = body.classList.contains(EXPANDED_CLASS);
|
||
const collapsed = followOn && !expanded;
|
||
|
||
if (!followOn || mqMobile.matches) {
|
||
body.classList.remove(EXPANDED_CLASS);
|
||
expandedAtY = null;
|
||
|
||
if (heroMore) {
|
||
heroMore.setAttribute("aria-hidden", "false");
|
||
}
|
||
|
||
if (heroToggle) {
|
||
heroToggle.hidden = true;
|
||
heroToggle.setAttribute("aria-expanded", "false");
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
if (heroMore) {
|
||
heroMore.setAttribute("aria-hidden", collapsed ? "true" : "false");
|
||
}
|
||
|
||
if (heroToggle) {
|
||
heroToggle.hidden = !collapsed;
|
||
heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
|
||
}
|
||
};
|
||
|
||
const maybeAutoCollapseOnScroll = () => {
|
||
if (mqMobile.matches) {
|
||
lastScrollY = window.scrollY || 0;
|
||
return;
|
||
}
|
||
|
||
if (!computeFollowOn()) {
|
||
lastScrollY = window.scrollY || 0;
|
||
return;
|
||
}
|
||
|
||
if (!body.classList.contains(EXPANDED_CLASS)) {
|
||
lastScrollY = window.scrollY || 0;
|
||
return;
|
||
}
|
||
|
||
if (expandedAtY == null) {
|
||
lastScrollY = window.scrollY || 0;
|
||
return;
|
||
}
|
||
|
||
const currentY = window.scrollY || 0;
|
||
const scrollingDown = currentY > lastScrollY;
|
||
const delta = currentY - expandedAtY;
|
||
|
||
if (scrollingDown && delta >= AUTO_COLLAPSE_DELTA) {
|
||
collapseHero();
|
||
}
|
||
|
||
lastScrollY = currentY;
|
||
};
|
||
|
||
const syncAll = () => {
|
||
stripLocalSticky();
|
||
syncFollowState();
|
||
syncHeroState();
|
||
applyLocalStickyHeight();
|
||
};
|
||
|
||
let raf = 0;
|
||
const schedule = () => {
|
||
if (raf) return;
|
||
raf = requestAnimationFrame(() => {
|
||
raf = 0;
|
||
requestAnimationFrame(syncAll);
|
||
});
|
||
};
|
||
|
||
heroToggle?.addEventListener("click", () => {
|
||
expandHero();
|
||
});
|
||
|
||
const onScroll = () => {
|
||
maybeAutoCollapseOnScroll();
|
||
schedule();
|
||
};
|
||
|
||
const followObserver = new MutationObserver(schedule);
|
||
followObserver.observe(follow, {
|
||
attributes: true,
|
||
attributeFilter: ["class", "style", "aria-hidden"],
|
||
subtree: false,
|
||
});
|
||
|
||
const heroResizeObserver =
|
||
typeof ResizeObserver !== "undefined"
|
||
? new ResizeObserver(schedule)
|
||
: null;
|
||
|
||
heroResizeObserver?.observe(hero);
|
||
|
||
window.addEventListener("scroll", onScroll, { passive: true });
|
||
window.addEventListener("resize", schedule);
|
||
window.addEventListener("pageshow", schedule);
|
||
|
||
if (document.fonts?.ready) {
|
||
document.fonts.ready.then(schedule).catch(() => {});
|
||
}
|
||
|
||
if (mqMobile.addEventListener) {
|
||
mqMobile.addEventListener("change", schedule);
|
||
} else if (mqMobile.addListener) {
|
||
mqMobile.addListener(schedule);
|
||
}
|
||
|
||
schedule();
|
||
};
|
||
|
||
if (document.readyState === "loading") {
|
||
document.addEventListener("DOMContentLoaded", boot, { once: true });
|
||
} else {
|
||
boot();
|
||
}
|
||
})();
|
||
</script>
|
||
</GlossaryLayout>
|
||
|
||
<style>
|
||
.dyna-page{
|
||
padding: 8px 0 24px;
|
||
}
|
||
|
||
.dyna-hero{
|
||
position: sticky;
|
||
top: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px));
|
||
z-index: 11;
|
||
margin: 0 0 24px;
|
||
padding: 18px 18px 20px;
|
||
border: 1px solid rgba(127,127,127,0.18);
|
||
border-radius: 28px;
|
||
background:
|
||
linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.92)),
|
||
radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
display: grid;
|
||
row-gap: 14px;
|
||
transition:
|
||
margin-bottom 180ms ease,
|
||
border-radius 180ms ease,
|
||
padding 180ms ease,
|
||
row-gap 180ms ease;
|
||
}
|
||
|
||
.dyna-kicker{
|
||
margin: 0;
|
||
font-size: 12px;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
opacity: .72;
|
||
}
|
||
|
||
.dyna-hero h1{
|
||
margin: 0;
|
||
font-size: clamp(2.2rem, 4vw, 3.15rem);
|
||
line-height: 1.02;
|
||
letter-spacing: -.04em;
|
||
font-weight: 850;
|
||
transition: font-size 180ms ease;
|
||
}
|
||
|
||
.dyna-intro{
|
||
margin: 0;
|
||
max-width: 72ch;
|
||
font-size: 1.04rem;
|
||
line-height: 1.55;
|
||
opacity: .94;
|
||
transition:
|
||
font-size 180ms ease,
|
||
line-height 180ms ease,
|
||
max-width 180ms ease;
|
||
}
|
||
|
||
.dyna-hero-collapsible{
|
||
display: grid;
|
||
row-gap: 6px;
|
||
}
|
||
|
||
.dyna-hero-more{
|
||
display: grid;
|
||
row-gap: 14px;
|
||
max-height: 18rem;
|
||
overflow: hidden;
|
||
opacity: 1;
|
||
transition:
|
||
max-height 220ms ease,
|
||
opacity 180ms ease;
|
||
}
|
||
|
||
.dyna-hero-toggle{
|
||
display: none;
|
||
align-self: flex-start;
|
||
width: fit-content;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
color: inherit;
|
||
font: inherit;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
letter-spacing: .01em;
|
||
text-transform: none;
|
||
opacity: .56;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
text-underline-offset: .12em;
|
||
text-decoration-thickness: 1px;
|
||
}
|
||
|
||
.dyna-hero-toggle:hover{
|
||
opacity: .84;
|
||
}
|
||
|
||
.dyna-hero-toggle:focus-visible{
|
||
outline: 2px solid rgba(0,217,255,0.24);
|
||
outline-offset: 4px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.dyna-hero-toggle[hidden]{
|
||
display: none !important;
|
||
}
|
||
|
||
.dyna-section{
|
||
margin-top: 34px;
|
||
scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
|
||
}
|
||
|
||
.dyna-section h2{
|
||
scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
|
||
}
|
||
|
||
.dyna-section__head{
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 10px;
|
||
position: static;
|
||
}
|
||
|
||
.dyna-section__count{
|
||
font-size: 13px;
|
||
opacity: .72;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.dyna-section__intro{
|
||
max-width: 78ch;
|
||
margin: 0;
|
||
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, border-color 120ms ease;
|
||
}
|
||
|
||
.dyna-card:hover{
|
||
transform: translateY(-1px);
|
||
background: rgba(127,127,127,0.08);
|
||
border-color: rgba(0,217,255,0.16);
|
||
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;
|
||
}
|
||
|
||
:global(body.is-dynamiques-archicratiques-page #reading-follow){
|
||
z-index: 10;
|
||
}
|
||
|
||
:global(body.is-dynamiques-archicratiques-page.dyna-follow-on .dyna-hero){
|
||
margin-bottom: 0;
|
||
padding: 12px 16px 14px;
|
||
row-gap: 10px;
|
||
border-bottom-left-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
|
||
:global(body.is-dynamiques-archicratiques-page.dyna-follow-on .dyna-hero h1){
|
||
font-size: clamp(1.9rem, 3.2vw, 2.55rem);
|
||
}
|
||
|
||
:global(body.is-dynamiques-archicratiques-page.dyna-follow-on .dyna-intro){
|
||
max-width: 68ch;
|
||
font-size: .98rem;
|
||
line-height: 1.48;
|
||
}
|
||
|
||
:global(body.is-dynamiques-archicratiques-page.dyna-follow-on:not(.dyna-hero-expanded) .dyna-hero-more){
|
||
max-height: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
|
||
:global(body.is-dynamiques-archicratiques-page.dyna-follow-on:not(.dyna-hero-expanded) .dyna-hero-toggle){
|
||
display: inline-flex;
|
||
}
|
||
|
||
:global(body.is-dynamiques-archicratiques-page.dyna-follow-on #reading-follow .reading-follow__inner){
|
||
border-top-left-radius: 0;
|
||
border-top-right-radius: 0;
|
||
}
|
||
|
||
:global(body.is-dynamiques-archicratiques-page .dyna-section__head.is-sticky),
|
||
:global(body.is-dynamiques-archicratiques-page .dyna-section__head[data-sticky-active="true"]){
|
||
position: static !important;
|
||
top: auto !important;
|
||
z-index: auto !important;
|
||
padding: 0 !important;
|
||
border: 0 !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
|
||
@media (max-width: 860px){
|
||
.dyna-hero{
|
||
position: static;
|
||
border-radius: 22px;
|
||
margin-bottom: 20px;
|
||
padding: 14px 14px 16px;
|
||
row-gap: 12px;
|
||
}
|
||
|
||
.dyna-intro{
|
||
max-width: none;
|
||
}
|
||
|
||
.dyna-hero-more{
|
||
max-height: none;
|
||
opacity: 1;
|
||
overflow: visible;
|
||
}
|
||
|
||
.dyna-hero-toggle{
|
||
display: none !important;
|
||
}
|
||
|
||
:global(body.is-dynamiques-archicratiques-page.dyna-follow-on .dyna-hero){
|
||
border-radius: 22px;
|
||
margin-bottom: 20px;
|
||
padding: 14px 14px 16px;
|
||
row-gap: 12px;
|
||
}
|
||
}
|
||
|
||
@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> |