feat: pages contenu + SEO + Umami + sitemap

- Pages /a-propos, /mentions-legales, /dependances, /soutenir (Ko-fi) - Header/footer enrichis (lien Soutenir, mentions, API publique) - @astrojs/sitemap + /sitemap-departements.xml.ts (96 dépts) - robots.txt + og-image.svg + JSON-LD Schema.org - Meta tags Open Graph + Twitter Card + canonical - Umami snippet conditionnel (UMAMI_WEBSITE_ID env) - Slot SENTRY_DSN dans .env.tmpl (GlitchTip — SDK à wire ultérieurement) - @tailwindcss/typography pour les pages contenu Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-25 18:28:46 +02:00 · 2026-05-25 18:28:46 +02:00 · 86352eb436
commit 86352eb436
parent e075d963bc
14 changed files with 727 additions and 23 deletions
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@ -4,12 +4,43 @@ import '../styles/global.css';
 interface Props {
  title?: string;
  description?: string;
+  canonical?: string;
+  ogImage?: string;
+  noindex?: boolean;
 }

+const SITE = 'https://info-canicule.nocleus.com';
 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.',
+  title = 'Info Canicule — Vigilance météo France en temps réel',
+  description = 'Suivi gratuit et sans publicité des alertes Vigilance Météo France (canicule, orages, tempêtes), avec carte interactive par département et conseils officiels.',
+  canonical,
+  ogImage = '/og-image.svg',
+  noindex = false,
 } = Astro.props;
+
+const canonicalUrl = canonical ?? new URL(Astro.url.pathname, SITE).toString();
+const fullOgImage = ogImage.startsWith('http') ? ogImage : `${SITE}${ogImage}`;
+const umamiId = import.meta.env.UMAMI_WEBSITE_ID;
+const umamiSrc = import.meta.env.UMAMI_SRC ?? 'https://analytics.nocleus.com/script.js';
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'WebSite',
+  name: 'Info Canicule',
+  url: SITE,
+  description,
+  inLanguage: 'fr-FR',
+  publisher: {
+    '@type': 'Person',
+    name: 'Florian Bouchet',
+    url: 'https://nocleus.com',
+  },
+  potentialAction: {
+    '@type': 'SearchAction',
+    target: `${SITE}/departement/{code}`,
+    'query-input': 'required name=code',
+  },
+};
 ---

 <!DOCTYPE html>
@ -18,24 +49,46 @@ const {
    <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" />
+    {noindex ? <meta name="robots" content="noindex, nofollow" /> : <meta name="robots" content="index, follow, max-image-preview:large" />}
+    <link rel="canonical" href={canonicalUrl} />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate" type="application/rss+xml" title="Info Canicule" href={`${SITE}/sitemap-index.xml`} />
    <title>{title}</title>
+
+    <meta property="og:type" content="website" />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
-    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonicalUrl} />
+    <meta property="og:image" content={fullOgImage} />
+    <meta property="og:locale" content="fr_FR" />
+    <meta property="og:site_name" content="Info Canicule" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={fullOgImage} />
+
    <meta name="theme-color" content="#ea580c" />
+    <meta name="format-detection" content="telephone=yes" />
+
+    <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
+
+    {umamiId && (
+      <script defer src={umamiSrc} data-website-id={umamiId} data-do-not-track="true"></script>
+    )}
  </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">
+      <div class="container-tight flex flex-wrap items-center justify-between gap-3 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>
+        <nav class="flex flex-wrap items-center gap-x-5 gap-y-1 text-sm font-medium text-slate-600">
+          <a href="/">Carte</a>
          <a href="/conseils">Conseils</a>
+          <a href="/a-propos">À propos</a>
+          <a href="/soutenir" class="text-canicule-700">☕ Soutenir</a>
        </nav>
      </div>
    </header>
