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/PeriodSelector.tsx

@@ -1,6 +1,8 @@
 interface PeriodSelectorProps {
   value: number;
   onChange: (days: number) => void;
+  animationActive: boolean;
+  onAnimate: () => void;
 }
 
 const PERIODS = [
@@ -9,7 +11,7 @@ const PERIODS = [
   { label: '30 jours', days: 30 },
 ];
 
-export function PeriodSelector({ value, onChange }: PeriodSelectorProps) {
+export function PeriodSelector({ value, onChange, animationActive, onAnimate }: PeriodSelectorProps) {
   return (
     <div className="flex gap-1 bg-[#0f1016] border border-[#2e2f3a] rounded-lg p-1">
       {PERIODS.map(({ label, days }) => (
@@ -27,6 +29,19 @@ export function PeriodSelector({ value, onChange }: PeriodSelectorProps) {
           {label}
         </button>
       ))}
+      <div className="w-px mx-1 bg-[#2e2f3a] self-stretch" />
+      <button
+        onClick={onAnimate}
+        className={`
+          px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer
+          ${animationActive
+            ? 'bg-[#d4a843] text-[#0a0b0f] shadow-[0_0_12px_rgba(212,168,67,0.4)]'
+            : 'text-[#6b7280] hover:text-[#d4a843] hover:bg-[#1a1b23]'
+          }
+        `}
+      >
+        ▶ Animer
+      </button>
     </div>
   );
 }