From 5dc42af33ef229849f39cecf4ecb54d6c807be9f Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Mon, 23 Feb 2026 21:00:22 +0100
Subject: [PATCH] Add interactive citizen page with sidebar, display settings,
 and adaptive CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 ...f9_add_differentiated_tariff_to_tariff_.py |   30 +
 backend/app/engine/current_model.py           |   13 +-
 backend/app/engine/pricing.py                 |   15 +-
 backend/app/models/models.py                  |   11 +
 backend/app/routers/auth.py                   |    1 +
 backend/app/routers/communes.py               |   51 +-
 backend/app/routers/households.py             |   53 +
 backend/app/routers/votes.py                  |   35 +-
 backend/app/schemas/schemas.py                |   20 +
 backend/seed.py                               |   84 +-
 frontend/app/assets/css/main.css              |   32 +-
 frontend/app/components/DisplaySettings.vue   |  281 +++
 .../components/charts/VoteOverlayChart.vue    |   27 +-
 frontend/app/layouts/default.vue              |   48 +-
 .../pages/admin/communes/[slug]/params.vue    |  183 +-
 frontend/app/pages/commune/[slug]/index.vue   | 1627 +++++++++++++----
 frontend/app/pages/login/admin.vue            |    6 +
 frontend/app/pages/login/commune.vue          |    6 +
 frontend/app/utils/bezier-math.ts             |    2 +-
 19 files changed, 2109 insertions(+), 416 deletions(-)
 create mode 100644 backend/alembic/versions/560c6dd532f9_add_differentiated_tariff_to_tariff_.py
 create mode 100644 frontend/app/components/DisplaySettings.vue

diff --git a/backend/alembic/versions/560c6dd532f9_add_differentiated_tariff_to_tariff_.py b/backend/alembic/versions/560c6dd532f9_add_differentiated_tariff_to_tariff_.py
new file mode 100644
index 0000000..75de533
--- /dev/null
+++ b/backend/alembic/versions/560c6dd532f9_add_differentiated_tariff_to_tariff_.py
@@ -0,0 +1,30 @@
+"""add differentiated_tariff to tariff_params
+
+Revision ID: 560c6dd532f9
+Revises: 0d7cc7e3efb9
+Create Date: 2026-02-23 14:00:26.790338
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision: str = '560c6dd532f9'
+down_revision: Union[str, None] = '0d7cc7e3efb9'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('tariff_params', sa.Column('differentiated_tariff', sa.Boolean(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('tariff_params', 'differentiated_tariff')
+    # ### end Alembic commands ###
diff --git a/backend/app/engine/current_model.py b/backend/app/engine/current_model.py
index 3345b3d..426682b 100644
--- a/backend/app/engine/current_model.py
+++ b/backend/app/engine/current_model.py
@@ -56,11 +56,14 @@ def compute_linear_tariff(
     price_m3_rp = abop / vv + p0
     price_m3_rs = abos / vv + p0
 
+    def sanitize(arr):
+        return [0.0 if (x != x or x == float('inf') or x == float('-inf')) else float(x) for x in arr]
+
     return LinearTariffResult(
         p0=p0,
-        curve_volumes=vv.tolist(),
-        curve_bills_rp=bills_rp.tolist(),
-        curve_bills_rs=bills_rs.tolist(),
-        curve_price_m3_rp=price_m3_rp.tolist(),
-        curve_price_m3_rs=price_m3_rs.tolist(),
+        curve_volumes=sanitize(vv),
+        curve_bills_rp=sanitize(bills_rp),
+        curve_bills_rs=sanitize(bills_rs),
+        curve_price_m3_rp=sanitize(price_m3_rp),
+        curve_price_m3_rs=sanitize(price_m3_rs),
     )
diff --git a/backend/app/engine/pricing.py b/backend/app/engine/pricing.py
index 52d456a..dd90571 100644
--- a/backend/app/engine/pricing.py
+++ b/backend/app/engine/pricing.py
@@ -138,13 +138,16 @@ def compute_tariff(
         a1, a2, b2 = compute_integrals(vol, vinf, vmax, pmax, a, b, c, d, e)
         household_bills.append(abo + (a1 + a2) * p0 + b2)
 
+    def sanitize(arr):
+        return [0.0 if (x != x or x == float('inf') or x == float('-inf')) else float(x) for x in arr]
+
     return TariffResult(
         p0=p0,
-        curve_volumes=vv.tolist(),
-        curve_prices_m3=prix_m3.tolist(),
-        curve_bills_rp=bills_rp.tolist(),
-        curve_bills_rs=bills_rs.tolist(),
-        household_bills=household_bills,
+        curve_volumes=sanitize(vv),
+        curve_prices_m3=sanitize(prix_m3),
+        curve_bills_rp=sanitize(bills_rp),
+        curve_bills_rs=sanitize(bills_rs),
+        household_bills=sanitize(household_bills),
     )
 
 
@@ -169,7 +172,7 @@ def compute_impacts(
     Returns (p0, list of ImpactRow).
     """
     if reference_volumes is None:
-        reference_volumes = [30, 60, 90, 150, 300]
+        reference_volumes = [30, 60, 90, 150, 300, 600]
 
     p0 = compute_p0(households, recettes, abop, abos, vinf, vmax, pmax, a, b, c, d, e)
 
diff --git a/backend/app/models/models.py b/backend/app/models/models.py
index a209f52..752e8f1 100644
--- a/backend/app/models/models.py
+++ b/backend/app/models/models.py
@@ -48,9 +48,20 @@ class TariffParams(Base):
     recettes = Column(Float, default=75000.0)
     pmax = Column(Float, default=20.0)
     vmax = Column(Float, default=2100.0)
+    differentiated_tariff = Column(Boolean, default=False)
     data_year = Column(Integer, nullable=True)
     data_imported_at = Column(DateTime, nullable=True)
 
+    # Published Bézier curve (set by admin)
+    published_vinf = Column(Float, nullable=True)
+    published_a = Column(Float, nullable=True)
+    published_b = Column(Float, nullable=True)
+    published_c = Column(Float, nullable=True)
+    published_d = Column(Float, nullable=True)
+    published_e = Column(Float, nullable=True)
+    published_p0 = Column(Float, nullable=True)
+    published_at = Column(DateTime, nullable=True)
+
     commune = relationship("Commune", back_populates="tariff_params")
 
 
diff --git a/backend/app/routers/auth.py b/backend/app/routers/auth.py
index bf8aee8..f2ef6da 100644
--- a/backend/app/routers/auth.py
+++ b/backend/app/routers/auth.py
@@ -51,6 +51,7 @@ async def citizen_verify(data: CitizenVerify, db: AsyncSession = Depends(get_db)
         access_token=create_citizen_token(household, data.commune_slug),
         role="citizen",
         commune_slug=data.commune_slug,
+        volume_m3=household.volume_m3,
     )
 
 
diff --git a/backend/app/routers/communes.py b/backend/app/routers/communes.py
index 302e117..c67d2d2 100644
--- a/backend/app/routers/communes.py
+++ b/backend/app/routers/communes.py
@@ -2,13 +2,16 @@ from fastapi import APIRouter, Depends, HTTPException
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy import select, delete
 
+from datetime import datetime
+
 from app.database import get_db
 from app.models import Commune, TariffParams, Household, Vote, CommuneContent, AdminUser, admin_commune_table
 from app.schemas import (
     CommuneCreate, CommuneUpdate, CommuneOut,
-    TariffParamsUpdate, TariffParamsOut,
+    TariffParamsUpdate, TariffParamsOut, PublishCurveRequest,
 )
 from app.services.auth_service import get_current_admin, require_super_admin
+from app.engine.pricing import HouseholdData, compute_p0
 
 router = APIRouter()
 
