content(home): aligner les accès sur Archicratie

Reviewed-on: #361

src/components/GlossaryHomeAside.astro

@@ -192,120 +192,47 @@ const {
     word-break: break-word;
   }
 
-  @media (max-width: 860px){
-    .glossary-home-aside{
-      gap: 10px;
-    }
-
-    .glossary-home-aside__block{
-      border-radius: 14px;
-    }
-
-    .glossary-home-aside__block--intro{
-      padding: 12px;
-    }
-
-    .glossary-home-aside__title{
-      font-size: 19px;
-      line-height: 1.18;
-    }
-
-    .glossary-home-aside__meta{
-      margin-top: 6px;
-      font-size: 12px;
-      line-height: 1.32;
-    }
-
-    .glossary-home-aside__pills{
-      gap: 6px;
-      margin-top: 9px;
-    }
-
-    .glossary-home-aside__pill{
-      padding: 4px 9px;
-      font-size: 12px;
-      line-height: 1.28;
-    }
-
-    .glossary-home-aside__summary{
-      padding: 12px;
-    }
-
-    .glossary-home-aside__heading{
-      font-size: 17px;
-      line-height: 1.2;
-    }
-
-    .glossary-home-aside__panel{
-      padding: 0 12px 12px;
-    }
-
-    .glossary-home-aside__list li{
-      margin: 5px 0;
-    }
-
-    .glossary-home-aside__list a{
-      font-size: 14px;
-      line-height: 1.34;
-    }
-
-    .glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{
-      display: none;
-    }
-  }
-
-  @media (max-width: 860px){
-    .glossary-home-aside__disclosure{
-      background: rgba(127,127,127,0.045);
-    }
-
-    .glossary-home-aside__disclosure[open] .glossary-home-aside__summary{
-      border-bottom: 1px solid rgba(127,127,127,0.12);
-    }
-  }
-
-  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+  @media (max-width: 980px){
     .glossary-home-aside{
       gap: 8px;
+      margin-bottom: 12px;
     }
 
     .glossary-home-aside__block{
-      border-radius: 12px;
+      border-radius: 13px;
     }
 
     .glossary-home-aside__block--intro{
-      padding: 10px 11px;
+      padding: 10px 12px;
     }
 
     .glossary-home-aside__title{
-      font-size: 16px;
-      line-height: 1.14;
+      font-size: 15px;
+      line-height: 1.15;
     }
 
     .glossary-home-aside__meta{
-      font-size: 11px;
-      line-height: 1.26;
-      margin-top: 5px;
+      display: none;
     }
 
     .glossary-home-aside__pills{
       gap: 5px;
-      margin-top: 8px;
+      margin-top: 7px;
     }
 
     .glossary-home-aside__pill{
       padding: 3px 8px;
       font-size: 11px;
-      line-height: 1.2;
+      line-height: 1.18;
     }
 
     .glossary-home-aside__summary{
-      padding: 10px 11px;
+      padding: 9px 11px;
     }
 
     .glossary-home-aside__heading{
-      font-size: 15px;
-      line-height: 1.16;
+      font-size: 14px;
+      line-height: 1.15;
     }
 
     .glossary-home-aside__panel{
@@ -320,9 +247,80 @@ const {
       font-size: 13px;
       line-height: 1.28;
     }
+
+    .glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{
+      display: none;
+    }
   }
 
-  @media (min-width: 861px){
+  @media (max-width: 980px){
+    .glossary-home-aside__disclosure{
+      background: rgba(127,127,127,0.045);
+    }
+
+    .glossary-home-aside__disclosure[open] .glossary-home-aside__summary{
+      border-bottom: 1px solid rgba(127,127,127,0.12);
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .glossary-home-aside{
+      gap: 7px;
+      margin-bottom: 10px;
+    }
+
+    .glossary-home-aside__block{
+      border-radius: 12px;
+    }
+
+    .glossary-home-aside__block--intro{
+      padding: 9px 10px;
+    }
+
+    .glossary-home-aside__title{
+      font-size: 14px;
+      line-height: 1.12;
+    }
+
+    .glossary-home-aside__meta{
+      display: none;
+    }
+
+    .glossary-home-aside__pills{
+      gap: 4px;
+      margin-top: 6px;
+    }
+
+    .glossary-home-aside__pill{
+      padding: 2px 7px;
+      font-size: 10.5px;
+      line-height: 1.16;
+    }
+
+    .glossary-home-aside__summary{
+      padding: 8px 10px;
+    }
+
+    .glossary-home-aside__heading{
+      font-size: 13px;
+      line-height: 1.12;
+    }
+
+    .glossary-home-aside__panel{
+      padding: 0 10px 9px;
+    }
+
+    .glossary-home-aside__list li{
+      margin: 3px 0;
+    }
+
+    .glossary-home-aside__list a{
+      font-size: 12px;
+      line-height: 1.22;
+    }
+  }
+
+  @media (min-width: 981px){
     .glossary-home-aside__summary{
       cursor: default;
     }
@@ -346,28 +344,32 @@ const {
 
 <script is:inline>
   (() => {
+    let wasCompact = null;
+
     const syncMobileDisclosure = () => {
-      const mobile = window.matchMedia("(max-width: 860px)").matches;
+      const stackedLayout = window.matchMedia("(max-width: 980px)").matches;
       const smallLandscape = window.matchMedia(
         "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
       ).matches;
 
-      const compact = mobile || smallLandscape;
+      const compact = stackedLayout || smallLandscape;
+      const enteringCompact = compact && wasCompact !== true;
 
       document
         .querySelectorAll(".glossary-home-aside__disclosure")
-        .forEach((el, index) => {
+        .forEach((el) => {
           if (!(el instanceof HTMLDetailsElement)) return;
 
           if (compact) {
-            if (!el.dataset.mobileInit) {
-              el.open = index === 0;
-              el.dataset.mobileInit = "true";
+            if (enteringCompact) {
+              el.open = false;
             }
           } else {
             el.open = true;
           }
         });
+
+      wasCompact = compact;
     };
 
     if (document.readyState === "loading") {

src/components/GlossaryHomeHero.astro

@@ -457,4 +457,292 @@ const {
       line-height: 1.08 !important;
     }
   }
+
+    /* =========================================================
+   Glossaire home — états du hero sticky
+   ========================================================= */
+
+  /*
+    Principe :
+    - le follow peut respirer sans ellipsis brutal ;
+    - l’intro reste strictement clampée en mode collapsed ;
+    - l’intro ne redevient complète qu’en mode expanded ;
+    - mobile/tablette <= 860px reste neutralisé plus haut.
+  */
+
+  .glossary-hero-follow{
+    height: auto;
+    max-height: none;
+    max-width: min(100%, 34ch);
+    overflow: visible;
+    white-space: normal;
+    text-overflow: clip;
+    line-height: 1.08;
+  }
+
+  :global(body.glossary-home-follow-on) .glossary-hero{
+    min-height: auto;
+    height: auto;
+  }
+
+  :global(body.glossary-home-follow-on) .glossary-hero h1{
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+  }
+
+  /*
+    État collapsed :
+    l’intro DOIT rester compactée. Cette règle doit gagner contre
+    les anciennes règles anti-troncature du follow.
+  */
+  :global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero p#glossary-hero-intro{
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    max-height: calc(2 * 1.34em);
+    overflow: hidden;
+    white-space: normal;
+    text-overflow: clip;
+  }
+
+  :global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero__toggle{
+    display: inline-flex;
+    margin-top: 2px;
+    align-self: start;
+  }
+
+  /*
+    État expanded :
+    l’utilisateur a explicitement demandé à lire la suite,
+    donc l’intro redevient complète.
+  */
+  :global(body.glossary-home-hero-expanded) .glossary-hero p#glossary-hero-intro{
+    display: block;
+    -webkit-line-clamp: unset;
+    line-clamp: unset;
+    -webkit-box-orient: unset;
+    max-height: none;
+    overflow: visible;
+    white-space: normal;
+    text-overflow: clip;
+  }
+
+  :global(body.glossary-home-hero-expanded) .glossary-hero__toggle{
+    display: none !important;
+  }
+
+  @media (min-width: 861px) and (max-width: 1240px){
+    .glossary-hero-follow{
+      max-width: min(100%, 36ch);
+      font-size: clamp(1.55rem, 3.1vw, 2.05rem);
+      line-height: 1.08;
+    }
+  }
+  /* =========================================================
+     Glossaire home — sticky compact mobile/tablette avec H2 local
+     ========================================================= */
+
+  @media (max-width: 980px){
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero{
+      position: sticky !important;
+      top: calc(var(--sticky-header-h, 0px) + 8px) !important;
+      z-index: 8 !important;
+      transform: none !important;
+      overflow: hidden !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero{
+      padding: 8px 10px 9px !important;
+      row-gap: 4px !important;
+      border-radius: 16px !important;
+      margin-bottom: 10px !important;
+      box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-kicker{
+      font-size: 9px !important;
+      line-height: 1.05 !important;
+      letter-spacing: .11em !important;
+      opacity: .72 !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero h1{
+      font-size: clamp(1.35rem, 5.1vw, 1.72rem) !important;
+      line-height: 1.02 !important;
+      letter-spacing: -.03em !important;
+      white-space: normal !important;
+      overflow: visible !important;
+      text-overflow: clip !important;
+      max-width: 100% !important;
+      margin: 0 !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero p#glossary-hero-intro{
+      display: -webkit-box !important;
+      -webkit-box-orient: vertical !important;
+      -webkit-line-clamp: 2 !important;
+      line-clamp: 2 !important;
+      max-height: calc(2 * 1.12em) !important;
+      overflow: hidden !important;
+      white-space: normal !important;
+      text-overflow: clip !important;
+      font-size: .72rem !important;
+      line-height: 1.12 !important;
+      opacity: .78 !important;
+      margin: 0 !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero__toggle{
+      display: none !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero-follow{
+      display: none !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero-follow.is-visible{
+      display: block !important;
+      width: 100% !important;
+      max-width: 100% !important;
+      min-height: 0 !important;
+      margin-top: 4px !important;
+      padding-top: 6px !important;
+      border-top: 1px solid rgba(127,127,127,.18) !important;
+      opacity: .98 !important;
+      transform: none !important;
+      filter: none !important;
+      white-space: normal !important;
+      overflow: hidden !important;
+      text-overflow: clip !important;
+      color: inherit !important;
+    }
+  }
+
+  @media (min-width: 761px) and (max-width: 980px){
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero{
+      padding: 10px 14px 11px !important;
+      row-gap: 5px !important;
+      border-radius: 18px !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero h1{
+      font-size: clamp(1.65rem, 3.4vw, 2.1rem) !important;
+      line-height: 1.02 !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero p#glossary-hero-intro{
+      font-size: .82rem !important;
+      line-height: 1.18 !important;
+      max-height: calc(2 * 1.18em) !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero-follow.is-visible{
+      margin-top: 5px !important;
+      padding-top: 7px !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero{
+      top: calc(var(--sticky-header-h, 0px) + 6px) !important;
+      padding: 6px 9px 7px !important;
+      row-gap: 3px !important;
+      border-radius: 13px !important;
+      margin-bottom: 8px !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-kicker{
+      font-size: 8px !important;
+      line-height: 1 !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero h1{
+      font-size: clamp(1.08rem, 3.2vw, 1.34rem) !important;
+      line-height: 1 !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero p#glossary-hero-intro{
+      -webkit-line-clamp: 1 !important;
+      line-clamp: 1 !important;
+      max-height: 1.08em !important;
+      font-size: .64rem !important;
+      line-height: 1.08 !important;
+      opacity: .72 !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero-follow.is-visible{
+      margin-top: 3px !important;
+      padding-top: 4px !important;
+      font-size: .86rem !important;
+      line-height: 1.04 !important;
+    }
+  }
+
+  /* =========================================================
+     Glossaire home — polish premium fluidité sticky
+     ========================================================= */
+
+  @media (max-width: 980px){
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero{
+      transition:
+        padding 180ms ease,
+        border-radius 180ms ease,
+        box-shadow 180ms ease,
+        background 180ms ease,
+        margin-bottom 180ms ease;
+      will-change: padding, border-radius, box-shadow;
+      backface-visibility: hidden;
+      transform: translateZ(0) !important;
+      background: rgba(0,0,0,.92) !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero h1,
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-kicker,
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero p#glossary-hero-intro{
+      transition:
+        font-size 180ms ease,
+        line-height 180ms ease,
+        opacity 180ms ease,
+        max-height 180ms ease;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero-follow{
+      display: block !important;
+      max-height: 0 !important;
+      margin-top: 0 !important;
+      padding-top: 0 !important;
+      border-top: 0 !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      overflow: hidden !important;
+      transform: translateY(-4px) !important;
+      transition:
+        max-height 180ms ease,
+        opacity 180ms ease,
+        transform 180ms ease,
+        padding-top 180ms ease,
+        margin-top 180ms ease;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero-follow.is-visible{
+      max-height: 3.2em !important;
+      opacity: .98 !important;
+      visibility: visible !important;
+      transform: translateY(0) !important;
+      border-top: 1px solid rgba(127,127,127,.18) !important;
+    }
+
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero{
+      background: rgba(0,0,0,.96) !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero-follow.is-visible{
+      max-height: 2.4em !important;
+    }
+  }
+
 </style>

src/components/GlossaryPortalStickySync.astro

@@ -5,6 +5,7 @@ interface Props {
   sectionHeadSelector?: string;
   mobileBreakpoint?: number;
   autoCollapseDelta?: number;
+  compactSticky?: boolean;
 }
 
 const {
@@ -13,12 +14,13 @@ const {
   sectionHeadSelector = ".glossary-portal-section__head",
   mobileBreakpoint = 860,
   autoCollapseDelta = 160,
+  compactSticky = false,
 } = Astro.props;
 ---
 
 <script
   is:inline
-  define:vars={{ heroMoreId, heroToggleId, sectionHeadSelector, mobileBreakpoint, autoCollapseDelta }}
+  define:vars={{ heroMoreId, heroToggleId, sectionHeadSelector, mobileBreakpoint, autoCollapseDelta, compactSticky }}
 >
   (() => {
     const boot = () => {
@@ -32,6 +34,7 @@ const {
       if (!body || !root || !hero || !follow) return;
 
       const BODY_CLASS = "is-glossary-portal-page";
+      const COMPACT_STICKY_CLASS = "glossary-portal-compact-sticky";
       const FOLLOW_ON_CLASS = "glossary-portal-follow-on";
       const EXPANDED_CLASS = "glossary-portal-hero-expanded";
       const CONDENSED_CLASS = "glossary-portal-hero-condensed";
@@ -47,12 +50,24 @@ const {
       let lastFollowOn = null;
       let lastCondensed = null;
       let lastHeroHeight = -1;
+      let heroPinStartY = null;
+      let lastCompactFollowTitle = null;
+      let lastCompactFollowOn = null;
 
       body.classList.add(BODY_CLASS);
+      body.classList.toggle(COMPACT_STICKY_CLASS, Boolean(compactSticky));
 
       const isCompactViewport = () =>
         mqMobile.matches || mqSmallLandscape.matches;
 
+      const keepPortalPremiumOnCompact = () =>
+        Boolean(compactSticky) || body.classList.contains("is-index-complet-page");
+
+      const compactShouldDisablePortal = () =>
+        isCompactViewport() && !keepPortalPremiumOnCompact();
+
+      const compactStickyEnabled = () => Boolean(compactSticky);
+
       const stripLocalSticky = () => {
         document.querySelectorAll(sectionHeadSelector).forEach((el) => {
           el.classList.remove("is-sticky");
@@ -68,19 +83,49 @@ const {
         return Number.isFinite(n) ? n : 64;
       };
 
+
+      const captureHeroPinStart = (force = false) => {
+        if (!force && heroPinStartY != null) return heroPinStartY;
+
+        const stickyTop = readStickyTop();
+        const rect = hero.getBoundingClientRect();
+        const y = window.scrollY || window.pageYOffset || 0;
+
+        /*
+          Seuil documentaire réel : moment où le haut naturel du hero
+          rejoint le rail sticky. Ce seuil empêche la condensation au haut
+          de page lorsque le hero n'est pas encore embarqué dans le scroll.
+        */
+        heroPinStartY = Math.max(0, Math.round(y + rect.top - stickyTop));
+        return heroPinStartY;
+      };
+
+      const hasReachedHeroPinStart = () => {
+        const y = window.scrollY || window.pageYOffset || 0;
+        const start = captureHeroPinStart(false);
+        const rect = hero.getBoundingClientRect();
+        const stickyTop = readStickyTop();
+
+        /*
+          Condensation immédiate au moment réel d'accrochage :
+          - soit le scroll a atteint le seuil documentaire ;
+          - soit le hero est déjà visuellement posé sur son rail sticky.
+          Aucun délai artificiel ne doit retarder la troncature.
+        */
+        return y >= start - 1 || Math.abs(rect.top - stickyTop) <= 2;
+      };
+
       const computeFollowOn = () =>
-        !isCompactViewport() &&
+        body.classList.contains(CONDENSED_CLASS) &&
+        (!isCompactViewport() || compactStickyEnabled()) &&
         follow.classList.contains("is-on") &&
         follow.style.display !== "none" &&
         follow.getAttribute("aria-hidden") !== "true";
 
       const computeCondensed = () => {
-        if (isCompactViewport()) return false;
+        if (isCompactViewport() && !compactStickyEnabled()) return false;
 
-        const heroRect = hero.getBoundingClientRect();
-        const stickyTop = readStickyTop();
-
-        return heroRect.top <= stickyTop + 2;
+        return hasReachedHeroPinStart();
       };
 
       const measureHeroHeight = () =>
@@ -89,7 +134,7 @@ const {
       const PIN_EPS = 3;
 
       const isHeroPinned = () => {
-        if (isCompactViewport()) return false;
+        if (isCompactViewport() && !compactStickyEnabled()) return false;
 
         const rect = hero.getBoundingClientRect();
         const stickyTop = readStickyTop();
@@ -97,14 +142,73 @@ const {
 
         if (cs.position !== "sticky") return false;
 
-        const pinnedOnRail = Math.abs(rect.top - stickyTop) <= PIN_EPS;
         const stillVisible = rect.bottom > stickyTop + 24;
+        return hasReachedHeroPinStart() && stillVisible;
+      };
 
-        return pinnedOnRail && stillVisible;
+      const applyCompactHeroRail = () => {
+        /*
+          Les portails compactSticky doivent coller sous l’edition-bar.
+          Certaines couches CSS historiques peuvent encore forcer top:0.
+          On pose donc le rail en inline !important, uniquement pour les
+          portails génériques compacts, jamais pour l’index complet.
+        */
+        if (
+          !isCompactViewport() ||
+          !compactStickyEnabled() ||
+          body.classList.contains("is-index-complet-page")
+        ) {
+          hero.style.removeProperty("top");
+          return;
+        }
+
+        const stickyTop = readStickyTop();
+        hero.style.setProperty("top", `${Math.round(stickyTop)}px`, "important");
+      };
+
+      const applyCompactFollowRail = () => {
+        /*
+          Le reading-follow compact doit être collé sous le hero.
+          Certaines règles historiques de #reading-follow imposent top:-1px
+          avec une priorité supérieure au style simple. On pose donc le rail
+          en inline !important, uniquement pour les portails compacts génériques.
+        */
+        if (
+          !isCompactViewport() ||
+          !compactStickyEnabled() ||
+          body.classList.contains("is-index-complet-page")
+        ) {
+          follow.style.removeProperty("top");
+          follow.style.removeProperty("left");
+          follow.style.removeProperty("width");
+          return;
+        }
+
+        const stickyTop = readStickyTop();
+        const heroH = body.classList.contains(CONDENSED_CLASS)
+          ? measureHeroHeight()
+          : 0;
+
+        const top = Math.max(0, Math.round(stickyTop + heroH - 1));
+
+        follow.style.setProperty("position", "fixed", "important");
+        follow.style.setProperty("top", `${top}px`, "important");
+        follow.style.setProperty("left", "var(--reading-left)", "important");
+        follow.style.setProperty("width", "var(--reading-width)", "important");
+        follow.style.setProperty("z-index", "71", "important");
       };
 
       const applyLocalStickyHeight = () => {
-        const h = isHeroPinned() ? measureHeroHeight() : 0;
+        /*
+          Stabilisation premium :
+          une fois le hero condensé, on réserve sa hauteur réelle.
+          Cela évite les oscillations d’un frame où isHeroPinned()
+          peut repasser brièvement à false pendant le scroll.
+        */
+        const shouldReserveHero =
+          body.classList.contains(CONDENSED_CLASS) || isHeroPinned();
+
+        const h = shouldReserveHero ? measureHeroHeight() : 0;
         if (h === lastHeroHeight) return;
         lastHeroHeight = h;
 
@@ -183,7 +287,7 @@ const {
         const expanded = body.classList.contains(EXPANDED_CLASS);
         const collapsed = condensed && !expanded;
 
-        if (isCompactViewport() || !condensed) {
+        if ((isCompactViewport() && !compactStickyEnabled()) || !condensed) {
           body.classList.remove(EXPANDED_CLASS);
           expandedAtY = null;
 
@@ -208,9 +312,229 @@ const {
           heroToggle.setAttribute("aria-expanded", expanded ? "true" : "false");
         }
       };
+      /* GENERIC_COMPACT_FOLLOW_CLEAN_START
+         Portails génériques compactSticky :
+         - ligne 1 : section macro active ;
+         - ligne 2 : sous-tête interne active ;
+         - un titre ne devient actif qu'une fois complètement dépassé
+           par la bande réelle du reading-follow__inner.
+      */
+
+      const isGenericCompactPortal = () =>
+        isCompactViewport() &&
+        compactStickyEnabled() &&
+        !body.classList.contains("is-index-complet-page");
+
+      const compactFollowBand = () => {
+        const inner = follow.querySelector(".reading-follow__inner");
+        const innerRect = inner?.getBoundingClientRect();
+        const heroRect = hero.getBoundingClientRect();
+
+        if (innerRect && innerRect.height > 0) {
+          return {
+            top: innerRect.top,
+            bottom: innerRect.bottom,
+            height: innerRect.height,
+          };
+        }
+
+        const top = Math.max(readStickyTop(), heroRect.bottom || readStickyTop());
+        const height = 30;
+
+        return {
+          top,
+          bottom: top + height,
+          height,
+        };
+      };
+
+      const cleanFollowTitle = (el) => {
+        if (!el) return "";
+
+        const clone = el.cloneNode(true);
+
+        clone
+          .querySelectorAll(
+            [
+              ".glossary-portal-section__count",
+              "[class*='count']",
+              "[class*='index']",
+              "[class*='meta']",
+              "[class*='eyebrow']",
+              "[aria-hidden='true']"
+            ].join(",")
+          )
+          .forEach((node) => node.remove());
+
+        return clone.textContent?.replace(/\s+/g, " ").trim() ?? "";
+      };
+
+      const titleNodeFor = (node) =>
+        node?.matches?.("h2,h3,h4,[data-reading-title]")
+          ? node
+          : node?.querySelector?.("h2,h3,h4,[data-reading-title]") ?? node;
+
+      const passedTitleStateFrom = (nodes) => {
+        const band = compactFollowBand();
+        const bandCenter = band.top + band.height / 2;
+        let active = null;
+
+        for (const node of nodes) {
+          const titleNode = titleNodeFor(node);
+          const title = cleanFollowTitle(titleNode);
+          if (!title) continue;
+
+          const rect = titleNode.getBoundingClientRect();
+          if (rect.height <= 0) continue;
+
+          /*
+            Règle perceptive stabilisée :
+            la traversée commence quand le bas du follow rencontre le haut
+            du titre réel, et s'achève quand le haut du follow rencontre
+            le bas du titre réel.
+
+            Comme le follow n'anime pas deux titres concurrents, le basculement
+            se fait au milieu de cette traversée : quand le centre du titre
+            est passé au-dessus du centre de la bande follow.
+          */
+          const titleCenter = rect.top + rect.height / 2;
+
+          if (titleCenter <= bandCenter + 1) {
+            active = {
+              node,
+              titleNode,
+              title,
+            };
+            continue;
+          }
+
+          break;
+        }
+
+        return active;
+      };
+
+      const detailCandidatesFor = (sectionNode) => {
+        const section = sectionNode?.closest("section");
+        if (!section) return [];
+
+        const selector = [
+          ".glossary-portal-panel__head",
+          "[class*='__head']",
+          "[class*='__title']",
+          "h3",
+          "h4"
+        ].join(",");
+
+        return Array.from(section.querySelectorAll(selector)).filter((node) => {
+          if (node.closest(".glossary-portal-section__head")) return false;
+
+          const titleNode = titleNodeFor(node);
+          const title = cleanFollowTitle(titleNode);
+          if (!title) return false;
+
+          const rect = titleNode.getBoundingClientRect();
+          if (rect.height <= 0) return false;
+
+          return true;
+        });
+      };
+
+      const renderFollowTextLine = (inner, className, title) => {
+        if (!title) return;
+
+        let line = inner.querySelector(`.${className}`);
+        if (!line) {
+          line = document.createElement("div");
+          line.className = `rf-line ${className}`;
+          inner.appendChild(line);
+        }
+
+        line.textContent = title;
+      };
+
+      const setCompactFollowOff = () => {
+        lastCompactFollowTitle = null;
+
+        if (lastCompactFollowOn !== false) {
+          lastCompactFollowOn = false;
+          body.classList.remove(FOLLOW_ON_CLASS);
+          follow.classList.remove("is-on");
+          follow.setAttribute("aria-hidden", "true");
+        }
+
+        follow.style.display = "block";
+        follow.style.setProperty("opacity", "0", "important");
+        follow.style.setProperty("visibility", "hidden", "important");
+        follow.style.setProperty("pointer-events", "none", "important");
+
+        root.style.setProperty("--followbar-h", "0px");
+      };
+
+      const syncGenericCompactFollow = (condensed) => {
+        if (!isGenericCompactPortal()) return false;
+
+        if (!condensed) {
+          setCompactFollowOff();
+          return true;
+        }
+
+        const sectionHeads = Array.from(
+          document.querySelectorAll(".glossary-portal-section__head")
+        );
+
+        const sectionState = passedTitleStateFrom(sectionHeads);
+
+        if (!sectionState?.title) {
+          setCompactFollowOff();
+          return true;
+        }
+
+        const detailState = passedTitleStateFrom(detailCandidatesFor(sectionState.node));
+
+        follow.innerHTML = "";
+
+        const inner = document.createElement("div");
+        inner.className = "reading-follow__inner";
+
+        renderFollowTextLine(inner, "rf-h2", sectionState.title);
+
+        if (detailState?.title && detailState.title !== sectionState.title) {
+          renderFollowTextLine(inner, "rf-h3", detailState.title);
+        }
+
+        follow.appendChild(inner);
+
+        if (lastCompactFollowOn !== true) {
+          lastCompactFollowOn = true;
+          body.classList.add(FOLLOW_ON_CLASS);
+          follow.classList.add("is-on");
+          follow.setAttribute("aria-hidden", "false");
+        }
+
+        follow.style.display = "block";
+        follow.style.setProperty("opacity", "1", "important");
+        follow.style.setProperty("visibility", "visible", "important");
+        follow.style.setProperty("pointer-events", "auto", "important");
+        applyCompactFollowRail();
+
+        inner.style.setProperty("opacity", "1", "important");
+        inner.style.setProperty("visibility", "visible", "important");
+        inner.style.setProperty("display", "block", "important");
+
+        requestAnimationFrame(() => {
+          applyCompactFollowRail();
+          const h = Math.max(0, Math.round(follow.getBoundingClientRect().height || 0));
+          root.style.setProperty("--followbar-h", `${h}px`);
+        });
+
+        return true;
+      };
+
+      /* GENERIC_COMPACT_FOLLOW_CLEAN_END */
 
       const maybeAutoCollapseOnScroll = () => {
-        if (isCompactViewport()) {
+        if (isCompactViewport() && !compactStickyEnabled()) {
           lastScrollY = window.scrollY || 0;
           return;
         }
@@ -238,8 +562,9 @@ const {
 
       const syncAll = () => {
         stripLocalSticky();
+        applyCompactHeroRail();
 
-        if (isCompactViewport()) {
+        if (isCompactViewport() && !compactStickyEnabled()) {
           body.classList.remove(FOLLOW_ON_CLASS);
           body.classList.remove(CONDENSED_CLASS);
           body.classList.remove(EXPANDED_CLASS);
@@ -272,14 +597,27 @@ const {
 
         requestAnimationFrame(() => {
           applyLocalStickyHeight();
-          syncFollowState();
+          applyCompactFollowRail();
+
+          if (syncGenericCompactFollow(condensed)) {
+            return;
+          }
+
           try {
             window.__archiUpdateFollow?.();
           } catch {}
+
+          syncFollowState();
         });
 
         requestAnimationFrame(() => {
           applyLocalStickyHeight();
+          applyCompactFollowRail();
+
+          if (syncGenericCompactFollow(condensed)) {
+            return;
+          }
+
           try {
             window.__archiUpdateFollow?.();
           } catch {}
@@ -316,8 +654,19 @@ const {
       heroResizeObserver?.observe(hero);
 
       window.addEventListener("scroll", onScroll, { passive: true });
-      window.addEventListener("resize", schedule);
-      window.addEventListener("pageshow", schedule);
+      window.addEventListener("resize", () => {
+        heroPinStartY = null;
+        applyCompactHeroRail();
+        applyCompactFollowRail();
+        schedule();
+      });
+      window.addEventListener("pageshow", () => {
+        heroPinStartY = null;
+        applyCompactHeroRail();
+        applyCompactFollowRail();
+        captureHeroPinStart(true);
+        schedule();
+      });
 
       if (document.fonts?.ready) {
         document.fonts.ready.then(schedule).catch(() => {});
@@ -335,6 +684,9 @@ const {
         mqSmallLandscape.addListener(schedule);
       }
 
+      applyCompactHeroRail();
+      applyCompactFollowRail();
+      captureHeroPinStart(true);
       schedule();
     };
 
@@ -422,66 +774,409 @@ const {
   }
 
   @media (max-width: 860px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page) #reading-follow),
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page) #reading-follow .reading-follow__inner){
       display: none !important;
       opacity: 0 !important;
       visibility: hidden !important;
       pointer-events: none !important;
     }
 
-    :global(body.is-glossary-portal-page){
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page)){
       --followbar-h: 0px !important;
       --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
     }
 
-    :global(body.is-glossary-portal-page .glossary-portal-hero){
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page) .glossary-portal-hero){
       margin-bottom: var(--portal-hero-margin-bottom, 18px);
       border-radius: 20px !important;
       box-shadow: none !important;
     }
 
-    :global(body.is-glossary-portal-page .glossary-portal-hero__more){
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page) .glossary-portal-hero__more){
       max-height: none !important;
       opacity: 1 !important;
       overflow: visible !important;
       pointer-events: auto !important;
     }
 
-    :global(body.is-glossary-portal-page .glossary-portal-hero__toggle){
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page) .glossary-portal-hero__toggle){
       display: none !important;
     }
   }
 
   @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page) #reading-follow),
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page) #reading-follow .reading-follow__inner){
       display: none !important;
       opacity: 0 !important;
       visibility: hidden !important;
       pointer-events: none !important;
     }
 
-    :global(body.is-glossary-portal-page){
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page)){
       --followbar-h: 0px !important;
       --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
     }
 
-    :global(body.is-glossary-portal-page .glossary-portal-hero){
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page) .glossary-portal-hero){
       margin-bottom: var(--portal-hero-margin-bottom, 12px);
       border-radius: 16px !important;
       box-shadow: none !important;
     }
 
-    :global(body.is-glossary-portal-page .glossary-portal-hero__more){
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page) .glossary-portal-hero__more){
       max-height: none !important;
       opacity: 1 !important;
       overflow: visible !important;
       pointer-events: auto !important;
     }
 
-    :global(body.is-glossary-portal-page .glossary-portal-hero__toggle){
+    :global(body.is-glossary-portal-page:not(.glossary-portal-compact-sticky):not(.is-index-complet-page) .glossary-portal-hero__toggle){
       display: none !important;
     }
   }
+
+
+
+  /* =========================================================
+     Index complet — exception premium compacte portal
+     ---------------------------------------------------------
+     Les portails ordinaires restent neutralisés en compact.
+     L’index complet, lui, conserve la pile :
+     hero sticky → reading-follow → lettres flottantes.
+     ========================================================= */
+
+  @media (max-width: 980px){
+    :global(body.is-index-complet-page[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]) .glossary-portal-hero,
+    :global(body.is-index-complet-page[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]) .glossary-page-hero{
+      position: sticky !important;
+      top: var(--glossary-sticky-top, calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))) !important;
+      z-index: 72 !important;
+      margin-bottom: 0 !important;
+      overflow: hidden !important;
+      transform: translateZ(0) !important;
+      backface-visibility: hidden !important;
+      border-bottom-left-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
+
+    :global(body.is-index-complet-page #reading-follow){
+      display: block !important;
+      position: fixed !important;
+      left: var(--reading-left) !important;
+      width: var(--reading-width) !important;
+      top: calc(var(--glossary-sticky-top, var(--sticky-header-h, 0px)) + var(--glossary-local-sticky-h, 0px) - var(--followbar-h, 0px) - 1px) !important;
+      z-index: 71 !important;
+      visibility: hidden !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-index-complet-page.glossary-portal-follow-on #reading-follow){
+      visibility: visible !important;
+      opacity: 1 !important;
+    }
+
+    :global(body.is-index-complet-page #reading-follow .reading-follow__inner){
+      display: block !important;
+      visibility: visible !important;
+      opacity: 1 !important;
+      max-height: none !important;
+      margin-top: -1px !important;
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+
+    :global(body.is-index-complet-page #gic-follow-letters){
+      position: fixed !important;
+      left: var(--reading-left) !important;
+      width: var(--reading-width) !important;
+      top: calc(var(--glossary-sticky-top, var(--sticky-header-h, 0px)) + var(--gic-premium-hero-h, 0px) + var(--gic-premium-follow-h, 0px) - 1px) !important;
+      z-index: 70 !important;
+    }
+
+    :global(body.is-index-complet-page.gic-letters-docked #gic-follow-letters){
+      display: flex !important;
+      visibility: visible !important;
+      opacity: 1 !important;
+      pointer-events: auto !important;
+    }
+  }
+
+  /* PORTAL_COMPACT_STICKY_CLEAN_START
+     Portails glossaire — comportement compact générique final.
+     - Aucune condensation en haut de page.
+     - Condensation seulement après seuil documentaire réel.
+     - Hero sticky sous l’edition-bar.
+     - reading-follow collé sous le hero condensé.
+     - index-complet exclu.
+  */
+
+  @media (min-width: 981px){
+    :global(body.is-glossary-portal-page:not(.glossary-portal-hero-condensed) #reading-follow),
+    :global(body.is-glossary-portal-page:not(.glossary-portal-hero-condensed) #reading-follow .reading-follow__inner){
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+  }
+
+  @media (max-width: 980px){
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) .glossary-portal-hero),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) .glossary-page-hero){
+      position: sticky !important;
+      top: var(--glossary-sticky-top, calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))) !important;
+      z-index: 72 !important;
+      display: grid !important;
+      width: 100% !important;
+      max-width: 100% !important;
+      min-width: 0 !important;
+      overflow: hidden !important;
+      transform: translateZ(0) !important;
+      backface-visibility: hidden !important;
+      background:
+        linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.96)),
+        radial-gradient(780px 220px at 18% 0%, rgba(0,217,255,.08), transparent 60%) !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page):not(.glossary-portal-hero-condensed) #reading-follow),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page):not(.glossary-portal-hero-condensed) #reading-follow .reading-follow__inner),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page):not(.glossary-portal-follow-on) #reading-follow),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page):not(.glossary-portal-follow-on) #reading-follow .reading-follow__inner){
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed .glossary-portal-hero),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed .glossary-page-hero){
+      padding: 8px 10px 9px !important;
+      row-gap: 4px !important;
+      border-radius: 16px 16px 0 0 !important;
+      margin-bottom: 0 !important;
+      box-shadow: 0 12px 30px rgba(0,0,0,.24) !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed .glossary-portal-hero__kicker){
+      font-size: 9px !important;
+      line-height: 1.05 !important;
+      letter-spacing: .11em !important;
+      opacity: .72 !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed .glossary-portal-hero h1){
+      font-size: clamp(1.35rem, 5.1vw, 1.72rem) !important;
+      line-height: 1.02 !important;
+      letter-spacing: -.03em !important;
+      margin: 0 !important;
+      max-width: 100% !important;
+      white-space: normal !important;
+      overflow: visible !important;
+      text-overflow: clip !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed:not(.glossary-portal-hero-expanded) .glossary-portal-hero__intro--lead){
+      display: -webkit-box !important;
+      -webkit-box-orient: vertical !important;
+      -webkit-line-clamp: 2 !important;
+      line-clamp: 2 !important;
+      max-height: calc(2 * 1.12em) !important;
+      overflow: hidden !important;
+      font-size: .72rem !important;
+      line-height: 1.12 !important;
+      opacity: .78 !important;
+      margin: 0 !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed:not(.glossary-portal-hero-expanded) .glossary-portal-hero__more){
+      max-height: 0 !important;
+      opacity: 0 !important;
+      overflow: hidden !important;
+      pointer-events: none !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed .glossary-portal-hero__toggle){
+      min-height: 22px !important;
+      padding: 2px 0 !important;
+      font-size: 11px !important;
+      line-height: 1.05 !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow){
+      display: block !important;
+      position: fixed !important;
+      left: var(--reading-left) !important;
+      width: var(--reading-width) !important;
+      top: calc(
+        var(--glossary-sticky-top, calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)))
+        + var(--glossary-local-sticky-h, 0px)
+        - 1px
+      ) !important;
+      z-index: 71 !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-follow-on #reading-follow),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-follow-on #reading-follow .reading-follow__inner){
+      opacity: 1 !important;
+      visibility: visible !important;
+      pointer-events: auto !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .reading-follow__inner){
+      min-height: 26px !important;
+      padding: 5px 10px 6px !important;
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+      border-bottom-left-radius: 13px !important;
+      border-bottom-right-radius: 13px !important;
+      border-top: 1px solid rgba(127,127,127,.16) !important;
+      background:
+        linear-gradient(180deg, rgba(0,0,0,.80), rgba(0,0,0,.94)),
+        radial-gradient(620px 120px at 18% 0%, rgba(0,217,255,.055), transparent 60%) !important;
+      box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .rf-h1),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .rf-h3),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .rf-actions){
+      display: none !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .rf-h2){
+      display: block !important;
+      font-size: .86rem !important;
+      line-height: 1.08 !important;
+      font-weight: 800 !important;
+      white-space: nowrap !important;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+    }
+  }
+
+  @media (min-width: 761px) and (max-width: 980px){
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed .glossary-portal-hero),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed .glossary-page-hero){
+      padding: 8px 12px 8px !important;
+      border-radius: 16px 16px 0 0 !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed .glossary-portal-hero h1){
+      font-size: clamp(1.48rem, 3vw, 1.82rem) !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed:not(.glossary-portal-hero-expanded) .glossary-portal-hero__intro--lead){
+      font-size: .76rem !important;
+      line-height: 1.14 !important;
+      max-height: calc(2 * 1.14em) !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .rf-h2){
+      font-size: .9rem !important;
+    }
+  }
+
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed .glossary-portal-hero),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed .glossary-page-hero){
+      padding: 5px 8px 5px !important;
+      row-gap: 2px !important;
+      border-radius: 12px 12px 0 0 !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed .glossary-portal-hero h1){
+      font-size: clamp(1rem, 3vw, 1.22rem) !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page).glossary-portal-hero-condensed:not(.glossary-portal-hero-expanded) .glossary-portal-hero__intro--lead){
+      display: none !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .reading-follow__inner){
+      min-height: 22px !important;
+      padding: 4px 8px 5px !important;
+      border-bottom-left-radius: 11px !important;
+      border-bottom-right-radius: 11px !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .rf-h2){
+      font-size: .78rem !important;
+      line-height: 1.04 !important;
+    }
+  }
+
+  /* PORTAL_COMPACT_STICKY_CLEAN_END */
+
+
+  /* PORTAL_COMPACT_STICKY_OVERFLOW_FIX_START
+     Libération du contexte sticky sur les portails glossaire compacts.
+     Le hero ne peut pas coller sous l’edition-bar si un ancêtre le piège
+     dans un overflow/contain compact.
+  */
+
+  @media (max-width: 980px){
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) .page),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) .page-shell),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) .reading),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) article.reading),
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) main){
+      overflow: visible !important;
+      overflow-x: visible !important;
+      overflow-y: visible !important;
+      contain: none !important;
+      transform: none !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) .glossary-portal-hero){
+      align-self: start !important;
+      justify-self: stretch !important;
+      position: sticky !important;
+      top: var(--glossary-sticky-top, calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))) !important;
+      z-index: 72 !important;
+    }
+  }
+
+  /* PORTAL_COMPACT_STICKY_OVERFLOW_FIX_END */
+
+
+  /* PORTAL_COMPACT_FOLLOW_TWO_LINES_START
+     Le follow compact des portails génériques affiche deux niveaux :
+     section active + sous-tête interne active.
+  */
+
+  @media (max-width: 980px){
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .rf-h2){
+      display: block !important;
+      white-space: nowrap !important;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .rf-h3){
+      display: block !important;
+      margin-top: 1px !important;
+      font-size: .68rem !important;
+      line-height: 1.05 !important;
+      letter-spacing: .01em !important;
+      opacity: .72 !important;
+      white-space: nowrap !important;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+    }
+
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .reading-follow__inner){
+      padding-top: 5px !important;
+      padding-bottom: 6px !important;
+    }
+  }
+
+  @media (max-width: 520px){
+    :global(body.is-glossary-portal-page.glossary-portal-compact-sticky:not(.is-index-complet-page) #reading-follow .rf-h3){
+      font-size: .64rem !important;
+      line-height: 1.02 !important;
+    }
+  }
+
+  /* PORTAL_COMPACT_FOLLOW_TWO_LINES_END */
+
 </style>

src/content/archicrat-ia/conclusion.mdx

@@ -1,5 +1,5 @@
 ---
-title: Conclusion — ArchiCraT-IA
+title: Conclusion — L’exigence archicratique
 edition: archicrat-ia
 status: essai_these
 level: 1
@@ -10,7 +10,7 @@ order: 70
 summary: ''
 source:
   kind: docx
-  path: sources/docx/archicrat-ia/Conclusion-Archicrat-IA-version_officielle.docx
+  path: sources/docx/archicrat-ia/Conclusion—Archicratie-La_tenue_des_mondes-version_resserree.docx
 ---
 
 Nous n'assistons ni à un retour primordial du désordre ni à une
@@ -57,7 +57,7 @@ mais l'altération des formes capables de le porter. Non la disparition
 du politique, mais sa désarticulation progressive hors des scènes où il
 pouvait encore apparaître comme tel. À ce niveau, ce que nous appelons
 crise ne relève plus d'un dysfonctionnement partiel, ni d'une dérive
-simplement sectorielle. Elle engage les conditions même dans lesquelles
+simplement sectorielle. Elle engage les conditions mêmes dans lesquelles
 un monde peut encore faire apparaître, soutenir et transformer ce qui le
 traverse.
 
@@ -75,12 +75,12 @@ trop souvent se confondre.
 
 Encore fallait-il que ce vocabulaire n'usurpe pas sa propre nécessité.
 L'archicratie ne vaut pas parce qu'elle pourrait tout redire dans sa
-langue ; elle vaut seulement là où elle permet de discerner quelque
-chose qui, sans elle, resterait confondu, euphémisé ou inaperçu. Elle ne
-constitue donc ni une théorie totale du politique, ni une clef
-universelle des mondes historiques, mais un instrument critique situé,
-tenu à une obligation de retenue : se taire là où il n'apporte aucun
-gain de lisibilité, et répondre de ses distinctions là où il prétend en
+langue ; elle vaut là où elle permet de discerner quelque chose qui,
+sans elle, resterait confondu, euphémisé ou inaperçu. Elle ne constitue
+donc ni une théorie totale du politique, ni une clef universelle des
+mondes historiques, mais un instrument critique situé, tenu à une
+obligation de retenue : se taire là où il n'apporte aucun gain de
+lisibilité, et répondre de ses distinctions là où il prétend en
 produire. C'est à cette condition seulement qu'un paradigme cesse d'être
 un idiome de surplomb pour devenir une épreuve réelle de connaissance.
 
@@ -132,14 +132,14 @@ sectorielles. Elles manifestent, chacune à leur manière, la difficulté
 croissante à instituer des formes dans lesquelles ce qui est affecté par
 les décisions peut être reconduit à une épreuve. Ce qui manque n'est pas
 la capacité à produire des normes, des infrastructures, des critères,
-des instruments. Ce qui manque, de plus en plus, c'est l'habileté à les
-porter. De là la nécessité d'un déplacement conceptuel décisif :
-substituer au lexique lisse de la durabilité la notion de co-viabilité.
-Non pas un équilibre supposé entre intérêts déjà constitués, ni la
-correction technocratique d'externalités, mais l'institution toujours
-fragile, toujours révisable, toujours conflictuelle, des conditions sous
-lesquelles des formes de vie hétérogènes peuvent encore tenir ensemble
-sans destruction irréversible.
+des instruments. Ce qui manque, de plus en plus, ce sont les formes
+capables de les porter. De là la nécessité d'un déplacement conceptuel
+décisif : substituer au lexique lisse de la durabilité la notion de
+co-viabilité. Non pas un équilibre supposé entre intérêts déjà
+constitués, ni la correction technocratique d'externalités, mais
+l'institution toujours fragile, toujours révisable, toujours
+conflictuelle, des conditions sous lesquelles des formes de vie
+hétérogènes peuvent encore tenir ensemble sans destruction irréversible.
 
 Ce qui se dégage ainsi de l'ensemble n'est pas une doctrine
 supplémentaire, encore moins un système clos. C'est une condition — qui ne garantit ni harmonie ni salut, mais sans laquelle aucune
@@ -193,33 +193,32 @@ qu'elle affecte, la différence ne tient pas à l'intensité du pouvoir,
 mais à la possibilité de sa mise à l'épreuve. Ce qui rend un monde
 habitable n'est ni l'absence de tensions, ni la stabilité de ses
 équilibres, ni la pure efficacité de ses dispositifs. C'est la forme
-dans laquelle ce qui le traverse peut être porté sans être nié, différé
-sans être dissous, exposé sans être annihilé.
+dans laquelle ses tensions peuvent être portées sans déni, différées
+sans dissolution, exposées sans annihilation.
 
 À partir de là, la question n'est plus d'abord celle d'un bon régime,
-mais celle d'un monde qui tient. Non d'un monde pacifié, homogène ou
-réconcilié, mais d'un monde capable de porter ce qui le traverse sans
+mais celle d'un monde qui tient. Ce monde n'a pas besoin d'être pacifié,
+homogène ou réconcilié ; il doit pouvoir porter ce qui le traverse sans
 s'abolir dans sa propre exécution. Un monde qui ne tient ni par inertie,
 ni par répétition, ni par l'évidence supposée de ses fondements. Il
 tient parce qu'il est capable de porter ce qui le traverse sans le nier,
 de différer ce qui l'affecte sans le dissoudre, d'exposer ce qui le
 gouverne sans s'effondrer sous sa propre mise en question. Habiter un
-monde ne signifie pas simplement y vivre. Cela signifie pouvoir y
-comparaître. Pouvoir y demander d'où parle ce qui décide. Pouvoir y
-identifier ce qui opère. Pouvoir y rouvrir le temps lorsque l'exécution
-tend à se refermer sur elle-même. Pouvoir y faire apparaître ce qui,
-sans cela, demeurerait converti en variable, en score, en flux.
+monde ne signifie pas simplement vivre en son sein. Cela signifie
+disposer d'une scène où comparaître, demander d'où parle ce qui décide,
+identifier ce qui opère, rouvrir le temps lorsque l'exécution tend à se
+refermer sur elle-même, faire apparaître ce qui, sans cette épreuve,
+demeurerait converti en variable, en score, en flux.
 
 La scène prend ici son sens le plus fort. Elle n'est ni un supplément
 institutionnel, ni un décor ajouté au pouvoir pour en améliorer
 l'acceptabilité, ni une métaphore commode pour désigner des espaces de
 parole. Elle est l'une des formes à travers lesquelles un ordre cesse
-d'être purement opératoire pour devenir politiquement tenable. Là où il
-y a scène au sens fort — c'est-à-dire espace différé, documenté,
-institué, capable de suspendre et de requalifier — la régulation ne se
-contente pas d'agir : elle accepte de comparaître. C'est dans cette
-comparution que se joue la possibilité, pour un monde, de ne pas se
-réduire à ce qu'il exécute.
+d'être purement opératoire pour devenir politiquement tenable. Là où une
+telle forme existe — espace différé, documenté, institué, capable de
+suspendre et de requalifier — la régulation ne se contente pas d'agir
+: elle accepte de comparaître. C'est dans cette comparution que se joue
+la possibilité, pour un monde, de ne pas se réduire à ce qu'il exécute.
 
 Il faut ici maintenir une distinction que tout ce travail a jugée
 décisive. Dire que la scène est condition de viabilité ne signifie
@@ -277,20 +276,6 @@ deviennent plus fragiles, plus tardives, plus périphériques. Ce ne sont
 pas les décisions qui disparaissent ; ce sont les manières dont elles
 pourraient être tenues.
 
-Les droits, dans de nombreuses configurations sociales, se trouvent
-intermédiés par des procédures dont la logique demeure difficilement
-accessible à ceux qu'elles affectent ; les décisions qui concernent
-l'habitabilité écologique des milieux se trouvent portées par des
-instruments puissants, mais rarement rapportées à des espaces où leurs
-fondements pourraient être disputés ; les architectures numériques et
-algorithmiques rendent possible une distribution fine des traitements,
-des classements, des accès, sans rendre aisément localisable le lieu de
-leur mise à l'épreuve. Ces dimensions ne doivent pas être comprises
-comme des sphères séparées. Elles constituent les expressions
-différenciées d'un même processus : celui par lequel la régulation tend
-à se déployer hors des formes d'épreuve qui permettaient de la tenir
-comme monde.
-
 C'est en ce sens que l'autarchicratie peut être nommée comme la
 contre-figure terminale de l'archicratie. Non un régime au sens
 classique, ni une idéologie, ni un type d'État, mais une configuration
@@ -303,10 +288,75 @@ boucles se ferment. Les ajustements se font à partir de leurs propres
 résultats. Les audits vérifient la conformité à des critères produits
 par les systèmes eux-mêmes. La régulation devient auto-référentielle.
 
+Son intensité contemporaine tient toutefois à ce qu'elle ne demeure pas
+extérieure aux sujets qu'elle régule. Lorsque chacun apprend à se noter,
+se comparer, s'optimiser, se rendre compatible, anticiper les seuils qui
+le classent ou prévenir son propre déclassement, la régulation ne
+s'exerce plus seulement depuis des dispositifs séparés. Elle se prolonge
+dans des conduites d'ajustement par lesquelles les existences deviennent
+les opératrices contraintes de leur propre conformité. L'autarchicratie
+atteint alors son degré le plus intime : non seulement lorsque l'ordre
+se mesure lui-même, mais lorsque les sujets se gouvernent eux-mêmes
+selon des critères qu'ils n'ont pas institués.
+
+Cette intimité nouvelle de la régulation a trouvé dans la rationalité
+néolibérale l'un de ses vecteurs historiques les plus puissants. Non
+comme doctrine extérieure aux mutations industrielles récentes, mais
+comme manière de faire tenir ensemble l'âge informatique et l'âge
+algorithmique. La troisième révolution industrielle a donné au signal, à
+l'indicateur, à la concurrence, à l'audit, à la solvabilité et au
+feedback une autorité pratique inédite : institutions, entreprises,
+services publics, individus ont été conduits à se rendre lisibles dans
+des formats de performance. La quatrième fait descendre cette autorité
+plus avant dans les conduites. Le classement prépare la décision.
+L'évaluation aménage l'environnement où certains gestes deviennent
+probables, certains parcours préférables, certains écarts coûteux avant
+même d'être nommés. Le sujet n'est plus simplement contraint d'obéir ;
+il apprend à devancer les critères qui l'évaluent, à prévenir son
+déclassement, à traduire son temps, son travail, sa santé, ses désirs,
+ses déplacements en signes compatibles avec les dispositifs qui le
+rendent calculable. L'autarchicratisation contemporaine se noue dans
+cette intériorisation : la régulation fabrique les formats de réalité
+auxquels les existences doivent ensuite se rendre conformes.
+
+Mais cette rationalité ne flotte pas dans un ciel d'indicateurs. Sa
+vérité matérielle affleure dans les ressources dont dépend l'habitation
+commune. Depuis les révolutions industrielles, chaque promesse de
+puissance engage des sous-sols, des fleuves, des nappes, des ports, des
+mines, des pipelines, des câbles, des centres de données, des corps
+exposés, des territoires rendus disponibles. Le charbon et le pétrole
+ont porté la mécanisation, les transports, la guerre industrielle et
+l'accélération des échanges ; le gaz et l'uranium ont reconfiguré
+l'énergie comme dépendance stratégique ; le sable, le cuivre, la
+bauxite, le cobalt, le coltan, les terres rares, le germanium, le
+tritium ou l'hélium-3 engagent désormais la construction,
+l'électronique, le calcul, les batteries, les réseaux, les armements et
+les promesses de transition. Une ressource n'est jamais une matière
+posée devant un besoin. Elle est un nœud d'autorisation, d'extraction,
+d'acheminement, de travail, de dette écologique, de violence
+territoriale et de futur engagé. La co-viabilité atteint ici son sol le
+plus concret : savoir qui prélève, qui consomme, qui stocke, qui manque,
+qui respire les poussières, qui traverse les pénuries, qui habite les
+paysages défaits, qui supporte les déchets, qui paie la puissance des
+autres par la fragilisation de son propre monde.
+
+L'exigence archicratique engage ainsi la comparution des chaînes
+matérielles autant que celle des décisions, des normes et des
+algorithmes qu'elles soutiennent. Les circuits d'extraction,
+d'approvisionnement, de combustion, de refroidissement, de transport, de
+stockage, de calcul, de financement et de sécurisation appartiennent
+pleinement à la scène. Interroger une régulation revient alors à
+demander d'où viennent ses ressources, quels milieux elle transforme,
+quelles dépendances elle installe, quels territoires elle expose, quels
+corps elle requiert, quelles formes de vie elle rend possibles ou
+impossibles. Sans cette comparution matérielle, la co-viabilité
+manquerait son point le plus sensible : la lutte pour les conditions
+terrestres de l'habitation commune.
+
 Cette bascule ne doit pas être dramatisée comme si elle était totale,
-homogène, déjà accomplie. Des scènes subsistent, parfois robustes,
-parfois fragiles. Des espaces de contestation, de délibération, de
-reprise continuent d'exister. Mais ils apparaissent souvent comme
+homogène, déjà parfaitement accomplie. Des scènes subsistent, parfois
+robustes, parfois fragiles. Des espaces de contestation, de délibération
+et de reprise continuent d'exister. Mais ils apparaissent souvent comme
 disjoints des lieux où les décisions se prennent effectivement. La
 tension se joue moins entre présence et absence de scène qu'entre leur
 centralité et leur marginalisation. Le problème décisif n'est pas de
@@ -415,3 +465,7 @@ peu d'être habitable. Là où elle demeure ouverte, fût-ce dans le
 conflit, sous contrainte, précairement, quelque chose du politique
 subsiste encore : non la paix, ni l'innocence, ni l'harmonie, mais la
 capacité d'un monde à ne pas se confondre avec sa propre exécution.
+
+C'est là, précisément, que commence l'exigence archicratique : pouvoir
+encore demander pourquoi, suivre comment, et rouvrir la scène où ce qui
+s'exécute au nom d'un monde doit répondre de ce qu'il fait à ce monde.

src/layouts/EditionLayout.astro

@@ -931,14 +931,14 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
           min-width: 0 !important;
         }
 
