feat: refonte UX front — topbar, navigation île, marqueurs colorés, gauge score, fade layers

- Topbar glassmorphism : logo + boutons île (Guadeloupe/Martinique/Barbade/St-Martin/Dominique) + timeline intégrée
- flyTo() animé par île, vue initiale centrée sur Guadeloupe
- Marqueurs spots colorés par niveau d'impact (vert/jaune/rouge) chargés progressivement
- Score remplacé par un gauge : valeur en grand + barre de progression animée
- Légende flottante bas-gauche (observations / prévisions / niveaux)
- Transition fade 350ms sur les layers MapLibre au changement d'horizon temporel
- NavigationControl déplacé en bas à droite

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

frontend/src/App.jsx

@@ -1,23 +1,32 @@
 import { useState } from 'react';
 import SargassesMap from './components/Map/SargassesMap';
 import SpotPanel from './components/SpotPanel/SpotPanel';
-import TimelineSlider from './components/Timeline/TimelineSlider';
+import Topbar from './components/Topbar/Topbar';
+import Legend from './components/Legend/Legend';
 import './App.css';
 
 export default function App() {
   const [selectedSpot, setSelectedSpot] = useState(null);
   const [activeStep,   setActiveStep]   = useState('now');
+  const [flyToTarget,  setFlyToTarget]  = useState(null);
 
   return (
     <div className="app">
-      <TimelineSlider activeStep={activeStep} onChange={setActiveStep} />
+      <Topbar
+        activeStep={activeStep}
+        onStepChange={setActiveStep}
+        onIslandSelect={setFlyToTarget}
+      />
 
       <SargassesMap
         onSpotSelect={setSelectedSpot}
         selectedSpotId={selectedSpot?.id}
         activeStep={activeStep}
+        flyToTarget={flyToTarget}
       />
 
+      <Legend />
+
       <SpotPanel
         spot={selectedSpot}
         activeStep={activeStep}