feat: graph T° interactif + widget iframe + MF auth + E2E Playwright

Graph T° (TemperatureChartInteractive.astro) :
- Onglets 24 h / 7 j / 30 j (toggle JS, séries serialisées au SSR)
- Hover vertical line + tooltip valeurs
- Overlay normales mois en pointillé (TX orange, TN bleu)
- Onglet 24 h dispo seulement si l'API MF a répondu (best-effort)

Météo France OAuth2 (lib/meteofrance-auth.ts + observations.ts) :
- client_credentials avec refresh auto, cache token Valkey
- Fallback METEOFRANCE_STATIC_TOKEN pour debug
- /synop endpoint pour 24h horaires par station SYNOP du dept
- Mapping dept → station SYNOP la plus proche (src/data/stations-synop.json)
- En attente de creds : SDK skip silencieusement, l'onglet 24h n'apparaît pas

Widget iframe (/embed/dept/[code] + /embed doc) :
- Layout minimal sans header/footer global
- Réutilisable via iframe avec une ligne
- Page /embed avec snippet copier-coller + aperçu live

Tests E2E Playwright (tests/e2e/) :
- home (carte 96 paths, tooltip dept, navigation)
- api (health, vigilance, vigilance/dept)
- departement (tabs période, DROM notice, 404)
- static pages (a-propos, mentions, dependances, soutenir, conseils, embed)
- embed widget (rendu minimal, headers X-Frame OK)
- 20+ tests, run via pnpm test:e2e (live) ou test:e2e:local

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/pages/embed/index.astro

@@ -0,0 +1,94 @@
+---
+import Base from '../../layouts/Base.astro';
+import { DEPARTEMENTS } from '../../lib/departements';
+
+export const prerender = false;
+const sample = DEPARTEMENTS.find((d) => d.code === '13')!;
+const baseUrl = 'https://info-canicule.nocleus.com';
+const snippet = `<iframe
+  src="${baseUrl}/embed/dept/${sample.code}"
+  width="380" height="260"
+  style="border:0; max-width:100%"
+  loading="lazy"
+  title="Vigilance ${sample.name} — Info Canicule"
+></iframe>`;
+---
+
+<Base
+  title="Widget intégrable — Info Canicule"
+  description="Intégrez la Vigilance Météo France de n'importe quel département sur votre site en une ligne d'iframe."
+>
+  <section class="bg-gradient-to-b from-canicule-50 to-white">
+    <div class="container-tight py-10">
+      <h1 class="text-3xl font-bold sm:text-4xl">Widget intégrable</h1>
+      <p class="mt-2 max-w-2xl text-slate-600">
+        Intégrez la Vigilance Météo France de n'importe quel département sur votre site en une
+        ligne d'iframe. Gratuit, libre de réutilisation (Licence Ouverte 2.0).
+      </p>
+    </div>
+  </section>
+
+  <section class="container-tight py-8 space-y-8">
+    <div>
+      <h2 class="text-xl font-semibold">Aperçu live ({sample.name})</h2>
+      <div class="mt-3 inline-block rounded border border-slate-200 bg-slate-100 p-4">
+        <iframe
+          src={`/embed/dept/${sample.code}`}
+          width="380"
+          height="260"
+          style="border:0; max-width:100%; background:transparent"
+          loading="lazy"
+          title={`Vigilance ${sample.name}`}
+        ></iframe>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="text-xl font-semibold">Code à copier-coller</h2>
+      <pre class="mt-3 overflow-x-auto rounded bg-slate-900 p-4 text-xs text-slate-100"><code>{snippet}</code></pre>
+      <p class="mt-2 text-sm text-slate-600">
+        Remplace <code class="rounded bg-slate-100 px-1">{sample.code}</code> par le code de ton
+        département (01-95, 2A, 2B, 971-976). La liste complète :
+        <a href="/conseils">page conseils</a>.
+      </p>
+    </div>
+
+    <div>
+      <h2 class="text-xl font-semibold">Personnalisation</h2>
+      <ul class="mt-2 list-inside list-disc space-y-1 text-sm text-slate-700">
+        <li>
+          <strong>Dimensions</strong> : ajustables via <code>width</code> et <code>height</code>.
+          Le widget s'adapte aux petits écrans grâce à <code>max-width:100%</code>.
+        </li>
+        <li>
+          <strong>Fond transparent</strong> : pose-le sur n'importe quelle couleur de page.
+        </li>
+        <li>
+          <strong>Rafraîchissement</strong> : la page se met à jour automatiquement à chaque
+          rechargement (cache 15 min côté serveur).
+        </li>
+      </ul>
+    </div>
+
+    <div>
+      <h2 class="text-xl font-semibold">API JSON brute (alternative)</h2>
+      <p class="mt-2 text-sm text-slate-700">
+        Si tu préfères afficher la Vigilance avec ton propre design, l'endpoint
+        <code class="rounded bg-slate-100 px-1">/api/vigilance/dept/[code]</code>
+        renvoie un JSON CORS *, prêt à parser :
+      </p>
+      <pre class="mt-2 overflow-x-auto rounded bg-slate-900 p-4 text-xs text-slate-100"><code>fetch('{baseUrl}/api/vigilance/dept/{sample.code}')
+  .then(r =&gt; r.json())
+  .then(data =&gt; console.log(data.today)); // [&#123; phenomenon, color, ... &#125;]</code></pre>
+    </div>
+
+    <div>
+      <h2 class="text-xl font-semibold">Conditions de réutilisation</h2>
+      <ul class="mt-2 list-inside list-disc space-y-1 text-sm text-slate-700">
+        <li>Données sous <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence/" rel="noopener">Licence Ouverte 2.0</a> (mention obligatoire de la source : Météo France).</li>
+        <li>Ce service ne remplace pas la source officielle. En cas d'urgence, suivre <a href="https://vigilance.meteofrance.fr/" rel="noopener">vigilance.meteofrance.fr</a> et appeler le 112.</li>
+        <li>Pas de garantie de disponibilité. Pour un usage critique, contractualiser directement avec Météo France.</li>
+      </ul>
+    </div>
+  </section>
+</Base>