-        :global(body[data-edition-key="glossaire"]) .glossary-hero,
+        :global(body[data-edition-key="glossaire"]:not([data-sticky-mode="glossary-home"]):not([data-sticky-mode="glossary-portal"])) .glossary-hero,
         :global(body[data-edition-key="glossaire"]) .glossary-home,
         :global(body[data-edition-key="glossaire"]) .glossary-map,
         :global(body[data-edition-key="glossaire"]) .glossary-map-block,
         :global(body[data-edition-key="glossaire"]) .glossary-map-section,
-        :global(body[data-edition-key="glossaire"]) .glossary-page-hero,
-        :global(body[data-edition-key="glossaire"]) .glossary-portal-hero,
-        :global(body[data-edition-key="glossaire"]) .scene-hero{
+        :global(body[data-edition-key="glossaire"]:not([data-sticky-mode="glossary-portal"])) .glossary-page-hero,
+        :global(body[data-edition-key="glossaire"]:not([data-sticky-mode="glossary-portal"])) .glossary-portal-hero,
+        :global(body[data-edition-key="glossaire"]:not([data-sticky-mode="glossary-portal"])) .scene-hero{
           position: static !important;
           top: auto !important;
           left: auto !important;
@@ -953,7 +953,7 @@ const WHOAMI_FORCE_LOCALHOST = (import.meta.env.PUBLIC_WHOAMI_FORCE_LOCALHOST ??
           transform: none !important;
         }
 
-        :global(body[data-edition-key="glossaire"]) #reading-follow{
+        :global(body[data-edition-key="glossaire"]:not([data-sticky-mode="glossary-portal"])) #reading-follow{
           display: none !important;
         }
       }

