Halden Stories — Référence de design web et prompt

# Prompt: Halden Stories interactive map hero

Build a single-file, one-screen **interactive storytelling map hero** for a fictional climate publication, **Halden Stories** ("Discover stories across North America"). Use plain HTML, CSS, inline SVG and vanilla JS, with no framework and no build step. The look is a light "field notes" atlas: a thin ink-line vector map of North America on warm off-white paper, small terracotta dots, monospace labels and a bold sans headline. Hovering a region fills it with a moving photo, and clicking opens a horizontal, draggable slider of coloured story cards.

## Media

- **Landscape grid photo:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/1571669e-4604-4c0d-9e0d-5e50b819d55d.jpg` (2336×1744). One image holding a 3×2 grid of six landscape photos separated by white gutters. The cell edges are columns 0–766, 786–1551, 1571–2336 and rows 0–862, 880–1744.
  - **Top row:** a California reservoir with a dam; Midwest crop circles from the air; a solar farm in pine forest by a river.
  - **Bottom row:** offshore wind turbines and a lighthouse at sunrise; a hydro dam in autumn boreal forest in Québec; a spare cell (wind turbines over forest, unused).
- **Grid video:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/efc53bc3-598a-4b28-b2a1-e72355301bac.mp4` (1664×1244, 4s, muted, loops seamlessly). The same grid with motion inside every cell: clouds and reflections, wheat, glints across the panels, turbines spinning, water pouring through the dam.
  - The last second crossfades into the first, so it loops without a jump and never plays in reverse.
  - Its cells sit at columns 0–545, 558–1104, 1117–1663 and rows 0–615, 626–1243.