feat: raccourcis clavier, URL partageable, sparkline, recherche identité

- Raccourcis clavier : ←/→ (frames), Espace (play/pause), Échap
  (quitter animation/fermer info), H (basculer heatmap↔flux)
- URL partageable : ?period=7&view=flow&city=Paris — état restauré
  au chargement et mis à jour sans rechargement (history.replaceState)
- Sparkline : mini bar-chart SVG dans le StatsPanel montrant l'activité
  sur la période (données déjà en mémoire, aucune requête)
- Recherche identité : champ flottant (⌕) acceptant un nom Ğ1 ou une
  clé g1…, résout via Subsquid + Cesium+, bascule en vue flux et
  met la ville en focus

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

src/components/StatsPanel.tsx

@@ -1,6 +1,7 @@
 import { useRef } from 'react';
 import type { PeriodStats } from '../services/DataService';
 import type { FlowStats } from '../data/arcData';
+import { Sparkline } from './Sparkline';
 
 interface StatsPanelProps {
   stats: PeriodStats | null;
@@ -14,6 +15,7 @@ interface StatsPanelProps {
   flowStats?: FlowStats | null;
   focusCity?: string | null;
   onClose?: () => void;
+  allTimestamps?: number[];
 }
 
 const MEDALS = ['🥇', '🥈', '🥉'];
@@ -60,7 +62,7 @@ function CityRow({ city, volume, count, countryCode, accent }: {
   );
 }
 
-export function StatsPanel({ stats, loading, periodDays, source, currentUD, animationLabel, viewMode = 'heatmap', flowStats, focusCity, onClose, className }: StatsPanelProps) {
+export function StatsPanel({ stats, loading, periodDays, source, currentUD, animationLabel, viewMode = 'heatmap', flowStats, focusCity, onClose, className, allTimestamps = [] }: StatsPanelProps) {
   const periodLabel = periodDays === 1 ? '24 dernières heures' : `${periodDays} derniers jours`;
   const prevStats = useRef<PeriodStats | null>(null);
 
@@ -113,13 +115,18 @@ export function StatsPanel({ stats, loading, periodDays, source, currentUD, anim
         Visualisation en temps réel des flux de la monnaie libre <span className="text-[#d4a843]">Ğ1</span> sur une carte mondiale.
       </p>
 
-      {/* Period label */}
-      <p className="text-[#4b5563] text-xs border-t border-[#1e1f2a] pt-3">
-        {animationLabel
-          ? <><span className="text-[#d4a843]">▶</span> <span className="text-[#d4a843]">{animationLabel}</span></>
-          : <>Période : <span className="text-[#6b7280]">{periodLabel}</span></>
-        }
-      </p>
+      {/* Period label + sparkline */}
+      <div className="border-t border-[#1e1f2a] pt-3 space-y-2">
+        <p className="text-[#4b5563] text-xs">
+          {animationLabel
+            ? <><span className="text-[#d4a843]">▶</span> <span className="text-[#d4a843]">{animationLabel}</span></>
+            : <>Période : <span className="text-[#6b7280]">{periodLabel}</span></>
+          }
+        </p>
+        {!animationLabel && allTimestamps.length > 0 && (
+          <Sparkline timestamps={allTimestamps} periodDays={periodDays} />
+        )}
+      </div>
 
       {/* ---- Vue HEATMAP ---- */}
       {viewMode === 'heatmap' && (