src/pages/archicrat-ia/[...slug].astro

@@ -31,7 +31,7 @@ const { Content, headings } = await render(entry);
       currentSlug={String(entry.id).replace(/\.(md|mdx)$/i, "")}
       collection="archicrat-ia"
       basePath="/archicrat-ia"
-      label="Table des matières — ArchiCraT-IA"
+      label="Table des matières — Archicratie"
     />
     <LocalToc headings={headings} />
   </Fragment>

src/pages/archicrat-ia/index.astro

@@ -6,14 +6,14 @@ const entries = await getCollection("archicrat-ia");
 entries.sort((a, b) => (a.data.order ?? 9999) - (b.data.order ?? 9999));
 ---
 
-<SiteLayout title="Essai-thèse — ArchiCraT-IA">
+<SiteLayout title="Archicratie — La tenue des mondes">
   <section class="landing landing-home">
     <header class="landing-hero">
-      <p class="landing-kicker">Corpus principal</p>
-      <h1>Essai-thèse — ArchiCraT-IA</h1>
+      <p class="landing-kicker">Essai-thèse</p>
+      <h1>Archicratie — La tenue des mondes</h1>
       <p class="landing-lead">
-        Fondements, histoire, philosophie du pouvoir, tensions et régulations
-        archicratiques.
+        Une grammaire des régulations qui ne se contentent pas de fonctionner,
+        mais doivent encore répondre de ce qu’elles font.
       </p>
     </header>
 