@@ -128,3 +131,49 @@ async def update_params(
     await db.commit()
     await db.refresh(params)
     return params
+
+
+@router.post("/{slug}/params/publish", response_model=TariffParamsOut)
+async def publish_curve(
+    slug: str,
+    data: PublishCurveRequest,
+    db: AsyncSession = Depends(get_db),
+    admin: AdminUser = Depends(get_current_admin),
+):
+    """Admin publishes a Bézier curve as the commune's reference."""
+    result = await db.execute(
+        select(TariffParams).join(Commune).where(Commune.slug == slug)
+    )
+    params = result.scalar_one_or_none()
+    if not params:
+        raise HTTPException(status_code=404, detail="Paramètres introuvables")
+
+    # Compute p0 for this curve
+    hh_result = await db.execute(
+        select(Household).join(Commune).where(Commune.slug == slug)
+    )
+    households_db = hh_result.scalars().all()
+    households = [
+        HouseholdData(volume_m3=h.volume_m3, status=h.status, price_paid_eur=h.price_paid_eur)
+        for h in households_db
+    ]
+
+    p0 = compute_p0(
+        households,
+        recettes=params.recettes, abop=params.abop, abos=params.abos,
+        vinf=data.vinf, vmax=params.vmax, pmax=params.pmax,
+        a=data.a, b=data.b, c=data.c, d=data.d, e=data.e,
+    )
+
+    params.published_vinf = data.vinf
+    params.published_a = data.a
+    params.published_b = data.b
+    params.published_c = data.c
+    params.published_d = data.d
+    params.published_e = data.e
+    params.published_p0 = p0
+    params.published_at = datetime.utcnow()
+
+    await db.commit()
+    await db.refresh(params)
+    return params
diff --git a/backend/app/routers/households.py b/backend/app/routers/households.py
index 0c3d081..bbd45f5 100644
--- a/backend/app/routers/households.py
+++ b/backend/app/routers/households.py
@@ -16,6 +16,59 @@ from app.services.import_service import parse_import_file, import_households, ge
 router = APIRouter()
 
 
+@router.get("/communes/{slug}/households/distribution")
+async def household_distribution(
+    slug: str,
+    bucket_size: int = 50,
+    db: AsyncSession = Depends(get_db),
+):
+    """Public: returns consumption distribution as histogram buckets."""
+    result = await db.execute(select(Commune).where(Commune.slug == slug))
+    commune = result.scalar_one_or_none()
+    if not commune:
+        raise HTTPException(status_code=404, detail="Commune introuvable")
+
+    hh_result = await db.execute(
+        select(Household).where(Household.commune_id == commune.id)
+    )
+    households = hh_result.scalars().all()
+
+    if not households:
+        return {"buckets": [], "total": 0, "bucket_size": bucket_size}
+
+    volumes = [h.volume_m3 for h in households]
+    max_vol = max(volumes)
+    num_buckets = int(max_vol // bucket_size) + 1
+
+    buckets = []
+    for i in range(num_buckets):
+        low = i * bucket_size
+        high = (i + 1) * bucket_size
+        count = sum(1 for v in volumes if low <= v < high)
+        if count > 0 or i < num_buckets:
+            buckets.append({"low": low, "high": high, "count": count})
+
+    return {"buckets": buckets, "total": len(households), "bucket_size": bucket_size}
+
+
+@router.get("/communes/{slug}/households/volumes")
+async def household_volumes(
+    slug: str,
+    db: AsyncSession = Depends(get_db),
+):
+    """Public: returns anonymous list of household volumes and statuses for chart display."""
+    result = await db.execute(select(Commune).where(Commune.slug == slug))
+    commune = result.scalar_one_or_none()
+    if not commune:
+        raise HTTPException(status_code=404, detail="Commune introuvable")
+
+    hh_result = await db.execute(
+        select(Household.volume_m3, Household.status).where(Household.commune_id == commune.id)
+    )
+    rows = hh_result.all()
+    return [{"volume_m3": r.volume_m3, "status": r.status} for r in rows]
+
+
 @router.get("/communes/{slug}/households/template")
 async def download_template():
     content = generate_template_csv()
diff --git a/backend/app/routers/votes.py b/backend/app/routers/votes.py
index af20998..0a0a13e 100644
--- a/backend/app/routers/votes.py
+++ b/backend/app/routers/votes.py
@@ -103,29 +103,47 @@ async def current_curve(slug: str, db: AsyncSession = Depends(get_db)):
     )
     votes = result.scalars().all()
 
+    # Published curve from admin (if any)
+    published = None
+    if params.published_vinf is not None:
+        published = {
+            "vinf": params.published_vinf,
+            "a": params.published_a,
+            "b": params.published_b,
+            "c": params.published_c,
+            "d": params.published_d,
+            "e": params.published_e,
+            "p0": params.published_p0,
+        }
+
     if not votes:
-        # Return default Bézier curve (a=b=c=d=e=0.5, vinf=vmax/2)
-        default_vinf = params.vmax / 2
+        # Use published curve if available, otherwise default
+        if published:
+            dv, da, db_, dc, dd, de = published["vinf"], published["a"], published["b"], published["c"], published["d"], published["e"]
+        else:
+            dv, da, db_, dc, dd, de = 400, 0.5, 0.5, 0.5, 0.5, 0.5
+
         default_tariff = compute_tariff(
             households,
             recettes=params.recettes, abop=params.abop, abos=params.abos,
-            vinf=default_vinf, vmax=params.vmax, pmax=params.pmax,
-            a=0.5, b=0.5, c=0.5, d=0.5, e=0.5,
+            vinf=dv, vmax=params.vmax, pmax=params.pmax,
+            a=da, b=db_, c=dc, d=dd, e=de,
         )
         _, default_impacts = compute_impacts(
             households,
             recettes=params.recettes, abop=params.abop, abos=params.abos,
-            vinf=default_vinf, vmax=params.vmax, pmax=params.pmax,
-            a=0.5, b=0.5, c=0.5, d=0.5, e=0.5,
+            vinf=dv, vmax=params.vmax, pmax=params.pmax,
+            a=da, b=db_, c=dc, d=dd, e=de,
         )
 
         return {
             "has_votes": False,
             "vote_count": 0,
             "params": tariff_params,
+            "published": published,
             "median": {
-                "vinf": default_vinf, "a": 0.5, "b": 0.5,
-                "c": 0.5, "d": 0.5, "e": 0.5,
+                "vinf": dv, "a": da, "b": db_,
+                "c": dc, "d": dd, "e": de,
             },
             "p0": default_tariff.p0,
             "curve_volumes": default_tariff.curve_volumes,
@@ -166,6 +184,7 @@ async def current_curve(slug: str, db: AsyncSession = Depends(get_db)):
         "has_votes": True,
         "vote_count": len(votes),
         "params": tariff_params,
+        "published": published,
         "median": {
             "vinf": median.vinf,
             "a": median.a,
diff --git a/backend/app/schemas/schemas.py b/backend/app/schemas/schemas.py
index c6a3509..5fff110 100644
--- a/backend/app/schemas/schemas.py
+++ b/backend/app/schemas/schemas.py
@@ -21,6 +21,7 @@ class Token(BaseModel):
     token_type: str = "bearer"
     role: str
     commune_slug: str | None = None
+    volume_m3: float | None = None
 
 
 # ── Commune ──
@@ -58,6 +59,7 @@ class TariffParamsUpdate(BaseModel):
     recettes: float | None = None
     pmax: float | None = None
     vmax: float | None = None
+    differentiated_tariff: bool | None = None
     data_year: int | None = None
 
 
@@ -67,12 +69,30 @@ class TariffParamsOut(BaseModel):
     recettes: float
     pmax: float
     vmax: float
+    differentiated_tariff: bool = False
     data_year: int | None = None
     data_imported_at: datetime | None = None
+    published_vinf: float | None = None
+    published_a: float | None = None
+    published_b: float | None = None
+    published_c: float | None = None
+    published_d: float | None = None
+    published_e: float | None = None
+    published_p0: float | None = None
+    published_at: datetime | None = None
 
     model_config = {"from_attributes": True}
 
 
+class PublishCurveRequest(BaseModel):
+    vinf: float = Field(ge=0)
+    a: float = Field(ge=0, le=1)
+    b: float = Field(ge=0, le=1)
+    c: float = Field(ge=0, le=1)
+    d: float = Field(ge=0, le=1)
+    e: float = Field(ge=0, le=1)
+
+
 # ── Household ──
 
 class HouseholdOut(BaseModel):
diff --git a/backend/seed.py b/backend/seed.py
index c52a6be..d67cd82 100644
--- a/backend/seed.py
+++ b/backend/seed.py
@@ -3,6 +3,7 @@
 import asyncio
 import sys
 import os
+import random
 from datetime import datetime
 
 sys.path.insert(0, os.path.dirname(__file__))
@@ -11,9 +12,10 @@ import xlrd
 from sqlalchemy import select
 
 from app.database import engine, async_session, init_db
-from app.models import Commune, TariffParams, Household, AdminUser
+from app.models import Commune, TariffParams, Household, AdminUser, Vote
 from app.services.auth_service import hash_password
 from app.services.import_service import generate_auth_code
+from app.engine.pricing import HouseholdData, compute_p0
 
 XLS_PATH = os.path.join(os.path.dirname(__file__), "..", "Eau2018.xls")
 
@@ -45,6 +47,7 @@ async def seed():
             recettes=75000,
             pmax=20,
             vmax=2100,
+            differentiated_tariff=False,
             data_year=2018,
             data_imported_at=datetime.utcnow(),
         )
@@ -96,10 +99,85 @@ async def seed():
             )
             db.add(household)
 
+        await db.flush()
+
+        # ── Publish a reference curve ──
+        # Reference: vinf=400, all params=0.5
+        ref_vinf, ref_a, ref_b, ref_c, ref_d, ref_e = 400, 0.5, 0.5, 0.5, 0.5, 0.5
+
+        hh_result = await db.execute(
+            select(Household).where(Household.commune_id == commune.id)
+        )
+        all_households = hh_result.scalars().all()
+        hh_data = [
+            HouseholdData(volume_m3=h.volume_m3, status=h.status, price_paid_eur=h.price_paid_eur)
+            for h in all_households
+        ]
+
+        ref_p0 = compute_p0(
+            hh_data,
+            recettes=params.recettes, abop=params.abop, abos=params.abos,
+            vinf=ref_vinf, vmax=params.vmax, pmax=params.pmax,
+            a=ref_a, b=ref_b, c=ref_c, d=ref_d, e=ref_e,
+        )
+        params.published_vinf = ref_vinf
+        params.published_a = ref_a
+        params.published_b = ref_b
+        params.published_c = ref_c
+        params.published_d = ref_d
+        params.published_e = ref_e
+        params.published_p0 = ref_p0
+        params.published_at = datetime.utcnow()
+
+        # ── Generate 10 votes, small variations around the reference ──
+        random.seed(42)
+
+        vote_profiles = [
+            # 5 votes slightly below reference (eco-leaning)
+            {"vinf": 350, "a": 0.45, "b": 0.48, "c": 0.40, "d": 0.52, "e": 0.55},
+            {"vinf": 370, "a": 0.42, "b": 0.50, "c": 0.45, "d": 0.48, "e": 0.52},
+            {"vinf": 380, "a": 0.48, "b": 0.45, "c": 0.42, "d": 0.50, "e": 0.58},
+            {"vinf": 360, "a": 0.50, "b": 0.52, "c": 0.38, "d": 0.55, "e": 0.50},
+            {"vinf": 390, "a": 0.47, "b": 0.47, "c": 0.48, "d": 0.46, "e": 0.53},
+            # 5 votes slightly above reference (lax-leaning)
+            {"vinf": 420, "a": 0.52, "b": 0.50, "c": 0.55, "d": 0.48, "e": 0.45},
+            {"vinf": 440, "a": 0.55, "b": 0.53, "c": 0.52, "d": 0.50, "e": 0.42},
+            {"vinf": 430, "a": 0.50, "b": 0.55, "c": 0.58, "d": 0.45, "e": 0.48},
+            {"vinf": 410, "a": 0.53, "b": 0.48, "c": 0.50, "d": 0.52, "e": 0.47},
+            {"vinf": 450, "a": 0.48, "b": 0.52, "c": 0.60, "d": 0.42, "e": 0.40},
+        ]
+
+        used_households = set()
+        vote_count = 0
+        for prof in vote_profiles:
+            # Pick a unique household
+            hh_pick = random.choice(all_households)
+            while hh_pick.id in used_households:
+                hh_pick = random.choice(all_households)
+            used_households.add(hh_pick.id)
+
+            vp0 = compute_p0(
+                hh_data,
+                recettes=params.recettes, abop=params.abop, abos=params.abos,
+                vinf=prof["vinf"], vmax=params.vmax, pmax=params.pmax,
+                a=prof["a"], b=prof["b"], c=prof["c"], d=prof["d"], e=prof["e"],
+            )
+            vote = Vote(
+                commune_id=commune.id,
+                household_id=hh_pick.id,
+                vinf=prof["vinf"],
+                a=prof["a"], b=prof["b"], c=prof["c"], d=prof["d"], e=prof["e"],
+                computed_p0=vp0,
+            )
+            db.add(vote)
+            hh_pick.has_voted = True
+            vote_count += 1
+
         await db.commit()
-        print(f"Seeded: commune 'saou', {nb_hab} households")
+        print(f"Seeded: commune 'saou', {nb_hab} households, {vote_count} votes")
+        print(f"  Published curve: vinf={ref_vinf}, p0={ref_p0:.3f}")
         print(f"  Super admin: superadmin@sejeteralo.fr / superadmin")
-        print(f"  Commune admin Saoû: saou@sejeteralo.fr / saou2024")
+        print(f"  Commune admin Saou: saou@sejeteralo.fr / saou2024")
 
 
 if __name__ == "__main__":
diff --git a/frontend/app/assets/css/main.css b/frontend/app/assets/css/main.css
index a1e51ca..f95acdc 100644
--- a/frontend/app/assets/css/main.css
+++ b/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;
+  }
+}
diff --git a/frontend/app/components/DisplaySettings.vue b/frontend/app/components/DisplaySettings.vue
new file mode 100644
index 0000000..6316cb1
--- /dev/null
+++ b/frontend/app/components/DisplaySettings.vue
@@ -0,0 +1,281 @@
+<template>
+  <div class="ds-selector" ref="selectorRef">
+    <button class="ds-trigger" aria-label="Réglages d'affichage" @click="isOpen = !isOpen">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+      </svg>
+    </button>
+
+    <Transition name="ds-drop">
+      <div v-if="isOpen" class="ds-dropdown">
+        <h4 class="ds-title">Affichage</h4>
+
+        <!-- Font size -->
+        <div class="ds-section">
+          <span class="ds-label">Taille texte</span>
+          <div class="ds-toggle-group">
+            <button v-for="s in fontSizes" :key="s.value"
+              class="ds-toggle" :class="{ 'ds-toggle--active': currentFontSize === s.value }"
+              @click="setFontSize(s.value)">
+              {{ s.label }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Chart density -->
+        <div class="ds-section">
+          <span class="ds-label">Densite graphiques</span>
+          <div class="ds-toggle-group">
+            <button v-for="d in densities" :key="d.value"
+              class="ds-toggle" :class="{ 'ds-toggle--active': currentDensity === d.value }"
+              @click="setDensity(d.value)">
+              {{ d.label }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Palette -->
+        <div class="ds-section">
+          <span class="ds-label">Ambiance</span>
+          <div class="ds-palette-grid">
+            <button v-for="p in palettes" :key="p.name"
+              class="ds-palette-btn" :class="{ 'ds-palette-btn--active': currentPalette === p.name }"
+              @click="setPalette(p.name)">
+              <span class="ds-palette-dots">
+                <span class="ds-dot" :style="{ background: p.primary }"></span>
+                <span class="ds-dot" :style="{ background: p.accent }"></span>
+              </span>
+              <span class="ds-palette-name">{{ p.label }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+const selectorRef = ref<HTMLElement>()
+const isOpen = ref(false)
+
+// ── Font size ──
+const fontSizes = [
+  { label: 'A-', value: 'small' },
+  { label: 'A', value: 'normal' },
+  { label: 'A+', value: 'large' },
+]
+const currentFontSize = ref('normal')
+
+function setFontSize(size: string) {
+  currentFontSize.value = size
+  if (import.meta.client) {
+    localStorage.setItem('sej-fontSize', size)
+    const map: Record<string, string> = { small: '14px', normal: '16px', large: '18px' }
+    document.documentElement.style.fontSize = map[size] || '16px'
+  }
+}
+
+// ── Chart density ──
+const densities = [
+  { label: 'Compact', value: 'compact' },
+  { label: 'Normal', value: 'normal' },
+  { label: 'Large', value: 'large' },
+]
+const currentDensity = ref('normal')
+
+function setDensity(d: string) {
+  currentDensity.value = d
+  if (import.meta.client) {
+    localStorage.setItem('sej-density', d)
+    const map: Record<string, string> = { compact: '0.85', normal: '1', large: '1.15' }
+    document.documentElement.style.setProperty('--chart-scale', map[d] || '1')
+  }
+}
+
+// ── Palette (color ambiance) ──
+const palettes = [
+  { name: 'eau', label: 'Eau', primary: '#2563eb', accent: '#059669' },
+  { name: 'terre', label: 'Terre', primary: '#92400e', accent: '#d97706' },
+  { name: 'foret', label: 'Foret', primary: '#166534', accent: '#65a30d' },
+  { name: 'ardoise', label: 'Ardoise', primary: '#475569', accent: '#64748b' },
+]
+const currentPalette = ref('eau')
+
+function setPalette(name: string) {
+  currentPalette.value = name
+  const p = palettes.find(x => x.name === name)
+  if (!p || !import.meta.client) return
+  localStorage.setItem('sej-palette', name)
+  const root = document.documentElement.style
+  root.setProperty('--color-primary', p.primary)
+  root.setProperty('--color-primary-dark', darken(p.primary))
+  root.setProperty('--color-secondary', p.accent)
+}
+
+function darken(hex: string): string {
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+  const f = 0.82
+  return `#${Math.round(r * f).toString(16).padStart(2, '0')}${Math.round(g * f).toString(16).padStart(2, '0')}${Math.round(b * f).toString(16).padStart(2, '0')}`
+}
+
+// ── Init from localStorage ──
+onMounted(() => {
+  if (!import.meta.client) return
+  const savedFont = localStorage.getItem('sej-fontSize')
+  if (savedFont) setFontSize(savedFont)
+  const savedDensity = localStorage.getItem('sej-density')
+  if (savedDensity) setDensity(savedDensity)
+  const savedPalette = localStorage.getItem('sej-palette')
+  if (savedPalette) setPalette(savedPalette)
+})
+
+// ── Click outside to close ──
+function onClickOutside(e: MouseEvent) {
+  if (selectorRef.value && !selectorRef.value.contains(e.target as Node)) {
+    isOpen.value = false
+  }
+}
+onMounted(() => document.addEventListener('click', onClickOutside))
+onUnmounted(() => document.removeEventListener('click', onClickOutside))
+</script>
+
+<style scoped>
+.ds-selector { position: relative; }
+
+.ds-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 6px;
+  color: var(--color-text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.ds-trigger:hover {
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+
+.ds-dropdown {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  width: 240px;
+  padding: 0.75rem;
+  border-radius: 10px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  z-index: 100;
+}
+
+.ds-title {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+.ds-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.ds-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.ds-toggle-group {
+  display: flex;
+  gap: 0.2rem;
+  background: var(--color-bg);
+  border-radius: 6px;
+  padding: 2px;
+}
+
+.ds-toggle {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.3rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.ds-toggle:hover { color: var(--color-text); }
+.ds-toggle--active {
+  background: var(--color-primary);
+  color: white;
+  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
+}
+
+.ds-palette-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.3rem;
+}
+
+.ds-palette-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.35rem 0.4rem;
+  border-radius: 6px;
+  background: var(--color-bg);
+  border: 1.5px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.ds-palette-btn:hover { border-color: var(--color-border); }
+.ds-palette-btn--active {
+  border-color: var(--color-primary);
+  background: white;
+}
+
+.ds-palette-dots {
+  display: flex;
+  gap: 2px;
+}
+.ds-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+}
+
+.ds-palette-name {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+/* Transition */
+.ds-drop-enter-active { transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
+.ds-drop-leave-active { transition: all 0.12s ease; }
+.ds-drop-enter-from, .ds-drop-leave-to {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.96);
+}
+</style>
diff --git a/frontend/app/components/charts/VoteOverlayChart.vue b/frontend/app/components/charts/VoteOverlayChart.vue
index 77cff19..31bef46 100644
--- a/frontend/app/components/charts/VoteOverlayChart.vue
+++ b/frontend/app/components/charts/VoteOverlayChart.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="overlay-chart">
     <svg :viewBox="`0 0 ${svgW} ${svgH}`" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <clipPath id="overlay-clip">
+          <rect :x="margin.left" :y="margin.top" :width="plotW" :height="plotH" />
+        </clipPath>
+      </defs>
+
       <!-- Grid -->
       <g>
         <line
@@ -17,16 +23,19 @@
         />
       </g>
 
-      <!-- Vote curves (semi-transparent) -->
-      <g v-for="(vote, i) in votes" :key="i">
-        <path :d="getVotePath(vote, 1)" fill="none" stroke="#3b82f6" stroke-width="1.5" opacity="0.4" />
-        <path :d="getVotePath(vote, 2)" fill="none" stroke="#ef4444" stroke-width="1.5" opacity="0.4" />
-      </g>
+      <!-- Clipped curves -->
+      <g clip-path="url(#overlay-clip)">
+        <!-- Vote curves (semi-transparent) -->
+        <g v-for="(vote, i) in votes" :key="i">
+          <path :d="getVotePath(vote, 1)" fill="none" stroke="#3b82f6" stroke-width="1.5" opacity="0.4" />
+          <path :d="getVotePath(vote, 2)" fill="none" stroke="#ef4444" stroke-width="1.5" opacity="0.4" />
+        </g>
 
-      <!-- Median curve (if available) -->
-      <g v-if="medianVote">
-        <path :d="getVotePath(medianVote, 1)" fill="none" stroke="#1e40af" stroke-width="4" />
-        <path :d="getVotePath(medianVote, 2)" fill="none" stroke="#991b1b" stroke-width="4" />
+        <!-- Median curve (if available) -->
+        <g v-if="medianVote">
+          <path :d="getVotePath(medianVote, 1)" fill="none" stroke="#1e40af" stroke-width="4" />
+          <path :d="getVotePath(medianVote, 2)" fill="none" stroke="#991b1b" stroke-width="4" />
+        </g>
       </g>
 
       <!-- Axis labels -->
diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 7f19920..df83c0a 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -3,19 +3,26 @@
     <header class="app-header">
       <div class="container header-inner">
         <NuxtLink to="/" class="logo">SejeteralO</NuxtLink>
-        <nav class="header-nav">
-          <NuxtLink to="/">Accueil</NuxtLink>
-          <template v-if="authStore.isAuthenticated">
-            <NuxtLink v-if="authStore.isSuperAdmin" to="/admin">Super Admin</NuxtLink>
+        <div class="header-right">
+          <template v-if="authStore.isAuthenticated && authStore.isAdmin">
             <NuxtLink
-              v-else-if="authStore.isAdmin && authStore.communeSlug"
+              v-if="authStore.isSuperAdmin"
+              to="/admin"
+              class="header-link"
+            >
+              Administration
+            </NuxtLink>
+            <NuxtLink
+              v-else-if="authStore.communeSlug"
               :to="`/admin/communes/${authStore.communeSlug}`"
+              class="header-link"
             >
               Gestion commune
             </NuxtLink>
-            <button class="btn btn-secondary btn-sm" @click="logout">Déconnexion</button>
+            <button class="btn btn-secondary btn-sm" @click="logout">Deconnexion</button>
           </template>
-        </nav>
+          <DisplaySettings />
+        </div>
       </div>
     </header>
     <main class="app-main container">
@@ -23,7 +30,7 @@
     </main>
     <footer class="app-footer">
       <div class="container">
-        SejeteralO — Outil de démocratie participative pour la tarification de l'eau
+        SejeteralO — Outil de democratie participative pour la tarification de l'eau
       </div>
     </footer>
   </div>
@@ -50,6 +57,9 @@ function logout() {
   background: var(--color-surface);
   border-bottom: 1px solid var(--color-border);
   padding: 0.75rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 40;
 }
 
 .header-inner {
@@ -59,21 +69,25 @@ function logout() {
 }
 
 .logo {
-  font-size: 1.25rem;
+  font-size: clamp(1.05rem, 3vw, 1.25rem);
   font-weight: 700;
   color: var(--color-primary);
 }
+.logo:hover { text-decoration: none; }
 
-.logo:hover {
-  text-decoration: none;
-}
-
-.header-nav {
+.header-right {
   display: flex;
   align-items: center;
-  gap: 1.5rem;
+  gap: clamp(0.5rem, 2vw, 1rem);
 }
 
+.header-link {
+  font-size: clamp(0.75rem, 2vw, 0.85rem);
+  white-space: nowrap;
+  color: var(--color-text-muted);
+}
+.header-link:hover { color: var(--color-primary); text-decoration: none; }
+
 .btn-sm {
   padding: 0.25rem 0.75rem;
   font-size: 0.8rem;
@@ -81,8 +95,8 @@ function logout() {
 
 .app-main {
   flex: 1;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  padding-top: clamp(1rem, 3vw, 2rem);
+  padding-bottom: clamp(1rem, 3vw, 2rem);
 }
 
 .app-footer {
diff --git a/frontend/app/pages/admin/communes/[slug]/params.vue b/frontend/app/pages/admin/communes/[slug]/params.vue
index 6a3cabc..5cf518a 100644
--- a/frontend/app/pages/admin/communes/[slug]/params.vue
+++ b/frontend/app/pages/admin/communes/[slug]/params.vue
@@ -2,35 +2,43 @@
   <div>
     <div class="page-header">
       <NuxtLink :to="`/admin/communes/${slug}`" style="color: var(--color-text-muted);">&larr; {{ slug }}</NuxtLink>
-      <h1>Paramètres tarifs</h1>
+      <h1>Parametres tarifs</h1>
     </div>
 
-    <div v-if="saved" class="alert alert-success">Paramètres enregistrés.</div>
+    <div v-if="saved" class="alert alert-success">Parametres enregistres.</div>
+    <div v-if="published" class="alert alert-success">Courbe publiee avec succes (p0 = {{ publishedP0.toFixed(3) }} €/m3).</div>
     <div v-if="error" class="alert alert-error">{{ error }}</div>
 
-    <div class="card" style="max-width: 600px;">
+    <div class="card" style="max-width: 600px; margin-bottom: 1.5rem;">
       <form @submit.prevent="save">
         <div class="form-group">
           <label>Recettes cibles (€)</label>
           <input v-model.number="form.recettes" type="number" class="form-input" step="1000" min="0" />
         </div>
-        <div class="grid grid-2">
-          <div class="form-group">
-            <label>Abonnement RP/PRO (€)</label>
-            <input v-model.number="form.abop" type="number" class="form-input" step="1" min="0" />
-          </div>
-          <div class="form-group">
-            <label>Abonnement RS (€)</label>
-            <input v-model.number="form.abos" type="number" class="form-input" step="1" min="0" />
-          </div>
+        <div class="form-group">
+          <label>Abonnement (€)</label>
+          <input v-model.number="form.abop" type="number" class="form-input" step="1" min="0" />
+        </div>
+        <div class="form-group" style="margin-bottom: 1rem;">
+          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+            <input type="checkbox" v-model="form.differentiated_tariff" />
+            Tarif differencie RS / RP / PRO
+          </label>
+          <p style="font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem;">
+            Si coche, un abonnement different est applique aux residences secondaires (RS).
+          </p>
+        </div>
+        <div v-if="form.differentiated_tariff" class="form-group">
+          <label>Abonnement RS (€)</label>
+          <input v-model.number="form.abos" type="number" class="form-input" step="1" min="0" />
         </div>
         <div class="grid grid-2">
           <div class="form-group">
-            <label>Prix max/m³ (€)</label>
+            <label>Prix max/m3 (€)</label>
             <input v-model.number="form.pmax" type="number" class="form-input" step="0.5" min="0" />
           </div>
           <div class="form-group">
-            <label>Volume max (m³)</label>
+            <label>Volume max (m3)</label>
             <input v-model.number="form.vmax" type="number" class="form-input" step="100" min="0" />
           </div>
         </div>
@@ -39,6 +47,58 @@
         </button>
       </form>
     </div>
+
+    <!-- ══════════════════════════════════════════════
+         COURBE DE REFERENCE — Editeur + Publier
+         ══════════════════════════════════════════════ -->
+    <div class="card" style="margin-bottom: 1.5rem;">
+      <h3 style="margin-bottom: 0.5rem;">Courbe de reference</h3>
+      <p style="font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1rem;">
+        Ajustez les parametres de la courbe Bezier, puis publiez-la. C'est la courbe initiale que les citoyens voient.
+      </p>
+
+      <!-- Curve params sliders -->
+      <div class="curve-params">
+        <div class="slider-group">
+          <label>v<sub>inf</sub> <span class="slider-val">{{ curve.vinf.toFixed(0) }} m3</span></label>
+          <input type="range" v-model.number="curve.vinf" :min="50" :max="form.vmax - 100" step="10" class="slider" />
+        </div>
+        <div class="slider-group">
+          <label>a <span class="slider-val">{{ curve.a.toFixed(2) }}</span></label>
+          <input type="range" v-model.number="curve.a" min="0" max="1" step="0.01" class="slider" />
+        </div>
+        <div class="slider-group">
+          <label>b <span class="slider-val">{{ curve.b.toFixed(2) }}</span></label>
+          <input type="range" v-model.number="curve.b" min="0" max="1" step="0.01" class="slider" />
+        </div>
+        <div class="slider-group">
+          <label>c <span class="slider-val">{{ curve.c.toFixed(2) }}</span></label>
+          <input type="range" v-model.number="curve.c" min="0" max="1" step="0.01" class="slider" />
+        </div>
+        <div class="slider-group">
+          <label>d <span class="slider-val">{{ curve.d.toFixed(2) }}</span></label>
+          <input type="range" v-model.number="curve.d" min="0" max="1" step="0.01" class="slider" />
+        </div>
+        <div class="slider-group">
+          <label>e <span class="slider-val">{{ curve.e.toFixed(2) }}</span></label>
+          <input type="range" v-model.number="curve.e" min="0" max="1" step="0.01" class="slider" />
+        </div>
+      </div>
+
+      <p v-if="curveP0 !== null" style="margin: 0.75rem 0; font-size: 0.9rem;">
+        <strong>p0 calcule :</strong> {{ curveP0.toFixed(3) }} €/m3
+      </p>
+
+      <div v-if="currentPublished" style="margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: #eff6ff; border-radius: 6px; font-size: 0.82rem; color: #1e40af;">
+        Courbe actuellement publiee : vinf={{ currentPublished.vinf?.toFixed(0) }}, p0={{ currentPublished.p0?.toFixed(3) }} €/m3
+        <span style="color: #64748b;">({{ currentPublished.at }})</span>
+      </div>
+
+      <button class="btn btn-primary" @click="publishCurve" :disabled="publishing" style="background: #059669;">
+        <span v-if="publishing">Publication...</span>
+        <span v-else>Publier la courbe</span>
+      </button>
+    </div>
   </div>
 </template>
 
@@ -49,15 +109,56 @@ const route = useRoute()
 const api = useApi()
 const slug = route.params.slug as string
 
-const form = reactive({ recettes: 75000, abop: 100, abos: 100, pmax: 20, vmax: 2100 })
+const form = reactive({ recettes: 75000, abop: 100, abos: 100, pmax: 20, vmax: 2100, differentiated_tariff: false })
+const curve = reactive({ vinf: 400, a: 0.5, b: 0.5, c: 0.5, d: 0.5, e: 0.5 })
 const loading = ref(false)
 const saved = ref(false)
+const published = ref(false)
+const publishing = ref(false)
 const error = ref('')
+const curveP0 = ref<number | null>(null)
+const publishedP0 = ref(0)
+const currentPublished = ref<{ vinf: number; p0: number; at: string } | null>(null)
+
+let computeTimeout: ReturnType<typeof setTimeout> | null = null
+
+watch(curve, () => {
+  if (computeTimeout) clearTimeout(computeTimeout)
+  computeTimeout = setTimeout(async () => {
+    try {
+      const result = await api.post<any>('/tariff/compute', {
+        commune_slug: slug, vinf: curve.vinf,
+        a: curve.a, b: curve.b, c: curve.c, d: curve.d, e: curve.e,
+      })
+      curveP0.value = result.p0
+    } catch {}
+  }, 200)
+}, { deep: true })
 
 onMounted(async () => {
   try {
-    const params = await api.get<typeof form>(`/communes/${slug}/params`)
+    const params = await api.get<any>(`/communes/${slug}/params`)
     Object.assign(form, params)
+    // Load published curve if exists
+    if (params.published_vinf != null) {
+      curve.vinf = params.published_vinf
+      curve.a = params.published_a
+      curve.b = params.published_b
+      curve.c = params.published_c
+      curve.d = params.published_d
+      curve.e = params.published_e
+      currentPublished.value = {
+        vinf: params.published_vinf,
+        p0: params.published_p0,
+        at: new Date(params.published_at).toLocaleDateString('fr-FR'),
+      }
+    }
+    // Trigger initial p0 compute
+    const result = await api.post<any>('/tariff/compute', {
+      commune_slug: slug, vinf: curve.vinf,
+      a: curve.a, b: curve.b, c: curve.c, d: curve.d, e: curve.e,
+    })
+    curveP0.value = result.p0
   } catch {}
 })
 
@@ -74,4 +175,54 @@ async function save() {
     loading.value = false
   }
 }
+
+async function publishCurve() {
+  publishing.value = true
+  published.value = false
+  error.value = ''
+  try {
+    const result = await api.post<any>(`/communes/${slug}/params/publish`, {
+      vinf: curve.vinf, a: curve.a, b: curve.b,
+      c: curve.c, d: curve.d, e: curve.e,
+    })
+    publishedP0.value = result.published_p0
+    published.value = true
+    currentPublished.value = {
+      vinf: result.published_vinf,
+      p0: result.published_p0,
+      at: new Date(result.published_at).toLocaleDateString('fr-FR'),
+    }
+  } catch (e: any) {
+    error.value = e.message
+  } finally {
+    publishing.value = false
+  }
+}
 </script>
+
+<style scoped>
+.curve-params {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem 1.5rem;
+  margin-bottom: 0.75rem;
+}
+@media (max-width: 600px) { .curve-params { grid-template-columns: 1fr; } }
+
+.slider-group label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.82rem;
+  font-weight: 500;
+  margin-bottom: 0.2rem;
+}
+.slider-val {
+  font-family: monospace;
+  color: var(--color-primary, #2563eb);
+  font-weight: 600;
+}
+.slider {
+  width: 100%;
+  accent-color: #2563eb;
+}
+</style>
diff --git a/frontend/app/pages/commune/[slug]/index.vue b/frontend/app/pages/commune/[slug]/index.vue
index aae4e5b..9fb794b 100644
--- a/frontend/app/pages/commune/[slug]/index.vue
+++ b/frontend/app/pages/commune/[slug]/index.vue
@@ -16,41 +16,62 @@
     <template v-else-if="curveData">
 
       <!-- ═══════════════════════════════════════════════════════
-           2. COURBE INTERACTIVE — Position dominante, pleine largeur
+           COURBE INTERACTIVE + SIDEBAR AUTH/VOTE
            ═══════════════════════════════════════════════════════ -->
-      <div class="card" style="margin-bottom: 1.5rem;">
-        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem;">
-          <h3>Tarification progressive — Prix au m<sup>3</sup></h3>
-          <div style="display: flex; gap: 0.5rem; align-items: center;">
-            <label class="toggle-label">
-              <input type="checkbox" v-model="showOutliers" />
-              Courbes des votes
-            </label>
-            <span v-if="curveData.has_votes" class="badge badge-green">
-              {{ curveData.vote_count }} vote(s)
-            </span>
-            <span v-else class="badge badge-amber">Courbe par defaut</span>
-          </div>
-        </div>
-        <p style="font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.5rem;">
-          Deplacez les poignees pour ajuster la courbe.
-          p<sub>0</sub> s'equilibre automatiquement.
-        </p>
+      <div class="main-layout">
+        <!-- ── LEFT: interactive chart ── -->
+        <div class="main-layout-chart">
+          <div class="chart-card">
+            <div class="chart-header">
+              <div>
+                <h3 class="chart-title">Tarification progressive — Prix au m<sup>3</sup></h3>
+                <p class="chart-subtitle">
+                  Deplacez les poignees pour ajuster la courbe. Le prix au palier s'ajuste pour equilibrer les recettes.
+                  La barre verte indique le prix median — deplacez-la pour changer les recettes cibles.
+                </p>
+                <p v-if="differentiatedTariff" class="chart-subtitle" style="margin-top: 0.15rem; font-style: italic;">
+                  Hors abonnement. L'abonnement differe selon le statut : {{ abop }} € (RP/PRO) / {{ abos }} € (RS).
+                </p>
+              </div>
+              <div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
+                <label class="toggle-label">
+                  <input type="checkbox" v-model="showOutliers" />
+                  Courbes des votes
+                </label>
+                <label class="toggle-label">
+                  <input type="checkbox" v-model="showHouseholds" />
+                  Voir les foyers
+                </label>
+                <span v-if="curveData.has_votes" class="badge badge-green">
+                  {{ curveData.vote_count }} vote(s)
+                </span>
+                <span v-else class="badge badge-amber">Courbe par defaut</span>
+              </div>
+            </div>
 
-        <!-- Zoom controls -->
-        <div class="zoom-bar">
-          <button class="btn btn-secondary btn-xs" @click="zoomPreset('tier1')" title="Zoom population">Population</button>
-          <button class="btn btn-secondary btn-xs" @click="zoomPreset('tier2')" title="Zoom cas exceptionnels">Cas exceptionnels</button>
-          <button class="btn btn-secondary btn-xs" @click="zoomIn">+</button>
-          <button class="btn btn-secondary btn-xs" @click="zoomOut">-</button>
-          <button class="btn btn-secondary btn-xs" @click="zoomReset">Reset</button>
-          <span style="font-size: 0.7rem; color: var(--color-text-muted);">
-            {{ zoomVolMin.toFixed(0) }}-{{ zoomVolMax.toFixed(0) }} m3 / {{ zoomPriceMin.toFixed(1) }}-{{ zoomPriceMax.toFixed(1) }} EUR
-          </span>
-        </div>
+            <!-- Zoom controls + abonnement -->
+            <div class="zoom-bar">
+              <button class="btn btn-secondary btn-xs" @click="zoomPreset('tier1')" title="Zoom population">Population</button>
+              <button class="btn btn-secondary btn-xs" @click="zoomPreset('tier2')" title="Zoom cas exceptionnels">Cas exceptionnels</button>
+              <button class="btn btn-secondary btn-xs" @click="zoomIn">+</button>
+              <button class="btn btn-secondary btn-xs" @click="zoomOut">&minus;</button>
+              <button class="btn btn-secondary btn-xs" @click="zoomReset">Reset</button>
+              <span class="zoom-info">
+                {{ zoomVolMin.toFixed(0) }}–{{ zoomVolMax.toFixed(0) }} m³
+              </span>
+              <span class="zoom-separator"></span>
+              <label class="abo-input-label">
+                Abonnement
+                <input type="number" v-model.number="citizenAbo" min="0" step="10" class="abo-input" /> €
+              </label>
+              <span class="zoom-separator"></span>
+              <span class="zoom-info" style="font-weight: 500; color: #475569;">
+                Recettes : {{ Math.round(recettes).toLocaleString() }} €
+              </span>
+            </div>
 
-        <!-- SVG: full-width, no side panel -->
-        <div class="chart-container">
+        <!-- SVG: full-width, X axis inverted (high vol left, 0 right) -->
+        <div class="chart-container chart-main">
           <svg
             ref="svgRef"
             :viewBox="`0 0 ${W} ${H}`"
@@ -62,163 +83,361 @@
             @touchend="onMouseUp"
             @wheel.prevent="onWheel"
           >
+            <!-- Clip path for plot area -->
+            <defs>
+              <clipPath id="plot-clip">
+                <rect :x="margin.left" :y="margin.top" :width="plotW" :height="plotH" />
+              </clipPath>
+            </defs>
+
+            <!-- Background -->
+            <rect :x="margin.left" :y="margin.top" :width="plotW" :height="plotH"
+              fill="#f8fafc" rx="4" />
+
             <!-- Grid -->
             <g>
               <line v-for="v in gridVols" :key="'gv'+v"
-                :x1="cx(v)" :y1="cy(0)" :x2="cx(v)" :y2="cy(zoomPriceMax)"
+                :x1="cx(v)" :y1="margin.top" :x2="cx(v)" :y2="margin.top + plotH"
                 stroke="#e2e8f0" stroke-width="0.5" />
               <line v-for="p in gridPrices" :key="'gp'+p"
-                :x1="cx(zoomVolMin)" :y1="cy(p)" :x2="cx(zoomVolMax)" :y2="cy(p)"
+                :x1="margin.left" :y1="cy(p)" :x2="margin.left + plotW" :y2="cy(p)"
                 stroke="#e2e8f0" stroke-width="0.5" />
+              <!-- Volume labels (bottom) -->
               <text v-for="v in gridVols" :key="'lv'+v"
-                :x="cx(v)" :y="H - 2" text-anchor="middle" font-size="12" fill="#64748b">
-                {{ v }}
+                :x="cx(v)" :y="margin.top + plotH + 16" text-anchor="middle"
+                class="axis-label">
+                {{ v }} m³
               </text>
+              <!-- Household counts per 30m³ bracket below axis -->
+              <g v-if="distBuckets30.length">
+                <text v-for="bk in visibleBuckets30Main" :key="'hc'+bk.low"
+                  :x="(cx(bk.low) + cx(bk.high)) / 2"
+                  :y="margin.top + plotH + 32"
+                  text-anchor="middle" font-size="9.5" fill="#64748b" font-weight="500">
+                  {{ bk.count }}
+                </text>
+                <text :x="margin.left + plotW + 6" :y="margin.top + plotH + 32"
+                  text-anchor="start" font-size="8.5" fill="#64748b">foyers/30m³</text>
+              </g>
+              <!-- Price labels (RIGHT side, since Y axis is on right at vol=0) -->
               <text v-for="p in gridPrices" :key="'lp'+p"
-                :x="margin.left - 4" :y="cy(p) + 3" text-anchor="end" font-size="12" fill="#64748b">
-                {{ p.toFixed(p < 1 ? 1 : 0) }}
+                :x="margin.left + plotW + 6" :y="cy(p) + 4" text-anchor="start"
+                class="axis-label">
+                {{ p.toFixed(p < 1 ? 1 : 0) }}€
               </text>
-              <text :x="W / 2" :y="H - 0" text-anchor="middle" font-size="12" fill="#475569">
-                volume (m3)
+              <!-- Axis titles -->
+              <text :x="W / 2" :y="margin.top + plotH + 48" text-anchor="middle" class="axis-title">
+                Consommation (m³) → reduire
               </text>
-              <text :x="12" :y="margin.top - 4" font-size="12" fill="#475569">
-                EUR/m3
+              <text :x="W - 4" :y="margin.top - 6" text-anchor="end" class="axis-title">
+                €/m³
               </text>
             </g>
 
-            <!-- Outlier vote curves (semi-transparent) -->
-            <g v-if="showOutliers && outlierVotes.length">
-              <template v-for="(vote, i) in outlierVotes" :key="'ov'+i">
-                <path :d="outlierPath(vote, 1)" fill="none" stroke="#93c5fd" stroke-width="1" opacity="0.25" />
-                <path :d="outlierPath(vote, 2)" fill="none" stroke="#fca5a5" stroke-width="1" opacity="0.25" />
-              </template>
+            <!-- Clipped plot content -->
+            <g clip-path="url(#plot-clip)">
+              <!-- Outlier vote curves (faisceau) -->
+              <g v-if="showOutliers && outlierVotes.length">
+                <template v-for="(vote, i) in outlierVotes" :key="'ov'+i">
+                  <path :d="outlierPath(vote, 1)" fill="none" stroke="#3b82f6" stroke-width="2" opacity="0.45" />
+                  <path :d="outlierPath(vote, 2)" fill="none" stroke="#f87171" stroke-width="2" opacity="0.45" />
+                </template>
+              </g>
+
+              <!-- Tangent lines (control arms) -->
+              <line :x1="cx(cp.p1.x)" :y1="cy(cp.p1.y)" :x2="cx(cp.p2.x)" :y2="cy(cp.p2.y)"
+                stroke="#93c5fd" stroke-width="1" stroke-dasharray="6 3" opacity="0.6" />
+              <line :x1="cx(cp.p3.x)" :y1="cy(cp.p3.y)" :x2="cx(cp.p4.x)" :y2="cy(cp.p4.y)"
+                stroke="#93c5fd" stroke-width="1" stroke-dasharray="6 3" opacity="0.6" />
+              <line :x1="cx(cp.p4.x)" :y1="cy(cp.p4.y)" :x2="cx(cp.p5.x)" :y2="cy(cp.p5.y)"
+                stroke="#fca5a5" stroke-width="1" stroke-dasharray="6 3" opacity="0.6" />
+              <line :x1="cx(cp.p6.x)" :y1="cy(cp.p6.y)" :x2="cx(cp.p7.x)" :y2="cy(cp.p7.y)"
+                stroke="#fca5a5" stroke-width="1" stroke-dasharray="6 3" opacity="0.6" />
+
+              <!-- Prix moyen avec abonnement (abo/v + marginal) — dashed green -->
+              <polyline v-if="citizenAbo > 0" :points="avgPriceWithAboPath" fill="none"
+                stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 4" opacity="0.8" />
+
+              <!-- Bezier curve: population (blue gradient, thick) -->
+              <path :d="tier1Path" fill="none"
+                :stroke="showHouseholds ? '#cbd5e1' : '#2563eb'"
+                :stroke-width="showHouseholds ? 2 : 3.5" stroke-linecap="round" />
+              <!-- Bezier curve: cas exceptionnels (orange) -->
+              <path :d="tier2Path" fill="none"
+                :stroke="showHouseholds ? '#cbd5e1' : '#ea580c'"
+                :stroke-width="showHouseholds ? 2 : 2.5" stroke-linecap="round" />
+
+              <!-- Household dots on curves -->
+              <g v-if="showHouseholds && householdVolumes.length">
+                <circle v-for="(hh, i) in householdDots" :key="'hd'+i"
+                  :cx="cx(hh.volume)" :cy="cy(hh.price)"
+                  r="3.5"
+                  :fill="hh.volume <= bp.vinf ? '#2563eb' : '#ea580c'"
+                  :opacity="0.65"
+                  stroke="white" stroke-width="0.8"
+                />
+              </g>
+
+              <!-- Inflection reference lines -->
+              <line :x1="cx(bp.vinf)" :y1="margin.top + plotH" :x2="cx(bp.vinf)" :y2="cy(localP0)"
+                stroke="#94a3b8" stroke-width="1" stroke-dasharray="4 4" />
+              <line :x1="cx(bp.vinf)" :y1="cy(localP0)" :x2="margin.left + plotW" :y2="cy(localP0)"
+                stroke="#94a3b8" stroke-width="1" stroke-dasharray="4 4" />
+
+              <!-- p0 label (pill style) -->
+              <rect :x="cx(bp.vinf) + 8" :y="cy(localP0) - 18" width="180" height="20" rx="10" fill="white" stroke="#e2e8f0" />
+              <text :x="cx(bp.vinf) + 98" :y="cy(localP0) - 5" text-anchor="middle" font-size="10.5" fill="#1e293b" font-weight="600">
+                Prix au palier : {{ localP0.toFixed(2) }} €/m³
+              </text>
+
+              <!-- Median marginal price bar (draggable) -->
+              <line :x1="margin.left" :y1="cy(medianPrice)" :x2="margin.left + plotW" :y2="cy(medianPrice)"
+                stroke="#059669" stroke-width="1.5" stroke-dasharray="8 4" opacity="0.7" />
+              <rect :x="margin.left + plotW - 178" :y="cy(medianPrice) - 16" width="170" height="18" rx="9"
+                fill="#059669" fill-opacity="0.12" stroke="#059669" stroke-width="0.5" />
+              <text :x="margin.left + plotW - 93" :y="cy(medianPrice) - 4" text-anchor="middle"
+                font-size="10" fill="#059669" font-weight="600">
+                Prix median : {{ medianPrice.toFixed(2) }} €/m³
+              </text>
             </g>
 
-            <!-- Tangent lines (control arms) -->
-            <line :x1="cx(cp.p1.x)" :y1="cy(cp.p1.y)" :x2="cx(cp.p2.x)" :y2="cy(cp.p2.y)"
-              stroke="#93c5fd" stroke-width="1" stroke-dasharray="4" />
-            <line :x1="cx(cp.p3.x)" :y1="cy(cp.p3.y)" :x2="cx(cp.p4.x)" :y2="cy(cp.p4.y)"
-              stroke="#93c5fd" stroke-width="1" stroke-dasharray="4" />
-            <line :x1="cx(cp.p4.x)" :y1="cy(cp.p4.y)" :x2="cx(cp.p5.x)" :y2="cy(cp.p5.y)"
-              stroke="#fca5a5" stroke-width="1" stroke-dasharray="4" />
-            <line :x1="cx(cp.p6.x)" :y1="cy(cp.p6.y)" :x2="cx(cp.p7.x)" :y2="cy(cp.p7.y)"
-              stroke="#fca5a5" stroke-width="1" stroke-dasharray="4" />
-
-            <!-- Bezier curve: population (blue, thicker = focus) -->
-            <path :d="tier1Path" fill="none" stroke="#2563eb" stroke-width="3" />
-            <!-- Bezier curve: cas exceptionnels (red) -->
-            <path :d="tier2Path" fill="none" stroke="#dc2626" stroke-width="2" />
-
-            <!-- Inflection reference lines -->
-            <line :x1="cx(bp.vinf)" :y1="cy(zoomPriceMin)" :x2="cx(bp.vinf)" :y2="cy(localP0)"
-              stroke="#94a3b8" stroke-width="1" stroke-dasharray="4" />
-            <line :x1="cx(zoomVolMin)" :y1="cy(localP0)" :x2="cx(bp.vinf)" :y2="cy(localP0)"
-              stroke="#94a3b8" stroke-width="1" stroke-dasharray="4" />
-
-            <!-- p0 label -->
-            <text :x="cx(zoomVolMin) + 30" :y="cy(localP0) - 6" font-size="12" fill="#1e293b" font-weight="600">
-              p0 = {{ localP0.toFixed(2) }} EUR/m3
+            <!-- Median bar drag handle (outside clip so always visible) -->
+            <circle
+              :cx="margin.left + 14" :cy="cy(medianPrice)"
+              :r="dragging === 'medianBar' ? 10 : 7"
+              fill="#059669" stroke="white" :stroke-width="dragging === 'medianBar' ? 3 : 2"
+              class="drag-handle"
+              @mousedown.prevent="startDrag('medianBar')"
+              @touchstart.prevent="startDrag('medianBar')"
+            />
+            <text :x="margin.left + 28" :y="cy(medianPrice) + 4"
+              font-size="9" fill="#059669" font-weight="600" opacity="0.7">
+              ↕
             </text>
 
             <!-- Draggable control points -->
             <circle v-for="(pt, key) in dragPoints" :key="key"
               :cx="cx(pt.x)" :cy="cy(pt.y)"
-              :r="dragging === key ? 9 : 7"
-              :fill="ptColors[key]" stroke="white" stroke-width="2"
-              style="cursor: grab;"
+              :r="dragging === key ? 10 : 7"
+              :fill="ptColors[key]" stroke="white" :stroke-width="dragging === key ? 3 : 2"
+              class="drag-handle"
               @mousedown.prevent="startDrag(key)"
               @touchstart.prevent="startDrag(key)"
             />
             <text v-for="(pt, key) in dragPoints" :key="'l-'+key"
-              :x="cx(pt.x) + 10" :y="cy(pt.y) - 10"
-              font-size="11" :fill="ptColors[key]" font-weight="500">
+              :x="cx(pt.x) + 12" :y="cy(pt.y) - 12"
+              font-size="10" :fill="ptColors[key]" font-weight="600" opacity="0.8">
               {{ ptLabels[key] }}
             </text>
+
+            <!-- Legend box (top-right) -->
+            <g :transform="`translate(${margin.left + plotW - 232}, ${margin.top + 8})`">
+              <rect x="0" y="0" width="220" :height="citizenAbo > 0 ? 80 : 62" rx="6" fill="white" fill-opacity="0.92" stroke="#e2e8f0" />
+              <line x1="10" y1="14" x2="28" y2="14" stroke="#2563eb" stroke-width="3" stroke-linecap="round" />
+              <text x="34" y="18" font-size="11" fill="#334155">Consommations foyers</text>
+              <line x1="10" y1="32" x2="28" y2="32" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round" />
+              <text x="34" y="36" font-size="11" fill="#334155">Consommations exceptionnelles</text>
+              <line x1="10" y1="50" x2="28" y2="50" stroke="#059669" stroke-width="2" stroke-dasharray="6 3" stroke-linecap="round" />
+              <text x="34" y="54" font-size="11" fill="#334155">
+                Prix median ({{ medianPrice.toFixed(2) }}€/m³)
+              </text>
+              <g v-if="citizenAbo > 0">
+                <line x1="10" y1="68" x2="28" y2="68" stroke="#059669" stroke-width="2" stroke-dasharray="3 2" stroke-linecap="round" />
+                <text x="34" y="72" font-size="11" fill="#334155">Prix moyen avec abo.</text>
+              </g>
+            </g>
+          </svg>
+          </div>
+        </div>
+      </div> <!-- end main-layout-chart -->
+
+        <!-- ── RIGHT SIDEBAR: Auth + Vote ── -->
+        <div class="main-layout-sidebar">
+          <!-- Auth: Code electeur -->
+          <div class="card sidebar-card">
+            <div v-if="isCitizenAuth" class="alert alert-success" style="margin-bottom: 0;">
+              Authentifie. Ajustez la courbe et votez.
+            </div>
+            <template v-else>
+              <div class="sidebar-auth-block">
+                <h4>Code electeur</h4>
+                <p class="sidebar-muted">par carte electorale</p>
+                <div v-if="authError" class="alert alert-error" style="margin-bottom: 0.5rem; font-size: 0.8rem;">{{ authError }}</div>
+                <form @submit.prevent="authenticate" style="display: flex; gap: 0.4rem;">
+                  <input v-model="authCode" type="text" maxlength="8" placeholder="Code electeur"
+                    class="form-input" style="flex: 1; text-transform: uppercase; font-family: monospace; letter-spacing: 0.12em; font-size: 0.85rem;" />
+                  <button type="submit" class="btn btn-primary" :disabled="authLoading" style="padding: 0.35rem 0.75rem;">OK</button>
+                </form>
+                <p v-if="isDev" style="margin-top: 0.4rem; padding: 0.3rem 0.5rem; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 5px; font-size: 0.7rem;">
+                  <strong>Dev:</strong> QPF5L9ZK (60m³)
+                </p>
+              </div>
+              <div class="sidebar-auth-block" style="opacity: 0.5; border-top: 1px solid var(--color-border); padding-top: 0.75rem; margin-top: 0.75rem;">
+                <h4>Toile fiduciaire decentralisee</h4>
+                <p class="sidebar-muted">Authentification avec identite numerique Duniter</p>
+                <button class="btn btn-secondary" disabled style="font-size: 0.78rem; padding: 0.3rem 0.6rem;">Bientot disponible</button>
+              </div>
+            </template>
+          </div>
+
+          <!-- Vote -->
+          <div class="card sidebar-card">
+            <h4 style="margin-bottom: 0.25rem;">Mon vote</h4>
+            <p style="font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 0.6rem;">
+              Ajustez la courbe, puis sauvegardez.
+            </p>
+            <button class="btn btn-primary" @click="submitVote" style="width: 100%; font-size: 0.9rem;"
+              :disabled="!isCitizenAuth || submitting || isVoteClosed">
+              <span v-if="submitting" class="spinner" style="width: 0.9rem; height: 0.9rem;"></span>
+              Sauvegarder mon vote
+            </button>
+            <p v-if="lastVoteDate" style="font-size: 0.72rem; color: var(--color-text-muted); margin-top: 0.4rem; text-align: center;">
+              Dernier vote enregistre le {{ lastVoteDate }}
+            </p>
+            <p v-if="!isCitizenAuth" style="font-size: 0.72rem; color: var(--color-text-muted); margin-top: 0.4rem; text-align: center;">
+              Authentifiez-vous pour voter.
+            </p>
+            <p v-else-if="isVoteClosed" style="font-size: 0.72rem; color: #dc2626; margin-top: 0.4rem; text-align: center;">
+              Le vote est clos.
+            </p>
+            <div v-if="voteSuccess" class="alert alert-success" style="margin-top: 0.5rem; font-size: 0.8rem;">
+              Vote enregistre !
+            </div>
+          </div>
+
+          <!-- Countdown (if applicable) -->
+          <div v-if="commune.vote_deadline" class="card sidebar-card">
+            <h4 style="margin-bottom: 0.25rem;">Echeance</h4>
+            <div v-if="isVoteClosed" style="font-size: 0.9rem; color: #dc2626; font-weight: 600;">
+              Vote clos.
+            </div>
+            <div v-else class="countdown-compact">
+              <span><strong>{{ countdown.days }}</strong>j</span>
+              <span><strong>{{ countdown.hours }}</strong>h</span>
+              <span><strong>{{ countdown.minutes }}</strong>m</span>
+              <span><strong>{{ countdown.seconds }}</strong>s</span>
+            </div>
+          </div>
+        </div>
+      </div> <!-- end main-layout -->
+
+      <!-- ═══════════════════════════════════════════════════════
+           SITUATION DE DEPART
+           ═══════════════════════════════════════════════════════ -->
+      <h2 class="section-title">Situation de depart</h2>
+
+      <!-- Histogramme des consommations -->
+      <div v-if="distBuckets.length" class="chart-card" style="margin-bottom: 1.5rem;">
+        <div class="chart-header">
+          <div>
+            <h3 class="chart-title">Repartition des consommations</h3>
+            <p class="chart-subtitle">Nombre de foyers par tranche de consommation (m³/an)</p>
+          </div>
+        </div>
+        <div class="chart-container">
+          <svg :viewBox="`0 0 ${histW} ${histH}`" preserveAspectRatio="xMidYMid meet">
+            <rect :x="histMargin.left" :y="histMargin.top" :width="histPlotW" :height="histPlotH"
+              fill="#f8fafc" rx="4" />
+
+            <!-- Y grid lines -->
+            <g>
+              <template v-for="y in histGridY" :key="'hgy'+y">
+                <line :x1="histMargin.left" :y1="histCy(y)" :x2="histMargin.left + histPlotW" :y2="histCy(y)"
+                  stroke="#e2e8f0" stroke-width="0.5" />
+                <text :x="histMargin.left - 6" :y="histCy(y) + 4" text-anchor="end" class="axis-label-sm">{{ y }}</text>
+              </template>
+            </g>
+
+            <!-- Bars -->
+            <g v-for="(bk, i) in distBuckets" :key="'hb'+i">
+              <rect
+                :x="histCx(bk.low) + 1"
+                :y="histCy(bk.count)"
+                :width="Math.max(0, histCx(bk.high) - histCx(bk.low) - 2)"
+                :height="Math.max(0, histCy(0) - histCy(bk.count))"
+                :fill="bk.high <= bp.vinf ? '#2563eb' : '#ea580c'"
+                :opacity="bk.high <= bp.vinf ? 0.7 : 0.7"
+                rx="2"
+              />
+              <!-- Count label above bar -->
+              <text v-if="bk.count > 0"
+                :x="(histCx(bk.low) + histCx(bk.high)) / 2"
+                :y="histCy(bk.count) - 4"
+                text-anchor="middle" font-size="10" fill="#334155" font-weight="600">
+                {{ bk.count }}
+              </text>
+            </g>
+
+            <!-- Vinf dashed line -->
+            <line :x1="histCx(bp.vinf)" :y1="histMargin.top" :x2="histCx(bp.vinf)" :y2="histMargin.top + histPlotH"
+              stroke="#8b5cf6" stroke-width="1.5" stroke-dasharray="5 3" />
+            <text :x="histCx(bp.vinf)" :y="histMargin.top - 4" text-anchor="middle" font-size="10" fill="#8b5cf6" font-weight="600">
+              Palier : {{ bp.vinf.toFixed(0) }} m³
+            </text>
+
+            <!-- X axis labels -->
+            <g>
+              <template v-for="(bk, i) in distBuckets" :key="'hx'+i">
+                <text v-if="i % 2 === 0 || distBuckets.length <= 12"
+                  :x="histCx(bk.low)" :y="histMargin.top + histPlotH + 16" text-anchor="middle" class="axis-label-sm">
+                  {{ bk.low }}
+                </text>
+              </template>
+            </g>
+
+            <!-- Legend (top-right) -->
+            <g :transform="`translate(${histMargin.left + histPlotW - 222}, ${histMargin.top + 6})`">
+              <rect x="0" y="0" width="210" height="44" rx="6" fill="white" fill-opacity="0.9" stroke="#e2e8f0" />
+              <rect x="10" y="8" width="14" height="10" rx="2" fill="#2563eb" opacity="0.7" />
+              <text x="30" y="17" font-size="10" fill="#334155">Consommations foyers</text>
+              <rect x="10" y="26" width="14" height="10" rx="2" fill="#ea580c" opacity="0.7" />
+              <text x="30" y="35" font-size="10" fill="#334155">Consommations exceptionnelles</text>
+            </g>
+
+            <!-- Axis titles -->
+            <text :x="histMargin.left + histPlotW / 2" :y="histMargin.top + histPlotH + 36" text-anchor="middle" class="axis-title">
+              Consommation (m³)
+            </text>
+            <text :x="histMargin.left - 28" :y="histMargin.top + histPlotH / 2" text-anchor="middle"
+              class="axis-title" transform-origin="center" :transform="`rotate(-90, ${histMargin.left - 28}, ${histMargin.top + histPlotH / 2})`">
+              Foyers
+            </text>
           </svg>
         </div>
       </div>
 
       <!-- ═══════════════════════════════════════════════════════
-           3. SECTION AUTHENTIFICATION
+           INDICATEURS CLES
            ═══════════════════════════════════════════════════════ -->
-      <div class="card" style="margin-bottom: 1.5rem;">
-        <h3 style="margin-bottom: 0.75rem;">Authentification</h3>
-
-        <div v-if="isCitizenAuth" class="alert alert-success">
-          Vous etes authentifie. Vous pouvez ajuster la courbe et sauvegarder votre vote.
+      <div v-if="params" class="key-metrics-banner" style="margin-bottom: 1.5rem;">
+        <div class="key-metric key-metric-input">
+          <span class="key-metric-value">{{ params.recettes.toLocaleString() }} €</span>
+          <span class="key-metric-label">Recettes cibles</span>
+          <span class="key-metric-tag">contrainte</span>
         </div>
-
-        <div v-else class="auth-options">
-          <!-- Code foyer -->
-          <div class="auth-option">
-            <h4>Code foyer</h4>
-            <p style="font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.75rem;">
-              Entrez le code a 8 caracteres recu par courrier.
-            </p>
-            <div v-if="authError" class="alert alert-error" style="margin-bottom: 0.5rem;">{{ authError }}</div>
-            <form @submit.prevent="authenticate" style="display: flex; gap: 0.5rem;">
-              <input v-model="authCode" type="text" maxlength="8" placeholder="Code foyer"
-                class="form-input" style="flex: 1; text-transform: uppercase; font-family: monospace; letter-spacing: 0.15em;" />
-              <button type="submit" class="btn btn-primary" :disabled="authLoading">OK</button>
-            </form>
-          </div>
-
-          <!-- Duniter -->
-          <div class="auth-option" style="opacity: 0.5;">
-            <h4>Duniter</h4>
-            <p style="font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.75rem;">
-              Authentification par identite numerique Duniter.
-            </p>
-            <button class="btn btn-secondary" disabled>Bientot disponible</button>
-          </div>
+        <div class="key-metric key-metric-input">
+          <span class="key-metric-value">{{ bp.vinf.toFixed(0) }} m³</span>
+          <span class="key-metric-label">Palier exceptionnel</span>
+          <span class="key-metric-tag">contrainte</span>
+        </div>
+        <div class="key-metric key-metric-result">
+          <span class="key-metric-value">{{ localP0.toFixed(2) }} €/m³</span>
+          <span class="key-metric-label">Prix au palier</span>
+          <span class="key-metric-tag key-metric-tag-calc">calcule</span>
+        </div>
+        <div class="key-metric key-metric-result">
+          <span class="key-metric-value">{{ medianPrice.toFixed(2) }} €/m³</span>
+          <span class="key-metric-label">Prix median</span>
+          <span class="key-metric-tag key-metric-tag-calc">calcule</span>
+        </div>
+        <div class="key-metric key-metric-highlight">
+          <span class="key-metric-value">{{ citizenPriceM3 }}</span>
+          <span class="key-metric-label">Mon prix au m³</span>
         </div>
       </div>
 
       <!-- ═══════════════════════════════════════════════════════
-           4. SECTION VOTE
-           ═══════════════════════════════════════════════════════ -->
-      <div class="card" style="margin-bottom: 1.5rem;">
-        <h3 style="margin-bottom: 0.5rem;">Votre vote</h3>
-        <p style="font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1rem;">
-          Ajustez la courbe ci-dessus, puis sauvegardez. C'est votre vote. Modifiable a tout moment. La derniere position compte.
-        </p>
-        <button
-          class="btn btn-primary btn-lg"
-          @click="submitVote"
-          :disabled="!isCitizenAuth || submitting || isVoteClosed"
-        >
-          <span v-if="submitting" class="spinner" style="width: 1rem; height: 1rem;"></span>
-          Sauvegarder mon vote
-        </button>
-        <p v-if="!isCitizenAuth" style="font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.5rem;">
-          Authentifiez-vous pour voter.
-        </p>
-        <p v-else-if="isVoteClosed" style="font-size: 0.8rem; color: #dc2626; margin-top: 0.5rem;">
-          Le vote est clos.
-        </p>
-        <div v-if="voteSuccess" class="alert alert-success" style="margin-top: 0.75rem;">
-          Vote enregistre !
-        </div>
-      </div>
-
-      <!-- ═══════════════════════════════════════════════════════
-           5. COMPTE A REBOURS
-           ═══════════════════════════════════════════════════════ -->
-      <div v-if="commune.vote_deadline" class="card" style="margin-bottom: 1.5rem;">
-        <h3 style="margin-bottom: 0.5rem;">Echeance du vote</h3>
-        <div v-if="isVoteClosed" style="font-size: 1.1rem; color: #dc2626; font-weight: 600;">
-          Le vote est clos.
-        </div>
-        <div v-else class="countdown">
-          <span class="countdown-unit"><strong>{{ countdown.days }}</strong>j</span>
-          <span class="countdown-unit"><strong>{{ countdown.hours }}</strong>h</span>
-          <span class="countdown-unit"><strong>{{ countdown.minutes }}</strong>m</span>
-          <span class="countdown-unit"><strong>{{ countdown.seconds }}</strong>s</span>
-        </div>
-      </div>
-
-      <!-- ═══════════════════════════════════════════════════════
-           6. PARAMETRES COURBE + TABLE IMPACTS (2 colonnes)
+           PARAMETRES COURBE + TABLE IMPACTS
            ═══════════════════════════════════════════════════════ -->
       <div class="params-impacts-layout" style="margin-bottom: 1.5rem;">
         <div class="card">
@@ -226,7 +445,7 @@
           <div class="param-grid">
             <div class="param-row">
               <span class="param-label">v<sub>inf</sub></span>
-              <span class="param-val">{{ bp.vinf.toFixed(0) }} m3</span>
+              <span class="param-val">{{ bp.vinf.toFixed(0) }} m³</span>
             </div>
             <div class="param-row">
               <span class="param-label">a</span>
@@ -248,9 +467,16 @@
               <span class="param-label">e</span>
               <span class="param-val">{{ bp.e.toFixed(3) }}</span>
             </div>
-            <div class="param-row" style="grid-column: span 2; border-top: 1px solid var(--color-border); padding-top: 0.5rem;">
-              <span class="param-label" style="font-weight: 600;">p<sub>0</sub></span>
-              <span class="param-val" style="font-size: 1.1rem;">{{ localP0.toFixed(2) }} EUR/m3</span>
+          </div>
+          <div style="border-top: 1px solid var(--color-border); padding-top: 0.75rem; margin-top: 0.5rem;">
+            <p style="font-size: 0.82rem; color: #475569; font-weight: 600; margin-bottom: 0.35rem;">Votre vote donne :</p>
+            <div class="vote-result-row">
+              <span>un prix au palier de</span>
+              <strong>{{ localP0.toFixed(2) }} €/m³</strong>
+            </div>
+            <div class="vote-result-row">
+              <span>un prix median de</span>
+              <strong>{{ medianPrice.toFixed(2) }} €/m³</strong>
             </div>
           </div>
         </div>
@@ -259,17 +485,22 @@
           <h4 style="margin-bottom: 0.5rem;">Impact par volume</h4>
           <table class="table table-sm">
             <thead>
-              <tr><th>Vol.</th><th>Ancien</th><th>Nouveau RP</th><th>Nouveau RS</th></tr>
+              <tr>
+                <th>Vol.</th>
+                <th>Actuel</th>
+                <th>{{ differentiatedTariff ? 'RP/PRO' : 'Nouveau' }}</th>
+                <th v-if="differentiatedTariff">RS</th>
+              </tr>
             </thead>
             <tbody>
               <tr v-for="imp in impacts" :key="imp.volume">
-                <td>{{ imp.volume }} m3</td>
-                <td>{{ imp.old_price.toFixed(0) }} EUR</td>
+                <td>{{ imp.volume }} m³</td>
+                <td>{{ imp.old_price.toFixed(0) }} €</td>
                 <td :class="imp.new_price_rp > imp.old_price ? 'text-up' : 'text-down'">
-                  {{ imp.new_price_rp.toFixed(0) }} EUR
+                  {{ imp.new_price_rp.toFixed(0) }} €
                 </td>
-                <td :class="imp.new_price_rs > imp.old_price ? 'text-up' : 'text-down'">
-                  {{ imp.new_price_rs.toFixed(0) }} EUR
+                <td v-if="differentiatedTariff" :class="imp.new_price_rs > imp.old_price ? 'text-up' : 'text-down'">
+                  {{ imp.new_price_rs.toFixed(0) }} €
                 </td>
               </tr>
             </tbody>
@@ -278,89 +509,256 @@
       </div>
 
       <!-- ═══════════════════════════════════════════════════════
-           7. TARIFICATION ACTUELLE (baseline lineaire)
+           7. TARIFICATION ACTUELLE (baseline lineaire) — Axe X inverse
            ═══════════════════════════════════════════════════════ -->
-      <div class="card" style="margin-bottom: 1.5rem;">
-        <h3 style="margin-bottom: 0.5rem;">Tarification actuelle (modele lineaire)</h3>
-        <p style="font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 1rem;">
-          Situation tarifaire en vigueur : prix fixe de {{ curveData.p0_linear?.toFixed(2) }} EUR/m3 + abonnement.
+      <div class="chart-card" style="margin-bottom: 1.5rem;">
+        <h3 class="chart-title">Tarification actuelle (modele lineaire)</h3>
+        <p class="chart-subtitle" style="margin-bottom: 1rem;">
+          Situation tarifaire en vigueur : prix uniforme de {{ curveData.p0_linear?.toFixed(2) }} €/m³ + abonnement {{ abop }} €<template v-if="differentiatedTariff"> (RP/PRO) / {{ abos }} € (RS)</template>.
         </p>
 
         <div class="baseline-charts">
           <!-- Left: Facture totale -->
           <div class="chart-container">
-            <h4 style="text-align: center; font-size: 0.85rem; margin-bottom: 0.25rem;">Facture totale (EUR)</h4>
+            <h4 style="text-align: center; font-size: 0.85rem; margin-bottom: 0.25rem; color: #475569;">Facture totale (€)</h4>
             <svg :viewBox="`0 0 ${W2} ${H2}`" preserveAspectRatio="xMidYMid meet">
+              <rect :x="margin2.left" :y="margin2.top" :width="plotW2" :height="plotH2" fill="#f8fafc" rx="3" />
               <g>
                 <line v-for="v in gridVols2" :key="'bg1v'+v"
-                  :x1="cx2(v)" :y1="cy2bill(0)" :x2="cx2(v)" :y2="cy2bill(maxBill)"
+                  :x1="cx2(v)" :y1="margin2.top" :x2="cx2(v)" :y2="margin2.top + plotH2"
                   stroke="#e2e8f0" stroke-width="0.5" />
                 <line v-for="b in gridBills" :key="'bg1b'+b"
-                  :x1="cx2(0)" :y1="cy2bill(b)" :x2="cx2(vmax)" :y2="cy2bill(b)"
+                  :x1="margin2.left" :y1="cy2bill(b)" :x2="margin2.left + plotW2" :y2="cy2bill(b)"
                   stroke="#e2e8f0" stroke-width="0.5" />
                 <text v-for="v in gridVols2" :key="'bg1lv'+v"
-                  :x="cx2(v)" :y="H2 - 2" text-anchor="middle" font-size="9" fill="#94a3b8">{{ v }}</text>
+                  :x="cx2(v)" :y="margin2.top + plotH2 + 14" text-anchor="middle" class="axis-label-sm">{{ v }}</text>
                 <text v-for="b in gridBills" :key="'bg1lb'+b"
-                  :x="margin2.left - 4" :y="cy2bill(b) + 3" text-anchor="end" font-size="9" fill="#94a3b8">{{ b }}</text>
+                  :x="margin2.left + plotW2 + 4" :y="cy2bill(b) + 3" text-anchor="start" class="axis-label-sm">{{ b }}€</text>
+                <!-- Household counts per 30m³ -->
+                <g v-if="distBuckets30.length">
+                  <text v-for="bk in visibleBuckets30Baseline" :key="'b1hc'+bk.low"
+                    :x="(cx2(bk.low) + cx2(bk.high)) / 2"
+                    :y="margin2.top + plotH2 + 28"
+                    text-anchor="middle" font-size="9" fill="#64748b" font-weight="500">
+                    {{ bk.count }}
+                  </text>
+                  <text :x="margin2.left + plotW2 + 4" :y="margin2.top + plotH2 + 28"
+                    text-anchor="start" font-size="8" fill="#64748b">foy.</text>
+                </g>
               </g>
-              <polyline :points="baselineBillRP" fill="none" stroke="#2563eb" stroke-width="1.5" />
-              <polyline :points="baselineBillRS" fill="none" stroke="#dc2626" stroke-width="1.5" />
-              <g :transform="`translate(${W2 - 100}, 15)`">
-                <line x1="0" y1="0" x2="15" y2="0" stroke="#2563eb" stroke-width="1.5" />
-                <text x="18" y="3" font-size="9" fill="#1e293b">RP/PRO</text>
-                <line x1="0" y1="12" x2="15" y2="12" stroke="#dc2626" stroke-width="1.5" />
-                <text x="18" y="15" font-size="9" fill="#1e293b">RS</text>
+              <defs>
+                <clipPath id="baseline-clip-1">
+                  <rect :x="margin2.left" :y="margin2.top" :width="plotW2" :height="plotH2" />
+                </clipPath>
+              </defs>
+              <g clip-path="url(#baseline-clip-1)">
+                <polyline :points="baselineBillRP" fill="none"
+                  :stroke="showHouseholds ? '#cbd5e1' : '#2563eb'" :stroke-width="showHouseholds ? 1.5 : 2" stroke-linecap="round" />
+                <polyline v-if="differentiatedTariff" :points="baselineBillRS" fill="none"
+                  :stroke="showHouseholds ? '#e2e8f0' : '#f59e0b'" :stroke-width="showHouseholds ? 1.5 : 2" stroke-linecap="round" stroke-dasharray="6 3" />
+                <!-- Household dots: bill = abo + p0_linear * volume -->
+                <g v-if="showHouseholds && householdVolumes.length">
+                  <circle v-for="(hh, i) in householdDotsBill" :key="'hdb'+i"
+                    :cx="cx2(hh.volume)" :cy="cy2bill(hh.bill)"
+                    r="2.5" fill="#2563eb" opacity="0.5"
+                    stroke="white" stroke-width="0.5"
+                  />
+                </g>
+              </g>
+              <text :x="W2/2" :y="margin2.top + plotH2 + 42" text-anchor="middle" class="axis-label-sm">m³ → reduire</text>
+              <!-- Legend when differentiated (top-right) -->
+              <g v-if="differentiatedTariff" :transform="`translate(${margin2.left + plotW2 - 92}, ${margin2.top + 4})`">
+                <rect x="0" y="0" width="80" height="32" rx="4" fill="white" fill-opacity="0.9" stroke="#e2e8f0" />
+                <line x1="6" y1="11" x2="18" y2="11" stroke="#2563eb" stroke-width="2" />
+                <text x="22" y="14" font-size="8" fill="#334155">RP/PRO</text>
+                <line x1="6" y1="24" x2="18" y2="24" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4 2" />
+                <text x="22" y="27" font-size="8" fill="#334155">RS</text>
               </g>
-              <text :x="W2/2" :y="H2" text-anchor="middle" font-size="9" fill="#64748b">volume (m3)</text>
             </svg>
           </div>
 
           <!-- Right: Prix au m3 -->
           <div class="chart-container">
-            <h4 style="text-align: center; font-size: 0.85rem; margin-bottom: 0.25rem;">Prix au m<sup>3</sup> (EUR)</h4>
+            <h4 style="text-align: center; font-size: 0.85rem; margin-bottom: 0.25rem; color: #475569;">Prix au m³ (€)</h4>
             <svg :viewBox="`0 0 ${W2} ${H2}`" preserveAspectRatio="xMidYMid meet">
+              <rect :x="margin2.left" :y="margin2.top" :width="plotW2" :height="plotH2" fill="#f8fafc" rx="3" />
+              <defs>
+                <clipPath id="baseline-clip-2">
+                  <rect :x="margin2.left" :y="margin2.top" :width="plotW2" :height="plotH2" />
+                </clipPath>
+              </defs>
               <g>
                 <line v-for="v in gridVols2" :key="'bg2v'+v"
-                  :x1="cx2(v)" :y1="cy2price(0)" :x2="cx2(v)" :y2="cy2price(pmax)"
+                  :x1="cx2(v)" :y1="margin2.top" :x2="cx2(v)" :y2="margin2.top + plotH2"
                   stroke="#e2e8f0" stroke-width="0.5" />
                 <line v-for="p in gridPrices2" :key="'bg2p'+p"
-                  :x1="cx2(0)" :y1="cy2price(p)" :x2="cx2(vmax)" :y2="cy2price(p)"
+                  :x1="margin2.left" :y1="cy2price(p)" :x2="margin2.left + plotW2" :y2="cy2price(p)"
                   stroke="#e2e8f0" stroke-width="0.5" />
                 <text v-for="v in gridVols2" :key="'bg2lv'+v"
-                  :x="cx2(v)" :y="H2 - 2" text-anchor="middle" font-size="9" fill="#94a3b8">{{ v }}</text>
+                  :x="cx2(v)" :y="margin2.top + plotH2 + 14" text-anchor="middle" class="axis-label-sm">{{ v }}</text>
                 <text v-for="p in gridPrices2" :key="'bg2lp'+p"
-                  :x="margin2.left - 4" :y="cy2price(p) + 3" text-anchor="end" font-size="9" fill="#94a3b8">{{ p }}</text>
+                  :x="margin2.left + plotW2 + 4" :y="cy2price(p) + 3" text-anchor="start" class="axis-label-sm">{{ p }}€</text>
+                <!-- Household counts per 30m³ -->
+                <g v-if="distBuckets30.length">
+                  <text v-for="bk in visibleBuckets30Baseline" :key="'b2hc'+bk.low"
+                    :x="(cx2(bk.low) + cx2(bk.high)) / 2"
+                    :y="margin2.top + plotH2 + 28"
+                    text-anchor="middle" font-size="9" fill="#64748b" font-weight="500">
+                    {{ bk.count }}
+                  </text>
+                  <text :x="margin2.left + plotW2 + 4" :y="margin2.top + plotH2 + 28"
+                    text-anchor="start" font-size="8" fill="#64748b">foy.</text>
+                </g>
               </g>
-              <polyline :points="baselinePriceRP" fill="none" stroke="#2563eb" stroke-width="1.5" />
-              <polyline :points="baselinePriceRS" fill="none" stroke="#dc2626" stroke-width="1.5" />
-              <line :x1="cx2(0)" :y1="cy2price(curveData.p0_linear)" :x2="cx2(vmax)" :y2="cy2price(curveData.p0_linear)"
-                stroke="#94a3b8" stroke-width="1" stroke-dasharray="4" />
-              <text :x="cx2(vmax) - 5" :y="cy2price(curveData.p0_linear) - 5" text-anchor="end"
-                font-size="10" fill="#475569">
-                p0 = {{ curveData.p0_linear?.toFixed(2) }}
+              <g clip-path="url(#baseline-clip-2)">
+                <polyline :points="baselinePriceRP" fill="none"
+                  :stroke="showHouseholds ? '#cbd5e1' : '#2563eb'" :stroke-width="showHouseholds ? 1.5 : 2" stroke-linecap="round" />
+                <polyline v-if="differentiatedTariff" :points="baselinePriceRS" fill="none"
+                  :stroke="showHouseholds ? '#e2e8f0' : '#f59e0b'" :stroke-width="showHouseholds ? 1.5 : 2" stroke-linecap="round" stroke-dasharray="6 3" />
+                <!-- Household dots: price = abo/v + p0_linear -->
+                <g v-if="showHouseholds && householdVolumes.length">
+                  <circle v-for="(hh, i) in householdDotsBaselinePrice" :key="'hdp'+i"
+                    :cx="cx2(hh.volume)" :cy="cy2price(hh.price)"
+                    r="2.5" fill="#2563eb" opacity="0.5"
+                    stroke="white" stroke-width="0.5"
+                  />
+                </g>
+                <line :x1="cx2(baselineVolMax)" :y1="cy2price(curveData.p0_linear)" :x2="cx2(0)" :y2="cy2price(curveData.p0_linear)"
+                  stroke="#94a3b8" stroke-width="1" stroke-dasharray="4 4" />
+              </g>
+              <text :x="cx2(0) + 5" :y="cy2price(curveData.p0_linear) - 6" text-anchor="start"
+                font-size="10" fill="#475569" font-weight="500">
+                Prix uniforme : {{ curveData.p0_linear?.toFixed(2) }}€/m³
               </text>
-              <text :x="W2/2" :y="H2" text-anchor="middle" font-size="9" fill="#64748b">volume (m3)</text>
+              <text :x="W2/2" :y="margin2.top + plotH2 + 42" text-anchor="middle" class="axis-label-sm">m³ → reduire</text>
+              <!-- Legend when differentiated (top-right) -->
+              <g v-if="differentiatedTariff" :transform="`translate(${margin2.left + plotW2 - 92}, ${margin2.top + 4})`">
+                <rect x="0" y="0" width="80" height="32" rx="4" fill="white" fill-opacity="0.9" stroke="#e2e8f0" />
+                <line x1="6" y1="11" x2="18" y2="11" stroke="#2563eb" stroke-width="2" />
+                <text x="22" y="14" font-size="8" fill="#334155">RP/PRO</text>
+                <line x1="6" y1="24" x2="18" y2="24" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4 2" />
+                <text x="22" y="27" font-size="8" fill="#334155">RS</text>
+              </g>
+            </svg>
+          </div>
+        </div>
+
+        <!-- Full-width: Prix marginal au m³ + distribution foyers -->
+        <div style="margin-top: 1rem;">
+          <h4 style="text-align: center; font-size: 0.85rem; margin-bottom: 0.25rem; color: #475569;">
+            Prix au m³ — situation actuelle
+          </h4>
+          <div class="chart-container">
+            <svg :viewBox="`0 0 ${Wmarg} ${Hmarg}`" preserveAspectRatio="xMidYMid meet">
+              <!-- Background -->
+              <rect :x="margMargin.left" :y="margMargin.top" :width="margPlotW" :height="margPlotH"
+                fill="#f8fafc" rx="4" />
+
+              <defs>
+                <clipPath id="marg-clip">
+                  <rect :x="margMargin.left" :y="margMargin.top" :width="margPlotW" :height="margPlotH" />
+                </clipPath>
+                <linearGradient id="bar-grad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#2563eb" stop-opacity="0.35" />
+                  <stop offset="100%" stop-color="#2563eb" stop-opacity="0.12" />
+                </linearGradient>
+              </defs>
+
+              <!-- Grid -->
+              <g>
+                <line v-for="v in margGridVols" :key="'mgv'+v"
+                  :x1="margCx(v)" :y1="margMargin.top" :x2="margCx(v)" :y2="margMargin.top + margPlotH"
+                  stroke="#e2e8f0" stroke-width="0.5" />
+                <line v-for="p in margGridPrices" :key="'mgp'+p"
+                  :x1="margMargin.left" :y1="margCyPrice(p)" :x2="margMargin.left + margPlotW" :y2="margCyPrice(p)"
+                  stroke="#e2e8f0" stroke-width="0.5" />
+                <!-- Volume labels -->
+                <text v-for="v in margGridVols" :key="'mglv'+v"
+                  :x="margCx(v)" :y="margMargin.top + margPlotH + 18" text-anchor="middle" class="axis-label-sm">{{ v }}m³</text>
+                <!-- Price labels (right) -->
+                <text v-for="p in margGridPrices" :key="'mglp'+p"
+                  :x="margMargin.left + margPlotW + 4" :y="margCyPrice(p) + 3" text-anchor="start" class="axis-label-sm">
+                  {{ p.toFixed(p < 1 ? 1 : 0) }}€
+                </text>
+                <!-- Household count labels (left axis) -->
+                <text v-for="c in margGridCounts" :key="'mgc'+c"
+                  :x="margMargin.left - 4" :y="margCyCount(c) + 3" text-anchor="end"
+                  font-size="9.5" fill="#64748b" font-weight="500">{{ c }}</text>
+              </g>
+
+              <!-- Household histogram bars (behind the curve) -->
+              <g clip-path="url(#marg-clip)">
+                <g v-for="(bk, i) in distBuckets30" :key="'mb'+i">
+                  <rect v-if="bk.count > 0"
+                    :x="Math.min(margCx(bk.low), margCx(bk.high))"
+                    :y="margCyCount(bk.count)"
+                    :width="Math.abs(margCx(bk.high) - margCx(bk.low))"
+                    :height="Math.max(0, margCyCount(0) - margCyCount(bk.count))"
+                    fill="url(#bar-grad)" rx="1"
+                  />
+                  <text v-if="bk.count > 0"
+                    :x="(margCx(bk.low) + margCx(bk.high)) / 2"
+                    :y="margCyCount(bk.count) - 3"
+                    text-anchor="middle" font-size="9.5" fill="#475569" font-weight="600">
+                    {{ bk.count }}
+                  </text>
+                </g>
+
+                <!-- Price line (marginal) -->
+                <polyline :points="margPriceLine" fill="none"
+                  :stroke="showHouseholds ? '#cbd5e1' : '#1e40af'"
+                  :stroke-width="showHouseholds ? 1.5 : 2.5" stroke-linecap="round" />
+
+                <!-- Household dots on marginal price chart -->
+                <g v-if="showHouseholds && householdVolumes.length">
+                  <circle v-for="(hh, i) in householdDotsMarg" :key="'hm'+i"
+                    :cx="margCx(hh.volume)" :cy="margCyPrice(hh.price)"
+                    r="3"
+                    fill="#1e40af" opacity="0.5"
+                    stroke="white" stroke-width="0.6"
+                  />
+                </g>
+
+                <!-- p0 horizontal dashed line -->
+                <line :x1="margMargin.left" :y1="margCyPrice(curveData.p0_linear)" :x2="margMargin.left + margPlotW" :y2="margCyPrice(curveData.p0_linear)"
+                  stroke="#94a3b8" stroke-width="1" stroke-dasharray="4 3" />
+              </g>
+
+              <!-- p0 label -->
+              <text :x="margMargin.left + margPlotW + 4" :y="margCyPrice(curveData.p0_linear) - 5" text-anchor="start"
+                font-size="9" fill="#475569" font-weight="600">
+                {{ curveData.p0_linear?.toFixed(2) }}€/m³
+              </text>
+
+              <!-- Axis titles -->
+              <text :x="Wmarg / 2" :y="margMargin.top + margPlotH + 40" text-anchor="middle" class="axis-title">
+                Consommation (m³) → reduire
+              </text>
+              <!-- Y-axis title left: Foyers -->
+              <text :x="8" :y="margMargin.top + margPlotH / 2" text-anchor="middle"
+                class="axis-title" :transform="`rotate(-90, 8, ${margMargin.top + margPlotH / 2})`">
+                Nombre de foyers
+              </text>
+              <!-- Y-axis title right: €/m³ -->
+              <text :x="Wmarg - 4" :y="margMargin.top - 6" text-anchor="end" class="axis-title">
+                €/m³
+              </text>
+
+              <!-- Legend -->
+              <g :transform="`translate(${margMargin.left + 8}, ${margMargin.top + 6})`">
+                <rect x="0" y="0" width="230" height="44" rx="6" fill="white" fill-opacity="0.92" stroke="#e2e8f0" />
+                <line x1="10" y1="14" x2="28" y2="14" stroke="#1e40af" stroke-width="2.5" stroke-linecap="round" />
+                <text x="34" y="18" font-size="10" fill="#334155" font-weight="500">Prix au m³ avec abonnement (€/m³)</text>
+                <rect x="10" y="25" width="14" height="10" rx="2" fill="#2563eb" fill-opacity="0.25" />
+                <text x="34" y="34" font-size="10" fill="#334155" font-weight="500">Foyers par tranche de 30m³</text>
+              </g>
             </svg>
           </div>
         </div>
       </div>
 
       <!-- ═══════════════════════════════════════════════════════
-           8. INFORMATIONS TARIFAIRES
-           ═══════════════════════════════════════════════════════ -->
-      <div class="card" style="margin-bottom: 1.5rem;">
-        <h3 style="margin-bottom: 0.75rem;">Informations tarifaires</h3>
-        <div v-if="params" class="grid grid-5-info">
-          <div><strong>{{ params.recettes.toLocaleString() }} EUR</strong><br/><span class="info-label">Recettes cibles</span></div>
-          <div><strong>{{ params.abop }} EUR</strong><br/><span class="info-label">Abo RP/PRO</span></div>
-          <div><strong>{{ params.abos }} EUR</strong><br/><span class="info-label">Abo RS</span></div>
-          <div><strong>{{ params.pmax }} EUR/m3</strong><br/><span class="info-label">Prix max</span></div>
-          <div><strong>{{ params.vmax }} m3</strong><br/><span class="info-label">Volume max</span></div>
-        </div>
-      </div>
-
-      <!-- ═══════════════════════════════════════════════════════
-           9. CONTENU CMS — deplace en fin de page
+           CONTENU CMS
            ═══════════════════════════════════════════════════════ -->
       <div v-if="contentPages.length" style="margin-bottom: 1.5rem;">
         <div v-for="page in contentPages" :key="page.slug" class="card" style="margin-bottom: 1rem;">
@@ -381,7 +779,7 @@
 
 <script setup lang="ts">
 import {
-  computeP0, computeImpacts, generateCurve,
+  computeP0, computeImpacts, computeIntegrals, generateCurve,
   paramsToControlPoints,
   type HouseholdData, type ImpactRow, type ControlPoints,
 } from '~/utils/bezier-math'
@@ -399,7 +797,7 @@ const loadError = ref('')
 const contentPages = ref<any[]>([])
 
 // Bezier params (citizen-adjustable)
-const bp = reactive({ vinf: 1050, a: 0.5, b: 0.5, c: 0.5, d: 0.5, e: 0.5 })
+const bp = reactive({ vinf: 400, a: 0.5, b: 0.5, c: 0.5, d: 0.5, e: 0.5 })
 const localP0 = ref(0)
 const impacts = ref<any[]>([])
 const households = ref<HouseholdData[]>([])
@@ -410,6 +808,7 @@ const pmax = ref(20)
 const recettes = ref(75000)
 const abop = ref(100)
 const abos = ref(100)
+const differentiatedTariff = ref(false)
 
 // Auth
 const authCode = ref('')
@@ -418,6 +817,31 @@ const authLoading = ref(false)
 const isCitizenAuth = computed(() => authStore.isCitizen && authStore.communeSlug === slug)
 const submitting = ref(false)
 const voteSuccess = ref(false)
+const lastVoteDate = ref<string | null>(null)
+const citizenVolume = ref<number | null>(null)
+const isDev = import.meta.dev
+
+// Citizen's own price per m³ (from their volume, looked up on the Bézier curve)
+const citizenPriceM3 = computed(() => {
+  if (citizenVolume.value === null) return '—'
+  const vol = citizenVolume.value
+  if (vol <= 0) return '0.00 €/m³'
+  // Find price on current Bézier curve at citizen's volume
+  const dot = householdDots.value.find(d => Math.abs(d.volume - vol) < 0.1)
+  if (dot) return dot.price.toFixed(2) + ' €/m³'
+  // Fallback: generate curve and interpolate
+  const curve = generateCurve(bp.vinf, vmax.value, pmax.value, localP0.value, bp.a, bp.b, bp.c, bp.d, bp.e, 200)
+  for (let j = 1; j < curve.curveVolumes.length; j++) {
+    if (curve.curveVolumes[j - 1]! <= vol && curve.curveVolumes[j]! >= vol) {
+      const dv = curve.curveVolumes[j]! - curve.curveVolumes[j - 1]!
+      if (Math.abs(dv) < 1e-10) return curve.curvePricesM3[j]!.toFixed(2) + ' €/m³'
+      const t = (vol - curve.curveVolumes[j - 1]!) / dv
+      const price = curve.curvePricesM3[j - 1]! + t * (curve.curvePricesM3[j]! - curve.curvePricesM3[j - 1]!)
+      return price.toFixed(2) + ' €/m³'
+    }
+  }
+  return '—'
+})
 
 // ── Countdown ──
 const countdown = reactive({ days: 0, hours: 0, minutes: 0, seconds: 0 })
@@ -431,14 +855,8 @@ function updateCountdown() {
   const diff = deadline - now
   if (diff <= 0) {
     isVoteClosed.value = true
-    countdown.days = 0
-    countdown.hours = 0
-    countdown.minutes = 0
-    countdown.seconds = 0
-    if (countdownInterval) {
-      clearInterval(countdownInterval)
-      countdownInterval = null
-    }
+    countdown.days = 0; countdown.hours = 0; countdown.minutes = 0; countdown.seconds = 0
+    if (countdownInterval) { clearInterval(countdownInterval); countdownInterval = null }
     return
   }
   isVoteClosed.value = false
@@ -448,32 +866,69 @@ function updateCountdown() {
   countdown.seconds = Math.floor((diff % 60000) / 1000)
 }
 
-onUnmounted(() => {
-  if (countdownInterval) clearInterval(countdownInterval)
-})
+onUnmounted(() => { if (countdownInterval) clearInterval(countdownInterval) })
 
-// ── Chart 1: Interactive Bezier with zoom ──
-const W = 620
-const H = 380
-const margin = { top: 20, right: 20, bottom: 28, left: 45 }
+// ── Chart 1: Interactive Bezier with zoom — X AXIS INVERTED ──
+const W = 700
+const H = 400
+const margin = { top: 24, right: 52, bottom: 56, left: 16 }
 const plotW = W - margin.left - margin.right
 const plotH = H - margin.top - margin.bottom
 
-// Zoom state (data-space ranges)
 const zoomVolMin = ref(0)
 const zoomVolMax = ref(2100)
 const zoomPriceMin = ref(0)
 const zoomPriceMax = ref(20)
 
-// Outlier overlay
 const showOutliers = ref(false)
+const showHouseholds = ref(false)
 const outlierVotes = ref<any[]>([])
+const citizenAbo = ref(0)
+const householdVolumes = ref<Array<{ volume_m3: number; status: string }>>([])
 
-// Zoom-aware coordinate transforms
-function cx(v: number) { return margin.left + ((v - zoomVolMin.value) / (zoomVolMax.value - zoomVolMin.value)) * plotW }
-function cy(p: number) { return margin.top + plotH - ((p - zoomPriceMin.value) / (zoomPriceMax.value - zoomPriceMin.value)) * plotH }
-function fromX(sx: number) { return zoomVolMin.value + ((sx - margin.left) / plotW) * (zoomVolMax.value - zoomVolMin.value) }
-function fromY(sy: number) { return zoomPriceMin.value + ((margin.top + plotH - sy) / plotH) * (zoomPriceMax.value - zoomPriceMin.value) }
+// ── Distribution histogram data ──
+const distBuckets = ref<Array<{ low: number; high: number; count: number }>>([])
+
+// Histogram chart dimensions
+const histW = 700
+const histH = 240
+const histMargin = { top: 24, right: 16, bottom: 48, left: 42 }
+const histPlotW = histW - histMargin.left - histMargin.right
+const histPlotH = histH - histMargin.top - histMargin.bottom
+
+function histCx(v: number): number {
+  const last = distBuckets.value[distBuckets.value.length - 1]
+  const maxVol = last ? last.high : 1
+  return histMargin.left + (v / maxVol) * histPlotW
+}
+const histMaxCount = computed(() => {
+  if (!distBuckets.value.length) return 10
+  return Math.ceil(Math.max(...distBuckets.value.map(b => b.count)) * 1.15)
+})
+function histCy(c: number): number {
+  return histMargin.top + histPlotH - (c / histMaxCount.value) * histPlotH
+}
+const histGridY = computed(() => {
+  const step = Math.max(1, Math.ceil(histMaxCount.value / 5 / 10) * 10)
+  const arr: number[] = []
+  for (let y = step; y < histMaxCount.value; y += step) arr.push(y)
+  return arr
+})
+
+// INVERTED X: high volumes on LEFT, 0 on RIGHT
+function cx(v: number) {
+  return margin.left + plotW - ((v - zoomVolMin.value) / (zoomVolMax.value - zoomVolMin.value)) * plotW
+}
+function cy(p: number) {
+  return margin.top + plotH - ((p - zoomPriceMin.value) / (zoomPriceMax.value - zoomPriceMin.value)) * plotH
+}
+// Inverse mapping for drag: screen X → data volume (inverted)
+function fromX(sx: number) {
+  return zoomVolMin.value + ((margin.left + plotW - sx) / plotW) * (zoomVolMax.value - zoomVolMin.value)
+}
+function fromY(sy: number) {
+  return zoomPriceMin.value + ((margin.top + plotH - sy) / plotH) * (zoomPriceMax.value - zoomPriceMin.value)
+}
 
 function zoomIn() {
   const dv = (zoomVolMax.value - zoomVolMin.value) * 0.15
@@ -498,7 +953,7 @@ function zoomPreset(tier: string) {
     zoomVolMin.value = 0
     zoomVolMax.value = Math.min(bp.vinf * 1.3, vmax.value)
     zoomPriceMin.value = 0
-    zoomPriceMax.value = Math.min(localP0.value * 1.5, pmax.value)
+    zoomPriceMax.value = Math.min(Math.max(localP0.value * 1.5, 2), pmax.value)
   } else {
     zoomVolMin.value = Math.max(0, bp.vinf * 0.8)
     zoomVolMax.value = vmax.value
@@ -506,10 +961,7 @@ function zoomPreset(tier: string) {
     zoomPriceMax.value = pmax.value
   }
 }
-function onWheel(e: WheelEvent) {
-  if (e.deltaY < 0) zoomIn()
-  else zoomOut()
-}
+function onWheel(e: WheelEvent) { e.deltaY < 0 ? zoomIn() : zoomOut() }
 
 const gridVols = computed(() => {
   const range = zoomVolMax.value - zoomVolMin.value
@@ -528,21 +980,16 @@ const gridPrices = computed(() => {
   return arr
 })
 
-// Control points
 const cp = computed<ControlPoints>(() =>
   paramsToControlPoints(bp.vinf, vmax.value, pmax.value, localP0.value, bp.a, bp.b, bp.c, bp.d, bp.e)
 )
 
 const dragPoints = computed(() => ({
-  p2: cp.value.p2,
-  p3: cp.value.p3,
-  p4: cp.value.p4,
-  p5: cp.value.p5,
-  p6: cp.value.p6,
+  p2: cp.value.p2, p3: cp.value.p3, p4: cp.value.p4, p5: cp.value.p5, p6: cp.value.p6,
 }))
 
 const ptColors: Record<string, string> = {
-  p2: '#3b82f6', p3: '#3b82f6', p4: '#8b5cf6', p5: '#ef4444', p6: '#ef4444',
+  p2: '#3b82f6', p3: '#3b82f6', p4: '#8b5cf6', p5: '#ea580c', p6: '#ea580c',
 }
 const ptLabels: Record<string, string> = {
   p2: 'a', p3: 'b', p4: 'vinf', p5: 'c', p6: 'd,e',
@@ -557,7 +1004,63 @@ const tier2Path = computed(() => {
   return `M ${cx(c.p4.x)} ${cy(c.p4.y)} C ${cx(c.p5.x)} ${cy(c.p5.y)}, ${cx(c.p6.x)} ${cy(c.p6.y)}, ${cx(c.p7.x)} ${cy(c.p7.y)}`
 })
 
-// Outlier vote paths
+// Prix moyen avec abonnement : (abo + integral) / v
+// Uses generateCurve to get the Bézier price curve, then adds abo/v
+const avgPriceWithAboPath = computed(() => {
+  if (citizenAbo.value <= 0) return ''
+  const curve = generateCurve(bp.vinf, vmax.value, pmax.value, localP0.value, bp.a, bp.b, bp.c, bp.d, bp.e, 150)
+  const pts: string[] = []
+  for (let i = 1; i < curve.curveVolumes.length; i++) {
+    const v = curve.curveVolumes[i]
+    if (v < 1) continue
+    // Approximate bill at volume v: we use trapezoidal integration of marginal price
+    // Simpler: bill ≈ average_marginal_price * v, and average_marginal_price ≈ curvePrice at v
+    // More accurate: use the integral formulas. But for display, we use:
+    // prix_moyen = abo/v + prix_marginal(v) * correction
+    // Actually, the correct formula for a Bézier tariff:
+    // bill(v) = integral_0^v of marginal_price(u) du
+    // prix_moyen(v) = abo/v + bill(v)/v
+    // For simplicity and reactivity, we approximate bill(v) using trapezoidal sum
+    let bill = 0
+    for (let j = 1; j <= i; j++) {
+      const dv = curve.curveVolumes[j] - curve.curveVolumes[j - 1]
+      const avgP = (curve.curvePricesM3[j] + curve.curvePricesM3[j - 1]) / 2
+      bill += avgP * dv
+    }
+    const avgPrice = citizenAbo.value / v + bill / v
+    if (avgPrice >= 0 && avgPrice <= pmax.value * 2) {
+      pts.push(`${cx(v)},${cy(avgPrice)}`)
+    }
+  }
+  return pts.join(' ')
+})
+
+// Household dots: compute Bézier price at each household's volume
+const householdDots = computed(() => {
+  if (!householdVolumes.value.length) return []
+  const curve = generateCurve(bp.vinf, vmax.value, pmax.value, localP0.value, bp.a, bp.b, bp.c, bp.d, bp.e, 300)
+  const vols = curve.curveVolumes
+  const prices = curve.curvePricesM3
+
+  return householdVolumes.value.map(hh => {
+    const v = hh.volume_m3
+    // Find the price by linear interpolation in the generated curve
+    let price = 0
+    for (let j = 1; j < vols.length; j++) {
+      if ((vols[j - 1]! <= v && vols[j]! >= v) || (vols[j]! <= v && vols[j - 1]! >= v)) {
+        const dv = vols[j]! - vols[j - 1]!
+        if (Math.abs(dv) < 1e-10) { price = prices[j]!; break }
+        const t = (v - vols[j - 1]!) / dv
+        price = prices[j - 1]! + t * (prices[j]! - prices[j - 1]!)
+        break
+      }
+    }
+    // If volume beyond curve range, use last price
+    if (v >= vols[vols.length - 1]!) price = prices[prices.length - 1]!
+    return { volume: v, price, status: hh.status }
+  })
+})
+
 function outlierPath(vote: any, tier: number): string {
   const p0 = vote.computed_p0 || localP0.value
   const oc = paramsToControlPoints(vote.vinf, vmax.value, pmax.value, p0, vote.a, vote.b, vote.c, vote.d, vote.e)
@@ -585,7 +1088,7 @@ function onTouchMove(e: TouchEvent) { if (dragging.value && e.touches[0]) handle
 function onMouseUp() {
   if (dragging.value) {
     dragging.value = null
-    serverCompute()
+    recompute()
   }
 }
 
@@ -618,11 +1121,79 @@ function handleDrag(pt: { x: number; y: number }) {
       }
       break
     }
+    case 'medianBar': {
+      // Drag the median price bar → scale p0 and back-compute recettes
+      const newPrice = Math.max(0.01, Math.min(pmax.value * 0.8, p))
+      const oldMedian = medianPrice.value
+      if (oldMedian > 0.001 && hhData.value.length > 0) {
+        const scale = newPrice / oldMedian
+        const newP0 = localP0.value * scale
+        // Back-compute recettes from new p0
+        let totalAbo = 0, totalAlpha = 0, totalBeta = 0
+        for (const hh of hhData.value) {
+          totalAbo += hh.status === 'RS' ? abos.value : abop.value
+          const { alpha1, alpha2, beta2 } = computeIntegrals(
+            Math.max(hh.volume_m3, 1e-5), bp.vinf, vmax.value, pmax.value,
+            bp.a, bp.b, bp.c, bp.d, bp.e,
+          )
+          totalAlpha += alpha1 + alpha2
+          totalBeta += beta2
+        }
+        recettes.value = Math.max(0, newP0 * totalAlpha + totalAbo + totalBeta)
+        localP0.value = newP0
+      }
+      break
+    }
+  }
+}
+
+// ── Client-side household data for local computation ──
+const hhData = computed<HouseholdData[]>(() =>
+  householdVolumes.value.map(h => ({ volume_m3: h.volume_m3, status: h.status }))
+)
+
+// Median volume and median marginal price
+const medianVolume = computed(() => {
+  if (!householdVolumes.value.length) return 60
+  const sorted = [...householdVolumes.value].map(h => h.volume_m3).sort((a, b) => a - b)
+  const mid = Math.floor(sorted.length / 2)
+  return sorted.length % 2 === 0 ? (sorted[mid - 1]! + sorted[mid]!) / 2 : sorted[mid]!
+})
+
+const medianPrice = computed(() => {
+  if (!householdDots.value.length) return localP0.value * 0.3
+  const sorted = [...householdDots.value].map(d => d.price).sort((a, b) => a - b)
+  const mid = Math.floor(sorted.length / 2)
+  return sorted.length % 2 === 0 ? (sorted[mid - 1]! + sorted[mid]!) / 2 : sorted[mid]!
+})
+
+// Recompute p0 and impacts client-side (instant, no server round-trip)
+function recompute() {
+  if (hhData.value.length > 0) {
+    localP0.value = computeP0(
+      hhData.value, recettes.value, abop.value, abos.value,
+      bp.vinf, vmax.value, pmax.value,
+      bp.a, bp.b, bp.c, bp.d, bp.e,
+    )
+    const result = computeImpacts(
+      hhData.value, recettes.value, abop.value, abos.value,
+      bp.vinf, vmax.value, pmax.value,
+      bp.a, bp.b, bp.c, bp.d, bp.e,
+    )
+    impacts.value = result.impacts.map(imp => ({
+      volume: imp.volume,
+      old_price: imp.oldPrice,
+      new_price_rp: imp.newPriceRP,
+      new_price_rs: imp.newPriceRS,
+    }))
+  } else {
+    // Fallback to server if no household data yet
+    serverComputeFallback()
   }
 }
 
 let serverTimeout: ReturnType<typeof setTimeout> | null = null
-function serverCompute() {
+function serverComputeFallback() {
   if (serverTimeout) clearTimeout(serverTimeout)
   serverTimeout = setTimeout(async () => {
     try {
@@ -641,28 +1212,53 @@ function serverCompute() {
   }, 150)
 }
 
-// ── Chart 2: Baseline linear model ──
-const W2 = 300
-const H2 = 220
-const margin2 = { top: 10, right: 10, bottom: 24, left: 40 }
+// ── Chart 2: Baseline linear model — X AXIS INVERTED ──
+const W2 = 340
+const H2 = 230
+const margin2 = { top: 10, right: 42, bottom: 52, left: 12 }
 const plotW2 = W2 - margin2.left - margin2.right
 const plotH2 = H2 - margin2.top - margin2.bottom
 
-function cx2(v: number) { return margin2.left + (v / vmax.value) * plotW2 }
+// Baseline chart range: tight focus on first tier for detail on small consumptions
+const baselineVolMax = computed(() => {
+  const target = Math.max(bp.vinf * 0.8, 300)
+  return Math.min(Math.ceil(target / 50) * 50, vmax.value)
+})
+
+// INVERTED: high volumes left, 0 right
+function cx2(v: number) { return margin2.left + plotW2 - (v / baselineVolMax.value) * plotW2 }
 
 const maxBill = computed(() => {
-  if (!curveData.value?.baseline_bills_rp?.length) return 500
-  const mx = Math.max(...curveData.value.baseline_bills_rp)
-  return Math.ceil(mx * 1.1 / 100) * 100
+  if (!curveData.value?.baseline_bills_rp?.length || !curveData.value?.baseline_volumes?.length) return 500
+  // Only consider bills within the focused baseline range
+  const vols = curveData.value.baseline_volumes
+  const bills = curveData.value.baseline_bills_rp
+  let mx = 0
+  for (let i = 0; i < vols.length; i++) {
+    if (vols[i] <= baselineVolMax.value && bills[i] > mx) mx = bills[i]
+  }
+  return Math.ceil((mx || 500) * 1.15 / 100) * 100
 })
 
 function cy2bill(b: number) { return margin2.top + plotH2 - (b / maxBill.value) * plotH2 }
-function cy2price(p: number) { return margin2.top + plotH2 - (p / pmax.value) * plotH2 }
+// Focused price range for baseline charts
+const baselinePriceMax = computed(() => {
+  if (!curveData.value?.baseline_price_m3_rp?.length || !curveData.value?.baseline_volumes?.length) return pmax.value
+  const vols = curveData.value.baseline_volumes
+  const prices = curveData.value.baseline_price_m3_rp
+  let mx = 0
+  for (let i = 0; i < vols.length; i++) {
+    if (vols[i] <= baselineVolMax.value && vols[i] > 0.5 && prices[i] > mx) mx = prices[i]
+  }
+  return mx > 0 ? Math.ceil(mx * 1.3) : pmax.value
+})
+function cy2price(p: number) { return margin2.top + plotH2 - (p / baselinePriceMax.value) * plotH2 }
 
 const gridVols2 = computed(() => {
-  const step = Math.ceil(vmax.value / 5 / 100) * 100
+  const mx = baselineVolMax.value
+  const step = mx > 500 ? Math.ceil(mx / 5 / 100) * 100 : Math.ceil(mx / 5 / 50) * 50
   const arr: number[] = []
-  for (let v = step; v < vmax.value; v += step) arr.push(v)
+  for (let v = step; v < mx; v += step) arr.push(v)
   return arr
 })
 const gridBills = computed(() => {
@@ -672,9 +1268,10 @@ const gridBills = computed(() => {
   return arr
 })
 const gridPrices2 = computed(() => {
-  const step = Math.ceil(pmax.value / 4)
+  const mx = baselinePriceMax.value
+  const step = mx > 5 ? Math.ceil(mx / 4) : mx > 2 ? 1 : 0.5
   const arr: number[] = []
-  for (let p = step; p <= pmax.value; p += step) arr.push(p)
+  for (let p = step; p <= mx; p += step) arr.push(p)
   return arr
 })
 
@@ -685,27 +1282,166 @@ function toPolyline(vols: number[] | undefined, vals: number[] | undefined, cyFn
     pts.push(`${cx2(vols[i]!)},${cyFn(vals[i]!)}`)
   }
   const last = vols.length - 1
-  if (last % 4 !== 0) {
-    pts.push(`${cx2(vols[last]!)},${cyFn(vals[last]!)}`)
-  }
+  if (last % 4 !== 0) pts.push(`${cx2(vols[last]!)},${cyFn(vals[last]!)}`)
   return pts.join(' ')
 }
 
 const baselineBillRP = computed(() => toPolyline(curveData.value?.baseline_volumes, curveData.value?.baseline_bills_rp, cy2bill))
-const baselineBillRS = computed(() => toPolyline(curveData.value?.baseline_volumes, curveData.value?.baseline_bills_rs, cy2bill))
 const baselinePriceRP = computed(() => toPolyline(curveData.value?.baseline_volumes, curveData.value?.baseline_price_m3_rp, cy2price))
+const baselineBillRS = computed(() => toPolyline(curveData.value?.baseline_volumes, curveData.value?.baseline_bills_rs, cy2bill))
 const baselinePriceRS = computed(() => toPolyline(curveData.value?.baseline_volumes, curveData.value?.baseline_price_m3_rs, cy2price))
 
+// ── Chart 3: Marginal price + household distribution (full-width, population focus, inverted X) ──
+const Wmarg = 700
+const Hmarg = 380
+const margMargin = { top: 24, right: 52, bottom: 48, left: 42 }
+const margPlotW = Wmarg - margMargin.left - margMargin.right
+const margPlotH = Hmarg - margMargin.top - margMargin.bottom
+
+// Focus on population: 0 to ~600 m³
+const margVolMax = computed(() => {
+  if (!distBuckets30.value.length) return 600
+  // Find last bucket with significant count
+  const lastSig = [...distBuckets30.value].reverse().find(b => b.count >= 2)
+  return lastSig ? Math.min(Math.ceil((lastSig.high + 60) / 30) * 30, vmax.value) : 600
+})
+const margPriceMax = computed(() => {
+  if (!curveData.value?.p0_linear) return 5
+  // Cap to show detail around p0_linear; abo/v shoots up at tiny volumes so don't let it dominate
+  // Target: see the price at the first 30m³ bucket comfortably (abo/30 + p0 ≈ 3.3 + 1.x ≈ 5)
+  const p0lin = curveData.value.p0_linear
+  const aboOverThirty = abop.value / 30
+  return Math.ceil((aboOverThirty + p0lin) * 1.4)
+})
+
+// Inverted X: high volumes left, 0 right
+function margCx(v: number): number {
+  return margMargin.left + margPlotW - (v / margVolMax.value) * margPlotW
+}
+function margCyPrice(p: number): number {
+  return margMargin.top + margPlotH - (p / margPriceMax.value) * margPlotH
+}
+
+// Distribution (30m³ buckets)
+const distBuckets30 = ref<Array<{ low: number; high: number; count: number }>>([])
+
+// Filtered buckets visible in each chart's current zoom/range
+const visibleBuckets30Main = computed(() => {
+  return distBuckets30.value.filter(b =>
+    b.high > zoomVolMin.value && b.low < zoomVolMax.value && b.count > 0
+  )
+})
+const visibleBuckets30Baseline = computed(() => {
+  return distBuckets30.value.filter(b => b.low < baselineVolMax.value && b.count > 0)
+})
+
+const margMaxCount = computed(() => {
+  if (!distBuckets30.value.length) return 10
+  return Math.max(...distBuckets30.value.map(b => b.count)) * 1.2
+})
+function margCyCount(c: number): number {
+  return margMargin.top + margPlotH - (c / margMaxCount.value) * margPlotH
+}
+
+const margGridVols = computed(() => {
+  const step = margVolMax.value > 300 ? 60 : 30
+  const arr: number[] = []
+  for (let v = step; v < margVolMax.value; v += step) arr.push(v)
+  return arr
+})
+const margGridPrices = computed(() => {
+  const mx = margPriceMax.value
+  const step = mx > 5 ? Math.ceil(mx / 4) : mx > 2 ? 1 : 0.5
+  const arr: number[] = []
+  for (let p = step; p < mx; p += step) arr.push(p)
+  return arr
+})
+const margGridCounts = computed(() => {
+  const mx = margMaxCount.value
+  const step = Math.max(1, Math.ceil(mx / 4 / 10) * 10)
+  const arr: number[] = []
+  for (let c = step; c < mx; c += step) arr.push(c)
+  return arr
+})
+
+const margPriceLine = computed(() => {
+  const vols = curveData.value?.baseline_volumes
+  const prices = curveData.value?.baseline_price_m3_rp
+  if (!vols?.length || !prices?.length) return ''
+  const pts: string[] = []
+  for (let i = 0; i < vols.length; i += 3) {
+    const v = vols[i]!
+    if (v > margVolMax.value) break
+    pts.push(`${margCx(v)},${margCyPrice(prices[i]!)}`)
+  }
+  return pts.join(' ')
+})
+
+// Prix moyen avec abonnement citoyen sur le graphique marginal (linear model)
+const margAvgPriceWithAboLine = computed(() => {
+  if (citizenAbo.value <= 0) return ''
+  const vols = curveData.value?.baseline_volumes
+  if (!vols?.length) return ''
+  const p0lin = curveData.value?.p0_linear || 0
+  const pts: string[] = []
+  for (let i = 0; i < vols.length; i += 3) {
+    const v = vols[i]!
+    if (v < 1 || v > margVolMax.value) continue
+    const avgP = citizenAbo.value / v + p0lin
+    if (avgP <= margPriceMax.value * 1.5) {
+      pts.push(`${margCx(v)},${margCyPrice(avgP)}`)
+    }
+  }
+  return pts.join(' ')
+})
+
+// Household dots for baseline bill chart (bill = abo + p0_linear * volume)
+const householdDotsBill = computed(() => {
+  if (!householdVolumes.value.length || !curveData.value?.p0_linear) return []
+  const p0lin = curveData.value.p0_linear
+  return householdVolumes.value.map(hh => {
+    const abo = hh.status === 'RS' ? abos.value : abop.value
+    return { volume: hh.volume_m3, bill: abo + p0lin * hh.volume_m3 }
+  })
+})
+
+// Household dots for baseline price chart (price = abo/v + p0_linear)
+const householdDotsBaselinePrice = computed(() => {
+  if (!householdVolumes.value.length || !curveData.value?.p0_linear) return []
+  const p0lin = curveData.value.p0_linear
+  return householdVolumes.value
+    .filter(hh => hh.volume_m3 > 0)
+    .map(hh => {
+      const abo = hh.status === 'RS' ? abos.value : abop.value
+      return { volume: hh.volume_m3, price: abo / hh.volume_m3 + p0lin }
+    })
+})
+
+// Household dots for marginal price chart (linear model: price = abop/v + p0_linear)
+const householdDotsMarg = computed(() => {
+  if (!householdVolumes.value.length || !curveData.value?.p0_linear) return []
+  const p0lin = curveData.value.p0_linear
+  return householdVolumes.value
+    .filter(hh => hh.volume_m3 > 0 && hh.volume_m3 <= margVolMax.value)
+    .map(hh => {
+      const v = hh.volume_m3
+      const abo = hh.status === 'RS' ? abos.value : abop.value
+      const price = abo / v + p0lin
+      return { volume: v, price }
+    })
+})
+
 // ── Auth & vote ──
 async function authenticate() {
   authError.value = ''
   authLoading.value = true
   try {
-    const data = await api.post<{ access_token: string; role: string; commune_slug: string }>(
+    const data = await api.post<{ access_token: string; role: string; commune_slug: string; volume_m3?: number }>(
       '/auth/citizen/verify',
       { commune_slug: slug, auth_code: authCode.value.toUpperCase() },
     )
     authStore.setAuth(data.access_token, data.role, data.commune_slug)
+    if (data.volume_m3 != null) citizenVolume.value = data.volume_m3
   } catch (e: any) {
     authError.value = e.message || 'Code invalide'
   } finally {
@@ -717,10 +1453,15 @@ async function submitVote() {
   submitting.value = true
   voteSuccess.value = false
   try {
-    await api.post(`/communes/${slug}/votes`, {
+    const voteResult = await api.post<any>(`/communes/${slug}/votes`, {
       vinf: bp.vinf, a: bp.a, b: bp.b, c: bp.c, d: bp.d, e: bp.e,
     })
     voteSuccess.value = true
+    if (voteResult?.submitted_at) {
+      lastVoteDate.value = new Date(voteResult.submitted_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+    } else {
+      lastVoteDate.value = new Date().toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+    }
   } catch (e: any) {
     alert(e.message || 'Erreur lors de la soumission')
   } finally {
@@ -742,30 +1483,29 @@ onMounted(async () => {
     params.value = p
     curveData.value = curve
 
-    // Set tariff params + zoom
     vmax.value = p.vmax
     pmax.value = p.pmax
     recettes.value = p.recettes
     abop.value = p.abop
     abos.value = p.abos
+    differentiatedTariff.value = p.differentiated_tariff || false
     zoomVolMax.value = p.vmax
     zoomPriceMax.value = p.pmax
 
-    // Set initial Bezier params from median (or default)
-    if (curve.median) {
+    // Use published curve as initial state for citizen editing,
+    // but display the median as the result of votes
+    if (curve.published) {
+      bp.vinf = curve.published.vinf
+      bp.a = curve.published.a; bp.b = curve.published.b
+      bp.c = curve.published.c; bp.d = curve.published.d; bp.e = curve.published.e
+    } else if (curve.median) {
       bp.vinf = curve.median.vinf
-      bp.a = curve.median.a
-      bp.b = curve.median.b
-      bp.c = curve.median.c
-      bp.d = curve.median.d
-      bp.e = curve.median.e
+      bp.a = curve.median.a; bp.b = curve.median.b
+      bp.c = curve.median.c; bp.d = curve.median.d; bp.e = curve.median.e
     }
     localP0.value = curve.p0
-
-    // Set impacts from server
     impacts.value = curve.impacts || []
 
-    // Build simplified household list for client-side compute
     const stats = await api.get<any>(`/communes/${slug}/households/stats`)
     const hh: HouseholdData[] = []
     const avgVol = stats.avg_volume || 90
@@ -774,15 +1514,26 @@ onMounted(async () => {
     for (let i = 0; i < (stats.pro_count || 0); i++) hh.push({ volume_m3: avgVol, status: 'PRO' })
     households.value = hh
 
-    // Load all vote curves for outlier overlay
     try {
       outlierVotes.value = await api.get<any[]>(`/communes/${slug}/votes/current/overlay`)
-    } catch { /* endpoint may not exist yet */ }
+    } catch {}
+
+    try {
+      const dist = await api.get<any>(`/communes/${slug}/households/distribution?bucket_size=50`)
+      distBuckets.value = dist.buckets || []
+    } catch {}
+
+    try {
+      const dist30 = await api.get<any>(`/communes/${slug}/households/distribution?bucket_size=30`)
+      distBuckets30.value = dist30.buckets || []
+    } catch {}
+
+    try {
+      householdVolumes.value = await api.get<any[]>(`/communes/${slug}/households/volumes`)
+    } catch {}
 
-    // Default zoom to "Population" preset
     zoomPreset('tier1')
 
-    // Start countdown if deadline set
     if (c.vote_deadline) {
       updateCountdown()
       countdownInterval = setInterval(updateCountdown, 1000)
@@ -797,9 +1548,7 @@ onMounted(async () => {
 function renderMarkdown(md: string): string {
   if (!md) return ''
   return md
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
     .replace(/^### (.+)$/gm, '<h3>$1</h3>')
     .replace(/^## (.+)$/gm, '<h2>$1</h2>')
     .replace(/^# (.+)$/gm, '<h1>$1</h1>')
@@ -813,78 +1562,214 @@ function renderMarkdown(md: string): string {
 </script>
 
 <style scoped>
+/* ══════════════════════════════════════
+   ADAPTIVE CSS — mobile-first + clamp()
+   Breakpoints: 480 / 768 / 1024
+   Chart density via --chart-scale (set by DisplaySettings)
+   ══════════════════════════════════════ */
+
+/* ── Chart density support ── */
+.chart-container, .chart-main {
+  transform: scale(var(--chart-scale, 1));
+  transform-origin: top center;
+}
+
+/* ── Chart cards ── */
+.chart-card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: clamp(8px, 2vw, 12px);
+  padding: clamp(0.75rem, 2vw, 1.5rem);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.chart-title {
+  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 0.15rem;
+}
+
+.chart-subtitle {
+  font-size: clamp(0.72rem, 1.8vw, 0.82rem);
+  color: #64748b;
+}
+
+/* ── Zoom bar ── */
 .zoom-bar {
   display: flex;
-  gap: 0.25rem;
+  gap: 0.3rem;
   align-items: center;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
   flex-wrap: wrap;
 }
 
+.zoom-info {
+  font-size: 0.72rem;
+  color: #94a3b8;
+  margin-left: 0.25rem;
+}
+
 .btn-xs {
-  padding: 0.15rem 0.5rem;
-  font-size: 0.7rem;
-  border-radius: 4px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.72rem;
+  border-radius: 6px;
+  font-weight: 500;
 }
 
 .toggle-label {
   display: flex;
   align-items: center;
   gap: 0.35rem;
-  font-size: 0.8rem;
+  font-size: clamp(0.72rem, 1.8vw, 0.8rem);
   color: var(--color-text-muted);
   cursor: pointer;
 }
-
 .toggle-label input { cursor: pointer; }
 
+.zoom-separator {
+  width: 1px;
+  height: 18px;
+  background: #e2e8f0;
+  margin: 0 0.25rem;
+}
+@media (max-width: 480px) {
+  .zoom-separator { display: none; }
+  .zoom-bar { gap: 0.2rem; }
+}
+
+.abo-input-label {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+.abo-input {
+  width: 56px;
+  padding: 0.15rem 0.35rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 5px;
+  font-size: 0.78rem;
+  text-align: right;
+  font-family: monospace;
+  background: white;
+}
+.abo-input:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
+}
+
+/* ── SVG axes ── */
+.axis-label { font-size: 10.5px; fill: #475569; font-weight: 500; font-family: system-ui, -apple-system, sans-serif; }
+.axis-label-sm { font-size: 10px; fill: #64748b; font-weight: 500; font-family: system-ui, -apple-system, sans-serif; }
+.axis-title { font-size: 11px; fill: #64748b; font-weight: 600; font-family: system-ui, -apple-system, sans-serif; }
+
+/* ── Chart containers ── */
 .chart-container svg {
   width: 100%;
   height: auto;
   user-select: none;
 }
 
+.chart-main svg {
+  border-radius: 8px;
+}
+
 .chart-container svg path {
   stroke-linecap: round;
   stroke-linejoin: round;
-  transition: stroke-width 0.2s ease;
 }
 
-.chart-container svg circle {
-  transition: r 0.2s ease, fill 0.2s ease;
+/* ── Drag handles ── */
+.drag-handle {
+  cursor: grab;
+  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
+  transition: r 0.15s ease;
 }
+.drag-handle:hover { r: 10; }
 
-.chart-container svg circle:hover {
-  r: 10;
-  fill: #1d4ed8;
-}
-
-/* Auth options: 2 columns */
-.auth-options {
+/* ── Main layout: chart + sidebar ── */
+.main-layout {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  grid-template-columns: 1fr 260px;
+  gap: clamp(0.75rem, 2vw, 1rem);
+  align-items: start;
+  margin-bottom: 1.5rem;
 }
-@media (max-width: 700px) {
-  .auth-options { grid-template-columns: 1fr; }
+@media (max-width: 1024px) {
+  .main-layout { grid-template-columns: 1fr 220px; }
+}
+@media (max-width: 768px) {
+  .main-layout { grid-template-columns: 1fr; }
+}
+.main-layout-chart { min-width: 0; }
+.main-layout-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+@media (max-width: 768px) {
+  .main-layout-sidebar {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+}
+@media (max-width: 480px) {
+  .main-layout-sidebar { grid-template-columns: 1fr; }
+}
+.sidebar-card {
+  padding: clamp(0.65rem, 2vw, 0.85rem) !important;
+  font-size: 0.85rem;
+}
+.sidebar-auth-block h4 {
+  font-size: 0.9rem;
+  font-weight: 700;
+  margin-bottom: 0.15rem;
+}
+.sidebar-muted {
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+  margin-bottom: 0.5rem;
+}
+.countdown-compact {
+  display: flex;
+  gap: 0.5rem;
+  font-size: 1rem;
+}
+.countdown-compact span strong {
+  font-weight: 700;
 }
 
-.auth-option {
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 1rem;
-  background: var(--color-bg);
+/* ── Section title ── */
+.section-title {
+  font-size: clamp(1rem, 2.5vw, 1.15rem);
+  font-weight: 700;
+  color: #1e293b;
+  margin: clamp(1rem, 3vw, 1.5rem) 0 clamp(0.75rem, 2vw, 1rem);
+  padding-bottom: 0.4rem;
+  border-bottom: 2px solid #e2e8f0;
 }
 
-/* Params + impacts: 2 columns */
+/* ── Params + impacts ── */
 .params-impacts-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
 }
-@media (max-width: 700px) {
-  .params-impacts-layout { grid-template-columns: 1fr; }
-}
+@media (max-width: 768px) { .params-impacts-layout { grid-template-columns: 1fr; } }
 
 .param-grid {
   display: grid;
@@ -900,32 +1785,96 @@ function renderMarkdown(md: string): string {
 .param-label { font-size: 0.75rem; color: var(--color-text-muted); }
 .param-val { font-family: monospace; font-weight: 600; font-size: 0.85rem; }
 
-.table-sm { font-size: 0.8rem; }
-.table-sm th, .table-sm td { padding: 0.25rem 0.5rem; }
+.table-sm { font-size: clamp(0.72rem, 1.8vw, 0.8rem); }
+.table-sm th, .table-sm td { padding: 0.3rem 0.5rem; }
 
-.text-up { color: #dc2626; }
-.text-down { color: #059669; }
+.text-up { color: #dc2626; font-weight: 600; }
+.text-down { color: #059669; font-weight: 600; }
 
+/* ── Baseline charts ── */
 .baseline-charts {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
 }
-@media (max-width: 700px) {
-  .baseline-charts { grid-template-columns: 1fr; }
-}
+@media (max-width: 768px) { .baseline-charts { grid-template-columns: 1fr; } }
 
-.grid-5-info {
+/* ── Key metrics banner ── */
+.key-metrics-banner {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  gap: 1rem;
-  text-align: center;
+  gap: clamp(0.5rem, 2vw, 1rem);
+  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
+  border: 1px solid #e2e8f0;
+  border-radius: clamp(8px, 2vw, 12px);
+  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(0.75rem, 2vw, 1.5rem);
 }
-@media (max-width: 700px) {
-  .grid-5-info { grid-template-columns: repeat(3, 1fr); }
-}
-.info-label { font-size: 0.75rem; color: var(--color-text-muted); }
+@media (max-width: 1024px) { .key-metrics-banner { grid-template-columns: repeat(3, 1fr); } }
+@media (max-width: 600px) { .key-metrics-banner { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 380px) { .key-metrics-banner { grid-template-columns: 1fr; } }
 
+.key-metric {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.2rem;
+}
+.key-metric-value {
+  font-size: clamp(1.1rem, 3vw, 1.4rem);
+  font-weight: 700;
+  color: #1e293b;
+}
+.key-metric-label {
+  font-size: clamp(0.68rem, 1.6vw, 0.78rem);
+  color: #64748b;
+  font-weight: 500;
+}
+.key-metric-tag {
+  font-size: 0.62rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.5rem;
+  border-radius: 20px;
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+.key-metric-tag-calc {
+  background: #eff6ff;
+  color: #2563eb;
+  border-color: #bfdbfe;
+}
+.key-metric-input {
+  opacity: 0.85;
+}
+.key-metric-result {}
+.key-metric-highlight {
+  background: rgba(5, 150, 105, 0.06);
+  border-radius: 8px;
+  padding: 0.5rem;
+}
+.key-metric-highlight .key-metric-value {
+  color: #059669;
+}
+
+/* ── Vote result rows ── */
+.vote-result-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: clamp(0.72rem, 1.8vw, 0.8rem);
+  padding: 0.2rem 0;
+  color: #475569;
+}
+.vote-result-row strong {
+  font-family: monospace;
+  font-size: 0.88rem;
+  color: #1e293b;
+}
+
+/* ── Alerts ── */
 .alert-success {
   background: #dcfce7;
   color: #166534;
@@ -934,26 +1883,14 @@ function renderMarkdown(md: string): string {
   font-size: 0.85rem;
 }
 
-/* Vote button */
-.btn-lg {
-  padding: 0.75rem 2rem;
-  font-size: 1.1rem;
-  font-weight: 600;
+/* ── Page header adaptive ── */
+.page-header h1 {
+  font-size: clamp(1.25rem, 4vw, 1.75rem);
 }
 
-/* Countdown */
-.countdown {
-  display: flex;
-  gap: 0.75rem;
-  font-size: 1.5rem;
-}
-.countdown-unit strong {
-  font-size: 2rem;
-  font-weight: 700;
-}
-
-.cms-body { line-height: 1.7; font-size: 0.9rem; }
-.cms-body :deep(h2) { font-size: 1.2rem; margin: 0.75rem 0 0.5rem; }
+/* ── CMS ── */
+.cms-body { line-height: 1.7; font-size: clamp(0.82rem, 2vw, 0.9rem); }
+.cms-body :deep(h2) { font-size: clamp(1.05rem, 2.5vw, 1.2rem); margin: 0.75rem 0 0.5rem; }
 .cms-body :deep(h3) { font-size: 1.05rem; margin: 0.5rem 0 0.25rem; }
 .cms-body :deep(p) { margin: 0.5rem 0; }
 .cms-body :deep(a) { color: var(--color-primary); }
diff --git a/frontend/app/pages/login/admin.vue b/frontend/app/pages/login/admin.vue
index 80e142e..1cf5e87 100644
--- a/frontend/app/pages/login/admin.vue
+++ b/frontend/app/pages/login/admin.vue
@@ -22,6 +22,11 @@
           <span v-else>Se connecter</span>
         </button>
       </form>
+
+      <!-- Dev credentials hint -->
+      <div v-if="isDev" style="margin-top: 1rem; padding: 0.75rem; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px; font-size: 0.8rem;">
+        <strong>Dev:</strong> superadmin@sejeteralo.fr / superadmin
+      </div>
     </div>
 
     <p style="text-align: center; margin-top: 1rem;">
@@ -39,6 +44,7 @@ const email = ref('')
 const password = ref('')
 const error = ref('')
 const loading = ref(false)
+const isDev = import.meta.dev
 
 async function login() {
   error.value = ''
diff --git a/frontend/app/pages/login/commune.vue b/frontend/app/pages/login/commune.vue
index 99fd4ba..1e64197 100644
--- a/frontend/app/pages/login/commune.vue
+++ b/frontend/app/pages/login/commune.vue
@@ -22,6 +22,11 @@
           <span v-else>Se connecter</span>
         </button>
       </form>
+
+      <!-- Dev credentials hint -->
+      <div v-if="isDev" style="margin-top: 1rem; padding: 0.75rem; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px; font-size: 0.8rem;">
+        <strong>Dev:</strong> saou@sejeteralo.fr / saou2024
+      </div>
     </div>
 
     <p style="text-align: center; margin-top: 1rem;">
@@ -39,6 +44,7 @@ const email = ref('')
 const password = ref('')
 const error = ref('')
 const loading = ref(false)
+const isDev = import.meta.dev
 
 async function login() {
   error.value = ''
diff --git a/frontend/app/utils/bezier-math.ts b/frontend/app/utils/bezier-math.ts
index 55217ad..6f7c486 100644
--- a/frontend/app/utils/bezier-math.ts
+++ b/frontend/app/utils/bezier-math.ts
@@ -277,7 +277,7 @@ export function computeImpacts(
   c: number,
   d: number,
   e: number,
-  referenceVolumes: number[] = [30, 60, 90, 150, 300],
+  referenceVolumes: number[] = [30, 60, 90, 150, 300, 600],
 ): { p0: number; impacts: ImpactRow[] } {
   const p0 = computeP0(households, recettes, abop, abos, vinf, vmax, pmax, a, b, c, d, e)