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/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' },
+  });
+};

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' } },
+    );
+  }
+};

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>

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>

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>