fix: stabilise reading follow on long editions

src/components/GlossarySmartNav.astro

@@ -10,12 +10,14 @@ const { smartNavigation } = Astro.props;
 
 const hasPrimary = Boolean(smartNavigation?.primaryNext);
 const paths = smartNavigation?.paths ?? [];
+const flows = smartNavigation?.flows ?? [];
 const hasPaths = paths.length > 0;
+const hasFlows = flows.length > 0;
 ---
 
-{(hasPrimary || hasPaths) && (
+{(hasPrimary || hasPaths || hasFlows) && (
   <section class="glossary-smart-nav" aria-label="Navigation guidée du glossaire">
-    <div class="glossary-smart-nav__eyebrow">Continuer dans le système</div>
+    <div class="glossary-smart-nav__eyebrow">Explorer les prolongements</div>
 
     {smartNavigation?.primaryNext && (
       <div class="glossary-smart-nav__primary">
@@ -30,6 +32,24 @@ const hasPaths = paths.length > 0;
       </div>
     )}
 
+    {hasFlows && (
+    <div class="glossary-smart-nav__flows" aria-label="Parcours contextuels">
+        <span class="glossary-smart-nav__label">Parcours contextuels</span>
+
+        <div class="glossary-smart-nav__flow-list">
+        {flows.map((flow) => (
+            flow.primaryNext && (
+            <a class="glossary-smart-nav__flow" href={hrefOfGlossaryEntry(flow.primaryNext)}>
+                <span class="glossary-smart-nav__flow-label">{flow.label}</span>
+                <strong>{flow.primaryNext.data.term}</strong>
+                {flow.primaryReason && <span>{flow.primaryReason}</span>}
+            </a>
+            )
+        ))}
+        </div>
+    </div>
+    )}
+
     {hasPaths && (
       <div class="glossary-smart-nav__paths" aria-label="Parcours de lecture">
         {paths.map((path) => {
@@ -83,6 +103,7 @@ const hasPaths = paths.length > 0;
   .glossary-smart-nav__primary{
     display: grid;
     gap: 5px;
+    margin-bottom: 10px;
   }
 
   .glossary-smart-nav__label{
@@ -126,14 +147,14 @@ const hasPaths = paths.length > 0;
 
   .glossary-smart-nav__path-button{
     width: 100%;
-    border: 0;
-    background: transparent;
+    border: 1px solid rgba(127,127,127,0.18);
+    background: rgba(127,127,127,0.06);
     color: inherit;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
-    padding: 9px 11px;
+    padding: 8px 12px;
     cursor: pointer;
     font: inherit;
     font-size: 13px;
@@ -141,6 +162,15 @@ const hasPaths = paths.length > 0;
     line-height: 1.25;
     text-align: left;
     user-select: none;
+    border-radius: 999px;
+  }
+
+  .glossary-smart-nav__path-button:hover{
+    background: rgba(127,127,127,0.10);
+  }
+
+  .glossary-smart-nav__path-button:active{
+    transform: scale(0.98);
   }
 
   .glossary-smart-nav__chevron{
@@ -176,6 +206,56 @@ const hasPaths = paths.length > 0;
     text-decoration: none;
   }
 
+  .glossary-smart-nav__flows{
+    display: grid;
+    gap: 8px;
+    margin-top: 12px;
+    margin-bottom: 6px;
+  }
+  
+  .glossary-smart-nav__flow-list{
+    display: grid;
+    gap: 8px;
+  }
+
+  .glossary-smart-nav__flow{
+    display: grid;
+    gap: 3px;
+    padding: 10px 11px;
+    border: 1px solid rgba(127,127,127,0.18);
+    border-radius: 14px;
+    background: rgba(127,127,127,0.035);
+    text-decoration: none;
+  }
+
+  .glossary-smart-nav__flow-label{
+    font-size: 12px;
+    font-weight: 850;
+    letter-spacing: .04em;
+    text-transform: uppercase;
+    opacity: .72;
+  }
+
+  .glossary-smart-nav__flow strong{
+    font-size: 14px;
+    line-height: 1.25;
+  }
+
+  .glossary-smart-nav__flow span:last-child{
+    font-size: 13px;
+    line-height: 1.35;
+    opacity: .84;
+  }
+
+  .glossary-smart-nav__eyebrow{
+    margin-bottom: 8px;
+    font-size: 12px;
+    font-weight: 850;
+    letter-spacing: .08em; /* légèrement augmenté */
+    text-transform: uppercase;
+    opacity: .78; /* un poil plus visible */
+  }
+
   @media (max-width: 760px){
     .glossary-smart-nav{
       margin: 12px 0 16px;
@@ -202,6 +282,10 @@ const hasPaths = paths.length > 0;
     .glossary-smart-nav__path{
       background: rgba(255,255,255,0.035);
     }
+
+    .glossary-smart-nav__flow{
+      background: rgba(255,255,255,0.035);
+    }
   }
 </style>