feat: suivi par patch — décomposition MULTIPOLYGON avec distance et surface par patch

ST_Dump sur la dernière observation → 5 patches les plus proches dans 200km, exposés
dans /spots/{id}/score. SpotPanel affiche le nombre de patches et la distance+surface
de chacun sous forme de barres (échelle 0–100km).

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

frontend/src/components/SpotPanel/SpotPanel.jsx

@@ -140,6 +140,8 @@ export default function SpotPanel({ spot, activeStep, onClose }) {
                 </dl>
 
                 <ScoreBreakdown breakdown={displayScore.breakdown} />
+
+                {activeStep === 'now' && <PatchList patches={data?.patches} />}
               </>
             )
         )}
@@ -151,6 +153,36 @@ export default function SpotPanel({ spot, activeStep, onClose }) {
   );
 }
 
+function PatchList({ patches }) {
+  if (!patches?.length) return null;
+
+  // Échelle visuelle : 100 km = barre pleine
+  const MAX_KM = 100;
+
+  return (
+    <div className="patch-list">
+      <p className="patch-list__title">
+        {patches.length} patch{patches.length > 1 ? 'es' : ''} détecté{patches.length > 1 ? 's' : ''}
+      </p>
+      {patches.map((p, i) => {
+        const pct = Math.min((p.distanceKm / MAX_KM) * 100, 100);
+        const sizeLabel = p.areaKm2 >= 10
+          ? `${p.areaKm2} km²`
+          : `${p.areaKm2} km²`;
+        return (
+          <div key={i} className="patch-list__row">
+            <span className="patch-list__dist">{p.distanceKm} km</span>
+            <div className="patch-list__track">
+              <div className="patch-list__fill" style={{ width: `${pct}%` }} />
+            </div>
+            <span className="patch-list__area">{sizeLabel}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
 const BREAKDOWN_ITEMS = [
   { key: 'distance', label: 'Distance',  max: 40, icon: '📏' },
   { key: 'density',  label: 'Densité',   max: 30, icon: '🌿' },