feat: government vector tiles, dept selection, fix section rendering

Replace self-hosted PMTiles (867MB) and large GeoJSON with government
vector tile APIs for commune and section levels. Add department selection
workflow for commune/postcode/section levels. Fix section data loading
when switching levels with dept already selected.

- Use openmaptiles.geo.data.gouv.fr admin tiles for communes
- Use openmaptiles.geo.data.gouv.fr cadastre tiles for sections
- On-demand section data loading per department
- Sourcedata event handler for tile re-coloring
- New GeoJSON files for regions and departments
- Updated notebooks and build scripts

.gitignore

@@ -4,6 +4,9 @@ data/processed/
 # NOTE: data/aggregated/ is NOT ignored - those JSON files are needed by the app
 # The monolithic section file is replaced by per-department splits in sections/
 data/aggregated/prices_section.json
+# PMTiles replaced by government vector tiles (openmaptiles.geo.data.gouv.fr)
+data/aggregated/sections.pmtiles
+data/aggregated/communes.geojson
 
 # ---- Python ----
 __pycache__/

app.py

@@ -26,10 +26,18 @@ async def index():
     return FileResponse(STATIC_DIR / "index.html")
 
 
+MEDIA_TYPES = {
+    ".json": "application/json",
+    ".geojson": "application/geo+json",
+    ".pmtiles": "application/octet-stream",
+}
+
+
 @app.get("/data/{filename:path}")
 async def get_data(filename: str):
-    """Serve pre-computed JSON data files."""
+    """Serve pre-computed data files (JSON, GeoJSON, PMTiles)."""
     path = DATA_DIR / filename
     if not path.exists() or not path.is_file():
         return {"error": "not found"}, 404
-    return FileResponse(path, media_type="application/json")
+    media = MEDIA_TYPES.get(path.suffix, "application/octet-stream")
+    return FileResponse(path, media_type=media)

notebooks/{03_challenge_answers.ipynb → 02_challenge_answers.ipynb}

@@ -21,8 +21,7 @@
     "5. [Commune Level](#5.-Commune)\n",
     "6. [Postcode Level](#6.-Postcode)\n",
     "7. [Cadastral Section Level](#7.-Section)\n",
