init: info-canicule MVP (Vigilance + climato + conseils)

Astro 5 SSR + ioredis cache Valkey, déployable sur shared-net. - Vigilance temps réel via Opendatasoft (no-auth, LOv2) - Carte SVG des 96 départements (gregoiredavid/france-geojson) - Climato T° 30j par dept (CSV.GZ Météo France, cache 24h) - Conseils officiels par phénomène (7 types Vigilance) - /api/health (UptimeRobot) + /api/vigilance (JSON public CORS *) - Dockerfile multi-stage, CI Forgejo deploy.yml (pattern Reteno) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 18:17:56 +02:00 · 2026-05-25 18:17:56 +02:00 · e075d963bc
commit e075d963bc
37 changed files with 6730 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1,10 @@
 node_modules
 dist
 .astro
 .env
 .env.local
 .git
 .github
 .forgejo
 *.md
 !README.md
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,14 @@
 # Application
 NODE_ENV=development
 PORT=4321
 PUBLIC_SITE_URL=http://localhost:4321
 # Valkey (Redis) — dev local utilise un container, prod utilise l'infra partagée
 REDIS_URL=redis://localhost:6379/0
 # Vigilance provider
 # `opendatasoft` (default, no auth) ou `meteofrance` (token requis)
 VIGILANCE_PROVIDER=opendatasoft
 # TTL du cache Vigilance en secondes (Vigilance se met à jour 2x/jour, 15min raisonnable)
 VIGILANCE_CACHE_TTL=900
--- a/.env.tmpl
+++ b/.env.tmpl
@ -0,0 +1,9 @@
 NODE_ENV=production
 PORT=4321
 PUBLIC_SITE_URL=https://info-canicule.nocleus.com
 # Valkey shared infra — DB 0 (isolation par préfixe `info-canicule:*` via ACL)
 REDIS_URL=redis://info-canicule:{{ pass://Infra/Valkey — info-canicule/password }}@valkey:6379/0
 VIGILANCE_PROVIDER=opendatasoft
 VIGILANCE_CACHE_TTL=900
