fix(glossaire): description précise du correctif
All checks were successful
SMOKE / smoke (push) Successful in 2s
CI / build-and-anchors (push) Successful in 44s
CI / build-and-anchors (pull_request) Successful in 39s

This commit is contained in:
2026-03-21 21:39:02 +01:00
parent bb0572cc1a
commit e952b344a0
2 changed files with 191 additions and 10 deletions

View File

@@ -79,6 +79,7 @@ const portalLinks = [
{ href: "/glossaire/tensions-irreductibles/", label: "Tensions irréductibles" }, { href: "/glossaire/tensions-irreductibles/", label: "Tensions irréductibles" },
{ href: "/glossaire/archicrations/", label: "Méta-régimes archicratiques" }, { href: "/glossaire/archicrations/", label: "Méta-régimes archicratiques" },
{ href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" }, { href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
{ href: "/glossaire/verbes-de-la-scene/", label: "Verbes de la scène" },
{ href: "/glossaire/index-complet/", label: "Index complet" }, { href: "/glossaire/index-complet/", label: "Index complet" },
]; ];
--- ---

View File

@@ -194,6 +194,7 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
<GlossaryLayout <GlossaryLayout
title="Verbes de la scène" title="Verbes de la scène"
version="1.0" version="1.0"
stickyMode="glossary-portal"
> >
<Fragment slot="aside"> <Fragment slot="aside">
<nav class="verbs-aside" aria-label="Navigation des verbes de la scène"> <nav class="verbs-aside" aria-label="Navigation des verbes de la scène">
@@ -218,7 +219,7 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
<li><a href="/glossaire/scene-depreuve/">Scène dépreuve</a></li> <li><a href="/glossaire/scene-depreuve/">Scène dépreuve</a></li>
<li><a href="/glossaire/archicration/">Archicration</a></li> <li><a href="/glossaire/archicration/">Archicration</a></li>
<li><a href="/glossaire/obliteration-archicratique/">Oblitération archicratique</a></li> <li><a href="/glossaire/obliteration-archicratique/">Oblitération archicratique</a></li>
<li><a href="/glossaire/archicration-obliterée/">Archicration oblitérée</a></li> <li><a href="/glossaire/archicration-obliteree/">Archicration oblitérée</a></li>
<li><a href="/glossaire/synchrotopie/">Synchrotopie</a></li> <li><a href="/glossaire/synchrotopie/">Synchrotopie</a></li>
<li><a href="/glossaire/hypotopie/">Hypotopie</a></li> <li><a href="/glossaire/hypotopie/">Hypotopie</a></li>
<li><a href="/glossaire/hypertopie/">Hypertopie</a></li> <li><a href="/glossaire/hypertopie/">Hypertopie</a></li>
@@ -228,8 +229,8 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
</nav> </nav>
</Fragment> </Fragment>
<section class="verbs-page"> <section class="verbs-page" data-verbs-page>
<div class="verbs-hero"> <div class="verbs-hero" data-verbs-hero>
<p class="verbs-kicker">Mini-glossaire systémique</p> <p class="verbs-kicker">Mini-glossaire systémique</p>
<h1>Verbes de la scène archicratique</h1> <h1>Verbes de la scène archicratique</h1>
<p class="verbs-intro"> <p class="verbs-intro">
@@ -245,9 +246,9 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
</div> </div>
{sections.map((section) => ( {sections.map((section) => (
<section class="verbs-section" id={section.id}> <section class="verbs-section">
<div class="verbs-section__head"> <div class="verbs-section__head">
<h2>{section.title}</h2> <h2 id={section.id}>{section.title}</h2>
<span class="verbs-section__count"> <span class="verbs-section__count">
{section.items.length} verbe{section.items.length > 1 ? "s" : ""} {section.items.length} verbe{section.items.length > 1 ? "s" : ""}
</span> </span>
@@ -282,6 +283,112 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
</p> </p>
</section> </section>
</section> </section>
<script is:inline>
(() => {
const boot = () => {
const body = document.body;
const root = document.documentElement;
const hero = document.querySelector("[data-verbs-hero]");
if (!body || !root || !hero) return;
const BODY_CLASS = "is-verbes-de-la-scene-page";
const FOLLOW_ON_CLASS = "verbs-follow-on";
const mqMobile = window.matchMedia("(max-width: 860px)");
body.classList.add(BODY_CLASS);
const heroHeight = () =>
Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
const stripLocalSticky = () => {
document.querySelectorAll(".verbs-section__head").forEach((el) => {
el.classList.remove("is-sticky");
el.removeAttribute("data-sticky-active");
});
};
const applyLocalStickyHeight = () => {
const h = mqMobile.matches ? 0 : heroHeight();
if (typeof window.__archiSetLocalStickyHeight === "function") {
window.__archiSetLocalStickyHeight(h);
} else {
root.style.setProperty("--glossary-local-sticky-h", `${h}px`);
}
};
const syncFollowState = () => {
const follow = document.getElementById("reading-follow");
const followOn =
!mqMobile.matches &&
!!follow &&
follow.classList.contains("is-on") &&
follow.style.display !== "none" &&
follow.getAttribute("aria-hidden") !== "true";
body.classList.toggle(FOLLOW_ON_CLASS, followOn);
};
const syncAll = () => {
stripLocalSticky();
applyLocalStickyHeight();
syncFollowState();
};
let raf = 0;
const schedule = () => {
if (raf) return;
raf = requestAnimationFrame(() => {
raf = 0;
requestAnimationFrame(syncAll);
});
};
const follow = document.getElementById("reading-follow");
const followObserver =
follow
? new MutationObserver(schedule)
: null;
followObserver?.observe(follow, {
attributes: true,
attributeFilter: ["class", "style", "aria-hidden"],
subtree: false,
});
const heroResizeObserver =
typeof ResizeObserver !== "undefined"
? new ResizeObserver(schedule)
: null;
heroResizeObserver?.observe(hero);
window.addEventListener("resize", schedule);
window.addEventListener("pageshow", schedule);
if (document.fonts?.ready) {
document.fonts.ready.then(schedule).catch(() => {});
}
if (mqMobile.addEventListener) {
mqMobile.addEventListener("change", schedule);
} else if (mqMobile.addListener) {
mqMobile.addListener(schedule);
}
schedule();
};
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", boot, { once: true });
} else {
boot();
}
})();
</script>
</GlossaryLayout> </GlossaryLayout>
<style> <style>
@@ -290,29 +397,58 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
} }
.verbs-hero{ .verbs-hero{
margin-bottom: 24px; position: sticky;
top: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px));
z-index: 11;
margin: 0 0 24px;
padding: 18px 18px 20px;
border: 1px solid rgba(127,127,127,0.18);
border-radius: 28px;
background:
linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.92)),
radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
margin-bottom 180ms ease,
border-radius 180ms ease;
} }
.verbs-kicker{ .verbs-kicker{
margin: 0 0 10px;
font-size: 12px; font-size: 12px;
letter-spacing: .08em; letter-spacing: .08em;
text-transform: uppercase; text-transform: uppercase;
opacity: .72; opacity: .72;
margin-bottom: 8px; }
.verbs-hero h1{
margin: 0 0 14px;
font-size: clamp(2.2rem, 4vw, 3.15rem);
line-height: 1.02;
letter-spacing: -.04em;
font-weight: 850;
} }
.verbs-intro{ .verbs-intro{
max-width: 76ch; max-width: 76ch;
opacity: .92; margin: 0;
font-size: 1.04rem;
line-height: 1.55;
opacity: .94;
}
.verbs-intro + .verbs-intro{
margin-top: 14px;
} }
.verbs-section{ .verbs-section{
margin-top: 34px; margin-top: 34px;
scroll-margin-top: calc(var(--sticky-offset) + 75px); scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
} }
.verbs-section h2{ .verbs-section h2{
scroll-margin-top: calc(var(--sticky-offset) + 75px); scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 28px);
} }
.verbs-section__head{ .verbs-section__head{
@@ -321,6 +457,8 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 10px;
position: static;
} }
.verbs-section__count{ .verbs-section__count{
@@ -331,6 +469,7 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
.verbs-section__intro{ .verbs-section__intro{
max-width: 78ch; max-width: 78ch;
margin: 0;
opacity: .92; opacity: .92;
} }
@@ -435,6 +574,47 @@ const totalCount = sections.reduce((sum, section) => sum + section.items.length,
line-height: 1.3; line-height: 1.3;
} }
:global(body.is-verbes-de-la-scene-page #reading-follow){
z-index: 10;
}
:global(body.is-verbes-de-la-scene-page.verbs-follow-on .verbs-hero){
margin-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
:global(body.is-verbes-de-la-scene-page.verbs-follow-on #reading-follow .reading-follow__inner){
border-top-left-radius: 0;
border-top-right-radius: 0;
}
:global(body.is-verbes-de-la-scene-page .verbs-section__head.is-sticky),
:global(body.is-verbes-de-la-scene-page .verbs-section__head[data-sticky-active="true"]){
position: static !important;
top: auto !important;
z-index: auto !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
@media (max-width: 860px){
.verbs-hero{
position: static;
border-radius: 22px;
margin-bottom: 20px;
}
:global(body.is-verbes-de-la-scene-page.verbs-follow-on .verbs-hero){
border-radius: 22px;
margin-bottom: 20px;
}
}
@media (prefers-color-scheme: dark){ @media (prefers-color-scheme: dark){
.verbs-card, .verbs-card,
.verbs-aside__block{ .verbs-aside__block{