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.css

@@ -55,21 +55,60 @@
 /* Score */
 .spot-panel__score { margin-bottom: 16px; }
 
-.spot-panel__level {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-radius: 10px;
+/* Gauge */
+.spot-panel__gauge {
+  padding: 14px 16px 12px;
+  border-radius: 12px;
   margin-bottom: 12px;
-  font-weight: 600;
 }
-.level--ok     { background: #14532d; color: #86efac; }
-.level--risk   { background: #78350f; color: #fcd34d; }
-.level--impact { background: #7f1d1d; color: #fca5a5; }
+.gauge--low    { background: rgba(20, 83, 45, 0.45); }
+.gauge--medium { background: rgba(120, 53, 15, 0.45); }
+.gauge--high   { background: rgba(127, 29, 29, 0.45); }
 
-.spot-panel__level-label { font-size: 18px; }
-.spot-panel__level-value { font-size: 14px; opacity: .8; }
+.spot-panel__gauge-top {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.spot-panel__gauge-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+}
+.gauge--low .spot-panel__gauge-label    { color: #86efac; }
+.gauge--medium .spot-panel__gauge-label { color: #fcd34d; }
+.gauge--high .spot-panel__gauge-label   { color: #fca5a5; }
+
+.spot-panel__gauge-score {
+  font-size: 30px;
+  font-weight: 700;
+  color: #f1f5f9;
+  line-height: 1;
+}
+.spot-panel__gauge-max {
+  font-size: 13px;
+  font-weight: 400;
+  color: #64748b;
+  margin-left: 2px;
+}
+
+.spot-panel__gauge-track {
+  height: 5px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.spot-panel__gauge-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width .6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.gauge--low .spot-panel__gauge-fill    { background: #22c55e; }
+.gauge--medium .spot-panel__gauge-fill { background: #eab308; }
+.gauge--high .spot-panel__gauge-fill   { background: #ef4444; }
 
 .spot-panel__details {
   display: grid;