--- a/.forgejo/workflows/deploy.yml
+++ b/.forgejo/workflows/deploy.yml
@ -0,0 +1,34 @@
 name: Deploy info-canicule
 on:
  push:
    branches: [main]
 jobs:
  deploy:
    runs-on: docker
    container:
      image: alpine:3.20
    steps:
      - name: Install tooling
        run: apk add --no-cache openssh-client git rsync
      - name: Configure SSH
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
          echo "${{ secrets.VPS_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
          chmod 644 ~/.ssh/known_hosts
      - name: Deploy on VPS
        run: |
          ssh deploy@vps.nocleus.com bash -se <<'EOSSH'
            set -euo pipefail
            cd /opt/projects/info-canicule
            git fetch --prune origin main
            git reset --hard origin/main
            make env
            docker compose up -d --build --wait
            docker image prune -f
          EOSSH
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,9 @@
 node_modules
 dist
 .astro
 .env
 .env.local
 .DS_Store
 *.log
 .vscode/*.local
 .idea
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -0,0 +1,49 @@
 # CLAUDE.md — info-canicule
 ## Objectif
 Site d'utilité publique qui affiche en temps réel la Vigilance Météo France par département
 + les conseils officiels (canicule, orages, vent, pluie, neige, avalanches, vagues-submersion).
 Hébergé sur le VPS Nocleus partagé (réseau `shared-net`, cache Valkey ACL `info-canicule`).
 ## Stack
 - Astro 5 SSR (`output: 'server'`, adapter `@astrojs/node` mode standalone)
 - TailwindCSS 3 (via `@astrojs/tailwind`)
 - ioredis pour le cache Valkey
 - TypeScript strict
 - Pas de DB Postgres (le snapshot Vigilance vit en cache, refresh toutes les 15 min)
 ## Source de données
 - **Provider par défaut** : `weatherref-france-vigilance-meteo-departement` chez Opendatasoft.
  - URL : `https://public.opendatasoft.com/api/explore/v2.1/catalog/datasets/weatherref-france-vigilance-meteo-departement/records`
  - Pas d'auth, JSON propre, ~1 000 records par snapshot (départements × phénomènes × échéances J/J1)
  - Licence Ouverte 2.0
 - **Migration possible** : API Vigilance Météo France officielle (portail-api.meteofrance.fr) si fraîcheur Opendatasoft insuffisante. Nécessite un token sur le portail Météo France. Abstraction `vigilance.ts` à découper en deux implémentations le jour venu.
 ## Schéma cache
 | Clé Valkey | TTL | Contenu |
 |---|---|---|
 | `info-canicule:vigilance:snapshot` | `VIGILANCE_CACHE_TTL` (défaut 900s) | `VigilanceSnapshot` complet (fetchedAt + productDatetime + alerts[]) |
 Le prefix `info-canicule:` est injecté par ioredis (`keyPrefix`), donc la clé réelle côté Valkey est `info-canicule:info-canicule:vigilance:snapshot`. Compatible avec l'ACL `~info-canicule:*` côté VPS.
 ## Pièges connus / à surveiller
 - **`product_datetime` change 2× par jour** (~06h et 16h Paris). Tant que Météo France n'a pas publié le suivant, le snapshot Opendatasoft renvoie les valeurs J→J1 du bulletin courant. Inutile de poll plus vite que 15 min.
 - **Echéance "J" = aujourd'hui, "J1" = demain**. Ne pas confondre avec un horizon en heures.
 - **`phenomenon_id`** : 1=vent, 2=pluie, 3=orages, 5=neige/verglas, 6=canicule, 8=avalanches, 9=vagues-submersion. Pas de 4 ni 7.
 - **Andorre** (`domain_id = 99`) est inclus dans le flux Vigilance mais n'est pas un département français. Mappé comme `99 — Andorre (zone Vigilance)` côté front pour ne pas l'écarter silencieusement.
 - **Corse** : codes `2A` et `2B`, pas `20`.
 - **DROM** : pas (encore) inclus dans le mapping `departements.ts` côté front. Vigilance Métropole only pour le MVP. Pour ajouter Outre-mer : étendre `DEPARTEMENTS` + tester si `domain_id` correspond aux codes 971-978.
 - **Conseils par phénomène** (`advice.ts`) : texte curated depuis sante.gouv.fr et meteofrance.fr. À relire / actualiser périodiquement (au moins 1× par an).
 - **Cache miss au boot** : si Valkey est down, `cacheOrFetch` log un warning mais re-fetch à chaque requête — pas de fallback persistant. Acceptable pour un service stateless, mais surveiller la latence Opendatasoft.
 ## Déploiement
 Pattern Reteno : push main → CI Forgejo SSH au VPS → `git fetch && reset --hard && make env && docker compose up -d --build --wait`.
 Le `.env.tmpl` est commit, le `.env` réel est matérialisé par `make env` (pass-cli, vault `Infra`).
--- a/31
+++ b/31
@ -0,0 +1,31 @@
 # syntax=docker/dockerfile:1.7
 FROM node:22-alpine AS deps
 WORKDIR /app
 RUN corepack enable
 COPY package.json pnpm-lock.yaml* ./
 RUN --mount=type=cache,target=/root/.local/share/pnpm/store \
    pnpm install --frozen-lockfile
 FROM node:22-alpine AS build
 WORKDIR /app
 RUN corepack enable
 ENV NODE_ENV=production
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 RUN pnpm build
 FROM node:22-alpine AS runtime
 WORKDIR /app
 ENV NODE_ENV=production \
    PORT=4321 \
    HOST=0.0.0.0
 RUN addgroup -S app && adduser -S app -G app
 COPY --from=build --chown=app:app /app/dist ./dist
 COPY --from=build --chown=app:app /app/node_modules ./node_modules
 COPY --from=build --chown=app:app /app/package.json ./
 USER app
 EXPOSE 4321
 HEALTHCHECK --interval=30s --timeout=5s --start-period=20s --retries=3 \
  CMD wget -qO- http://127.0.0.1:4321/api/health || exit 1
 CMD ["node", "./dist/server/entry.mjs"]
--- a/39
+++ b/39
@ -0,0 +1,39 @@
 .DEFAULT_GOAL := help
 SHELL := /bin/bash
 PASS_CLI ?= $(HOME)/.local/bin/pass-cli
 .PHONY: help install dev build start env check up down logs restart
 help: ## Show this help
 	@awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {printf "  \033[36m%-12s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)
 install: ## Install deps
 	pnpm install
 dev: ## Run Astro dev server (needs REDIS_URL — falls back to graceful warnings)
 	pnpm dev
 build: ## Build SSR bundle
 	pnpm build
 start: ## Run built bundle locally
 	node ./dist/server/entry.mjs
 check: ## Type-check (astro check)
 	pnpm check
 env: ## Materialize .env from .env.tmpl via pass-cli
 	$(PASS_CLI) inject --in-file .env.tmpl --out-file .env --file-mode 0600
 up: ## docker compose up -d --build --wait (prod-like)
 	docker compose up -d --build --wait
 down: ## docker compose down
 	docker compose down
 logs: ## docker compose logs -f
 	docker compose logs -f --tail=100
 restart: ## docker compose restart app
 	docker compose restart app
--- a/README.md
+++ b/README.md
@ -0,0 +1,62 @@
 # info-canicule
 Site d'utilité publique affichant les alertes Vigilance Météo France en temps réel
 et les conseils officiels en cas d'événements météo dangereux (canicule, orages, vent, etc.).
 - **Prod** : https://info-canicule.nocleus.com
 - **Source données** : [meteo.data.gouv.fr](https://meteo.data.gouv.fr/) via [Opendatasoft](https://public.opendatasoft.com/) (Licence Ouverte 2.0)
 - **Stack** : Astro 5 SSR + Node adapter, TailwindCSS, ioredis (cache Valkey)
 ## Dev local
 ```bash
 make install
 # Optionnel : Valkey local pour tester le cache
 docker run -d --name valkey-dev -p 6379:6379 valkey/valkey:8-alpine
 cp .env.example .env
 make dev
 ```
 Ouvrir http://localhost:4321.
 ## Prod (VPS)
 ```bash
 # Premier déploiement (depuis le VPS)
 git clone git@git.nocleus.com:florian/info-canicule.git /opt/projects/info-canicule
 cd /opt/projects/info-canicule
 make env       # matérialise .env depuis vault Infra
 make up        # build + start, joint shared-net, atteint `valkey:6379`
 ```
 Les déploiements suivants passent par la CI Forgejo (push main → workflow `deploy.yml`).
 ## Endpoints
 - `/` — carte Vigilance par département (J)
 - `/departement/<code>` — détail dept (alertes J + J1 + conseils contextuels)
 - `/conseils` — conseils officiels pour les 7 phénomènes Vigilance
 - `/api/health` — JSON `{status, cache, time}` pour UptimeRobot
 - `/api/vigilance` — JSON public du snapshot Vigilance courant (CORS *)
 ## Structure
 ```
 src/
 ├── layouts/Base.astro       # shell HTML + header/footer
 ├── components/              # VigilanceChip, DepartementGrid, VigilanceLegend
 ├── lib/
 │   ├── cache.ts             # ioredis wrapper + cacheOrFetch helper
 │   ├── vigilance.ts         # fetch Opendatasoft + parse + maps utilitaires
 │   ├── phenomena.ts         # référentiel 7 phénomènes + couleurs
 │   ├── departements.ts      # liste INSEE des départements
 │   └── advice.ts            # conseils officiels par phénomène
 └── pages/                   # index, departement/[code], conseils, api/*
 ```
 ## Roadmap
 - [ ] Vraie carte SVG géographique (GeoJSON départements + paths)
 - [ ] Historique T° (données climato base quotidiennes — CSV.GZ par département)
 - [ ] Détail "qui appeler / s'inscrire au registre canicule" par mairie/préfecture
 - [ ] Switch optionnel vers l'API Météo France officielle (plus fraîche que Opendatasoft)
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -0,0 +1,16 @@
 import { defineConfig } from 'astro/config';
 import node from '@astrojs/node';
 import tailwind from '@astrojs/tailwind';
 export default defineConfig({
  output: 'server',
  adapter: node({ mode: 'standalone' }),
  integrations: [tailwind({ applyBaseStyles: false })],
  server: { host: '0.0.0.0', port: 4321 },
  site: 'https://info-canicule.nocleus.com',
  vite: {
    ssr: {
      noExternal: ['ioredis'],
    },
  },
 });
--- a/data-sources/departements-simplifie.geojson
+++ b/data-sources/departements-simplifie.geojson
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,30 @@
 # Compose de PROD côté VPS — déployé dans /opt/projects/info-canicule/.
 # Le service rejoint le réseau shared-net pour atteindre `valkey:6379`.
 # En dev local, utiliser `pnpm dev` directement (Valkey local optionnel).
 services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    image: info-canicule:latest
    container_name: info-canicule-app
    restart: unless-stopped
    env_file: .env
    environment:
      - NODE_ENV=production
      - PORT=4321
      - HOST=0.0.0.0
    networks:
      - shared-net
    mem_limit: 256m
    cpus: 0.5
    logging:
      driver: json-file
      options:
        max-size: "10m"
        max-file: "3"
 networks:
  shared-net:
    external: true
--- a/package.json
+++ b/package.json
@ -0,0 +1,28 @@
 {
  "name": "info-canicule",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "start": "node ./dist/server/entry.mjs",
    "astro": "astro",
    "check": "astro check",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "@astrojs/node": "^9.2.2",
    "@astrojs/tailwind": "^6.0.2",
    "astro": "^5.7.0",
    "ioredis": "^5.6.0",
    "tailwindcss": "^3.4.17"
  },
  "devDependencies": {
    "@astrojs/check": "^0.9.4",
    "@types/node": "^22.10.5",
    "typescript": "^5.7.2"
  },
  "packageManager": "pnpm@10.0.0"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <circle cx="32" cy="32" r="30" fill="#ea580c"/>
  <text x="32" y="44" font-size="34" text-anchor="middle" font-family="system-ui,sans-serif">🌡</text>
 </svg>
--- a/scripts/build-france-map.mjs
+++ b/scripts/build-france-map.mjs
@ -0,0 +1,111 @@
 #!/usr/bin/env node
 // Génère un SVG paths data pour la carte des départements français.
 // Source GeoJSON : github.com/gregoiredavid/france-geojson (Licence Ouverte v2.0).
 // Projection : Mercator approchée. Suffisant pour visualisation, pas pour cartographie précise.
 //
 // Usage : node scripts/build-france-map.mjs
 // Output : src/data/france-map.json (paths par code INSEE, viewBox)
 import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const INPUT = resolve(__dirname, '../data-sources/departements-simplifie.geojson');
 const OUTPUT = resolve(__dirname, '../src/data/france-map.json');
 const W = 1000;
 const H = 1000;
 function project(lng, lat) {
  // Mercator (lng/lat en degrés → coordonnées planes en radians)
  const x = (lng * Math.PI) / 180;
  const y = Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 180 / 2));
  return [x, y];
 }
 function ringToPath(ring) {
  return ring
    .map(([lng, lat], i) => {
      const [x, y] = project(lng, lat);
      return `${i === 0 ? 'M' : 'L'}${x.toFixed(5)},${y.toFixed(5)}`;
    })
    .join('') + 'Z';
 }
 function geometryToPath(geom) {
  if (geom.type === 'Polygon') {
    return geom.coordinates.map(ringToPath).join('');
  }
  if (geom.type === 'MultiPolygon') {
    return geom.coordinates.map((poly) => poly.map(ringToPath).join('')).join('');
  }
  return '';
 }
 const geojson = JSON.parse(readFileSync(INPUT, 'utf-8'));
 // First pass: compute bounding box on projected coords.
 let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
 for (const f of geojson.features) {
  const polys = f.geometry.type === 'Polygon' ? [f.geometry.coordinates] : f.geometry.coordinates;
  for (const poly of polys) {
    for (const ring of poly) {
      for (const [lng, lat] of ring) {
        const [x, y] = project(lng, lat);
        if (x < minX) minX = x;
        if (x > maxX) maxX = x;
        if (y < minY) minY = y;
        if (y > maxY) maxY = y;
      }
    }
  }
 }
 const scale = Math.min(W / (maxX - minX), H / (maxY - minY));
 const offsetX = -minX * scale;
 const offsetY = maxY * scale; // invert Y (SVG top-down)
 function scaledRingToPath(ring) {
  return ring
    .map(([lng, lat], i) => {
      const [x, y] = project(lng, lat);
      const sx = (x * scale + offsetX).toFixed(2);
      const sy = (offsetY - y * scale).toFixed(2);
      return `${i === 0 ? 'M' : 'L'}${sx},${sy}`;
    })
    .join('') + 'Z';
 }
 function scaledGeometryToPath(geom) {
  if (geom.type === 'Polygon') {
    return geom.coordinates.map(scaledRingToPath).join('');
  }
  if (geom.type === 'MultiPolygon') {
    return geom.coordinates.map((poly) => poly.map(scaledRingToPath).join('')).join('');
  }
  return '';
 }
 const paths = {};
 for (const f of geojson.features) {
  const code = String(f.properties.code);
  paths[code] = {
    d: scaledGeometryToPath(f.geometry),
    name: f.properties.nom,
  };
 }
 const finalW = (maxX - minX) * scale;
 const finalH = (maxY - minY) * scale;
 const output = {
  viewBox: `0 0 ${finalW.toFixed(2)} ${finalH.toFixed(2)}`,
  width: finalW.toFixed(0),
  height: finalH.toFixed(0),
  paths,
 };
 mkdirSync(dirname(OUTPUT), { recursive: true });
 writeFileSync(OUTPUT, JSON.stringify(output));
 console.log(`Wrote ${OUTPUT} — ${Object.keys(paths).length} départements, viewBox ${output.viewBox}`);
--- a/src/components/ClimatoChart.astro
+++ b/src/components/ClimatoChart.astro
@ -0,0 +1,100 @@
 ---
 import type { DayObservation } from '../lib/climato';
 interface Props {
  days: DayObservation[];
 }
 const { days } = Astro.props;
 const validTx = days.filter((d) => d.tx !== null);
 const validTn = days.filter((d) => d.tn !== null);
 const allTemps = [...validTx.map((d) => d.tx!), ...validTn.map((d) => d.tn!)];
 const minT = Math.floor(Math.min(...allTemps, 0));
 const maxT = Math.ceil(Math.max(...allTemps, 30));
 const W = 600;
 const H = 200;
 const PAD = 28;
 const innerW = W - 2 * PAD;
 const innerH = H - 2 * PAD;
 const n = days.length || 1;
 const span = maxT - minT || 1;
 function x(i: number): number {
  return PAD + (i / (n - 1 || 1)) * innerW;
 }
 function y(t: number): number {
  return PAD + innerH - ((t - minT) / span) * innerH;
 }
 const txPath = validTx.length
  ? validTx
      .map((d, i) => `${i === 0 ? 'M' : 'L'}${x(days.indexOf(d)).toFixed(1)},${y(d.tx!).toFixed(1)}`)
      .join('')
  : '';
 const tnPath = validTn.length
  ? validTn
      .map((d, i) => `${i === 0 ? 'M' : 'L'}${x(days.indexOf(d)).toFixed(1)},${y(d.tn!).toFixed(1)}`)
      .join('')
  : '';
 const last = days[days.length - 1];
 const heatGuide = 35; // T° canicule indicative
 ---
 <figure class="rounded-lg border border-slate-200 bg-white p-4">
  <figcaption class="mb-2 text-sm font-semibold text-slate-700">
    Températures journalières des 30 derniers jours
    {last && <span class="font-normal text-slate-500">— dernier point : {last.date}</span>}
  </figcaption>
  {days.length === 0 ? (
    <p class="text-sm text-slate-500">Données climato non disponibles pour ce département.</p>
  ) : (
    <svg viewBox={`0 0 ${W} ${H}`} class="h-auto w-full" role="img" aria-label="Graphique T° min/max">
      {/* Heat guideline */}
      {heatGuide >= minT && heatGuide <= maxT && (
        <>
          <line
            x1={PAD}
            x2={W - PAD}
            y1={y(heatGuide)}
            y2={y(heatGuide)}
            stroke="#fb923c"
            stroke-dasharray="3,3"
            stroke-width="1"
          />
          <text x={W - PAD} y={y(heatGuide) - 3} font-size="10" fill="#c2410c" text-anchor="end">
            seuil canicule indicatif 35°C
          </text>
        </>
      )}
      {/* Axes */}
      <line x1={PAD} y1={PAD} x2={PAD} y2={H - PAD} stroke="#cbd5e1" />
      <line x1={PAD} y1={H - PAD} x2={W - PAD} y2={H - PAD} stroke="#cbd5e1" />
      {/* Y labels */}
      {[minT, Math.round((minT + maxT) / 2), maxT].map((t) => (
        <text x={PAD - 4} y={y(t) + 3} font-size="10" fill="#64748b" text-anchor="end">
          {t}°
        </text>
      ))}
      {/* Lines */}
      {txPath && <path d={txPath} fill="none" stroke="#ea580c" stroke-width="2" />}
      {tnPath && <path d={tnPath} fill="none" stroke="#3b82f6" stroke-width="2" />}
      {/* Points (last 7 days highlighted) */}
      {days.slice(-7).map((d) => {
        const i = days.indexOf(d);
        return (
          <>
            {d.tx !== null && <circle cx={x(i)} cy={y(d.tx)} r="2.5" fill="#ea580c" />}
            {d.tn !== null && <circle cx={x(i)} cy={y(d.tn)} r="2.5" fill="#3b82f6" />}
          </>
        );
      })}
    </svg>
  )}
  <div class="mt-3 flex gap-4 text-xs">
    <span class="inline-flex items-center gap-1"><span class="inline-block h-2 w-3 rounded bg-canicule-600"></span> T° max (TX)</span>
    <span class="inline-flex items-center gap-1"><span class="inline-block h-2 w-3 rounded bg-blue-500"></span> T° min (TN)</span>
  </div>
 </figure>
