Polish glossary home sticky hero on mobile and tablet

Reviewed-on: #357

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/layouts/EditionLayout.astro

@@ -931,7 +931,7 @@ 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"])) .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,

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,