feat: vue flux — arcs dirigés entre villes géolocalisées

- Nouveau type TransactionArc + buildCorridors + computeFlowStats
- FlowMap : SVG overlay Leaflet, arcs bezier, flèches de direction, nœuds de villes cliquables
- Clic sur une ville : arcs sortants orange, entrants teal, reste grisé
- DataService : résolution géo des destinataires (toId) dans le même appel Cesium+
- useAnimation : expose visibleArcs filtré par frame
- PeriodSelector : bouton toggle Heatmap / Flux
- StatsPanel : stats flux (volume, top émetteurs, top récepteurs, balance nette)
- App : state viewMode + focusCity, FlowMap conditionnel

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

src/components/PeriodSelector.tsx

@@ -5,6 +5,8 @@ interface PeriodSelectorProps {
   onChange: (days: number) => void;
   animationActive: boolean;
   onAnimate: () => void;
+  viewMode: 'heatmap' | 'flow';
+  onViewModeChange: (mode: 'heatmap' | 'flow') => void;
 }
 
 const PERIODS = [
@@ -15,7 +17,7 @@ const PERIODS = [
 
 const PRESET_DAYS = new Set([1, 7, 30]);
 
-export function PeriodSelector({ value, onChange, animationActive, onAnimate }: PeriodSelectorProps) {
+export function PeriodSelector({ value, onChange, animationActive, onAnimate, viewMode, onViewModeChange }: PeriodSelectorProps) {
   const [customOpen, setCustomOpen] = useState(false);
   const [inputVal, setInputVal] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
@@ -107,6 +109,21 @@ export function PeriodSelector({ value, onChange, animationActive, onAnimate }:
       >
         ▶ Animer
       </button>
+
+      <div className="w-px mx-1 bg-[#2e2f3a] self-stretch" />
+
+      <button
+        onClick={() => onViewModeChange(viewMode === 'heatmap' ? 'flow' : 'heatmap')}
+        className={`
+          px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer
+          ${viewMode === 'flow'
+            ? 'bg-[#d4a843] text-[#0a0b0f] shadow-[0_0_12px_rgba(212,168,67,0.4)]'
+            : 'text-[#6b7280] hover:text-[#d4a843] hover:bg-[#1a1b23]'
+          }
+        `}
+      >
+        {viewMode === 'flow' ? '⊙ Heatmap' : '◉ Flux'}
+      </button>
     </div>
   );
 }