diff --git a/src/components/GlossaryAside.astro b/src/components/GlossaryAside.astro index 812c677..e5d39aa 100644 --- a/src/components/GlossaryAside.astro +++ b/src/components/GlossaryAside.astro @@ -272,9 +272,12 @@ const relationSections = [

Portails

@@ -361,47 +364,48 @@ const relationSections = [ .glossary-aside__block{ border: 1px solid rgba(127,127,127,0.22); border-radius: 16px; - padding: 12px; + padding: 14px; background: rgba(127,127,127,0.05); } .glossary-aside__block--intro{ - padding-top: 11px; - padding-bottom: 11px; + padding-top: 13px; + padding-bottom: 13px; } .glossary-aside__back{ display: inline-block; - margin-bottom: 8px; - font-size: 13px; + margin-bottom: 10px; + font-size: 14px; font-weight: 700; + line-height: 1.35; text-decoration: none; } .glossary-aside__title{ - font-size: 14px; + font-size: 16px; font-weight: 800; letter-spacing: .2px; - line-height: 1.25; + line-height: 1.3; } .glossary-aside__pills{ display: flex; flex-wrap: wrap; - gap: 6px; - margin-top: 8px; + gap: 7px; + margin-top: 10px; } .glossary-aside__pill{ display: inline-flex; align-items: center; - padding: 4px 9px; + padding: 5px 10px; 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; + font-size: 13px; + line-height: 1.35; + opacity: .92; } .glossary-aside__pill--family{ @@ -410,17 +414,19 @@ const relationSections = [ } .glossary-aside__heading{ - margin: 0 0 10px; - font-size: 13px; + margin: 0 0 11px; + font-size: 14px; font-weight: 800; - opacity: .9; + line-height: 1.35; + opacity: .94; } .glossary-aside__subheading{ - margin: 12px 0 8px; - font-size: 12px; + margin: 13px 0 8px; + font-size: 12.5px; font-weight: 800; - opacity: .8; + line-height: 1.35; + opacity: .82; text-transform: uppercase; letter-spacing: .04em; } @@ -432,13 +438,13 @@ const relationSections = [ } .glossary-aside__list li{ - margin: 6px 0; + margin: 7px 0; } .glossary-aside__list a{ text-decoration: none; - font-size: 13px; - line-height: 1.3; + font-size: 14px; + line-height: 1.4; } .glossary-aside__list a.is-active{ diff --git a/src/components/GlossaryHomeAside.astro b/src/components/GlossaryHomeAside.astro index 242332c..4c7ff4e 100644 --- a/src/components/GlossaryHomeAside.astro +++ b/src/components/GlossaryHomeAside.astro @@ -74,13 +74,14 @@ const metaRegimesCount = allEntries.filter((entry) => familyOf(entry) === "meta- const portalLinks = [ { href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" }, + { href: "/glossaire/index-complet/", label: "Index complet" }, + { href: "/glossaire/paradigme-archicratique/", label: "Paradigme archicratique" }, { 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/verbes-de-la-scene/", label: "Verbes de la scène" }, - { href: "/glossaire/index-complet/", label: "Index complet" }, ]; --- @@ -100,7 +101,6 @@ const portalLinks = [ -

Parcours du glossaire

)} +
+
+
+

Paradigme archicratique

+

+ Cette page de synthèse offre une vue d’ensemble du système + archicratique. Elle articule le noyau conceptuel, les scènes de + comparution, les dynamiques, les tensions irréductibles, les + méta-régimes de co-viabilité et le paysage théorique dans lequel + l’archicratie se situe et se distingue. +

+
+ + + Ouvrir la synthèse + +
+ +
+ + Paradigme archicratique + + Saisir la logique d’ensemble du système archicratique : de + l’arcalité et de la cratialité jusqu’aux scènes, aux tensions, aux + formes de co-viabilité et aux traditions de comparaison + mobilisées. + + Portail de synthèse générale + +
+
+ {scenes.length > 0 && (
@@ -293,11 +330,11 @@ const indexCompletPageHref = "/glossaire/index-complet/";

Prolonger la lecture

- Quatre parcours complémentaires permettent désormais d’élargir la - lecture : l’un vers les tensions irréductibles, l’un vers les verbes - de la scène archicratique, l’un vers le paysage théorique dans - lequel l’archicratie se situe et se distingue, l’autre vers - l’ensemble alphabétique complet des entrées du glossaire. + Quatre parcours complémentaires permettent d’élargir la lecture : + l’un vers les tensions irréductibles, l’un vers les verbes de la scène + archicratique, l’un vers le paysage théorique dans lequel l’archicratie + se situe et se distingue, l’autre vers l’ensemble alphabétique complet + des entrées du glossaire.

@@ -839,4 +876,4 @@ const indexCompletPageHref = "/glossaire/index-complet/"; } } - \ No newline at end of file + \ No newline at end of file diff --git a/src/pages/glossaire/paradigme-archicratique.astro b/src/pages/glossaire/paradigme-archicratique.astro new file mode 100644 index 0000000..cc322e6 --- /dev/null +++ b/src/pages/glossaire/paradigme-archicratique.astro @@ -0,0 +1,1340 @@ +--- +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])); + +function resolveOrderedEntries(slugs = []) { + return slugs + .map((slug) => bySlug.get(slug)) + .filter(Boolean); +} + +function uniqueBySlug(list = []) { + const seen = new Set(); + const out = []; + for (const entry of list) { + const slug = slugOf(entry); + if (seen.has(slug)) continue; + seen.add(slug); + out.push(entry); + } + return out; +} + +const archicratie = bySlug.get("archicratie"); + +const coreEntries = resolveOrderedEntries([ + "archicratie", + "tension", + "arcalite", + "cratialite", + "archicration", + "co-viabilite", +]); + +const displacementItems = [ + { + title: "Du pouvoir visible vers l’architecture de régulation", + text: + "L’analyse ne se limite plus aux acteurs qui gouvernent explicitement. Elle remonte vers les dispositifs, médiations et compositions qui rendent la régulation effective, durable ou opaque.", + }, + { + title: "Du commandement vers la co-viabilité", + text: + "La question centrale n’est plus seulement celle de l’obéissance, de la décision ou de la souveraineté, mais celle de la tenue d’un monde commun traversé de tensions multiples.", + }, + { + title: "De l’institution isolée vers la triade archicratique", + text: + "Le paradigme pense les régulations comme compositions variables d’arcalité, de cratialité et d’archicration, plutôt que comme blocs univoques déjà donnés.", + }, + { + title: "De l’efficacité à la comparution", + text: + "Une régulation ne vaut pas seulement par ses effets. Elle doit aussi pouvoir comparaître, être diagnostiquée, contestée, révisée et éventuellement réinstituée.", + }, +]; + +const sceneEntries = resolveOrderedEntries([ + "scene-depreuve", + "scene-darchicration", + "scene-manquante", + "scene-empechee", + "institution-invisible", + "monde-instituable", + "atopie", + "synchrotopie", +]); + +const dynamicEntries = resolveOrderedEntries([ + "archicratisation", + "desarchicration", + "autarchicration", + "autarchicratie", + "obliteration-archicratique", + "archicration-obliteree", + "hyperarcalite", + "hypercratialite", +]); + +const methodEntries = resolveOrderedEntries([ + "archicrate", + "figures-archicratiques", + "archicratique", + "desarchicratique", + "archicratistique", + "archidiagnostic", +]); + +const typologyEntries = resolveOrderedEntries([ + "meta-regime", + "meta-regime-archicratique", + "regime-de-co-viabilite", + "archeogenese", + "archicrations-differentielles-et-formes-hybrides", + "archicrations-proto-symboliques", + "archicrations-scripturo-normatives", + "archicrations-normativo-politiques", + "archicrations-marchandes", + "archicrations-techno-logistiques", +]); + +const paradigmEntries = resolveOrderedEntries([ + "gouvernementalite", + "domination-legale-rationnelle", + "cybernetique", + "democratie-deliberative", + "dissensus-politique", + "gouvernance-des-communs", + "agencement-machinique", + "technodiversite-et-cosmotechnie", +]); + +const doctrineEntries = resolveOrderedEntries([ + "decisionnisme-souverain", + "contractualisme-hobbesien", + "droit-naturel-et-propriete", + "volonte-generale", +]); + +const tensionEntries = resolveOrderedEntries([ + "subsistance-vivante-et-captation-capitalistique", + "regulation-technique-et-legitimation-democratique", + "souverainetes-territoriales-et-interdependances-globales", + "memoire-symbolique-et-instantaneite-computationnelle", + "coexistence-ontologique-et-necessite-regulatrice", +]); + +const casIaEntries = resolveOrderedEntries([ + "audit-archicratique", + "cartographie-des-scenes-manquantes", + "journal-de-justification", + "droit-au-differe-contradictoire", + "tribunal-de-lalgorithme", + "coupe-circuit-citoyen", + "visa-daffectation", +]); + +const portalLinks = [ + { + href: "/glossaire/concepts-fondamentaux/", + title: "Concepts fondamentaux", + text: "Repartir du noyau minimal du paradigme : archicratie, tension, arcalité, cratialité, archicration et co-viabilité.", + }, + { + href: "/glossaire/scenes-archicratiques/", + title: "Scènes archicratiques", + text: "Explorer les formes de comparution, d’épreuve, d’empêchement et de réouverture de la régulation.", + }, + { + href: "/glossaire/tensions-irreductibles/", + title: "Tensions irréductibles", + text: "Revenir aux foyers structuraux de conflictualité à partir desquels l’archicration devient nécessaire.", + }, + { + href: "/glossaire/paradigmes/", + title: "Paradigmes et doctrines", + text: "Situer le paradigme archicratique dans son paysage de comparaison théorique.", + }, + { + href: "/glossaire/archicrations/", + title: "Archicrations", + text: "Parcourir les grands méta-régimes de co-viabilité et leurs formes différentielles ou hybrides.", + }, +]; + +const readingLinks = [ + { + href: "/glossaire/concepts-fondamentaux/", + title: "Concepts fondamentaux", + text: "Revenir au noyau cardinal du système archicratique.", + }, + { + href: "/glossaire/scenes-archicratiques/", + title: "Scènes archicratiques", + text: "Prolonger la lecture du paradigme par la question des scènes de comparution.", + }, + { + href: "/glossaire/paradigmes/", + title: "Paradigmes et doctrines", + text: "Retrouver les grandes traditions intellectuelles mises en dialogue avec l’archicratie.", + }, + { + href: "/glossaire/index-complet/", + title: "Index complet", + text: "Reparcourir l’ensemble du glossaire dans l’ordre alphabétique.", + }, +]; + +const aliases = archicratie?.data?.aliases ?? []; +const comparisonTraditions = archicratie?.data?.comparisonTraditions ?? []; + +const internalCount = uniqueBySlug([ + ...sceneEntries, + ...dynamicEntries, + ...methodEntries, +]).length; + +const constellationCount = uniqueBySlug([ + ...typologyEntries, + ...paradigmEntries, + ...doctrineEntries, +]).length; + +const tensionCount = tensionEntries.length; +const translationCount = casIaEntries.length; +--- + + + + + + +
+
+

