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

src/components/GlossaryPortalCta.astro

@@ -0,0 +1,87 @@
+---
+export interface Props {
+  href: string;
+  label: string;
+  icon?: string;
+  className?: string;
+}
+
+const {
+  href,
+  label,
+  icon = "↗",
+  className,
+} = Astro.props;
+---
+
+<a class:list={["glossary-portal-cta", className]} href={href}>
+  <span>{label}</span>
+  <span aria-hidden="true">{icon}</span>
+</a>
+
+<style>
+  .glossary-portal-cta{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 40px;
+    padding: 0 14px;
+    border: 1px solid rgba(0,217,255,0.24);
+    border-radius: 999px;
+    background:
+      linear-gradient(180deg, rgba(0,217,255,0.10), rgba(0,217,255,0.04)),
+      rgba(127,127,127,0.06);
+    box-shadow:
+      inset 0 1px 0 rgba(255,255,255,0.05),
+      0 0 0 1px rgba(0,217,255,0.04);
+    text-decoration: none;
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: .01em;
+    white-space: nowrap;
+    transition:
+      transform 120ms ease,
+      background 120ms ease,
+      border-color 120ms ease,
+      box-shadow 120ms ease;
+  }
+
+  .glossary-portal-cta:hover{
+    transform: translateY(-1px);
+    border-color: rgba(0,217,255,0.34);
+    background:
+      linear-gradient(180deg, rgba(0,217,255,0.14), rgba(0,217,255,0.06)),
+      rgba(127,127,127,0.08);
+    box-shadow:
+      inset 0 1px 0 rgba(255,255,255,0.06),
+      0 0 0 1px rgba(0,217,255,0.08),
+      0 10px 28px rgba(0,0,0,0.18);
+    text-decoration: none;
+  }
+
+  .glossary-portal-cta:focus-visible{
+    outline: 2px solid rgba(0,217,255,0.28);
+    outline-offset: 4px;
+  }
+
+  @media (max-width: 720px){
+    .glossary-portal-cta{
+      width: 100%;
+    }
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-portal-cta{
+      background:
+        linear-gradient(180deg, rgba(0,217,255,0.12), rgba(0,217,255,0.05)),
+        rgba(255,255,255,0.04);
+    }
+
+    .glossary-portal-cta:hover{
+      background:
+        linear-gradient(180deg, rgba(0,217,255,0.16), rgba(0,217,255,0.07)),
+        rgba(255,255,255,0.06);
+    }
+  }
+</style>