--- a/src/components/DepartementGrid.astro
+++ b/src/components/DepartementGrid.astro
@ -0,0 +1,44 @@
 ---
 // Grille de tous les départements, colorée selon le niveau Vigilance max.
 // Placeholder visuel en attendant l'intégration d'une vraie carte SVG géographique.
 import { DEPARTEMENTS, departementsByRegion } from '../lib/departements';
 import { COLORS } from '../lib/phenomena';
 import type { ColorId } from '../lib/phenomena';
 interface Props {
  colorsByDept: Map<string, ColorId>;
 }
 const { colorsByDept } = Astro.props;
 const byRegion = departementsByRegion();
 const regions = [...byRegion.keys()].sort();
 ---
 <div class="space-y-6">
  {
    regions.map((region) => (
      <section>
        <h3 class="mb-2 text-sm font-semibold uppercase tracking-wider text-slate-500">{region}</h3>
        <div class="flex flex-wrap gap-2">
          {byRegion.get(region)!.map((d) => {
            const colorId = colorsByDept.get(d.code) ?? 1;
            const color = COLORS[colorId];
            return (
              <a
                href={`/departement/${d.code}`}
                class="group relative flex h-12 w-16 items-center justify-center rounded border-2 text-xs font-bold no-underline transition hover:scale-105"
                style={`background-color: ${color.hex}; border-color: ${color.hex};`}
                title={`${d.name} (${d.code}) — niveau ${color.name}`}
              >
                <span class={colorId >= 3 ? 'text-white' : 'text-slate-900'}>{d.code}</span>
                <span class="pointer-events-none absolute -bottom-7 left-1/2 z-10 hidden -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-0.5 text-xs text-white group-hover:block">
                  {d.name}
                </span>
              </a>
            );
          })}
        </div>
      </section>
    ))
  }
 </div>
--- a/src/components/FranceMap.astro
+++ b/src/components/FranceMap.astro
@ -0,0 +1,40 @@
 ---
 import franceMap from '../data/france-map.json';
 import { COLORS } from '../lib/phenomena';
 import type { ColorId } from '../lib/phenomena';
 interface Props {
  colorsByDept: Map<string, ColorId>;
 }
 const { colorsByDept } = Astro.props;
 const entries = Object.entries(franceMap.paths) as [string, { d: string; name: string }][];
 ---
 <svg
  viewBox={franceMap.viewBox}
  xmlns="http://www.w3.org/2000/svg"
  role="img"
  aria-label="Carte des départements français colorée selon le niveau Vigilance"
  class="h-auto w-full max-w-3xl"
 >
  <title>Carte Vigilance Météo France</title>
  {
    entries.map(([code, dept]) => {
      const colorId = colorsByDept.get(code) ?? 1;
      const color = COLORS[colorId];
      return (
        <a href={`/departement/${code}`} class="cursor-pointer">
          <title>{`${dept.name} (${code}) — ${color.name}`}</title>
          <path
            d={dept.d}
            fill={color.hex}
            stroke="#ffffff"
            stroke-width="0.8"
            class="transition-opacity hover:opacity-80"
          />
        </a>
      );
    })
  }
 </svg>
--- a/src/components/VigilanceChip.astro
+++ b/src/components/VigilanceChip.astro
@ -0,0 +1,20 @@
 ---
 import { COLORS, COLOR_LABEL, PHENOMENA } from '../lib/phenomena';
 import type { ColorId, PhenomenonId } from '../lib/phenomena';
 interface Props {
  colorId: ColorId;
  phenomenonId?: PhenomenonId;
  showLevel?: boolean;
 }
 const { colorId, phenomenonId, showLevel = false } = Astro.props;
 const phenomenon = phenomenonId ? PHENOMENA[phenomenonId] : null;
 const colorClass = `vigilance-chip-${colorId}`;
 ---
 <span class:list={['vigilance-chip', colorClass]}>
  {phenomenon && <span aria-hidden="true">{phenomenon.emoji}</span>}
  {phenomenon ? phenomenon.label : COLORS[colorId].name}
  {showLevel && <span class="text-xs opacity-75">— {COLOR_LABEL[colorId]}</span>}
 </span>
--- a/src/components/VigilanceLegend.astro
+++ b/src/components/VigilanceLegend.astro
@ -0,0 +1,23 @@
 ---
 import { COLORS, COLOR_LABEL } from '../lib/phenomena';
 import type { ColorId } from '../lib/phenomena';
 const levels: ColorId[] = [1, 2, 3, 4];
 ---
 <div class="flex flex-wrap items-center gap-3 text-sm">
  <span class="font-semibold text-slate-700">Niveaux :</span>
  {
    levels.map((id) => (
      <span class="inline-flex items-center gap-2">
        <span
          class="inline-block h-4 w-4 rounded border border-slate-300"
          style={`background-color: ${COLORS[id].hex};`}
          aria-hidden="true"
        />
        <span class="capitalize text-slate-700">{COLORS[id].name}</span>
        <span class="hidden text-xs text-slate-500 sm:inline">— {COLOR_LABEL[id]}</span>
      </span>
    ))
  }
 </div>
--- a/src/data/france-map.json
+++ b/src/data/france-map.json
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@ -0,0 +1,67 @@
 ---
 import '../styles/global.css';
 interface Props {
  title?: string;
  description?: string;
 }
 const {
  title = 'Info Canicule — Vigilance météo en temps réel',
  description = 'Suivi en temps réel des alertes Vigilance Météo France et conseils officiels en cas de canicule, orages, tempêtes.',
 } = Astro.props;
 ---
 <!DOCTYPE html>
 <html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <meta name="robots" content="index, follow" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>{title}</title>
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:type" content="website" />
    <meta name="theme-color" content="#ea580c" />
  </head>
  <body class="min-h-screen flex flex-col">
    <header class="border-b border-slate-200 bg-white">
      <div class="container-tight flex items-center justify-between py-4">
        <a href="/" class="flex items-center gap-2 no-underline">
          <span class="text-2xl">🌡️</span>
          <span class="text-lg font-bold text-canicule-700">Info Canicule</span>
        </a>
        <nav class="flex items-center gap-6 text-sm font-medium text-slate-600">
          <a href="/">Carte Vigilance</a>
          <a href="/conseils">Conseils</a>
        </nav>
      </div>
    </header>
    <main class="flex-1">
      <slot />
    </main>
    <footer class="border-t border-slate-200 bg-white">
      <div class="container-tight py-6 text-sm text-slate-500">
        <p>
          Données :
          <a href="https://meteo.data.gouv.fr/" class="text-canicule-700" rel="noopener">Météo France</a>
          via
          <a href="https://public.opendatasoft.com/" class="text-canicule-700" rel="noopener">Opendatasoft</a>
          — Licence Ouverte 2.0.
        </p>
        <p class="mt-1">
          Service d'information publique sans valeur officielle. En cas de doute, suivre les consignes de
          la Préfecture (
          <a href="tel:112" class="text-canicule-700">112</a>
          en urgence).
        </p>
        <p class="mt-2 text-xs text-slate-400">
          Un projet
          <a href="https://nocleus.com" class="text-canicule-700" rel="noopener">Nocleus</a>.
        </p>
      </div>
    </footer>
  </body>
 </html>
