Reliability + accuracy + features: routing fallback, tolls, EV price, filters, trends, dark mode, URL state, social card

Reliability:
- Routing tries FOSSGIS first, falls back to project-osrm; clearer error when
both are unavailable.
- Cache BAN geocoding (localStorage for cities, in-memory for autocomplete) and
charger views (session cache by rounded bbox+zoom).
- Service-worker update prompt: a "Nouvelle version — Recharger" toast applies
the waiting SW on demand (install no longer auto-skips waiting).

Accuracy:
- EV charging-price selector (home / mixte / fast-charge EUR/kWh) used in the cost.
- Smarter toll estimate: per-road EUR/km (free autoroutes -> 0, A14 premium),
excludes free lettered urban links (A6a/A6b); totals use the computed euro.

Features:
- Filter by enseigne (brand) with counts.
- "Voir les moins cheres": clickable list of the 12 cheapest in the selection.
- "Stations pres de moi": one-tap geolocation to the nearest cheapest station.
- Price trend per fuel (median + up/down vs previous build), persisted in
output/price_history.json.
- Dark mode following the OS setting (panels + inverted basemap).
- Shareable URL state (hash) restoring fuel, brand, price ceiling, route + vehicle.

Social card:
- generate_og.py renders a 1200x630 og-card.png; built at container start (Pillow
+ DejaVu font) into output/, not committed (HF blocks new binaries). OG/Twitter
use it with summary_large_image.

Bump service worker cache to v12.

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

.gitignore

@@ -5,3 +5,5 @@ __pycache__/
 *.pyc
 .DS_Store
 *.log
+# Social card is generated at build time into output/, not committed (HF blocks new binaries)
+static/og-card.png

Dockerfile

@@ -1,6 +1,11 @@
 # Hugging Face Spaces (Docker SDK) — serves the PWA on port 7860.
 FROM python:3.11-slim
 
