feat(glossaire): harmonize portal pages and sticky reading ux

src/pages/glossaire/dynamiques-archicratiques.astro

@@ -4,6 +4,7 @@ import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
 import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
 import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
 import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
+import GlossaryPortalPanel from "../../components/GlossaryPortalPanel.astro";
 import { getCollection } from "astro:content";
 import {
   buildGlossaryBySlug,
@@ -246,20 +247,14 @@ const prolongerLinks = [
         intro="Ces diagnostics entrent en résonance avec d’autres notions et paradigmes qui permettent de préciser les mécanismes de fermeture, de capture, d’opacification ou de désajustement de la régulation."
       >
         {otherEntries.length > 0 && (
-          <div class="dyna-block dyna-block--panel">
-            <div class="dyna-block__head">
-              <h3 id="notions-et-diagnostics-lies">Notions et diagnostics liés</h3>
-              <span class="dyna-block__count">
-                {otherCount} entrée{otherCount > 1 ? "s" : ""}
-              </span>
-            </div>
-
-            <p class="dyna-block__intro">
-              Ces entrées prolongent l’analyse des dérives archicratiques vers
-              des questions d’empêchement, d’invisibilisation, de fermeture ou
-              de capture de la scène régulatrice.
-            </p>
-
+          <GlossaryPortalPanel
+            id="notions-et-diagnostics-lies"
+            title="Notions et diagnostics liés"
+            count={`${otherCount} entrée${otherCount > 1 ? "s" : ""}`}
+            intro="Ces entrées prolongent l’analyse des dérives archicratiques vers des questions d’empêchement, d’invisibilisation, de fermeture ou de capture de la scène régulatrice."
+            surface={true}
+            className="dyna-block"
+          >
             <div class="dyna-cards">
               {otherEntries.map((entry) => (
                 <a class="dyna-card" href={hrefOf(entry)}>
@@ -274,24 +269,18 @@ const prolongerLinks = [
                 </a>
               ))}
             </div>
-          </div>
+          </GlossaryPortalPanel>
         )}
 
         {paradigmEntries.length > 0 && (
-          <div class="dyna-block dyna-block--panel">
-            <div class="dyna-block__head">
-              <h3 id="paradigmes-mobilises">Paradigmes mobilisés</h3>
-              <span class="dyna-block__count">
-                {paradigmCount} paradigme{paradigmCount > 1 ? "s" : ""}
-              </span>
-            </div>
-
-            <p class="dyna-block__intro">
-              Ces paradigmes servent de ressources comparatives pour penser les
-              processus de rigidification, d’autonomisation et d’opacification
-              des régimes de régulation.
-            </p>
-
+          <GlossaryPortalPanel
+            id="paradigmes-mobilises"
+            title="Paradigmes mobilisés"
+            count={`${paradigmCount} paradigme${paradigmCount > 1 ? "s" : ""}`}
+            intro="Ces paradigmes servent de ressources comparatives pour penser les processus de rigidification, d’autonomisation et d’opacification des régimes de régulation."
+            surface={true}
+            className="dyna-block"
+          >
             <div class="dyna-cards">
               {paradigmEntries.map((entry) => (
                 <a class="dyna-card" href={hrefOf(entry)}>
@@ -306,7 +295,7 @@ const prolongerLinks = [
                 </a>
               ))}
             </div>
-          </div>
+          </GlossaryPortalPanel>
         )}
       </GlossaryPortalSection>
     )}
@@ -419,52 +408,6 @@ const prolongerLinks = [
     margin-top: 22px;
   }
 
-  .dyna-block--panel{
-    padding: 18px 18px 16px;
-    border: 1px solid rgba(127,127,127,0.18);
-    border-radius: 18px;
-    background:
-      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
-      rgba(127,127,127,0.035);
-  }
-
-  .dyna-block__head{
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin-bottom: 8px;
-  }
-
-  .dyna-block h3{
-    margin: 0;
-    font-size: 15px;
-    line-height: 1.3;
-    scroll-margin-top: calc(var(--sticky-offset-px, 96px) + 36px);
-  }
-
-  .dyna-block__count{
-    display: inline-flex;
-    align-items: center;
-    min-height: 24px;
-    padding: 0 10px;
-    border: 1px solid rgba(127,127,127,0.22);
-    border-radius: 999px;
-    font-size: 12px;
-    line-height: 1.2;
-    opacity: .78;
-    white-space: nowrap;
-  }
-
-  .dyna-block__intro{
-    max-width: 78ch;
-    margin: 0 0 12px;
-    font-size: 14px;
-    line-height: 1.5;
-    opacity: .9;
-  }
-
   .dyna-cards{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));