feat: add interactive map frontend and deployment config

MapLibre GL JS choropleth with 4 zoom-based levels,
FastAPI backend, Dockerfile for HF Spaces.

.dockerignore

@@ -0,0 +1,28 @@
+data/raw/
+data/processed/
+data/aggregated/prices_section.json
+notebooks/
+tests/
+src/
+explore.data.gouv.fr/
+data-gouv-skill/
+datagouv-mcp/
+stats-explorer-datagouv/
+updates/
+.claude/
+.mcp/
+.venv/
+.git/
+.gitattributes
+__pycache__/
+*.pyc
+*.md
+*.txt
+!requirements-app.txt
+ml_challenge.txt
+pyproject.toml
+uv.lock
+.python-version
+.env
+.env.*
+main.py

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.11-slim
+
+# HF Spaces requirement: run as user 1000
+RUN useradd -m -u 1000 user
+WORKDIR /home/user/app
+
+# Install only the app dependencies (not the full pipeline)
+COPY requirements-app.txt .
+RUN pip install --no-cache-dir -r requirements-app.txt
+
+# Copy application code
+COPY app.py .
+COPY static/ static/
+COPY data/aggregated/ data/aggregated/
+
+# HF Spaces requires port 7860
+EXPOSE 7860
+
+USER user
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,48 @@
+---
+title: French Property Prices
+emoji: 🏠
+colorFrom: green
+colorTo: red
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# French Property Prices - Interactive Map
+
+Interactive choropleth map showing residential property prices per m² across France, aggregated at 6 geographic levels.
+
+## Data
+
+- **Source**: DVF (Demandes de Valeurs Foncières) geolocalized data from [data.gouv.fr](https://www.data.gouv.fr/datasets/demandes-de-valeurs-foncieres-geolocalisees/)
+- **Period**: 2020-2025 (~4.6M transactions)
+- **Property types**: Residential only (Appartement + Maison)
+- **Coverage**: 97 departments, 33,000+ communes, 260,000+ cadastral sections
+
+## Methodology
+
+**Time-Weighted Trimmed Mean (WTM)**:
+1. Exponential decay weighting: `weight = 0.97^months_since_reference` (half-life ~23 months)
+2. Sort transactions by price/m², trim 20% from each tail by cumulative weight
+3. Weighted average of the remaining middle 60%
+
+**Effective Sample Size**: Kish's ESS = (Σw)² / Σ(w²) to account for weight inequality.
+
+**Confidence Score**: Composite of volume component (log-scaled n_eff) and stability component (1 - IQR/median).
+
+## Aggregation Levels
+
+| Level | Codes | Tile Source |
+|-------|-------|-------------|
+| Region | 17 | decoupage-administratif |
+| Department | 97 | decoupage-administratif |
+| Commune | 33,244 | decoupage-administratif |
+| Section | 260,219 | cadastre-dvf |
+
+## Tech Stack
+
+- **Pipeline**: Python + Polars + NumPy
+- **Frontend**: MapLibre GL JS + D3.js color scaling
+- **Backend**: FastAPI (static file serving)
+- **Tiles**: French government vector tiles (openmaptiles.geo.data.gouv.fr)
+- **Deployment**: Docker on Hugging Face Spaces

app.py

@@ -0,0 +1,35 @@
+"""
+FastAPI application serving the interactive property price map.
+
+Serves static frontend files and pre-computed JSON price data.
+Designed for Hugging Face Spaces Docker deployment on port 7860.
+"""
+
+from pathlib import Path
+
+from fastapi import FastAPI
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+
+ROOT = Path(__file__).resolve().parent
+DATA_DIR = ROOT / "data" / "aggregated"
+STATIC_DIR = ROOT / "static"
+
+app = FastAPI(title="French Property Prices", docs_url=None, redoc_url=None)
+
+# Serve static files (JS, CSS)
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+
+
+@app.get("/")
+async def index():
+    return FileResponse(STATIC_DIR / "index.html")
+
+
+@app.get("/data/{filename:path}")
+async def get_data(filename: str):
+    """Serve pre-computed JSON data files."""
+    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")

requirements-app.txt

@@ -0,0 +1,2 @@
+fastapi>=0.115.0
+uvicorn[standard]>=0.32.0

static/app.js

@@ -0,0 +1,404 @@
+/**
+ * French Property Price Map
+ * Interactive choropleth using MapLibre GL JS + government vector tiles.
+ */
+
+// ---- 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: "Region",     zoom: [0, 6],   source: "admin",    layer: "regions",      codeField: "code", dataKey: "region" },
+    { name: "Department", zoom: [6, 8],    source: "admin",    layer: "departements", codeField: "code", dataKey: "department" },
+    { name: "Commune",    zoom: [8, 11],   source: "admin",    layer: "communes",     codeField: "code", dataKey: "commune" },
+    { name: "Section",    zoom: [11, 24],  source: "cadastre", layer: "sections",     codeField: "id",   dataKey: "section" },
+];
+
+const COLORS = { low: "#028758", mid: "#FFF64E", high: "#CC000A" };
+const GRAY = "rgba(100, 100, 100, 0.4)";
+const FRANCE_CENTER = [2.3, 46.7];
+const FRANCE_ZOOM = 5.5;
+
+// ---- State ----
+let priceData = {};          // { region: {...}, department: {...}, ... }
+let topCities = {};
+let sectionCache = {};       // { "75": {...}, "69": {...} } - lazy loaded
+let currentType = "tous";
+let currentLevel = null;
+let map;
+
+// ---- Data Loading ----
+
+async function loadJSON(url) {
+    const resp = await fetch(url);
+    if (!resp.ok) throw new Error(`Failed to load ${url}: ${resp.status}`);
+    return resp.json();
+}
+
+async function loadPriceData() {
+    const [country, region, department, commune, postcode, cities] = 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];
+    try {
+        const data = await loadJSON(`/data/sections/${deptCode}.json`);
+        sectionCache[deptCode] = data;
+        return data;
+    } catch {
+        return {};
+    }
+}
+
+// ---- Color Scale ----
+
+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 (prices.length === 0) return { scale: () => GRAY, min: 0, mid: 0, max: 0 };
+
+    prices.sort((a, b) => a - b);
+    const min = prices[Math.floor(prices.length * 0.05)];
+    const max = prices[Math.floor(prices.length * 0.95)];
+    const mid = prices[Math.floor(prices.length * 0.5)];
+
+    const scale = d3.scaleLinear()
+        .domain([min, mid, max])
+        .range([COLORS.low, COLORS.mid, COLORS.high])
+        .clamp(true);
+
+    return { scale, min, mid, max };
+}
+
+function formatPrice(val) {
+    if (!val || val === 0) return "N/A";
+    return Math.round(val).toLocaleString("fr-FR") + " \u20ac/m\u00b2";
+}
+
+// ---- Map Initialization ----
+
+function initMap() {
+    map = new maplibregl.Map({
+        container: "map",
+        style: {
+            version: 8,
+            sources: {
+                "osm-bright": {
+                    type: "raster",
+                    tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
+                    tileSize: 256,
+                    attribution: "© OpenStreetMap contributors",
+                },
+            },
+            layers: [{
+                id: "osm-base",
+                type: "raster",
+                source: "osm-bright",
+                paint: { "raster-opacity": 0.3, "raster-saturation": -0.8 },
+            }],
+        },
+        center: FRANCE_CENTER,
+        zoom: FRANCE_ZOOM,
+        maxBounds: [[-10, 40], [15, 52]],
+    });
+
+    map.addControl(new maplibregl.NavigationControl(), "top-right");
+    map.addControl(new maplibregl.ScaleControl(), "bottom-right");
+
+    map.on("load", onMapLoad);
+}
+
+async function onMapLoad() {
+    // Add tile sources
+    map.addSource("admin", { type: "vector", url: TILE_SOURCES.admin });
+    map.addSource("cadastre", { type: "vector", url: TILE_SOURCES.cadastre });
+
+    // Add layers for each level
+    for (const level of LEVELS) {
+        const fillId = `${level.dataKey}-fill`;
+        const lineId = `${level.dataKey}-line`;
+
+        map.addLayer({
+            id: fillId,
+            type: "fill",
+            source: level.source,
+            "source-layer": level.layer,
+            minzoom: level.zoom[0],
+            maxzoom: level.zoom[1],
+            paint: {
+                "fill-color": GRAY,
+                "fill-opacity": 0.75,
+            },
+        });
+
+        map.addLayer({
+            id: lineId,
+            type: "line",
+            source: level.source,
+            "source-layer": level.layer,
+            minzoom: level.zoom[0],
+            maxzoom: level.zoom[1],
+            paint: {
+                "line-color": "#fff",
+                "line-opacity": 0.3,
+                "line-width": level.dataKey === "section" ? 0.3 : 0.8,
+            },
+        });
+
+        // Hover interactions
+        map.on("mousemove", fillId, (e) => onHover(e, level));
+        map.on("mouseleave", fillId, onHoverEnd);
+    }
+
+    // Initial paint
+    updateColors();
+    updateLevelIndicator();
+    renderTopCities();
+
+    map.on("zoom", () => {
+        updateLevelIndicator();
+        // Load section data for visible departments when zoomed in
+        if (map.getZoom() >= 11) loadVisibleSections();
+    });
+    map.on("moveend", () => {
+        if (map.getZoom() >= 11) loadVisibleSections();
+    });
+}
+
+// ---- Section Lazy Loading ----
+
+async function loadVisibleSections() {
+    const bounds = map.getBounds();
+    // Figure out which departments are visible based on commune data
+    const deptCodes = new Set();
+    const features = map.queryRenderedFeatures({ layers: ["section-fill"] });
+    for (const f of features) {
+        const id = f.properties.id || "";
+        let dept;
+        if (id.startsWith("97") && id.length > 2) {
+            dept = id.substring(0, 3);
+        } else if (id.startsWith("2A") || id.startsWith("2B")) {
+            dept = id.substring(0, 2);
+        } else {
+            dept = id.substring(0, 2);
+        }
+        if (dept) deptCodes.add(dept);
+    }
+
+    let changed = false;
+    for (const dept of deptCodes) {
+        if (!sectionCache[dept]) {
+            await loadSectionData(dept);
+            changed = true;
+        }
+    }
+    if (changed) updateSectionColors();
+}
+
+// ---- Color Updates ----
+
+function updateColors() {
+    for (const level of LEVELS) {
+        if (level.dataKey === "section") {
+            updateSectionColors();
+            continue;
+        }
+        const data = priceData[level.dataKey];
+        if (!data) continue;
+
+        const { scale, min, mid, max } = buildColorScale(data, currentType);
+        const fillId = `${level.dataKey}-fill`;
+
+        const matchExpr = ["match", ["get", level.codeField]];
+        let hasEntries = false;
+
+        for (const code in data) {
+            const stats = data[code][currentType];
+            if (stats && stats.wtm > 0) {
+                matchExpr.push(code, scale(stats.wtm));
+                hasEntries = true;
+            }
+        }
+        matchExpr.push(GRAY);
+
+        if (hasEntries) {
+            map.setPaintProperty(fillId, "fill-color", matchExpr);
+        }
+
+        // Update legend for current visible level
+        const zoom = map.getZoom();
+        if (zoom >= level.zoom[0] && zoom < level.zoom[1]) {
+            updateLegend(min, mid, max);
+        }
+    }
+}
+
+function updateSectionColors() {
+    // Merge all loaded section data
+    const allSections = {};
+    for (const dept in sectionCache) {
+        Object.assign(allSections, sectionCache[dept]);
+    }
+    if (Object.keys(allSections).length === 0) return;
+
+    const { scale } = buildColorScale(allSections, currentType);
+    const matchExpr = ["match", ["get", "id"]];
+    let hasEntries = false;
+
+    for (const code in allSections) {
+        const stats = allSections[code][currentType];
+        if (stats && stats.wtm > 0) {
+            matchExpr.push(code, scale(stats.wtm));
+            hasEntries = true;
+        }
+    }
+    matchExpr.push(GRAY);
+
+    if (hasEntries) {
+        map.setPaintProperty("section-fill", "fill-color", matchExpr);
+    }
+}
+
+function updateLegend(min, mid, max) {
+    document.getElementById("legend-min").textContent = formatPrice(min);
+    document.getElementById("legend-mid").textContent = formatPrice(mid);
+    document.getElementById("legend-max").textContent = formatPrice(max);
+}
+
+function updateLevelIndicator() {
+    const zoom = map.getZoom();
+    let levelName = "Country";
+    for (const level of LEVELS) {
+        if (zoom >= level.zoom[0] && zoom < level.zoom[1]) {
+            levelName = level.name;
+            break;
+        }
+    }
+    document.getElementById("current-level").textContent = levelName;
+}
+
+// ---- Hover ----
+
+function onHover(e, level) {
+    if (!e.features || e.features.length === 0) return;
+    map.getCanvas().style.cursor = "pointer";
+
+    const props = e.features[0].properties;
+    const code = props[level.codeField];
+    const name = props.nom || props.code || code;
+
+    let stats;
+    if (level.dataKey === "section") {
+        // Look up in section cache
+        for (const dept in sectionCache) {
+            if (sectionCache[dept][code]) {
+                stats = sectionCache[dept][code][currentType];
+                break;
+            }
+        }
+    } else {
+        const data = priceData[level.dataKey];
+        if (data && data[code]) {
+            stats = data[code][currentType];
+        }
+    }
+
+    const infoEl = document.getElementById("hover-info");
+    if (!stats) {
+        infoEl.classList.add("hidden");
+        return;
+    }
+
+    infoEl.classList.remove("hidden");
+    document.getElementById("hover-name").textContent = `${name} (${code})`;
+    document.getElementById("hover-wtm").textContent = formatPrice(stats.wtm);
+    document.getElementById("hover-median").textContent = formatPrice(stats.median);
+    document.getElementById("hover-iqr").textContent = `${formatPrice(stats.q1)} - ${formatPrice(stats.q3)}`;
+    document.getElementById("hover-volume").textContent = stats.volume.toLocaleString("fr-FR") + " transactions";
+    document.getElementById("hover-confidence").textContent = (stats.confidence * 100).toFixed(1) + "%";
+}
+
+function onHoverEnd() {
+    map.getCanvas().style.cursor = "";
+    document.getElementById("hover-info").classList.add("hidden");
+}
+
+// ---- Top Cities Panel ----
+
+function renderTopCities() {
+    const container = document.getElementById("cities-list");
+    container.innerHTML = "";
+
+    const sorted = Object.entries(topCities)
+        .filter(([, d]) => d.tous)
+        .sort((a, b) => (b[1].tous.wtm || 0) - (a[1].tous.wtm || 0));
+
+    for (const [cityName, cityData] of sorted) {
+        const stats = cityData[currentType] || cityData.tous;
+        const row = document.createElement("div");
+        row.className = "city-row";
+        row.innerHTML = `
+            <span class="city-name">${cityName}</span>
+            <span class="city-price">${formatPrice(stats.wtm)}</span>
+        `;
+        row.addEventListener("click", () => {
+            // Fly to city (approximate coordinates)
+            const cityCoords = getCityCoords(cityData.code);
+            if (cityCoords) {
+                map.flyTo({ center: cityCoords, zoom: 12, duration: 1500 });
+            }
+        });
+        container.appendChild(row);
+    }
+}
+
+function getCityCoords(code) {
+    const coords = {
+        "75056": [2.3522, 48.8566],   // Paris
+        "13055": [5.3698, 43.2965],   // Marseille
+        "69123": [4.8357, 45.7640],   // Lyon
+        "31555": [1.4442, 43.6047],   // Toulouse
+        "06088": [7.2620, 43.7102],   // Nice
+        "44109": [-1.5536, 47.2184],  // Nantes
+        "34172": [3.8767, 43.6108],   // Montpellier
+        "67482": [7.7521, 48.5734],   // Strasbourg
+        "33063": [-0.5792, 44.8378],  // Bordeaux
+        "59350": [3.0573, 50.6292],   // Lille
+    };
+    return coords[code] || null;
+}
+
+// ---- Event Listeners ----
+
+document.getElementById("type-select").addEventListener("change", (e) => {
+    currentType = e.target.value;
+    updateColors();
+    renderTopCities();
+});
+
+// ---- Boot ----
+
+(async function main() {
+    try {
+        await loadPriceData();
+        initMap();
+    } catch (err) {
+        console.error("Failed to initialize:", err);
+        document.body.innerHTML = `<div style="padding:40px;color:#ff6b6b;">
+            <h2>Failed to load data</h2><p>${err.message}</p></div>`;
+    }
+})();