--- a/src/lib/advice.ts
+++ b/src/lib/advice.ts
@ -0,0 +1,191 @@
 // Conseils officiels par phénomène — sources : meteofrance.fr/vigilance, sante.gouv.fr, gouvernement.fr.
 // Le contenu reste informationnel : pour une décision urgente, suivre les consignes de la Préfecture.
 import type { PhenomenonId } from './phenomena';
 export interface AdviceBlock {
  title: string;
  items: string[];
 }
 export interface PhenomenonAdvice {
  intro: string;
  blocks: AdviceBlock[];
  emergency: string[];
 }
 export const ADVICE: Record<PhenomenonId, PhenomenonAdvice> = {
  6: {
    intro:
      "La canicule présente un risque sanitaire majeur, en particulier pour les nourrissons, les personnes âgées et les personnes malades. Les bons réflexes permettent de réduire significativement ce risque.",
    blocks: [
      {
        title: 'Hydratation et alimentation',
        items: [
          "Boire régulièrement de l'eau sans attendre d'avoir soif (1,5 L par jour minimum)",
          "Éviter l'alcool, les boissons sucrées et la caféine en excès",
          'Prendre des repas légers et fractionnés, riches en fruits et légumes',
        ],
      },
      {
        title: 'Rafraîchir son logement',
        items: [
          "Fermer volets et fenêtres aux heures les plus chaudes (10h-22h)",
          "Aérer la nuit et tôt le matin quand l'air extérieur est plus frais",
          "Mouiller son corps régulièrement (douche, brumisateur, linges humides)",
          "Passer au moins 2-3 heures par jour dans un lieu climatisé (centre commercial, bibliothèque, mairie)",
        ],
      },
      {
        title: 'Activité et habillement',
        items: [
          'Éviter les efforts physiques intenses entre 11h et 21h',
          'Porter des vêtements amples, légers et clairs',
          'Ne jamais laisser un enfant ou un animal dans une voiture, même quelques minutes',
        ],
      },
      {
        title: 'Veiller sur les proches',
        items: [
          "Prendre des nouvelles des personnes isolées (voisins âgés, malades, sans-abri)",
          "S'inscrire ou inscrire un proche fragile sur le registre canicule de sa mairie",
          'En cas de symptôme inquiétant (maux de tête, vertiges, nausées, fièvre) : alerter rapidement',
        ],
      },
    ],
    emergency: [
      'Coup de chaleur (T° corporelle > 40°C, confusion, peau rouge et sèche) : appeler le 15 immédiatement',
      "En attendant les secours : transporter la personne dans un endroit frais, l'asperger d'eau, la ventiler",
    ],
  },
  1: {
    intro: "Le vent violent peut provoquer des chutes d'objets, d'arbres et endommager les habitations.",
    blocks: [
      {
        title: 'À la maison',
        items: [
          'Limiter les déplacements et reporter les activités de plein air',
          "Ranger ou fixer les objets sensibles au vent (mobilier de jardin, parasols)",
          'Ne pas se promener en forêt ni sur le littoral',
        ],
      },
      {
        title: 'En voiture',
        items: [
          "Limiter la vitesse, en particulier les véhicules hauts (poids lourds, camping-cars)",
          'Éviter les axes secondaires bordés d\'arbres',
        ],
      },
    ],
    emergency: ['En cas de chute d\'arbre ou de ligne électrique : appeler le 18 ou le 112'],
  },
  2: {
    intro: "Les pluies intenses peuvent provoquer des inondations rapides et des crues.",
    blocks: [
      {
        title: 'Avant',
        items: [
          'Surveiller la montée des eaux (rivières, ruisseaux, voiries)',
          'Mettre en hauteur les objets de valeur et les produits dangereux',
        ],
      },
      {
        title: 'Pendant',
        items: [
          "Ne pas s'engager sur une route inondée, même à pied (30 cm d'eau emportent une voiture)",
          "S'éloigner des berges et ne pas descendre dans les sous-sols",
          'Couper le gaz et l\'électricité si l\'eau approche',
        ],
      },
    ],
    emergency: ['Sapeurs-pompiers : 18 ou 112 (européen)'],
  },
  3: {
    intro: "Les orages peuvent s'accompagner de foudre, vent violent, grêle et fortes pluies.",
    blocks: [
      {
        title: 'À l\'extérieur',
        items: [
          "Se mettre à l'abri dans un bâtiment en dur (éviter les abris légers, tentes, voitures découvertes)",
          'S\'éloigner des arbres isolés, pylônes, plans d\'eau',
          'Ne pas se tenir debout dans un champ ou sur une crête',
        ],
      },
      {
        title: 'À la maison',
        items: [
          'Débrancher les appareils électriques sensibles',
          'Éviter d\'utiliser le téléphone fixe et de prendre une douche pendant l\'orage',
          'Rentrer les animaux à l\'abri',
        ],
      },
    ],
    emergency: ['Personne foudroyée : appeler le 15, pratiquer un massage cardiaque si arrêt cardiaque'],
  },
  5: {
    intro: "La neige et le verglas rendent la circulation dangereuse et augmentent les risques de chute.",
    blocks: [
      {
        title: 'Déplacements',
        items: [
          'Privilégier les transports en commun et reporter les trajets non essentiels',
          'Équiper le véhicule (pneus hiver, chaînes, couverture, eau, lampe)',
          'Réduire la vitesse, augmenter les distances de sécurité',
        ],
      },
      {
        title: 'À pied',
        items: [
          'Saler ou sabler les accès et trottoirs devant chez soi',
          'Porter des chaussures à semelles antidérapantes',
        ],
      },
    ],
    emergency: ['SAMU : 15 — En montagne, secours en montagne : 112'],
  },
  8: {
    intro: "Les avalanches menacent les zones de montagne enneigées. Les pratiquants du ski et de la randonnée sont les plus exposés.",
    blocks: [
      {
        title: 'En montagne',
        items: [
          'Consulter le Bulletin d\'Estimation du Risque d\'Avalanche (BERA) avant toute sortie',
          'Éviter les pentes raides (>30°) en période de risque élevé',
          'S\'équiper : DVA (détecteur de victimes d\'avalanche), pelle, sonde',
          'Ne pas s\'engager seul, prévenir de son itinéraire',
        ],
      },
    ],
    emergency: ['Secours en montagne : 112 (ou PGHM/CRS local)'],
  },
  9: {
    intro: "Les vagues et la submersion marine présentent un risque élevé sur le littoral.",
    blocks: [
      {
        title: 'Sur le littoral',
        items: [
          's\'éloigner du bord de mer, des digues et des jetées',
          'Mettre à l\'abri les biens situés en zone basse',
          'Surveiller les enfants en permanence, ne jamais les laisser seuls près de l\'eau',
        ],
      },
      {
        title: 'En mer',
        items: [
          'Annuler toute sortie en mer (plaisance, pêche, plongée)',
          'Rentrer les bateaux au port et les amarrer solidement',
        ],
      },
    ],
    emergency: ['CROSS : 196 (sauvetage en mer)'],
  },
 };
 export const EMERGENCY_NUMBERS = [
  { num: '15', label: 'SAMU (urgences médicales)' },
  { num: '17', label: 'Police / Gendarmerie' },
  { num: '18', label: 'Sapeurs-pompiers' },
  { num: '112', label: "Numéro d'urgence européen" },
  { num: '114', label: 'Urgences pour personnes sourdes/malentendantes (SMS)' },
  { num: '196', label: 'Secours en mer (CROSS)' },
 ];
--- a/src/lib/cache.ts
+++ b/src/lib/cache.ts
@ -0,0 +1,60 @@
 import Redis from 'ioredis';
 let client: Redis | null = null;
 function getClient(): Redis {
  if (client) return client;
  const url = process.env.REDIS_URL;
  if (!url) {
    throw new Error('REDIS_URL is required');
  }
  client = new Redis(url, {
    lazyConnect: false,
    maxRetriesPerRequest: 2,
    keyPrefix: 'info-canicule:',
  });
  client.on('error', (err) => {
    console.error('[redis] error:', err.message);
  });
  return client;
 }
 export async function cacheGet<T>(key: string): Promise<T | null> {
  try {
    const raw = await getClient().get(key);
    if (!raw) return null;
    return JSON.parse(raw) as T;
  } catch (err) {
    console.warn('[cache] get failed for', key, (err as Error).message);
    return null;
  }
 }
 export async function cacheSet<T>(key: string, value: T, ttlSec: number): Promise<void> {
  try {
    await getClient().set(key, JSON.stringify(value), 'EX', ttlSec);
  } catch (err) {
    console.warn('[cache] set failed for', key, (err as Error).message);
  }
 }
 export async function cacheOrFetch<T>(
  key: string,
  ttlSec: number,
  fetcher: () => Promise<T>,
 ): Promise<T> {
  const cached = await cacheGet<T>(key);
  if (cached !== null) return cached;
  const fresh = await fetcher();
  await cacheSet(key, fresh, ttlSec);
  return fresh;
 }
 export async function pingCache(): Promise<boolean> {
  try {
    const res = await getClient().ping();
    return res === 'PONG';
  } catch {
    return false;
  }
 }