-    "8. [Top 10 Cities Deliverable](#8.-Top-10-Cities)\n",
-    "9. [Evaluation Checklist](#9.-Evaluation)"
+    "8. [Top 10 Cities Deliverable](#8.-Top-10-Cities)\n"
    ]
   },
   {
@@ -38,6 +37,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "ddb44b5b",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -77,6 +77,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "b17b7899",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -103,6 +104,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "67148b23",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -147,6 +149,7 @@
   },
   {
    "cell_type": "markdown",
+   "id": "69a68011",
    "metadata": {},
    "source": [
     "---\n",
@@ -158,6 +161,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "c9882b61",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -189,6 +193,7 @@
   },
   {
    "cell_type": "markdown",
+   "id": "e0c60acc",
    "metadata": {},
    "source": [
     "---\n",
@@ -200,6 +205,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "43dbebd0",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -241,6 +247,7 @@
   },
   {
    "cell_type": "markdown",
+   "id": "17b47e41",
    "metadata": {},
    "source": [
     "---\n",
@@ -252,6 +259,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "1fe214a6",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -294,6 +302,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "4a1a77b6",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -332,6 +341,7 @@
   },
   {
    "cell_type": "markdown",
+   "id": "725801e8",
    "metadata": {},
    "source": [
     "---\n",
@@ -343,6 +353,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "a1fef1bc",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -392,6 +403,7 @@
   },
   {
    "cell_type": "markdown",
+   "id": "0e2d7269",
    "metadata": {},
    "source": [
     "---\n",
@@ -403,6 +415,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "3a0338a5",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -459,6 +472,7 @@
   },
   {
    "cell_type": "markdown",
+   "id": "95cafc9a",
    "metadata": {},
    "source": [
     "---\n",
@@ -472,6 +486,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "2aec53bd",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -514,6 +529,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "3c9c39a2",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -541,17 +557,36 @@
   },
   {
    "cell_type": "markdown",
+   "id": "6f8bdca0",
    "metadata": {},
    "source": [
     "---\n",
     "## 8. Top 10 Cities Deliverable\n",
     "\n",
-    "Market price per m² by property type for the 10 largest French cities."
+    "Market price per m² by property type for the 10 largest French cities by commune population.\n",
+    "\n",
+    "**Source:** [INSEE Recensement de la population — Population municipale des communes](https://www.data.gouv.fr/datasets/population-municipale-des-communes-france-entiere)\n",
+    "\n",
+    "| Rank | City | Population | INSEE Code |\n",
+    "|------|------|-----------|------------|\n",
+    "| 1 | Paris | 2,103,778 | 75056 |\n",
+    "| 2 | Marseille | 886,040 | 13055 |\n",
+    "| 3 | Lyon | 519,127 | 69123 |\n",
+    "| 4 | Toulouse | 514,819 | 31555 |\n",
+    "| 5 | Nice | 357,737 | 06088 |\n",
+    "| 6 | Nantes | 327,734 | 44109 |\n",
+    "| 7 | Montpellier | 310,240 | 34172 |\n",
+    "| 8 | Strasbourg* | 293,771 | 67482 |\n",
+    "| 9 | Bordeaux | 267,991 | 33063 |\n",
+    "| 10 | Lille | 238,246 | 59350 |\n",
+    "\n",
+    "*\\*Strasbourg (dept 67, Alsace-Moselle) has no DVF data available.*"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "dd01d013",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -585,6 +620,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "id": "97dd0ef5",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -609,67 +645,6 @@
     "plt.show()"
    ]
   },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "---\n",
-    "## 9. Evaluation Checklist\n",
-    "\n",
-    "| # | Criterion | Status | Evidence |\n",
-    "|---|-----------|--------|----------|\n",
-    "| 1 | Is the colored map loading? | **Yes** | Live app at `localhost:7860`, maps render in <2s |\n",
-    "| 2 | Is the map usable and not laggy? | **Yes** | Vector tiles + pre-computed JSON = instant transitions |\n",
-    "| 3 | Is the map refreshing aggregation level on zoom? | **Yes** | 6 zoom breakpoints trigger level switches |\n",
-    "| 4 | Are all 6 aggregation levels present? | **Yes** | Country, Region, Department, Commune, Postcode, Section |\n",
-    "| 5 | Are the price estimates plausible? | **Yes** | Validated against DVF Official & RealAdvisor (see Notebook 1 §8) |\n",
-    "| 6 | Is the data complete or was it subset? | **Complete** | All 97 departments, 33k+ communes, 260k+ sections |\n",
-    "| 7 | The processing code is clean, clear and reusable | **Yes** | Modular `src/` package: config, downloader, cleaner, aggregator, top_cities |\n",
-    "| 8 | The architecture is robust and logical | **Yes** | Pipeline: download → clean → aggregate → export → serve |\n",
-    "| 9 | App is hosted and functional | **Yes** | Docker + Hugging Face Spaces deployment |"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Architecture summary\n",
-    "print(\"\"\"\n",
-    "PROJECT ARCHITECTURE\n",
-    "====================\n",
-    "\n",
-    "┌─────────────────┐     ┌────────────────┐     ┌─────────────────┐\n",
-    "│ DVF Raw Data    │ ───> │ src/cleaner.py │ ───> │ Clean Parquet   │\n",
-    "│ (5 years, ~3GB) │     │ - filter       │     │ (~4.6M rows)    │\n",
-    "└─────────────────┘     │ - dedup        │     └───────┬─────────┘\n",
-    "                         │ - outliers     │             │\n",
-    "                         └────────────────┘             │\n",
-    "                                                     │\n",
-    "                    ┌───────────────────────────────┘\n",
-    "                    │\n",
-    "               ┌────┴────────────┐     ┌─────────────────┐\n",
-    "               │ src/aggregator │ ───> │ JSON files      │\n",
-    "               │ - WTM          │     │ - 6 levels      │\n",
-    "               │ - n_eff        │     │ - 3 prop types  │\n",
-    "               │ - confidence   │     └───────┬─────────┘\n",
-    "               └─────────────────┘             │\n",
-    "                                                │\n",
-    "                    ┌─────────────────────────────┘\n",
-    "                    │\n",
-    "               ┌────┴────────────┐     ┌─────────────────┐\n",
-    "               │ FastAPI +      │ ───> │ MapLibre GL JS  │\n",
-    "               │ Static Server  │     │ + Vector Tiles  │\n",
-    "               └─────────────────┘     └─────────────────┘\n",
-    "\n",
-    "METHODOLOGY: Time-Weighted Trimmed Mean (WTM)\n",
-    "- Temporal decay: λ=0.97/month (half-life ≈23 months)\n",
-    "- Trim: 20% from each tail (robust to outliers)\n",
-    "- Quality: Kish's n_eff + composite confidence score\n",
-    "\"\"\")"
-   ]
-  },
   {
    "cell_type": "markdown",
    "metadata": {},

scripts/build_postcode_geojson.py

@@ -0,0 +1,203 @@
+"""
+Build clean postcode GeoJSON by dissolving commune boundaries by postcode.
+
+Downloads commune contours from geo.api.gouv.fr (per department),
+maps each commune to its postcode(s), and dissolves geometries by postcode.
+This produces non-overlapping postcode polygons.
+
+Key design decision: each commune is assigned to ONE postcode only (the first
+in sorted order) to prevent overlapping boundaries. For Paris/Lyon/Marseille,
+arrondissement boundaries are used instead of the meta-commune.
+"""
+
+import json
+import time
+import urllib.request
+import geopandas as gpd
+import pandas as pd
+from shapely.ops import unary_union
+from pathlib import Path
+
+OUTPUT_PATH = Path(__file__).parent.parent / "data" / "aggregated" / "postcodes.geojson"
+
+# All metropolitan + DOM department codes
+DEPT_CODES = [
+    "01","02","03","04","05","06","07","08","09","10",
+    "11","12","13","14","15","16","17","18","19","21",
+    "22","23","24","25","26","27","28","29","2A","2B",
+    "30","31","32","33","34","35","36","37","38","39",
+    "40","41","42","43","44","45","46","47","48","49",
+    "50","51","52","53","54","55","56","57","58","59",
+    "60","61","62","63","64","65","66","67","68","69",
+    "70","71","72","73","74","75","76","77","78","79",
+    "80","81","82","83","84","85","86","87","88","89",
+    "90","91","92","93","94","95",
+    "971","972","973","974","976",
+]
+
+# Paris/Lyon/Marseille meta-communes that need arrondissement-level treatment
+ARRONDISSEMENT_CITIES = {
+    "75056": "Paris",
+    "69123": "Lyon",
+    "13055": "Marseille",
+}
+
+
+def fetch_url(url: str) -> dict | None:
+    """Fetch JSON from a URL."""
+    try:
+        req = urllib.request.Request(url, headers={"User-Agent": "Mozilla/5.0"})
+        with urllib.request.urlopen(req, timeout=30) as resp:
+            return json.loads(resp.read().decode())
+    except Exception as e:
+        print(f"  WARNING: Failed to fetch {url}: {e}")
+        return None
+
+
+def fetch_dept_communes(dept_code: str) -> list[dict]:
+    """Fetch communes with contours for a department from geo.api.gouv.fr."""
+    url = (
+        f"https://geo.api.gouv.fr/departements/{dept_code}/communes"
+        f"?fields=code,nom,codesPostaux,contour&format=geojson&geometry=contour"
+    )
+    data = fetch_url(url)
+    return data.get("features", []) if data else []
+
+
+def fetch_arrondissements(city_code: str) -> list[dict]:
+    """Fetch arrondissement boundaries for Paris/Lyon/Marseille."""
+    url = (
+        f"https://geo.api.gouv.fr/communes/{city_code}"
+        f"?type=arrondissement-municipal"
+        f"&fields=code,nom,codesPostaux,contour&format=geojson"
+    )
+    data = fetch_url(url)
+    if data and "features" in data:
+        return data["features"]
+    # API might return a single object instead of FeatureCollection
+    if data and data.get("type") == "Feature":
+        return [data]
+    return []
+
+
+def fetch_arrondissements_list(city_code: str) -> list[dict]:
+    """Fetch arrondissements for a city as a list of GeoJSON features."""
+    # The arrondissements API endpoint
+    url = (
+        f"https://geo.api.gouv.fr/communes"
+        f"?codeParent={city_code}&type=arrondissement-municipal"
+        f"&fields=code,nom,codesPostaux,contour&format=geojson&geometry=contour"
+    )
+    data = fetch_url(url)
+    if data and "features" in data:
+        return data["features"]
+    return []
+
+
+def build_postcode_geojson():
+    """Main pipeline: download communes, dissolve by postcode, export GeoJSON."""
+    print("=== Building clean postcode boundaries ===\n")
+
+    # Step 1: Download all commune features with their postcodes
+    all_rows = []  # (postcode, geometry)
+    total_communes = 0
+    skip_codes = set(ARRONDISSEMENT_CITIES.keys())
+
+    for i, dept in enumerate(DEPT_CODES):
+        print(f"[{i+1}/{len(DEPT_CODES)}] Fetching dept {dept}...", end=" ", flush=True)
+        features = fetch_dept_communes(dept)
+        print(f"{len(features)} communes")
+
+        for f in features:
+            geom = f.get("geometry")
+            props = f.get("properties", {})
+            code = props.get("code", "")
+            postcodes = props.get("codesPostaux", [])
+
+            if not geom or not postcodes:
+                continue
+
+            # Skip meta-communes (Paris/Lyon/Marseille) - handle via arrondissements
+            if code in skip_codes:
+                continue
+
+            # Assign commune to ONE postcode only (first in sorted order)
+            # This prevents overlapping boundaries for multi-postcode communes
+            pc = sorted(postcodes)[0]
+            all_rows.append({"codePostal": pc, "geometry": geom})
+            total_communes += 1
+
+        # Be polite to the API
+        if i % 10 == 9:
+            time.sleep(0.5)
+
+    # Step 1b: Fetch arrondissements for Paris/Lyon/Marseille
+    for city_code, city_name in ARRONDISSEMENT_CITIES.items():
+        print(f"Fetching {city_name} arrondissements...", end=" ", flush=True)
+        features = fetch_arrondissements_list(city_code)
+        print(f"{len(features)} arrondissements")
+
+        for f in features:
+            geom = f.get("geometry")
+            props = f.get("properties", {})
+            postcodes = props.get("codesPostaux", [])
+
+            if not geom or not postcodes:
+                continue
+
+            # Each arrondissement typically maps to one postcode
+            pc = sorted(postcodes)[0]
+            all_rows.append({"codePostal": pc, "geometry": geom})
+            total_communes += 1
+
+        time.sleep(0.3)
+
+    print(f"\nTotal communes/arrondissements fetched: {total_communes}")
+    print(f"Total rows: {len(all_rows)}")
+
+    # Step 2: Build GeoDataFrame
+    print("\nBuilding GeoDataFrame...")
+    gdf = gpd.GeoDataFrame.from_features(
+        [{"type": "Feature", "geometry": r["geometry"], "properties": {"codePostal": r["codePostal"]}} for r in all_rows],
+        crs="EPSG:4326",
+    )
+    print(f"  Shape: {gdf.shape}")
+    print(f"  Unique postcodes: {gdf['codePostal'].nunique()}")
+
+    # Step 3: Dissolve by postcode (union geometries from different communes)
+    print("\nDissolving by postcode...")
+    dissolved = gdf.dissolve(by="codePostal", aggfunc="first").reset_index()
+    print(f"  Dissolved features: {len(dissolved)}")
+
+    # Step 4: Simplify geometries for web (tolerance ~330m, fine for zoom 11-13)
+    print("\nSimplifying geometries...")
+    dissolved["geometry"] = dissolved["geometry"].simplify(tolerance=0.003, preserve_topology=True)
+
+    # Step 5: Export
+    print(f"\nExporting to {OUTPUT_PATH}...")
+    dissolved.to_file(OUTPUT_PATH, driver="GeoJSON")
+
+    # Post-process: reduce coordinate precision
+    print("Post-processing: reducing coordinate precision...")
+    with open(OUTPUT_PATH) as f:
+        geojson = json.load(f)
+
+    def round_coords(coords):
+        if isinstance(coords[0], (int, float)):
+            return [round(c, 4) for c in coords]
+        return [round_coords(c) for c in coords]
+
+    for feature in geojson["features"]:
+        feature["geometry"]["coordinates"] = round_coords(feature["geometry"]["coordinates"])
+
+    with open(OUTPUT_PATH, "w") as f:
+        json.dump(geojson, f, separators=(",", ":"))
+
+    final_size = OUTPUT_PATH.stat().st_size / (1024 * 1024)
+    print(f"\nDone! Output: {OUTPUT_PATH}")
+    print(f"  Features: {len(geojson['features'])}")
+    print(f"  File size: {final_size:.1f} MB")
+
+
+if __name__ == "__main__":
+    build_postcode_geojson()

scripts/build_sections_pmtiles.sh

@@ -0,0 +1,59 @@
+#!/bin/bash
+# Download all per-department cadastral section GeoJSON, enrich with price data, and build PMTiles
+set -e
+
+BASEDIR="$(cd "$(dirname "$0")/.." && pwd)"
+OUTDIR="$BASEDIR/data/aggregated"
+TMPDIR="$BASEDIR/.tmp_sections"
+ENRICHED="$BASEDIR/.tmp_sections_enriched"
+mkdir -p "$TMPDIR"
+BASE_URL="https://cadastre.data.gouv.fr/data/etalab-cadastre/latest/geojson/departements"
+
+# All French departments
+DEPTS="01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 2A 2B 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 971 972 973 974 976"
+
+echo "=== Step 1: Downloading section GeoJSON per department ==="
+for dept in $DEPTS; do
+    outfile="$TMPDIR/${dept}.geojson"
+    if [ -f "$outfile" ]; then
+        echo "  $dept: exists, skip"
+        continue
+    fi
+    url="${BASE_URL}/${dept}/cadastre-${dept}-sections.json.gz"
+    echo -n "  $dept: "
+    if curl -sL --fail "$url" | gunzip > "$outfile" 2>/dev/null; then
+        size=$(du -h "$outfile" | cut -f1)
+        echo "$size"
+    else
+        echo "FAILED (no data?)"
+        rm -f "$outfile"
+    fi
+done
+
+echo ""
+echo "=== Step 2: Enriching GeoJSON with price data ==="
+python3 "$BASEDIR/scripts/enrich_sections.py"
+
+echo ""
+echo "=== Step 3: Building PMTiles with tippecanoe ==="
+echo "Input files: $(ls "$ENRICHED"/*.geojson 2>/dev/null | wc -l)"
+
+# Use main disk for tippecanoe temp files (not /tmp which may be tmpfs)
+export TMPDIR="$TMPDIR"
+
+tippecanoe \
+    -o "$OUTDIR/sections.pmtiles" \
+    -Z0 -z14 \
+    -l sections \
+    --no-feature-limit \
+    --no-tile-size-limit \
+    --drop-densest-as-needed \
+    --extend-zooms-if-still-dropping \
+    --force \
+    "$ENRICHED"/*.geojson
+
+echo ""
+ls -lh "$OUTDIR/sections.pmtiles"
+echo "=== Done! Cleaning up ==="
+
+rm -rf "$TMPDIR" "$ENRICHED"

scripts/download_sections_geo.py

@@ -0,0 +1,52 @@
+"""Download per-department cadastral section GeoJSON from cadastre.data.gouv.fr."""
+
+import gzip
+import json
+import urllib.request
+from pathlib import Path
+
+OUT_DIR = Path(__file__).resolve().parent.parent / "data" / "aggregated" / "sections_geo"
+OUT_DIR.mkdir(parents=True, exist_ok=True)
+
+BASE_URL = "https://cadastre.data.gouv.fr/data/etalab-cadastre/latest/geojson/departements"
+
+# All departments (mainland + overseas)
+DEPTS = (
+    [f"{i:02d}" for i in range(1, 20)]
+    + ["2A", "2B"]
+    + [f"{i:02d}" for i in range(21, 96)]
+    + ["971", "972", "973", "974", "976"]
+)
+
+
+def download_dept(code: str) -> None:
+    out_path = OUT_DIR / f"{code}.geojson"
+    if out_path.exists():
+        print(f"  {code}: already exists, skipping")
+        return
+
+    url = f"{BASE_URL}/{code}/cadastre-{code}-sections.json.gz"
+    print(f"  {code}: downloading from {url} ...")
+    try:
+        resp = urllib.request.urlopen(url, timeout=60)
+        raw = gzip.decompress(resp.read())
+        # Validate it's proper JSON
+        data = json.loads(raw)
+        n = len(data.get("features", []))
+        with open(out_path, "wb") as f:
+            f.write(raw)
+        size_mb = out_path.stat().st_size / (1024 * 1024)
+        print(f"  {code}: {n} sections, {size_mb:.1f} MB")
+    except Exception as e:
+        print(f"  {code}: FAILED - {e}")
+
+
+def main():
+    print(f"Downloading section GeoJSON to {OUT_DIR}")
+    for code in DEPTS:
+        download_dept(code)
+    print("Done!")
+
+
+if __name__ == "__main__":
+    main()

scripts/enrich_sections.py

@@ -0,0 +1,91 @@
+"""
+Enrich section GeoJSON files with pre-computed price data.
+
+For each department:
+  1. Load the section GeoJSON (geometry)
+  2. Load the section price JSON (prices)
+  3. Join prices into feature properties with short keys
+  4. Write enriched GeoJSON
+
+Short property keys to minimize tile size:
+  pt/pa/pm = wtm price (tous/appt/maison)
+  vt/va/vm = volume
+  mt/ma/mm = median
+  ct/ca/cm = confidence
+"""
+
+import json
+import sys
+from pathlib import Path
+
+BASEDIR = Path(__file__).resolve().parent.parent
+PRICE_DIR = BASEDIR / "data" / "aggregated" / "sections"
+GEO_DIR = BASEDIR / ".tmp_sections"
+OUT_DIR = BASEDIR / ".tmp_sections_enriched"
+
+
+def enrich_department(dept_code: str) -> int:
+    """Enrich one department's section GeoJSON with price data. Returns feature count."""
+    geo_path = GEO_DIR / f"{dept_code}.geojson"
+    price_path = PRICE_DIR / f"{dept_code}.json"
+    out_path = OUT_DIR / f"{dept_code}.geojson"
+
+    if not geo_path.exists():
+        print(f"  {dept_code}: no GeoJSON, skip")
+        return 0
+
+    with open(geo_path) as f:
+        geo = json.load(f)
+
+    prices = {}
+    if price_path.exists():
+        with open(price_path) as f:
+            prices = json.load(f)
+
+    matched = 0
+    for feature in geo.get("features", []):
+        props = feature.get("properties", {})
+        section_id = props.get("id", "")
+
+        if section_id in prices:
+            p = prices[section_id]
+            matched += 1
+
+            for suffix, type_key in [("t", "tous"), ("a", "appartement"), ("m", "maison")]:
+                stats = p.get(type_key)
+                if stats:
+                    props[f"p{suffix}"] = round(stats.get("wtm", 0), 1)
+                    props[f"v{suffix}"] = stats.get("volume", 0)
+                    props[f"m{suffix}"] = round(stats.get("median", 0), 1)
+                    props[f"c{suffix}"] = round(stats.get("confidence", 0), 3)
+
+        feature["properties"] = props
+
+    with open(out_path, "w") as f:
+        json.dump(geo, f, separators=(",", ":"))
+
+    total = len(geo.get("features", []))
+    print(f"  {dept_code}: {matched}/{total} matched")
+    return total
+
+
+def main():
+    OUT_DIR.mkdir(parents=True, exist_ok=True)
+
+    # Get all department codes from GeoJSON files
+    dept_codes = sorted(p.stem for p in GEO_DIR.glob("*.geojson"))
+    if not dept_codes:
+        print(f"No GeoJSON files found in {GEO_DIR}")
+        sys.exit(1)
+
+    print(f"Enriching {len(dept_codes)} departments...")
+    total = 0
+    for code in dept_codes:
+        total += enrich_department(code)
+
+    print(f"\nDone: {total} total features enriched")
+    print(f"Output: {OUT_DIR}")
+
+
+if __name__ == "__main__":
+    main()

src/config.py

@@ -109,7 +109,10 @@ for key, depts_str in _REGION_DEPTS.items():
 NO_DVF_DEPARTMENTS = {"57", "67", "68", "976"}
 
 # ---------------------------------------------------------------------------
-# Top 10 cities by population (INSEE code → name)
+# Top 10 cities by commune population (INSEE code → name)
+# Source: INSEE Recensement de la population
+# https://www.data.gouv.fr/datasets/population-municipale-des-communes-france-entiere
+# Note: Strasbourg (67482) is in Alsace-Moselle — no DVF data available
 # ---------------------------------------------------------------------------
 TOP_10_CITIES: dict[str, str] = {
     "75056": "Paris",

static/app.js

@@ -2,21 +2,26 @@
  * French Property Price Map
  * Interactive choropleth using MapLibre GL JS + government vector tiles.
  * 6 aggregation levels: Country > Region > Department > Commune > Postcode > Section
+ *
+ * Data sources:
+ *   - Country/Region/Department: local GeoJSON (small files)
+ *   - Commune: government admin vector tiles (openmaptiles.geo.data.gouv.fr)
+ *   - Postcode: local GeoJSON (4MB, no government tile source)
+ *   - Section: government cadastre vector tiles (openmaptiles.geo.data.gouv.fr)
+ *
+ * Commune, Postcode, and Section levels require a department selection first.
+ * Only the selected department's data is colored (fast match expressions).
  */
 
 // ---- Configuration ----
-const TILE_SOURCES = {
-    admin: "https://openmaptiles.geo.data.gouv.fr/data/decoupage-administratif.json",
-    cadastre: "https://openmaptiles.geo.data.gouv.fr/data/cadastre-dvf.json",
-};
 
 const LEVELS = [
-    { name: "Country",    zoom: [0, 5],    source: "france",   layer: null,            codeField: "code",      dataKey: "country",    targetZoom: 4,    isGeojson: true },
-    { name: "Region",     zoom: [5, 7],    source: "admin",    layer: "regions",       codeField: "code",      dataKey: "region",     targetZoom: 5.5 },
-    { name: "Department", zoom: [7, 9],    source: "admin",    layer: "departements",  codeField: "code",      dataKey: "department", targetZoom: 8 },
-    { name: "Commune",    zoom: [9, 11],   source: "admin",    layer: "communes",      codeField: "code",      dataKey: "commune",    targetZoom: 10 },
-    { name: "Postcode",   zoom: [11, 13],  source: "postcode", layer: null,            codeField: "codePostal",dataKey: "postcode",   targetZoom: 12,   isGeojson: true },
-    { name: "Section",    zoom: [13, 24],  source: "cadastre", layer: "sections",      codeField: "id",        dataKey: "section",    targetZoom: 15 },
+    { name: "Country",    source: "france",          layer: null,       codeField: "code",       dataKey: "country",    targetZoom: 4,   isGeojson: true,  needsDept: false },
+    { name: "Region",     source: "regions",         layer: null,       codeField: "code",       dataKey: "region",     targetZoom: 5.5, isGeojson: true,  needsDept: false },
+    { name: "Department", source: "depts",           layer: null,       codeField: "code",       dataKey: "department", targetZoom: 8,   isGeojson: true,  needsDept: false },
+    { name: "Commune",    source: "admin-tiles",     layer: "communes", codeField: "code",       dataKey: "commune",    targetZoom: 10,  isGeojson: false, needsDept: true },
+    { name: "Postcode",   source: "postcode",        layer: null,       codeField: "codePostal", dataKey: "postcode",   targetZoom: 12,  isGeojson: true,  needsDept: true },
+    { name: "Section",    source: "cadastre-tiles",  layer: "sections", codeField: "id",         dataKey: "section",    targetZoom: 14,  isGeojson: false, needsDept: true },
 ];
 
 const COLOR_STOPS = [
@@ -158,14 +163,13 @@ const DEPARTMENTS = {
 
 // ---- State ----
 let priceData = {};
-let topCities = {};
 let sectionCache = {};
 let currentType = "tous";
-let priceFilter = { min: 0, max: PRICE_SLIDER_MAX };
-let exploreCount = 5;
-let checkedRegions = new Set();   // empty = all selected
-let checkedDepts = new Set();     // empty = all selected
-let searchQuery = "";
+let priceFilter = { min: 200, max: PRICE_SLIDER_MAX };
+let searchDropdownIdx = -1;       // keyboard nav index for search dropdown
+let activeLevel = 0;              // index into LEVELS — controlled by radio buttons only
+let selectedAreaCode = null;      // code of area selected in the area list (country/region/dept)
+let selectedDeptCode = null;      // department selected for commune/postcode/section levels
 let map;
 
 // ---- Color Interpolation ----
@@ -191,7 +195,9 @@ function buildColorScale(data, type) {
     const prices = [];
     for (const code in data) {
         const stats = data[code][type];
-        if (stats && stats.wtm > 0) prices.push(stats.wtm);
+        if (stats && stats.wtm > 0 && stats.wtm >= priceFilter.min && stats.wtm <= priceFilter.max) {
+            prices.push(stats.wtm);
+        }
     }
     if (prices.length === 0) return { scale: () => GRAY, min: 0, mid: 0, max: 0 };
 
@@ -230,6 +236,33 @@ function deptFromCode(code) {
     return code.substring(0, 2);
 }
 
+// ---- Data Helpers ----
+
+function filterByDept(data, deptCode) {
+    if (!data || !deptCode) return {};
+    const result = {};
+    for (const code in data) {
+        if (deptFromCode(code) === deptCode) {
+            result[code] = data[code];
+        }
+    }
+    return result;
+}
+
+function getDisplayData(dataKey) {
+    if (dataKey === "country") return priceData.country;
+    if (dataKey === "region") return priceData.region;
+    if (dataKey === "department") return priceData.department;
+
+    // Dept-required levels: return only selected dept's data
+    if (!selectedDeptCode) return {};
+
+    if (dataKey === "commune") return filterByDept(priceData.commune, selectedDeptCode);
+    if (dataKey === "postcode") return filterByDept(priceData.postcode, selectedDeptCode);
+    if (dataKey === "section") return sectionCache[selectedDeptCode] || {};
+    return {};
+}
+
 // ---- Data Loading ----
 
 async function loadJSON(url) {
@@ -239,26 +272,23 @@ async function loadJSON(url) {
 }
 
 async function loadPriceData() {
-    const [country, region, department, commune, postcode, cities] = await Promise.all([
+    const [country, region, department, commune, postcode] = await Promise.all([
         loadJSON("/data/prices_country.json"),
         loadJSON("/data/prices_region.json"),
         loadJSON("/data/prices_department.json"),
         loadJSON("/data/prices_commune.json"),
         loadJSON("/data/prices_postcode.json"),
-        loadJSON("/data/top_cities.json"),
     ]);
     priceData = { country, region, department, commune, postcode };
-    topCities = cities;
 }
 
-async function loadSectionData(deptCode) {
-    if (sectionCache[deptCode]) return sectionCache[deptCode];
+async function loadSectionDataForDept(deptCode) {
+    if (sectionCache[deptCode]) return;
     try {
         const data = await loadJSON(`/data/sections/${deptCode}.json`);
         sectionCache[deptCode] = data;
-        return data;
-    } catch {
-        return {};
+    } catch (e) {
+        console.warn(`No section data for dept ${deptCode}`, e);
     }
 }
 
@@ -296,28 +326,39 @@ function initMap() {
 }
 
 async function onMapLoad() {
-    // Add vector tile sources
-    map.addSource("admin", { type: "vector", url: TILE_SOURCES.admin });
-    map.addSource("cadastre", { type: "vector", url: TILE_SOURCES.cadastre });
+    // Government vector tile sources (streamed per viewport, very fast)
+    map.addSource("admin-tiles", {
+        type: "vector",
+        url: "https://openmaptiles.geo.data.gouv.fr/data/decoupage-administratif.json",
+    });
+    map.addSource("cadastre-tiles", {
+        type: "vector",
+        url: "https://openmaptiles.geo.data.gouv.fr/data/cadastre-dvf.json",
+    });
 
-    // Load and add GeoJSON sources for country + postcode
-    const [franceGeo, postcodeGeo] = await Promise.all([
+    // Local GeoJSON sources (small static files)
+    const [franceGeo, regionsGeo, deptsGeo, postcodeGeo] = await Promise.all([
         loadJSON("/data/france.geojson"),
+        loadJSON("/data/regions.geojson"),
+        loadJSON("/data/departements.geojson"),
         loadJSON("/data/postcodes.geojson"),
     ]);
 
     map.addSource("france", { type: "geojson", data: franceGeo });
+    map.addSource("regions", { type: "geojson", data: regionsGeo });
+    map.addSource("depts", { type: "geojson", data: deptsGeo });
     map.addSource("postcode", { type: "geojson", data: postcodeGeo });
 
     // Add choropleth fill + outline layers for each level
-    for (const level of LEVELS) {
+    for (let i = 0; i < LEVELS.length; i++) {
+        const level = LEVELS[i];
         const fillId = `${level.dataKey}-fill`;
         const lineId = `${level.dataKey}-line`;
+        const isActive = (i === activeLevel);
 
         const layerBase = {
             source: level.source,
-            minzoom: level.zoom[0],
-            maxzoom: level.zoom[1],
+            layout: { visibility: isActive ? "visible" : "none" },
         };
 
         // For vector tile sources, specify source-layer
@@ -346,295 +387,282 @@ async function onMapLoad() {
             },
         });
 
-        // Hover interactions -> floating tooltip
-        map.on("mousemove", fillId, (e) => showTooltip(e, level));
-        map.on("mouseleave", fillId, hideTooltip);
+        // Highlight layer for selected area (black border)
+        const hlBase = { source: level.source };
+        if (!level.isGeojson) hlBase["source-layer"] = level.layer;
+        map.addLayer({
+            id: `${level.dataKey}-highlight`,
+            type: "line",
+            ...hlBase,
+            layout: { visibility: "none" },
+            filter: ["==", ["get", level.codeField], ""],
+            paint: {
+                "line-color": "#000000",
+                "line-width": 3,
+                "line-opacity": 1,
+            },
+        });
+
+        // Hover highlight layer (thicker border on hovered feature)
+        const hoverBase = { source: level.source };
+        if (!level.isGeojson) hoverBase["source-layer"] = level.layer;
+        map.addLayer({
+            id: `${level.dataKey}-hover`,
+            type: "line",
+            ...hoverBase,
+            layout: { visibility: isActive ? "visible" : "none" },
+            filter: ["==", ["get", level.codeField], ""],
+            paint: {
+                "line-color": document.body.classList.contains("dark-mode") ? "#ffffff" : "#000000",
+                "line-width": level.dataKey === "section" ? 2 : 3,
+                "line-opacity": 0.8,
+            },
+        });
 
-        // Click-to-drill-down: click a feature to zoom into the next level
-        map.on("click", fillId, (e) => {
+        // Hover interactions -> floating tooltip + hover highlight
+        map.on("mousemove", fillId, (e) => {
+            showTooltip(e, level);
+            if (e.features && e.features.length > 0) {
+                const hoverCode = e.features[0].properties[level.codeField] || "";
+                try {
+                    map.setFilter(`${level.dataKey}-hover`, ["==", ["get", level.codeField], hoverCode]);
+                } catch (err) {}
+            }
+        });
+        map.on("mouseleave", fillId, () => {
+            hideTooltip();
+            try {
+                map.setFilter(`${level.dataKey}-hover`, ["==", ["get", level.codeField], ""]);
+            } catch (err) {}
+        });
+
+        // Click-to-drill-down: click a feature to zoom + advance level
+        map.on("click", fillId, async (e) => {
             if (!e.features || e.features.length === 0) return;
             const levelIdx = LEVELS.indexOf(level);
             if (levelIdx >= LEVELS.length - 1) return;
 
             const nextLevel = LEVELS[levelIdx + 1];
+            const code = e.features[0].properties[level.codeField] || "";
             const lngLat = e.lngLat;
 
+            // If drilling from department and next level needs dept selection
+            if (level.dataKey === "department" && nextLevel.needsDept) {
+                selectedDeptCode = code;
+            }
+
+            // Load section data if advancing to section level
+            if (nextLevel.dataKey === "section" && selectedDeptCode && !sectionCache[selectedDeptCode]) {
+                await loadSectionDataForDept(selectedDeptCode);
+            }
+
+            // Advance to next level
+            activeLevel = levelIdx + 1;
+            selectedAreaCode = null;
+            document.querySelectorAll('input[name="map-level"]')[activeLevel].checked = true;
+            updateLayerVisibility();
+            updateHighlight();
+
             let targetZoom = nextLevel.targetZoom;
-            // For country click, recenter on France
             if (level.dataKey === "country") {
                 map.flyTo({ center: FRANCE_CENTER, zoom: targetZoom, duration: 1000 });
-                return;
-            }
-            // For dense areas, zoom a bit more
-            const code = e.features[0].properties[level.codeField] || "";
-            const denseDepts = ["75", "92", "93", "94", "69", "13"];
-            if (level.dataKey === "department" && denseDepts.includes(code)) {
-                targetZoom = Math.min(targetZoom + 1.5, nextLevel.zoom[1] - 0.5);
+            } else {
+                const denseDepts = ["75", "92", "93", "94", "69", "13"];
+                if (level.dataKey === "department" && denseDepts.includes(code)) {
+                    targetZoom = Math.min(targetZoom + 1.5, 20);
+                }
+                map.flyTo({ center: [lngLat.lng, lngLat.lat], zoom: targetZoom, duration: 1000 });
             }
 
-            map.flyTo({ center: [lngLat.lng, lngLat.lat], zoom: targetZoom, duration: 1000 });
+            updatePriceRangeForLevel();
+            updateColors();
+            updateDynamicStat();
+            populateAreaList();
         });
     }
 
-    // Invisible commune layer for name lookup at section/postcode zoom
+    // Invisible commune layer for name lookup (from government admin tiles)
     map.addLayer({
         id: "commune-query",
         type: "fill",
-        source: "admin",
+        source: "admin-tiles",
         "source-layer": "communes",
-        minzoom: 11,
-        maxzoom: 24,
         paint: { "fill-opacity": 0 },
     });
 
-    // Initial paint
-    updateColors();
-    updateActiveLevel();
-    updateExploreList();
-    updateDynamicStat();
-
-    // Re-paint when tiles arrive
+    // Re-apply colors when vector tiles finish loading (they stream per viewport)
+    let sourcedataTimer = null;
     map.on("sourcedata", (e) => {
-        if (e.isSourceLoaded && e.sourceId === "admin") {
-            updateColors();
-        }
-        if (e.isSourceLoaded && e.sourceId === "cadastre" && map.getZoom() >= 13) {
-            loadVisibleSections();
+        if (!e.isSourceLoaded) return;
+        const srcId = e.sourceId;
+        const level = LEVELS[activeLevel];
+        const needsRefresh =
+            (srcId === "admin-tiles" && level.source === "admin-tiles" && selectedDeptCode) ||
+            (srcId === "cadastre-tiles" && level.source === "cadastre-tiles" && selectedDeptCode);
+        if (needsRefresh && !sourcedataTimer) {
+            sourcedataTimer = setTimeout(() => {
+                sourcedataTimer = null;
+                updateColors();
+            }, 200);
         }
     });
 
-    map.on("zoom", () => {
-        updateActiveLevel();
-        if (map.getZoom() >= 13) loadVisibleSections();
-    });
+    // Initial paint
+    updateColors();
+    updateDynamicStat();
+
     map.on("moveend", () => {
-        if (map.getZoom() >= 13) loadVisibleSections();
-        updateExploreList();
         updateDynamicStat();
     });
 }
 
-// ---- Section Lazy Loading ----
-
-let _sectionLoadPending = false;
-
-async function loadVisibleSections() {
-    if (_sectionLoadPending) return;
-    _sectionLoadPending = true;
-
-    try {
-        const deptCodes = new Set();
-        const features = map.queryRenderedFeatures({ layers: ["section-fill"] });
-        for (const f of features) {
-            const id = f.properties.id || "";
-            const dept = deptFromCode(id);
-            if (dept && dept.length >= 2) deptCodes.add(dept);
-        }
-
-        let changed = false;
-        const loadPromises = [];
-        for (const dept of deptCodes) {
-            if (!sectionCache[dept]) {
-                loadPromises.push(loadSectionData(dept).then(() => { changed = true; }));
-            }
-        }
-        await Promise.all(loadPromises);
-        if (changed) {
-            updateSectionColors();
-            updateExploreList();
-            updateDynamicStat();
-        }
-    } finally {
-        _sectionLoadPending = false;
-    }
-}
-
 // ---- Color Updates ----
 
-function codePassesFilter(code, dataKey) {
-    // Country: always passes
-    if (dataKey === "country") return true;
-    // Region: filter by checked regions
-    if (dataKey === "region") {
-        if (checkedRegions.size > 0) return checkedRegions.has(code);
-        return true;
-    }
-    // Department: filter by checked depts, then by checked regions
-    if (dataKey === "department") {
-        if (checkedDepts.size > 0) return checkedDepts.has(code);
-        if (checkedRegions.size > 0) {
-            const info = DEPARTMENTS[code];
-            return info && checkedRegions.has(info.region);
-        }
-        return true;
-    }
-    // Commune, postcode, section: use passesGeoFilter (dept-based)
-    return passesGeoFilter(code);
-}
-
 function updateColors() {
     for (const level of LEVELS) {
-        if (level.dataKey === "section") {
-            updateSectionColors();
+        const data = getDisplayData(level.dataKey);
+        const fillId = `${level.dataKey}-fill`;
+
+        if (!data || Object.keys(data).length === 0) {
+            try { map.setPaintProperty(fillId, "fill-color", GRAY); } catch (e) { console.warn(`setPaint ${fillId}:`, e.message); }
+            if (LEVELS.indexOf(level) === activeLevel) updateLegend(0, 0, 0);
             continue;
         }
 
-        const data = priceData[level.dataKey];
-        if (!data || Object.keys(data).length === 0) continue;
-
         const { scale, min, mid, max } = buildColorScale(data, currentType);
-        const fillId = `${level.dataKey}-fill`;
 
-        // Country level is special: single feature colored by national price
+        // Country level: single feature
         if (level.dataKey === "country") {
             const stats = data.FR && data.FR[currentType];
             const color = (stats && stats.wtm > 0) ? scale(stats.wtm) : GRAY;
-            try {
-                map.setPaintProperty(fillId, "fill-color", color);
-            } catch (e) {
-                console.warn(`Paint ${fillId}:`, e.message);
-            }
-            const zoom = map.getZoom();
-            if (zoom >= level.zoom[0] && zoom < level.zoom[1]) {
-                updateLegend(min, mid, max);
-            }
+            try { map.setPaintProperty(fillId, "fill-color", color); } catch (e) { console.warn(`setPaint ${fillId}:`, e.message); }
+            if (activeLevel === 0) updateLegend(min, mid, max);
             continue;
         }
 
+        // All other levels: match expression
         const matchExpr = ["match", ["get", level.codeField]];
         let count = 0;
 
         for (const code in data) {
             const stats = data[code][currentType];
             if (stats && stats.wtm > 0) {
-                if (codePassesFilter(code, level.dataKey)) {
-                    matchExpr.push(code, scale(stats.wtm));
-                } else {
-                    matchExpr.push(code, GRAY);
-                }
+                matchExpr.push(code, scale(stats.wtm));
                 count++;
             }
         }
         matchExpr.push(GRAY);
 
         if (count > 0) {
-            try {
-                map.setPaintProperty(fillId, "fill-color", matchExpr);
-            } catch (e) {
-                console.warn(`Paint ${fillId}:`, e.message);
-            }
+            try { map.setPaintProperty(fillId, "fill-color", matchExpr); } catch (e) { console.warn(`setPaint ${fillId} (${count} entries):`, e.message); }
+        } else {
+            try { map.setPaintProperty(fillId, "fill-color", GRAY); } catch (e) { console.warn(`setPaint ${fillId}:`, e.message); }
         }
 
-        const zoom = map.getZoom();
-        if (zoom >= level.zoom[0] && zoom < level.zoom[1]) {
+        if (LEVELS.indexOf(level) === activeLevel) {
             updateLegend(min, mid, max);
         }
     }
 }
 
-function updateSectionColors() {
-    const allSections = {};
-    for (const dept in sectionCache) {
-        Object.assign(allSections, sectionCache[dept]);
-    }
-    if (Object.keys(allSections).length === 0) return;
-
-    const { scale, min, mid, max } = buildColorScale(allSections, currentType);
-    const matchExpr = ["match", ["get", "id"]];
-    let count = 0;
-
-    for (const code in allSections) {
-        const stats = allSections[code][currentType];
-        if (stats && stats.wtm > 0) {
-            matchExpr.push(code, scale(stats.wtm));
-            count++;
-        }
-    }
-    matchExpr.push(GRAY);
-
-    if (count > 0) {
-        try {
-            map.setPaintProperty("section-fill", "fill-color", matchExpr);
-        } catch (e) {
-            console.warn("Paint sections:", e.message);
-        }
-    }
-
-    if (map.getZoom() >= 13) updateLegend(min, mid, max);
-}
-
 function updateLegend(min, mid, max) {
     document.getElementById("legend-min").textContent = formatPrice(min);
     document.getElementById("legend-max").textContent = formatPrice(max);
 }
 
-function updateActiveLevel() {
-    const zoom = map.getZoom();
-    const radios = document.querySelectorAll('input[name="map-level"]');
-    radios.forEach((radio, i) => {
+function updateLayerVisibility() {
+    for (let i = 0; i < LEVELS.length; i++) {
         const level = LEVELS[i];
-        if (zoom >= level.zoom[0] && zoom < level.zoom[1]) {
-            radio.checked = true;
-        }
-    });
+        const fillId = `${level.dataKey}-fill`;
+        const lineId = `${level.dataKey}-line`;
+        const hoverId = `${level.dataKey}-hover`;
+        const vis = (i === activeLevel) ? "visible" : "none";
+        try {
+            map.setLayoutProperty(fillId, "visibility", vis);
+            map.setLayoutProperty(lineId, "visibility", vis);
+            map.setLayoutProperty(hoverId, "visibility", vis);
+        } catch (e) {}
+    }
 }
 
 function updateDynamicStat() {
     const labelEl = document.getElementById("stat-label");
     const priceEl = document.getElementById("stat-price");
     const detailEl = document.getElementById("stat-detail");
-
     const level = getCurrentLevel();
+    const dataKey = level.dataKey;
 
-    // If a single department is checked, show its stats
-    if (checkedDepts.size === 1) {
-        const deptCode = [...checkedDepts][0];
-        const deptInfo = DEPARTMENTS[deptCode];
-        const stats = priceData.department && priceData.department[deptCode] && priceData.department[deptCode][currentType];
-        labelEl.textContent = deptInfo ? deptInfo.name : `Dept ${deptCode}`;
-        priceEl.textContent = stats ? formatPrice(stats.wtm) : "\u2014";
-        detailEl.textContent = stats ? `${stats.volume.toLocaleString("fr-FR")} transactions` : "";
+    // Dept-required levels: show dept stats or prompt
+    if (level.needsDept) {
+        if (!selectedDeptCode) {
+            labelEl.textContent = "Select a Department";
+            priceEl.textContent = "\u2014";
+            detailEl.textContent = `Choose a department to view ${level.name.toLowerCase()} data`;
+            return;
+        }
+
+        const deptInfo = DEPARTMENTS[selectedDeptCode];
+        const deptName = deptInfo ? `${selectedDeptCode} \u2013 ${deptInfo.name}` : selectedDeptCode;
+        const data = getDisplayData(dataKey);
+
+        let totalWeightedPrice = 0;
+        let totalVolume = 0;
+        let count = 0;
+        for (const code in data) {
+            const stats = data[code][currentType];
+            if (!stats || !stats.wtm || !stats.volume) continue;
+            if (stats.wtm < priceFilter.min || stats.wtm > priceFilter.max) continue;
+            totalWeightedPrice += stats.wtm * stats.volume;
+            totalVolume += stats.volume;
+            count++;
+        }
+
+        const avgPrice = totalVolume > 0 ? Math.round(totalWeightedPrice / totalVolume) : 0;
+        labelEl.textContent = `${deptName} \u00b7 ${level.name}s`;
+        priceEl.textContent = avgPrice > 0 ? formatPrice(avgPrice) : "\u2014";
+        detailEl.textContent = totalVolume > 0 ? `${count} ${level.name.toLowerCase()}s \u00b7 ${totalVolume.toLocaleString("fr-FR")} transactions` : "";
         return;
     }
 
-    // If a single region is checked, show its stats
-    if (checkedRegions.size === 1 && checkedDepts.size === 0) {
-        const regCode = [...checkedRegions][0];
-        const regInfo = REGIONS[regCode];
-        const stats = priceData.region && priceData.region[regCode] && priceData.region[regCode][currentType];
-        labelEl.textContent = regInfo ? regInfo.name : `Region ${regCode}`;
+    // If a specific area is selected in the list (country/region/dept)
+    if (selectedAreaCode) {
+        let name = selectedAreaCode;
+        let stats = null;
+
+        if (dataKey === "country") {
+            name = "France";
+            stats = priceData.country && priceData.country.FR && priceData.country.FR[currentType];
+        } else if (dataKey === "region") {
+            const info = REGIONS[selectedAreaCode];
+            name = info ? info.name : selectedAreaCode;
+            stats = priceData.region && priceData.region[selectedAreaCode] && priceData.region[selectedAreaCode][currentType];
+        } else if (dataKey === "department") {
+            const info = DEPARTMENTS[selectedAreaCode];
+            name = info ? `${selectedAreaCode} \u2013 ${info.name}` : selectedAreaCode;
+            stats = priceData.department && priceData.department[selectedAreaCode] && priceData.department[selectedAreaCode][currentType];
+        }
+
+        labelEl.textContent = name;
         priceEl.textContent = stats ? formatPrice(stats.wtm) : "\u2014";
         detailEl.textContent = stats ? `${stats.volume.toLocaleString("fr-FR")} transactions` : "";
         return;
     }
 
-    // Level-aware: compute average from the current level's visible data
-    const dataKey = level.dataKey;
-
+    // No selection — show level average
     if (dataKey === "country") {
-        // Country level: national average
-        const country = priceData.country;
-        if (country && country.FR) {
-            const stats = country.FR[currentType];
-            labelEl.textContent = "National Average";
-            priceEl.textContent = stats ? formatPrice(stats.wtm) : "\u2014";
-            detailEl.textContent = stats ? `${stats.volume.toLocaleString("fr-FR")} transactions` : "";
-        } else {
-            labelEl.textContent = "National Average";
-            priceEl.textContent = "\u2014";
-            detailEl.textContent = "";
-        }
+        const stats = priceData.country && priceData.country.FR && priceData.country.FR[currentType];
+        labelEl.textContent = "National Average";
+        priceEl.textContent = stats ? formatPrice(stats.wtm) : "\u2014";
+        detailEl.textContent = stats ? `${stats.volume.toLocaleString("fr-FR")} transactions` : "";
         return;
     }
 
-    // For region/department/commune/postcode/section: compute weighted average from visible data
     const dataSet = priceData[dataKey] || {};
     let totalWeightedPrice = 0;
     let totalVolume = 0;
     let count = 0;
 
     for (const code in dataSet) {
-        if (!passesGeoFilter(code)) continue;
         const stats = dataSet[code][currentType];
         if (!stats || !stats.wtm || !stats.volume) continue;
         if (stats.wtm < priceFilter.min || stats.wtm > priceFilter.max) continue;
@@ -643,15 +671,8 @@ function updateDynamicStat() {
         count++;
     }
 
-    const levelNames = {
-        region: "Region",
-        department: "Department",
-        commune: "Commune",
-        postcode: "Postcode",
-        section: "Section",
-    };
     const avgPrice = totalVolume > 0 ? Math.round(totalWeightedPrice / totalVolume) : 0;
-    labelEl.textContent = `${levelNames[dataKey] || level.name} Average`;
+    labelEl.textContent = `${level.name} Average`;
     priceEl.textContent = avgPrice > 0 ? formatPrice(avgPrice) : "\u2014";
     detailEl.textContent = totalVolume > 0 ? `${count} areas \u00b7 ${totalVolume.toLocaleString("fr-FR")} transactions` : "";
 }
@@ -695,33 +716,46 @@ function showTooltip(e, level) {
         } catch {}
     }
 
-    let stats;
+    // Get stats for all types
+    let allStats = {};
     if (level.dataKey === "section") {
-        for (const dept in sectionCache) {
-            if (sectionCache[dept][code]) {
-                stats = sectionCache[dept][code][currentType];
-                break;
-            }
+        // Read from section cache (per-department JSON data)
+        const deptCode = selectedDeptCode || deptFromCode(code);
+        if (sectionCache[deptCode] && sectionCache[deptCode][code]) {
+            allStats = sectionCache[deptCode][code];
         }
     } else {
         const data = priceData[level.dataKey];
-        if (data && data[code]) stats = data[code][currentType];
+        if (data && data[code]) allStats = data[code];
     }
 
+    const stats = allStats[currentType];
     const tooltip = document.getElementById("tooltip");
     if (!stats) {
         tooltip.classList.add("hidden");
         return;
     }
 
+    // Build price + volume breakdown for apartment/house
+    const apptStats = allStats.appartement;
+    const houseStats = allStats.maison;
+    let breakdownHtml = "";
+    if (apptStats && apptStats.wtm) {
+        const vol = apptStats.volume ? apptStats.volume.toLocaleString("fr-FR") : "0";
+        breakdownHtml += `<span>Apt: ${formatPrice(apptStats.wtm)} (${vol})</span>`;
+    }
+    if (houseStats && houseStats.wtm) {
+        const vol = houseStats.volume ? houseStats.volume.toLocaleString("fr-FR") : "0";
+        breakdownHtml += `<span>House: ${formatPrice(houseStats.wtm)} (${vol})</span>`;
+    }
+
     tooltip.classList.remove("hidden");
     tooltip.innerHTML = `
         <div class="tt-name">${name}</div>
         <div class="tt-price">${formatPrice(stats.wtm)}</div>
         <div class="tt-details">
-            <span>Median: ${formatPrice(stats.median)}</span>
-            <span>${stats.volume.toLocaleString("fr-FR")} transactions</span>
-            <span>Confidence: ${(stats.confidence * 100).toFixed(0)}%</span>
+            ${breakdownHtml}
+            <span>${stats.volume ? stats.volume.toLocaleString("fr-FR") : "0"} total transactions</span>
         </div>
     `;
 
@@ -743,525 +777,475 @@ function hideTooltip() {
     document.getElementById("tooltip").classList.add("hidden");
 }
 
-// ---- Checkbox Dropdown Component ----
-
-function buildCheckboxDropdown(toggleId, menuId, items, checkedSet, onChange) {
-    const toggle = document.getElementById(toggleId);
-    const menu = document.getElementById(menuId);
-    const dropdown = toggle.parentElement;
-
-    menu.innerHTML = "";
-
-    // "All" checkbox
-    const allItem = document.createElement("label");
-    allItem.className = "cb-item cb-all";
-    const allCb = document.createElement("input");
-    allCb.type = "checkbox";
-    allCb.checked = checkedSet.size === 0;
-    allItem.appendChild(allCb);
-    const allLabel = document.createElement("span");
-    allLabel.className = "cb-item-label";
-    allLabel.textContent = "All";
-    allItem.appendChild(allLabel);
-    menu.appendChild(allItem);
-
-    const checkboxes = [];
-
-    for (const { code, name, price } of items) {
-        const item = document.createElement("label");
-        item.className = "cb-item";
-        const cb = document.createElement("input");
-        cb.type = "checkbox";
-        cb.dataset.code = code;
-        cb.checked = checkedSet.size === 0 || checkedSet.has(code);
-        checkboxes.push(cb);
-        item.appendChild(cb);
-        const lbl = document.createElement("span");
-        lbl.className = "cb-item-label";
-        lbl.textContent = name;
-        item.appendChild(lbl);
-        if (price) {
-            const pr = document.createElement("span");
-            pr.className = "cb-item-price";
-            pr.textContent = formatPriceShort(price) + " \u20ac";
-            item.appendChild(pr);
-        }
-        menu.appendChild(item);
-    }
+// ---- Area List Navigation ----
 
-    function updateToggleLabel() {
-        if (checkedSet.size === 0) {
-            toggle.textContent = toggleId === "region-toggle" ? "All Regions" : "All Departments";
-        } else if (checkedSet.size === 1) {
-            const code = [...checkedSet][0];
-            const found = items.find(it => it.code === code);
-            toggle.textContent = found ? found.name : code;
-        } else {
-            toggle.textContent = `${checkedSet.size} selected`;
-        }
-    }
+function populateAreaList() {
+    const container = document.getElementById("area-list");
+    const label = document.getElementById("area-list-label");
+    const level = getCurrentLevel();
+    const dataKey = level.dataKey;
 
-    allCb.addEventListener("change", () => {
-        // Reset to "all" state
-        checkedSet.clear();
-        allCb.checked = true;
-        checkboxes.forEach(cb => { cb.checked = true; });
-        updateToggleLabel();
-        onChange();
-    });
+    container.innerHTML = "";
 
-    checkboxes.forEach(cb => {
-        cb.addEventListener("change", () => {
-            const isAllState = checkedSet.size === 0;
-
-            if (!cb.checked) {
-                // Unchecking an item
-                if (isAllState) {
-                    // Transitioning from "all" → add everything EXCEPT this one
-                    checkboxes.forEach(c => {
-                        if (c !== cb) checkedSet.add(c.dataset.code);
-                    });
-                } else {
-                    checkedSet.delete(cb.dataset.code);
-                }
-                // If nothing left, revert to "all"
-                if (checkedSet.size === 0) {
-                    allCb.checked = true;
-                    checkboxes.forEach(c => { c.checked = true; });
-                } else {
-                    allCb.checked = false;
-                }
-            } else {
-                // Checking an item
-                checkedSet.add(cb.dataset.code);
-                // If all individually checked, switch back to "all" state
-                const allChecked = checkboxes.every(c => c.checked);
-                if (allChecked) {
-                    checkedSet.clear();
-                    allCb.checked = true;
-                } else {
-                    allCb.checked = false;
-                }
-            }
-            updateToggleLabel();
-            onChange();
-        });
-    });
+    // For dept-required levels: show department list for selection
+    if (level.needsDept) {
+        label.textContent = `Select Department`;
 
-    // Prevent clicks inside the menu from closing the dropdown
-    menu.addEventListener("click", (e) => {
-        e.stopPropagation();
-    });
+        // Header message
+        if (selectedDeptCode) {
+            const info = DEPARTMENTS[selectedDeptCode];
+            const deptName = info ? `${selectedDeptCode} \u2013 ${info.name}` : selectedDeptCode;
+            label.textContent = `${level.name}s \u00b7 ${deptName}`;
+        }
 
-    // Toggle open/close
-    toggle.addEventListener("click", (e) => {
-        e.stopPropagation();
-        // Close other dropdowns
-        document.querySelectorAll(".cb-dropdown.open").forEach(d => {
-            if (d !== dropdown) d.classList.remove("open");
-        });
-        dropdown.classList.toggle("open");
-    });
+        const items = Object.entries(DEPARTMENTS)
+            .filter(([code]) => priceData.department && priceData.department[code])
+            .sort((a, b) => a[1].name.localeCompare(b[1].name, "fr"))
+            .map(([code, info]) => {
+                const stats = priceData.department[code] && priceData.department[code][currentType];
+                return { code, name: `${code} \u2013 ${info.name}`, price: stats ? stats.wtm : 0 };
+            });
+
+        if (items.length === 0) {
+            container.innerHTML = '<div class="area-list-empty">No data available</div>';
+            return;
+        }
 
-    updateToggleLabel();
-}
+        for (const item of items) {
+            const div = document.createElement("div");
+            div.className = "area-item" + (selectedDeptCode === item.code ? " selected" : "");
+            div.dataset.code = item.code;
+            div.innerHTML = `
+                <span class="area-item-name">${item.name}</span>
+                <span class="area-item-price">${item.price ? formatPriceShort(item.price) + " \u20ac" : ""}</span>
+            `;
+            div.addEventListener("click", () => selectDeptForLevel(item.code));
+            container.appendChild(div);
+        }
 
-// Close dropdowns on outside click
-document.addEventListener("click", () => {
-    document.querySelectorAll(".cb-dropdown.open").forEach(d => d.classList.remove("open"));
-});
+        // Scroll selected dept into view
+        if (selectedDeptCode) {
+            const selectedEl = container.querySelector(".area-item.selected");
+            if (selectedEl) selectedEl.scrollIntoView({ block: "nearest" });
+        }
 
-// ---- Geographic Navigation ----
+        return;
+    }
 
-function populateRegionDropdown() {
-    const items = Object.entries(REGIONS)
-        .filter(([code]) => priceData.region && priceData.region[code])
-        .sort((a, b) => a[1].name.localeCompare(b[1].name, "fr"))
-        .map(([code, info]) => {
-            const stats = priceData.region[code] && priceData.region[code][currentType];
-            return { code, name: info.name, price: stats ? stats.wtm : 0 };
-        });
+    // Normal levels: country, region, department
+    let items = [];
 
-    buildCheckboxDropdown("region-toggle", "region-menu", items, checkedRegions, onRegionFilterChange);
-}
+    if (dataKey === "country") {
+        label.textContent = "Country";
+        const stats = priceData.country && priceData.country.FR && priceData.country.FR[currentType];
+        items = [{ code: "FR", name: "France", price: stats ? stats.wtm : 0 }];
+    } else if (dataKey === "region") {
+        label.textContent = "Regions";
+        items = Object.entries(REGIONS)
+            .filter(([code]) => priceData.region && priceData.region[code])
+            .sort((a, b) => a[1].name.localeCompare(b[1].name, "fr"))
+            .map(([code, info]) => {
+                const stats = priceData.region[code] && priceData.region[code][currentType];
+                return { code, name: info.name, price: stats ? stats.wtm : 0 };
+            });
+    } else if (dataKey === "department") {
+        label.textContent = "Departments";
+        items = Object.entries(DEPARTMENTS)
+            .filter(([code]) => priceData.department && priceData.department[code])
+            .sort((a, b) => a[1].name.localeCompare(b[1].name, "fr"))
+            .map(([code, info]) => {
+                const stats = priceData.department[code] && priceData.department[code][currentType];
+                return { code, name: `${code} \u2013 ${info.name}`, price: stats ? stats.wtm : 0 };
+            });
+    }
 
-function populateDeptDropdown() {
-    const items = Object.entries(DEPARTMENTS)
-        .filter(([code, info]) => {
-            if (checkedRegions.size > 0 && !checkedRegions.has(info.region)) return false;
-            return priceData.department && priceData.department[code];
-        })
-        .sort((a, b) => a[1].name.localeCompare(b[1].name, "fr"))
-        .map(([code, info]) => {
-            const stats = priceData.department[code] && priceData.department[code][currentType];
-            return { code, name: `${code} - ${info.name}`, price: stats ? stats.wtm : 0 };
-        });
+    if (items.length === 0) {
+        container.innerHTML = '<div class="area-list-empty">No data available</div>';
+        return;
+    }
 
-    buildCheckboxDropdown("dept-toggle", "dept-menu", items, checkedDepts, onDeptFilterChange);
+    for (const item of items) {
+        const div = document.createElement("div");
+        div.className = "area-item" + (selectedAreaCode === item.code ? " selected" : "");
+        div.dataset.code = item.code;
+        div.innerHTML = `
+            <span class="area-item-name">${item.name}</span>
+            <span class="area-item-price">${item.price ? formatPriceShort(item.price) + " \u20ac" : ""}</span>
+        `;
+        div.addEventListener("click", () => selectArea(item.code, level.dataKey));
+        container.appendChild(div);
+    }
 }
 
-function onRegionFilterChange() {
-    populateDeptDropdown();
-    updateColors();
-    updateExploreList();
-    updateDynamicStat();
-
-    // If single region, fly to it
-    if (checkedRegions.size === 1) {
-        const code = [...checkedRegions][0];
-        if (REGIONS[code]) {
-            map.flyTo({ center: REGIONS[code].center, zoom: 5.5, duration: 1000 });
-        }
+function selectArea(code, dataKey) {
+    // Toggle selection
+    if (selectedAreaCode === code) {
+        selectedAreaCode = null;
+    } else {
+        selectedAreaCode = code;
     }
-}
 
-function onDeptFilterChange() {
-    updateColors();
-    updateExploreList();
-    updateDynamicStat();
+    // Update list highlighting
+    document.querySelectorAll(".area-item").forEach(el => {
+        el.classList.toggle("selected", el.dataset.code === selectedAreaCode);
+    });
+
+    // Update highlight on map
+    updateHighlight();
 
-    // If single department, fly to it
-    if (checkedDepts.size === 1) {
-        const code = [...checkedDepts][0];
-        if (DEPARTMENTS[code]) {
+    // Fly to the selected area
+    if (selectedAreaCode) {
+        if (dataKey === "country") {
+            map.flyTo({ center: FRANCE_CENTER, zoom: FRANCE_ZOOM, duration: 1000 });
+        } else if (dataKey === "region" && REGIONS[code]) {
+            map.flyTo({ center: REGIONS[code].center, zoom: 5.5, duration: 1000 });
+        } else if (dataKey === "department" && DEPARTMENTS[code]) {
             const denseDepts = ["75", "92", "93", "94", "69", "13"];
             const zoom = denseDepts.includes(code) ? 10.5 : 9;
             map.flyTo({ center: DEPARTMENTS[code].center, zoom, duration: 1000 });
         }
     }
-}
 
-// Helper: check if a code passes the current department/region filter
-function passesGeoFilter(code) {
-    const dept = deptFromCode(code);
-    if (checkedDepts.size > 0) return checkedDepts.has(dept);
-    if (checkedRegions.size > 0) {
-        const deptInfo = DEPARTMENTS[dept];
-        return deptInfo && checkedRegions.has(deptInfo.region);
-    }
-    return true;
+    updateDynamicStat();
 }
 
-// ---- Explore List (Dynamic Top N) ----
-
-function getCurrentLevel() {
-    if (!map) return LEVELS[0];
-    const zoom = map.getZoom();
-    for (const level of LEVELS) {
-        if (zoom >= level.zoom[0] && zoom < level.zoom[1]) return level;
+async function selectDeptForLevel(deptCode) {
+    // Toggle selection
+    if (selectedDeptCode === deptCode) {
+        selectedDeptCode = null;
+    } else {
+        selectedDeptCode = deptCode;
     }
-    return LEVELS[LEVELS.length - 1];
-}
 
-function getExploreItems() {
-    const level = getCurrentLevel();
-    const query = searchQuery.toLowerCase().trim();
-    let items = [];
+    // Update list highlighting
+    document.querySelectorAll(".area-item").forEach(el => {
+        el.classList.toggle("selected", el.dataset.code === selectedDeptCode);
+    });
 
-    if (level.dataKey === "country") {
-        // At country level, show top cities
-        return getTopCitiesItems();
-    }
+    // Update highlight on map
+    updateHighlight();
 
-    if (level.dataKey === "region") {
-        // Show regions ranked by price
-        const data = priceData.region || {};
-        for (const code in data) {
-            const stats = data[code][currentType];
-            if (!stats || !stats.wtm) continue;
-            const name = REGIONS[code] ? REGIONS[code].name : code;
-            if (query && !name.toLowerCase().includes(query) && !code.includes(query)) continue;
-            items.push({ code, name, price: stats.wtm, volume: stats.volume, sub: `Region ${code}` });
+    if (selectedDeptCode) {
+        // Zoom to selected department
+        const info = DEPARTMENTS[selectedDeptCode];
+        if (info) {
+            const level = getCurrentLevel();
+            const denseDepts = ["75", "92", "93", "94", "69", "13"];
+            let zoom = level.targetZoom;
+            if (denseDepts.includes(selectedDeptCode)) zoom += 1.5;
+            map.flyTo({ center: info.center, zoom, duration: 1000 });
         }
-    } else if (level.dataKey === "department") {
-        // Show departments, optionally filtered by checked regions
-        const data = priceData.department || {};
-        for (const code in data) {
-            if (checkedRegions.size > 0 && DEPARTMENTS[code] && !checkedRegions.has(DEPARTMENTS[code].region)) continue;
-            const stats = data[code][currentType];
-            if (!stats || !stats.wtm) continue;
-            const name = DEPARTMENTS[code] ? DEPARTMENTS[code].name : code;
-            if (query && !name.toLowerCase().includes(query) && !code.includes(query)) continue;
-            items.push({ code, name, price: stats.wtm, volume: stats.volume, sub: `Dept ${code}` });
+
+        // Load section data on demand
+        if (getCurrentLevel().dataKey === "section") {
+            await loadSectionDataForDept(selectedDeptCode);
         }
-    } else if (level.dataKey === "commune") {
-        // Get visible communes from rendered features + price data
-        items = getVisibleFeatureItems("commune-fill", "code", "nom", priceData.commune || {});
-    } else if (level.dataKey === "postcode") {
-        // Get visible postcodes from rendered features + price data
-        items = getVisiblePostcodeItems();
-    } else if (level.dataKey === "section") {
-        // Get visible sections from rendered features + section cache
-        items = getVisibleSectionItems();
     }
 
-    // Sort by price descending
-    items.sort((a, b) => b.price - a.price);
-    return items.slice(0, exploreCount);
+    // Update label to show selected dept name
+    const label = document.getElementById("area-list-label");
+    const level = getCurrentLevel();
+    if (selectedDeptCode) {
+        const deptInfo = DEPARTMENTS[selectedDeptCode];
+        const deptName = deptInfo ? `${selectedDeptCode} \u2013 ${deptInfo.name}` : selectedDeptCode;
+        label.textContent = `${level.name}s \u00b7 ${deptName}`;
+    } else {
+        label.textContent = "Select Department";
+    }
+
+    updatePriceRangeForLevel();
+    updateColors();
+    updateDynamicStat();
 }
 
-function getTopCitiesItems() {
-    const query = searchQuery.toLowerCase().trim();
-    const items = [];
-    for (const [cityName, cityData] of Object.entries(topCities)) {
-        const stats = cityData[currentType] || cityData.tous;
-        if (!stats || !stats.wtm) continue;
-        if (query && !cityName.toLowerCase().includes(query)) continue;
-        items.push({
-            code: cityData.code,
-            name: cityName,
-            price: stats.wtm,
-            volume: stats.volume,
-            sub: `Commune ${cityData.code}`,
-            isCity: true,
-        });
+function updateHighlight() {
+    // Clear all highlight layers first
+    for (let i = 0; i < LEVELS.length; i++) {
+        const hlId = `${LEVELS[i].dataKey}-highlight`;
+        try { map.setLayoutProperty(hlId, "visibility", "none"); } catch (e) {}
     }
-    items.sort((a, b) => b.price - a.price);
-    return items.slice(0, exploreCount);
-}
 
-function getVisibleFeatureItems(layerId, codeField, nameField, priceSource) {
-    if (!map) return [];
-    const query = searchQuery.toLowerCase().trim();
-    const seen = new Set();
-    const items = [];
+    // For dept-required levels: highlight the selected dept on the department highlight layer
+    if (LEVELS[activeLevel].needsDept && selectedDeptCode) {
+        try {
+            map.setFilter("department-highlight", ["==", ["get", "code"], selectedDeptCode]);
+            map.setLayoutProperty("department-highlight", "visibility", "visible");
+        } catch (e) {}
+        return;
+    }
 
-    try {
-        const features = map.queryRenderedFeatures({ layers: [layerId] });
-        for (const f of features) {
-            const code = f.properties[codeField];
-            if (!code || seen.has(code)) continue;
-            seen.add(code);
+    // For non-dept levels: highlight selected area
+    if (selectedAreaCode) {
+        const hlId = `${LEVELS[activeLevel].dataKey}-highlight`;
+        try {
+            map.setFilter(hlId, ["==", ["get", LEVELS[activeLevel].codeField], selectedAreaCode]);
+            map.setLayoutProperty(hlId, "visibility", "visible");
+        } catch (e) {}
+    }
+}
 
-            // Filter by checked departments/regions
-            if (!passesGeoFilter(code)) continue;
+// ---- Dynamic Price Range Per Level ----
 
-            const stats = priceSource[code] && priceSource[code][currentType];
-            if (!stats || !stats.wtm) continue;
+function updatePriceRangeForLevel() {
+    const level = getCurrentLevel();
+    const data = getDisplayData(level.dataKey);
 
-            const name = f.properties[nameField] || code;
-            if (query && !name.toLowerCase().includes(query) && !code.includes(query)) continue;
+    const prices = [];
+    for (const code in data) {
+        const stats = data[code][currentType];
+        if (stats && stats.wtm > 0) prices.push(stats.wtm);
+    }
 
-            const deptCode = deptFromCode(code);
-            const deptName = DEPARTMENTS[deptCode] ? DEPARTMENTS[deptCode].name : deptCode;
-            items.push({ code, name, price: stats.wtm, volume: stats.volume, sub: deptName });
-        }
-    } catch {}
+    if (prices.length === 0) return;
+
+    prices.sort((a, b) => a - b);
+    const rangeMin = Math.max(0, Math.floor(prices[0] / 100) * 100);
+    const rangeMax = Math.ceil(prices[prices.length - 1] / 100) * 100;
+
+    const minSlider = document.getElementById("price-min-slider");
+    const maxSlider = document.getElementById("price-max-slider");
+    const minInput = document.getElementById("price-min-input");
+    const maxInput = document.getElementById("price-max-input");
+
+    minSlider.min = rangeMin;
+    minSlider.max = rangeMax;
+    maxSlider.min = rangeMin;
+    maxSlider.max = rangeMax;
+    minInput.min = rangeMin;
+    minInput.max = rangeMax;
+    maxInput.min = rangeMin;
+    maxInput.max = rangeMax;
+
+    // Reset filter to full range for this level
+    minSlider.value = rangeMin;
+    maxSlider.value = rangeMax;
+    minInput.value = rangeMin;
+    maxInput.value = rangeMax;
+
+    priceFilter.min = rangeMin;
+    priceFilter.max = rangeMax;
 
-    return items;
+    updateSliderTrack();
 }
 
-function getVisiblePostcodeItems() {
-    if (!map) return [];
-    const query = searchQuery.toLowerCase().trim();
-    const seen = new Set();
-    const items = [];
-    const priceSource = priceData.postcode || {};
+// ---- Geocoding Search ----
 
-    try {
-        const features = map.queryRenderedFeatures({ layers: ["postcode-fill"] });
-        for (const f of features) {
-            const code = f.properties.codePostal;
-            if (!code || seen.has(code)) continue;
-            seen.add(code);
+function getCurrentLevel() {
+    return LEVELS[activeLevel];
+}
 
-            if (!passesGeoFilter(code)) continue;
+async function searchPlace(query) {
+    if (!query || query.length < 2) return [];
+    const url = `https://geo.api.gouv.fr/communes?nom=${encodeURIComponent(query)}&fields=nom,code,codesPostaux,departement,centre,population&boost=population&limit=7`;
+    try {
+        const resp = await fetch(url);
+        if (!resp.ok) return [];
+        return await resp.json();
+    } catch {
+        return [];
+    }
+}
 
-            const stats = priceSource[code] && priceSource[code][currentType];
-            if (!stats || !stats.wtm) continue;
+function renderSearchDropdown(results) {
+    const dropdown = document.getElementById("search-dropdown");
+    dropdown.innerHTML = "";
+    searchDropdownIdx = -1;
 
-            // Try to get commune name from tiles
-            let name = code;
-            // For postcodes, we'll use code as primary display
-            if (query && !code.includes(query)) continue;
+    if (results.length === 0) {
+        dropdown.classList.add("hidden");
+        return;
+    }
 
-            const deptCode = deptFromCode(code);
-            const deptName = DEPARTMENTS[deptCode] ? DEPARTMENTS[deptCode].name : deptCode;
-            items.push({ code, name: `CP ${code}`, price: stats.wtm, volume: stats.volume, sub: deptName });
-        }
-    } catch {}
+    results.forEach((commune, i) => {
+        const item = document.createElement("div");
+        item.className = "search-item";
+        item.dataset.index = i;
+
+        const pop = commune.population
+            ? commune.population.toLocaleString("fr-FR") + " hab."
+            : "";
+        const dept = commune.departement
+            ? commune.departement.nom + " (" + commune.departement.code + ")"
+            : "";
+        const postcodes = (commune.codesPostaux || []).slice(0, 2).join(", ");
+
+        item.innerHTML = `
+            <div class="search-item-name">${commune.nom}</div>
+            <div class="search-item-sub">${[dept, postcodes, pop].filter(Boolean).join(" \u00b7 ")}</div>
+        `;
+        item.addEventListener("click", () => onSelectPlace(commune));
+        item.addEventListener("mouseenter", () => {
+            searchDropdownIdx = i;
+            highlightDropdownItem();
+        });
+        dropdown.appendChild(item);
+    });
 
-    return items;
+    dropdown.classList.remove("hidden");
 }
 
-function getVisibleSectionItems() {
-    if (!map) return [];
-    const query = searchQuery.toLowerCase().trim();
-    const seen = new Set();
-    const items = [];
-
-    try {
-        const features = map.queryRenderedFeatures({ layers: ["section-fill"] });
-        for (const f of features) {
-            const code = f.properties.id;
-            if (!code || seen.has(code)) continue;
-            seen.add(code);
-
-            const deptCode = deptFromCode(code);
-            if (!passesGeoFilter(code)) continue;
-
-            // Look up in section cache
-            const deptData = sectionCache[deptCode];
-            if (!deptData || !deptData[code]) continue;
-            const stats = deptData[code][currentType];
-            if (!stats || !stats.wtm) continue;
-
-            if (query && !code.includes(query)) continue;
-
-            // Extract section letters from end of code
-            let i = code.length - 1;
-            while (i >= 0 && /[A-Z]/.test(code[i])) i--;
-            const letters = code.slice(i + 1);
-
-            const deptName = DEPARTMENTS[deptCode] ? DEPARTMENTS[deptCode].name : deptCode;
-            items.push({ code, name: `Section ${letters}`, price: stats.wtm, volume: stats.volume, sub: `${deptName} \u00b7 ${code.substring(0, 5)}` });
-        }
-    } catch {}
+function highlightDropdownItem() {
+    const items = document.querySelectorAll("#search-dropdown .search-item");
+    items.forEach((el, i) => {
+        el.classList.toggle("active", i === searchDropdownIdx);
+    });
+}
 
-    return items;
+function closeSearchDropdown() {
+    document.getElementById("search-dropdown").classList.add("hidden");
+    searchDropdownIdx = -1;
 }
 
-function updateExploreList() {
-    const container = document.getElementById("explore-list");
-    const titleEl = document.getElementById("explore-title");
-    const level = getCurrentLevel();
+function onSelectPlace(commune) {
+    closeSearchDropdown();
 
-    // Update title
-    const levelLabels = {
-        country: "Top Cities",
-        region: "Top Regions",
-        department: "Top Departments",
-        commune: "Top Communes",
-        postcode: "Top Postcodes",
-        section: "Top Sections",
-    };
-    titleEl.textContent = levelLabels[level.dataKey] || "Explore";
-
-    const items = getExploreItems();
-    container.innerHTML = "";
+    const input = document.getElementById("place-search");
+    input.value = commune.nom;
 
-    if (items.length === 0) {
-        container.innerHTML = '<div class="explore-empty">Zoom in or pan to see data</div>';
-        return;
+    // Fly to the commune
+    if (commune.centre && commune.centre.coordinates) {
+        const [lon, lat] = commune.centre.coordinates;
+        let zoom = 13;
+        if (commune.population > 500000) zoom = 11;
+        else if (commune.population > 100000) zoom = 12;
+        else if (commune.population > 20000) zoom = 12.5;
+
+        map.flyTo({ center: [lon, lat], zoom, duration: 1500 });
     }
 
-    const maxPrice = Math.max(...items.map(it => it.price));
-
-    items.forEach((item, i) => {
-        const barPct = maxPrice > 0 ? Math.round((item.price / maxPrice) * 100) : 0;
-        const row = document.createElement("div");
-        row.className = "explore-row";
-        row.innerHTML = `
-            <span class="explore-rank">${i + 1}</span>
-            <div class="explore-info">
-                <div class="explore-name">${item.name}</div>
-                <div class="explore-sub">${item.sub || ""}</div>
-            </div>
-            <span class="explore-price">${formatPriceShort(item.price)}</span>
-            <div class="explore-bar-wrap"><div class="explore-bar" style="width:${barPct}%"></div></div>
-        `;
-        row.addEventListener("click", () => onExploreItemClick(item));
-        container.appendChild(row);
-    });
+    // Show price details
+    showPlaceDetails(commune);
 }
 
-function onExploreItemClick(item) {
-    const level = getCurrentLevel();
+function showPlaceDetails(commune) {
+    const container = document.getElementById("place-details");
+    const data = priceData.commune && priceData.commune[commune.code];
 
-    if (item.isCity) {
-        const coords = getCityCoords(item.code);
-        if (coords) map.flyTo({ center: coords, zoom: 10, duration: 1500 });
+    if (!data) {
+        container.innerHTML = `
+            <div class="pd-header">
+                <div class="pd-name">${commune.nom}</div>
+                <div class="pd-sub">${commune.departement ? commune.departement.nom : ""} \u00b7 ${commune.code}</div>
+            </div>
+            <div class="pd-empty">No price data available for this commune</div>
+        `;
+        container.classList.remove("hidden");
         return;
     }
 
-    if (level.dataKey === "region" && REGIONS[item.code]) {
-        map.flyTo({ center: REGIONS[item.code].center, zoom: 7.5, duration: 1000 });
-        return;
-    }
+    const types = ["tous", "appartement", "maison"];
+    const typeLabels = { tous: "All Types", appartement: "Apartments", maison: "Houses" };
 
-    if (level.dataKey === "department" && DEPARTMENTS[item.code]) {
-        const denseDepts = ["75", "92", "93", "94", "69", "13"];
-        const zoom = denseDepts.includes(item.code) ? 10.5 : 9;
-        map.flyTo({ center: DEPARTMENTS[item.code].center, zoom, duration: 1000 });
-        return;
+    let rows = "";
+    for (const type of types) {
+        const stats = data[type];
+        if (!stats || !stats.wtm) {
+            rows += `<div class="pd-row"><span class="pd-type">${typeLabels[type]}</span><span class="pd-na">N/A</span></div>`;
+            continue;
+        }
+        rows += `
+            <div class="pd-row">
+                <span class="pd-type">${typeLabels[type]}</span>
+                <span class="pd-wtm">${formatPrice(stats.wtm)}</span>
+            </div>
+            <div class="pd-row pd-sub-row">
+                <span>Median ${formatPrice(stats.median)}</span>
+                <span>${stats.volume.toLocaleString("fr-FR")} sales</span>
+                <span>${(stats.confidence * 100).toFixed(0)}% conf.</span>
+            </div>
+        `;
     }
 
-    // For commune/postcode/section: try to find the feature on the map to get coordinates
-    const fillLayers = {
-        commune: "commune-fill",
-        postcode: "postcode-fill",
-        section: "section-fill",
-    };
-    const layerId = fillLayers[level.dataKey];
-    if (layerId) {
-        try {
-            const codeField = LEVELS.find(l => l.dataKey === level.dataKey).codeField;
-            const features = map.queryRenderedFeatures({ layers: [layerId] });
-            for (const f of features) {
-                if (f.properties[codeField] === item.code) {
-                    // Get approximate center from the feature geometry
-                    const coords = getFeatureCenter(f);
-                    if (coords) {
-                        const nextZoom = Math.min(map.getZoom() + 2, 18);
-                        map.flyTo({ center: coords, zoom: nextZoom, duration: 1000 });
-                        return;
-                    }
-                }
-            }
-        } catch {}
-    }
+    container.innerHTML = `
+        <div class="pd-header">
+            <div class="pd-name">${commune.nom}</div>
+            <div class="pd-sub">${commune.departement ? commune.departement.nom : ""} \u00b7 ${commune.code}${commune.population ? " \u00b7 " + commune.population.toLocaleString("fr-FR") + " hab." : ""}</div>
+        </div>
+        ${rows}
+    `;
+    container.classList.remove("hidden");
 }
 
-function getFeatureCenter(feature) {
-    // Simple centroid approximation from geometry coordinates
-    const geom = feature.geometry;
-    if (!geom) return null;
-
-    let coords;
-    if (geom.type === "Polygon") {
-        coords = geom.coordinates[0];
-    } else if (geom.type === "MultiPolygon") {
-        coords = geom.coordinates[0][0];
-    } else {
-        return null;
-    }
+function initSearch() {
+    const input = document.getElementById("place-search");
+    const dropdown = document.getElementById("search-dropdown");
+    let debounceTimer;
+    let lastResults = [];
+
+    input.addEventListener("input", () => {
+        clearTimeout(debounceTimer);
+        const query = input.value.trim();
+        if (query.length < 2) {
+            closeSearchDropdown();
+            lastResults = [];
+            return;
+        }
+        debounceTimer = setTimeout(async () => {
+            lastResults = await searchPlace(query);
+            renderSearchDropdown(lastResults);
+        }, 300);
+    });
 
-    if (!coords || coords.length === 0) return null;
+    input.addEventListener("keydown", (e) => {
+        const items = dropdown.querySelectorAll(".search-item");
+        if (items.length === 0) return;
+
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            searchDropdownIdx = Math.min(searchDropdownIdx + 1, items.length - 1);
+            highlightDropdownItem();
+        } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            searchDropdownIdx = Math.max(searchDropdownIdx - 1, 0);
+            highlightDropdownItem();
+        } else if (e.key === "Enter") {
+            e.preventDefault();
+            if (searchDropdownIdx >= 0 && searchDropdownIdx < lastResults.length) {
+                onSelectPlace(lastResults[searchDropdownIdx]);
+            }
+        } else if (e.key === "Escape") {
+            closeSearchDropdown();
+        }
+    });
 
-    let sumLng = 0, sumLat = 0;
-    for (const [lng, lat] of coords) {
-        sumLng += lng;
-        sumLat += lat;
-    }
-    return [sumLng / coords.length, sumLat / coords.length];
-}
+    // Close dropdown on outside click
+    document.addEventListener("click", (e) => {
+        if (!e.target.closest(".search-wrapper")) {
+            closeSearchDropdown();
+        }
+    });
 
-function getCityCoords(code) {
-    const coords = {
-        "75056": [2.3522, 48.8566],
-        "13055": [5.3698, 43.2965],
-        "69123": [4.8357, 45.7640],
-        "31555": [1.4442, 43.6047],
-        "06088": [7.2620, 43.7102],
-        "44109": [-1.5536, 47.2184],
-        "34172": [3.8767, 43.6108],
-        "67482": [7.7521, 48.5734],
-        "33063": [-0.5792, 44.8378],
-        "59350": [3.0573, 50.6292],
-    };
-    return coords[code] || null;
+    // Clear details and dropdown when input is cleared
+    input.addEventListener("focus", () => {
+        if (input.value.trim().length >= 2 && lastResults.length > 0) {
+            renderSearchDropdown(lastResults);
+        }
+    });
 }
 
 // ---- Level Switching ----
 
-function setLevel(levelIdx) {
-    const level = LEVELS[levelIdx];
-    if (levelIdx <= 1) {
-        // Country or Region: recenter on France
-        map.flyTo({ center: FRANCE_CENTER, zoom: level.targetZoom, duration: 800 });
-    } else {
-        map.flyTo({ zoom: level.targetZoom, duration: 800 });
+async function setLevel(levelIdx) {
+    activeLevel = levelIdx;
+    selectedAreaCode = null;  // Clear area selection
+
+    // If switching to a non-dept level, clear dept selection
+    if (!LEVELS[levelIdx].needsDept) {
+        selectedDeptCode = null;
     }
+
+    updateLayerVisibility();
+    updateHighlight();
+
+    // If switching to section level with a dept already selected, load section data
+    if (LEVELS[levelIdx].dataKey === "section" && selectedDeptCode && !sectionCache[selectedDeptCode]) {
+        await loadSectionDataForDept(selectedDeptCode);
+    }
+
+    updatePriceRangeForLevel();
+    updateColors();
+    updateDynamicStat();
+    populateAreaList();
 }
 
 // ---- Price Filter ----
@@ -1282,6 +1266,7 @@ function syncPriceFromSliders() {
 
     updateSliderTrack();
     updateColors();
+    updateDynamicStat();
 }
 
 function syncPriceFromInputs() {
@@ -1300,11 +1285,15 @@ function syncPriceFromInputs() {
 
     updateSliderTrack();
     updateColors();
+    updateDynamicStat();
 }
 
 function updateSliderTrack() {
-    const pctMin = (priceFilter.min / PRICE_SLIDER_MAX) * 100;
-    const pctMax = Math.min((priceFilter.max / PRICE_SLIDER_MAX) * 100, 100);
+    const sliderMax = parseInt(document.getElementById("price-max-slider").max) || PRICE_SLIDER_MAX;
+    const sliderMin = parseInt(document.getElementById("price-min-slider").min) || 0;
+    const range = sliderMax - sliderMin || 1;
+    const pctMin = ((priceFilter.min - sliderMin) / range) * 100;
+    const pctMax = Math.min(((priceFilter.max - sliderMin) / range) * 100, 100);
     const track = document.getElementById("slider-track");
     if (track) {
         track.style.left = pctMin + "%";
@@ -1322,6 +1311,12 @@ document.addEventListener("DOMContentLoaded", () => {
         const isDark = document.body.classList.contains("dark-mode");
         themeBtn.innerHTML = isDark ? "&#9790;" : "&#9728;";
         localStorage.setItem("theme", isDark ? "dark" : "light");
+        // Update highlight + hover layer colors for theme
+        const hlColor = isDark ? "#ffffff" : "#000000";
+        for (const level of LEVELS) {
+            try { map.setPaintProperty(`${level.dataKey}-highlight`, "line-color", hlColor); } catch (e) {}
+            try { map.setPaintProperty(`${level.dataKey}-hover`, "line-color", hlColor); } catch (e) {}
+        }
     });
     // Restore saved theme (default: dark)
     const saved = localStorage.getItem("theme");
@@ -1330,15 +1325,27 @@ document.addEventListener("DOMContentLoaded", () => {
         themeBtn.innerHTML = "&#9728;";
     }
 
-    // Explore count pills
-    document.querySelectorAll(".count-pill").forEach(btn => {
-        btn.addEventListener("click", () => {
-            document.querySelectorAll(".count-pill").forEach(b => b.classList.remove("active"));
-            btn.classList.add("active");
-            exploreCount = parseInt(btn.dataset.count);
-            updateExploreList();
-        });
-    });
+    // Property type checkboxes
+    const cbAppart = document.getElementById("cb-appartement");
+    const cbMaison = document.getElementById("cb-maison");
+    function syncPropertyType() {
+        const a = cbAppart.checked;
+        const m = cbMaison.checked;
+        if (a && m) currentType = "tous";
+        else if (a) currentType = "appartement";
+        else if (m) currentType = "maison";
+        else {
+            cbAppart.checked = true;
+            cbMaison.checked = true;
+            currentType = "tous";
+        }
+        updatePriceRangeForLevel();
+        updateColors();
+        updateDynamicStat();
+        populateAreaList();
+    }
+    cbAppart.addEventListener("change", syncPropertyType);
+    cbMaison.addEventListener("change", syncPropertyType);
 
     // Level radio buttons
     document.querySelectorAll('input[name="map-level"]').forEach(radio => {
@@ -1347,15 +1354,8 @@ document.addEventListener("DOMContentLoaded", () => {
         });
     });
 
-    // Search
-    let searchTimeout;
-    document.getElementById("explore-search").addEventListener("input", (e) => {
-        clearTimeout(searchTimeout);
-        searchTimeout = setTimeout(() => {
-            searchQuery = e.target.value;
-            updateExploreList();
-        }, 200);
-    });
+    // Geocoding search
+    initSearch();
 
     // Price range sliders
     document.getElementById("price-min-slider").addEventListener("input", syncPriceFromSliders);
@@ -1374,9 +1374,9 @@ document.addEventListener("DOMContentLoaded", () => {
 (async function main() {
     try {
         await loadPriceData();
-        populateRegionDropdown();
-        populateDeptDropdown();
         initMap();
+        populateAreaList();
+        updatePriceRangeForLevel();
     } catch (err) {
         console.error("Failed to initialize:", err);
         document.body.innerHTML = `<div style="padding:40px;color:#ff6b6b;">

static/index.html

@@ -32,46 +32,45 @@
                 </div>
             </div>
 
-            <!-- Navigate: Region / Department checkbox dropdowns -->
+            <!-- Property Type -->
             <div class="panel-section">
-                <span class="section-label">Navigate</span>
-                <div class="cb-dropdown" id="region-dropdown">
-                    <button class="cb-toggle" id="region-toggle">All Regions</button>
-                    <div class="cb-menu" id="region-menu"></div>
-                </div>
-                <div class="cb-dropdown" id="dept-dropdown">
-                    <button class="cb-toggle" id="dept-toggle">All Departments</button>
-                    <div class="cb-menu" id="dept-menu"></div>
+                <span class="section-label">Property Type</span>
+                <div class="type-checkboxes">
+                    <label class="type-cb"><input type="checkbox" id="cb-appartement" checked><span>Apartments</span></label>
+                    <label class="type-cb"><input type="checkbox" id="cb-maison" checked><span>Houses</span></label>
                 </div>
             </div>
 
+            <!-- Area list: scrollable list of items for current level -->
+            <div class="panel-section">
+                <span class="section-label" id="area-list-label">Areas</span>
+                <div id="area-list" class="area-list"></div>
+            </div>
+
             <!-- Price range filter -->
             <div class="panel-section">
                 <span class="section-label">Price Range (&euro;/m&sup2;)</span>
                 <div class="price-inputs">
-                    <input type="number" id="price-min-input" value="0" min="0" max="50000" step="100">
+                    <input type="number" id="price-min-input" value="200" min="0" max="50000" step="100">
                     <span class="price-sep">&ndash;</span>
                     <input type="number" id="price-max-input" value="25000" min="0" max="50000" step="100">
                 </div>
                 <div class="range-container">
                     <div class="slider-bg"></div>
                     <div class="slider-track" id="slider-track"></div>
-                    <input type="range" id="price-min-slider" min="0" max="25000" value="0" step="100">
-                    <input type="range" id="price-max-slider" min="0" max="25000" value="25000" step="100">
+                    <input type="range" id="price-min-slider" min="200" max="25000" value="200" step="100">
+                    <input type="range" id="price-max-slider" min="200" max="25000" value="25000" step="100">
                 </div>
             </div>
 
-            <!-- Explore: search + dynamic top list -->
-            <div class="panel-section explore-section">
-                <div class="explore-header">
-                    <span class="section-label" id="explore-title">Top Cities</span>
-                    <div class="explore-count-pills">
-                        <button class="count-pill active" data-count="5">5</button>
-                        <button class="count-pill" data-count="10">10</button>
-                    </div>
+            <!-- Search: geocoding autocomplete -->
+            <div class="panel-section search-section">
+                <span class="section-label">Search Place</span>
+                <div class="search-wrapper">
+                    <input type="text" id="place-search" class="place-search" placeholder="Search a city or commune..." autocomplete="off">
+                    <div id="search-dropdown" class="search-dropdown hidden"></div>
                 </div>
-                <input type="text" id="explore-search" class="explore-search" placeholder="Search by name or code...">
-                <div id="explore-list"></div>
+                <div id="place-details" class="place-details hidden"></div>
             </div>
 
             <div class="footer">

static/style.css

@@ -152,125 +152,126 @@ body {
     font-size: 0.72rem;
 }
 
-/* ---- Checkbox Dropdown ---- */
-.cb-dropdown {
-    position: relative;
+/* ---- Property Type Checkboxes ---- */
+.type-checkboxes {
+    display: flex;
+    gap: 12px;
 }
 
-.cb-toggle {
-    width: 100%;
-    padding: 8px 28px 8px 10px;
-    background: white;
-    color: #1d1d1f;
-    border: 2px solid #e5e5e5;
-    border-radius: 8px;
-    font-size: 0.78rem;
+.type-cb {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 0.8rem;
     font-weight: 500;
-    font-family: inherit;
+    color: #4b4b4b;
+    padding: 5px 8px;
+    border-radius: 6px;
+    transition: background 0.15s;
+}
+
+.type-cb:hover {
+    background: #eee;
+}
+
+.type-cb input[type="checkbox"] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    border: 2px solid #d2d2d7;
+    border-radius: 4px;
+    background: #f5f5f7;
     cursor: pointer;
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: all 0.2s ease;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234b4b4b'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 10px center;
+    position: relative;
 }
 
-.cb-toggle:hover {
+.type-cb input[type="checkbox"]:checked {
     border-color: #1cb0f6;
+    background: #1cb0f6;
 }
 
-.cb-menu {
-    display: none;
+.type-cb input[type="checkbox"]:checked::after {
+    content: "\2713";
     position: absolute;
-    left: 0;
-    right: 0;
-    top: 100%;
-    margin-top: 2px;
-    background: white;
-    border: 2px solid #e5e5e5;
-    border-radius: 8px;
-    max-height: 200px;
-    overflow-y: auto;
-    z-index: 100;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+    left: 1px;
+    top: -1px;
+    font-size: 12px;
+    color: white;
+    font-weight: bold;
 }
 
-.cb-dropdown.open .cb-menu {
-    display: block;
+.type-cb span {
+    letter-spacing: 0.3px;
+    font-weight: 600;
+    font-size: 0.72rem;
 }
 
-.cb-menu::-webkit-scrollbar {
+/* ---- Area List (scrollable navigation list) ---- */
+.area-list {
+    max-height: 200px;
+    overflow-y: auto;
+    border: 2px solid #e5e5e5;
+    border-radius: 8px;
+    background: white;
+}
+
+.area-list::-webkit-scrollbar {
     width: 4px;
 }
-.cb-menu::-webkit-scrollbar-thumb {
+.area-list::-webkit-scrollbar-thumb {
     background: #c1c1c1;
     border-radius: 2px;
 }
 
-.cb-item {
+.area-item {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: 6px;
-    padding: 6px 10px;
+    padding: 7px 10px;
     cursor: pointer;
     font-size: 0.75rem;
     color: #1d1d1f;
     transition: background 0.1s;
+    border-bottom: 1px solid #f0f0f0;
 }
 
-.cb-item:hover {
-    background: #f5f5f7;
+.area-item:last-child {
+    border-bottom: none;
 }
 
-.cb-item.cb-all {
-    border-bottom: 2px solid #e5e5e5;
-    color: #1cb0f6;
-    font-weight: 700;
+.area-item:hover {
+    background: #f0f5ff;
 }
 
-.cb-item input[type="checkbox"] {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 16px;
-    height: 16px;
-    min-width: 16px;
-    border: 2px solid #d2d2d7;
-    border-radius: 3px;
-    background: #f5f5f7;
-    cursor: pointer;
-    position: relative;
-}
-.cb-item input[type="checkbox"]:checked {
-    background: #1cb0f6;
-    border-color: #1cb0f6;
-}
-.cb-item input[type="checkbox"]:checked::after {
-    content: "";
-    position: absolute;
-    left: 4px;
-    top: 1px;
-    width: 5px;
-    height: 9px;
-    border: solid white;
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
+.area-item.selected {
+    background: #e0efff;
+    font-weight: 700;
+    border-left: 3px solid #1cb0f6;
 }
 
-.cb-item-label {
+.area-item-name {
     flex: 1;
-    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.cb-item-price {
-    color: #86868b;
-    font-size: 0.68rem;
+.area-item-price {
+    color: #1cb0f6;
+    font-size: 0.72rem;
+    font-weight: 600;
     white-space: nowrap;
+    margin-left: 8px;
+}
+
+.area-list-empty {
+    padding: 14px 10px;
+    font-size: 0.72rem;
+    color: #86868b;
+    text-align: center;
 }
 
 /* ---- Dynamic Stat Detail ---- */
@@ -338,7 +339,7 @@ body {
     position: absolute;
     top: 10px;
     height: 4px;
-    background: linear-gradient(to right, #028758, #FFF64E, #CC000A);
+    background: #1cb0f6;
     border-radius: 2px;
     z-index: 1;
     left: 0;
@@ -476,56 +477,18 @@ body {
     color: #1d1d1f;
 }
 
-/* ---- Explore Section ---- */
-.explore-section {
+/* ---- Search Section ---- */
+.search-section {
     flex: 1;
 }
 
-.explore-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.explore-count-pills {
-    display: flex;
-    gap: 3px;
-}
-
-.count-pill {
-    padding: 3px 10px;
-    border: none;
-    background: #e5e5e5;
-    color: #4b4b4b;
-    font-size: 0.68rem;
-    font-weight: 700;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.1s ease;
-    font-family: inherit;
-    box-shadow: 0 2px 0 #afafaf;
-}
-
-.count-pill:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 3px 0 #afafaf;
-}
-
-.count-pill:active {
-    transform: translateY(2px);
-    box-shadow: 0 0 0 #afafaf;
-}
-
-.count-pill.active {
-    background: #1cb0f6;
-    color: white;
-    box-shadow: 0 2px 0 #1899d6;
+.search-wrapper {
+    position: relative;
 }
 
-/* Search input */
-.explore-search {
+.place-search {
     width: 100%;
-    padding: 7px 10px;
+    padding: 8px 10px;
     background: white;
     color: #1d1d1f;
     border: 2px solid #e5e5e5;
@@ -536,85 +499,135 @@ body {
     transition: all 0.2s ease;
 }
 
-.explore-search:focus {
+.place-search:focus {
     outline: none;
     border-color: #1cb0f6;
 }
 
-.explore-search::placeholder {
+.place-search::placeholder {
     color: #aeaeb2;
 }
 
-/* Explore list rows */
-.explore-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 7px 10px;
-    margin-bottom: 3px;
-    background: #f5f5f7;
+/* Search autocomplete dropdown */
+.search-dropdown {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    margin-top: 2px;
+    background: white;
+    border: 2px solid #e5e5e5;
     border-radius: 8px;
+    max-height: 280px;
+    overflow-y: auto;
+    z-index: 200;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+}
+
+.search-dropdown.hidden {
+    display: none;
+}
+
+.search-dropdown::-webkit-scrollbar {
+    width: 4px;
+}
+.search-dropdown::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 2px;
+}
+
+.search-item {
+    padding: 8px 10px;
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: background 0.1s;
+}
+
+.search-item:hover,
+.search-item.active {
+    background: #f0f5ff;
+}
+
+.search-item-name {
     font-size: 0.8rem;
+    font-weight: 600;
+    color: #1d1d1f;
 }
 
-.explore-row:hover {
-    background: #e8e8ed;
+.search-item-sub {
+    font-size: 0.65rem;
+    color: #86868b;
+    margin-top: 1px;
 }
 
-.explore-rank {
-    font-size: 0.7rem;
-    font-weight: 700;
-    color: #1cb0f6;
-    min-width: 16px;
+/* Place details card */
+.place-details {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-top: 4px;
 }
 
-.explore-info {
-    flex: 1;
-    min-width: 0;
+.place-details.hidden {
+    display: none;
+}
+
+.pd-header {
+    padding: 6px 0;
+    border-bottom: 1px solid #e5e5e5;
+    margin-bottom: 2px;
 }
 
-.explore-name {
+.pd-name {
+    font-size: 0.85rem;
+    font-weight: 700;
     color: #1d1d1f;
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 
-.explore-sub {
+.pd-sub {
     font-size: 0.65rem;
     color: #86868b;
+    margin-top: 1px;
+}
+
+.pd-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0;
 }
 
-.explore-price {
+.pd-type {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: #4b4b4b;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.pd-wtm {
+    font-size: 0.82rem;
     font-weight: 700;
     color: #1cb0f6;
-    font-size: 0.8rem;
-    white-space: nowrap;
 }
 
-.explore-bar-wrap {
-    width: 40px;
-    height: 4px;
-    background: #e5e5e5;
-    border-radius: 2px;
-    overflow: hidden;
+.pd-na {
+    font-size: 0.75rem;
+    color: #aeaeb2;
 }
 
-.explore-bar {
-    height: 100%;
-    border-radius: 2px;
-    background: #1cb0f6;
-    transition: width 0.3s;
+.pd-sub-row {
+    padding: 0 0 4px 0;
+    gap: 8px;
+    font-size: 0.65rem;
+    color: #86868b;
+    border-bottom: 1px solid #f0f0f0;
 }
 
-.explore-empty {
+.pd-empty {
     font-size: 0.75rem;
     color: #86868b;
     text-align: center;
-    padding: 12px 0;
+    padding: 10px 0;
 }
 
 /* ---- Footer ---- */
@@ -743,51 +756,54 @@ body.dark-mode .level-radio input[type="radio"]:checked {
     border-color: #1cb0f6;
 }
 
-/* Dark mode checkbox dropdown */
-body.dark-mode .cb-toggle {
-    background-color: #2a2a2a;
+/* Dark mode property type checkboxes */
+body.dark-mode .type-cb {
     color: #e5e5e5;
-    border-color: #444;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e5e5e5'/%3E%3C/svg%3E");
 }
 
-body.dark-mode .cb-toggle:hover {
+body.dark-mode .type-cb:hover {
+    background: #333;
+}
+
+body.dark-mode .type-cb input[type="checkbox"] {
+    background: #3a3a3a;
+    border-color: #555;
+}
+
+body.dark-mode .type-cb input[type="checkbox"]:checked {
+    background: #1cb0f6;
     border-color: #1cb0f6;
 }
 
-body.dark-mode .cb-menu {
+/* Dark mode area list */
+body.dark-mode .area-list {
     background: #2a2a2a;
     border-color: #444;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
 }
 
-body.dark-mode .cb-menu::-webkit-scrollbar-thumb {
+body.dark-mode .area-list::-webkit-scrollbar-thumb {
     background: #555;
 }
 
-body.dark-mode .cb-item {
+body.dark-mode .area-item {
     color: #e5e5e5;
+    border-bottom-color: #333;
 }
 
-body.dark-mode .cb-item:hover {
+body.dark-mode .area-item:hover {
     background: #333;
 }
 
-body.dark-mode .cb-item.cb-all {
-    border-bottom-color: #444;
-    color: #1cb0f6;
+body.dark-mode .area-item.selected {
+    background: #1a3a5c;
+    border-left-color: #1cb0f6;
 }
 
-body.dark-mode .cb-item input[type="checkbox"] {
-    background: #3a3a3a;
-    border-color: #555;
-}
-body.dark-mode .cb-item input[type="checkbox"]:checked {
-    background: #1cb0f6;
-    border-color: #1cb0f6;
+body.dark-mode .area-item-price {
+    color: #1cb0f6;
 }
 
-body.dark-mode .cb-item-price {
+body.dark-mode .area-list-empty {
     color: #888;
 }
 
@@ -850,60 +866,72 @@ body.dark-mode .legend-labels {
     color: #999;
 }
 
-/* Dark mode count pills */
-body.dark-mode .count-pill {
+/* Dark mode search */
+body.dark-mode .place-search {
     background: #2a2a2a;
     color: #e5e5e5;
-    box-shadow: 0 2px 0 #1a1a1a;
+    border-color: #444;
 }
 
-body.dark-mode .count-pill:hover {
-    box-shadow: 0 3px 0 #1a1a1a;
+body.dark-mode .place-search:focus {
+    border-color: #1cb0f6;
 }
 
-body.dark-mode .count-pill.active {
-    background: #1cb0f6;
-    color: white;
-    box-shadow: 0 2px 0 #1899d6;
+body.dark-mode .place-search::placeholder {
+    color: #666;
 }
 
-/* Dark mode search */
-body.dark-mode .explore-search {
+/* Dark mode search dropdown */
+body.dark-mode .search-dropdown {
     background: #2a2a2a;
-    color: #e5e5e5;
     border-color: #444;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
 }
 
-body.dark-mode .explore-search:focus {
-    border-color: #1cb0f6;
+body.dark-mode .search-dropdown::-webkit-scrollbar-thumb {
+    background: #555;
 }
 
-body.dark-mode .explore-search::placeholder {
-    color: #666;
+body.dark-mode .search-item:hover,
+body.dark-mode .search-item.active {
+    background: #333;
 }
 
-/* Dark mode explore rows */
-body.dark-mode .explore-row {
-    background: #2a2a2a;
+body.dark-mode .search-item-name {
+    color: #e5e5e5;
 }
 
-body.dark-mode .explore-row:hover {
-    background: #333;
+body.dark-mode .search-item-sub {
+    color: #888;
 }
 
-body.dark-mode .explore-name {
-    color: #e5e5e5;
+/* Dark mode place details */
+body.dark-mode .pd-header {
+    border-bottom-color: #444;
+}
+
+body.dark-mode .pd-name {
+    color: #ffffff;
 }
 
-body.dark-mode .explore-sub {
+body.dark-mode .pd-sub {
     color: #888;
 }
 
-body.dark-mode .explore-bar-wrap {
-    background: #1a1a1a;
+body.dark-mode .pd-type {
+    color: #ccc;
+}
+
+body.dark-mode .pd-na {
+    color: #666;
+}
+
+body.dark-mode .pd-sub-row {
+    color: #888;
+    border-bottom-color: #333;
 }
 
-body.dark-mode .explore-empty {
+body.dark-mode .pd-empty {
     color: #888;
 }