Parcours du glossaire

+

Paradigme archicratique

+ +

+ Le paradigme archicratique propose d’intelligibiliser les sociétés + humaines à partir de leurs architectures de régulation : + non pas seulement à partir du gouvernement visible, du droit positif, + du marché ou de la souveraineté, mais à partir de la manière dont un + ordre collectif se fonde, s’effectue, se met en scène, se ferme, + s’expose ou se réouvre. +

+ +
+
+

+ Il ne réduit donc jamais la régulation à une seule logique. Il cherche + au contraire à penser ensemble les prises de fondation, les chaînes + d’effectuation, les scènes de comparution, les dynamiques de fermeture + ou d’oblitération et les conditions de la co-viabilité d’un monde + commun. +

+ +

+ Cette page sert de portail de synthèse. Elle organise une vue d’ensemble + du système archicratique : son noyau conceptuel, son architecture + interne, ses formes typologiques, ses comparaisons théoriques, ses + tensions irréductibles et ses traductions contemporaines, notamment + dans le cas des systèmes d’IA. +

+
+ + +
+
+ +
+
+

Cœur de paradigme

+
+ +

+ Cette page prend pour pivot la notion d’Archicratie, + entendue comme méta-régime de régulation par lequel les sociétés + organisent la co-viabilité de leurs dynamiques internes à travers des + compositions variables d’arcalité, de cratialité et d’archicration. +

