feat(glossary): add step 21 smart navigation

2026-04-26 13:03:45 +02:00
parent 689619d14d
commit 9f88112aca
45 changed files with 1020 additions and 112 deletions
--- a/src/components/GlossaryAside.astro
+++ b/src/components/GlossaryAside.astro
@@ -49,7 +49,7 @@ const portalLinks = getGlossaryPortalLinks();
    </div>
  </div>

-  <details class="glossary-aside__block glossary-aside__disclosure" open>
+  <details class="glossary-aside__block glossary-aside__disclosure">
    <summary class="glossary-aside__summary">
      <span class="glossary-aside__heading">Portails</span>
      <span class="glossary-aside__chevron" aria-hidden="true">▾</span>
@@ -65,7 +65,7 @@ const portalLinks = getGlossaryPortalLinks();
  </details>

  {showNoyau && (
-    <details class="glossary-aside__block glossary-aside__disclosure" open>
+    <details class="glossary-aside__block glossary-aside__disclosure">
      <summary class="glossary-aside__summary">
        <span class="glossary-aside__heading">Noyau archicratique</span>
        <span class="glossary-aside__chevron" aria-hidden="true">▾</span>
@@ -93,7 +93,7 @@ const portalLinks = getGlossaryPortalLinks();
  )}

  {showSameFamily && (
-    <details class="glossary-aside__block glossary-aside__disclosure" open>
+    <details class="glossary-aside__block glossary-aside__disclosure">
      <summary class="glossary-aside__summary">
        <span class="glossary-aside__heading">{sameFamilyTitle}</span>
        <span class="glossary-aside__chevron" aria-hidden="true">▾</span>
@@ -121,7 +121,7 @@ const portalLinks = getGlossaryPortalLinks();
  )}

  {relationSections.length > 0 && (
-    <details class="glossary-aside__block glossary-aside__disclosure" open>
+    <details class="glossary-aside__block glossary-aside__disclosure">
      <summary class="glossary-aside__summary">
        <span class="glossary-aside__heading">Autour de cette fiche</span>
        <span class="glossary-aside__chevron" aria-hidden="true">▾</span>
@@ -143,7 +143,7 @@ const portalLinks = getGlossaryPortalLinks();
  )}

  {contextualTheory.length > 0 && (
-    <details class="glossary-aside__block glossary-aside__disclosure" open>
+    <details class="glossary-aside__block glossary-aside__disclosure">
      <summary class="glossary-aside__summary">
        <span class="glossary-aside__heading">Paysage théorique</span>
        <span class="glossary-aside__chevron" aria-hidden="true">▾</span>
@@ -445,7 +445,29 @@ const portalLinks = getGlossaryPortalLinks();
    }
  }

