✨ Design: Anneau comète doré sur le CTA principal (inspiré d'unabyss.com)

Après inspection réelle du code d'unabyss.com (HTML/CSS servis, pas juste
une description générée) : anneau tournant en conic-gradient CSS pur,
masqué en anneau via mask-composite:exclude — aucun JS/WebGL. Reproduit à
l'identique dans la palette or/corail du site, appliqué au CTA principal
du hero ("Découvrir les prédictions") pour renforcer l'action unique mise
en avant (Von Restorff). Fige automatiquement sous prefers-reduced-motion
via le kill-switch déjà présent dans tokens.css.

Correction au passage : la première analyse d'unabyss (WebFetch, texte
seul) avait spéculé sur des animations "probables" sans les avoir
observées — un fetch réel du HTML/CSS a permis d'identifier précisément
les techniques utilisées (comet-ring, scroll-reveal, marquee CSS,
glassmorphism) plutôt que d'improviser.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/index.njk

@@ -33,7 +33,7 @@ eleventyComputed:
       <strong>{{ nextRising.date | formatDate(locale) }} · {{ nextRising.time }}</strong>
     </p>
     <div class="cluster hero-cta">
-      <a class="btn btn-primary" href="{{ '/observer/' | localeHref(locale) }}">{{ "hero_cta_predictions" | t(locale) }}</a>
+      <a class="btn btn-primary comet-ring" href="{{ '/observer/' | localeHref(locale) }}">{{ "hero_cta_predictions" | t(locale) }}</a>
       <a class="btn btn-outline" href="{{ '/sirius-science/' | localeHref(locale) }}">{{ "hero_cta_learn" | t(locale) }}</a>
     </div>
   </div>

src/styles/app.css

@@ -17,3 +17,4 @@
 @import "./components/associations.css" layer(components);
 @import "./components/islands.css" layer(components);
 @import "./components/wave-badges.css" layer(components);
+@import "./components/comet-ring.css" layer(components);

src/styles/components/comet-ring.css

@@ -0,0 +1,40 @@
+/* Anneau comète — bordure en conic-gradient tournante, technique d'unabyss.com
+   (masque XOR pour ne garder que l'anneau). Respecte prefers-reduced-motion
+   via le kill-switch global de tokens.css (figé, anneau statique). */
+@property --comet-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.comet-ring {
+  position: relative;
+  isolation: isolate;
+}
+
+.comet-ring::before {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: inherit;
+  padding: 2px;
+  background: conic-gradient(
+    from var(--comet-angle),
+    transparent 0deg,
+    transparent 250deg,
+    var(--gold-surface) 300deg,
+    var(--coral-surface) 330deg,
+    var(--gold-surface) 350deg,
+    transparent 360deg
+  );
+  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation: comet-spin 7s linear infinite;
+  pointer-events: none;
+  z-index: -1;
+}
+
+@keyframes comet-spin {
+  to { --comet-angle: 360deg; }
+}