feat: adaptation mobile — drawer bottom + layout responsive

Sur smartphone (< 640px) : panneau stats masqué par défaut, accessible
via un bottom drawer animé (bouton ☰). PeriodSelector passe en flex-wrap
avec padding tactile 44px. AnimationPlayer s'adapte à la largeur écran.
Badge ville focus affiché directement sur la carte en mode mobile.

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

src/components/AnimationPlayer.tsx

@@ -26,8 +26,8 @@ export function AnimationPlayer({
   const frame = frames[currentIndex];
 
   return (
-    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-[1001] w-[min(640px,90vw)]">
-      <div className="bg-[#0a0b0f]/90 backdrop-blur-sm border border-[#2e2f3a] rounded-2xl px-5 py-3 flex flex-col gap-2.5 shadow-xl">
+    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-[1001] w-[min(640px,calc(100vw-1rem))]">
+      <div className="bg-[#0a0b0f]/90 backdrop-blur-sm border border-[#2e2f3a] rounded-2xl px-4 py-3 flex flex-col gap-2.5 shadow-xl">
 
         {/* Frame label + position */}
         <div className="flex items-center justify-between">
@@ -50,7 +50,7 @@ export function AnimationPlayer({
         />
 
         {/* Controls row */}
-        <div className="flex items-center justify-between">
+        <div className="flex flex-wrap items-center justify-between gap-y-2">
 
           {/* Playback buttons */}
           <div className="flex items-center gap-1">

src/components/PeriodSelector.tsx

@@ -41,13 +41,13 @@ export function PeriodSelector({ value, onChange, animationActive, onAnimate, vi
   const isCustomActive = !PRESET_DAYS.has(value);
 
   return (
-    <div className="flex gap-1 bg-[#0f1016] border border-[#2e2f3a] rounded-lg p-1 items-center">
+    <div className="flex flex-wrap gap-1 bg-[#0f1016] border border-[#2e2f3a] rounded-lg p-1 items-center max-w-[calc(100vw-2rem)]">
       {PERIODS.map(({ label, days }) => (
         <button
           key={days}
           onClick={() => { onChange(days); setCustomOpen(false); }}
           className={`
-            px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer
+            px-3 py-2.5 sm:py-1.5 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer
             ${value === days && !customOpen
               ? 'bg-[#d4a843] text-[#0a0b0f] shadow-[0_0_12px_rgba(212,168,67,0.4)]'
               : 'text-[#6b7280] hover:text-[#d4a843] hover:bg-[#1a1b23]'
@@ -84,7 +84,7 @@ export function PeriodSelector({ value, onChange, animationActive, onAnimate, vi
         <button
           onClick={openCustom}
           className={`
-            px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer
+            px-3 py-2.5 sm:py-1.5 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer
             ${isCustomActive
               ? 'bg-[#d4a843] text-[#0a0b0f] shadow-[0_0_12px_rgba(212,168,67,0.4)]'
               : 'text-[#6b7280] hover:text-[#d4a843] hover:bg-[#1a1b23]'

src/components/StatsPanel.tsx

@@ -12,6 +12,7 @@ interface StatsPanelProps {
   viewMode?: 'heatmap' | 'flow';
   flowStats?: FlowStats | null;
   focusCity?: string | null;
+  onClose?: () => void;
 }
 
 const MEDALS = ['🥇', '🥈', '🥉'];
@@ -58,7 +59,7 @@ function CityRow({ city, volume, count, countryCode, accent }: {
   );
 }
 
-export function StatsPanel({ stats, loading, periodDays, source, currentUD, animationLabel, viewMode = 'heatmap', flowStats, focusCity }: StatsPanelProps) {
+export function StatsPanel({ stats, loading, periodDays, source, currentUD, animationLabel, viewMode = 'heatmap', flowStats, focusCity, onClose }: StatsPanelProps) {
   const periodLabel = periodDays === 1 ? '24 dernières heures' : `${periodDays} derniers jours`;
   const prevStats = useRef<PeriodStats | null>(null);
 
@@ -82,7 +83,7 @@ export function StatsPanel({ stats, loading, periodDays, source, currentUD, anim
   if (stats && !loading) prevStats.current = stats;
 
   return (
-    <aside className="w-72 shrink-0 flex flex-col gap-4 bg-[#0a0b0f]/95 backdrop-blur-sm border-r border-[#1e1f2a] p-5 overflow-y-auto">
+    <aside className="w-full lg:w-72 shrink-0 flex flex-col gap-4 bg-[#0a0b0f]/95 backdrop-blur-sm border-r border-[#1e1f2a] p-5 overflow-y-auto h-full">
       {/* Header */}
       <div className="flex items-center gap-2.5">
         <div className="w-8 h-8 rounded-full bg-[#d4a843] flex items-center justify-center text-[#0a0b0f] font-bold text-sm shadow-[0_0_16px_rgba(212,168,67,0.5)]">
@@ -95,6 +96,15 @@ export function StatsPanel({ stats, loading, periodDays, source, currentUD, anim
           </h1>
           <p className="text-[#4b5563] text-xs">Monnaie libre · Flux géo</p>
         </div>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="ml-auto text-[#4b5563] hover:text-white transition-colors p-1 text-lg leading-none"
+            aria-label="Fermer"
+          >
+            ✕
+          </button>
+        )}
       </div>
 
       {/* Description */}