feat: taux de géoloc réel par frame + DU + périodeSélecteur + autoplay anim

- Affiche l'équivalent en DU pour le volume total et la moyenne par tx
- Taux de géolocalisation réel par frame d'animation (via allTimestamps)
- Sélecteur de période personnalisée inline à côté des boutons 24h/7j/30j
- Clic sur Animer lance la lecture automatique à vitesse ×1

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

src/hooks/useAnimation.ts

@@ -56,7 +56,7 @@ function buildFrames(periodDays: number): TimeFrame[] {
   return frames;
 }
 
-export function useAnimation(transactions: Transaction[], periodDays: number) {
+export function useAnimation(transactions: Transaction[], periodDays: number, allTimestamps: number[] = []) {
   const [active, setActive] = useState(false);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [playing, setPlaying] = useState(false);
@@ -95,6 +95,14 @@ export function useAnimation(transactions: Transaction[], periodDays: number) {
     return transactions.filter((t) => t.timestamp >= frame.from && t.timestamp < frame.to);
   }, [active, transactions, frames, currentIndex]);
 
+  // Nombre total de transfers (géo + non-géo) dans la frame courante
+  const frameTotalCount = useMemo(() => {
+    if (!active || frames.length === 0 || allTimestamps.length === 0) return null;
+    const frame = frames[currentIndex];
+    if (!frame) return null;
+    return allTimestamps.filter((ts) => ts >= frame.from && ts < frame.to).length;
+  }, [active, allTimestamps, frames, currentIndex]);
+
   return {
     active,
     activate: () => { setActive(true); setSpeed(1); setPlaying(true); },
@@ -109,5 +117,6 @@ export function useAnimation(transactions: Transaction[], periodDays: number) {
     frames,
     currentFrame: frames[currentIndex] ?? null,
     visibleTransactions,
+    frameTotalCount,
   };
 }