Add mobile bottom tab bar and redesign mobile dashboard

Import the Finlio Mobile design: a fixed bottom tab bar
(Accueil/Plan/Suivi/Flux) replaces the duplicated links in the mobile
hamburger menu, and the dashboard gets a mobile-first layout — hero
"reste à dépenser" card, revenus/épargne tiles, and a spending-by-
category list with progress bars — built from the same $sections data
the desktop tables use. Desktop dashboard is untouched.

The hero card uses a fixed dark background (independent of the
light/dark token swap) so its white text holds contrast in both
themes, matching how the existing -fill tokens are documented.

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

resources/views/components/bottom-tab-bar.blade.php

@@ -0,0 +1,41 @@
+@php
+    $tabs = [
+        ['route' => 'dashboard', 'label' => 'Accueil', 'icon' => 'home'],
+        ['route' => 'plan', 'label' => 'Plan', 'icon' => 'grid'],
+        ['route' => 'suivi', 'label' => 'Suivi', 'icon' => 'list'],
+        ['route' => 'sankey', 'label' => 'Flux', 'icon' => 'chart'],
+    ];
+@endphp
+
+<nav aria-label="Navigation principale" class="sm:hidden fixed inset-x-0 bottom-0 z-40 pb-[max(env(safe-area-inset-bottom),8px)] pt-2 px-4 bg-surface/90 backdrop-blur border-t border-border">
+    <div class="flex justify-around">
+        @foreach ($tabs as $tab)
+            @continue (! Route::has($tab['route']))
+            @php $active = request()->routeIs($tab['route']); @endphp
+            <a
+                href="{{ route($tab['route']) }}"
+                wire:navigate
+                aria-current="{{ $active ? 'page' : 'false' }}"
+                class="flex flex-col items-center gap-0.5 px-3 py-1 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring {{ $active ? 'text-brand' : 'text-text-muted' }}"
+            >
+                <span class="w-6 h-6 flex items-center justify-center rounded-lg {{ $active ? 'bg-brand text-surface' : '' }}">
+                    @switch($tab['icon'])
+                        @case('home')
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M3 11l9-8 9 8" /><path d="M5 10v10h14V10" /></svg>
+                            @break
+                        @case('grid')
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1.5" /><rect x="14" y="3" width="7" height="7" rx="1.5" /><rect x="3" y="14" width="7" height="7" rx="1.5" /><rect x="14" y="14" width="7" height="7" rx="1.5" /></svg>
+                            @break
+                        @case('list')
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13" /><path d="M3 6h.01M3 12h.01M3 18h.01" /></svg>
+                            @break
+                        @case('chart')
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M3 3v18h18" /><path d="M7 15l4-6 4 3 5-8" /></svg>
+                            @break
+                    @endswitch
+                </span>
+                <span class="text-[10px] font-semibold leading-none">{{ $tab['label'] }}</span>
+            </a>
+        @endforeach
+    </div>
+</nav>