Phase 1 : seed CoastalPoints + frontend React complet

Backend :
- SeedCoastalPointsCommand : 29 points Antilles (idempotent)
  Martinique, Guadeloupe, Sainte-Lucie, Barbade, Saint-Martin

Frontend :
- api/client.js : wrapper fetch pour spots, observations, feedback
- SargassesMap : MapLibre GL JS, marqueurs spots, couche observations
  GeoJSON avec rechargement bbox dynamique à chaque mouvement carte
- SpotPanel : Spot Mode (score/niveau/distance/trend), bouton feedback
  terrain anonyme, gestion état loading/error/null
- App.jsx : composition map + panel, état selectedSpot
- vite.config.js : proxy /api → Symfony dev, build → backend/public/spa

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

frontend/src/components/SpotPanel/SpotPanel.css

@@ -0,0 +1,109 @@
+.spot-panel {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(420px, calc(100vw - 32px));
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 16px;
+  padding: 20px;
+  color: #f1f5f9;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
+  z-index: 10;
+}
+
+.spot-panel__close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: none;
+  border: none;
+  color: #94a3b8;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.spot-panel__close:hover { background: #334155; }
+
+.spot-panel__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.spot-panel__icon  { font-size: 28px; }
+.spot-panel__name  { margin: 0; font-size: 18px; font-weight: 600; }
+.spot-panel__region { margin: 2px 0 0; font-size: 13px; color: #94a3b8; }
+
+/* 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;
+  margin-bottom: 12px;
+  font-weight: 600;
+}
+.level--ok     { background: #14532d; color: #86efac; }
+.level--risk   { background: #78350f; color: #fcd34d; }
+.level--impact { background: #7f1d1d; color: #fca5a5; }
+
+.spot-panel__level-label { font-size: 18px; }
+.spot-panel__level-value { font-size: 14px; opacity: .8; }
+
+.spot-panel__details {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px 12px;
+  font-size: 13px;
+  margin: 0;
+}
+.spot-panel__details dt { color: #94a3b8; }
+.spot-panel__details dd { margin: 0; font-weight: 500; }
+
+.spot-panel__loading,
+.spot-panel__no-data,
+.spot-panel__error { color: #94a3b8; font-size: 14px; text-align: center; padding: 12px 0; }
+.spot-panel__error { color: #f87171; }
+
+/* Feedback */
+.spot-panel__feedback {
+  border-top: 1px solid #334155;
+  padding-top: 14px;
+  text-align: center;
+}
+.spot-panel__feedback p { margin: 0 0 10px; font-size: 13px; color: #94a3b8; }
+
+.spot-panel__feedback-btns {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+.spot-panel__feedback-btns button {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #475569;
+  border-radius: 8px;
+  background: #0f172a;
+  color: #f1f5f9;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background .15s;
+}
+.spot-panel__feedback-btns button:hover:not(:disabled) { background: #1e293b; border-color: #64748b; }
+.spot-panel__feedback-btns button:disabled { opacity: .5; cursor: default; }
+
+.spot-panel__feedback-thanks {
+  text-align: center;
+  color: #86efac;
+  font-size: 14px;
+  margin: 0;
+  padding-top: 14px;
+  border-top: 1px solid #334155;
+}