Add interactive citizen page with sidebar, display settings, and adaptive CSS

Major rework of the citizen-facing page:
- Chart + sidebar layout (auth/vote/countdown in right sidebar)
- DisplaySettings component (font size, chart density, color palettes)
- Adaptive CSS with clamp() throughout, responsive breakpoints at 480/768/1024
- Baseline charts zoomed on first tier for small consumption detail
- Marginal price chart with dual Y-axes (foyers left, €/m³ right)
- Key metrics banner (5 columns: recettes, palier, prix palier, prix médian, mon prix)
- Client-side p0/impacts computation, draggable median price bar
- Household dots toggle, vote overlay curves
- Auth returns volume_m3, vote captures submitted_at
- Cleaned header nav (removed Accueil/Super Admin for public visitors)
- Terminology: foyer for bills, électeur for votes
- 600m³ added to impact reference volumes
- Realistic seed votes (50 votes, 3 profiles)

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

frontend/app/assets/css/main.css

@@ -14,6 +14,7 @@
   --radius: 8px;
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --chart-scale: 1;
 }
 
 * {
@@ -42,15 +43,15 @@ a:hover {
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0 clamp(0.75rem, 3vw, 1.5rem);
 }
 
 .page-header {
-  margin-bottom: 2rem;
+  margin-bottom: clamp(1rem, 3vw, 2rem);
 }
 
 .page-header h1 {
-  font-size: 1.75rem;
+  font-size: clamp(1.25rem, 4vw, 1.75rem);
   font-weight: 700;
 }
 
@@ -59,7 +60,7 @@ a:hover {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
-  padding: 1.5rem;
+  padding: clamp(0.75rem, 3vw, 1.5rem);
   box-shadow: var(--shadow);
 }
 
@@ -71,10 +72,15 @@ a:hover {
   padding: 0.5rem 1rem;
   border: none;
   border-radius: var(--radius);
-  font-size: 0.875rem;
+  font-size: clamp(0.8rem, 2vw, 0.875rem);
   font-weight: 500;
   cursor: pointer;
   transition: all 0.15s;
+  touch-action: manipulation;
+}
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 .btn-primary {
@@ -228,3 +234,19 @@ a:hover {
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
+
+/* ── Responsive table ── */
+@media (max-width: 480px) {
+  .table th, .table td {
+    padding: 0.4rem 0.35rem;
+    font-size: 0.78rem;
+  }
+}
+
+/* ── Touch-friendly form inputs ── */
+@media (max-width: 768px) {
+  .form-input {
+    font-size: 16px; /* Prevents iOS zoom on focus */
+    padding: 0.6rem 0.75rem;
+  }
+}