--- a/src/lib/climato.ts
+++ b/src/lib/climato.ts
@ -0,0 +1,115 @@
 import { gunzipSync } from 'node:zlib';
 import { cacheOrFetch } from './cache';
 const BASE = 'https://object.files.data.gouv.fr/meteofrance/data/synchro_ftp/BASE/QUOT';
 // Format des fichiers : Q_<DEPT>_latest-2025-2026_RR-T-Vent.csv.gz
 // Colonnes utiles : NUM_POSTE, AAAAMMJJ, RR (mm), TN (°C), TX (°C), TM (°C).
 // Délimiteur : ';'. Valeurs manquantes : vide.
 // Une seule période "latest" couvre l'année courante.
 export interface DayObservation {
  date: string; // YYYY-MM-DD
  tn: number | null;
  tx: number | null;
  tm: number | null;
  rr: number | null;
  stations: number;
 }
 export interface ClimatoSeries {
  dept: string;
  fetchedAt: string;
  days: DayObservation[]; // 30 derniers jours, sorted asc
 }
 const PERIOD = 'latest-2025-2026';
 // Mapping département front → fichier (Andorre 99 et DROM pas dans la base classique).
 function buildUrl(dept: string): string | null {
  if (dept === '99') return null;
  if (dept === '2A' || dept === '2B') {
    // Corse a son propre fichier 2A/2B selon le dataset.
    return `${BASE}/Q_${dept}_${PERIOD}_RR-T-Vent.csv.gz`;
  }
  return `${BASE}/Q_${dept}_${PERIOD}_RR-T-Vent.csv.gz`;
 }
 function parseCsv(text: string): ClimatoSeries['days'] {
  const lines = text.split(/\r?\n/);
  if (lines.length < 2) return [];
  const header = lines[0].split(';');
  const idx = {
    date: header.indexOf('AAAAMMJJ'),
    tn: header.indexOf('TN'),
    tx: header.indexOf('TX'),
    tm: header.indexOf('TM'),
    rr: header.indexOf('RR'),
  };
  if (idx.date === -1) return [];
  // Aggregate by date across stations (mean of available values).
  type Agg = { tnSum: number; tnN: number; txSum: number; txN: number; tmSum: number; tmN: number; rrSum: number; rrN: number; stations: number };
  const byDate = new Map<string, Agg>();
  for (let i = 1; i < lines.length; i++) {
    const line = lines[i];
    if (!line) continue;
    const cols = line.split(';');
    const raw = cols[idx.date];
    if (!raw || raw.length !== 8) continue;
    const date = `${raw.slice(0, 4)}-${raw.slice(4, 6)}-${raw.slice(6, 8)}`;
    let agg = byDate.get(date);
    if (!agg) {
      agg = { tnSum: 0, tnN: 0, txSum: 0, txN: 0, tmSum: 0, tmN: 0, rrSum: 0, rrN: 0, stations: 0 };
      byDate.set(date, agg);
    }
    agg.stations++;
    const addNum = (raw: string | undefined, sum: 'tnSum' | 'txSum' | 'tmSum' | 'rrSum', n: 'tnN' | 'txN' | 'tmN' | 'rrN') => {
      if (!raw) return;
      const v = parseFloat(raw.replace(',', '.'));
      if (Number.isFinite(v)) {
        agg![sum] += v;
        agg![n]++;
      }
    };
    if (idx.tn !== -1) addNum(cols[idx.tn], 'tnSum', 'tnN');
    if (idx.tx !== -1) addNum(cols[idx.tx], 'txSum', 'txN');
    if (idx.tm !== -1) addNum(cols[idx.tm], 'tmSum', 'tmN');
    if (idx.rr !== -1) addNum(cols[idx.rr], 'rrSum', 'rrN');
  }
  const days: DayObservation[] = [...byDate.entries()]
    .sort(([a], [b]) => (a < b ? -1 : 1))
    .map(([date, agg]) => ({
      date,
      tn: agg.tnN > 0 ? +(agg.tnSum / agg.tnN).toFixed(1) : null,
      tx: agg.txN > 0 ? +(agg.txSum / agg.txN).toFixed(1) : null,
      tm: agg.tmN > 0 ? +(agg.tmSum / agg.tmN).toFixed(1) : null,
      rr: agg.rrN > 0 ? +(agg.rrSum / agg.rrN).toFixed(1) : null,
      stations: agg.stations,
    }));
  // Garder les 30 derniers jours.
  return days.slice(-30);
 }
 async function fetchClimato(dept: string): Promise<ClimatoSeries> {
  const url = buildUrl(dept);
  if (!url) {
    return { dept, fetchedAt: new Date().toISOString(), days: [] };
  }
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error(`climato fetch ${dept} failed: ${res.status}`);
  }
  const buf = Buffer.from(await res.arrayBuffer());
  const text = gunzipSync(buf).toString('utf-8');
  const days = parseCsv(text);
  return { dept, fetchedAt: new Date().toISOString(), days };
 }
 export async function getClimatoForDepartement(dept: string): Promise<ClimatoSeries> {
  // Cache 24h — les données journalières arrivent en J+1.
  const ttl = 24 * 60 * 60;
  return cacheOrFetch(`climato:${dept}`, ttl, () => fetchClimato(dept));
 }
