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>

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>