+# A TrueType font so the build can render the social-share card (og-card.png).
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends fonts-dejavu-core \
+    && rm -rf /var/lib/apt/lists/*
+
 # HF Spaces run as a non-root user with UID 1000.
 RUN useradd -m -u 1000 user
 USER user

build_map.py

@@ -23,6 +23,7 @@ OUTPUT_DIR = os.path.join(BASE_DIR, "output")
 STATIC_DIR = os.path.join(BASE_DIR, "static")
 OUTPUT_HTML = os.path.join(OUTPUT_DIR, "index.html")  # served at "/" (PWA start_url)
 CACHE_JSON = os.path.join(OUTPUT_DIR, "stations.json")
+HISTORY_JSON = os.path.join(OUTPUT_DIR, "price_history.json")  # national medians over time
 PARIS = ZoneInfo("Europe/Paris")
 SITE_URL = "https://samdnx-prix-carburant.hf.space/"  # canonical URL (sitemap / SEO)
 
@@ -59,6 +60,40 @@ def fuel_stats(stations: list[dict]) -> dict[str, dict]:
     return stats
 
 
+def compute_trends(stats: dict[str, dict]) -> dict[str, dict]:
+    """National median per fuel, with the change vs the previous build.
+
+    A small history of medians is kept in output/price_history.json so the map
+    can show whether each fuel is trending up or down. On hosts with ephemeral
+    storage the history resets on a cold restart (deltas then start at 0).
+    """
+    today = datetime.now(PARIS).strftime("%Y-%m-%d")
+    medians = {f: stats[f]["median"] for f in stats}
+    history: list[dict] = []
+    if os.path.exists(HISTORY_JSON):
+        try:
+            with open(HISTORY_JSON, encoding="utf-8") as fh:
+                history = json.load(fh)
+        except Exception:
+            history = []
+
+    prev = history[-1]["medians"] if history else {}
+    trends = {f: {"median": m, "delta": round(m - prev[f], 3) if f in prev else 0.0}
+              for f, m in medians.items()}
+
+    if history and history[-1].get("date") == today:
+        history[-1]["medians"] = medians          # same day: keep one entry
+    else:
+        history.append({"date": today, "medians": medians})
+    history = history[-30:]
+    try:
+        with open(HISTORY_JSON, "w", encoding="utf-8") as fh:
+            json.dump(history, fh)
+    except Exception:
+        pass
+    return trends
+
+
 def compact_records(stations: list[dict]) -> list[list]:
     """Encode each station as a small positional array to shrink the payload."""
     records = []
@@ -93,11 +128,13 @@ def build_html(stations: list[dict]) -> str:
     except Exception as exc:  # car list is optional; never block the map build
         print(f"  (car list unavailable: {exc})")
         cars = []
+    stats = fuel_stats(stations)
     payload = {
         "fuels": FUEL_LABELS,
-        "stats": fuel_stats(stations),
+        "stats": stats,
         "stations": compact_records(stations),
         "cars": cars,
+        "trends": compute_trends(stats),
     }
     data_json = json.dumps(payload, ensure_ascii=False, separators=(",", ":"))
     months_fr = ["janv.", "févr.", "mars", "avr.", "mai", "juin",
@@ -144,6 +181,11 @@ def generate(output_html: str = OUTPUT_HTML) -> str:
     os.makedirs(OUTPUT_DIR, exist_ok=True)
     copy_static()
     write_sitemap(datetime.now(PARIS).strftime("%Y-%m-%d"))
+    try:  # social-share card (needs Pillow + a system font); never block the build
+        import generate_og
+        generate_og.save(os.path.join(OUTPUT_DIR, "og-card.png"))
+    except Exception as exc:
+        print(f"  (social card unavailable: {exc})")
     stations = fetch_stations(cache_path=CACHE_JSON)
     html_doc = build_html(stations)
     with open(output_html, "w", encoding="utf-8") as fh:

generate_og.py

@@ -0,0 +1,98 @@
+"""Generate the social-share card (Open Graph / Twitter image), 1200x630.
+
+Run once; the PNG is committed to static/ and copied to the site root at build
+time. The container does not need Pillow at runtime. Re-run only if the wording
+or brand colours change:  python generate_og.py
+"""
+from __future__ import annotations
+
+import os
+
+from PIL import Image, ImageDraw, ImageFont
+
+from generate_icons import make_icon
+
+STATIC_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static")
+W, H, SS = 1200, 630, 2  # final size + supersample factor for crisp text
+
+INK = (33, 37, 41)
+GREY = (90, 99, 110)
+GREEN = (26, 152, 80)
+# Price legend gradient (matches the map): cheap green -> pricey red.
+LEGEND = [(26, 152, 80), (145, 207, 96), (254, 224, 139), (252, 141, 89), (215, 48, 39)]
+
+# Font candidates per weight: Arial on macOS (local), DejaVu in the container.
+FONTS = {
+    "bold": ["/System/Library/Fonts/Supplemental/Arial Bold.ttf",
+             "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",
+             "/Library/Fonts/Arial Bold.ttf"],
+    "regular": ["/System/Library/Fonts/Supplemental/Arial.ttf",
+                "/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",
+                "/Library/Fonts/Arial.ttf"],
+}
+
+
+def _font(weight: str, size: int) -> ImageFont.FreeTypeFont:
+    for path in FONTS[weight]:
+        if os.path.exists(path):
+            return ImageFont.truetype(path, size)
+    return ImageFont.load_default()
+
+
+def _lerp(a, b, t):
+    return tuple(round(a[i] + (b[i] - a[i]) * t) for i in range(3))
+
+
+def _gradient_bar(draw: ImageDraw.ImageDraw, x0, y0, x1, y1) -> None:
+    """Horizontal multi-stop gradient bar (the price scale)."""
+    span = x1 - x0
+    seg = span / (len(LEGEND) - 1)
+    for x in range(x0, x1):
+        f = (x - x0) / seg
+        i = min(int(f), len(LEGEND) - 2)
+        draw.line([(x, y0), (x, y1)], fill=_lerp(LEGEND[i], LEGEND[i + 1], f - i))
+
+
+def build() -> Image.Image:
+    w, h = W * SS, H * SS
+    img = Image.new("RGB", (w, h), (255, 255, 255))
+    d = ImageDraw.Draw(img)
+
+    # Left: the brand icon tile.
+    icon = make_icon(360 * SS, rounded=True)
+    img.paste(icon, (70 * SS, (h - icon.height) // 2), icon)
+
+    tx = 470 * SS  # text column
+    d.text((tx, 160 * SS), "Prix des carburants", font=_font("bold", 60 * SS), fill=INK)
+    d.text((tx, 240 * SS), "en France", font=_font("bold", 60 * SS), fill=GREEN)
+    d.text((tx, 350 * SS), "Carte en temps réel — gazole, SP95,",
+           font=_font("regular", 34 * SS), fill=GREY)
+    d.text((tx, 396 * SS), "SP98, E85, GPL & bornes de recharge",
+           font=_font("regular", 34 * SS), fill=GREY)
+
+    _gradient_bar(d, tx, 470 * SS, (W - 80) * SS, 492 * SS)
+    d.text((tx, 504 * SS), "moins cher", font=_font("regular", 26 * SS), fill=GREY)
+    pricey = "plus cher"
+    pf = _font("regular", 26 * SS)
+    d.text(((W - 80) * SS - d.textlength(pricey, font=pf), 504 * SS), pricey, font=pf, fill=GREY)
+
+    d.text((tx, 556 * SS), "samdnx-prix-carburant.hf.space",
+           font=_font("bold", 26 * SS), fill=GREEN)
+
+    return img.resize((W, H), Image.LANCZOS)
+
+
+def save(path: str) -> None:
+    """Render the card and write it to path (used at build time)."""
+    build().save(path, optimize=True)
+
+
+def main() -> None:
+    os.makedirs(STATIC_DIR, exist_ok=True)
+    out = os.path.join(STATIC_DIR, "og-card.png")
+    save(out)
+    print("wrote", out, f"({os.path.getsize(out) // 1024} KB)")
+
+
+if __name__ == "__main__":
+    main()

map_template.html

@@ -41,17 +41,17 @@
 <meta property="og:title" content="Prix des carburants en France — carte en temps réel">
 <meta property="og:description" content="Trouvez la station-service la moins chère près de chez vous ou sur votre trajet. Gazole, SP95, SP98, E10, E85, GPL et bornes de recharge, actualisés deux fois par jour.">
 <meta property="og:url" content="https://samdnx-prix-carburant.hf.space/">
-<meta property="og:image" content="https://samdnx-prix-carburant.hf.space/icon-512.png">
+<meta property="og:image" content="https://samdnx-prix-carburant.hf.space/og-card.png">
 <meta property="og:image:type" content="image/png">
-<meta property="og:image:width" content="512">
-<meta property="og:image:height" content="512">
-<meta property="og:image:alt" content="Carte des prix des carburants en France">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="Prix des carburants en France — carte en temps réel">
 <!-- Twitter / X -->
-<meta name="twitter:card" content="summary">
+<meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="Prix des carburants en France — carte en temps réel">
 <meta name="twitter:description" content="La station-service la moins chère près de chez vous ou sur votre trajet : gazole, SP95, SP98, E85, GPL et bornes de recharge.">
-<meta name="twitter:image" content="https://samdnx-prix-carburant.hf.space/icon-512.png">
-<meta name="twitter:image:alt" content="Carte des prix des carburants en France">
+<meta name="twitter:image" content="https://samdnx-prix-carburant.hf.space/og-card.png">
+<meta name="twitter:image:alt" content="Prix des carburants en France — carte en temps réel">
 <!-- Structured data: helps search engines describe the app -->
 <script type="application/ld+json">
 {

requirements.txt

@@ -1,2 +1,3 @@
 requests>=2.31
 schedule>=1.2
+Pillow>=10.0

static/app.js

@@ -16,11 +16,29 @@ const STATS = DATA.stats || {};     // { Gazole: {count, p5, median, p95}, ... }
 // Each station: [lat, lon, name, brand, addr, updated, [prices], cp, city, highway]
 const STATIONS = DATA.stations || [];
 const CARS = DATA.cars || [];       // [[label, fuel, L/100km], ...] real ADEME models
+const TRENDS = DATA.trends || {};   // { fuel: {median, delta} } vs the previous build
+const BRAND = 3;                            // station record index: brand/enseigne
 const PRICES = 6, CP = 7, CITY = 8, HW = 9; // station record indices (HW: 1 = autoroute)
 const CORRIDOR_KM = 6;              // show stations within this distance of a route
-// Rough average French autoroute toll for a light vehicle (classe 1), €/km of
-// motorway driven. Tolls vary by concessionaire, so this is an estimate only.
-const TOLL_EUR_PER_KM = 0.09;
+
+// Routing: try a reliable host first, fall back to the public OSRM demo server.
+const ROUTERS = [
+  "https://routing.openstreetmap.de/routed-car/route/v1/driving/",  // FOSSGIS (stable)
+  "https://router.project-osrm.org/route/v1/driving/",              // project-osrm demo
+];
+
+// Motorway tolls (light vehicle, classe 1). Approximate €/km on a tolled
+// autoroute; a few roads differ enough to special-case. Estimate only.
+const TOLL_RATE = 0.092;
+const TOLL_SPECIAL = { 14: 0.49 };                 // A14: short, premium toll
+const FREE_AUTOROUTES = new Set([20, 75, 84, 88]); // largely toll-free autoroutes
+
+// EV charging price options (€/kWh) for the electric cost estimate.
+const EV_PRICES = [
+  { v: 0.25, label: "à domicile (~0,25 €/kWh)" },
+  { v: 0.40, label: "mixte (~0,40 €/kWh)" },
+  { v: 0.59, label: "borne rapide (~0,59 €/kWh)" },
+];
 
 // Green -> yellow -> red gradient stops (cheap -> expensive).
 const STOPS = [
@@ -70,6 +88,10 @@ let routeCoords = null;     // L.LatLng[] of the active route, or null
 let routeStations = null;   // stations near the active route (any fuel)
 let routeDistanceKm = null; // length of the active route, km
 let routeTollKm = 0;        // motorway distance on the route (for toll estimate), km
+let routeTollEuro = 0;      // estimated toll for the active route, €
+let evPricePerKwh = 0.40;   // electricity price used in the EV cost estimate
+let brandFilter = "";       // selected station brand/enseigne, or "" for all
+let listShown = false;      // cheapest-stations list panel visible?
 let vehicleMode = "thermique";  // "thermique" | "electrique"
 let thermCar = null;        // { label, fuel, cons } chosen combustion model
 let stopMarkers = [];       // recharge-stop markers on the map
@@ -93,6 +115,13 @@ function haversine(la1, lo1, la2, lo2) {
     Math.cos(la1 * toR) * Math.cos(la2 * toR) * Math.sin(dLo / 2) ** 2;
   return 2 * R * Math.asin(Math.sqrt(a));
 }
+// Tiny localStorage cache (used for geocoding). Safe if storage is unavailable.
+function cacheGet(key) {
+  try { return JSON.parse(localStorage.getItem(key)); } catch (e) { return null; }
+}
+function cacheSet(key, val) {
+  try { localStorage.setItem(key, JSON.stringify(val)); } catch (e) { /* ignore */ }
+}
 function colorFor(t) {
   t = Math.max(0, Math.min(1, t));
   for (let i = 1; i < STOPS.length; i++) {
@@ -189,6 +218,9 @@ function currentSelection() {
   if (maxPrice != null) {
     list = list.filter(s => s[PRICES][currentFuel] <= maxPrice);
   }
+  if (brandFilter) {
+    list = list.filter(s => (s[BRAND] || "").trim() === brandFilter);
+  }
   if (placeQuery) {
     const q = placeQuery.trim().toLowerCase();
     list = list.filter(s =>
@@ -235,6 +267,7 @@ function render(fit) {
   updateLegend(fuel);
   updateStatus(list.length, cheapest);
   updateCost();
+  if (listShown) renderCheapestList(list);
   if (fit && list.length) {
     map.fitBounds(L.latLngBounds(list.map(s => [s[0], s[1]])).pad(0.15), { maxZoom: 14 });
   }
@@ -268,6 +301,7 @@ panel.onAdd = function () {
     '<input id="place" type="text" placeholder="ex. 75011 ou Lyon" autocomplete="off">' +
     '<button id="place-clear" class="btn" title="Effacer">✕</button></div>' +
     '<div id="place-hint" class="hint"></div>' +
+    '<button id="near-me" class="btn near-me" type="button">📍 Stations près de moi</button>' +
     '<h4>Carburant</h4>';
   FUELS.forEach((f, i) => {
     if (!STATS[f]) return;
@@ -281,13 +315,18 @@ panel.onAdd = function () {
     '<div class="slider-row"><span id="slider-out" class="slider-out"></span>' +
     '<button id="slider-reset" class="btn-link" type="button">tout afficher</button>' +
     '</div></div>';
+  body += '<div id="brand-filter"><h4>Enseigne</h4>' +
+    '<select id="brand" class="route-sel">' + brandOptions() + '</select></div>';
   body += '<div class="legend-bar"></div><div class="legend-scale">' +
     '<span id="lg-lo"></span><span id="lg-mid"></span><span id="lg-hi"></span></div>' +
+    '<div id="lg-trend" class="lg-trend"></div>' +
     '<div id="ev-legend" class="ev-legend" style="display:none">' +
     '<div><span class="sw fast"></span>Rapide (≥ 50 kW)</div>' +
     '<div><span class="sw slow"></span>Normale</div>' +
     '<div id="ev-count" class="hint"></div></div>' +
-    '<div id="route-status" class="route-status"></div>';
+    '<div id="route-status" class="route-status"></div>' +
+    '<button id="list-toggle" class="btn-link" type="button">Voir les moins chères ▾</button>' +
+    '<div id="cheapest-list" class="cheapest-list" style="display:none"></div>';
   div.innerHTML =
     '<div class="panel-head"><span>⛽ Carburant</span><span class="p-caret">▾</span></div>' +
     `<div class="panel-body">${body}</div>`;
@@ -298,6 +337,7 @@ panel.onAdd = function () {
     inp.addEventListener("change", e => {
       if (e.target.value === "ev") selectElectric();
       else selectFuel(+e.target.value, false);
+      writeState();
     }));
 
   const slider = div.querySelector("#price-slider");
@@ -306,9 +346,25 @@ panel.onAdd = function () {
     maxPrice = (+slider.value >= +slider.max) ? null : +slider.value;
     updateSliderOut();
     render(false);
+    writeState();
   });
   div.querySelector("#slider-reset").addEventListener("click", () => {
-    maxPrice = null; slider.value = slider.max; updateSliderOut(); render(false);
+    maxPrice = null; slider.value = slider.max; updateSliderOut(); render(false); writeState();
+  });
+
+  div.querySelector("#brand").addEventListener("change", (e) => {
+    brandFilter = e.target.value; render(false); writeState();
+  });
+  div.querySelector("#near-me").addEventListener("click", nearMe);
+  div.querySelector("#list-toggle").addEventListener("click", toggleList);
+  div.querySelector("#cheapest-list").addEventListener("click", (e) => {
+    const it = e.target.closest(".cl-item");
+    if (!it) return;
+    const lat = +it.dataset.lat, lon = +it.dataset.lon;
+    map.setView([lat, lon], Math.max(map.getZoom(), 14));
+    const s = STATIONS.find(x => x[0] === lat && x[1] === lon);
+    if (s) L.popup({ maxWidth: 300 }).setLatLng([lat, lon])
+      .setContent(popupHtml(s, currentFuel)).openOn(map);
   });
 
   const place = div.querySelector("#place");
@@ -330,6 +386,18 @@ function updateLegend(fuel) {
   document.getElementById("lg-lo").textContent = eur(st.p5, 2) + " €";
   document.getElementById("lg-mid").textContent = eur(st.median, 2) + " €";
   document.getElementById("lg-hi").textContent = eur(st.p95, 2) + " €";
+  const el = document.getElementById("lg-trend");
+  if (!el) return;
+  const tr = TRENDS[fuel];
+  if (tr && Math.abs(tr.delta) >= 0.001) {
+    const up = tr.delta > 0;  // a price rise is "bad" (red), a drop is "good" (green)
+    el.innerHTML = `médiane ${eur(tr.median, 3)} € · <span class="${up ? "up" : "down"}">` +
+      `${up ? "▲" : "▼"} ${eur(Math.abs(tr.delta), 3)} €</span> <span class="hint">vs dernier relevé</span>`;
+  } else if (tr) {
+    el.innerHTML = `médiane ${eur(tr.median, 3)} € · <span class="hint">stable</span>`;
+  } else {
+    el.innerHTML = "";
+  }
 }
 
 // Rescale the price slider to the current fuel's actual min/max and reset to "all".
@@ -410,21 +478,91 @@ function updateStatus(count, cheapest) {
   if (rc) rc.addEventListener("click", clearRoute);
 }
 
+// ===================== Brand filter · cheapest list · near me =====================
+// Distinct station brands (enseignes) with counts, most common first.
+function brandOptions() {
+  const counts = new Map();
+  for (const s of STATIONS) {
+    const b = (s[BRAND] || "").trim();
+    if (b) counts.set(b, (counts.get(b) || 0) + 1);
+  }
+  const arr = [...counts.entries()].sort((a, b) => b[1] - a[1]);
+  return '<option value="">Toutes les enseignes</option>' +
+    arr.map(([b, n]) => `<option value="${esc(b)}">${esc(b)} (${n})</option>`).join("");
+}
+
+// Fill the "cheapest stations" list (top 12 of the current selection).
+function renderCheapestList(list) {
+  const box = document.getElementById("cheapest-list");
+  if (!box) return;
+  const top = (list || currentSelection()).slice()
+    .sort((a, b) => a[PRICES][currentFuel] - b[PRICES][currentFuel]).slice(0, 12);
+  box.innerHTML = top.length
+    ? top.map(s =>
+        `<div class="cl-item" data-lat="${s[0]}" data-lon="${s[1]}">` +
+        `<span class="cl-price">${eur(s[PRICES][currentFuel], 3)} €</span>` +
+        `<span class="cl-name">${esc(s[2])}<small>${esc(s[CITY] || "")}</small></span></div>`).join("")
+    : '<div class="hint">Aucune station.</div>';
+}
+
+function toggleList() {
+  listShown = !listShown;
+  const box = document.getElementById("cheapest-list");
+  const btn = document.getElementById("list-toggle");
+  if (box) box.style.display = listShown ? "block" : "none";
+  if (btn) btn.textContent = listShown ? "Masquer la liste ▴" : "Voir les moins chères ▾";
+  if (listShown) renderCheapestList();
+}
+
+// One-shot geolocation: centre on the user and open the cheapest nearby station.
+function nearMe() {
+  if (!navigator.geolocation) { alert("Géolocalisation non disponible."); return; }
+  const btn = document.getElementById("near-me");
+  const reset = () => { if (btn) btn.textContent = "📍 Stations près de moi"; };
+  if (btn) btn.textContent = "Localisation��";
+  navigator.geolocation.getCurrentPosition((pos) => {
+    reset();
+    const lat = pos.coords.latitude, lon = pos.coords.longitude;
+    map.setView([lat, lon], 12);
+    let best = null, bd = Infinity;
+    for (const s of STATIONS) {
+      if (s[PRICES][currentFuel] == null) continue;
+      const d = haversine(lat, lon, s[0], s[1]);
+      if (d <= 25 && d < bd) { bd = d; best = s; }
+    }
+    if (best) L.popup({ maxWidth: 300 }).setLatLng([best[0], best[1]])
+      .setContent(popupHtml(best, currentFuel)).openOn(map);
+  }, () => {
+    reset();
+    alert("Localisation indisponible (autorisez l'accès, lien https requis).");
+  }, { enableHighAccuracy: true, timeout: 8000 });
+}
+
 // ===================== Geocoding + city autocomplete (BAN) =====================
+const banMemo = new Map();  // session cache for autocomplete queries
 async function banSearch(q, limit) {
+  const key = limit + ":" + q.trim().toLowerCase();
+  if (banMemo.has(key)) return banMemo.get(key);
   const url = `${BAN_URL}?type=municipality&limit=${limit}&q=` + encodeURIComponent(q);
   const r = await fetch(url);
   if (!r.ok) return [];
   const j = await r.json();
-  return j.features || [];
+  const feats = j.features || [];
+  banMemo.set(key, feats);
+  return feats;
 }
 
-// Geocode a typed place name to coordinates (first BAN match).
+// Geocode a typed place name to coordinates (first BAN match), cached on disk.
 async function geocodeCity(q) {
+  const key = "geo:" + q.trim().toLowerCase();
+  const hit = cacheGet(key);
+  if (hit) return hit;
   const f = await banSearch(q, 1);
   if (!f.length) return null;
   const c = f[0].geometry.coordinates;  // [lon, lat]
-  return { lat: c[1], lon: c[0] };
+  const coord = { lat: c[1], lon: c[0] };
+  cacheSet(key, coord);
+  return coord;
 }
 
 // Attach a city-suggestion dropdown to an input. onPick(coord|null) stores the
@@ -489,32 +627,49 @@ function routeMsg(text) {
   if (el) el.textContent = text || "";
 }
 
-// Driving route between two points via the public OSRM server. steps=true so we
-// can read each segment's road ref and estimate the tolled-motorway distance.
+// Driving route between two points. Tries each OSRM host in turn so a single
+// provider being down or rate-limited doesn't break itineraries. steps=true so
+// we can read each segment's road ref and estimate the tolled-motorway distance.
 async function routeBetween(a, b) {
-  const url = `https://router.project-osrm.org/route/v1/driving/` +
-    `${a.lon},${a.lat};${b.lon},${b.lat}?overview=full&geometries=geojson&steps=true`;
-  const r = await fetch(url);
-  if (!r.ok) return null;
-  const j = await r.json();
-  if (j.code !== "Ok" || !j.routes || !j.routes.length) return null;
-  return j.routes[0];
+  const tail = `${a.lon},${a.lat};${b.lon},${b.lat}?overview=full&geometries=geojson&steps=true`;
+  for (const base of ROUTERS) {
+    try {
+      const r = await fetch(base + tail);
+      if (!r.ok) continue;
+      const j = await r.json();
+      if (j.code === "Ok" && j.routes && j.routes.length) return j.routes[0];
+    } catch (e) { /* host unreachable — try the next one */ }
+  }
+  return null;
 }
 
-// A step is on a motorway if its road ref looks like "A 6", "A6", "A 7;E 15"…
-function isAutorouteRef(ref) {
-  return typeof ref === "string" && /(^|\W)A\s?\d/.test(ref);
+// Autoroute number from a step ref ("A 6" -> 6, "A 7;E 15" -> 7), or null.
+// A trailing letter ("A 6a", "A 6b") marks an urban link that is normally free,
+// so those are excluded from the toll.
+function autorouteNumber(ref) {
+  const m = /(?:^|[^A-Za-z])A\s?(\d+)(?![\da-z])/i.exec(ref || "");
+  return m ? parseInt(m[1], 10) : null;
+}
+// €/km toll for a given autoroute number (0 for the mostly-free ones).
+function tollRateFor(n) {
+  if (FREE_AUTOROUTES.has(n)) return 0;
+  return TOLL_SPECIAL[n] || TOLL_RATE;
 }
 
-// Total motorway distance (km) on the route, summed from autoroute steps.
-function tollKmFromRoute(route) {
-  let meters = 0;
+// Estimated toll for the route: { km on autoroutes, euro }. Sums each motorway
+// step's length times that road's rate, so free sections don't inflate the cost.
+function tollFromRoute(route) {
+  let km = 0, euro = 0;
   for (const leg of route.legs || []) {
     for (const step of leg.steps || []) {
-      if (isAutorouteRef(step.ref)) meters += step.distance || 0;
+      const n = autorouteNumber(step.ref);
+      if (n == null) continue;
+      const d = (step.distance || 0) / 1000;
+      km += d;
+      euro += d * tollRateFor(n);
     }
   }
-  return meters / 1000;
+  return { km, euro };
 }
 
 function drawRoute(coords, a, b) {
@@ -548,19 +703,22 @@ async function computeRoute() {
     if (!b) { routeMsg("« " + arrV + " » introuvable."); return; }
     routeMsg("Calcul de l'itinéraire…");
     const route = await routeBetween(a, b);
-    if (!route) { routeMsg("Itinéraire introuvable."); return; }
+    if (!route) { routeMsg("Itinéraire indisponible (service de routage occupé). Réessayez."); return; }
     const coords = route.geometry.coordinates.map((c) => L.latLng(c[1], c[0]));
     drawRoute(coords, a, b);
     routeCoords = coords;
     routeStations = nearRoute(STATIONS, coords);  // cache once for filtering + cost
     routeDistanceKm = route.distance / 1000;
-    routeTollKm = tollKmFromRoute(route);
+    const t = tollFromRoute(route);
+    routeTollKm = t.km;
+    routeTollEuro = t.euro;
     render(false);
     map.fitBounds(L.latLngBounds(coords).pad(0.1));
     const km = (route.distance / 1000).toFixed(0);
     const mins = Math.round(route.duration / 60), h = Math.floor(mins / 60), m = mins % 60;
     routeMsg(`${km} km · ~${h ? h + " h " : ""}${m} min`);
     planEvStops();  // place recharge stops if an EV is selected
+    writeState();
   } catch (err) {
     console.error(err);
     routeMsg("Erreur réseau, réessayez.");
@@ -574,12 +732,14 @@ function clearRoute() {
   routeStations = null;
   routeDistanceKm = null;
   routeTollKm = 0;
+  routeTollEuro = 0;
   depCoord = arrCoord = null;
   const d = document.getElementById("dep"), a = document.getElementById("arr");
   if (d) d.value = "";
   if (a) a.value = "";
   routeMsg("");
   render(false);
+  writeState();
   map.setView([46.6, 2.45], 6);
 }
 
@@ -592,6 +752,8 @@ routeControl.onAdd = function () {
   const evOptions = '<option value="">— Modèle électrique —</option>' +
     EVS.map((e, i) => `<option value="${i}">${e.name} (${e.range} km)</option>`).join("") +
     '<option value="custom">Autre (saisir l\'autonomie)…</option>';
+  const evPriceOptions = EV_PRICES.map((p) =>
+    `<option value="${p.v}" ${p.v === 0.40 ? "selected" : ""}>Recharge ${p.label}</option>`).join("");
   div.innerHTML =
     '<div class="route-head"><span>🛣️ Itinéraire</span><span id="route-caret">▾</span></div>' +
     '<div class="route-body">' +
@@ -604,7 +766,8 @@ routeControl.onAdd = function () {
     '<div class="ac-wrap"><input id="car" type="text" placeholder="Modèle (ex. Clio, 308 HDi…)" autocomplete="off"></div></div>' +
     '<div id="ev-block" style="display:none">' +
     `<select id="ev" class="route-sel">${evOptions}</select>` +
-    '<input id="ev-range" type="number" min="80" max="800" step="10" placeholder="Autonomie (km)" style="display:none"></div>' +
+    '<input id="ev-range" type="number" min="80" max="800" step="10" placeholder="Autonomie (km)" style="display:none">' +
+    `<select id="ev-price" class="route-sel">${evPriceOptions}</select></div>` +
     '<div class="route-actions">' +
     '<button id="route-go" class="btn">Calculer</button>' +
     '<button id="route-reset" class="btn">Effacer</button></div>' +
@@ -618,6 +781,10 @@ routeControl.onAdd = function () {
     r.addEventListener("change", onVehicleModeChange));
   div.querySelector("#ev").addEventListener("change", onEvChange);
   div.querySelector("#ev-range").addEventListener("input", onEvChange);
+  div.querySelector("#ev-price").addEventListener("change", (e) => {
+    evPricePerKwh = parseFloat(e.target.value) || 0.40;
+    updateCost(); writeState();
+  });
   attachCarAutocomplete(div.querySelector("#car"));
   attachAutocomplete(div.querySelector("#dep"), (c) => { depCoord = c; });
   attachAutocomplete(div.querySelector("#arr"), (c) => { arrCoord = c; });
@@ -634,6 +801,7 @@ function onVehicleModeChange(e) {
   if (vehicleMode === "thermique" && thermCar) selectFuel(FUELS.indexOf(thermCar.fuel), false);
   updateCost();
   planEvStops();
+  writeState();
 }
 
 // Current EV selection { name, range, kwh }, or null.
@@ -652,6 +820,7 @@ function onEvChange() {
   document.getElementById("ev-range").style.display = sel.value === "custom" ? "block" : "none";
   updateCost();
   planEvStops();
+  writeState();
 }
 
 // Autocomplete over the embedded ADEME car models ([label, fuel, L/100km]).
@@ -677,6 +846,7 @@ function attachCarAutocomplete(input) {
     selectFuel(FUELS.indexOf(c[1]), false);
     hide();
     updateCost();
+    writeState();
   }
   input.addEventListener("input", () => {
     thermCar = null;
@@ -707,11 +877,11 @@ function updateCost() {
   if (!el) return;
   if (!routeDistanceKm) { el.innerHTML = ""; return; }
 
-  const toll = routeTollKm * TOLL_EUR_PER_KM;
-  const hasToll = routeTollKm > 0.5;  // ignore a few hundred m of motorway slip roads
+  const toll = routeTollEuro;
+  const hasToll = toll > 0.5;  // only show a meaningful toll
   const tollLine = hasToll
     ? `<br><span class="hint">🅿️ Péage autoroute : ≈ ${eur(toll, 2)} € ` +
-      `(estimation, ${eur(routeTollKm, 0)} km)</span>`
+      `(estimation, ${eur(routeTollKm, 0)} km d'autoroute)</span>`
     : "";
   const totalLine = (energy, label) => hasToll
     ? `<br>💰 <b>Total : ≈ ${eur(energy + toll, 2)} €</b>` +
@@ -729,10 +899,10 @@ function updateCost() {
     const usable = ev.range * 0.8;
     const stops = Math.max(0, Math.ceil(routeDistanceKm / usable) - 1);
     const kwh = routeDistanceKm / 100 * ev.kwh;
-    const energy = kwh * 0.40;
+    const energy = kwh * evPricePerKwh;
     el.innerHTML =
       `⚡ <b>${stops} recharge${stops > 1 ? "s" : ""}</b> en route · autonomie ${ev.range} km` +
-      `<br><span class="hint">${eur(kwh, 0)} kWh · ~${eur(energy, 0)} € (≈ 0,40 €/kWh)</span>` +
+      `<br><span class="hint">${eur(kwh, 0)} kWh · ~${eur(energy, 0)} € (≈ ${eur(evPricePerKwh, 2)} €/kWh)</span>` +
       tollLine + totalLine(energy, "recharge");
     return;
   }
@@ -783,12 +953,28 @@ function chargerCap() {
   if (z <= 10) return 800;
   return 400;
 }
+const chargerMemo = new Map();  // session cache: rounded view -> {objs, total, fetched}
+function viewKey(b, cap) {
+  const r = (x) => Math.round(x * 10) / 10;  // ~0.1° buckets
+  return [r(b.getSouth()), r(b.getWest()), r(b.getNorth()), r(b.getEast()), cap].join(",");
+}
+function paintChargers(objs, total, fetched) {
+  const ms = objs.map(chargerMarker);
+  chargerCluster.clearLayers();
+  chargerCluster.addLayers(ms);
+  chargerMsg(!ms.length ? "Aucune borne dans cette zone"
+    : total > fetched ? `${ms.length} bornes affichées (zoomez pour plus)`
+    : `${ms.length} borne${ms.length > 1 ? "s" : ""}`);
+}
 async function loadChargersInView() {
   if (!chargersOn) return;
   const b = map.getBounds();
+  const cap = chargerCap();
+  const key = viewKey(b, cap);
+  const cached = chargerMemo.get(key);
+  if (cached) { paintChargers(cached.objs, cached.total, cached.fetched); return; }
   const where = bboxWhere(b.getSouth(), b.getWest(), b.getNorth(), b.getEast());
   const base = `${IRVE_URL}?limit=100&select=${IRVE_SELECT}&where=${encodeURIComponent(where)}`;
-  const cap = chargerCap();
   const myseq = ++loadSeq;  // ignore this result if a newer view starts loading
   chargerMsg("Chargement des bornes…");
   try {
@@ -815,12 +1001,9 @@ async function loadChargersInView() {
       const prev = bySpot.get(k);
       if (!prev || (c.puissance_nominale || 0) > (prev.puissance_nominale || 0)) bySpot.set(k, c);
     }
-    const ms = [...bySpot.values()].map(chargerMarker);
-    chargerCluster.clearLayers();
-    chargerCluster.addLayers(ms);
-    chargerMsg(!ms.length ? "Aucune borne dans cette zone"
-      : total > all.length ? `${ms.length} bornes affichées (zoomez pour plus)`
-      : `${ms.length} borne${ms.length > 1 ? "s" : ""}`);
+    const objs = [...bySpot.values()];
+    chargerMemo.set(key, { objs, total, fetched: all.length });
+    paintChargers(objs, total, all.length);
   } catch (e) { chargerMsg("Bornes indisponibles."); }
 }
 function toggleChargers(on) {
@@ -996,6 +1179,70 @@ function showInstallPrompt() {
   });
 }
 
+// ===================== Shareable URL state =====================
+// Encode the current selection in the URL hash so links/PWA restore the view.
+function writeState() {
+  const p = new URLSearchParams();
+  p.set("f", electricView ? "ev" : String(currentFuel));
+  if (brandFilter) p.set("b", brandFilter);
+  if (maxPrice != null) p.set("pmax", String(maxPrice));
+  const val = (id) => (document.getElementById(id) || {}).value || "";
+  if (val("dep")) p.set("dep", val("dep"));
+  if (val("arr")) p.set("arr", val("arr"));
+  if (vehicleMode === "electrique") {
+    p.set("mode", "e");
+    if (val("ev")) p.set("ev", val("ev"));
+    if (val("ev") === "custom" && val("ev-range")) p.set("evr", val("ev-range"));
+    p.set("kwh", String(evPricePerKwh));
+  } else if (thermCar) {
+    p.set("car", thermCar.label);
+  }
+  const str = p.toString();
+  try { history.replaceState(null, "", str ? "#" + str : location.pathname + location.search); }
+  catch (e) { /* ignore */ }
+}
+
+// Restore state from the URL hash on load (best-effort; ignores unknown values).
+function restoreState() {
+  const hash = location.hash.replace(/^#/, "");
+  if (!hash) return;
+  const p = new URLSearchParams(hash);
+  const f = p.get("f");
+  if (f === "ev") selectElectric();
+  else if (f) selectFuel(+f, false);
+
+  if (p.get("mode") === "e") {
+    const radio = document.querySelector('input[name="vmode"][value="electrique"]');
+    if (radio) { radio.checked = true; onVehicleModeChange({ target: radio }); }
+    const ev = document.getElementById("ev");
+    if (ev && p.get("ev") != null) { ev.value = p.get("ev"); onEvChange(); }
+    if (p.get("evr")) { const r = document.getElementById("ev-range"); if (r) { r.value = p.get("evr"); onEvChange(); } }
+    if (p.get("kwh")) {
+      evPricePerKwh = parseFloat(p.get("kwh")) || 0.40;
+      const ps = document.getElementById("ev-price"); if (ps) ps.value = p.get("kwh");
+    }
+  } else if (p.get("car")) {
+    const input = document.getElementById("car");
+    if (input) input.value = p.get("car");
+    const m = CARS.find(c => c[0] === p.get("car"));
+    if (m) { thermCar = { label: m[0], fuel: m[1], cons: m[2] }; selectFuel(FUELS.indexOf(m[1]), false); }
+  }
+
+  if (p.get("b")) {
+    brandFilter = p.get("b");
+    const sel = document.getElementById("brand"); if (sel) sel.value = brandFilter;
+  }
+  if (p.get("pmax") != null) {  // after fuel/car selection (those reset the slider)
+    maxPrice = parseFloat(p.get("pmax"));
+    const slider = document.getElementById("price-slider"); if (slider) slider.value = maxPrice;
+    updateSliderOut();
+  }
+  if (p.get("dep")) { const d = document.getElementById("dep"); if (d) d.value = p.get("dep"); }
+  if (p.get("arr")) { const a = document.getElementById("arr"); if (a) a.value = p.get("arr"); }
+  render(false);
+  if (p.get("dep") && p.get("arr")) computeRoute();
+}
+
 // ===================== Init =====================
 // On narrow screens, start with both panels collapsed so the map is clear.
 if (window.matchMedia(MOBILE_MQ).matches) {
@@ -1005,13 +1252,46 @@ if (window.matchMedia(MOBILE_MQ).matches) {
 
 configureSlider();
 render(false);
+restoreState();  // apply any shared/saved view from the URL hash
 
 // Give the map a moment to settle before surfacing the install tip.
 setTimeout(showInstallPrompt, 2500);
 
+// "Nouvelle version" toast: when a new service worker is waiting, let the user
+// apply it on demand instead of silently serving stale assets.
+function showUpdatePrompt(reg) {
+  if (document.querySelector(".update-prompt")) return;
+  const el = document.createElement("div");
+  el.className = "update-prompt";
+  el.innerHTML = '<span>🔄 Nouvelle version disponible</span>' +
+    '<button class="update-btn" type="button">Recharger</button>';
+  document.body.appendChild(el);
+  el.querySelector(".update-btn").addEventListener("click", () => {
+    if (reg.waiting) reg.waiting.postMessage({ type: "SKIP_WAITING" });
+    el.remove();
+  });
+}
+
 if ("serviceWorker" in navigator) {
-  window.addEventListener("load", () =>
-    navigator.serviceWorker.register("/sw.js").catch(() => {}));
+  window.addEventListener("load", async () => {
+    try {
+      const reg = await navigator.serviceWorker.register("/sw.js");
+      if (reg.waiting) showUpdatePrompt(reg);
+      reg.addEventListener("updatefound", () => {
+        const sw = reg.installing;
+        if (!sw) return;
+        sw.addEventListener("statechange", () => {
+          if (sw.state === "installed" && navigator.serviceWorker.controller) showUpdatePrompt(reg);
+        });
+      });
+    } catch (e) { /* registration failed — app still works online */ }
+  });
+  let reloaded = false;
+  navigator.serviceWorker.addEventListener("controllerchange", () => {
+    if (reloaded) return;
+    reloaded = true;
+    location.reload();
+  });
 }
 
 })();

static/styles.css

@@ -115,6 +115,26 @@ html, body { height: 100%; margin: 0; font-family: -apple-system, "Segoe UI", Ro
   color: #1a73e8; font-size: 11px; text-decoration: underline;
 }
 
+/* "Près de moi" button + brand filter */
+.btn.near-me { width: 100%; margin: 2px 0 4px; }
+#brand-filter { margin-top: 4px; }
+
+/* Median price trend vs the previous build */
+.lg-trend { font-size: 12px; margin: 4px 0 2px; }
+.lg-trend .up { color: #d73027; font-weight: 600; }    /* price rose */
+.lg-trend .down { color: #1a7a40; font-weight: 600; }  /* price fell */
+
+/* Cheapest-stations list */
+.cheapest-list { margin-top: 6px; max-height: 240px; overflow-y: auto; }
+.cl-item {
+  display: flex; align-items: baseline; gap: 8px; padding: 4px 2px;
+  border-top: 1px solid #eee; cursor: pointer;
+}
+.cl-item:hover { background: #eef4ff; }
+.cl-price { color: #1a7a40; font-weight: 600; white-space: nowrap; }
+.cl-name { line-height: 1.2; }
+.cl-name small { display: block; color: #999; font-size: 11px; }
+
 /* Price legend */
 .legend-bar {
   height: 12px; border-radius: 3px; margin: 8px 0 3px;
@@ -173,6 +193,19 @@ html, body { height: 100%; margin: 0; font-family: -apple-system, "Segoe UI", Ro
   cursor: pointer; padding: 0 2px; line-height: 1;
 }
 
+/* "New version available" toast */
+.update-prompt {
+  position: fixed; left: 50%; transform: translateX(-50%);
+  top: calc(8px + env(safe-area-inset-top)); z-index: 2500;
+  display: flex; align-items: center; gap: 10px;
+  background: #1a73e8; color: #fff; border-radius: 10px;
+  padding: 8px 12px; font-size: 13px; box-shadow: 0 3px 14px rgba(0,0,0,.3);
+}
+.update-btn {
+  border: 0; background: #fff; color: #1a73e8; border-radius: 7px;
+  padding: 5px 10px; font-size: 13px; font-weight: 600; cursor: pointer;
+}
+
 /* Visible only when JavaScript is disabled (also useful for crawlers) */
 .noscript {
   position: absolute; inset: 0; z-index: 3000; overflow: auto;
@@ -208,3 +241,21 @@ html, body { height: 100%; margin: 0; font-family: -apple-system, "Segoe UI", Ro
   .panel label { padding: 4px 0; }
   .leaflet-touch .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; }
 }
+
+/* Dark mode (follows the OS setting). Panels darken; the light IGN basemap is
+ * inverted to a dark map. Popups stay light for readability. */
+@media (prefers-color-scheme: dark) {
+  .banner, .panel, .route-box, .ac-list, .install-prompt {
+    background: rgba(28,30,34,.97); color: #e8eaed;
+  }
+  .banner small, .panel .count, .panel .hint, .cl-name small, .ac-list .ctx { color: #9aa0a6; }
+  .panel h4 { color: #b6bcc4; }
+  .search-row input, .route-box input, .route-sel, #place {
+    background: #2a2d31; color: #e8eaed; border-color: #4a4d51;
+  }
+  .btn { background: #34373b; color: #e8eaed; border-color: #4a4d51; }
+  .btn:hover { background: #3e4146; }
+  .ac-list .item.active, .ac-list .item:hover, .cl-item:hover { background: #2d3340; }
+  .cl-item { border-top-color: #34373b; }
+  .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.95); }
+}

static/sw.js

@@ -4,7 +4,7 @@
  * - The app shell, icons and CDN libraries are cached so the app boots offline.
  * - Map tiles are cached with a bounded LRU-ish cap for offline revisits.
  */
-const VERSION = "v11";
+const VERSION = "v12";
 const SHELL = "shell-" + VERSION;
 const RUNTIME = "runtime-" + VERSION;
 const TILES = "tiles-" + VERSION;
@@ -16,9 +16,13 @@ const APP_SHELL = [
 ];
 
 self.addEventListener("install", (event) => {
-  event.waitUntil(
-    caches.open(SHELL).then((c) => c.addAll(APP_SHELL)).then(() => self.skipWaiting())
-  );
+  // Pre-cache the shell but don't auto-activate: the page shows an update prompt
+  // and tells us to skip waiting, so prices/assets never change under the user.
+  event.waitUntil(caches.open(SHELL).then((c) => c.addAll(APP_SHELL)));
+});
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
 });
 
 self.addEventListener("activate", (event) => {