feat: bouton ℹ + modale InfoPanel décrivant toutes les fonctionnalités

- InfoPanel : modale avec overlay, sections Vues / Clusters / Période /
  Animation / Statistiques / Source, composants Section/Feature/Kbd
- PeriodSelector : ajout prop onInfo + bouton ℹ en fin de barre
- App.tsx : état infoOpen, onInfo → setInfoOpen(true), rendu InfoPanel

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

src/App.tsx

@@ -12,6 +12,7 @@ import { computeStats } from './data/mockData';
 import { computeFlowStats } from './data/arcData';
 import { useAnimation } from './hooks/useAnimation';
 import { useMediaQuery } from './hooks/useMediaQuery';
+import { InfoPanel } from './components/InfoPanel';
 
 export default function App() {
   const [periodDays, setPeriodDays] = useState(7);
@@ -27,6 +28,7 @@ export default function App() {
   const [viewMode, setViewMode] = useState<'heatmap' | 'flow'>('heatmap');
   const [focusCity, setFocusCity] = useState<string | null>(null);
   const [panelOpen, setPanelOpen] = useState(false);
+  const [infoOpen, setInfoOpen] = useState(false);
   const isMobile = useMediaQuery('(max-width: 639px)');
 
   const animation = useAnimation(transactions, arcs, periodDays, allTimestamps);
@@ -141,6 +143,7 @@ export default function App() {
             geoPercent={visibleStats && visibleStats.transactionCount > 0
               ? Math.round((visibleStats.geoCount / visibleStats.transactionCount) * 100)
               : null}
+            onInfo={() => setInfoOpen(true)}
           />
         </div>
 
@@ -196,6 +199,9 @@ export default function App() {
         )}
       </div>
 
+      {/* Info panel */}
+      {infoOpen && <InfoPanel onClose={() => setInfoOpen(false)} />}
+
       {/* Bottom drawer — mobile uniquement */}
       {isMobile && (
         <>