Polish glossary home responsive aside and map density

src/components/GlossaryHomeAside.astro

@@ -192,120 +192,47 @@ const {
     word-break: break-word;
   }
 
-  @media (max-width: 860px){
+  @media (max-width: 980px){
-    .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){
     .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;
+      font-size: 15px;
-      line-height: 1.14;
+      line-height: 1.15;
     }
 
     .glossary-home-aside__meta{
-      font-size: 11px;
+      display: none;
-      line-height: 1.26;
-      margin-top: 5px;
     }
 
     .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;
+      font-size: 14px;
-      line-height: 1.16;
+      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) {
+            if (enteringCompact) {
-              el.open = index === 0;
+              el.open = false;
-              el.dataset.mobileInit = "true";
             }
           } else {
             el.open = true;
           }
         });
+
+      wasCompact = compact;
     };
 
     if (document.readyState === "loading") {

src/components/GlossaryHomeHero.astro

@@ -458,85 +458,86 @@ const {
     }
   }
 
-  /* =========================================================
+    /* =========================================================
-   Glossaire home — follow hero sans troncature
+   Glossaire home — états du hero sticky
    ========================================================= */
 
   /*
-    Le follow du hero doit rester affiché, mais ne doit jamais
+    Principe :
-    être traité comme une ligne compacte à ellipsis.
+    - le follow peut respirer sans ellipsis brutal ;
-    On neutralise donc localement les règles de compression :
+    - l’intro reste strictement clampée en mode collapsed ;
-    nowrap, overflow hidden, text-overflow, line-clamp.
+    - l’intro ne redevient complète qu’en mode expanded ;
+    - mobile/tablette <= 860px reste neutralisé plus haut.
   */
 
-  .glossary-hero{
-    overflow: visible;
-  }
-
   .glossary-hero-follow{
     height: auto;
     max-height: none;
+    max-width: min(100%, 34ch);
     overflow: visible;
-    white-space: normal !important;
+    white-space: normal;
-    text-overflow: clip !important;
+    text-overflow: clip;
-  }
+    line-height: 1.08;
-
-  .glossary-hero-follow,
-  .glossary-hero-follow *{
-    min-width: 0;
-  }
-
-  .glossary-hero-follow h1,
-  .glossary-hero-follow p,
-  .glossary-hero-follow .glossary-hero__collapsible,
-  .glossary-hero-follow .glossary-hero__toggle{
-    white-space: normal !important;
-    overflow: visible !important;
-    text-overflow: clip !important;
-    display: block;
-    -webkit-line-clamp: unset !important;
-    line-clamp: unset !important;
-    -webkit-box-orient: unset !important;
   }
 
   :global(body.glossary-home-follow-on) .glossary-hero{
     min-height: auto;
     height: auto;
-    max-height: none;
-    overflow: visible;
   }
 
   :global(body.glossary-home-follow-on) .glossary-hero h1{
-    white-space: normal !important;
+    white-space: normal;
-    overflow: visible !important;
+    overflow: visible;
-    text-overflow: clip !important;
+    text-overflow: clip;
-    display: block;
-    -webkit-line-clamp: unset !important;
-    line-clamp: unset !important;
-    -webkit-box-orient: unset !important;
   }
 
-  :global(body.glossary-home-follow-on) .glossary-hero p#glossary-hero-intro{
+  /*
-    white-space: normal !important;
+    État collapsed :
-    overflow: visible !important;
+    l’intro DOIT rester compactée. Cette règle doit gagner contre
-    text-overflow: clip !important;
+    les anciennes règles anti-troncature du follow.
-    display: block;
+  */
-    -webkit-line-clamp: unset !important;
+  :global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero p#glossary-hero-intro{
-    line-clamp: unset !important;
+    display: -webkit-box;
-    -webkit-box-orient: unset !important;
+    -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;
   }
 
-  @media (max-width: 760px){
+  :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-height: none;
+      max-width: min(100%, 36ch);
-      overflow: visible;
+      font-size: clamp(1.55rem, 3.1vw, 2.05rem);
-    }
+      line-height: 1.08;
-
-    :global(body.glossary-home-follow-on) .glossary-hero h1,
-    :global(body.glossary-home-follow-on) .glossary-hero p#glossary-hero-intro{
-      -webkit-line-clamp: unset !important;
-      line-clamp: unset !important;
-      overflow: visible !important;
     }
   }
 </style>

src/pages/glossaire/index.astro

@@ -569,7 +569,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 +577,9 @@ const approfondirPortalItems = [
 
     .glossary-map-block__head p{
       max-width: 76ch;
-      margin: 12px 0 0;
+      margin: 9px 0 0;
-      font-size: 1rem;
+      font-size: .98rem;
-      line-height: 1.55;
+      line-height: 1.46;
       opacity: .94;
       text-wrap: pretty;
     }
@@ -587,28 +587,56 @@ const approfondirPortalItems = [
     .glossary-map{
       display: grid;
       justify-items: center;
-      gap: 10px;
+      gap: 6px;
-      margin-top: 18px;
+      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;
+      font-size: .98rem;
-      line-height: 1.25;
+      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 +644,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 +656,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 +720,17 @@ const approfondirPortalItems = [
 
       .glossary-map-block__head h2,
       .glossary-section h2{
-        font-size: clamp(1.5rem, 7vw, 1.95rem);
+        font-size: clamp(1.42rem, 6.3vw, 1.82rem);
-        line-height: 1.04;
+        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 +748,36 @@ const approfondirPortalItems = [
       }
 
       .glossary-map{
-        gap: 7px;
+        gap: 4px;
-        margin-top: 12px;
+        margin-top: 10px;
       }
 
       .glossary-map__stage{
-        gap: 7px;
+        gap: 4px;
         width: 100%;
       }
 
       .glossary-map__title{
-        font-size: .9rem;
+        font-size: .82rem;
-        line-height: 1.2;
+        line-height: 1.12;
       }
 
       .glossary-map__roots{
         grid-template-columns: 1fr;
-        gap: 6px;
+        gap: 5px;
       }
 
       .glossary-map__node{
-        min-height: 38px;
+        min-height: 32px;
-        padding: 8px 10px;
+        padding: 6px 10px;
-        font-size: .84rem;
+        font-size: .78rem;
-        line-height: 1.15;
+        line-height: 1.12;
       }
 
       .glossary-map__arrow{
-        font-size: 1rem;
+        font-size: .92rem;
-        opacity: .62;
+        line-height: .8;
+        opacity: .6;
       }
     }
 
@@ -804,23 +811,28 @@ const approfondirPortalItems = [
       }
 
       .glossary-map{
-        gap: 5px;
+        gap: 3px;
-        margin-top: 10px;
+        margin-top: 8px;
       }
 
       .glossary-map__stage{
-        gap: 5px;
+        gap: 3px;
       }
 
       .glossary-map__title{
-        font-size: .8rem;
+        font-size: .74rem;
-        line-height: 1.12;
+        line-height: 1.08;
       }
 
       .glossary-map__node{
-        min-height: 32px;
+        min-height: 28px;
-        padding: 6px 8px;
+        padding: 5px 8px;
-        font-size: .74rem;
+        font-size: .7rem;
+      }
+
+      .glossary-map__arrow{
+        font-size: .82rem;
+        line-height: .75;
       }
 
       .glossary-home .glossary-card,