@@ -23,22 +23,38 @@ entries.sort((a, b) => (a.data.order ?? 9999) - (b.data.order ?? 9999));
 
       <p>
         Cet essai-thèse présente l’architecture conceptuelle principale du paradigme
-        archicratique. Il en expose les fondements, les distinctions opératoires,
-        les tensions internes et les conditions d’application aux régulations
-        collectives contemporaines.
+        archicratique. Il distingue ce qui fonde une régulation, ce qui l’opère,
+        et ce qui la met à l’épreuve, afin de comprendre dans quelles conditions
+        un monde ne se contente pas de fonctionner, mais peut encore répondre de
+        ce qu’il fait vivre, use, expose et rend possible.
       </p>
 
       <p>
-        Le texte doit être lu comme une proposition théorique structurée : assez
-        stabilisée pour offrir un cadre de discernement, assez ouverte pour demeurer
-        révisable, discutable et perfectible.
+        Le texte doit être lu comme une proposition théorique structurée :
+        suffisamment stabilisée pour offrir une grammaire de discernement,
+        suffisamment ouverte pour demeurer discutable, perfectible et exposée à
+        sa propre épreuve.
       </p>
 
       <p>
-        Son enjeu n’est pas de clore une doctrine, mais de rendre pensable un plan
-        souvent négligé du politique : celui des conditions construites, des
-        médiations effectives et des scènes où les régulations peuvent être
-        éprouvées, contestées et reprises.
+        Son enjeu n’est pas de clore une doctrine du pouvoir, mais de rendre
+        visible un plan souvent négligé du politique : celui des conditions
+        construites, des médiations effectives et des scènes où les régulations
+        peuvent être comprises, contestées et reprises par ceux qu’elles affectent.
+      </p>
+    </section>
+
+    <section class="edition-note" aria-labelledby="seuil-title">
+      <p class="landing-kicker">Phrase de seuil</p>
+      <h2 id="seuil-title">Le pouvoir ne cesse pas d’opérer ; il cesse de comparaître.</h2>
+
+      <p>
+        L’ouvrage part de ce déplacement : les décisions continuent d’agir, les
+        dispositifs fonctionnent, les ressources sont mobilisées, mais les scènes
+        où leurs raisons, leurs instruments et leurs effets peuvent être exposés
+        deviennent plus fragiles. L’archicratie nomme l’exigence inverse : faire
+        comparaître ce qui fonde, ce qui opère et ce qui affecte les mondes que
+        nous habitons.
       </p>
     </section>
 
