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/components/SpotPanel/SpotPanel.jsx

@@ -4,8 +4,7 @@ import usePushSubscription from '../../hooks/usePushSubscription';
 import './SpotPanel.css';
 
 const LEVEL_LABEL = { low: 'OK', medium: 'Risque', high: 'Impact' };
-const LEVEL_CLASS  = { low: 'level--ok', medium: 'level--risk', high: 'level--impact' };
-const TYPE_ICON    = { beach: '🏖', port: '⚓', surf: '🏄', fishing: '🎣' };
+const TYPE_ICON   = { beach: '🏖', port: '⚓', surf: '🏄', fishing: '🎣' };
 
 const HORIZON_LABELS = { now: 'Maintenant', h6: '+6h', h12: '+12h', h24: '+24h', h48: '+48h' };
 
@@ -67,9 +66,20 @@ export default function SpotPanel({ spot, activeStep, onClose }) {
             ? <p className="spot-panel__no-data">Aucune donnée pour cet horizon.</p>
             : (
               <>
-                <div className={`spot-panel__level ${LEVEL_CLASS[lvl] ?? ''}`}>
-                  <span className="spot-panel__level-label">{LEVEL_LABEL[lvl] ?? lvl}</span>
-                  <span className="spot-panel__level-value">{displayScore.value} / 100</span>
+                <div className={`spot-panel__gauge gauge--${lvl}`}>
+                  <div className="spot-panel__gauge-top">
+                    <span className="spot-panel__gauge-label">{LEVEL_LABEL[lvl] ?? lvl}</span>
+                    <span className="spot-panel__gauge-score">
+                      {displayScore.value}
+                      <span className="spot-panel__gauge-max">/100</span>
+                    </span>
+                  </div>
+                  <div className="spot-panel__gauge-track">
+                    <div
+                      className="spot-panel__gauge-fill"
+                      style={{ width: `${displayScore.value}%` }}
+                    />
+                  </div>
                 </div>
 
                 <dl className="spot-panel__details">