--- a/src/lib/departements.ts
+++ b/src/lib/departements.ts
@ -0,0 +1,125 @@
 // Mapping INSEE département codes → nom + chef-lieu.
 // Source : code officiel géographique INSEE 2024 (métropole + DROM).
 // Vigilance Météo France couvre métropole (01-95), Corse (2A/2B), DROM (971-978).
 export interface Departement {
  code: string;
  name: string;
  region: string;
 }
 export const DEPARTEMENTS: Departement[] = [
  { code: '01', name: 'Ain', region: 'Auvergne-Rhône-Alpes' },
  { code: '02', name: 'Aisne', region: 'Hauts-de-France' },
  { code: '03', name: 'Allier', region: 'Auvergne-Rhône-Alpes' },
  { code: '04', name: 'Alpes-de-Haute-Provence', region: "Provence-Alpes-Côte d'Azur" },
  { code: '05', name: 'Hautes-Alpes', region: "Provence-Alpes-Côte d'Azur" },
  { code: '06', name: 'Alpes-Maritimes', region: "Provence-Alpes-Côte d'Azur" },
  { code: '07', name: 'Ardèche', region: 'Auvergne-Rhône-Alpes' },
  { code: '08', name: 'Ardennes', region: 'Grand Est' },
  { code: '09', name: 'Ariège', region: 'Occitanie' },
  { code: '10', name: 'Aube', region: 'Grand Est' },
  { code: '11', name: 'Aude', region: 'Occitanie' },
  { code: '12', name: 'Aveyron', region: 'Occitanie' },
  { code: '13', name: 'Bouches-du-Rhône', region: "Provence-Alpes-Côte d'Azur" },
  { code: '14', name: 'Calvados', region: 'Normandie' },
  { code: '15', name: 'Cantal', region: 'Auvergne-Rhône-Alpes' },
  { code: '16', name: 'Charente', region: 'Nouvelle-Aquitaine' },
  { code: '17', name: 'Charente-Maritime', region: 'Nouvelle-Aquitaine' },
  { code: '18', name: 'Cher', region: 'Centre-Val de Loire' },
  { code: '19', name: 'Corrèze', region: 'Nouvelle-Aquitaine' },
  { code: '2A', name: 'Corse-du-Sud', region: 'Corse' },
  { code: '2B', name: 'Haute-Corse', region: 'Corse' },
  { code: '21', name: "Côte-d'Or", region: 'Bourgogne-Franche-Comté' },
  { code: '22', name: "Côtes-d'Armor", region: 'Bretagne' },
  { code: '23', name: 'Creuse', region: 'Nouvelle-Aquitaine' },
  { code: '24', name: 'Dordogne', region: 'Nouvelle-Aquitaine' },
  { code: '25', name: 'Doubs', region: 'Bourgogne-Franche-Comté' },
  { code: '26', name: 'Drôme', region: 'Auvergne-Rhône-Alpes' },
  { code: '27', name: 'Eure', region: 'Normandie' },
  { code: '28', name: 'Eure-et-Loir', region: 'Centre-Val de Loire' },
  { code: '29', name: 'Finistère', region: 'Bretagne' },
  { code: '30', name: 'Gard', region: 'Occitanie' },
  { code: '31', name: 'Haute-Garonne', region: 'Occitanie' },
  { code: '32', name: 'Gers', region: 'Occitanie' },
  { code: '33', name: 'Gironde', region: 'Nouvelle-Aquitaine' },
  { code: '34', name: 'Hérault', region: 'Occitanie' },
  { code: '35', name: 'Ille-et-Vilaine', region: 'Bretagne' },
  { code: '36', name: 'Indre', region: 'Centre-Val de Loire' },
  { code: '37', name: 'Indre-et-Loire', region: 'Centre-Val de Loire' },
  { code: '38', name: 'Isère', region: 'Auvergne-Rhône-Alpes' },
  { code: '39', name: 'Jura', region: 'Bourgogne-Franche-Comté' },
  { code: '40', name: 'Landes', region: 'Nouvelle-Aquitaine' },
  { code: '41', name: 'Loir-et-Cher', region: 'Centre-Val de Loire' },
  { code: '42', name: 'Loire', region: 'Auvergne-Rhône-Alpes' },
  { code: '43', name: 'Haute-Loire', region: 'Auvergne-Rhône-Alpes' },
  { code: '44', name: 'Loire-Atlantique', region: 'Pays de la Loire' },
  { code: '45', name: 'Loiret', region: 'Centre-Val de Loire' },
  { code: '46', name: 'Lot', region: 'Occitanie' },
  { code: '47', name: 'Lot-et-Garonne', region: 'Nouvelle-Aquitaine' },
  { code: '48', name: 'Lozère', region: 'Occitanie' },
  { code: '49', name: 'Maine-et-Loire', region: 'Pays de la Loire' },
  { code: '50', name: 'Manche', region: 'Normandie' },
  { code: '51', name: 'Marne', region: 'Grand Est' },
  { code: '52', name: 'Haute-Marne', region: 'Grand Est' },
  { code: '53', name: 'Mayenne', region: 'Pays de la Loire' },
  { code: '54', name: 'Meurthe-et-Moselle', region: 'Grand Est' },
  { code: '55', name: 'Meuse', region: 'Grand Est' },
  { code: '56', name: 'Morbihan', region: 'Bretagne' },
  { code: '57', name: 'Moselle', region: 'Grand Est' },
  { code: '58', name: 'Nièvre', region: 'Bourgogne-Franche-Comté' },
  { code: '59', name: 'Nord', region: 'Hauts-de-France' },
  { code: '60', name: 'Oise', region: 'Hauts-de-France' },
  { code: '61', name: 'Orne', region: 'Normandie' },
  { code: '62', name: 'Pas-de-Calais', region: 'Hauts-de-France' },
  { code: '63', name: 'Puy-de-Dôme', region: 'Auvergne-Rhône-Alpes' },
  { code: '64', name: 'Pyrénées-Atlantiques', region: 'Nouvelle-Aquitaine' },
  { code: '65', name: 'Hautes-Pyrénées', region: 'Occitanie' },
  { code: '66', name: 'Pyrénées-Orientales', region: 'Occitanie' },
  { code: '67', name: 'Bas-Rhin', region: 'Grand Est' },
  { code: '68', name: 'Haut-Rhin', region: 'Grand Est' },
  { code: '69', name: 'Rhône', region: 'Auvergne-Rhône-Alpes' },
  { code: '70', name: 'Haute-Saône', region: 'Bourgogne-Franche-Comté' },
  { code: '71', name: 'Saône-et-Loire', region: 'Bourgogne-Franche-Comté' },
  { code: '72', name: 'Sarthe', region: 'Pays de la Loire' },
  { code: '73', name: 'Savoie', region: 'Auvergne-Rhône-Alpes' },
  { code: '74', name: 'Haute-Savoie', region: 'Auvergne-Rhône-Alpes' },
  { code: '75', name: 'Paris', region: 'Île-de-France' },
  { code: '76', name: 'Seine-Maritime', region: 'Normandie' },
  { code: '77', name: 'Seine-et-Marne', region: 'Île-de-France' },
  { code: '78', name: 'Yvelines', region: 'Île-de-France' },
  { code: '79', name: 'Deux-Sèvres', region: 'Nouvelle-Aquitaine' },
  { code: '80', name: 'Somme', region: 'Hauts-de-France' },
  { code: '81', name: 'Tarn', region: 'Occitanie' },
  { code: '82', name: 'Tarn-et-Garonne', region: 'Occitanie' },
  { code: '83', name: 'Var', region: "Provence-Alpes-Côte d'Azur" },
  { code: '84', name: 'Vaucluse', region: "Provence-Alpes-Côte d'Azur" },
  { code: '85', name: 'Vendée', region: 'Pays de la Loire' },
  { code: '86', name: 'Vienne', region: 'Nouvelle-Aquitaine' },
  { code: '87', name: 'Haute-Vienne', region: 'Nouvelle-Aquitaine' },
  { code: '88', name: 'Vosges', region: 'Grand Est' },
  { code: '89', name: 'Yonne', region: 'Bourgogne-Franche-Comté' },
  { code: '90', name: 'Territoire de Belfort', region: 'Bourgogne-Franche-Comté' },
  { code: '91', name: 'Essonne', region: 'Île-de-France' },
  { code: '92', name: 'Hauts-de-Seine', region: 'Île-de-France' },
  { code: '93', name: 'Seine-Saint-Denis', region: 'Île-de-France' },
  { code: '94', name: 'Val-de-Marne', region: 'Île-de-France' },
  { code: '95', name: "Val-d'Oise", region: 'Île-de-France' },
  { code: '99', name: 'Andorre (zone Vigilance)', region: 'Hors France' },
 ];
 const BY_CODE = new Map(DEPARTEMENTS.map((d) => [d.code, d]));
 export function getDepartement(code: string): Departement | undefined {
  return BY_CODE.get(code);
 }
 export function departementsByRegion(): Map<string, Departement[]> {
  const map = new Map<string, Departement[]>();
  for (const d of DEPARTEMENTS) {
    const list = map.get(d.region) ?? [];
    list.push(d);
    map.set(d.region, list);
  }
  return map;
 }
--- a/src/lib/phenomena.ts
+++ b/src/lib/phenomena.ts
@ -0,0 +1,40 @@
 // Référentiel des 7 phénomènes Vigilance Météo France.
 export type PhenomenonId = 1 | 2 | 3 | 5 | 6 | 8 | 9;
 export type ColorId = 1 | 2 | 3 | 4;
 export type ColorName = 'vert' | 'jaune' | 'orange' | 'rouge';
 export interface Phenomenon {
  id: PhenomenonId;
  slug: string;
  label: string;
  emoji: string;
 }
 export const PHENOMENA: Record<PhenomenonId, Phenomenon> = {
  1: { id: 1, slug: 'vent', label: 'Vent violent', emoji: '💨' },
  2: { id: 2, slug: 'pluie', label: 'Pluie-inondation', emoji: '🌧️' },
  3: { id: 3, slug: 'orages', label: 'Orages', emoji: '⛈️' },
  5: { id: 5, slug: 'neige', label: 'Neige / verglas', emoji: '❄️' },
  6: { id: 6, slug: 'canicule', label: 'Canicule', emoji: '🌡️' },
  8: { id: 8, slug: 'avalanches', label: 'Avalanches', emoji: '🏔️' },
  9: { id: 9, slug: 'vagues-submersion', label: 'Vagues-submersion', emoji: '🌊' },
 };
 export const COLORS: Record<ColorId, { name: ColorName; hex: string; level: number }> = {
  1: { name: 'vert', hex: '#5cb85c', level: 1 },
  2: { name: 'jaune', hex: '#f6d800', level: 2 },
  3: { name: 'orange', hex: '#f08c1a', level: 3 },
  4: { name: 'rouge', hex: '#d9534f', level: 4 },
 };
 export const COLOR_LABEL: Record<ColorId, string> = {
  1: 'Pas de vigilance particulière',
  2: 'Soyez attentif',
  3: 'Soyez très vigilant',
  4: 'Vigilance absolue',
 };
 export function phenomenonBySlug(slug: string): Phenomenon | undefined {
  return Object.values(PHENOMENA).find((p) => p.slug === slug);
 }
--- a/src/lib/vigilance.ts
+++ b/src/lib/vigilance.ts
@ -0,0 +1,106 @@
 import { cacheOrFetch } from './cache';
 import type { ColorId, PhenomenonId } from './phenomena';
 import { COLORS, PHENOMENA } from './phenomena';
 export interface VigilanceAlert {
  departement: string;
  echeance: 'J' | 'J1';
  phenomenonId: PhenomenonId;
  colorId: ColorId;
  beginTime: string;
  endTime: string;
  productDatetime: string;
 }
 export interface VigilanceSnapshot {
  fetchedAt: string;
  productDatetime: string | null;
  alerts: VigilanceAlert[];
 }
 const OPENDATASOFT_BASE =
  'https://public.opendatasoft.com/api/explore/v2.1/catalog/datasets/weatherref-france-vigilance-meteo-departement/records';
 const CACHE_KEY = 'vigilance:snapshot';
 async function fetchOpendatasoft(): Promise<VigilanceSnapshot> {
  const url = `${OPENDATASOFT_BASE}?limit=100&offset=0`;
  const all: VigilanceAlert[] = [];
  let offset = 0;
  let total = Infinity;
  while (offset < total && offset < 5000) {
    const res = await fetch(`${OPENDATASOFT_BASE}?limit=100&offset=${offset}`);
    if (!res.ok) {
      throw new Error(`Opendatasoft fetch failed: ${res.status} ${res.statusText}`);
    }
    const json = (await res.json()) as {
      total_count: number;
      results: Array<{
        domain_id: string;
        echeance: 'J' | 'J1';
        phenomenon_id: number;
        color_id: number;
        begin_time: string;
        end_time: string;
        product_datetime: string;
      }>;
    };
    total = json.total_count;
    for (const r of json.results) {
      if (!(r.phenomenon_id in PHENOMENA)) continue;
      if (!(r.color_id in COLORS)) continue;
      all.push({
        departement: r.domain_id,
        echeance: r.echeance,
        phenomenonId: r.phenomenon_id as PhenomenonId,
        colorId: r.color_id as ColorId,
        beginTime: r.begin_time,
        endTime: r.end_time,
        productDatetime: r.product_datetime,
      });
    }
    offset += json.results.length;
    if (json.results.length === 0) break;
  }
  const latestProduct = all.reduce<string | null>(
    (acc, a) => (acc === null || a.productDatetime > acc ? a.productDatetime : acc),
    null,
  );
  return {
    fetchedAt: new Date().toISOString(),
    productDatetime: latestProduct,
    alerts: all,
  };
 }
 export async function getVigilanceSnapshot(): Promise<VigilanceSnapshot> {
  const ttl = parseInt(process.env.VIGILANCE_CACHE_TTL ?? '900', 10);
  return cacheOrFetch(CACHE_KEY, ttl, fetchOpendatasoft);
 }
 export function maxColorByDepartement(snapshot: VigilanceSnapshot, echeance: 'J' | 'J1' = 'J'): Map<string, ColorId> {
  const map = new Map<string, ColorId>();
  for (const a of snapshot.alerts) {
    if (a.echeance !== echeance) continue;
    const current = map.get(a.departement) ?? 1;
    if (a.colorId > current) map.set(a.departement, a.colorId);
  }
  return map;
 }
 export function alertsForDepartement(
  snapshot: VigilanceSnapshot,
  code: string,
  echeance: 'J' | 'J1' = 'J',
 ): VigilanceAlert[] {
  return snapshot.alerts
    .filter((a) => a.departement === code && a.echeance === echeance)
    .sort((a, b) => b.colorId - a.colorId);
 }
 export function activeAlerts(snapshot: VigilanceSnapshot, minColor: ColorId = 2): VigilanceAlert[] {
  return snapshot.alerts.filter((a) => a.colorId >= minColor && a.echeance === 'J');
 }