+ + {archicratie ? ( +
+
Entrée principale
+

+ {archicratie.data.term} +

+

{archicratie.data.definitionShort}

+ + {(aliases.length > 0 || comparisonTraditions.length > 0) && ( +
+ {aliases.length > 0 && ( +

+ Alias : {aliases.join(" / ")} +

+ )} + {comparisonTraditions.length > 0 && ( +

+ Traditions de comparaison : {comparisonTraditions.join(" / ")} +

+ )} +
+ )} +
+ ) : ( +

+ La fiche principale n’est pas encore disponible dans la collection. +

+ )} +
+ +
+
+

Ce que déplace le paradigme

+ + {displacementItems.length} déplacement{displacementItems.length > 1 ? "s" : ""} + +
+ +

+ Le paradigme archicratique ne vient pas simplement ajouter un terme de + plus au vocabulaire politique. Il déplace le centre de gravité de + l’analyse en réorientant la manière même de poser la question de + l’ordre, de la régulation et de leur mise à l’épreuve. +

+ +
+ {displacementItems.map((item) => ( +
+ {item.title} + {item.text} +
+ ))} +
+
+ + {coreEntries.length > 0 && ( +
+
+

Noyau conceptuel

+ + {coreEntries.length} notion{coreEntries.length > 1 ? "s" : ""} + +
+ +

+ Le paradigme archicratique ne se laisse pas réduire à une notion + unique. Il repose sur un noyau de concepts co-dépendants qui + permettent de penser ensemble les fondements de l’ordre, ses chaînes + d’effectuation, ses scènes de comparution et les conditions de sa + tenue co-viable. +

+ + +
+ )} + + {(sceneEntries.length > 0 || dynamicEntries.length > 0 || methodEntries.length > 0) && ( +
+
+

Architecture interne

+ + {internalCount} entrée{internalCount > 1 ? "s" : ""} + +
+ +

+ Le paradigme ne se réduit pas à un noyau abstrait. Il déploie une + architecture interne faite de scènes, de topologies, de dynamiques, + de pathologies, de figures et d’opérateurs méthodologiques. +

+ + {sceneEntries.length > 0 && ( +
+

Scènes, topologies et instituabilité

+

+ Le paradigme archicratique ne pense pas seulement ce qui régule, + mais aussi les lieux, les formats et les conditions par lesquels + cette régulation peut comparaître ou se dérober. +

+ + +
+ )} + + {dynamicEntries.length > 0 && ( +
+

Dynamiques et pathologies

+

+ Toute architecture de régulation se transforme, se ferme, se + dégrade ou se réouvre. Le paradigme ne décrit donc pas seulement + des formes, mais aussi leurs trajectoires. +

+ +
+ {dynamicEntries.map((entry) => ( + + {entry.data.term} + {entry.data.definitionShort} + + ))} +
+
+ )} + + {methodEntries.length > 0 && ( +
+

Figures et opérateurs méthodologiques

+

+ Le paradigme suppose enfin des figures, des qualifications et des + instruments d’analyse capables de rendre la régulation lisible, + diagnosable, cartographiable et politiquement adressable. +

+ +
+ {methodEntries.map((entry) => ( + + {entry.data.term} + {entry.data.definitionShort} + + ))} +
+
+ )} +
+ )} + + {(typologyEntries.length > 0 || paradigmEntries.length > 0 || doctrineEntries.length > 0) && ( +
+
+

Constellation théorique

+ + {constellationCount} entrée{constellationCount > 1 ? "s" : ""} + +
+ +

+ Le paradigme archicratique s’ouvre vers une constellation plus large : + typologie des régimes de co-viabilité, traditions concurrentes ou + complémentaires et doctrines fondatrices à partir desquelles ses + déplacements deviennent plus nettement comparables. +

+ + {typologyEntries.length > 0 && ( +
+

Typologie des régimes de co-viabilité

+

+ Le paradigme ne vaut pas seulement comme noyau conceptuel. Il + s’ouvre aussi sur une typologie des formes de régulation et sur + les grandes matrices à partir desquelles les sociétés organisent + leur tenue collective. +

+ +
+ {typologyEntries.map((entry) => ( + + {entry.data.term} + {entry.data.definitionShort} + + ))} +
+
+ )} + + {paradigmEntries.length > 0 && ( +
+

Paradigmes mobilisés

+

+ L’archicratie ne s’élabore pas dans un vide théorique. Elle + dialogue avec plusieurs paradigmes qui éclairent ses voisinages, + ses contrastes et ses points d’appui. +

+ + +
+ )} + + {doctrineEntries.length > 0 && ( +
+

Doctrines fondatrices

+

+ Certaines doctrines classiques continuent de servir de contrepoints + ou de points de départ obligés. Le paradigme archicratique les + reprend, les déplace et les resitue dans une écologie plus large + de la régulation. +

+ + +
+ )} +
+ )} + + {tensionEntries.length > 0 && ( +
+
+

Tensions irréductibles

+ + {tensionCount} tension{tensionCount > 1 ? "s" : ""} + +
+ +

+ Le paradigme archicratique ne pense pas la régulation comme suppression + des contradictions, mais comme organisation de tensions durables, + souvent irréductibles, à partir desquelles la co-viabilité devient + nécessaire. +

+ +
+ {tensionEntries.map((entry) => ( + + {entry.data.term} + {entry.data.definitionShort} + + ))} +
+
+ )} + + {(casIaEntries.length > 0 || portalLinks.length > 0) && ( +
+
+

Traductions et prolongements

+ + {translationCount} dispositif{translationCount > 1 ? "s" : ""} + +
+ +

+ L’un des intérêts majeurs du paradigme archicratique est de permettre + des traductions institutionnelles concrètes. Dans le cas des systèmes + d’IA, il donne lieu à des dispositifs destinés à rouvrir les chaînes + de décision, documenter les justifications et reconstruire de + véritables scènes de comparution. +

+ + {casIaEntries.length > 0 && ( +
+

Traduction contemporaine : Cas IA

+
+ {casIaEntries.map((entry) => ( + + {entry.data.term} + {entry.data.definitionShort} + + ))} +
+
+ )} + + {portalLinks.length > 0 && ( +
+

Portails voisins déjà stabilisés

+
+ {portalLinks.map((item) => ( + + {item.title} + {item.text} + + ))} +
+
+ )} +
+ )} + +
+
+