-  @media (min-width: 861px){
+  @media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse){
+    .glossary-aside{
+      gap: 10px;
+    }
+
+    .glossary-aside__disclosure{
+      background: rgba(127,127,127,0.045);
+    }
+
+    .glossary-aside__disclosure:not([open]) .glossary-aside__panel{
+      display: none;
+    }
+
+    .glossary-aside__summary{
+      cursor: pointer;
+    }
+
+    .glossary-aside__chevron{
+      display: inline;
+    }
+  }
+
+  @media (min-width: 861px) and (hover: hover) and (pointer: fine){
    .glossary-aside__summary{
      cursor: default;
    }
@@ -470,7 +492,9 @@ const portalLinks = getGlossaryPortalLinks();
 <script is:inline>
  (() => {
    const syncMobileDisclosure = () => {
-      const mobile = window.matchMedia("(max-width: 860px)").matches;
+      const mobile = window.matchMedia(
+        "(max-width: 860px), ((orientation: portrait) and (max-width: 1024px) and (pointer: coarse))"
+      ).matches;
      const smallLandscape = window.matchMedia(
        "(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
      ).matches;
@@ -484,7 +508,7 @@ const portalLinks = getGlossaryPortalLinks();

          if (compact) {
            if (!el.dataset.mobileInit) {
-              el.open = index === 0;
+              el.open = false;
              el.dataset.mobileInit = "true";
            }
          } else {
--- a/src/components/GlossaryEntryBody.astro
+++ b/src/components/GlossaryEntryBody.astro
@@ -4,7 +4,17 @@

 <style>
  .glossary-entry-body{
-    margin-bottom: 28px;
+    margin-bottom: 16px;
+  }
+
+  .glossary-entry-body > :last-child{
+    margin-bottom: 0;
+  }
+
+  @media (max-width: 760px){
+    .glossary-entry-body{
+      margin-bottom: 12px;
+    }
  }

  :global(.glossary-entry-body h2),
--- a/src/components/GlossaryEntryHero.astro
+++ b/src/components/GlossaryEntryHero.astro
@@ -73,7 +73,7 @@ const hasScholarlyMeta =
 <style>
  .glossary-entry-head{
    position: sticky;
-    top: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px));
+    top: var(--sticky-header-h, 0px);
    z-index: 11;
    margin: 0 0 22px;
    border: 1px solid rgba(127,127,127,0.18);
@@ -234,12 +234,16 @@ const hasScholarlyMeta =
    }

    .glossary-entry-summary{
-      gap: 8px;
-      padding: 9px 10px 10px;
+      gap: 9px;
+      padding: 9px 10px 11px;
    }

    .glossary-entry-dek{
-      -webkit-line-clamp: 2;
+      display: block;
+      max-width: none;
+      overflow: visible;
+      -webkit-line-clamp: unset;
+      -webkit-box-orient: unset;
    }

    .glossary-pill{
--- a/src/components/GlossaryEntryStickySync.astro
+++ b/src/components/GlossaryEntryStickySync.astro
@@ -24,8 +24,10 @@
      const isCompactViewport = () =>
        mqMobile.matches || mqSmallLandscape.matches;

-      const heroHeight = () =>
-        Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
+      const heroHeight = () => {
+        const rect = hero.getBoundingClientRect();
+        return Math.max(0, Math.round(rect.height || 0));
+      };

      const neutralizeGlobalFollowIfCompact = () => {
        if (!isCompactViewport()) {
@@ -45,6 +47,21 @@
        follow.style.display !== "none" &&
        follow.getAttribute("aria-hidden") !== "true";

+      const syncFollowState = () => {
+        const on = computeFollowOn();
+
+        if (on) {
+          if (lastFollowOn === true) return;
+          lastFollowOn = true;
+          body.classList.add(FOLLOW_ON_CLASS);
+          return;
+        }
+
+        if (lastFollowOn === false) return;
+        lastFollowOn = false;
+        body.classList.remove(FOLLOW_ON_CLASS);
+      };
+
      const stripLocalSticky = () => {
        document
          .querySelectorAll(
@@ -68,13 +85,6 @@
        }
      };

-      const syncFollowState = () => {
-        const on = computeFollowOn();
-        if (on === lastFollowOn) return;
-        lastFollowOn = on;
-        body.classList.toggle(FOLLOW_ON_CLASS, on);
-      };
-
      const syncAll = () => {
        neutralizeGlobalFollowIfCompact();
        stripLocalSticky();
@@ -139,13 +149,6 @@
    z-index: 10;
  }

-  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
-    margin-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
-  }
-
  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head h1){
    letter-spacing: -.03em;
  }
@@ -158,10 +161,9 @@
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-dek){
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
+    display: block;
+    -webkit-line-clamp: unset;
+    overflow: visible;
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
@@ -183,11 +185,11 @@
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow){
-    transform: translateY(-1px);
+    transform: none;
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow .reading-follow__inner){
-    margin-top: -1px;
+    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
@@ -238,7 +240,7 @@
    }

    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-dek){
-      display: none;
+      display: block;
    }

    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
--- a/src/components/GlossaryHomeHero.astro
+++ b/src/components/GlossaryHomeHero.astro
@@ -110,6 +110,11 @@ const {
      opacity 180ms ease;
  }

+  :global(body[data-edition-key="glossaire"] .glossary-hero p#glossary-hero-intro){
+    padding-right: 0;
+    scroll-margin-top: 0;
+  }
+
  .glossary-hero__toggle{
    display: inline-flex;
    align-items: center;
@@ -361,4 +366,95 @@ const {
      filter: none !important;
    }
  }
+
+  /* Neutralisation mobile/tablette : le hero n'est plus sticky, donc aucun état condensé. */
+  @media (max-width: 860px){
+    .glossary-hero{
+      position: static !important;
+      top: auto !important;
+      z-index: auto !important;
+      margin-bottom: 18px !important;
+      padding: 12px 14px 16px !important;
+      border-radius: 22px !important;
+      row-gap: 8px !important;
+    }
+
+    .glossary-hero h1,
+    :global(body.glossary-home-follow-on) .glossary-hero h1{
+      font-size: clamp(2rem, 6.2vw, 2.75rem) !important;
+      line-height: 1.04 !important;
+      letter-spacing: -.035em !important;
+      max-width: 100%;
+      overflow-wrap: normal;
+      word-break: normal;
+      hyphens: none;
+      text-wrap: balance;
+    }
+
+    .glossary-intro,
+    :global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
+      max-width: 100% !important;
+      width: 100% !important;
+      max-height: none !important;
+      overflow: visible !important;
+      display: block !important;
+      -webkit-line-clamp: unset !important;
+      -webkit-box-orient: unset !important;
+      font-size: .94rem !important;
+      line-height: 1.4 !important;
+      opacity: .94 !important;
+      padding-right: 0 !important;
+      scroll-margin-top: 0 !important;
+    }
+
+    .glossary-hero__toggle,
+    .glossary-hero-follow{
+      display: none !important;
+    }
+  }
+
+  /* Mobile paysage compact : même logique, mais plus dense. */
+  @media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
+    .glossary-hero{
+      padding: 8px 10px 9px !important;
+      border-radius: 14px !important;
+      row-gap: 5px !important;
+      margin-bottom: 10px !important;
+    }
+
+    .glossary-kicker{
+      font-size: 9px !important;
+      letter-spacing: .11em !important;
+    }
+
+    .glossary-hero h1,
+    :global(body.glossary-home-follow-on) .glossary-hero h1{
+      font-size: clamp(1.55rem, 4.2vw, 1.9rem) !important;
+      line-height: 1.03 !important;
+      letter-spacing: -.025em !important;
+    }
+
+    .glossary-intro,
+    :global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
+      font-size: .72rem !important;
+      line-height: 1.18 !important;
+    }
+  }
+
+  /* Tablette large / iPad landscape : le follow reste lisible, jamais tronqué brutalement. */
+  @media (min-width: 861px) and (max-width: 1240px){
+    .glossary-hero h1{
+      font-size: clamp(2.35rem, 4.2vw, 3.05rem) !important;
+      line-height: 1.03 !important;
+    }
+
+    .glossary-hero-follow{
+      max-width: 100% !important;
+      white-space: normal !important;
+      overflow: visible !important;
+      text-overflow: clip !important;
+      font-size: clamp(1.55rem, 3.1vw, 2.05rem) !important;
+      line-height: 1.08 !important;
+    }
+  }
 </style>
