feat: animation temporelle des flux Ğ1

Nouveau mode animation accessible via "▶ Animer" dans le sélecteur de période.
- useAnimation : hook gérant frames, lecture, vitesse, filtrage client
- AnimationPlayer : barre de contrôle (play/pause, slider, ×1/×2/×4)
- Granularité auto : 24 frames/h (24h), 7 frames/jour (7j), ~4 frames/semaine (30j)
- Stats et heatmap mis à jour sur la fenêtre courante, zéro requête réseau supplémentaire

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

src/components/StatsPanel.tsx

@@ -6,6 +6,7 @@ interface StatsPanelProps {
   loading: boolean;
   periodDays: number;
   source: 'live' | 'mock';
+  animationLabel?: string;
 }
 
 const MEDALS = ['🥇', '🥈', '🥉'];
@@ -24,7 +25,7 @@ function StatCard({ label, value, sub, delta }: { label: string; value: string;
   );
 }
 
-export function StatsPanel({ stats, loading, periodDays, source }: StatsPanelProps) {
+export function StatsPanel({ stats, loading, periodDays, source, animationLabel }: StatsPanelProps) {
   const periodLabel = periodDays === 1 ? '24 dernières heures' : `${periodDays} derniers jours`;
   const prevStats = useRef<PeriodStats | null>(null);
 
@@ -70,7 +71,10 @@ export function StatsPanel({ stats, loading, periodDays, source }: StatsPanelPro
 
       {/* Period label */}
       <p className="text-[#4b5563] text-xs border-t border-[#1e1f2a] pt-3">
-        Période : <span className="text-[#6b7280]">{periodLabel}</span>
+        {animationLabel
+          ? <><span className="text-[#d4a843]">▶</span> <span className="text-[#d4a843]">{animationLabel}</span></>
+          : <>Période : <span className="text-[#6b7280]">{periodLabel}</span></>
+        }
       </p>
 
       {/* Stats */}