✨ Version 1.5.0 - AnimeJS intégration complète

- Loader animé avec progression
- Hero: étoiles filantes, patterns animés, entrée progressive
- Navigation: transitions fluides, menu mobile amélioré
- Prédictions: animations de calcul et résultats
- Globe: vague planétaire animée, particules, progression temporelle
- Observatory: timeline automatique, animations d'équipement
- Performance: GPU acceleration, lazy loading
- Mobile-first: toutes animations optimisées

CHANGELOG.md

@@ -0,0 +1,39 @@
+# Changelog
+
+## [1.5.0] - 2024-01-07
+
+### 🚀 Nouvelles fonctionnalités
+- **Intégration d'AnimeJS** pour des animations fluides et performantes
+- **Loader animé** au chargement de l'application avec barre de progression
+- **Animations avancées** :
+  - Hero : Entrée progressive des éléments, étoiles filantes, patterns africains animés
+  - Navigation : Transitions fluides, menu mobile amélioré
+  - Prédictions : Calculateur avec animations de sélection et résultats
+  - Globe : Vague planétaire animée avec particules et progression temporelle
+- **Effets visuels** :
+  - Effet parallaxe amélioré sur le ciel étoilé
+  - Hover animations sur les boutons avec effet élastique
+  - Shimmer effect sur la timeline
+  - Pulsation des marqueurs actifs sur le globe
+
+### 🎨 Améliorations design
+- **Mobile-first** : Toutes les animations optimisées pour mobile
+- **Performance** : Animations GPU-accelerated avec transform et opacity
+- **Interactivité** : Feedback visuel immédiat sur toutes les interactions
+- **Accessibilité** : Respect de prefers-reduced-motion
+
+### 🛠️ Technique
+- AnimeJS 3.2.1 intégré
+- Timeline orchestration pour les animations complexes
+- Optimisation des animations Canvas
+- Lazy loading des animations lourdes
+
+## [1.0.0] - 2024-01-07
+
+### Version initiale
+- Application Svelte avec design panafricain/caribéen
+- Calculateur de prédictions pour 7 sites en Guadeloupe
+- Globe interactif avec GeoJSON
+- Support multilingue (FR, EN, HT)
+- Sections : Science, Culture, Dogons, Observatoire
+- Déploiement GitHub Pages

src/App.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { initLanguage } from './lib/i18n.js';
+  import Loader from './components/Loader.svelte';
   import Hero from './components/Hero.svelte';
   import Navigation from './components/Navigation.svelte';
   import About from './components/About.svelte';
@@ -43,6 +44,7 @@
   });
 </script>
 
+<Loader />
 <Navigation {activeSection} />
 
 <main>

src/components/GlobeGeoJSON.svelte

@@ -1,18 +1,18 @@
 <script>
   import { onMount } from 'svelte';
+  import anime from 'animejs/lib/anime.es.js';
   
   let canvas;
   let visible = false;
+  let ctx;
+  let animationId;
   
   onMount(() => {
     const observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => {
-        if (entry.isIntersecting) {
+        if (entry.isIntersecting && !ctx) {
           visible = true;
-          if (!canvas.hasAttribute('data-initialized')) {
+          initGlobe();
-            initGlobe();
-            canvas.setAttribute('data-initialized', 'true');
-          }
         }
       });
     });
@@ -20,14 +20,17 @@
     const section = document.getElementById('geojson-section');
     if (section) observer.observe(section);
     
-    return () => observer.disconnect();
+    return () => {
+      observer.disconnect();
+      if (animationId) cancelAnimationFrame(animationId);
+    };
   });
   
   async function initGlobe() {
-    const ctx = canvas.getContext('2d');
+    ctx = canvas.getContext('2d');
+    
     const width = canvas.width = canvas.offsetWidth;
     const height = canvas.height = canvas.offsetHeight;
-    
     const centerX = width / 2;
     const centerY = height / 2;
     const radius = Math.min(width, height) * 0.35;
@@ -37,6 +40,23 @@
     let isDragging = false;
     let lastMouseX = 0;
     let waveAnimation = 0;
+    let waveProgress = 0;    
+    // Animation d'entrée
+    anime.timeline({
+      easing: 'easeOutQuad'
+    })
+    .add({
+      targets: canvas,
+      scale: [0.8, 1],
+      opacity: [0, 1],
+      duration: 1200
+    })
+    .add({
+      targets: '.globe-info',
+      translateX: [50, 0],
+      opacity: [0, 1],
+      duration: 1000
+    }, '-=600');
     
     // Charger les données GeoJSON des continents
     let worldData = null;
@@ -47,31 +67,61 @@
       console.error('Erreur chargement GeoJSON:', error);
     }
     
-    // Données des lieux
+    // Données des lieux avec animation de vague
     const locations = [
-      { name: 'La Réunion', lat: -21.1151, lon: 55.5364, date: '27 Juin', day: 178 },
+      { name: 'La Réunion', lat: -21.1151, lon: 55.5364, date: '27 Juin', color: '#FF6B35', day: 178 },
-      { name: 'Kinshasa', lat: -4.4419, lon: 15.2663, date: '16 Juillet', day: 197 },
+      { name: 'Kinshasa', lat: -4.4419, lon: 15.2663, date: '16 Juillet', color: '#FFA500', day: 197 },
-      { name: 'Guadeloupe', lat: 16.2650, lon: -61.5510, date: '22 Juillet', day: 203 },
+      { name: 'Guadeloupe', lat: 16.2650, lon: -61.5510, date: '22 Juillet', color: '#FFD700', day: 203 },
-      { name: 'Martinique', lat: 14.6415, lon: -61.0242, date: '23 Juillet', day: 204 },
+      { name: 'Martinique', lat: 14.6415, lon: -61.0242, date: '23 Juillet', color: '#FFD700', day: 204 },
-      { name: 'Dakar', lat: 14.7167, lon: -17.4677, date: '23 Juillet', day: 204 },
+      { name: 'Dakar', lat: 14.7167, lon: -17.4677, date: '23 Juillet', color: '#FFE44D', day: 204 },
-      { name: 'Abidjan', lat: 5.3600, lon: -4.0083, date: '28 Juillet', day: 209 },
+      { name: 'Le Caire', lat: 30.0444, lon: 31.2357, date: '3 Août', color: '#FFFACD', day: 215 }
-      { name: 'Le Caire', lat: 30.0444, lon: 31.2357, date: '3 Août', day: 215 },
-      { name: 'Paris', lat: 48.8566, lon: 2.3522, date: '12 Août', day: 224 }
     ];
     
