✨ Feature: Système solaire animé dans Hero + Nettoyage patterns

- Remplacement du pattern .pattern-adinkra par système solaire complet
- Système solaire positionné à gauche (10%) pour éviter conflit avec texte
- 6 orbites : 5 planètes + Sirius avec couleurs et tailles réalistes
- Animations CSS fluides : rotation orbites, pulsation soleil, scintillement Sirius
- Suppression patterns géométriques mobiles (kente, bogolan) et animations JS
- Conservation étoiles, étoiles filantes et arrière-plan cosmique
- Interface épurée focalisée sur éléments astronomiques

🤖 Generated with [Claude Code](https://claude.ai/code)

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

src/components/Hero.svelte

@@ -52,30 +52,7 @@
     }, '-=400');
     
     // Animation des patterns africains
-    anime({
+    // Animation du système solaire gérée par CSS
-      targets: '.pattern-kente',
-      translateX: [0, 200],
-      duration: 30000,
-      easing: 'linear',
-      loop: true
-    });
-    
-    anime({
-      targets: '.pattern-adinkra',
-      rotate: 360,
-      duration: 40000,
-      easing: 'linear',
-      loop: true
-    });
-    
-    anime({
-      targets: '.pattern-bogolan',
-      scale: [1, 1.2, 1],
-      opacity: [0.05, 0.15, 0.05],
-      duration: 20000,
-      easing: 'easeInOutSine',
-      loop: true
-    });
     
     // Attendre que le DOM soit prêt
     setTimeout(() => {
@@ -219,10 +196,28 @@
   <canvas bind:this={starsCanvas} class="stars-canvas"></canvas>
   
   <div class="hero-pattern">
-    <!-- Patterns africains visibles -->
+    <!-- Système solaire à gauche -->
-    <div class="pattern-overlay pattern-kente"></div>
+    <div class="solar-system">
-    <div class="pattern-overlay pattern-adinkra"></div>
+      <div class="sun"></div>
-    <div class="pattern-overlay pattern-bogolan"></div>
+      <div class="orbit orbit-1">
+        <div class="planet planet-1"></div>
+      </div>
+      <div class="orbit orbit-2">
+        <div class="planet planet-2"></div>
+      </div>
+      <div class="orbit orbit-3">
+        <div class="planet planet-3"></div>
+      </div>
+      <div class="orbit orbit-4">
+        <div class="planet planet-4"></div>
+      </div>
+      <div class="orbit orbit-5">
+        <div class="planet planet-5"></div>
+      </div>
+      <div class="orbit orbit-sirius">
+        <div class="planet sirius"></div>
+      </div>
+    </div>
   </div>
   
   <div class="hero-content">
@@ -303,47 +298,155 @@
     mix-blend-mode: overlay;
   }
   
-  .pattern-kente {
+  
-    background-image: 
+  .solar-system {
-      repeating-linear-gradient(
+    position: absolute;
-        45deg,
+    left: 10%;
-        var(--color-primary) 0px,
+    top: 50%;
-        var(--color-primary) 10px,
+    transform: translateY(-50%);
-        transparent 10px,
+    width: 400px;
-        transparent 20px,
+    height: 400px;
-        var(--color-secondary) 20px,
+    display: flex;
-        var(--color-secondary) 30px,
+    align-items: center;
-        transparent 30px,
+    justify-content: center;
-        transparent 40px
+    overflow: hidden;
-      ),
+    opacity: 0.8 !important;
-      repeating-linear-gradient(
+    mix-blend-mode: normal !important;
-        -45deg,
-        var(--color-accent) 0px,
-        var(--color-accent) 10px,
-        transparent 10px,
-        transparent 20px
-      );
   }
 
-  .pattern-adinkra {
+  .sun {
-    background-image: 
+    position: absolute;
-      radial-gradient(circle at 20% 20%, var(--color-primary) 2px, transparent 2px),
+    width: 20px;
-      radial-gradient(circle at 80% 80%, var(--color-secondary) 2px, transparent 2px),
+    height: 20px;
-      radial-gradient(circle at 50% 50%, var(--color-accent) 3px, transparent 3px);
+    background: radial-gradient(circle, #FFD700, #FFA500);
-    background-size: 50px 50px;
+    border-radius: 50%;
+    box-shadow: 0 0 20px #FFD700, 0 0 40px #FFA500;
+    z-index: 10;
+    animation: pulse 4s ease-in-out infinite;
   }
 
-  .pattern-bogolan {
+  .orbit {
-    background-image: 
+    position: absolute;
-      repeating-conic-gradient(
+    border: 1px solid rgba(255, 215, 0, 0.1);
-        from 0deg at 50% 50%,
+    border-radius: 50%;
-        var(--color-primary) 0deg 10deg,
+    animation: rotate linear infinite;
-        transparent 10deg 20deg
-      );
-    background-size: 100px 100px;
-    opacity: 0.05;
   }
 
+  .orbit-1 {
+    width: 80px;
+    height: 80px;
+    animation-duration: 8s;
+  }
+
+  .orbit-2 {
+    width: 120px;
+    height: 120px;
+    animation-duration: 12s;
+  }
+
+  .orbit-3 {
+    width: 160px;
+    height: 160px;
+    animation-duration: 16s;
+  }
+
+  .orbit-4 {
+    width: 200px;
+    height: 200px;
+    animation-duration: 20s;
+  }
+
+  .orbit-5 {
+    width: 240px;
+    height: 240px;
+    animation-duration: 24s;
+  }
+
+  .orbit-sirius {
+    width: 300px;
+    height: 300px;
+    animation-duration: 30s;
+    border-color: rgba(135, 206, 250, 0.3);
+  }
+
+  .planet {
+    position: absolute;
+    border-radius: 50%;
+    top: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .planet-1 {
+    width: 4px;
+    height: 4px;
+    background: #8C7853;
+  }
+
+  .planet-2 {
+    width: 6px;
+    height: 6px;
+    background: #FFC649;
+  }
+
+  .planet-3 {
+    width: 6px;
+    height: 6px;
+    background: #6B93D6;
+  }
+
+  .planet-4 {
+    width: 5px;
+    height: 5px;
+    background: #C1440E;
+  }
+
+  .planet-5 {
+    width: 8px;
+    height: 8px;
+    background: #D8CA9D;
+  }
+
+  .sirius {
+    width: 8px;
+    height: 8px;
+    background: radial-gradient(circle, #87CEEB, #4169E1);
+    box-shadow: 0 0 10px #87CEEB, 0 0 20px #4169E1;
+    animation: twinkle 2s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.1);
+      opacity: 0.8;
+    }
+  }
+
+  @keyframes twinkle {
+    0%, 100% {
+      opacity: 1;
+      transform: translateX(-50%) scale(1);
+    }
+    50% {
+      opacity: 0.7;
+      transform: translateX(-50%) scale(1.2);
+    }
+  }
+  
+  
   .hero-content {
     position: relative;
     z-index: 10;