--- a/src/components/GlossaryPortalAside.astro
+++ b/src/components/GlossaryPortalAside.astro
@@ -33,25 +33,37 @@ const {
  </div>

  {pageItems.length > 0 && (
-    <div class="glossary-portal-aside__block">
-      <h2 class="glossary-portal-aside__heading">Dans cette page</h2>
-      <ul class="glossary-portal-aside__list">
-        {pageItems.map((item) => (
-          <li><a href={item.href}>{item.label}</a></li>
-        ))}
-      </ul>
-    </div>
+    <details class="glossary-portal-aside__block glossary-portal-aside__disclosure">
+      <summary class="glossary-portal-aside__summary">
+        <span class="glossary-portal-aside__heading">Dans cette page</span>
+        <span class="glossary-portal-aside__chevron" aria-hidden="true">▾</span>
+      </summary>
+
+      <div class="glossary-portal-aside__panel">
+        <ul class="glossary-portal-aside__list">
+          {pageItems.map((item) => (
+            <li><a href={item.href}>{item.label}</a></li>
+          ))}
+        </ul>
+      </div>
+    </details>
  )}

  {usefulLinks.length > 0 && (
-    <div class="glossary-portal-aside__block">
-      <h2 class="glossary-portal-aside__heading">Renvois utiles</h2>
-      <ul class="glossary-portal-aside__list">
-        {usefulLinks.map((item) => (
-          <li><a href={item.href}>{item.label}</a></li>
-        ))}
-      </ul>
-    </div>
+    <details class="glossary-portal-aside__block glossary-portal-aside__disclosure">
+      <summary class="glossary-portal-aside__summary">
+        <span class="glossary-portal-aside__heading">Renvois utiles</span>
+        <span class="glossary-portal-aside__chevron" aria-hidden="true">▾</span>
+      </summary>
+
+      <div class="glossary-portal-aside__panel">
+        <ul class="glossary-portal-aside__list">
+          {usefulLinks.map((item) => (
+            <li><a href={item.href}>{item.label}</a></li>
+          ))}
+        </ul>
+      </div>
+    </details>
  )}
 </nav>

@@ -216,4 +228,59 @@ const {
      background: rgba(255,255,255,0.04);
    }
  }