@ -44,22 +97,37 @@ const {
    </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">
+        <div class="grid gap-4 sm:grid-cols-3">
+          <div>
+            <p class="font-semibold text-slate-700">Info Canicule</p>
+            <p class="mt-1 text-xs">
+              Service d'information publique gratuit, sans publicité, non lucratif.
+            </p>
+          </div>
+          <div>
+            <p class="font-semibold text-slate-700">Liens</p>
+            <ul class="mt-1 space-y-0.5">
+              <li><a href="/a-propos">À propos</a></li>
+              <li><a href="/mentions-legales">Mentions légales</a></li>
+              <li><a href="/dependances">Dépendances</a></li>
+              <li><a href="/soutenir">Soutenir</a></li>
+              <li><a href="/api/vigilance">API JSON publique</a></li>
+            </ul>
+          </div>
+          <div>
+            <p class="font-semibold text-slate-700">Données</p>
+            <p class="mt-1 text-xs">
+              <a href="https://meteo.data.gouv.fr/" rel="noopener">Météo France</a>
+              — <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence/" rel="noopener">Licence Ouverte 2.0</a>.
+              En urgence : <a href="tel:112" class="text-canicule-700 font-semibold">112</a>.
+            </p>
+          </div>
+        </div>
+        <p class="mt-4 text-xs text-slate-400">
          Un projet
          <a href="https://nocleus.com" class="text-canicule-700" rel="noopener">Nocleus</a>.
+          Code source :
+          <a href="https://git.nocleus.com/florian/info-canicule" class="text-canicule-700" rel="noopener">git.nocleus.com</a>.
        </p>
      </div>
    </footer>
--- a/src/pages/a-propos.astro
+++ b/src/pages/a-propos.astro
@ -0,0 +1,91 @@
+---
+import Base from '../layouts/Base.astro';
+
+export const prerender = false;
+---
+
+<Base
+  title="À propos — Info Canicule"
+  description="Info Canicule est un site d'information publique gratuit, non lucratif, qui agrège les alertes Vigilance Météo France et les conseils officiels."
+>
+  <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">À propos d'Info Canicule</h1>
+      <p class="mt-2 text-slate-600">
+        Pourquoi ce site existe, comment il fonctionne, ce qu'il ne fait pas.
+      </p>
+    </div>
+  </section>
+
+  <section class="container-tight py-8 prose prose-slate max-w-none">
+    <h2>Pourquoi ce site ?</h2>
+    <p>
+      Les épisodes de canicule, d'orages violents ou de fortes pluies tuent des dizaines de personnes
+      chaque année en France. Les informations existent — Météo France publie des bulletins Vigilance
+      détaillés, le gouvernement diffuse des conseils — mais elles sont éparpillées, parfois difficiles
+      à trouver, souvent enfouies sous des bannières publicitaires sur les sites grand public.
+    </p>
+    <p>
+      <strong>Info Canicule</strong> est un site d'utilité publique qui ne fait qu'une chose :
+      afficher clairement, gratuitement, sans publicité ni traceurs commerciaux, la Vigilance Météo
+      France en temps réel et les conseils officiels à appliquer.
+    </p>
+
+    <h2>Comment ça marche</h2>
+    <ul>
+      <li>
+        <strong>Données Vigilance</strong> : récupérées toutes les 15 minutes depuis le portail
+        Opendatasoft qui rediffuse les bulletins Météo France. Bulletin officiel mis à jour deux fois
+        par jour (matin et après-midi).
+      </li>
+      <li>
+        <strong>Données climatologiques</strong> : températures journalières des 30 derniers jours,
+        récupérées depuis <a href="https://meteo.data.gouv.fr/" rel="noopener">meteo.data.gouv.fr</a>
+        (jeu de données <em>Données climatologiques de base — quotidiennes</em>), agrégées en moyenne
+        sur toutes les stations du département.
+      </li>
+      <li>
+        <strong>Conseils officiels</strong> : repris des publications de
+        <a href="https://www.meteofrance.fr/" rel="noopener">Météo France</a>,
+        <a href="https://sante.gouv.fr/" rel="noopener">santé.gouv.fr</a> et
+        <a href="https://www.gouvernement.fr/" rel="noopener">gouvernement.fr</a>.
+      </li>
+    </ul>
+
+    <h2>Ce que ce site n'est pas</h2>
+    <ul>
+      <li><strong>Pas un service officiel</strong>. En cas d'urgence, suivre les consignes de la Préfecture (
+        <a href="tel:112">112</a>).</li>
+      <li><strong>Pas un site commercial</strong>. Aucune publicité, aucune monétisation, aucun affiliation,
+        aucune vente de données.</li>
+      <li><strong>Pas un outil de prévision</strong>. Les prévisions affichées sont celles de Météo France,
+        pas un modèle indépendant.</li>
+    </ul>
+
+    <h2>Statut juridique</h2>
+    <p>
+      Info Canicule est édité <strong>à titre personnel, sans but lucratif</strong>, sur fonds propres
+      par un développeur indépendant. Le site n'est pas une association loi 1901, pas une entreprise,
+      pas un service public. Les données affichées sont publiques et réutilisables sous
+      <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence/" rel="noopener">Licence Ouverte 2.0</a>.
+    </p>
+    <p>
+      Voir aussi : <a href="/mentions-legales">mentions légales</a>,
+      <a href="/dependances">dépendances logicielles</a>,
+      <a href="/soutenir">soutenir le projet</a>.
+    </p>
+
+    <h2>Code source</h2>
+    <p>
+      Le site est entièrement open source. Le code est disponible sur
+      <a href="https://git.nocleus.com/florian/info-canicule" rel="noopener">git.nocleus.com/florian/info-canicule</a>
+      (instance Forgejo personnelle). Contributions, signalements de bugs et améliorations bienvenus.
+    </p>
+
+    <h2>Contact</h2>
+    <p>
+      Mail : <a href="mailto:florian@nocleus.com">florian@nocleus.com</a> — pour toute question,
+      remarque ou correction (typo, erreur dans un conseil, donnée incohérente).
+    </p>
+  </section>
+</Base>
--- a/src/pages/dependances.astro
+++ b/src/pages/dependances.astro
@ -0,0 +1,215 @@
+---
+import Base from '../layouts/Base.astro';
+import pkg from '../../package.json';
+
+export const prerender = false;
+
+const deps = Object.entries(pkg.dependencies as Record<string, string>).sort(([a], [b]) =>
+  a.localeCompare(b),
+);
+const devDeps = Object.entries(pkg.devDependencies as Record<string, string>).sort(([a], [b]) =>
+  a.localeCompare(b),
+);
+
+// Catalogue manuel : description + license + URL pour chaque dépendance principale.
+const META: Record<string, { desc: string; license: string; url: string }> = {
+  astro: {
+    desc: "Framework web orienté contenu (rendu serveur, île d'interactivité).",
+    license: 'MIT',
+    url: 'https://astro.build/',
+  },
+  '@astrojs/node': {
+    desc: 'Adapter Astro pour exécution sur Node.js (mode standalone).',
+    license: 'MIT',
+    url: 'https://docs.astro.build/en/guides/integrations-guide/node/',
+  },
+  '@astrojs/tailwind': {
+    desc: 'Intégration TailwindCSS pour Astro.',
+    license: 'MIT',
+    url: 'https://docs.astro.build/en/guides/integrations-guide/tailwind/',
+  },
+  tailwindcss: {
+    desc: 'Framework CSS utility-first.',
+    license: 'MIT',
+    url: 'https://tailwindcss.com/',
+  },
+  ioredis: {
+    desc: 'Client Redis/Valkey performant pour Node.js (cache du snapshot Vigilance).',
+    license: 'MIT',
+    url: 'https://github.com/redis/ioredis',
+  },
+  '@astrojs/check': {
+    desc: 'Type checker officiel Astro (utilisé en CI / dev).',
+    license: 'MIT',
+    url: 'https://docs.astro.build/en/reference/cli-reference/#astro-check',
+  },
+  '@types/node': {
+    desc: 'Types TypeScript pour les API Node.js.',
+    license: 'MIT',
+    url: 'https://www.npmjs.com/package/@types/node',
+  },
+  typescript: {
+    desc: 'Compilateur TypeScript (vérification de types).',
+    license: 'Apache-2.0',
+    url: 'https://www.typescriptlang.org/',
+  },
+};
+
+const DATA_SOURCES = [
+  {
+    name: 'France GeoJSON',
+    desc: "Polygones des départements français (utilisés pour la carte SVG).",
+    license: 'Licence Ouverte 2.0',
+    url: 'https://github.com/gregoiredavid/france-geojson',
+  },
+  {
+    name: 'Météo France — Vigilance',
+    desc: 'Bulletin Vigilance en temps réel via Opendatasoft.',
+    license: 'Licence Ouverte 2.0',
+    url: 'https://public.opendatasoft.com/explore/dataset/weatherref-france-vigilance-meteo-departement/',
+  },
+  {
+    name: 'Météo France — Climatologie',
+    desc: 'Données climatologiques de base quotidiennes (températures, précipitations).',
+    license: 'Licence Ouverte 2.0',
+    url: 'https://www.data.gouv.fr/datasets/donnees-climatologiques-de-base-quotidiennes',
+  },
+];
+
+const INFRA = [
+  { name: 'Node.js 22', desc: "Runtime serveur.", license: 'MIT', url: 'https://nodejs.org/' },
+  { name: 'Docker', desc: 'Containerisation.', license: 'Apache-2.0', url: 'https://www.docker.com/' },
+  { name: 'Caddy', desc: 'Reverse proxy + TLS automatique.', license: 'Apache-2.0', url: 'https://caddyserver.com/' },
+  { name: 'Valkey', desc: 'Fork ouvert de Redis (cache).', license: 'BSD-3-Clause', url: 'https://valkey.io/' },
+  { name: 'Umami', desc: 'Analytics RGPD-friendly (auto-hébergé).', license: 'MIT', url: 'https://umami.is/' },
+  { name: 'Forgejo', desc: 'Forge git auto-hébergée + CI/CD.', license: 'MIT', url: 'https://forgejo.org/' },
+];
+---
+
+<Base
+  title="Dépendances — Info Canicule"
+  description="Liste complète des bibliothèques logicielles, sources de données et services utilisés par Info Canicule."
+>
+  <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">Dépendances</h1>
+      <p class="mt-2 max-w-2xl text-slate-600">
+        Transparence sur ce qui fait tourner Info Canicule : code, données, infrastructure.
+        Tout est open source ou en données ouvertes.
+      </p>
+    </div>
+  </section>
+
+  <section class="container-tight py-8 space-y-10">
+    <div>
+      <h2 class="text-xl font-semibold">Sources de données</h2>
+      <table class="mt-3 w-full text-sm">
+        <thead class="bg-slate-100 text-left text-slate-700">
+          <tr>
+            <th class="px-3 py-2">Source</th>
+            <th class="px-3 py-2">Description</th>
+            <th class="px-3 py-2">Licence</th>
+          </tr>
+        </thead>
+        <tbody>
+          {DATA_SOURCES.map((s) => (
+            <tr class="border-t border-slate-200">
+              <td class="px-3 py-2 font-medium">
+                <a href={s.url} rel="noopener">{s.name}</a>
+              </td>
+              <td class="px-3 py-2 text-slate-700">{s.desc}</td>
+              <td class="px-3 py-2 text-slate-600">{s.license}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+
+    <div>
+      <h2 class="text-xl font-semibold">Bibliothèques applicatives</h2>
+      <table class="mt-3 w-full text-sm">
+        <thead class="bg-slate-100 text-left text-slate-700">
+          <tr>
+            <th class="px-3 py-2">Package</th>
+            <th class="px-3 py-2">Version</th>
+            <th class="px-3 py-2">Description</th>
+            <th class="px-3 py-2">Licence</th>
+          </tr>
+        </thead>
+        <tbody>
+          {deps.map(([name, version]) => {
+            const m = META[name];
+            return (
+              <tr class="border-t border-slate-200">
+                <td class="px-3 py-2 font-mono">
+                  {m ? <a href={m.url} rel="noopener">{name}</a> : name}
+                </td>
+                <td class="px-3 py-2 text-slate-600">{version}</td>
+                <td class="px-3 py-2 text-slate-700">{m?.desc ?? '—'}</td>
+                <td class="px-3 py-2 text-slate-600">{m?.license ?? '—'}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+
+    <div>
+      <h2 class="text-xl font-semibold">Outillage de développement</h2>
+      <table class="mt-3 w-full text-sm">
+        <thead class="bg-slate-100 text-left text-slate-700">
+          <tr>
+            <th class="px-3 py-2">Package</th>
+            <th class="px-3 py-2">Version</th>
+            <th class="px-3 py-2">Licence</th>
+          </tr>
+        </thead>
+        <tbody>
+          {devDeps.map(([name, version]) => {
+            const m = META[name];
+            return (
+              <tr class="border-t border-slate-200">
+                <td class="px-3 py-2 font-mono">
+                  {m ? <a href={m.url} rel="noopener">{name}</a> : name}
+                </td>
+                <td class="px-3 py-2 text-slate-600">{version}</td>
+                <td class="px-3 py-2 text-slate-600">{m?.license ?? '—'}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+
+    <div>
+      <h2 class="text-xl font-semibold">Infrastructure</h2>
+      <table class="mt-3 w-full text-sm">
+        <thead class="bg-slate-100 text-left text-slate-700">
+          <tr>
+            <th class="px-3 py-2">Composant</th>
+            <th class="px-3 py-2">Description</th>
+            <th class="px-3 py-2">Licence</th>
+          </tr>
+        </thead>
+        <tbody>
+          {INFRA.map((i) => (
+            <tr class="border-t border-slate-200">
+              <td class="px-3 py-2 font-medium">
+                <a href={i.url} rel="noopener">{i.name}</a>
+              </td>
+              <td class="px-3 py-2 text-slate-700">{i.desc}</td>
+              <td class="px-3 py-2 text-slate-600">{i.license}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+
+    <p class="text-sm text-slate-500">
+      Code source du site :
+      <a href="https://git.nocleus.com/florian/info-canicule" rel="noopener">
+        git.nocleus.com/florian/info-canicule
+      </a>
+    </p>
+  </section>
+</Base>
--- a/src/pages/mentions-legales.astro
+++ b/src/pages/mentions-legales.astro
@ -0,0 +1,113 @@
+---
+import Base from '../layouts/Base.astro';
+
+export const prerender = false;
+---
+
+<Base
+  title="Mentions légales — Info Canicule"
+  description="Mentions légales, éditeur, hébergeur, traitement des données personnelles d'Info Canicule."
+>
+  <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">Mentions légales</h1>
+      <p class="mt-2 text-slate-600">Conformes à la LCEN (loi pour la confiance dans l'économie numérique).</p>
+    </div>
+  </section>
+
+  <section class="container-tight py-8 prose prose-slate max-w-none">
+    <h2>Éditeur du site</h2>
+    <p>
+      Site édité à titre personnel, <strong>sans but lucratif</strong>, par :
+    </p>
+    <ul>
+      <li>Florian Bouchet — développeur indépendant</li>
+      <li>Contact : <a href="mailto:florian@nocleus.com">florian@nocleus.com</a></li>
+      <li>Statut : personne physique (pas d'entreprise immatriculée, pas d'association)</li>
+    </ul>
+    <p>
+      Le site n'a aucune vocation commerciale. Aucun chiffre d'affaires, aucune publicité, aucune
+      collecte de données à des fins de monétisation.
+    </p>
+
+    <h2>Hébergement</h2>
+    <p>
+      <strong>OVH SAS</strong> — 2 rue Kellermann, 59100 Roubaix, France.
+      <br />
+      Téléphone : 1007 (numéro non surtaxé) — <a href="https://www.ovh.com/" rel="noopener">ovh.com</a>
+    </p>
+    <p>
+      Serveur VPS mutualisé hébergeant plusieurs projets personnels du même éditeur.
+    </p>
+
+    <h2>Données personnelles</h2>
+    <p>
+      Info Canicule <strong>ne collecte aucune donnée personnelle</strong> de ses visiteurs.
+    </p>
+    <ul>
+      <li>Pas de compte utilisateur, pas de formulaire de contact direct (mail uniquement).</li>
+      <li>Pas de cookies de session ni de tracking.</li>
+      <li>
+        <strong>Statistiques de fréquentation</strong> : assurées par
+        <a href="https://umami.is/" rel="noopener">Umami</a>, solution d'analytics auto-hébergée,
+        RGPD-compatible et sans cookies. Les données collectées (pays, navigateur, page visitée) sont
+        agrégées et anonymes. Aucun identifiant individuel n'est stocké.
+      </li>
+      <li>
+        <strong>Logs serveur</strong> : adresses IP conservées 14 jours dans les logs Caddy pour des
+        raisons techniques (debug, détection d'abus via CrowdSec). Pas d'exploitation au-delà.
+      </li>
+    </ul>
+    <p>
+      Vos droits RGPD (accès, rectification, suppression, opposition) peuvent être exercés en écrivant à
+      <a href="mailto:florian@nocleus.com">florian@nocleus.com</a>.
+    </p>
+
+    <h2>Sources des données</h2>
+    <p>
+      Les alertes Vigilance et données climatologiques affichées proviennent de :
+    </p>
+    <ul>
+      <li>
+        <strong>Météo France</strong> via le portail
+        <a href="https://meteo.data.gouv.fr/" rel="noopener">meteo.data.gouv.fr</a>
+        et la rediffusion
+        <a href="https://public.opendatasoft.com/" rel="noopener">Opendatasoft</a>.
+      </li>
+      <li>
+        Diffusées sous
+        <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence/" rel="noopener">Licence Ouverte 2.0</a>
+        (Etalab).
+      </li>
+    </ul>
+    <p>
+      Les conseils officiels sont repris des publications de Météo France, santé.gouv.fr et
+      gouvernement.fr (informations publiques).
+    </p>
+
+    <h2>Limitation de responsabilité</h2>
+    <p>
+      Info Canicule est un service d'information à titre indicatif. Il ne remplace en aucun cas les
+      sources officielles. En cas d'événement météorologique dangereux, suivre les consignes de la
+      <strong>Préfecture</strong> et appeler les services d'urgence si nécessaire (
+      <a href="tel:15">15</a>, <a href="tel:18">18</a>, <a href="tel:112">112</a>).
+    </p>
+    <p>
+      L'éditeur ne saurait être tenu responsable d'un retard ou d'une indisponibilité de
+      l'information, ni de toute conséquence directe ou indirecte de l'usage des informations affichées
+      sur ce site.
+    </p>
+
+    <h2>Propriété intellectuelle</h2>
+    <p>
+      Le code source du site est sous licence libre (
+      <a href="https://git.nocleus.com/florian/info-canicule" rel="noopener">repo Forgejo</a>
+      ). Les données affichées sont sous Licence Ouverte 2.0 et réutilisables librement, y compris
+      commercialement, à condition de citer Météo France et la licence.
+    </p>
+    <p>
+      L'endpoint <code>/api/vigilance</code> diffuse le snapshot courant en JSON (CORS *), pour
+      réutilisation par tout site ou application qui le souhaite.
+    </p>
+  </section>
+</Base>
--- a/src/pages/sitemap-departements.xml.ts
+++ b/src/pages/sitemap-departements.xml.ts
@ -0,0 +1,23 @@
+import type { APIRoute } from 'astro';
+import { DEPARTEMENTS } from '../lib/departements';
+
+export const prerender = false;
+
+const SITE = 'https://info-canicule.nocleus.com';
+
+export const GET: APIRoute = () => {
+  const today = new Date().toISOString().split('T')[0];
+  const urls = DEPARTEMENTS.map(
+    (d) =>
+      `  <url><loc>${SITE}/departement/${d.code}</loc><lastmod>${today}</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>`,
+  ).join('\n');
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls}
+</urlset>
+`;
+  return new Response(xml, {
+    status: 200,
+    headers: { 'Content-Type': 'application/xml; charset=utf-8', 'Cache-Control': 'public, max-age=3600' },
+  });
+};
--- a/src/pages/soutenir.astro
+++ b/src/pages/soutenir.astro
@ -0,0 +1,74 @@
+---
+import Base from '../layouts/Base.astro';
+
+export const prerender = false;
+---
+
+<Base
+  title="Soutenir le projet — Info Canicule"
+  description="Info Canicule est un service gratuit, sans publicité, à but non lucratif. Si le site vous est utile, vous pouvez soutenir son hébergement via Ko-fi."
+>
+  <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">Soutenir Info Canicule</h1>
+      <p class="mt-2 max-w-2xl text-slate-600">
+        Le site est gratuit, sans publicité et sans traceurs commerciaux. Si vous le trouvez utile,
+        vous pouvez aider à couvrir l'hébergement (~7 €/mois mutualisés sur plusieurs projets perso).
+      </p>
+    </div>
+  </section>
+
+  <section class="container-tight py-8 prose prose-slate max-w-none">
+    <h2>Don libre via Ko-fi</h2>
+    <p>
+      Le moyen le plus simple : un don libre, sans inscription, par carte bancaire ou PayPal, via
+      <a href="https://ko-fi.com/daelwizhit" rel="noopener" class="font-semibold">ko-fi.com/daelwizhit</a>.
+      Les dons sont anonymes par défaut et entièrement optionnels.
+    </p>
+
+    <div class="not-prose my-6">
+      <a
+        href="https://ko-fi.com/daelwizhit"
+        rel="noopener"
+        class="inline-flex items-center gap-2 rounded-lg bg-canicule-600 px-6 py-3 text-base font-semibold text-white no-underline hover:bg-canicule-700"
+      >
+        ☕ Soutenir sur Ko-fi
+      </a>
+    </div>
+
+    <h2>Ce que les dons financent</h2>
+    <ul>
+      <li>Location du VPS OVH qui héberge le site (~7 €/mois, mutualisés avec d'autres projets perso).</li>
+      <li>Nom de domaine annuel.</li>
+      <li>Café pour les soirées de maintenance 🥲.</li>
+    </ul>
+    <p>
+      <strong>Ce site n'a aucune vocation commerciale.</strong> Aucun chiffre d'affaires, aucun salaire
+      versé. Les dons couvrent les frais techniques ou, en cas d'excédent, financent d'autres petits
+      projets d'utilité publique du même développeur.
+    </p>
+
+    <h2>Autres manières d'aider</h2>
+    <ul>
+      <li>
+        <strong>Signaler un bug ou une typo</strong> : par mail à
+        <a href="mailto:florian@nocleus.com">florian@nocleus.com</a> ou via une issue sur le
+        <a href="https://git.nocleus.com/florian/info-canicule" rel="noopener">repo Forgejo</a>.
+      </li>
+      <li>
+        <strong>Partager le site</strong> autour de vous, en particulier auprès de personnes fragiles
+        (proches âgés, personnes isolées) pour qui les conseils canicule peuvent faire une vraie
+        différence.
+      </li>
+      <li>
+        <strong>Réutiliser les données</strong> : l'endpoint <code>/api/vigilance</code> diffuse le
+        snapshot en JSON (CORS *), réutilisable librement sous Licence Ouverte 2.0.
+      </li>
+    </ul>
+
+    <p class="text-sm text-slate-500">
+      Pour les questions juridiques (mention de l'éditeur, statut), voir les
+      <a href="/mentions-legales">mentions légales</a>.
+    </p>
+  </section>
+</Base>