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/css/app.css

@@ -51,6 +51,20 @@
     --color-negative-fill: 214 127 72;    /* #d67f48: 3.2:1 white text (large/bold header use only) */
     --color-info-fill: 71 66 56;          /* #474238: 9.8:1 white text */
     --color-danger-fill: 166 45 45;       /* 5.4:1 white text */
+
+    /* "Organic" tonal ramps — mode-invariant, used for mobile category dots
+     * and progress bars where a spread of same-hue shades tells categories
+     * apart (WCAG 1.4.11 graphical-object contrast), not for text-on-surface. */
+    --color-accent-400: #f6a06b;
+    --color-accent-500: #d67f48;
+    --color-accent-600: #b2622d;
+    --color-accent-700: #8c491a;
+    --color-accent-800: #643312;
+    --color-accent-2-400: #aebf92;
+    --color-accent-2-500: #8fa073;
+    --color-accent-2-600: #728157;
+    --color-accent-2-700: #56633f;
+    --color-accent-2-800: #3d472b;
 }
 
 .dark {