Polish glossary home responsive aside and map density

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
-    être traité comme une ligne compacte à ellipsis.
-    On neutralise donc localement les règles de compression :
-    nowrap, overflow hidden, text-overflow, line-clamp.
+    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{
-    overflow: visible;
-  }
-
   .glossary-hero-follow{
     height: auto;
     max-height: none;
+    max-width: min(100%, 34ch);
     overflow: visible;
-    white-space: normal !important;
-    text-overflow: clip !important;
-  }
-
-  .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;
+    white-space: normal;
+    text-overflow: clip;
+    line-height: 1.08;
   }
 
   :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;
-    overflow: visible !important;
-    text-overflow: clip !important;
-    display: block;
-    -webkit-line-clamp: unset !important;
-    line-clamp: unset !important;
-    -webkit-box-orient: unset !important;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
   }
 
-  :global(body.glossary-home-follow-on) .glossary-hero p#glossary-hero-intro{
-    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;
+  /*
+    É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;
   }
 
-  @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;
-      overflow: visible;
-    }
-
-    :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;
+      max-width: min(100%, 36ch);
+      font-size: clamp(1.55rem, 3.1vw, 2.05rem);
+      line-height: 1.08;
     }
   }
 </style>