Accueil: etoiles flottantes + animations forcees

- Retire le kill-switch prefers-reduced-motion (* { animation:none }) qui
  coupait toutes les animations : etoiles, flottement du logo, apparitions
  au defilement ne bougeaient pas. Animations desormais toujours actives.
- Nouveau StarField : champ d'etoiles qui scintillent ET derivent
  (keyframe plr-drift via propriete translate, cumulee au scintillement),
  place dans le hero. Contenu du hero passe au-dessus (z-index).
- Carrousel : fondu force (n'est plus desactive sous reduced-motion).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/globals.css

@@ -88,9 +88,18 @@ button {
     transform: translateY(-14px) rotate(0.6deg);
   }
 }
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation: none !important;
+/* Dérive lente des étoiles. Utilise la propriété `translate` (indépendante de
+   `transform`) pour se cumuler avec le scintillement `plr-twinkle`. */
+@keyframes plr-drift {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+  33% {
+    translate: 12px -18px;
+  }
+  66% {
+    translate: -10px 10px;
   }
 }
 
@@ -98,6 +107,20 @@ button {
   clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
 }
 
+/* ---- Champ d'étoiles flottantes ---- */
+.starfield {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+}
+.starfield .star {
+  position: absolute;
+  animation: plr-twinkle var(--tw, 3.2s) ease-in-out infinite,
+    plr-drift var(--dr, 9s) ease-in-out infinite;
+}
+
 /* ---- Scroll-reveal entrance animations ---- */
 @keyframes plr-fade-up {
   from {
@@ -134,16 +157,6 @@ button {
 .reveal-stagger.is-visible > *:nth-child(8) { animation-delay: 0.46s; }
 .reveal-stagger.is-visible > *:nth-child(n + 9) { animation-delay: 0.52s; }
 
-@media (prefers-reduced-motion: reduce) {
-  .reveal,
-  .reveal-stagger > * {
-    opacity: 1 !important;
-  }
-  .reveal.is-visible,
-  .reveal-stagger.is-visible > * {
-    animation: none !important;
-  }
-}
 .twinkle {
   animation: plr-twinkle 3.2s ease-in-out infinite;
 }

src/app/page.tsx

@@ -5,6 +5,7 @@ import { SiteHeader } from "@/components/SiteHeader";
 import { SiteFooter } from "@/components/SiteFooter";
 import { MembershipModalButton } from "@/components/MembershipModalButton";
 import { MembersCarousel } from "@/components/MembersCarousel";
+import { StarField } from "@/components/StarField";
 import { getLivePromotions, getRotatingActiveMembers } from "@/lib/queries";
 
 export const dynamic = "force-dynamic";
@@ -40,12 +41,9 @@ export default async function AccueilPage() {
           className="grid hero-grid"
           style={{ position: "relative", padding: "30px 0 50px", overflow: "hidden", alignItems: "center" }}
         >
-          <Sparkle color="#E0A63C" size={22} style={{ top: 30, left: 20 }} duration={3.2} />
-          <Sparkle color="#6FB0C6" size={15} style={{ bottom: 64, left: 120 }} duration={2.6} delay={0.4} />
-          <Sparkle color="#9a6638" size={18} style={{ top: 40, right: 90 }} duration={3.8} delay={0.9} />
-          <Sparkle color="#2C6FB3" size={24} style={{ bottom: 80, right: 180 }} duration={3} delay={1.3} />
+          <StarField />
 
-          <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+          <div style={{ position: "relative", zIndex: 1, display: "flex", justifyContent: "center", alignItems: "center" }}>
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               src="/assets/logo.png"
@@ -61,7 +59,7 @@ export default async function AccueilPage() {
             />
           </div>
 
-          <Reveal className="reveal">
+          <Reveal className="reveal" style={{ position: "relative", zIndex: 1 }}>
             <div
               style={{
                 display: "inline-flex",