feat: améliore le fondu enchaîné et recalibre les vitesses

- Fondu : dip à 0.15 (au lieu de 0) pour un effet dissolve plutôt
  qu'un blink; ease-out 150ms / ease-in 200ms
- Délais : 1500ms base (×1=1.5s, ×2=750ms, ×4=375ms)
- Vitesse par défaut : ×2

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

src/components/HeatMap.tsx

@@ -89,13 +89,14 @@ export function HeatMap({ transactions }: HeatMapProps) {
       return;
     }
 
-    canvas.style.transition = 'opacity 0.25s ease-in-out';
-    canvas.style.opacity = '0';
+    canvas.style.transition = 'opacity 0.15s ease-out';
+    canvas.style.opacity = '0.15';
 
     const t = setTimeout(() => {
       update();
+      canvas.style.transition = 'opacity 0.2s ease-in';
       canvas.style.opacity = '1';
-    }, 250);
+    }, 150);
 
     return () => clearTimeout(t);
   }, [transactions]);

src/hooks/useAnimation.ts

@@ -60,7 +60,7 @@ export function useAnimation(transactions: Transaction[], periodDays: number) {
   const [active, setActive] = useState(false);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [playing, setPlaying] = useState(false);
-  const [speed, setSpeed] = useState<1 | 2 | 4>(1);
+  const [speed, setSpeed] = useState<1 | 2 | 4>(2);
 
   const frames = useMemo(() => buildFrames(periodDays), [periodDays]);
 
@@ -73,7 +73,7 @@ export function useAnimation(transactions: Transaction[], periodDays: number) {
   // Auto-advance: one step every (2000 / speed) ms
   useEffect(() => {
     if (!playing || !active) return;
-    const delay = 2000 / speed;
+    const delay = 1500 / speed; // ×1=1500ms, ×2=750ms, ×4=375ms
     const t = setTimeout(() => {
       setCurrentIndex((i) => {
         if (i >= frames.length - 1) {