@@ -57,5 +73,34 @@ entries.sort((a, b) => (a.data.order ?? 9999) - (b.data.order ?? 9999));
         ))}
       </div>
     </section>
+
+    <section class="landing-section">
+      <div class="landing-section__head">
+        <p class="landing-kicker">Prolonger</p>
+        <h2>Entrées complémentaires</h2>
+      </div>
+
+      <div class="landing-grid">
+        <a class="landing-card" href="/commencer/">
+          <strong>Commencer</strong>
+          <small>Entrer par la genèse conceptuelle →</small>
+        </a>
+
+        <a class="landing-card" href="/manifeste/">
+          <strong>Manifeste archicratique</strong>
+          <small>Entrer par la formulation politique directe →</small>
+        </a>
+
+        <a class="landing-card" href="/cas-ia/">
+          <strong>Gouvernance IA</strong>
+          <small>Mettre le paradigme à l’épreuve d’un cas contemporain →</small>
+        </a>
+
+        <a class="landing-card" href="/glossaire/">
+          <strong>Glossaire archicratique</strong>
+          <small>Circuler dans les concepts, scènes et régimes →</small>
+        </a>
+      </div>
+    </section>
   </section>
-</SiteLayout>
+</SiteLayout>

src/pages/glossaire/archicrations.astro

@@ -218,81 +218,10 @@ const prolongerLinks = [
   <GlossaryPortalStickySync
     heroMoreId="archi-hero-more"
     heroToggleId="archi-hero-toggle"
+    mobileBreakpoint={980}
+    compactSticky={true}
   />
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const follow = document.getElementById("reading-follow");
-
-        if (!body || !root || !follow) return;
-
-        body.classList.add("is-glossary-portal-page");
-
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const mqSmallLandscape = window.matchMedia(
-          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
-        );
-
-        const isCompactViewport = () =>
-          mqMobile.matches || mqSmallLandscape.matches;
-
-        const disableFollow = () => {
-          if (!isCompactViewport()) return;
-
-          follow.classList.remove("is-on");
-          follow.setAttribute("aria-hidden", "true");
-          follow.style.display = "none";
-          follow.innerHTML = "";
-
-          root.style.setProperty("--followbar-h", "0px");
-          root.style.setProperty(
-            "--sticky-offset-px",
-            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
-          );
-        };
-
-        const enableFollow = () => {
-          if (isCompactViewport()) return;
-
-          follow.style.display = "";
-        };
-
-        const sync = () => {
-          if (isCompactViewport()) {
-            disableFollow();
-          } else {
-            enableFollow();
-          }
-        };
-
-        if (mqMobile.addEventListener) {
-          mqMobile.addEventListener("change", sync);
-        } else if (mqMobile.addListener) {
-          mqMobile.addListener(sync);
-        }
-
-        if (mqSmallLandscape.addEventListener) {
-          mqSmallLandscape.addEventListener("change", sync);
-        } else if (mqSmallLandscape.addListener) {
-          mqSmallLandscape.addListener(sync);
-        }
-
-        window.addEventListener("resize", sync);
-        window.addEventListener("pageshow", sync);
-
-        sync();
-      };
-
-      if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", boot, { once: true });
-      } else {
-        boot();
-      }
-    })();
-  </script>
 </GlossaryLayout>
 
 <style>
@@ -364,38 +293,4 @@ const prolongerLinks = [
       grid-template-columns: 1fr;
     }
   }
-
-    :global(body.is-glossary-portal-page #reading-follow){
-    z-index: 10;
-  }
-
-  @media (max-width: 860px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
-
-  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
 </style>

src/pages/glossaire/concepts-fondamentaux.astro

@@ -328,6 +328,8 @@ const prolongerLinks = [
   <GlossaryPortalStickySync
     heroMoreId="cf-hero-more"
     heroToggleId="cf-hero-toggle"
+    mobileBreakpoint={980}
+    compactSticky={true}
   />
 </GlossaryLayout>
 

src/pages/glossaire/dynamiques-archicratiques.astro

@@ -335,80 +335,10 @@ const prolongerLinks = [
   <GlossaryPortalStickySync
     heroMoreId="dyna-hero-more"
     heroToggleId="dyna-hero-toggle"
+    mobileBreakpoint={980}
+    compactSticky={true}
   />
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const follow = document.getElementById("reading-follow");
-
-        if (!body || !root || !follow) return;
-
-        body.classList.add("is-glossary-portal-page");
-
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const mqSmallLandscape = window.matchMedia(
-          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
-        );
-
-        const isCompactViewport = () =>
-          mqMobile.matches || mqSmallLandscape.matches;
-
-        const disableFollow = () => {
-          if (!isCompactViewport()) return;
-
-          follow.classList.remove("is-on");
-          follow.setAttribute("aria-hidden", "true");
-          follow.style.display = "none";
-          follow.innerHTML = "";
-
-          root.style.setProperty("--followbar-h", "0px");
-          root.style.setProperty(
-            "--sticky-offset-px",
-            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
-          );
-        };
-
-        const enableFollow = () => {
-          if (isCompactViewport()) return;
-          follow.style.display = "";
-        };
-
-        const sync = () => {
-          if (isCompactViewport()) {
-            disableFollow();
-          } else {
-            enableFollow();
-          }
-        };
-
-        if (mqMobile.addEventListener) {
-          mqMobile.addEventListener("change", sync);
-        } else if (mqMobile.addListener) {
-          mqMobile.addListener(sync);
-        }
-
-        if (mqSmallLandscape.addEventListener) {
-          mqSmallLandscape.addEventListener("change", sync);
-        } else if (mqSmallLandscape.addListener) {
-          mqSmallLandscape.addListener(sync);
-        }
-
-        window.addEventListener("resize", sync);
-        window.addEventListener("pageshow", sync);
-
-        sync();
-      };
-
-      if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", boot, { once: true });
-      } else {
-        boot();
-      }
-    })();
-  </script>
 </GlossaryLayout>
 
 <style>
@@ -563,38 +493,4 @@ const prolongerLinks = [
       grid-template-columns: 1fr;
     }
   }