Prolonger la lecture

+
+ +

+ Cette page a vocation à servir de portail-mère du glossaire. Elle + oriente vers les autres parcours déjà stabilisés sans se substituer aux + fiches détaillées ni aux pages thématiques spécialisées. +

+ +
+ {readingLinks.map((item) => ( + + {item.title} + {item.text} + + ))} +
+
+ +
+

Portée d’ensemble

+

+ Le paradigme archicratique ne demande pas seulement qui gouverne. + Il demande par quelles architectures un ordre collectif tient, se + transforme, se dispute, s’oblitère ou se réouvre. En articulant + fondation, + effectuation, + exposition régulatrice, + tension et + co-viabilité, il permet de + penser des mondes où la régulation n’est ni purement souveraine, ni + seulement technique, ni simplement opaque, mais toujours susceptible + d’être comprise, diagnostiquée, mise à l’épreuve et réinstituée. +

+
+
+ + +
+ + \ No newline at end of file diff --git a/src/pages/glossaire/paradigmes.astro b/src/pages/glossaire/paradigmes.astro index b28033f..7364f29 100644 --- a/src/pages/glossaire/paradigmes.astro +++ b/src/pages/glossaire/paradigmes.astro @@ -66,21 +66,44 @@ const paradigmesCount = paradigmes.length;
-
+