--- a/src/pages/api/health.ts
+++ b/src/pages/api/health.ts
@ -0,0 +1,17 @@
 import type { APIRoute } from 'astro';
 import { pingCache } from '../../lib/cache';
 export const prerender = false;
 export const GET: APIRoute = async () => {
  const cacheOk = await pingCache();
  const body = {
    status: cacheOk ? 'ok' : 'degraded',
    cache: cacheOk,
    time: new Date().toISOString(),
  };
  return new Response(JSON.stringify(body), {
    status: cacheOk ? 200 : 503,
    headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' },
  });
 };
--- a/src/pages/api/vigilance.ts
+++ b/src/pages/api/vigilance.ts
@ -0,0 +1,24 @@
 import type { APIRoute } from 'astro';
 import { getVigilanceSnapshot } from '../../lib/vigilance';
 export const prerender = false;
 // JSON public du snapshot Vigilance actuel — réutilisable sous Licence Ouverte 2.0.
 export const GET: APIRoute = async () => {
  try {
    const snap = await getVigilanceSnapshot();
    return new Response(JSON.stringify(snap), {
      status: 200,
      headers: {
        'Content-Type': 'application/json; charset=utf-8',
        'Cache-Control': 'public, max-age=300',
        'Access-Control-Allow-Origin': '*',
      },
    });
  } catch (e) {
    return new Response(
      JSON.stringify({ error: 'fetch_failed', detail: (e as Error).message }),
      { status: 502, headers: { 'Content-Type': 'application/json' } },
    );
  }
 };
--- a/src/pages/conseils/index.astro
+++ b/src/pages/conseils/index.astro
@ -0,0 +1,82 @@
 ---
 import Base from '../../layouts/Base.astro';
 import { PHENOMENA } from '../../lib/phenomena';
 import { ADVICE, EMERGENCY_NUMBERS } from '../../lib/advice';
 export const prerender = false;
 const phenomenaList = Object.values(PHENOMENA).sort((a, b) =>
  a.id === 6 ? -1 : b.id === 6 ? 1 : a.label.localeCompare(b.label),
 );
 ---
 <Base
  title="Conseils officiels — Vigilance météo"
  description="Conseils officiels du gouvernement et de Météo France en cas d'alerte météorologique (canicule, orages, vent, inondations)."
 >
  <section class="bg-gradient-to-b from-canicule-50 to-white">
    <div class="container-tight py-8">
      <h1 class="text-3xl font-bold sm:text-4xl">Conseils officiels</h1>
      <p class="mt-2 max-w-2xl text-slate-600">
        Recommandations à appliquer en cas d'alerte Vigilance, par type de phénomène.
        Sources : Météo France, santé.gouv.fr, gouvernement.fr.
      </p>
    </div>
  </section>
  <section class="container-tight py-8">
    <div class="space-y-12">
      {
        phenomenaList.map((p) => {
          const advice = ADVICE[p.id];
          return (
            <article id={p.slug} class="scroll-mt-20">
              <h2 class="text-2xl font-bold">
                <span aria-hidden="true">{p.emoji}</span> {p.label}
              </h2>
              <p class="mt-2 text-slate-700">{advice.intro}</p>
              <div class="mt-4 grid gap-4 sm:grid-cols-2">
                {advice.blocks.map((b) => (
                  <div class="rounded-lg border border-slate-200 bg-white p-4">
                    <h3 class="font-semibold">{b.title}</h3>
                    <ul class="mt-2 list-inside list-disc space-y-1 text-sm text-slate-700">
                      {b.items.map((i) => <li>{i}</li>)}
                    </ul>
                  </div>
                ))}
              </div>
              {advice.emergency.length > 0 && (
                <div class="mt-4 rounded-lg border border-red-200 bg-red-50 p-4">
                  <h3 class="font-semibold text-red-900">Urgence</h3>
                  <ul class="mt-1 space-y-1 text-sm text-red-800">
                    {advice.emergency.map((e) => <li>{e}</li>)}
                  </ul>
                </div>
              )}
            </article>
          );
        })
      }
    </div>
  </section>
  <section class="border-t border-slate-200 bg-white">
    <div class="container-tight py-8">
      <h2 class="text-xl font-semibold">Numéros d'urgence</h2>
      <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {
          EMERGENCY_NUMBERS.map((n) => (
            <div class="flex items-baseline gap-2 rounded border border-slate-200 px-3 py-2">
              <a href={`tel:${n.num}`} class="font-mono text-lg font-bold text-canicule-700">
                {n.num}
              </a>
              <span class="text-sm text-slate-700">{n.label}</span>
            </div>
          ))
        }
      </div>
    </div>
  </section>
 </Base>
