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