fix: equalizer plus proche du design Stitch + couleurs plus profondes

Barres plus pleines et arrondies, halo lumineux sur pics audio,
palette dark plus riche (indigo vibrant, cyan éclatant, bleu profond),
ombres et bordures plus marquées, gradients de fond plus immersifs.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/components/AudioVisualizer.tsx

@@ -8,12 +8,12 @@ interface AudioVisualizerProps {
 }
 
 export default function AudioVisualizer({
-  barCount = 28,
-  height = 80,
-  gap = 3,
+  barCount = 40,
+  height = 96,
+  gap = 2,
 }: AudioVisualizerProps) {
   const { isPlaying, getFrequencyData } = useAudio();
-  const [heights, setHeights] = useState<number[]>(() => Array(barCount).fill(4));
+  const [heights, setHeights] = useState<number[]>(() => Array(barCount).fill(3));
   const rafRef = useRef<number>(0);
   const playingRef = useRef(isPlaying);
   const getDataRef = useRef(getFrequencyData);
@@ -27,33 +27,30 @@ export default function AudioVisualizer({
     const animate = () => {
       const rawData = getDataRef.current?.();
       if (rawData && playingRef.current) {
-        // Build symmetric mirrored heights
         const newHeights: number[] = [];
-
         for (let i = 0; i < barCount; i++) {
-          // Mirror index: distance from center
           const distFromCenter = Math.abs(i - (barCount - 1) / 2);
           const halfIdx = Math.floor(distFromCenter);
           const dataIndex = Math.min(halfIdx, rawData.length - 1);
-
           const value = rawData[dataIndex] ?? 0;
 
-          // Smooth falloff curve toward edges for aesthetic hill shape
-          const edgeFade = 1 - (distFromCenter / half) * 0.35;
+          // Smoother edge fade — keep center bars taller
+          const edgeFade = 1 - (distFromCenter / half) * 0.2;
 
-          // Boost mid frequencies for speech
-          const midBoost = distFromCenter < half * 0.5 ? 1.1 : 1;
+          // Mid boost for vocals/speech
+          const midBoost = distFromCenter < half * 0.6 ? 1.15 : 1;
 
-          const h = Math.max(4, Math.min(100, (value / 255) * 100 * edgeFade * midBoost));
+          // More dynamic range — minimum height of 6%
+          const h = Math.max(6, Math.min(100, (value / 255) * 100 * edgeFade * midBoost));
           newHeights.push(h);
         }
-
         setHeights(newHeights);
       } else {
+        // Gentle decay when paused — slower falloff for smoother look
         setHeights(prev =>
           prev.map(h => {
-            const next = h * 0.88;
-            return next < 4.5 ? 4 : next;
+            const next = h * 0.92;
+            return next < 3.5 ? 3 : next;
           })
         );
       }
@@ -64,21 +61,25 @@ export default function AudioVisualizer({
     return () => cancelAnimationFrame(rafRef.current);
   }, [barCount]);
 
+  const barWidth = Math.max(2, (100 - gap * (barCount - 1)) / barCount);
+
   return (
     <div
-      className="flex items-end justify-center"
-      style={{ height, gap }}
+      className="flex items-end justify-center w-full"
+      style={{ height, gap: `${gap}%` }}
       aria-hidden="true"
     >
       {heights.map((h, i) => (
         <div
           key={i}
-          className="rounded-full bg-gradient-to-t from-[var(--accent-primary)] to-[var(--accent-secondary)]"
+          className="rounded-full"
           style={{
-            width: 3,
+            width: `${barWidth}%`,
             height: `${h}%`,
-            transition: playingRef.current ? 'height 60ms linear' : 'height 220ms ease-out',
-            opacity: 0.45 + (h / 180),
+            background: `linear-gradient(to top, var(--accent-primary), var(--accent-secondary))`,
+            transition: playingRef.current ? 'height 80ms linear' : 'height 300ms ease-out',
+            opacity: 0.55 + (h / 200),
+            boxShadow: h > 40 ? `0 0 ${Math.floor(h / 6)}px rgba(99, 102, 241, ${Math.min(0.5, h / 200)})` : 'none',
           }}
         />
       ))}