--- a/src/pages/departement/[code].astro
+++ b/src/pages/departement/[code].astro
@ -0,0 +1,182 @@
 ---
 import Base from '../../layouts/Base.astro';
 import VigilanceChip from '../../components/VigilanceChip.astro';
 import VigilanceLegend from '../../components/VigilanceLegend.astro';
 import { getVigilanceSnapshot, alertsForDepartement } from '../../lib/vigilance';
 import { getDepartement } from '../../lib/departements';
 import { PHENOMENA, COLOR_LABEL } from '../../lib/phenomena';
 import { ADVICE, EMERGENCY_NUMBERS } from '../../lib/advice';
 import { getClimatoForDepartement } from '../../lib/climato';
 import ClimatoChart from '../../components/ClimatoChart.astro';
 export const prerender = false;
 const { code } = Astro.params;
 const dept = code ? getDepartement(code.toUpperCase()) : undefined;
 if (!dept) {
  return new Response('Département introuvable', { status: 404 });
 }
 let snapshot;
 let error: string | null = null;
 try {
  snapshot = await getVigilanceSnapshot();
 } catch (e) {
  error = (e as Error).message;
 }
 let climato = null;
 try {
  climato = await getClimatoForDepartement(dept.code);
 } catch (e) {
  console.warn('climato fetch failed for', dept.code, (e as Error).message);
 }
 const today = snapshot ? alertsForDepartement(snapshot, dept.code, 'J') : [];
 const tomorrow = snapshot ? alertsForDepartement(snapshot, dept.code, 'J1') : [];
 const highest = today[0];
 const adviceFor = highest && ADVICE[highest.phenomenonId];
 ---
 <Base
  title={`${dept.name} (${dept.code}) — Vigilance météo`}
  description={`Niveau de Vigilance Météo France pour ${dept.name} (${dept.region}) et conseils officiels.`}
 >
  <section class="bg-gradient-to-b from-canicule-50 to-white">
    <div class="container-tight py-8">
      <a href="/" class="text-sm text-canicule-700">← Retour à la carte</a>
      <h1 class="mt-2 text-3xl font-bold sm:text-4xl">{dept.name}</h1>
      <p class="text-slate-600">{dept.region} — département {dept.code}</p>
    </div>
  </section>
  <section class="container-tight py-8">
    {error && <p class="text-red-700">Données indisponibles : {error}</p>}
    {
      !error && today.length === 0 && (
        <div class="rounded border border-green-200 bg-green-50 p-4">
          <p class="font-semibold text-green-800">Aucune vigilance particulière aujourd'hui.</p>
          <p class="text-sm text-green-700">Le département est en niveau vert pour tous les phénomènes.</p>
        </div>
      )
    }
    {
      !error && today.length > 0 && (
        <>
          <h2 class="mb-3 text-xl font-semibold">Alertes en cours</h2>
          <ul class="space-y-3">
            {today.map((a) => {
              const phen = PHENOMENA[a.phenomenonId];
              const begin = new Date(a.beginTime).toLocaleString('fr-FR', {
                dateStyle: 'short',
                timeStyle: 'short',
                timeZone: 'Europe/Paris',
              });
              const end = new Date(a.endTime).toLocaleString('fr-FR', {
                dateStyle: 'short',
                timeStyle: 'short',
                timeZone: 'Europe/Paris',
              });
              return (
                <li class="rounded-lg border border-slate-200 bg-white p-4">
                  <div class="flex flex-wrap items-center justify-between gap-3">
                    <div class="text-lg font-semibold">
                      <span aria-hidden="true">{phen.emoji}</span> {phen.label}
                    </div>
                    <VigilanceChip colorId={a.colorId} showLevel />
                  </div>
                  <div class="mt-2 text-sm text-slate-600">
                    Valide du {begin} au {end} (heure de Paris).
                  </div>
                </li>
              );
            })}
          </ul>
        </>
      )
    }
    {
      !error && tomorrow.length > 0 && (
        <div class="mt-8">
          <h2 class="mb-3 text-xl font-semibold">Prévision pour demain</h2>
          <ul class="space-y-2">
            {tomorrow.map((a) => (
              <li class="flex flex-wrap items-center justify-between gap-3 rounded border border-slate-200 px-3 py-2">
                <span>{PHENOMENA[a.phenomenonId].label}</span>
                <VigilanceChip colorId={a.colorId} />
              </li>
            ))}
          </ul>
        </div>
      )
    }
  </section>
  {
    climato && climato.days.length > 0 && (
      <section class="border-t border-slate-200 bg-slate-50">
        <div class="container-tight py-8">
          <h2 class="mb-4 text-xl font-semibold">Températures récentes</h2>
          <ClimatoChart days={climato.days} />
          <p class="mt-2 text-xs text-slate-500">
            Source : Météo France — données climatologiques de base quotidiennes, agrégées par moyenne
            sur toutes les stations du département. Donnée brute, contrôle qualité Météo France.
          </p>
        </div>
      </section>
    )
  }
  {
    adviceFor && (
      <section class="border-t border-slate-200 bg-white">
        <div class="container-tight py-8">
          <h2 class="text-xl font-semibold">Conseils — {PHENOMENA[highest!.phenomenonId].label}</h2>
          <p class="mt-2 text-slate-700">{adviceFor.intro}</p>
          <div class="mt-6 grid gap-4 sm:grid-cols-2">
            {adviceFor.blocks.map((block) => (
              <div class="rounded-lg border border-slate-200 p-4">
                <h3 class="font-semibold text-slate-900">{block.title}</h3>
                <ul class="mt-2 list-inside list-disc space-y-1 text-sm text-slate-700">
                  {block.items.map((item) => (
                    <li>{item}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          {adviceFor.emergency.length > 0 && (
            <div class="mt-6 rounded-lg border border-red-200 bg-red-50 p-4">
              <h3 class="font-semibold text-red-900">En cas d'urgence</h3>
              <ul class="mt-2 space-y-1 text-sm text-red-800">
                {adviceFor.emergency.map((e) => (
                  <li>{e}</li>
                ))}
              </ul>
            </div>
          )}
          <div class="mt-6">
            <h3 class="text-sm font-semibold text-slate-700">Numéros utiles</h3>
            <div class="mt-2 grid gap-2 text-sm sm:grid-cols-2 lg:grid-cols-3">
              {EMERGENCY_NUMBERS.map((n) => (
                <div class="flex items-baseline gap-2">
                  <a href={`tel:${n.num}`} class="font-mono font-bold text-canicule-700">
                    {n.num}
                  </a>
                  <span class="text-slate-600">{n.label}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    )
  }
 </Base>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -0,0 +1,128 @@
 ---
 import Base from '../layouts/Base.astro';
 import FranceMap from '../components/FranceMap.astro';
 import DepartementGrid from '../components/DepartementGrid.astro';
 import VigilanceLegend from '../components/VigilanceLegend.astro';
 import VigilanceChip from '../components/VigilanceChip.astro';
 import { getVigilanceSnapshot, maxColorByDepartement, activeAlerts } from '../lib/vigilance';
 import { getDepartement } from '../lib/departements';
 import { PHENOMENA, COLORS } from '../lib/phenomena';
 export const prerender = false;
 let snapshot;
 let error: string | null = null;
 try {
  snapshot = await getVigilanceSnapshot();
 } catch (e) {
  error = (e as Error).message;
 }
 const colorsByDept = snapshot ? maxColorByDepartement(snapshot, 'J') : new Map();
 const alertsToday = snapshot ? activeAlerts(snapshot, 2) : [];
 const canicule = alertsToday.filter((a) => a.phenomenonId === 6).length;
 const orages = alertsToday.filter((a) => a.phenomenonId === 3).length;
 const orange = alertsToday.filter((a) => a.colorId >= 3).length;
 const productDate = snapshot?.productDatetime
  ? new Date(snapshot.productDatetime).toLocaleString('fr-FR', {
      dateStyle: 'long',
      timeStyle: 'short',
      timeZone: 'Europe/Paris',
    })
  : 'inconnu';
 ---
 <Base>
  <section class="bg-gradient-to-b from-canicule-50 to-white">
    <div class="container-tight py-10">
      <h1 class="text-3xl font-bold text-slate-900 sm:text-4xl">
        Vigilance Météo France en temps réel
      </h1>
      <p class="mt-2 max-w-2xl text-slate-600">
        Carte des alertes Vigilance par département, conseils officiels et numéros d'urgence.
        Bulletin Météo France du <strong>{productDate}</strong> (heure de Paris).
      </p>
    </div>
  </section>
  <section class="container-tight py-8">
    {
      error && (
        <div class="rounded border border-red-200 bg-red-50 p-4 text-red-800">
          <strong>Données indisponibles.</strong> Réessayer dans quelques minutes. Détail technique :
          {error}
        </div>
      )
    }
    {
      !error && (
        <div class="grid gap-4 sm:grid-cols-3">
          <div class="rounded-lg border border-slate-200 bg-white p-4">
            <div class="text-2xl font-bold text-canicule-700">{canicule}</div>
            <div class="text-sm text-slate-600">départements en vigilance canicule</div>
          </div>
          <div class="rounded-lg border border-slate-200 bg-white p-4">
            <div class="text-2xl font-bold text-orange-700">{orange}</div>
            <div class="text-sm text-slate-600">en niveau orange ou rouge (tous phénomènes)</div>
          </div>
          <div class="rounded-lg border border-slate-200 bg-white p-4">
            <div class="text-2xl font-bold text-yellow-700">{orages}</div>
            <div class="text-sm text-slate-600">en vigilance orages</div>
          </div>
        </div>
      )
    }
  </section>
  {
    !error && (
      <section class="container-tight pb-8">
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
          <h2 class="text-xl font-semibold text-slate-900">Niveau par département (aujourd'hui)</h2>
          <VigilanceLegend />
        </div>
        <div class="grid gap-8 lg:grid-cols-[2fr_1fr]">
          <div class="flex justify-center">
            <FranceMap colorsByDept={colorsByDept} />
          </div>
          <details class="rounded border border-slate-200 bg-white p-4">
            <summary class="cursor-pointer font-medium text-slate-700">
              Vue par région (liste)
            </summary>
            <div class="mt-4">
              <DepartementGrid colorsByDept={colorsByDept} />
            </div>
          </details>
        </div>
      </section>
    )
  }
  {
    !error && alertsToday.length > 0 && (
      <section class="border-t border-slate-200 bg-white">
        <div class="container-tight py-8">
          <h2 class="mb-4 text-xl font-semibold text-slate-900">Alertes actives</h2>
          <ul class="space-y-2">
            {alertsToday
              .sort((a, b) => b.colorId - a.colorId)
              .slice(0, 50)
              .map((a) => {
                const dept = getDepartement(a.departement);
                if (!dept) return null;
                return (
                  <li class="flex flex-wrap items-center justify-between gap-3 rounded border border-slate-200 px-3 py-2">
                    <a href={`/departement/${a.departement}`} class="font-medium no-underline">
                      {dept.name} ({a.departement})
                    </a>
                    <VigilanceChip colorId={a.colorId} phenomenonId={a.phenomenonId} />
                  </li>
                );
              })}
          </ul>
        </div>
      </section>
    )
  }
 </Base>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -0,0 +1,36 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  html {
    @apply text-slate-900 antialiased;
  }
  body {
    @apply bg-slate-50;
  }
  a {
    @apply underline-offset-2 hover:underline;
  }
 }
@layer components {
  .container-tight {
    @apply mx-auto w-full max-w-5xl px-4 sm:px-6;
  }
  .vigilance-chip {
    @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium ring-1 ring-inset;
  }
  .vigilance-chip-1 {
    @apply bg-green-50 text-green-800 ring-green-200;
  }
  .vigilance-chip-2 {
    @apply bg-yellow-50 text-yellow-900 ring-yellow-300;
  }
  .vigilance-chip-3 {
    @apply bg-orange-50 text-orange-900 ring-orange-300;
  }
  .vigilance-chip-4 {
    @apply bg-red-50 text-red-900 ring-red-300;
  }
 }
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@ -0,0 +1,28 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        vigilance: {
          vert: '#5cb85c',
          jaune: '#f6d800',
          orange: '#f08c1a',
          rouge: '#d9534f',
        },
        canicule: {
          50: '#fff7ed',
          100: '#ffedd5',
          500: '#f97316',
          600: '#ea580c',
          700: '#c2410c',
          900: '#7c2d12',
        },
      },
      fontFamily: {
        sans: ['system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'sans-serif'],
      },
    },
  },
  plugins: [],
 };
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,11 @@
 {
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
 }