-    // Gérer les interactions
+    // Animation de la progression de la vague
-    canvas.addEventListener('wheel', (e) => {
+    anime({
-      e.preventDefault();
+      targets: { progress: 0 },
-      zoom += e.deltaY * -0.001;
+      progress: 365,
-      zoom = Math.min(Math.max(0.5, zoom), 2);
+      duration: 30000,
+      easing: 'linear',
+      loop: true,
+      update: function(anim) {
+        waveProgress = anim.animations[0].currentValue;
+      }
     });
     
+    // Particules pour l'effet de vague
+    const particles = [];
+    for (let i = 0; i < 50; i++) {
+      particles.push({
+        angle: Math.random() * Math.PI * 2,
+        radius: radius + Math.random() * 50,
+        size: Math.random() * 3 + 1,
+        speed: Math.random() * 0.02 + 0.01,
+        opacity: 0
+      });
+    }
+    
+    // Animation des particules
+    particles.forEach((particle, i) => {
+      anime({
+        targets: particle,
+        opacity: [0, 0.8, 0],
+        radius: [radius, radius + 100],
+        duration: 3000,
+        delay: i * 60,
+        easing: 'easeOutQuad',
+        loop: true
+      });
+    });
+    
+    // Gestion de la souris
     canvas.addEventListener('mousedown', (e) => {
       isDragging = true;
       lastMouseX = e.clientX;
+      canvas.style.cursor = 'grabbing';
     });
     
-    window.addEventListener('mousemove', (e) => {
+    canvas.addEventListener('mousemove', (e) => {
       if (isDragging) {
         const deltaX = e.clientX - lastMouseX;
         rotation -= deltaX * 0.01;
@@ -81,199 +131,232 @@
     
     window.addEventListener('mouseup', () => {
       isDragging = false;
+      canvas.style.cursor = 'grab';
     });
     
-    // Fonction pour projeter les coordonnées
+    // Zoom avec la molette
+    canvas.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      const zoomDelta = e.deltaY > 0 ? 0.9 : 1.1;
+      const newZoom = zoom * zoomDelta;
+      
+      anime({
+        targets: { zoom },
+        zoom: Math.max(0.5, Math.min(3, newZoom)),
+        duration: 300,
+        easing: 'easeOutQuad',
+        update: function(anim) {
+          zoom = anim.animations[0].currentValue;
+        }
+      });
+    });
+    
+    // Projection 3D
     function project(lon, lat, r) {
       const phi = (90 - lat) * Math.PI / 180;
-      const theta = (-lon - rotation * 57.3) * Math.PI / 180;
+      const theta = (lon + rotation) * Math.PI / 180;
       
       const x = r * Math.sin(phi) * Math.cos(theta);
       const y = r * Math.cos(phi);
       const z = r * Math.sin(phi) * Math.sin(theta);
       
-      return { x: centerX + x, y: centerY - y, z: z };
+      return {
-    }
+        x: centerX + x * zoom,
-    
+        y: centerY - y * zoom,
-    // Dessiner un chemin GeoJSON
+        z: z,
-    function drawPath(coordinates, ctx, radius) {
+        visible: z > 0
-      ctx.beginPath();
+      };
-      let started = false;
-      
-      coordinates.forEach(([lon, lat], i) => {
-        const p = project(lon, lat, radius);
-        if (p.z > -radius * 0.3) {
-          if (!started) {
-            ctx.moveTo(p.x, p.y);
-            started = true;
-          } else {
-            ctx.lineTo(p.x, p.y);
-          }
-        }
-      });
-      
-      return started;
     }
     
+    // Dessiner le globe
     function draw() {
       ctx.clearRect(0, 0, width, height);
       
-      const currentRadius = radius * zoom;
+      // Fond avec dégradé
+      const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius * zoom);
+      gradient.addColorStop(0, 'rgba(10, 22, 40, 0.2)');
+      gradient.addColorStop(1, 'rgba(10, 22, 40, 0.8)');
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, width, height);
       
       // Ombre du globe
-      ctx.save();
       ctx.beginPath();
-      ctx.arc(centerX + 5, centerY + 5, currentRadius, 0, Math.PI * 2);
+      ctx.arc(centerX + 10, centerY + 10, radius * zoom, 0, Math.PI * 2);
       ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
-      ctx.filter = 'blur(10px)';
       ctx.fill();
-      ctx.restore();
       
-      // Océan
+      // Globe principal
       ctx.beginPath();
-      ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
+      ctx.arc(centerX, centerY, radius * zoom, 0, Math.PI * 2);
-      ctx.fillStyle = '#4A90E2';
+      const globeGradient = ctx.createRadialGradient(
-      ctx.fill();
+        centerX - radius * 0.3 * zoom, 
-      
+        centerY - radius * 0.3 * zoom, 
-      // Gradient pour l'effet 3D
-      const gradient = ctx.createRadialGradient(
-        centerX - currentRadius * 0.3,
-        centerY - currentRadius * 0.3,
         0,
-        centerX,
+        centerX, centerY, radius * zoom
-        centerY,
-        currentRadius
       );
-      gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
+      globeGradient.addColorStop(0, '#1a3a5a');
-      gradient.addColorStop(1, 'rgba(0, 0, 0, 0.2)');
+      globeGradient.addColorStop(0.5, '#0f2847');
-      
+      globeGradient.addColorStop(1, '#0a1628');
-      ctx.beginPath();
+      ctx.fillStyle = globeGradient;
-      ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
-      ctx.fillStyle = gradient;
       ctx.fill();
       
-      // Dessiner les continents depuis GeoJSON
+      // Grille de latitude/longitude avec animation
-      if (worldData && worldData.features) {
+      ctx.strokeStyle = 'rgba(255, 215, 0, 0.1)';
-        ctx.save();
+      ctx.lineWidth = 1;
-        ctx.fillStyle = '#228B22';
+      
-        ctx.strokeStyle = '#1F5F1F';
+      // Lignes de latitude
-        ctx.lineWidth = 0.5;
+      for (let lat = -80; lat <= 80; lat += 20) {
+        ctx.beginPath();
+        for (let lon = -180; lon <= 180; lon += 5) {
+          const p = project(lon, lat, radius);
+          if (p.visible) {
+            if (lon === -180) {
+              ctx.moveTo(p.x, p.y);
+            } else {
+              ctx.lineTo(p.x, p.y);
+            }
+          }
+        }
+        ctx.stroke();
+      }
+      
+      // Lignes de longitude
+      for (let lon = -180; lon <= 180; lon += 30) {
+        ctx.beginPath();
+        for (let lat = -90; lat <= 90; lat += 5) {
+          const p = project(lon, lat, radius);
+          if (p.visible) {
+            if (lat === -90) {
+              ctx.moveTo(p.x, p.y);
+            } else {
+              ctx.lineTo(p.x, p.y);
+            }
+          }
+        }
+        ctx.stroke();
+      }
+      
+      // Dessiner les continents
+      if (worldData) {
+        ctx.strokeStyle = '#4CAF50';
+        ctx.fillStyle = 'rgba(76, 175, 80, 0.3)';
+        ctx.lineWidth = 2;
         
         worldData.features.forEach(feature => {
           if (feature.geometry.type === 'Polygon') {
-            feature.geometry.coordinates.forEach(ring => {
+            drawPolygon(feature.geometry.coordinates[0]);
-              if (drawPath(ring, ctx, currentRadius)) {
-                ctx.fill();
-                ctx.stroke();
-              }
-            });
           } else if (feature.geometry.type === 'MultiPolygon') {
             feature.geometry.coordinates.forEach(polygon => {
-              polygon.forEach(ring => {
+              drawPolygon(polygon[0]);
-                if (drawPath(ring, ctx, currentRadius)) {
-                  ctx.fill();
-                  ctx.stroke();
-                }
-              });
             });
           }
         });
+      }
+      
+      // Dessiner les particules de la vague
+      particles.forEach(particle => {
+        const p = project(
+          particle.angle * 180 / Math.PI - 180,
+          Math.sin(Date.now() * 0.001 * particle.speed) * 30,
+          particle.radius
+        );
         
-        ctx.restore();
+        if (p.visible && particle.opacity > 0) {
-      }
-      
-      // Grille
-      ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
-      ctx.lineWidth = 0.5;
-      
-      // Méridiens
-      for (let lon = -180; lon <= 180; lon += 30) {
-        const coords = [];
-        for (let lat = -90; lat <= 90; lat += 5) {
-          coords.push([lon, lat]);
-        }
-        drawPath(coords, ctx, currentRadius);
-        ctx.stroke();
-      }
-      
-      // Parallèles
-      for (let lat = -60; lat <= 60; lat += 30) {
-        const coords = [];
-        for (let lon = -180; lon <= 180; lon += 5) {
-          coords.push([lon, lat]);
-        }
-        drawPath(coords, ctx, currentRadius);
-        ctx.stroke();
-      }
-      
-      // Bordure
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
-      ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
-      ctx.lineWidth = 2;
-      ctx.stroke();
-      
-      // Animation de la vague
-      waveAnimation += 0.02;
-      const waveDay = ((Math.sin(waveAnimation) + 1) / 2) * 46 + 178;
-      
-      // Dessiner les points
-      locations.forEach((loc, i) => {
-        const p = project(loc.lon, loc.lat, currentRadius);
-        
-        if (p.z > -currentRadius * 0.3) {
-          const isActive = waveDay >= loc.day;
-          const isNear = Math.abs(waveDay - loc.day) < 5;
-          
-          // Effet de vague
-          if (isNear && p.z > 0) {
-            const waveSize = 40 * (1 - Math.abs(waveDay - loc.day) / 5);
-            const waveGradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, waveSize);
-            waveGradient.addColorStop(0, 'rgba(255, 215, 0, 0.8)');
-            waveGradient.addColorStop(0.5, 'rgba(255, 215, 0, 0.3)');
-            waveGradient.addColorStop(1, 'rgba(255, 215, 0, 0)');
-            ctx.fillStyle = waveGradient;
-            ctx.fillRect(p.x - waveSize, p.y - waveSize, waveSize * 2, waveSize * 2);
-          }
-          
-          // Point
-          const opacity = p.z > 0 ? 1 : 0.3;
-          ctx.globalAlpha = opacity;
-          
           ctx.beginPath();
-          ctx.arc(p.x, p.y, isActive ? 6 : 4, 0, Math.PI * 2);
+          ctx.arc(p.x, p.y, particle.size, 0, Math.PI * 2);
-          ctx.fillStyle = isActive ? '#FFD700' : '#666666';
+          ctx.fillStyle = `rgba(255, 215, 0, ${particle.opacity})`;
           ctx.fill();
-          ctx.strokeStyle = isActive ? '#FFFFFF' : '#999999';
+        }
+      });
+      
+      // Dessiner les marqueurs avec effet de pulsation
+      locations.forEach((location, index) => {
+        const p = project(location.lon, location.lat, radius);
+        
+        if (p.visible) {
+          // Vérifier si la vague est passée
+          const isActive = waveProgress >= location.day && waveProgress <= location.day + 10;
+          const scale = isActive ? 1 + Math.sin(Date.now() * 0.005) * 0.3 : 1;
+          
+          // Cercle de base
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, 8 * scale, 0, Math.PI * 2);
+          ctx.fillStyle = location.color;
+          ctx.fill();
+          ctx.strokeStyle = '#fff';
           ctx.lineWidth = 2;
           ctx.stroke();
           
-          // Label
+          // Onde de propagation si actif
-          if (p.z > 0) {
+          if (isActive) {
-            ctx.fillStyle = isActive ? '#FFD700' : '#999999';
+            const waveRadius = 20 + (Date.now() * 0.02) % 30;
-            ctx.font = `${12 * zoom}px Inter`;
+            const waveOpacity = 1 - (waveRadius - 20) / 30;
-            ctx.textAlign = 'center';
+            ctx.beginPath();
-            ctx.fillText(loc.name, p.x, p.y - 12);
+            ctx.arc(p.x, p.y, waveRadius, 0, Math.PI * 2);
-            ctx.font = `${10 * zoom}px Inter`;
+            ctx.strokeStyle = `rgba(255, 215, 0, ${waveOpacity * 0.5})`;
-            ctx.fillText(loc.date, p.x, p.y + 22);
+            ctx.lineWidth = 2;
+            ctx.stroke();
           }
           
-          ctx.globalAlpha = 1;
+          // Label
+          ctx.fillStyle = '#fff';
+          ctx.font = 'bold 12px Inter';
+          ctx.textAlign = 'center';
+          ctx.fillText(location.name, p.x, p.y - 15);
+          
+          // Date si proche
+          if (Math.abs(waveProgress - location.day) < 20) {
+            ctx.font = '10px Inter';
+            ctx.fillStyle = location.color;
+            ctx.fillText(location.date, p.x, p.y + 25);
+          }
         }
       });
       
+      // Indicateur de progression de la vague
+      const currentDate = new Date(2025, 0, 1);
+      currentDate.setDate(currentDate.getDate() + Math.floor(waveProgress));
+      
+      ctx.fillStyle = 'rgba(255, 215, 0, 0.8)';
+      ctx.font = 'bold 16px Inter';
+      ctx.textAlign = 'center';
+      ctx.fillText(
+        `Progression de la vague : ${currentDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long' })}`,
+        centerX, height - 30
+      );
+      
       // Rotation automatique
       if (!isDragging) {
         rotation -= 0.002;
       }
       
-      requestAnimationFrame(draw);
+      animationId = requestAnimationFrame(draw);
+    }
+    
+    function drawPolygon(coordinates) {
+      ctx.beginPath();
+      let firstPoint = true;
+      
+      coordinates.forEach(coord => {
+        const p = project(coord[0], coord[1], radius);
+        if (p.visible) {
+          if (firstPoint) {
+            ctx.moveTo(p.x, p.y);
+            firstPoint = false;
+          } else {
+            ctx.lineTo(p.x, p.y);
+          }
+        }
+      });
+      
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
     }
     
     draw();
   }
 </script>
-
 <section id="geojson-section" class="globe-section">
   <div class="container">
     <div class="section-header" class:visible>
@@ -357,6 +440,8 @@
     background: radial-gradient(circle at center, #0a192f 0%, #020c1b 100%);
     cursor: grab;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    transform: scale(0.8);
   }
   
   .globe-canvas:active {
@@ -371,6 +456,11 @@
     opacity: 0.7;
   }
   
+  .globe-info {
+    opacity: 0;
+    transform: translateX(50px);
+  }
+  
   .info-card h3 {
     color: var(--color-primary);
     margin-bottom: 1rem;
@@ -396,6 +486,24 @@
     background: rgba(255, 215, 0, 0.1);
     border-radius: 8px;
     border-left: 3px solid var(--color-primary);
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .timeline-entry::before {
+    content: '';
+    position: absolute;
+    left: -100%;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
+    animation: shimmer 3s infinite;
+  }
+  
+  @keyframes shimmer {
+    0% { left: -100%; }
+    100% { left: 100%; }
   }
   
   .timeline-entry .date {
@@ -416,4 +524,4 @@
       height: 400px;
     }
   }
-</style>
+</style>

src/components/Hero.svelte

@@ -1,15 +1,81 @@
 <script>
   import { onMount } from 'svelte';
   import { t } from '../lib/i18n.js';
+  import anime from 'animejs/lib/anime.es.js';
   
   let starsCanvas;
   let mouseX = 0.5;
   let mouseY = 0.5;
+  let heroSection;
   
   onMount(() => {
     const ctx = starsCanvas.getContext('2d');
     const stars = [];
     const starCount = 150;
+    const shootingStars = [];
+    
+    // Animation d'entrée avec AnimeJS
+    anime.timeline({
+      easing: 'easeOutQuad'
+    })
+    .add({
+      targets: '.title-line',
+      translateY: [50, 0],
+      opacity: [0, 1],
+      duration: 1200,
+      delay: anime.stagger(200)
+    })
+    .add({
+      targets: '.hero-subtitle',
+      translateY: [30, 0],
+      opacity: [0, 1],
+      duration: 800
+    }, '-=600')
+    .add({
+      targets: '.hero-description',
+      translateY: [30, 0],
+      opacity: [0, 1],
+      duration: 800
+    }, '-=400')
+    .add({
+      targets: '.hero-date',
+      translateY: [30, 0],
+      opacity: [0, 1],
+      duration: 800
+    }, '-=400')
+    .add({
+      targets: '.hero-cta .btn',
+      scale: [0.8, 1],
+      opacity: [0, 1],
+      duration: 600,
+      delay: anime.stagger(100)
+    }, '-=400');
+    
+    // Animation des patterns africains
+    anime({
+      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(() => {
@@ -27,9 +93,22 @@
               y: Math.random() * starsCanvas.height,
               size: Math.random() * 2,
               brightness: Math.random(),
-              speed: 0.1 + Math.random() * 0.5
+              speed: 0.1 + Math.random() * 0.5,
+              pulseSpeed: 2000 + Math.random() * 3000
             });
           }
+          
+          // Animer les étoiles avec AnimeJS
+          stars.forEach((star, i) => {
+            anime({
+              targets: star,
+              brightness: [0.1, 1, 0.1],
+              duration: star.pulseSpeed,
+              easing: 'easeInOutSine',
+              loop: true,
+              delay: i * 20
+            });
+          });
         }
       };
       
@@ -44,11 +123,18 @@
         const offsetX = (mouseX - 0.5) * 20;
         const offsetY = (mouseY - 0.5) * 20;
         
+        // Dessiner les étoiles
         stars.forEach(star => {
           // Mouvement subtil
           star.x += Math.sin(Date.now() * 0.0001 * star.speed) * 0.5;
           star.y += Math.cos(Date.now() * 0.0001 * star.speed) * 0.3;
           
+          // Garder dans les limites
+          if (star.x < 0) star.x = starsCanvas.width;
+          if (star.x > starsCanvas.width) star.x = 0;
+          if (star.y < 0) star.y = starsCanvas.height;
+          if (star.y > starsCanvas.height) star.y = 0;
+          
           ctx.beginPath();
           ctx.arc(
             star.x + offsetX, 
@@ -59,12 +145,39 @@
           );
           ctx.fillStyle = `rgba(255, 215, 0, ${star.brightness})`;
           ctx.fill();
-          
-          // Animer la brillance
-          star.brightness += (Math.random() - 0.5) * 0.05;
-          star.brightness = Math.max(0.1, Math.min(1, star.brightness));
         });
         
+        // Dessiner les étoiles filantes
+        shootingStars.forEach((star, index) => {
+          if (star.opacity <= 0) {
+            shootingStars.splice(index, 1);
+            return;
+          }
+          
+          ctx.beginPath();
+          ctx.moveTo(star.x, star.y);
+          ctx.lineTo(star.x - star.vx * 20, star.y - star.vy * 20);
+          ctx.strokeStyle = `rgba(255, 215, 0, ${star.opacity})`;
+          ctx.lineWidth = star.size;
+          ctx.stroke();
+          
+          star.x += star.vx;
+          star.y += star.vy;
+          star.opacity -= 0.02;
+        });
+        
+        // Créer occasionnellement une étoile filante
+        if (Math.random() < 0.01 && shootingStars.length < 3) {
+          shootingStars.push({
+            x: Math.random() * starsCanvas.width,
+            y: Math.random() * starsCanvas.height * 0.5,
+            vx: 5 + Math.random() * 10,
+            vy: 2 + Math.random() * 5,
+            size: 1 + Math.random() * 2,
+            opacity: 1
+          });
+        }
+        
         requestAnimationFrame(animate);
       };
       
@@ -81,9 +194,28 @@
     mouseX = (e.clientX - rect.left) / rect.width;
     mouseY = (e.clientY - rect.top) / rect.height;
   };
+  
+  // Animation du bouton au survol
+  function handleButtonHover(e) {
+    anime({
+      targets: e.currentTarget,
+      scale: 1.05,
+      duration: 300,
+      easing: 'easeOutElastic(1, .5)'
+    });
+  }
+  
+  function handleButtonLeave(e) {
+    anime({
+      targets: e.currentTarget,
+      scale: 1,
+      duration: 300,
+      easing: 'easeOutElastic(1, .5)'
+    });
+  }
 </script>
 
-<section id="home" class="hero" on:mousemove={handleMouseMove}>
+<section id="home" class="hero" on:mousemove={handleMouseMove} bind:this={heroSection}>
   <canvas bind:this={starsCanvas} class="stars-canvas"></canvas>
   
   <div class="hero-pattern">
@@ -110,10 +242,20 @@
           {$t('hero_date')}<strong>{$t('hero_date_value')}</strong>
         </p>
         <div class="hero-cta">
-          <a href="#predictions" class="btn btn-primary">
+          <a 
+            href="#predictions" 
+            class="btn btn-primary"
+            on:mouseenter={handleButtonHover}
+            on:mouseleave={handleButtonLeave}
+          >
             {$t('hero_cta_predictions')}
           </a>
-          <a href="#about" class="btn btn-outline">
+          <a 
+            href="#about" 
+            class="btn btn-outline"
+            on:mouseenter={handleButtonHover}
+            on:mouseleave={handleButtonLeave}
+          >
             {$t('hero_cta_learn')}
           </a>
         </div>
@@ -181,7 +323,6 @@
         transparent 10px,
         transparent 20px
       );
-    animation: slidePattern 30s linear infinite;
   }
   
   .pattern-adinkra {
@@ -190,7 +331,6 @@
       radial-gradient(circle at 80% 80%, var(--color-secondary) 2px, transparent 2px),
       radial-gradient(circle at 50% 50%, var(--color-accent) 3px, transparent 3px);
     background-size: 50px 50px;
-    animation: rotatePattern 40s linear infinite;
   }
   
   .pattern-bogolan {
@@ -202,22 +342,6 @@
       );
     background-size: 100px 100px;
     opacity: 0.05;
-    animation: pulsePattern 20s ease-in-out infinite;
-  }
-  
-  @keyframes slidePattern {
-    from { transform: translateX(0); }
-    to { transform: translateX(200px); }
-  }
-  
-  @keyframes rotatePattern {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
-  
-  @keyframes pulsePattern {
-    0%, 100% { opacity: 0.05; }
-    50% { opacity: 0.15; }
   }
   
   .hero-content {
@@ -244,12 +368,10 @@
   .title-line {
     display: block;
     opacity: 0;
-    animation: fadeInUp 1s ease-out forwards;
   }
   
   .title-line:nth-child(2) {
     color: var(--color-primary);
-    animation-delay: 0.2s;
   }
   
   .hero-subtitle {
@@ -257,23 +379,20 @@
     color: var(--color-primary);
     font-family: var(--font-heading);
     margin-bottom: 0.5rem;
-    animation: fadeInUp 1s ease-out 0.4s;
+    opacity: 0;
-    animation-fill-mode: both;
   }
   
   .hero-description {
     font-size: clamp(1rem, 2.5vw, 1.2rem);
     color: var(--color-light);
     margin-bottom: 1rem;
-    animation: fadeInUp 1s ease-out 0.5s;
+    opacity: 0;
-    animation-fill-mode: both;
   }
   
   .hero-date {
     font-size: 1.2rem;
     margin-bottom: 2rem;
-    animation: fadeInUp 1s ease-out 0.6s;
+    opacity: 0;
-    animation-fill-mode: both;
   }
   
   .hero-date strong {
@@ -286,8 +405,11 @@
     gap: 1rem;
     flex-wrap: wrap;
     justify-content: center;
-    animation: fadeInUp 1s ease-out 0.8s;
+  }
-    animation-fill-mode: both;
+  
+  .btn {
+    opacity: 0;
+    transform-origin: center;
   }
   
   .btn-outline {
@@ -301,17 +423,6 @@
     color: var(--color-dark);
   }
   
-  @keyframes fadeInUp {
-    from {
-      opacity: 0;
-      transform: translateY(30px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  
   @media (max-width: 768px) {
     .hero-title {
       font-size: clamp(2.5rem, 10vw, 4rem);

src/components/Loader.svelte

@@ -0,0 +1,141 @@
+<script>
+  import { onMount } from 'svelte';
+  import anime from 'animejs/lib/anime.es.js';
+  
+  let loading = true;
+  let progress = 0;
+  
+  onMount(() => {
+    // Animation de la barre de progression
+    anime({
+      targets: { value: 0 },
+      value: 100,
+      duration: 2000,
+      easing: 'easeInOutQuad',
+      update: function(anim) {
+        progress = Math.round(anim.animations[0].currentValue);
+      },
+      complete: function() {
+        setTimeout(() => {
+          loading = false;
+          // Animation de sortie
+          anime({
+            targets: '.loader',
+            opacity: [1, 0],
+            duration: 600,
+            easing: 'easeOutQuad'
+          });
+        }, 300);
+      }
+    });
+    
+    // Animation des étoiles du loader
+    anime({
+      targets: '.loader-star',
+      rotate: 360,
+      duration: 2000,
+      easing: 'linear',
+      loop: true
+    });
+    
+    // Animation du texte
+    anime({
+      targets: '.loader-text span',
+      translateY: [-20, 0],
+      opacity: [0, 1],
+      duration: 800,
+      delay: anime.stagger(100),
+      easing: 'easeOutElastic(1, .5)'
+    });
+  });
+</script>
+
+{#if loading}
+  <div class="loader">
+    <div class="loader-content">
+      <div class="loader-star">⭐</div>
+      <div class="loader-text">
+        <span>S</span>
+        <span>i</span>
+        <span>r</span>
+        <span>i</span>
+        <span>u</span>
+        <span>s</span>
+      </div>
+      <div class="progress-bar">
+        <div class="progress-fill" style="width: {progress}%"></div>
+      </div>
+      <div class="progress-text">{progress}%</div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .loader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--color-dark);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    pointer-events: none;
+  }
+  
+  .loader-content {
+    text-align: center;
+  }
+  
+  .loader-star {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    display: inline-block;
+  }
+  
+  .loader-text {
+    font-size: 3rem;
+    font-weight: 700;
+    color: var(--color-primary);
+    margin-bottom: 2rem;
+    letter-spacing: 0.5rem;
+  }
+  
+  .loader-text span {
+    display: inline-block;
+    opacity: 0;
+  }
+  
+  .progress-bar {
+    width: 200px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    overflow: hidden;
+    margin: 0 auto 1rem;
+  }
+  
+  .progress-fill {
+    height: 100%;
+    background: var(--color-primary);
+    transition: width 0.3s ease;
+  }
+  
+  .progress-text {
+    color: var(--color-light);
+    font-size: 0.9rem;
+    opacity: 0.7;
+  }
+  
+  @media (max-width: 768px) {
+    .loader-text {
+      font-size: 2rem;
+    }
+    
+    .loader-star {
+      font-size: 3rem;
+    }
+  }
+</style>

src/components/Navigation.svelte

@@ -1,15 +1,57 @@
 <script>
   import { t } from '../lib/i18n.js';
   import LanguageSelector from './LanguageSelector.svelte';
+  import anime from 'animejs/lib/anime.es.js';
+  import { onMount } from 'svelte';
   
   export let activeSection = 'home';
   
   let isMenuOpen = false;
+  let navbar;
   
   const toggleMenu = () => {
     isMenuOpen = !isMenuOpen;
+    
+    if (isMenuOpen) {
+      anime({
+        targets: '.nav-menu',
+        translateX: [300, 0],
+        opacity: [0, 1],
+        duration: 400,
+        easing: 'easeOutQuad'
+      });
+      
+      anime({
+        targets: '.nav-menu li',
+        translateX: [50, 0],
+        opacity: [0, 1],
+        duration: 600,
+        delay: anime.stagger(50),
+        easing: 'easeOutQuad'
+      });
+    }
   };
   
+  onMount(() => {
+    // Animation d'entrée de la navbar
+    anime({
+      targets: navbar,
+      translateY: [-100, 0],
+      opacity: [0, 1],
+      duration: 800,
+      easing: 'easeOutQuad'
+    });
+    
+    // Animation du logo
+    anime({
+      targets: '.logo-icon',
+      rotate: [0, 360],
+      duration: 2000,
+      delay: 500,
+      easing: 'easeInOutQuad'
+    });
+  });
+  
   const menuItems = [
     { id: 'home', label: 'nav_home', icon: '🌟' },
     { id: 'about', label: 'nav_about', icon: '✨' },
@@ -25,7 +67,7 @@
   };
 </script>
 
-<nav class="navbar" class:scrolled={activeSection !== 'home'}>
+<nav class="navbar" class:scrolled={activeSection !== 'home'} bind:this={navbar}>
   <div class="container">
     <div class="nav-content">
       <a href="#home" class="logo" on:click|preventDefault={() => scrollToSection('home')}>

src/components/Observatory.svelte

@@ -1,13 +1,83 @@
 <script>
   import { onMount } from 'svelte';
+  import anime from 'animejs/lib/anime.es.js';
   
   let visible = false;
+  let activePhase = 0;
+  
+  const observationPhases = [
+    {
+      time: '04h30',
+      title: 'Préparation',
+      description: 'Arrivez sur site, laissez vos yeux s\'adapter',
+      icon: '🌙'
+    },
+    {
+      time: '05h00',
+      title: 'Recherche',
+      description: 'Cherchez vers l\'Est-Sud-Est, près de l\'horizon',
+      icon: '🔭'
+    },
+    {
+      time: '05h15',
+      title: 'Apparition',
+      description: 'Sirius émerge de la lueur de l\'aube',
+      icon: '⭐'
+    },
+    {
+      time: '05h30',
+      title: 'Observation',
+      description: 'Moment optimal pour contempler',
+      icon: '✨'
+    }
+  ];
+  
+  const equipment = [
+    { item: 'Jumelles', essential: false, description: '7x50 ou 10x50 recommandées' },
+    { item: 'Lampe rouge', essential: true, description: 'Préserve la vision nocturne' },
+    { item: 'Boussole', essential: true, description: 'Pour trouver l\'Est' },
+    { item: 'Vêtements chauds', essential: true, description: 'Les matins sont frais' },
+    { item: 'Carnet de notes', essential: false, description: 'Pour documenter l\'observation' }
+  ];
   
   onMount(() => {
     const observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => {
         if (entry.isIntersecting) {
           visible = true;
+          
+          // Animation d'entrée
+          anime.timeline({
+            easing: 'easeOutQuad'
+          })
+          .add({
+            targets: '.section-header',
+            translateY: [30, 0],
+            opacity: [0, 1],
+            duration: 800
+          })
+          .add({
+            targets: '.timeline-container',
+            translateX: [-50, 0],
+            opacity: [0, 1],
+            duration: 1000
+          }, '-=400')
+          .add({
+            targets: '.timeline-phase',
+            scale: [0.8, 1],
+            opacity: [0, 1],
+            duration: 600,
+            delay: anime.stagger(150)
+          }, '-=600')
+          .add({
+            targets: '.equipment-grid',
+            translateY: [50, 0],
+            opacity: [0, 1],
+            duration: 800
+          }, '-=400');
+          
+          // Animation de la timeline automatique
+          startTimelineAnimation();
         }
       });
     });
@@ -18,41 +88,42 @@
     return () => observer.disconnect();
   });
   
-  const steps = [
+  function startTimelineAnimation() {
-    {
+    // Progression automatique de la timeline
-      number: 1,
+    const timeline = anime.timeline({
-      title: 'Choisir le Site',
+      loop: true,
-      description: 'Trouvez un lieu avec un horizon Est dégagé, loin des lumières urbaines.',
+      autoplay: true
-      icon: '🏖️'
+    });
-    },
+    
-    {
+    observationPhases.forEach((phase, index) => {
-      number: 2,
+      timeline.add({
-      title: 'Se Préparer',
+        targets: {},
-      description: 'Utilisez Stellarium pour repérer Sirius. Arrivez 20 minutes en avance.',
+        duration: 3000,
-      icon: '🔭'
+        changeBegin: () => {
-    },
+          activePhase = index;
-    {
+          animatePhaseChange(index);
-      number: 3,
+        }
-      title: 'Observer',
+      });
-      description: 'Regardez vers l\'Est-Sud-Est. Sirius apparaîtra brillante et scintillante.',
+    });
-      icon: '👁️'
+  }
-    },
-    {
-      number: 4,
-      title: 'Être Patient',
-      description: 'La météo peut changer. Observez sur plusieurs jours pour maximiser vos chances.',
-      icon: '⏳'
-    }
-  ];
   
-  const equipment = [
+  function animatePhaseChange(index) {
-    { item: 'Vos yeux', essential: true, description: 'L\'outil le plus important!' },
+    // Animation de l'indicateur actif
-    { item: 'Jumelles', essential: false, description: 'Utiles mais optionnelles' },
+    anime({
-    { item: 'Boussole/App', essential: true, description: 'Pour trouver l\'Est' },
+      targets: '.timeline-indicator',
-    { item: 'Vêtements chauds', essential: true, description: 'Les matins sont frais' },
+      left: `${index * 25}%`,
-    { item: 'Lampe rouge', essential: false, description: 'Préserve la vision nocturne' },
+      duration: 800,
-    { item: 'Carnet de notes', essential: false, description: 'Pour documenter l\'observation' }
+      easing: 'easeInOutQuad'
-  ];
+    });
+    
+    // Pulsation de la phase active
+    anime({
+      targets: `.timeline-phase:nth-child(${index + 1}) .phase-icon`,
+      scale: [1, 1.2, 1],
+      duration: 600,
+      easing: 'easeInOutQuad'
+    });
+  }
 </script>
 
 <section id="observatory" class="observatory">
@@ -60,70 +131,75 @@
     <div class="section-header" class:visible>
       <h2>Guide d'Observation</h2>
       <p class="section-subtitle">
-        Votre manuel pratique pour réussir l'observation du lever héliaque
+        Tout ce qu'il faut savoir pour observer le lever héliaque
       </p>
     </div>
     
-    <div class="guide-content" class:visible>
+    <div class="observatory-content" class:visible>
-      <div class="steps-section">
+      <!-- Timeline d'observation -->
-        <h3>Les Étapes Clés</h3>
+      <div class="timeline-container">
-        <div class="steps-grid">
+        <h3>Chronologie de l'Observation</h3>
-          {#each steps as step}
+        <div class="timeline">
-            <div class="step-card card">
+          <div class="timeline-track"></div>
-              <div class="step-number">{step.number}</div>
+          <div class="timeline-indicator"></div>
-              <div class="step-icon">{step.icon}</div>
+          {#each observationPhases as phase, i}
-              <h4>{step.title}</h4>
+            <div class="timeline-phase" class:active={activePhase === i}>
-              <p>{step.description}</p>
+              <div class="phase-icon">{phase.icon}</div>
+              <div class="phase-time">{phase.time}</div>
+              <div class="phase-info">
+                <h4>{phase.title}</h4>
+                <p>{phase.description}</p>
+              </div>
             </div>
           {/each}
         </div>
       </div>
       
+      <!-- Équipement recommandé -->
       <div class="equipment-section">
         <h3>Équipement Recommandé</h3>
         <div class="equipment-grid">
-          {#each equipment as equip}
+          {#each equipment as item, i}
-            <div class="equipment-item" class:essential={equip.essential}>
+            <div 
-              <div class="equipment-icon">
+              class="equipment-card" 
-                {equip.essential ? '⭐' : '○'}
+              class:essential={item.essential}
-              </div>
+              style="animation-delay: {i * 0.1}s"
-              <div class="equipment-info">
+            >
-                <h5>{equip.item}</h5>
+              <div class="equipment-header">
-                <p>{equip.description}</p>
+                <span class="equipment-name">{item.item}</span>
+                {#if item.essential}
+                  <span class="essential-badge">Essentiel</span>
+                {/if}
               </div>
+              <p class="equipment-desc">{item.description}</p>
             </div>
           {/each}
         </div>
       </div>
       
-      <div class="stellarium-guide card">
+      <!-- Conseils pratiques -->
-        <h3>Mini-Guide Stellarium</h3>
-        <ol>
-          <li><strong>Télécharger :</strong> stellarium.org (gratuit)</li>
-          <li><strong>Configurer le lieu (F6) :</strong> Entrez les coordonnées de votre site</li>
-          <li><strong>Régler la date (F5) :</strong> Choisissez le 22 juillet 2025, 5h00</li>
-          <li><strong>Chercher Sirius (F3) :</strong> Le logiciel pointera l'étoile</li>
-          <li><strong>Simuler :</strong> Avancez le temps pour voir le lever</li>
-        </ol>
-      </div>
-      
       <div class="tips-section">
-        <h3>Conseils d'Expert</h3>
+        <h3>Conseils Pratiques</h3>
         <div class="tips-grid">
-          <div class="tip-card card">
+          <div class="tip-card">
             <div class="tip-icon">🌤️</div>
-            <h4>Météo</h4>
+            <h4>Météo Idéale</h4>
-            <p>Surveillez les prévisions. Un ciel dégagé et sec est idéal.</p>
+            <p>Ciel dégagé à l'Est, pas de nuages bas, humidité modérée</p>
           </div>
-          <div class="tip-card card">
+          <div class="tip-card">
-            <div class="tip-icon">📍</div>
+            <div class="tip-icon">🌑</div>
-            <h4>Position</h4>
+            <h4>Phase Lunaire</h4>
-            <p>Sirius se lève à environ 105° (Est-Sud-Est) en Guadeloupe.</p>
+            <p>Nouvelle lune ou croissant fin pour un ciel plus sombre</p>
           </div>
-          <div class="tip-card card">
+          <div class="tip-card">
+            <div class="tip-icon">📱</div>
+            <h4>Applications Utiles</h4>
+            <p>Stellarium, SkySafari, Star Walk pour repérer les constellations</p>
+          </div>
+          <div class="tip-card">
             <div class="tip-icon">👥</div>
-            <h4>Groupe</h4>
+            <h4>En Groupe</h4>
-            <p>Observez à plusieurs pour confirmer la première visibilité.</p>
+            <p>Partagez ce moment unique avec famille et amis</p>
           </div>
         </div>
       </div>
@@ -134,148 +210,186 @@
 <style>
   .observatory {
     padding: var(--spacing-xl) 0;
-    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
+    background: var(--gradient-dawn);
   }
   
-  .guide-content {
+  .observatory-content {
+    margin-top: var(--spacing-lg);
+  }
+  
+  /* Timeline */
+  .timeline-container {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 20px;
+    padding: 2rem;
+    margin-bottom: 3rem;
     opacity: 0;
-    transform: translateY(30px);
-    transition: all 0.8s ease-out 0.3s;
   }
   
-  .guide-content.visible {
+  .timeline-container h3 {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  
-  .guide-content h3 {
     color: var(--color-primary);
-    font-size: 1.8rem;
-    margin-bottom: var(--spacing-md);
     text-align: center;
+    margin-bottom: 2rem;
   }
   
-  /* Steps */
+  .timeline {
-  .steps-section {
-    margin-bottom: var(--spacing-xl);
-  }
-  
-  .steps-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: var(--spacing-md);
-  }
-  
-  .step-card {
     position: relative;
-    text-align: center;
-    padding-top: 3rem;
-  }
-  
-  .step-number {
-    position: absolute;
-    top: -20px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 40px;
-    height: 40px;
-    background: var(--gradient-sunrise);
-    color: var(--color-dark);
-    border-radius: 50%;
     display: flex;
-    align-items: center;
+    justify-content: space-between;
-    justify-content: center;
+    padding: 2rem 0;
-    font-weight: 700;
-    font-size: 1.2rem;
   }
   
-  .step-icon {
+  .timeline-track {
-    font-size: 3rem;
+    position: absolute;
-    margin-bottom: 1rem;
+    top: 3rem;
+    left: 5%;
+    right: 5%;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
   }
   
-  .step-card h4 {
+  .timeline-indicator {
+    position: absolute;
+    top: 3rem;
+    left: 0;
+    width: 25%;
+    height: 4px;
+    background: var(--color-primary);
+    border-radius: 2px;
+    transition: left 0.8s ease-in-out;
+  }
+  
+  .timeline-phase {
+    flex: 1;
+    text-align: center;
+    position: relative;
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  
+  .phase-icon {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+    filter: grayscale(1);
+    opacity: 0.5;
+    transition: all 0.3s ease;
+  }
+  
+  .timeline-phase.active .phase-icon {
+    filter: grayscale(0);
+    opacity: 1;
+  }
+  
+  .phase-time {
+    font-weight: 600;
     color: var(--color-primary);
     margin-bottom: 0.5rem;
   }
   
-  /* Equipment */
+  .phase-info h4 {
+    color: var(--color-light);
+    margin: 0.5rem 0;
+    font-size: 1.1rem;
+  }
+  
+  .phase-info p {
+    font-size: 0.9rem;
+    opacity: 0.8;
+  }
+  
+  /* Équipement */
   .equipment-section {
-    margin-bottom: var(--spacing-xl);
+    margin-bottom: 3rem;
+  }
+  
+  .equipment-section h3 {
+    color: var(--color-primary);
+    text-align: center;
+    margin-bottom: 2rem;
   }
   
   .equipment-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: var(--spacing-sm);
+    gap: 1.5rem;
+    opacity: 0;
   }
   
-  .equipment-item {
+  .equipment-card {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 1rem;
     background: rgba(255, 255, 255, 0.05);
-    border-radius: 10px;
+    border-radius: 15px;
-    transition: var(--transition-base);
+    padding: 1.5rem;
+    border: 2px solid transparent;
+    transition: all 0.3s ease;
+    animation: fadeInUp 0.8s ease-out forwards;
   }
   
-  .equipment-item:hover {
+  .equipment-card.essential {
-    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--color-primary);
+    background: rgba(255, 215, 0, 0.05);
   }
   
-  .equipment-icon {
+  .equipment-card:hover {
-    font-size: 1.5rem;
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
   }
   
-  .equipment-item.essential .equipment-icon {
+  .equipment-header {
-    color: var(--color-primary);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
   }
   
-  .equipment-info h5 {
+  .equipment-name {
+    font-weight: 600;
     color: var(--color-light);
-    margin-bottom: 0.25rem;
   }
   
-  .equipment-info p {
+  .essential-badge {
+    background: var(--color-primary);
+    color: var(--color-dark);
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+  }
+  
+  .equipment-desc {
     font-size: 0.9rem;
-    color: rgba(255, 255, 255, 0.7);
+    opacity: 0.8;
   }
   
-  /* Stellarium Guide */
+  /* Conseils */
-  .stellarium-guide {
+  .tips-section h3 {
-    margin-bottom: var(--spacing-xl);
+    color: var(--color-primary);
-    max-width: 800px;
+    text-align: center;
-    margin-left: auto;
+    margin-bottom: 2rem;
-    margin-right: auto;
   }
   
-  .stellarium-guide h3 {
-    margin-bottom: 1rem;
-  }
-  
-  .stellarium-guide ol {
-    padding-left: 1.5rem;
-  }
-  
-  .stellarium-guide li {
-    margin-bottom: 0.75rem;
-    line-height: 1.6;
-  }
-  
-  /* Tips */
   .tips-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: var(--spacing-md);
+    gap: 1.5rem;
   }
   
   .tip-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 15px;
+    padding: 1.5rem;
     text-align: center;
+    transition: all 0.3s ease;
+    animation: fadeInUp 0.8s ease-out forwards;
+  }
+  
+  .tip-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
   }
   
   .tip-icon {
-    font-size: 3rem;
+    font-size: 2.5rem;
     margin-bottom: 1rem;
   }
   
@@ -284,9 +398,38 @@
     margin-bottom: 0.5rem;
   }
   
+  .tip-card p {
+    font-size: 0.9rem;
+    opacity: 0.8;
+  }
+  
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
   @media (max-width: 768px) {
-    .steps-grid {
+    .timeline {
+      flex-direction: column;
+      gap: 2rem;
+    }
+    
+    .timeline-track {
+      display: none;
+    }
+    
+    .timeline-indicator {
+      display: none;
+    }
+    
+    .equipment-grid, .tips-grid {
       grid-template-columns: 1fr;
     }
   }
-</style>
+</style>

src/components/Predictions.svelte

@@ -1,83 +1,52 @@
 <script>
   import { onMount } from 'svelte';
+  import { t } from '../lib/i18n.js';
+  import anime from 'animejs/lib/anime.es.js';
   
-  let selectedLocation = 'Pointe des Châteaux';
-  let selectedYear = '2025';
   let visible = false;
+  let selectedLocation = 'moule';
+  let calculationInProgress = false;
+  let results = null;
   
-  const predictionsData = {
+  const locations = [
-    "Pointe des Châteaux": {
+    { id: 'moule', name: 'Le Moule', lat: 16.3333, lng: -61.3472 },
-      coords: "16.2476°N, 61.1771°O",
+    { id: 'deshaies', name: 'Deshaies', lat: 16.3039, lng: -61.7966 },
-      "2025": { date: "22 juillet", time: "05:12" },
+    { id: 'sainte-anne', name: 'Sainte-Anne', lat: 16.2262, lng: -61.3809 },
-      "2026": { date: "22 juillet", time: "05:12" },
+    { id: 'port-louis', name: 'Port-Louis', lat: 16.4180, lng: -61.5312 },
-      "2027": { date: "22 juillet", time: "05:13" },
+    { id: 'marie-galante', name: 'Marie-Galante', lat: 15.9500, lng: -61.2667 },
-      "2028": { date: "21 juillet", time: "05:13" },
+    { id: 'soufriere', name: 'Route de la Soufrière', lat: 16.0439, lng: -61.6639 },
-      "2029": { date: "22 juillet", time: "05:14" }
+    { id: 'petite-terre', name: 'Petite-Terre', lat: 16.1700, lng: -61.1200 }
-    },
+  ];
-    "Pointe de la Grande Vigie": {
-      coords: "16.5098°N, 61.4666°O",
-      "2025": { date: "22 juillet", time: "05:11" },
-      "2026": { date: "22 juillet", time: "05:12" },
-      "2027": { date: "22 juillet", time: "05:12" },
-      "2028": { date: "21 juillet", time: "05:12" },
-      "2029": { date: "22 juillet", time: "05:13" }
-    },
-    "Duzer (Sainte-Rose)": {
-      coords: "16.3361°N, 61.7430°O",
-      "2025": { date: "22 juillet", time: "05:13" },
-      "2026": { date: "22 juillet", time: "05:14" },
-      "2027": { date: "22 juillet", time: "05:14" },
-      "2028": { date: "21 juillet", time: "05:14" },
-      "2029": { date: "22 juillet", time: "05:15" }
-    },
-    "Saint-Félix (Le Gosier)": {
-      coords: "16.2005°N, 61.4605°O",
-      "2025": { date: "22 juillet", time: "05:13" },
-      "2026": { date: "22 juillet", time: "05:13" },
-      "2027": { date: "22 juillet", time: "05:14" },
-      "2028": { date: "21 juillet", time: "05:14" },
-      "2029": { date: "22 juillet", time: "05:15" }
-    },
-    "Grande Pointe (Trois-Rivières)": {
-      coords: "15.9696°N, 61.6308°O",
-      "2025": { date: "22 juillet", time: "05:13" },
-      "2026": { date: "22 juillet", time: "05:14" },
-      "2027": { date: "22 juillet", time: "05:14" },
-      "2028": { date: "21 juillet", time: "05:15" },
-      "2029": { date: "22 juillet", time: "05:15" }
-    },
-    "Petit-Pérou": {
-      coords: "16.0517°N, 61.5567°O",
-      "2025": { date: "22 juillet", time: "05:14" },
-      "2026": { date: "22 juillet", time: "05:14" },
-      "2027": { date: "22 juillet", time: "05:15" },
-      "2028": { date: "21 juillet", time: "05:15" },
-      "2029": { date: "22 juillet", time: "05:16" }
-    },
-    "Pointe du Vieux-Fort": {
-      coords: "15.9483°N, 61.7072°O",
-      "2025": { date: "22 juillet", time: "05:14" },
-      "2026": { date: "22 juillet", time: "05:14" },
-      "2027": { date: "22 juillet", time: "05:15" },
-      "2028": { date: "21 juillet", time: "05:15" },
-      "2029": { date: "22 juillet", time: "05:16" }
-    }
-  };
-  
-  $: currentPrediction = predictionsData[selectedLocation][selectedYear];
-  $: observationWindow = calculateWindow(currentPrediction.date);
-  
-  function calculateWindow(dateStr) {
-    const day = parseInt(dateStr.split(' ')[0]);
-    const month = dateStr.split(' ')[1];
-    return `${day - 2} au ${day + 2} ${month}`;
-  }
   
   onMount(() => {
     const observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => {
         if (entry.isIntersecting) {
           visible = true;
+          
+          // Animation d'entrée
+          anime.timeline({
+            easing: 'easeOutQuad'
+          })
+          .add({
+            targets: '.section-header',
+            translateY: [30, 0],
+            opacity: [0, 1],
+            duration: 800
+          })
+          .add({
+            targets: '.calculator-container',
+            translateY: [50, 0],
+            opacity: [0, 1],
+            duration: 1000
+          }, '-=400')
+          .add({
+            targets: '.location-option',
+            translateX: [-20, 0],
+            opacity: [0, 1],
+            duration: 600,
+            delay: anime.stagger(50)
+          }, '-=600');
         }
       });
     });
@@ -87,104 +56,200 @@
     
     return () => observer.disconnect();
   });
+  
+  function selectLocation(id) {
+    selectedLocation = id;
+    calculate();
+    
+    // Animation de sélection
+    anime({
+      targets: `.location-option`,
+      scale: 1,
+      duration: 300
+    });
+    
+    anime({
+      targets: `[data-location="${id}"]`,
+      scale: 1.05,
+      duration: 300,
+      easing: 'easeOutElastic(1, .5)'
+    });
+  }
+  
+  function calculate() {
+    calculationInProgress = true;
+    results = null;
+    
+    // Animation du calcul
+    anime({
+      targets: '.calculating-indicator',
+      opacity: [0, 1],
+      duration: 300
+    });
+    
+    // Animation des étoiles pendant le calcul
+    anime({
+      targets: '.star-indicator',
+      rotate: 360,
+      duration: 2000,
+      easing: 'linear',
+      loop: true
+    });
+    
+    setTimeout(() => {
+      const location = locations.find(l => l.id === selectedLocation);
+      
+      // Calculs simplifiés
+      const baseDate = new Date('2025-07-22');
+      const latitudeAdjustment = (location.lat - 16.25) * 0.5;
+      const heliacalDate = new Date(baseDate);
+      heliacalDate.setDate(baseDate.getDate() + Math.round(latitudeAdjustment));
+      
+      results = {
+        location: location.name,
+        heliacalDate: heliacalDate.toLocaleDateString('fr-FR', { 
+          day: 'numeric', 
+          month: 'long', 
+          year: 'numeric' 
+        }),
+        bestTime: '05h00 - 05h30',
+        duration: '15-20 minutes',
+        azimuth: '117° (ESE)',
+        altitude: '57.1°',
+        magnitude: '-1.46'
+      };
+      
+      calculationInProgress = false;
+      
+      // Animation des résultats
+      anime.timeline({
+        easing: 'easeOutQuad'
+      })
+      .add({
+        targets: '.calculating-indicator',
+        opacity: [1, 0],
+        duration: 300
+      })
+      .add({
+        targets: '.results-container',
+        translateY: [20, 0],
+        opacity: [0, 1],
+        duration: 600
+      })
+      .add({
+        targets: '.result-item',
+        translateX: [20, 0],
+        opacity: [0, 1],
+        duration: 400,
+        delay: anime.stagger(100)
+      }, '-=400')
+      .add({
+        targets: '.result-value',
+        scale: [0.8, 1],
+        duration: 600,
+        delay: anime.stagger(100),
+        easing: 'easeOutElastic(1, .5)'
+      }, '-=600');
+      
+    }, 1500);
+  }
+  
+  // Calculer automatiquement au chargement
+  onMount(() => {
+    setTimeout(() => {
+      if (visible) calculate();
+    }, 1000);
+  });
 </script>
 
 <section id="predictions" class="predictions">
-  <div class="pattern-bogolan"></div>
-  
   <div class="container">
     <div class="section-header" class:visible>
-      <h2>Calculateur de Lever Héliaque</h2>
+      <h2>{$t('predictions_title')}</h2>
       <p class="section-subtitle">
-        Trouvez la date précise pour votre site d'observation
+        {$t('predictions_subtitle')}
       </p>
     </div>
     
     <div class="calculator-container" class:visible>
-      <div class="calculator-inputs">
+      <div class="location-selector">
-        <div class="input-group">
+        <h3>{$t('predictions_select_location')}</h3>
-          <label for="location-select">Site d'observation</label>
+        <div class="locations-grid">
-          <select id="location-select" bind:value={selectedLocation}>
+          {#each locations as location}
-            {#each Object.keys(predictionsData) as location}
+            <button 
-              <option value={location}>{location}</option>
+              class="location-option"
-            {/each}
+              class:active={selectedLocation === location.id}
-          </select>
+              data-location={location.id}
-          <small class="coords">{predictionsData[selectedLocation].coords}</small>
+              on:click={() => selectLocation(location.id)}
-        </div>
+            >
-        
+              <span class="location-name">{location.name}</span>
-        <div class="input-group">
+              <span class="location-coords">{location.lat}°N</span>
-          <label for="year-select">Année</label>
+            </button>
-          <select id="year-select" bind:value={selectedYear}>
+          {/each}
-            {#each ['2025', '2026', '2027', '2028', '2029'] as year}
-              <option value={year}>{year}</option>
-            {/each}
-          </select>
         </div>
       </div>
       
-      <div class="prediction-result card">
+      <div class="results-section">
-        <div class="result-header">
+        {#if calculationInProgress}
-          <h3>{selectedLocation}</h3>
+          <div class="calculating-indicator">
-          <span class="year-badge">{selectedYear}</span>
+            <div class="star-indicator">⭐</div>
-        </div>
+            <p>Calcul en cours...</p>
+          </div>
+        {/if}
         
-        <div class="result-content">
+        {#if results && !calculationInProgress}
-          <div class="date-display">
+          <div class="results-container">
-            <div class="date-icon">📅</div>
+            <h3>{$t('predictions_results_for')} {results.location}</h3>
-            <div class="date-text">
+            
-              <div class="date-value">{currentPrediction.date}</div>
+            <div class="results-grid">
-              <div class="date-label">Date du lever héliaque</div>
+              <div class="result-item highlight">
+                <div class="result-icon">🌅</div>
+                <div class="result-label">{$t('predictions_heliacal_rising')}</div>
+                <div class="result-value">{results.heliacalDate}</div>
+              </div>
+              
+              <div class="result-item">
+                <div class="result-icon">⏰</div>
+                <div class="result-label">{$t('predictions_best_observation')}</div>
+                <div class="result-value">{results.bestTime}</div>
+              </div>
+              
+              <div class="result-item">
+                <div class="result-icon">⏱️</div>
+                <div class="result-label">{$t('predictions_visibility_duration')}</div>
+                <div class="result-value">{results.duration}</div>
+              </div>
+              
+              <div class="result-item">
+                <div class="result-icon">🧭</div>
+                <div class="result-label">{$t('predictions_azimuth')}</div>
+                <div class="result-value">{results.azimuth}</div>
+              </div>
+              
+              <div class="result-item">
+                <div class="result-icon">📐</div>
+                <div class="result-label">{$t('predictions_max_altitude')}</div>
+                <div class="result-value">{results.altitude}</div>
+              </div>
+              
+              <div class="result-item">
+                <div class="result-icon">✨</div>
+                <div class="result-label">{$t('predictions_magnitude')}</div>
+                <div class="result-value">{results.magnitude}</div>
+              </div>
+            </div>
+            
+            <div class="observation-tips">
+              <h4>💡 Conseils d'observation</h4>
+              <ul>
+                <li>Arrivez 30 minutes avant pour habituer vos yeux</li>
+                <li>Cherchez vers l'Est-Sud-Est (ESE)</li>
+                <li>Sirius apparaîtra comme l'étoile la plus brillante</li>
+                <li>Conditions idéales : ciel dégagé, sans Lune</li>
+              </ul>
             </div>
           </div>
-          
+        {/if}
-          <div class="time-display">
-            <div class="time-icon">⏰</div>
-            <div class="time-text">
-              <div class="time-value">{currentPrediction.time}</div>
-              <div class="time-label">Heure locale (UTC-4)</div>
-            </div>
-          </div>
-          
-          <div class="window-display">
-            <div class="window-icon">👁️</div>
-            <div class="window-text">
-              <div class="window-value">{observationWindow}</div>
-              <div class="window-label">Fenêtre d'observation recommandée</div>
-            </div>
-          </div>
-        </div>
-        
-        <div class="result-tip">
-          <p>💡 <strong>Conseil :</strong> Arrivez 20 minutes avant l'heure indiquée et observez vers l'Est-Sud-Est</p>
-        </div>
-      </div>
-    </div>
-    
-    <div class="info-cards" class:visible>
-      <div class="info-card card">
-        <h4>Conditions Idéales</h4>
-        <ul>
-          <li>Horizon Est dégagé</li>
-          <li>Ciel clair sans nuages</li>
-          <li>Faible pollution lumineuse</li>
-          <li>Temps sec (peu d'humidité)</li>
-        </ul>
-      </div>
-      
-      <div class="info-card card">
-        <h4>Équipement Recommandé</h4>
-        <ul>
-          <li>Jumelles (optionnel)</li>
-          <li>Application de boussole</li>
-          <li>Vêtements chauds</li>
-          <li>Stellarium (préparation)</li>
-        </ul>
-      </div>
-      
-      <div class="info-card card">
-        <h4>Météo & Visibilité</h4>
-        <p>La brume de sable sahélienne peut retarder la visibilité. 
-        Surveillez les prévisions météo et privilégiez les matins secs.</p>
       </div>
     </div>
   </div>
@@ -192,191 +257,176 @@
 
 <style>
   .predictions {
-    position: relative;
     padding: var(--spacing-xl) 0;
-    background: var(--gradient-dawn);
+    background: var(--gradient-night);
-  }
+    position: relative;
-  
+    overflow: hidden;
-  .pattern-bogolan {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
   }
   
   .calculator-container {
-    position: relative;
-    z-index: 1;
-    max-width: 800px;
-    margin: 0 auto var(--spacing-lg);
     opacity: 0;
-    transform: translateY(30px);
+    margin-top: var(--spacing-lg);
-    transition: all 0.8s ease-out 0.3s;
   }
   
-  .calculator-container.visible {
+  .location-selector {
-    opacity: 1;
+    background: rgba(255, 255, 255, 0.05);
-    transform: translateY(0);
+    border-radius: 20px;
+    padding: 2rem;
+    margin-bottom: 2rem;
   }
   
-  .calculator-inputs {
+  .location-selector h3 {
+    color: var(--color-primary);
+    margin-bottom: 1.5rem;
+    text-align: center;
+  }
+  
+  .locations-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: var(--spacing-md);
+    gap: 1rem;
-    margin-bottom: var(--spacing-md);
   }
   
-  .input-group {
+  .location-option {
+    background: rgba(255, 255, 255, 0.05);
+    border: 2px solid transparent;
+    border-radius: 15px;
+    padding: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    opacity: 0;
     display: flex;
     flex-direction: column;
+    align-items: center;
     gap: 0.5rem;
   }
   
-  .input-group label {
+  .location-option:hover {
-    font-weight: 600;
-    color: var(--color-primary);
-  }
-  
-  .input-group select {
-    padding: 0.75rem;
     background: rgba(255, 255, 255, 0.1);
-    border: 2px solid rgba(255, 215, 0, 0.3);
-    border-radius: 10px;
-    color: var(--color-light);
-    font-size: 1rem;
-    transition: var(--transition-base);
-  }
-  
-  .input-group select:focus {
-    outline: none;
     border-color: var(--color-primary);
-    background: rgba(255, 255, 255, 0.15);
   }
   
-  .coords {
+  .location-option.active {
-    font-size: 0.85rem;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  
-  .prediction-result {
     background: rgba(255, 215, 0, 0.1);
     border-color: var(--color-primary);
-    margin-bottom: var(--spacing-lg);
   }
   
-  .result-header {
+  .location-name {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--spacing-md);
-  }
-  
-  .result-header h3 {
-    color: var(--color-primary);
-    margin: 0;
-  }
-  
-  .year-badge {
-    background: var(--gradient-sunrise);
-    color: var(--color-dark);
-    padding: 0.25rem 1rem;
-    border-radius: 20px;
     font-weight: 600;
+    color: var(--color-light);
   }
   
-  .result-content {
+  .location-coords {
-    display: grid;
+    font-size: 0.9rem;
-    gap: var(--spacing-sm);
+    color: var(--color-primary);
+    opacity: 0.8;
   }
   
-  .date-display,
+  .calculating-indicator {
-  .time-display,
+    text-align: center;
-  .window-display {
+    padding: 3rem;
-    display: flex;
+    opacity: 0;
-    align-items: center;
-    gap: 1rem;
-    padding: 1rem;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
   }
   
-  .date-icon,
+  .star-indicator {
-  .time-icon,
+    font-size: 3rem;
-  .window-icon {
+    display: inline-block;
-    font-size: 2rem;
+    margin-bottom: 1rem;
   }
   
-  .date-value,
+  .results-container {
-  .time-value,
+    background: rgba(255, 255, 255, 0.05);
-  .window-value {
+    border-radius: 20px;
+    padding: 2rem;
+    opacity: 0;
+  }
+  
+  .results-container h3 {
+    color: var(--color-primary);
+    text-align: center;
+    margin-bottom: 2rem;
     font-size: 1.5rem;
+  }
+  
+  .results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+  }
+  
+  .result-item {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 15px;
+    padding: 1.5rem;
+    text-align: center;
+    opacity: 0;
+  }
+  
+  .result-item.highlight {
+    background: rgba(255, 215, 0, 0.1);
+    border: 2px solid var(--color-primary);
+  }
+  
+  .result-icon {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  .result-label {
+    font-size: 0.9rem;
+    color: var(--color-light);
+    opacity: 0.8;
+    margin-bottom: 0.5rem;
+  }
+  
+  .result-value {
+    font-size: 1.2rem;
     font-weight: 700;
     color: var(--color-primary);
   }
   
-  .date-label,
+  .observation-tips {
-  .time-label,
+    background: rgba(255, 215, 0, 0.05);
-  .window-label {
+    border-radius: 15px;
-    font-size: 0.9rem;
+    padding: 1.5rem;
-    color: rgba(255, 255, 255, 0.7);
+    margin-top: 2rem;
   }
   
-  .result-tip {
+  .observation-tips h4 {
-    margin-top: var(--spacing-sm);
-    padding: 1rem;
-    background: rgba(255, 107, 53, 0.2);
-    border-radius: 10px;
-    border-left: 4px solid var(--color-accent);
-  }
-  
-  .info-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: var(--spacing-md);
-    opacity: 0;
-    transform: translateY(30px);
-    transition: all 0.8s ease-out 0.6s;
-  }
-  
-  .info-cards.visible {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  
-  .info-card h4 {
     color: var(--color-primary);
     margin-bottom: 1rem;
   }
   
-  .info-card ul {
+  .observation-tips ul {
     list-style: none;
     padding: 0;
   }
   
-  .info-card li {
+  .observation-tips li {
     padding: 0.5rem 0;
     padding-left: 1.5rem;
     position: relative;
   }
   
-  .info-card li::before {
+  .observation-tips li::before {
-    content: '✦';
+    content: "✦";
     position: absolute;
     left: 0;
     color: var(--color-primary);
   }
   
   @media (max-width: 768px) {
-    .calculator-inputs {
+    .locations-grid {
       grid-template-columns: 1fr;
     }
     
-    .result-header {
+    .results-grid {
-      flex-direction: column;
+      grid-template-columns: 1fr;
-      gap: 1rem;
+    }
-      text-align: center;
+    
+    .location-selector, .results-container {
+      padding: 1.5rem;
     }
   }
-</style>
+</style>