Cartographie théorique

Paradigmes et doctrines

+

L’archicratie ne se déploie pas dans le vide. Elle s’inscrit dans un paysage intellectuel plus large où se croisent des doctrines fondatrices de l’ordre et des paradigmes de régulation des collectifs.

-

- On appellera ici doctrines fondatrices les formulations - qui posent un principe premier de légitimité, de souveraineté ou d’ordre - politique. On appellera paradigmes régulateurs les - cadres théoriques qui décrivent des modes de tenue, de conflictualité, - d’administration, de reproduction ou de transformation des sociétés. -

+ +
+
+

+ On appellera ici doctrines fondatrices les formulations + qui posent un principe premier de légitimité, de souveraineté ou d’ordre + politique. On appellera paradigmes régulateurs les + cadres théoriques qui décrivent des modes de tenue, de conflictualité, + d’administration, de reproduction ou de transformation des sociétés. +

+
+ + +
{doctrines.length > 0 && ( @@ -227,12 +250,20 @@ const paradigmesCount = paradigmes.length; const body = document.body; const root = document.documentElement; const hero = document.querySelector("[data-theo-hero]"); + const follow = document.getElementById("reading-follow"); + const heroMore = document.getElementById("theo-hero-more"); + const heroToggle = document.getElementById("theo-hero-toggle"); - if (!body || !root || !hero) return; + if (!body || !root || !hero || !follow) return; const BODY_CLASS = "is-paradigmes-page"; const FOLLOW_ON_CLASS = "theo-follow-on"; + const EXPANDED_CLASS = "theo-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); @@ -246,6 +277,12 @@ const paradigmesCount = paradigmes.length; }); }; + 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(); @@ -257,22 +294,121 @@ const paradigmesCount = paradigmes.length; }; const syncFollowState = () => { - const follow = document.getElementById("reading-follow"); + const on = computeFollowOn(); + body.classList.toggle(FOLLOW_ON_CLASS, on); + return on; + }; - const followOn = - !mqMobile.matches && - !!follow && - follow.classList.contains("is-on") && - follow.style.display !== "none" && - follow.getAttribute("aria-hidden") !== "true"; + const collapseHero = () => { + if (!body.classList.contains(EXPANDED_CLASS)) return; - body.classList.toggle(FOLLOW_ON_CLASS, followOn); + 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(); - applyLocalStickyHeight(); syncFollowState(); + syncHeroState(); + applyLocalStickyHeight(); }; let raf = 0; @@ -284,13 +420,17 @@ const paradigmesCount = paradigmes.length; }); }; - const follow = document.getElementById("reading-follow"); - const followObserver = - follow - ? new MutationObserver(schedule) - : null; + heroToggle?.addEventListener("click", () => { + expandHero(); + }); - followObserver?.observe(follow, { + const onScroll = () => { + maybeAutoCollapseOnScroll(); + schedule(); + }; + + const followObserver = new MutationObserver(schedule); + followObserver.observe(follow, { attributes: true, attributeFilter: ["class", "style", "aria-hidden"], subtree: false, @@ -303,6 +443,7 @@ const paradigmesCount = paradigmes.length; heroResizeObserver?.observe(hero); + window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", schedule); window.addEventListener("pageshow", schedule); @@ -346,13 +487,17 @@ const paradigmesCount = paradigmes.length; 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; + border-radius 180ms ease, + padding 180ms ease, + row-gap 180ms ease; } .theo-kicker{ - margin: 0 0 10px; + margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; @@ -360,23 +505,75 @@ const paradigmesCount = paradigmes.length; } .theo-hero h1{ - margin: 0 0 14px; + 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; } .theo-intro{ - max-width: 76ch; 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; } - .theo-intro + .theo-intro{ - margin-top: 14px; + .theo-hero-collapsible{ + display: grid; + row-gap: 6px; + } + + .theo-hero-more{ + display: grid; + row-gap: 14px; + max-height: 18rem; + overflow: hidden; + opacity: 1; + transition: + max-height 220ms ease, + opacity 180ms ease; + } + + .theo-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; + } + + .theo-hero-toggle:hover{ + opacity: .84; + } + + .theo-hero-toggle:focus-visible{ + outline: 2px solid rgba(0,217,255,0.24); + outline-offset: 4px; + border-radius: 4px; + } + + .theo-hero-toggle[hidden]{ + display: none !important; } .theo-section{ @@ -521,10 +718,33 @@ const paradigmesCount = paradigmes.length; :global(body.is-paradigmes-page.theo-follow-on .theo-hero){ margin-bottom: 0; + padding: 12px 16px 14px; + row-gap: 10px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + :global(body.is-paradigmes-page.theo-follow-on .theo-hero h1){ + font-size: clamp(1.9rem, 3.2vw, 2.55rem); + } + + :global(body.is-paradigmes-page.theo-follow-on .theo-intro){ + max-width: 68ch; + font-size: .98rem; + line-height: 1.48; + } + + :global(body.is-paradigmes-page.theo-follow-on:not(.theo-hero-expanded) .theo-hero-more){ + max-height: 0; + opacity: 0; + overflow: hidden; + pointer-events: none; + } + + :global(body.is-paradigmes-page.theo-follow-on:not(.theo-hero-expanded) .theo-hero-toggle){ + display: inline-flex; + } + :global(body.is-paradigmes-page.theo-follow-on #reading-follow .reading-follow__inner){ border-top-left-radius: 0; border-top-right-radius: 0; @@ -548,11 +768,29 @@ const paradigmesCount = paradigmes.length; position: static; border-radius: 22px; margin-bottom: 20px; + padding: 14px 14px 16px; + row-gap: 12px; + } + + .theo-intro{ + max-width: none; + } + + .theo-hero-more{ + max-height: none; + opacity: 1; + overflow: visible; + } + + .theo-hero-toggle{ + display: none !important; } :global(body.is-paradigmes-page.theo-follow-on .theo-hero){ border-radius: 22px; margin-bottom: 20px; + padding: 14px 14px 16px; + row-gap: 12px; } } diff --git a/src/pages/glossaire/scenes-archicratiques.astro b/src/pages/glossaire/scenes-archicratiques.astro index 9204876..68af976 100644 --- a/src/pages/glossaire/scenes-archicratiques.astro +++ b/src/pages/glossaire/scenes-archicratiques.astro @@ -107,21 +107,44 @@ const constellationCount = relatedEntries.length;
-
-

Parcours du glossaire

-

Scènes archicratiques

-

- 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. -

-

- 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. -

+
+

Parcours du glossaire

+

Scènes archicratiques

+ +

+ 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. +

+ +
+
+

+ 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. +

+
+ +
+
@@ -310,23 +333,29 @@ const constellationCount = relatedEntries.length;
- + }; + + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", boot, { once: true }); + } else { + boot(); + } + })(); + \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index 69345f2..64351cc 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -442,10 +442,10 @@ html{ scroll-behavior: smooth; } opacity: .96; } .rf-h3{ - font-size: var(--rf-h3-size); - line-height: var(--rf-h3-lh); - font-weight: var(--rf-h3-fw); - opacity: .92; + font-size: calc(var(--rf-h2-size, 1.5rem) * 0.72); + line-height: calc(var(--rf-h2-lh, 1.25) * 0.9); + font-weight: var(--rf-h3-fw, 650); + opacity: .86; } .rf-line:hover{ text-decoration: underline; }