+
+  .glossary-portal-aside__disclosure{
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .glossary-portal-aside__summary{
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .glossary-portal-aside__summary::-webkit-details-marker{
+    display: none;
+  }
+
+  .glossary-portal-aside__summary .glossary-portal-aside__heading{
+    margin: 0;
+  }
+
+  .glossary-portal-aside__disclosure:not([open]) .glossary-portal-aside__panel{
+    display: none;
+  }
+
+  .glossary-portal-aside__chevron{
+    flex: 0 0 auto;
+    font-size: 14px;
+    line-height: 1;
+    opacity: .72;
+    transition: transform 160ms ease, opacity 160ms ease;
+  }
+
+  .glossary-portal-aside__disclosure[open] .glossary-portal-aside__chevron{
+    transform: rotate(180deg);
+    opacity: .96;
+  }
+
+  .glossary-portal-aside__panel{
+    padding: 0 14px 14px;
+  }
+
+  @media (max-width: 980px){
+    .glossary-portal-aside__summary{
+      padding: 12px;
+    }
+
+    .glossary-portal-aside__panel{
+      padding: 0 12px 12px;
+    }
+  }
 </style>
--- a/src/components/GlossaryRelationCards.astro
+++ b/src/components/GlossaryRelationCards.astro
@@ -36,11 +36,18 @@ const relationsHeadingId = "relations-conceptuelles";

 <style>
  .glossary-relations{
-    margin-top: 22px;
+    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(127,127,127,0.18);
  }

+  @media (max-width: 760px){
+    .glossary-relations{
+      margin-top: 12px;
+      padding-top: 12px;
+    }
+  }
+
  .glossary-relations h2{
    margin: 0 0 12px;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
--- a/src/components/GlossarySmartNav.astro
+++ b/src/components/GlossarySmartNav.astro
@@ -0,0 +1,225 @@
+---
+import type { GlossarySmartNavigation } from "../lib/glossary";
+import { hrefOfGlossaryEntry } from "../lib/glossary";
+
+interface Props {
+  smartNavigation?: GlossarySmartNavigation;
+}
+
+const { smartNavigation } = Astro.props;
+
+const hasPrimary = Boolean(smartNavigation?.primaryNext);
+const paths = smartNavigation?.paths ?? [];
+const hasPaths = paths.length > 0;
+---
+
+{(hasPrimary || hasPaths) && (
+  <section class="glossary-smart-nav" aria-label="Navigation guidée du glossaire">
+    <div class="glossary-smart-nav__eyebrow">Continuer dans le système</div>
+
+    {smartNavigation?.primaryNext && (
+      <div class="glossary-smart-nav__primary">
+        <span class="glossary-smart-nav__label">Étape suivante</span>
+        <a href={hrefOfGlossaryEntry(smartNavigation.primaryNext)}>
+          {smartNavigation.primaryNext.data.term}
+        </a>
+
+        {smartNavigation.primaryReason && (
+          <p>{smartNavigation.primaryReason}</p>
+        )}
+      </div>
+    )}
+
+    {hasPaths && (
+      <div class="glossary-smart-nav__paths" aria-label="Parcours de lecture">
+        {paths.map((path) => {
+          const panelId = `smart-nav-${path.key}`;
+
+          return (
+            <div class="glossary-smart-nav__path">
+              <button
+                class="glossary-smart-nav__path-button"
+                type="button"
+                aria-expanded="false"
+                aria-controls={panelId}
+              >
+                <span>{path.label}</span>
+                <span class="glossary-smart-nav__chevron" aria-hidden="true">▾</span>
+              </button>
+
+              <ul id={panelId} class="glossary-smart-nav__path-panel" hidden>
+                {path.entries.map((entry) => (
+                  <li>
+                    <a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          );
+        })}
+      </div>
+    )}
+  </section>
+)}
+
+<style>
+  .glossary-smart-nav{
+    margin: 14px 0 18px;
+    padding: 14px;
+    border: 1px solid rgba(127,127,127,0.20);
+    border-radius: 18px;
+    background: rgba(127,127,127,0.045);
+  }
+
+  .glossary-smart-nav__eyebrow{
+    margin-bottom: 8px;
+    font-size: 12px;
+    font-weight: 850;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    opacity: .72;
+  }
+
+  .glossary-smart-nav__primary{
+    display: grid;
+    gap: 5px;
+  }
+
+  .glossary-smart-nav__label{
+    font-size: 13px;
+    font-weight: 800;
+    opacity: .76;
+  }
+
+  .glossary-smart-nav__primary a{
+    width: fit-content;
+    font-size: clamp(1.05rem, 2vw, 1.22rem);
+    font-weight: 900;
+    line-height: 1.18;
+    text-decoration: none;
+  }
+
+  .glossary-smart-nav__primary p{
+    max-width: 72ch;
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.45;
+    opacity: .88;
+  }
+
+  .glossary-smart-nav__paths{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 8px;
+    margin-top: 12px;
+    }
+
+  .glossary-smart-nav__path{
+    align-self: flex-start;
+    min-width: min(180px, 100%);
+    border: 1px solid rgba(127,127,127,0.18);
+    border-radius: 14px;
+    background: rgba(127,127,127,0.035);
+    overflow: hidden;
+  }
+
+  .glossary-smart-nav__path-button{
+    width: 100%;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 9px 11px;
+    cursor: pointer;
+    font: inherit;
+    font-size: 13px;
+    font-weight: 850;
+    line-height: 1.25;
+    text-align: left;
+    user-select: none;
+  }
+
+  .glossary-smart-nav__chevron{
+    flex: 0 0 auto;
+    font-size: 13px;
+    line-height: 1;
+    opacity: .72;
+    transform: rotate(0deg);
+    transition: transform 160ms ease, opacity 160ms ease;
+  }
+
+  .glossary-smart-nav__path-button[aria-expanded="true"] .glossary-smart-nav__chevron{
+    transform: rotate(180deg);
+    opacity: .96;
+  }
+
+  .glossary-smart-nav__path-panel{
+    margin: 0;
+    padding: 0 11px 10px 24px;
+  }
+
+  .glossary-smart-nav__path-panel[hidden]{
+    display: none;
+  }
+
+  .glossary-smart-nav__path-panel li{
+    margin: 5px 0;
+    font-size: 13px;
+    line-height: 1.32;
+  }
+
+  .glossary-smart-nav__path-panel a{
+    text-decoration: none;
+  }
+
+  @media (max-width: 760px){
+    .glossary-smart-nav{
+      margin: 12px 0 16px;
+      padding: 12px;
+      border-radius: 16px;
+    }
+
+    .glossary-smart-nav__paths{
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 7px;
+    }
+
+    .glossary-smart-nav__path{
+      width: 100%;
+    }
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-smart-nav{
+      background: rgba(255,255,255,0.04);
+    }
+
+    .glossary-smart-nav__path{
+      background: rgba(255,255,255,0.035);
+    }
+  }
+</style>
+
+<script is:inline>
+  (() => {
+    document
+      .querySelectorAll(".glossary-smart-nav__path-button")
+      .forEach((button) => {
+        button.addEventListener("click", () => {
+          const panelId = button.getAttribute("aria-controls");
+          const panel = panelId ? document.getElementById(panelId) : null;
+          if (!panel) return;
+
+          const expanded = button.getAttribute("aria-expanded") === "true";
+
+          button.setAttribute("aria-expanded", expanded ? "false" : "true");
+          panel.hidden = expanded;
+        });
+      });
+  })();
+</script>
--- a/src/components/SiteNav.astro
+++ b/src/components/SiteNav.astro
@@ -1,15 +1,24 @@
+---
+const path = Astro.url.pathname;
+
+const isActive = (href: string) => {
+  if (href === "/") return path === "/";
+  return path === href || path.startsWith(href);
+};
+---
+
 <nav class="site-nav" aria-label="Navigation principale">
-  <a href="/">Accueil</a>
+  <a href="/" aria-current={isActive("/") ? "page" : undefined}>Accueil</a>
  <span aria-hidden="true"> · </span>

-  <a href="/archicrat-ia/">Essai-thèse — ArchiCraT-IA</a>
+  <a href="/archicrat-ia/" aria-current={isActive("/archicrat-ia/") ? "page" : undefined}>Essai-thèse — ArchiCraT-IA</a>
  <span aria-hidden="true"> · </span>

-  <a href="/cas-ia/">Cas pratique — Gouvernance IA</a>
+  <a href="/cas-ia/" aria-current={isActive("/cas-ia/") ? "page" : undefined}>Cas pratique — Gouvernance IA</a>
  <span aria-hidden="true"> · </span>

-  <a href="/glossaire/">Glossaire</a>
+  <a href="/glossaire/" aria-current={isActive("/glossaire/") ? "page" : undefined}>Glossaire</a>
  <span aria-hidden="true"> · </span>

-  <a href="/recherche/">Recherche</a>
+  <a href="/recherche/" aria-current={isActive("/recherche/") ? "page" : undefined}>Recherche</a>
 </nav>