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/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>