-
-    :global(body.is-glossary-portal-page #reading-follow){
-    z-index: 10;
-  }
-
-  @media (max-width: 860px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
-
-  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
 </style>

src/pages/glossaire/index-complet.astro

@@ -126,12 +126,6 @@ const prolongerLinks = [
           <span class="gic-aside__pill">
             {doctrinesCount} doctrine{doctrinesCount > 1 ? "s" : ""}
           </span>
-          <span class="gic-aside__pill">
-            {verbesCount} verbe{verbesCount > 1 ? "s" : ""}
-          </span>
-          <span class="gic-aside__pill">
-            {casIaCount} entrée{casIaCount > 1 ? "s" : ""} cas IA
-          </span>
         </div>
 
         <p class="gic-aside__note">
@@ -232,6 +226,8 @@ const prolongerLinks = [
   <GlossaryPortalStickySync
     heroMoreId="gic-hero-more"
     heroToggleId="gic-hero-toggle"
+    mobileBreakpoint={980}
+    compactSticky={true}
   />
 
   <script is:inline>
@@ -265,30 +261,39 @@ const prolongerLinks = [
 
         body.classList.add(BODY_CLASS);
 
+        const syncPremiumStickyMetrics = () => {
+          const hero = document.querySelector("[data-glossary-portal-hero]");
+          const followInner = follow.querySelector(".reading-follow__inner");
+
+          const heroH = hero ? Math.round(hero.getBoundingClientRect().height || 0) : 0;
+          const followOn =
+            follow.classList.contains("is-on") &&
+            follow.style.display !== "none" &&
+            follow.getAttribute("aria-hidden") !== "true";
+
+          const followH = followOn && followInner
+            ? Math.round(followInner.getBoundingClientRect().height || 0)
+            : 0;
+
+          const lettersH =
+            !lettersFollow.hidden && lettersFollow.getAttribute("aria-hidden") === "false"
+              ? Math.round(lettersFollow.getBoundingClientRect().height || 0)
+              : 0;
+
+          root.style.setProperty("--gic-premium-hero-h", `${heroH}px`);
+          root.style.setProperty("--gic-premium-follow-h", `${followH}px`);
+          root.style.setProperty("--gic-premium-letters-h", `${lettersH}px`);
+        };
+
         const forceHideGlobalFollowOnCompactViewport = () => {
-          if (!isCompactViewport()) {
-            follow.style.display = "";
-            return;
-          }
-
-          follow.classList.remove("is-on");
-          follow.setAttribute("aria-hidden", "true");
-          follow.style.display = "none";
-          follow.innerHTML = "";
-
-          root.style.setProperty("--followbar-h", "0px");
-          root.style.setProperty(
-            "--sticky-offset-px",
-            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
-          );
-          setAnchorOffset(0);
+          follow.style.display = "";
+          syncPremiumStickyMetrics();
         };
 
         const isCompactViewport = () =>
           mqMobile.matches || mqSmallLandscape.matches;
 
         const computeFollowOn = () =>
-          !isCompactViewport() &&
           follow.classList.contains("is-on") &&
           follow.style.display !== "none" &&
           follow.getAttribute("aria-hidden") !== "true";
@@ -320,7 +325,7 @@ const prolongerLinks = [
         };
 
         const syncLettersDockState = () => {
-          if (mqMobile.matches || !computeFollowOn()) {
+          if (!computeFollowOn()) {
             body.classList.remove(LETTERS_DOCKED_CLASS);
             lettersFollow.hidden = true;
             lettersFollow.setAttribute("aria-hidden", "true");
@@ -503,6 +508,7 @@ const prolongerLinks = [
             forceHideGlobalFollowOnCompactViewport();
             syncFollowLettersTop();
             syncLettersDockState();
+            syncPremiumStickyMetrics();
             syncActiveLetter();
           });
         };
@@ -565,6 +571,777 @@ const prolongerLinks = [
       }
     })();
   </script>
+  <script is:inline>
+    /*
+      INDEX COMPLET — STACK PREMIUM MOBILE/TABLETTE V2
+
+      Principe :
+      - uniquement sur /glossaire/index-complet/ ;
+      - rail vertical calculé en pixels réels ;
+      - cockpit compact :
+        header → hero condensé → follow H2 compact → lettres horizontales.
+    */
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const root = document.documentElement;
+        const hero = document.querySelector("[data-glossary-portal-hero]");
+        const follow = document.getElementById("reading-follow");
+        const inner = follow?.querySelector(".reading-follow__inner");
+        const lettersSource = document.getElementById("gic-letters-source");
+        const lettersFollow = document.getElementById("gic-follow-letters");
+
+        if (!body || !root || !hero || !follow || !inner || !lettersSource || !lettersFollow) return;
+
+        const mqCompact = window.matchMedia("(max-width: 980px)");
+        const mqSmallLandscape = window.matchMedia(
+          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
+        );
+
+        const isCompact = () => mqCompact.matches || mqSmallLandscape.matches;
+
+        const pxVar = (name, fallback = 0) => {
+          const raw = getComputedStyle(root).getPropertyValue(name).trim();
+          const n = Number.parseFloat(raw);
+          return Number.isFinite(n) ? n : fallback;
+        };
+
+        const stackTop = () => {
+          const glossaryTop = pxVar("--glossary-sticky-top", NaN);
+          if (Number.isFinite(glossaryTop) && glossaryTop > 0) return glossaryTop;
+
+          const headerH = pxVar("--sticky-header-h", 0);
+          const gap = pxVar("--page-gap", 12);
+          return Math.max(0, Math.round(headerH + gap));
+        };
+
+        const heads = Array.from(
+          document.querySelectorAll(".glossary-portal-section__head, .gic-section__head")
+        );
+
+        const titleOf = (head) => {
+          const h = head?.querySelector("h2, h3");
+          return (h?.textContent || head?.textContent || "")
+            .replace(/\s+/g, " ")
+            .trim();
+        };
+
+        const writeFollow = (title) => {
+          const h1 = inner.querySelector(".rf-h1");
+          const h2 = inner.querySelector(".rf-h2");
+          const h3 = inner.querySelector(".rf-h3");
+
+          if (h1) h1.textContent = "Index complet";
+          if (h2) h2.textContent = title || "Index alphabétique";
+          if (h3) h3.textContent = "";
+
+          follow.classList.add("is-on");
+          follow.setAttribute("aria-hidden", "false");
+          follow.style.setProperty("display", "block", "important");
+
+          inner.style.setProperty("display", "block", "important");
+          inner.style.setProperty("visibility", "visible", "important");
+          inner.style.setProperty("opacity", "1", "important");
+
+          body.classList.add("glossary-portal-follow-on", "gic-premium-follow-on");
+        };
+
+        const clearFollow = () => {
+          follow.classList.remove("is-on");
+          follow.setAttribute("aria-hidden", "true");
+
+          body.classList.remove(
+            "glossary-portal-follow-on",
+            "gic-premium-follow-on",
+            "gic-letters-docked",
+            "gic-premium-letters-on"
+          );
+
+          lettersFollow.hidden = true;
+          lettersFollow.setAttribute("aria-hidden", "true");
+
+          root.style.setProperty("--gic-premium-follow-h", "0px");
+          root.style.setProperty("--gic-premium-letters-h", "0px");
+          root.style.setProperty("--gic-stack-h", "0px");
+          root.style.setProperty("--gic-follow-letters-offset", "0px");
+        };
+
+        const currentHead = () => {
+          const top = stackTop();
+          const heroH = pxVar("--gic-premium-hero-h", 0);
+          const followH = pxVar("--gic-premium-follow-h", 0);
+          const lettersH = pxVar("--gic-premium-letters-h", 0);
+          const threshold = top + heroH + followH + lettersH + 18;
+
+          let current = null;
+          for (const head of heads) {
+            const r = head.getBoundingClientRect();
+            if (r.top <= threshold) current = head;
+            else break;
+          }
+          return current;
+        };
+
+        const measure = () => {
+          const heroH = body.classList.contains("glossary-portal-hero-condensed")
+            ? Math.max(0, Math.round(hero.getBoundingClientRect().height || 0))
+            : 0;
+
+          const followH = body.classList.contains("gic-premium-follow-on")
+            ? Math.max(0, Math.round(inner.getBoundingClientRect().height || 0))
+            : 0;
+
+          const lettersH = body.classList.contains("gic-premium-letters-on")
+            ? Math.max(0, Math.round(lettersFollow.getBoundingClientRect().height || 0))
+            : 0;
+
+          const stackH = heroH + followH + lettersH;
+
+          root.style.setProperty("--gic-premium-top", `${stackTop()}px`);
+          root.style.setProperty("--gic-premium-hero-h", `${heroH}px`);
+          root.style.setProperty("--gic-premium-follow-h", `${followH}px`);
+          root.style.setProperty("--gic-premium-letters-h", `${lettersH}px`);
+          root.style.setProperty("--gic-stack-h", `${stackH}px`);
+          root.style.setProperty("--glossary-local-sticky-h", `${stackH}px`);
+          root.style.setProperty("--followbar-h", `${followH}px`);
+          root.style.setProperty("--sticky-offset-px", `${stackTop() + stackH + 12}px`);
+        };
+
+        const syncLetters = () => {
+          if (!body.classList.contains("gic-premium-follow-on")) {
+            body.classList.remove("gic-letters-docked", "gic-premium-letters-on");
+            lettersFollow.hidden = true;
+            lettersFollow.setAttribute("aria-hidden", "true");
+            root.style.setProperty("--gic-follow-letters-offset", "0px");
+            return;
+          }
+
+          const sourceRect = lettersSource.getBoundingClientRect();
+          const followBottom = stackTop() + pxVar("--gic-premium-hero-h", 0) + pxVar("--gic-premium-follow-h", 0);
+          const shouldDock = sourceRect.top <= followBottom + 8;
+
+          body.classList.toggle("gic-letters-docked", shouldDock);
+          body.classList.toggle("gic-premium-letters-on", shouldDock);
+
+          lettersFollow.hidden = !shouldDock;
+          lettersFollow.setAttribute("aria-hidden", shouldDock ? "false" : "true");
+
+          if (shouldDock) {
+            lettersFollow.style.setProperty("display", "flex", "important");
+            root.style.setProperty(
+              "--gic-follow-letters-offset",
+              `${Math.max(0, Math.round(lettersFollow.getBoundingClientRect().height || 0)) + 12}px`
+            );
+          } else {
+            root.style.setProperty("--gic-follow-letters-offset", "0px");
+          }
+        };
+
+        let raf = 0;
+
+        const sync = () => {
+          raf = 0;
+
+          body.classList.add("is-index-complet-page", "is-glossary-portal-page");
+
+          if (!isCompact()) {
+            body.classList.remove(
+              "gic-premium-compact",
+              "gic-premium-follow-on",
+              "gic-premium-letters-on"
+            );
+
+            hero.style.removeProperty("position");
+            hero.style.removeProperty("top");
+            hero.style.removeProperty("z-index");
+
+            follow.style.removeProperty("display");
+            follow.style.removeProperty("top");
+            follow.style.removeProperty("left");
+            follow.style.removeProperty("width");
+
+            lettersFollow.style.removeProperty("display");
+            lettersFollow.style.removeProperty("top");
+            lettersFollow.style.removeProperty("left");
+            lettersFollow.style.removeProperty("width");
+
+            return;
+          }
+
+          body.classList.add("gic-premium-compact");
+
+          const top = stackTop();
+          const scrollY = window.scrollY || window.pageYOffset || 0;
+          const heroRect = hero.getBoundingClientRect();
+
+          const condensed = scrollY > 8 && heroRect.top <= top + 8;
+          body.classList.toggle("glossary-portal-hero-condensed", condensed);
+
+          hero.style.setProperty("position", "sticky", "important");
+          hero.style.setProperty("top", `${top}px`, "important");
+          hero.style.setProperty("z-index", "72", "important");
+
+          if (!condensed) {
+            clearFollow();
+            measure();
+            return;
+          }
+
+          measure();
+
+          const head = currentHead();
+          const rawTitle = titleOf(head) || "Index alphabétique";
+          const title = /^[A-ZÀÂÄÇÉÈÊËÎÏÔÖÙÛÜŸ]$/i.test(rawTitle)
+            ? "Index alphabétique"
+            : rawTitle;
+
+          writeFollow(title);
+
+          measure();
+          syncLetters();
+          measure();
+        };
+
+        const schedule = () => {
+          if (raf) return;
+          raf = requestAnimationFrame(sync);
+        };
+
+        window.addEventListener("scroll", schedule, { passive: true });
+        window.addEventListener("resize", schedule);
+        window.addEventListener("pageshow", schedule);
+
+        if (document.fonts?.ready) {
+          document.fonts.ready.then(schedule).catch(() => {});
+        }
+
+        if (mqCompact.addEventListener) mqCompact.addEventListener("change", schedule);
+        else if (mqCompact.addListener) mqCompact.addListener(schedule);
+
+        if (mqSmallLandscape.addEventListener) mqSmallLandscape.addEventListener("change", schedule);
+        else if (mqSmallLandscape.addListener) mqSmallLandscape.addListener(schedule);
+
+        schedule();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
+
+  <style is:global>
+    /* INDEX COMPLET — STACK PREMIUM MOBILE/TABLETTE V2 */
+
+    @media (max-width: 980px){
+      body.is-index-complet-page.gic-premium-compact{
+        scroll-padding-top: calc(var(--gic-premium-top, 0px) + var(--gic-stack-h, 0px) + 16px);
+      }
+
+      body.is-index-complet-page.gic-premium-compact .glossary-portal-hero,
+      body.is-index-complet-page.gic-premium-compact .glossary-page-hero{
+        position: sticky !important;
+        top: var(--gic-premium-top, var(--glossary-sticky-top, 0px)) !important;
+        z-index: 72 !important;
+        overflow: hidden !important;
+        margin-bottom: 12px !important;
+        transform: translateZ(0) !important;
+        backface-visibility: hidden !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed .glossary-portal-hero,
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed .glossary-page-hero{
+        padding: 7px 10px 7px !important;
+        row-gap: 3px !important;
+        border-radius: 14px 14px 0 0 !important;
+        margin-bottom: 0 !important;
+        box-shadow: 0 12px 30px rgba(0,0,0,.24) !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed .glossary-portal-hero__kicker{
+        font-size: 8px !important;
+        line-height: 1 !important;
+        letter-spacing: .105em !important;
+        opacity: .66 !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed .glossary-portal-hero h1{
+        font-size: clamp(1.18rem, 4.8vw, 1.48rem) !important;
+        line-height: 1 !important;
+        letter-spacing: -.028em !important;
+        margin: 0 !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed:not(.glossary-portal-hero-expanded) .glossary-portal-hero__intro{
+        display: -webkit-box !important;
+        -webkit-box-orient: vertical !important;
+        -webkit-line-clamp: 1 !important;
+        line-clamp: 1 !important;
+        max-height: 1.12em !important;
+        overflow: hidden !important;
+        font-size: .66rem !important;
+        line-height: 1.12 !important;
+        opacity: .72 !important;
+        margin: 0 !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed:not(.glossary-portal-hero-expanded) .glossary-portal-hero__more{
+        max-height: 0 !important;
+        opacity: 0 !important;
+        overflow: hidden !important;
+        pointer-events: none !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed .glossary-portal-hero__toggle{
+        display: none !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact #reading-follow{
+        display: block !important;
+        position: fixed !important;
+        left: var(--reading-left) !important;
+        width: var(--reading-width) !important;
+        top: calc(var(--gic-premium-top, 0px) + var(--gic-premium-hero-h, 0px) - 1px) !important;
+        z-index: 71 !important;
+        opacity: 0 !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.gic-premium-follow-on #reading-follow{
+        opacity: 1 !important;
+        visibility: visible !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact #reading-follow .reading-follow__inner{
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+        max-height: none !important;
+        min-height: 0 !important;
+        margin-top: 0 !important;
+        padding: 5px 56px 5px 9px !important;
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        box-shadow: 0 8px 18px rgba(0,0,0,.16) !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact #reading-follow .rf-h1,
+      body.is-index-complet-page.gic-premium-compact #reading-follow .rf-h3,
+      body.is-index-complet-page.gic-premium-compact #reading-follow .rf-actions{
+        display: none !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact #reading-follow .rf-h2{
+        display: block !important;
+        font-size: .78rem !important;
+        line-height: 1.08 !important;
+        white-space: nowrap !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        letter-spacing: -.012em !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact #gic-follow-letters{
+        position: fixed !important;
+        left: var(--reading-left) !important;
+        width: var(--reading-width) !important;
+        top: calc(
+          var(--gic-premium-top, 0px)
+          + var(--gic-premium-hero-h, 0px)
+          + var(--gic-premium-follow-h, 0px)
+          - 1px
+        ) !important;
+        z-index: 70 !important;
+        display: none !important;
+        flex-wrap: nowrap !important;
+        gap: 6px !important;
+        overflow-x: auto !important;
+        overflow-y: hidden !important;
+        scrollbar-width: none !important;
+        -webkit-overflow-scrolling: touch !important;
+        margin: 0 !important;
+        padding: 6px 8px 7px !important;
+        border-radius: 0 0 12px 12px !important;
+        opacity: 0 !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact #gic-follow-letters::-webkit-scrollbar{
+        display: none !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact #gic-follow-letters a{
+        flex: 0 0 auto !important;
+        min-width: 28px !important;
+        height: 28px !important;
+        padding: 0 9px !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.gic-premium-letters-on #gic-follow-letters{
+        display: flex !important;
+        opacity: 1 !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact .gic-section,
+      body.is-index-complet-page.gic-premium-compact .gic-group,
+      body.is-index-complet-page.gic-premium-compact .glossary-portal-section{
+        scroll-margin-top: calc(var(--gic-premium-top, 0px) + var(--gic-stack-h, 0px) + 18px) !important;
+      }
+    }
+
+    @media (min-width: 761px) and (max-width: 980px){
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed .glossary-portal-hero,
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed .glossary-page-hero{
+        padding: 8px 12px 8px !important;
+        border-radius: 16px 16px 0 0 !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed .glossary-portal-hero h1{
+        font-size: clamp(1.48rem, 3vw, 1.82rem) !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed:not(.glossary-portal-hero-expanded) .glossary-portal-hero__intro{
+        font-size: .76rem !important;
+        line-height: 1.14 !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact #reading-follow .rf-h2{
+        font-size: .86rem !important;
+      }
+    }
+
+    @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed .glossary-portal-hero,
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed .glossary-page-hero{
+        padding: 5px 8px 5px !important;
+        row-gap: 2px !important;
+        border-radius: 12px 12px 0 0 !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed .glossary-portal-hero h1{
+        font-size: clamp(1rem, 3vw, 1.22rem) !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact.glossary-portal-hero-condensed:not(.glossary-portal-hero-expanded) .glossary-portal-hero__intro{
+        display: none !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact #reading-follow .reading-follow__inner{
+        padding-top: 4px !important;
+        padding-bottom: 4px !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact #gic-follow-letters{
+        padding-top: 4px !important;
+        padding-bottom: 5px !important;
+      }
+
+      body.is-index-complet-page.gic-premium-compact #gic-follow-letters a{
+        min-width: 24px !important;
+        height: 24px !important;
+        padding: 0 7px !important;
+      }
+    }
+  </style>
+
+  <script is:inline>
+    /*
+      INDEX COMPLET — FOLLOW LABEL ET STABILITÉ DESKTOP
+
+      Sur cette page, les sections alphabétiques A/B/C… ne doivent pas
+      devenir le titre du reading-follow : la lettre active est déjà
+      portée par la barre alphabétique.
+    */
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const follow = document.getElementById("reading-follow");
+        const inner = follow?.querySelector(".reading-follow__inner");
+
+        if (!body || !follow || !inner) return;
+
+        const LETTER_RE = /^[A-ZÀÂÄÇÉÈÊËÎÏÔÖÙÛÜŸ]$/i;
+
+        const normalize = () => {
+          if (!body.classList.contains("is-index-complet-page")) return;
+
+          const h1 = inner.querySelector(".rf-h1");
+          const h2 = inner.querySelector(".rf-h2");
+          const h3 = inner.querySelector(".rf-h3");
+
+          const txt = (h2?.textContent || "").replace(/\s+/g, " ").trim();
+
+          if (
+            h2 &&
+            (
+              LETTER_RE.test(txt) ||
+              body.classList.contains("gic-letters-docked") ||
+              body.classList.contains("gic-premium-letters-on")
+            )
+          ) {
+            if (h1) h1.textContent = "Index complet du glossaire";
+            h2.textContent = "Index alphabétique";
+            if (h3) h3.textContent = "";
+          }
+        };
+
+        let raf = 0;
+        const schedule = () => {
+          if (raf) return;
+          raf = requestAnimationFrame(() => {
+            raf = 0;
+            normalize();
+          });
+        };
+
+        const observer = new MutationObserver(schedule);
+
+        observer.observe(body, {
+          attributes: true,
+          attributeFilter: ["class"],
+        });
+
+        observer.observe(inner, {
+          childList: true,
+          subtree: true,
+          characterData: true,
+        });
+
+        window.addEventListener("scroll", schedule, { passive: true });
+        window.addEventListener("resize", schedule);
+        window.addEventListener("pageshow", schedule);
+
+        schedule();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
+
+  <style is:global>
+    /* INDEX COMPLET — FOLLOW LABEL ET STABILITÉ DESKTOP */
+
+    @media (min-width: 981px){
+      body.is-index-complet-page.glossary-portal-follow-on #reading-follow{
+        top: calc(
+          var(--glossary-sticky-top, var(--sticky-header-h, 0px))
+          + var(--glossary-local-sticky-h, 0px)
+          - 1px
+        ) !important;
+        z-index: 71 !important;
+      }
+
+      body.is-index-complet-page.gic-letters-docked #gic-follow-letters{
+        top: calc(
+          var(--glossary-sticky-top, var(--sticky-header-h, 0px))
+          + var(--glossary-local-sticky-h, 0px)
+          + var(--followbar-h, 0px)
+          - 1px
+        ) !important;
+        z-index: 70 !important;
+      }
+
+      body.is-index-complet-page.gic-letters-docked #reading-follow .rf-h2{
+        white-space: nowrap !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+      }
+    }
+  </style>
+
+  <script is:inline>
+    /*
+      INDEX COMPLET — DESKTOP FOLLOW GATE
+
+      Le reading-follow ne doit pas apparaître en haut de page.
+      Il devient visible seulement lorsque le hero est effectivement condensé.
+    */
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const hero = document.querySelector("[data-glossary-portal-hero]");
+        const follow = document.getElementById("reading-follow");
+
+        if (!body || !hero || !follow) return;
+
+        const mqDesktop = window.matchMedia("(min-width: 981px)");
+
+        const sync = () => {
+          if (!mqDesktop.matches) {
+            body.classList.remove("gic-desktop-follow-gated");
+            return;
+          }
+
+          const condensed = body.classList.contains("glossary-portal-hero-condensed");
+          body.classList.toggle("gic-desktop-follow-gated", !condensed);
+
+          if (!condensed) {
+            follow.classList.remove("is-on");
+            follow.setAttribute("aria-hidden", "true");
+          }
+        };
+
+        let raf = 0;
+        const schedule = () => {
+          if (raf) return;
+          raf = requestAnimationFrame(() => {
+            raf = 0;
+            sync();
+          });
+        };
+
+        const observer = new MutationObserver(schedule);
+        observer.observe(body, {
+          attributes: true,
+          attributeFilter: ["class"],
+        });
+
+        window.addEventListener("scroll", schedule, { passive: true });
+        window.addEventListener("resize", schedule);
+        window.addEventListener("pageshow", schedule);
+
+        if (mqDesktop.addEventListener) mqDesktop.addEventListener("change", schedule);
+        else if (mqDesktop.addListener) mqDesktop.addListener(schedule);
+
+        schedule();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
+
+  <style is:global>
+    /* INDEX COMPLET — DESKTOP FOLLOW GATE */
+
+    @media (min-width: 981px){
+      body.is-index-complet-page.gic-desktop-follow-gated #reading-follow,
+      body.is-index-complet-page.gic-desktop-follow-gated #reading-follow .reading-follow__inner{
+        opacity: 0 !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+      }
+
+      body.is-index-complet-page.gic-desktop-follow-gated #gic-follow-letters{
+        opacity: 0 !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+      }
+    }
+  </style>
+
+  <script is:inline>
+    /*
+      INDEX COMPLET — AUTO-CENTER ACTIVE LETTER
+
+      Sur mobile, la barre alphabétique horizontale doit suivre le lecteur :
+      la lettre active est automatiquement recentrée dans gic-follow-letters.
+    */
+    (() => {
+      const boot = () => {
+        const body = document.body;
+        const lettersFollow = document.getElementById("gic-follow-letters");
+
+        if (!body || !lettersFollow) return;
+
+        const mqCompact = window.matchMedia("(max-width: 760px)");
+
+        let lastHref = "";
+        let raf = 0;
+
+        const centerActiveLetter = () => {
+          raf = 0;
+
+          if (!mqCompact.matches) return;
+          if (!body.classList.contains("is-index-complet-page")) return;
+          if (!body.classList.contains("gic-premium-letters-on")) return;
+
+          const active =
+            lettersFollow.querySelector('a[aria-current="true"]') ||
+            lettersFollow.querySelector("a.is-active");
+
+          if (!active) return;
+
+          const href = active.getAttribute("href") || "";
+          const force = href !== lastHref;
+          lastHref = href;
+
+          const containerRect = lettersFollow.getBoundingClientRect();
+          const activeRect = active.getBoundingClientRect();
+
+          const activeCenter =
+            activeRect.left - containerRect.left + lettersFollow.scrollLeft + activeRect.width / 2;
+
+          const target =
+            activeCenter - lettersFollow.clientWidth / 2;
+
+          const max =
+            lettersFollow.scrollWidth - lettersFollow.clientWidth;
+
+          const next = Math.max(0, Math.min(max, Math.round(target)));
+
+          if (force || Math.abs(lettersFollow.scrollLeft - next) > 6) {
+            lettersFollow.scrollTo({
+              left: next,
+              behavior: "smooth",
+            });
+          }
+        };
+
+        const schedule = () => {
+          if (raf) return;
+          raf = requestAnimationFrame(centerActiveLetter);
+        };
+
+        const observer = new MutationObserver(schedule);
+
+        observer.observe(lettersFollow, {
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["class", "aria-current"],
+        });
+
+        observer.observe(body, {
+          attributes: true,
+          attributeFilter: ["class"],
+        });
+
+        window.addEventListener("scroll", schedule, { passive: true });
+        window.addEventListener("resize", schedule);
+        window.addEventListener("pageshow", schedule);
+
+        if (mqCompact.addEventListener) mqCompact.addEventListener("change", schedule);
+        else if (mqCompact.addListener) mqCompact.addListener(schedule);
+
+        schedule();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+    })();
+  </script>
+
 </GlossaryLayout>
 
 <style>
@@ -1041,4 +1818,5 @@ const prolongerLinks = [
       --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
     }
   }
+
 </style>

src/pages/glossaire/index.astro

@@ -351,6 +351,7 @@ const approfondirPortalItems = [
     let raf = 0;
     let activeHeading = null;
     let clearTimer = 0;
+    let homeFollowOn = false;
 
     function syncStickyTop() {
       const headerHeight = header.getBoundingClientRect().height || 0;
@@ -368,8 +369,15 @@ const approfondirPortalItems = [
         Number.parseFloat(cs.lineHeight) ||
         Math.round(sourceFontSize * 1.06 * 100) / 100;
 
-      const scaledFontSize = Math.max(28, sourceFontSize * 0.9);
-      const scaledLineHeight = Math.max(scaledFontSize * 1.04, sourceLineHeight * 0.92);
+      const compactHomeSticky = window.matchMedia("(max-width: 980px)").matches;
+
+      const scaledFontSize = compactHomeSticky
+        ? Math.min(20, Math.max(14, sourceFontSize * 0.56))
+        : Math.max(28, sourceFontSize * 0.9);
+
+      const scaledLineHeight = compactHomeSticky
+        ? Math.max(scaledFontSize * 1.08, 16)
+        : Math.max(scaledFontSize * 1.04, sourceLineHeight * 0.92);
 
       toEl.style.fontSize = `${scaledFontSize}px`;
       toEl.style.lineHeight = `${scaledLineHeight}px`;
@@ -469,6 +477,7 @@ const approfondirPortalItems = [
     function updateFollow() {
       syncStickyTop();
 
+      const compactHomeSticky = window.matchMedia("(max-width: 980px)").matches;
       const heroRect = hero.getBoundingClientRect();
       const active = getCurrentHeading();
 
@@ -478,9 +487,23 @@ const approfondirPortalItems = [
             .getPropertyValue("--glossary-sticky-top")
         ) || 64;
 
-      const hasStartedScrolling = (window.scrollY || window.pageYOffset || 0) > 8;
-      const heroDocked = Math.abs(heroRect.top - stickyTop) <= 6;
-      const heroOut = hasStartedScrolling && heroDocked;
+      const scrollY = window.scrollY || window.pageYOffset || 0;
+      const hasStartedScrolling = scrollY > 8;
+
+      const heroDocked = compactHomeSticky
+        ? heroRect.top <= stickyTop + 8
+        : Math.abs(heroRect.top - stickyTop) <= 6;
+
+      const enterFollow = hasStartedScrolling && heroDocked;
+      const exitFollow = !hasStartedScrolling || heroRect.top > stickyTop + (compactHomeSticky ? 28 : 12);
+
+      if (enterFollow) {
+        homeFollowOn = true;
+      } else if (exitFollow) {
+        homeFollowOn = false;
+      }
+
+      const heroOut = homeFollowOn;
 
       document.body.classList.toggle("glossary-home-follow-on", heroOut);
 
@@ -569,7 +592,7 @@ const approfondirPortalItems = [
     }
 
     .glossary-map-block{
-      padding: 18px 18px 20px;
+      padding: 16px 18px 18px;
       border: 1px solid var(--glossary-border);
       border-radius: 24px;
       background: rgba(127,127,127,0.04);
@@ -577,9 +600,9 @@ const approfondirPortalItems = [
 
     .glossary-map-block__head p{
       max-width: 76ch;
-      margin: 12px 0 0;
-      font-size: 1rem;
-      line-height: 1.55;
+      margin: 9px 0 0;
+      font-size: .98rem;
+      line-height: 1.46;
       opacity: .94;
       text-wrap: pretty;
     }
@@ -587,28 +610,56 @@ const approfondirPortalItems = [
     .glossary-map{
       display: grid;
       justify-items: center;
-      gap: 10px;
-      margin-top: 18px;
+      gap: 6px;
+      margin-top: 14px;
     }
 
     .glossary-map__stage{
       width: min(580px, 100%);
       display: grid;
       justify-items: center;
-      gap: 10px;
+      gap: 6px;
     }
 
     .glossary-map__title{
       width: 100%;
       text-align: center;
-      font-size: 1.08rem;
-      line-height: 1.25;
+      font-size: .98rem;
+      line-height: 1.16;
       font-weight: 800;
       letter-spacing: -.01em;
       opacity: .96;
       text-wrap: balance;
     }
 
+    .glossary-map__node{
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 42px;
+      padding: 8px 14px;
+      border: 1px solid var(--glossary-border-strong);
+      border-radius: 999px;
+      background: var(--glossary-bg-soft);
+      color: var(--glossary-accent);
+      text-decoration: none;
+      text-align: center;
+      font-size: .94rem;
+      font-weight: 800;
+      letter-spacing: .04em;
+      line-height: 1.16;
+      transition:
+        transform 120ms ease,
+        background 120ms ease,
+        border-color 120ms ease;
+    }
+
+    .glossary-map__arrow{
+      font-size: 1.18rem;
+      line-height: .9;
+      opacity: .68;
+    }
+
     .glossary-map__roots{
       width: 100%;
       display: grid;
@@ -616,28 +667,6 @@ const approfondirPortalItems = [
       gap: 8px;
     }
 
-    .glossary-map__node{
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 50px;
-      padding: 10px 14px;
-      border: 1px solid var(--glossary-border-strong);
-      border-radius: 999px;
-      background: var(--glossary-bg-soft);
-      color: var(--glossary-accent);
-      text-decoration: none;
-      text-align: center;
-      font-size: .99rem;
-      font-weight: 800;
-      letter-spacing: .04em;
-      line-height: 1.2;
-      transition:
-        transform 120ms ease,
-        background 120ms ease,
-        border-color 120ms ease;
-    }
-
     .glossary-map__node:hover{
       background: var(--glossary-bg-soft-strong);
       border-color: rgba(0,217,255,0.22);
@@ -650,12 +679,6 @@ const approfondirPortalItems = [
       max-width: 100%;
     }
 
-    .glossary-map__arrow{
-      font-size: 1.45rem;
-      line-height: 1;
-      opacity: .72;
-    }
-
     .glossary-portal-card strong{
       color: var(--glossary-accent);
       font-size: 1.08rem;
@@ -720,11 +743,17 @@ const approfondirPortalItems = [
 
       .glossary-map-block__head h2,
       .glossary-section h2{
-        font-size: clamp(1.5rem, 7vw, 1.95rem);
-        line-height: 1.04;
+        font-size: clamp(1.42rem, 6.3vw, 1.82rem);
+        line-height: 1.03;
         letter-spacing: -.022em;
       }
 
+      .glossary-map-block__head h2{
+        hyphens: none;
+        word-break: normal;
+        overflow-wrap: normal;
+      }
+
       .glossary-map-block__head p,
       .glossary-intro{
         font-size: .9rem;
@@ -742,35 +771,36 @@ const approfondirPortalItems = [
       }
 
       .glossary-map{
-        gap: 7px;
-        margin-top: 12px;
+        gap: 4px;
+        margin-top: 10px;
       }
 
       .glossary-map__stage{
-        gap: 7px;
+        gap: 4px;
         width: 100%;
       }
 
       .glossary-map__title{
-        font-size: .9rem;
-        line-height: 1.2;
+        font-size: .82rem;
+        line-height: 1.12;
       }
 
       .glossary-map__roots{
         grid-template-columns: 1fr;
-        gap: 6px;
+        gap: 5px;
       }
 
       .glossary-map__node{
-        min-height: 38px;
-        padding: 8px 10px;
-        font-size: .84rem;
-        line-height: 1.15;
+        min-height: 32px;
+        padding: 6px 10px;
+        font-size: .78rem;
+        line-height: 1.12;
       }
 
       .glossary-map__arrow{
-        font-size: 1rem;
-        opacity: .62;
+        font-size: .92rem;
+        line-height: .8;
+        opacity: .6;
       }
     }
 
@@ -804,23 +834,28 @@ const approfondirPortalItems = [
       }
 
       .glossary-map{
-        gap: 5px;
-        margin-top: 10px;
+        gap: 3px;
+        margin-top: 8px;
       }
 
       .glossary-map__stage{
-        gap: 5px;
+        gap: 3px;
       }
 
       .glossary-map__title{
-        font-size: .8rem;
-        line-height: 1.12;
+        font-size: .74rem;
+        line-height: 1.08;
       }
 
       .glossary-map__node{
-        min-height: 32px;
-        padding: 6px 8px;
-        font-size: .74rem;
+        min-height: 28px;
+        padding: 5px 8px;
+        font-size: .7rem;
+      }
+
+      .glossary-map__arrow{
+        font-size: .82rem;
+        line-height: .75;
       }
 
       .glossary-home .glossary-card,

src/pages/glossaire/paradigme-archicratique.astro

@@ -663,80 +663,10 @@ const usefulLinks = [
   <GlossaryPortalStickySync
     heroMoreId="pa-hero-more"
     heroToggleId="pa-hero-toggle"
+    mobileBreakpoint={980}
+    compactSticky={true}
   />
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const follow = document.getElementById("reading-follow");
-
-        if (!body || !root || !follow) return;
-
-        body.classList.add("is-glossary-portal-page");
-
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const mqSmallLandscape = window.matchMedia(
-          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
-        );
-
-        const isCompactViewport = () =>
-          mqMobile.matches || mqSmallLandscape.matches;
-
-        const disableFollow = () => {
-          if (!isCompactViewport()) return;
-
-          follow.classList.remove("is-on");
-          follow.setAttribute("aria-hidden", "true");
-          follow.style.display = "none";
-          follow.innerHTML = "";
-
-          root.style.setProperty("--followbar-h", "0px");
-          root.style.setProperty(
-            "--sticky-offset-px",
-            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
-          );
-        };
-
-        const enableFollow = () => {
-          if (isCompactViewport()) return;
-          follow.style.display = "";
-        };
-
-        const sync = () => {
-          if (isCompactViewport()) {
-            disableFollow();
-          } else {
-            enableFollow();
-          }
-        };
-
-        if (mqMobile.addEventListener) {
-          mqMobile.addEventListener("change", sync);
-        } else if (mqMobile.addListener) {
-          mqMobile.addListener(sync);
-        }
-
-        if (mqSmallLandscape.addEventListener) {
-          mqSmallLandscape.addEventListener("change", sync);
-        } else if (mqSmallLandscape.addListener) {
-          mqSmallLandscape.addListener(sync);
-        }
-
-        window.addEventListener("resize", sync);
-        window.addEventListener("pageshow", sync);
-
-        sync();
-      };
-
-      if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", boot, { once: true });
-      } else {
-        boot();
-      }
-    })();
-  </script>
 </GlossaryLayout>
 
 <style>
@@ -1072,38 +1002,4 @@ const usefulLinks = [
       font-size: 10.5px;
     }
   }
-
-    :global(body.is-glossary-portal-page #reading-follow){
-    z-index: 10;
-  }
-
-  @media (max-width: 860px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
-
-  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
 </style>

src/pages/glossaire/paradigmes.astro

@@ -211,80 +211,10 @@ const prolongerLinks = [
   <GlossaryPortalStickySync
     heroMoreId="theo-hero-more"
     heroToggleId="theo-hero-toggle"
+    mobileBreakpoint={980}
+    compactSticky={true}
   />
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const follow = document.getElementById("reading-follow");
-
-        if (!body || !root || !follow) return;
-
-        body.classList.add("is-glossary-portal-page");
-
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const mqSmallLandscape = window.matchMedia(
-          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
-        );
-
-        const isCompactViewport = () =>
-          mqMobile.matches || mqSmallLandscape.matches;
-
-        const disableFollow = () => {
-          if (!isCompactViewport()) return;
-
-          follow.classList.remove("is-on");
-          follow.setAttribute("aria-hidden", "true");
-          follow.style.display = "none";
-          follow.innerHTML = "";
-
-          root.style.setProperty("--followbar-h", "0px");
-          root.style.setProperty(
-            "--sticky-offset-px",
-            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
-          );
-        };
-
-        const enableFollow = () => {
-          if (isCompactViewport()) return;
-          follow.style.display = "";
-        };
-
-        const sync = () => {
-          if (isCompactViewport()) {
-            disableFollow();
-          } else {
-            enableFollow();
-          }
-        };
-
-        if (mqMobile.addEventListener) {
-          mqMobile.addEventListener("change", sync);
-        } else if (mqMobile.addListener) {
-          mqMobile.addListener(sync);
-        }
-
-        if (mqSmallLandscape.addEventListener) {
-          mqSmallLandscape.addEventListener("change", sync);
-        } else if (mqSmallLandscape.addListener) {
-          mqSmallLandscape.addListener(sync);
-        }
-
-        window.addEventListener("resize", sync);
-        window.addEventListener("pageshow", sync);
-
-        sync();
-      };
-
-      if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", boot, { once: true });
-      } else {
-        boot();
-      }
-    })();
-  </script>
 </GlossaryLayout>
 
 <style>
@@ -390,38 +320,4 @@ const prolongerLinks = [
       grid-template-columns: 1fr;
     }
   }
-
-    :global(body.is-glossary-portal-page #reading-follow){
-    z-index: 10;
-  }
-
-  @media (max-width: 860px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
-
-  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
 </style>

src/pages/glossaire/scenes-archicratiques.astro

@@ -313,80 +313,10 @@ const prolongerLinks = [
   <GlossaryPortalStickySync
     heroMoreId="scene-hero-more"
     heroToggleId="scene-hero-toggle"
+    mobileBreakpoint={980}
+    compactSticky={true}
   />
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const follow = document.getElementById("reading-follow");
-
-        if (!body || !root || !follow) return;
-
-        body.classList.add("is-glossary-portal-page");
-
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const mqSmallLandscape = window.matchMedia(
-          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
-        );
-
-        const isCompactViewport = () =>
-          mqMobile.matches || mqSmallLandscape.matches;
-
-        const disableFollow = () => {
-          if (!isCompactViewport()) return;
-
-          follow.classList.remove("is-on");
-          follow.setAttribute("aria-hidden", "true");
-          follow.style.display = "none";
-          follow.innerHTML = "";
-
-          root.style.setProperty("--followbar-h", "0px");
-          root.style.setProperty(
-            "--sticky-offset-px",
-            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
-          );
-        };
-
-        const enableFollow = () => {
-          if (isCompactViewport()) return;
-          follow.style.display = "";
-        };
-
-        const sync = () => {
-          if (isCompactViewport()) {
-            disableFollow();
-          } else {
-            enableFollow();
-          }
-        };
-
-        if (mqMobile.addEventListener) {
-          mqMobile.addEventListener("change", sync);
-        } else if (mqMobile.addListener) {
-          mqMobile.addListener(sync);
-        }
-
-        if (mqSmallLandscape.addEventListener) {
-          mqSmallLandscape.addEventListener("change", sync);
-        } else if (mqSmallLandscape.addListener) {
-          mqSmallLandscape.addListener(sync);
-        }
-
-        window.addEventListener("resize", sync);
-        window.addEventListener("pageshow", sync);
-
-        sync();
-      };
-
-      if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", boot, { once: true });
-      } else {
-        boot();
-      }
-    })();
-  </script>
 </GlossaryLayout>
 
 <style>
@@ -523,38 +453,4 @@ const prolongerLinks = [
       grid-template-columns: 1fr;
     }
   }
-
-    :global(body.is-glossary-portal-page #reading-follow){
-    z-index: 10;
-  }
-
-  @media (max-width: 860px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
-
-  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
 </style>

src/pages/glossaire/tensions-irreductibles.astro

@@ -340,80 +340,10 @@ const prolongerLinks = [
   <GlossaryPortalStickySync
     heroMoreId="tir-hero-more"
     heroToggleId="tir-hero-toggle"
+    mobileBreakpoint={980}
+    compactSticky={true}
   />
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const follow = document.getElementById("reading-follow");
-
-        if (!body || !root || !follow) return;
-
-        body.classList.add("is-glossary-portal-page");
-
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const mqSmallLandscape = window.matchMedia(
-          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
-        );
-
-        const isCompactViewport = () =>
-          mqMobile.matches || mqSmallLandscape.matches;
-
-        const disableFollow = () => {
-          if (!isCompactViewport()) return;
-
-          follow.classList.remove("is-on");
-          follow.setAttribute("aria-hidden", "true");
-          follow.style.display = "none";
-          follow.innerHTML = "";
-
-          root.style.setProperty("--followbar-h", "0px");
-          root.style.setProperty(
-            "--sticky-offset-px",
-            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
-          );
-        };
-
-        const enableFollow = () => {
-          if (isCompactViewport()) return;
-          follow.style.display = "";
-        };
-
-        const sync = () => {
-          if (isCompactViewport()) {
-            disableFollow();
-          } else {
-            enableFollow();
-          }
-        };
-
-        if (mqMobile.addEventListener) {
-          mqMobile.addEventListener("change", sync);
-        } else if (mqMobile.addListener) {
-          mqMobile.addListener(sync);
-        }
-
-        if (mqSmallLandscape.addEventListener) {
-          mqSmallLandscape.addEventListener("change", sync);
-        } else if (mqSmallLandscape.addListener) {
-          mqSmallLandscape.addListener(sync);
-        }
-
-        window.addEventListener("resize", sync);
-        window.addEventListener("pageshow", sync);
-
-        sync();
-      };
-
-      if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", boot, { once: true });
-      } else {
-        boot();
-      }
-    })();
-  </script>
 </GlossaryLayout>
 
 <style>
@@ -564,38 +494,4 @@ const prolongerLinks = [
       grid-template-columns: 1fr;
     }
   }
-
-    :global(body.is-glossary-portal-page #reading-follow){
-    z-index: 10;
-  }
-
-  @media (max-width: 860px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
-
-  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
 </style>

src/pages/glossaire/topologie-regimes-regulation.astro

@@ -256,6 +256,8 @@ const matrix = [
   <GlossaryPortalStickySync
     heroMoreId="topo-hero-more"
     heroToggleId="topo-hero-toggle"
+    mobileBreakpoint={980}
+    compactSticky={true}
   />
 </GlossaryLayout>
 

src/pages/glossaire/verbes-de-la-scene.astro

@@ -327,80 +327,10 @@ const prolongerLinks = [
   <GlossaryPortalStickySync
     heroMoreId="verbs-hero-more"
     heroToggleId="verbs-hero-toggle"
+    mobileBreakpoint={980}
+    compactSticky={true}
   />
 
-  <script is:inline>
-    (() => {
-      const boot = () => {
-        const body = document.body;
-        const root = document.documentElement;
-        const follow = document.getElementById("reading-follow");
-
-        if (!body || !root || !follow) return;
-
-        body.classList.add("is-glossary-portal-page");
-
-        const mqMobile = window.matchMedia("(max-width: 860px)");
-        const mqSmallLandscape = window.matchMedia(
-          "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
-        );
-
-        const isCompactViewport = () =>
-          mqMobile.matches || mqSmallLandscape.matches;
-
-        const disableFollow = () => {
-          if (!isCompactViewport()) return;
-
-          follow.classList.remove("is-on");
-          follow.setAttribute("aria-hidden", "true");
-          follow.style.display = "none";
-          follow.innerHTML = "";
-
-          root.style.setProperty("--followbar-h", "0px");
-          root.style.setProperty(
-            "--sticky-offset-px",
-            "calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
-          );
-        };
-
-        const enableFollow = () => {
-          if (isCompactViewport()) return;
-          follow.style.display = "";
-        };
-
-        const sync = () => {
-          if (isCompactViewport()) {
-            disableFollow();
-          } else {
-            enableFollow();
-          }
-        };
-
-        if (mqMobile.addEventListener) {
-          mqMobile.addEventListener("change", sync);
-        } else if (mqMobile.addListener) {
-          mqMobile.addListener(sync);
-        }
-
-        if (mqSmallLandscape.addEventListener) {
-          mqSmallLandscape.addEventListener("change", sync);
-        } else if (mqSmallLandscape.addListener) {
-          mqSmallLandscape.addListener(sync);
-        }
-
-        window.addEventListener("resize", sync);
-        window.addEventListener("pageshow", sync);
-
-        sync();
-      };
-
-      if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", boot, { once: true });
-      } else {
-        boot();
-      }
-    })();
-  </script>
 </GlossaryLayout>
 
 <style>
@@ -480,38 +410,4 @@ const prolongerLinks = [
       grid-template-columns: 1fr;
     }
   }
-
-    :global(body.is-glossary-portal-page #reading-follow){
-    z-index: 10;
-  }
-
-  @media (max-width: 860px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
-
-  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
-    :global(body.is-glossary-portal-page #reading-follow),
-    :global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
-      display: none !important;
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    :global(body.is-glossary-portal-page){
-      --followbar-h: 0px !important;
-      --sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
-    }
-  }
 </style>

src/pages/index.astro

@@ -32,12 +32,12 @@ import SiteLayout from "../layouts/SiteLayout.astro";
 
       <div class="landing-grid">
         <a class="landing-card" href="/archicrat-ia/">
-          <strong>Essai-thèse — ArchiCraT-IA</strong>
+          <strong>Essai-thèse — Archicratie</strong>
           <span>
             Le corpus principal : fondements, histoire, philosophie du pouvoir,
             tensions et régulations archicratiques.
           </span>
-          <small>Lire ArchiCraT-IA →</small>
+          <small>Lire Archicratie →</small>
         </a>
 
         <a class="landing-card" href="/cas-ia/">