static/index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>French Property Prices - Interactive Map</title>
+    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css">
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div id="app">
+        <div id="map"></div>
+
+        <!-- Info panel -->
+        <div id="panel">
+            <h1>France Property Prices</h1>
+            <p class="subtitle">Residential price per m&sup2; (EUR)</p>
+
+            <!-- Property type selector -->
+            <div class="controls">
+                <label>Type:</label>
+                <select id="type-select">
+                    <option value="tous">All residential</option>
+                    <option value="appartement">Appartement</option>
+                    <option value="maison">Maison</option>
+                </select>
+            </div>
+
+            <!-- Current level indicator -->
+            <div class="level-indicator">
+                <span id="current-level">Country</span>
+                <span class="zoom-hint">Zoom to explore</span>
+            </div>
+
+            <!-- Legend -->
+            <div id="legend">
+                <div class="legend-bar"></div>
+                <div class="legend-labels">
+                    <span id="legend-min"></span>
+                    <span id="legend-mid"></span>
+                    <span id="legend-max"></span>
+                </div>
+            </div>
+
+            <!-- Hover info -->
+            <div id="hover-info" class="hidden">
+                <h3 id="hover-name"></h3>
+                <div class="stat-row">
+                    <span class="stat-label">WTM:</span>
+                    <span id="hover-wtm" class="stat-value"></span>
+                </div>
+                <div class="stat-row">
+                    <span class="stat-label">Median:</span>
+                    <span id="hover-median" class="stat-value"></span>
+                </div>
+                <div class="stat-row">
+                    <span class="stat-label">Q1-Q3:</span>
+                    <span id="hover-iqr" class="stat-value"></span>
+                </div>
+                <div class="stat-row">
+                    <span class="stat-label">Volume:</span>
+                    <span id="hover-volume" class="stat-value"></span>
+                </div>
+                <div class="stat-row">
+                    <span class="stat-label">Confidence:</span>
+                    <span id="hover-confidence" class="stat-value"></span>
+                </div>
+            </div>
+
+            <!-- Top 10 cities -->
+            <div id="top-cities">
+                <h2>Top 10 Cities</h2>
+                <div id="cities-list"></div>
+            </div>
+
+            <div class="footer">
+                <p>Source: DVF (data.gouv.fr) 2020-2025</p>
+                <p>Method: Time-weighted trimmed mean</p>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
+    <script src="https://unpkg.com/d3-scale@4/dist/d3-scale.min.js"></script>
+    <script src="https://unpkg.com/d3-interpolate@3/dist/d3-interpolate.min.js"></script>
+    <script src="https://unpkg.com/d3-color@3/dist/d3-color.min.js"></script>
+    <script src="/static/app.js"></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,225 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background: #1a1a2e;
+    color: #e0e0e0;
+    overflow: hidden;
+}
+
+#app {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+}
+
+#map {
+    flex: 1;
+    height: 100%;
+}
+
+/* Side panel */
+#panel {
+    width: 320px;
+    height: 100vh;
+    overflow-y: auto;
+    background: #16213e;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    border-left: 1px solid #0f3460;
+}
+
+#panel h1 {
+    font-size: 1.3rem;
+    color: #fff;
+    margin: 0;
+}
+
+.subtitle {
+    font-size: 0.85rem;
+    color: #888;
+}
+
+/* Controls */
+.controls {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.controls label {
+    font-size: 0.85rem;
+    color: #aaa;
+}
+
+.controls select {
+    flex: 1;
+    padding: 6px 10px;
+    background: #0f3460;
+    color: #e0e0e0;
+    border: 1px solid #1a1a5e;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    cursor: pointer;
+}
+
+/* Level indicator */
+.level-indicator {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #0f3460;
+    border-radius: 6px;
+}
+
+#current-level {
+    font-weight: 600;
+    color: #53d8fb;
+    font-size: 0.95rem;
+}
+
+.zoom-hint {
+    font-size: 0.75rem;
+    color: #666;
+}
+
+/* Legend */
+#legend {
+    padding: 10px 0;
+}
+
+.legend-bar {
+    height: 12px;
+    border-radius: 6px;
+    background: linear-gradient(to right, #028758, #FFF64E, #CC000A);
+}
+
+.legend-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: #888;
+    margin-top: 4px;
+}
+
+/* Hover info */
+#hover-info {
+    padding: 12px;
+    background: #0f3460;
+    border-radius: 6px;
+    border-left: 3px solid #53d8fb;
+}
+
+#hover-info.hidden {
+    display: none;
+}
+
+#hover-info h3 {
+    font-size: 0.95rem;
+    color: #fff;
+    margin-bottom: 8px;
+}
+
+.stat-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 0;
+    font-size: 0.85rem;
+}
+
+.stat-label {
+    color: #888;
+}
+
+.stat-value {
+    color: #e0e0e0;
+    font-weight: 500;
+}
+
+/* Top 10 cities */
+#top-cities {
+    flex: 1;
+}
+
+#top-cities h2 {
+    font-size: 1rem;
+    color: #fff;
+    margin-bottom: 10px;
+}
+
+.city-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 10px;
+    margin-bottom: 4px;
+    background: #0f3460;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.15s;
+    font-size: 0.85rem;
+}
+
+.city-row:hover {
+    background: #1a1a5e;
+}
+
+.city-name {
+    color: #e0e0e0;
+}
+
+.city-price {
+    font-weight: 600;
+    color: #53d8fb;
+}
+
+/* Footer */
+.footer {
+    padding-top: 10px;
+    border-top: 1px solid #0f3460;
+}
+
+.footer p {
+    font-size: 0.7rem;
+    color: #555;
+    line-height: 1.4;
+}
+
+/* Loading overlay */
+#loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(26, 26, 46, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    font-size: 1.2rem;
+    color: #53d8fb;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    #app {
+        flex-direction: column-reverse;
+    }
+    #panel {
+        width: 100%;
+        height: 40vh;
+        border-left: none;
+        border-top: 1px solid #0f3460;
+    }
+    #map {
+        height: 60vh;
+    }
+}