feat(brand): refonte favicon + og-image, reskin /soutenir

- favicon.svg : nouveau logo (sun + brand + droplet) cohérent avec le header
- favicon-32 / favicon-192 / apple-touch-icon générés par scripts/build-favicon.mjs (sharp)
- og-image refait avec la nouvelle identité (paper, Manrope-like, pills vigilance avec glyphes)
- Base.astro : link rel icon + apple-touch-icon ajoutés
- /soutenir : reskin (kicker + h1 accentué + barre d'objectif en brand-tint, blocs ic-card), fonctionnalité Ko-fi conservée

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

public/favicon.svg

@@ -1,5 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <circle cx="32" cy="32" r="30" fill="#ea580c"/>
-  <text x="32" y="44" font-size="34" text-anchor="middle" font-family="system-ui,sans-serif">🌡</text>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Info Canicule">
+  <title>Info Canicule</title>
+  <circle cx="16" cy="16" r="14" fill="#f4c97d"/>
+  <circle cx="16" cy="16" r="11" fill="#d97757"/>
+  <path d="M16 7 C12 11 12 16 16 21 C20 16 20 11 16 7 Z" fill="#ffffff"/>
 </svg>

public/og-image.svg

@@ -2,14 +2,45 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
   <defs>
     <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#fff7ed"/>
-      <stop offset="100%" stop-color="#ffedd5"/>
+      <stop offset="0%" stop-color="#fdfaf2"/>
+      <stop offset="100%" stop-color="#f8f1e1"/>
     </linearGradient>
   </defs>
   <rect width="1200" height="630" fill="url(#bg)"/>
-  <text x="80" y="200" font-family="system-ui,-apple-system,sans-serif" font-size="120" font-weight="800" fill="#c2410c">🌡️ Info</text>
-  <text x="80" y="340" font-family="system-ui,-apple-system,sans-serif" font-size="120" font-weight="800" fill="#c2410c">Canicule</text>
-  <text x="80" y="440" font-family="system-ui,-apple-system,sans-serif" font-size="38" fill="#7c2d12">Vigilance Météo France en temps réel</text>
-  <text x="80" y="495" font-family="system-ui,-apple-system,sans-serif" font-size="28" fill="#9a3412">Carte interactive · 96 départements · conseils officiels</text>
-  <text x="80" y="570" font-family="system-ui,-apple-system,sans-serif" font-size="22" fill="#a16207">Gratuit · sans publicité · non lucratif · données ouvertes</text>
+
+  <!-- Logo : grand cercle (sun) + cercle brand + droplet -->
+  <g transform="translate(80 90)">
+    <circle cx="60" cy="60" r="56" fill="#f4c97d"/>
+    <circle cx="60" cy="60" r="44" fill="#d97757"/>
+    <path d="M60 28 C44 44 44 64 60 80 C76 64 76 44 60 28 Z" fill="#ffffff"/>
+  </g>
+
+  <!-- Wordmark -->
+  <text x="220" y="160" font-family="'Manrope','Public Sans',system-ui,-apple-system,sans-serif" font-size="56" font-weight="700" fill="#6b6457" letter-spacing="0.04em">VIGILANCE MÉTÉO FRANCE</text>
+
+  <text x="80" y="320" font-family="'Manrope','Public Sans',system-ui,-apple-system,sans-serif" font-size="132" font-weight="800" fill="#1b1814" letter-spacing="-0.025em">Info Canicule.</text>
+
+  <text x="80" y="400" font-family="'Manrope','Public Sans',system-ui,-apple-system,sans-serif" font-size="50" font-weight="600" fill="#b45a3a" letter-spacing="-0.015em">Toutes les alertes météo, en clair.</text>
+
+  <!-- Pills vigilance pour le visuel -->
+  <g transform="translate(80 470)">
+    <g>
+      <rect x="0" y="0" rx="999" ry="999" width="170" height="56" fill="#e8f3e6" stroke="#2f7d3a" stroke-width="3"/>
+      <text x="22" y="36" font-family="'Public Sans',system-ui,sans-serif" font-size="22" font-weight="700" fill="#1b4a22">● Vert</text>
+    </g>
+    <g transform="translate(190 0)">
+      <rect x="0" y="0" rx="999" ry="999" width="180" height="56" fill="#fff5cf" stroke="#b08a00" stroke-width="3"/>
+      <text x="22" y="36" font-family="'Public Sans',system-ui,sans-serif" font-size="22" font-weight="700" fill="#5e4900">▲ Jaune</text>
+    </g>
+    <g transform="translate(390 0)">
+      <rect x="0" y="0" rx="999" ry="999" width="200" height="56" fill="#ffd9b3" stroke="#c25f00" stroke-width="3"/>
+      <text x="22" y="36" font-family="'Public Sans',system-ui,sans-serif" font-size="22" font-weight="700" fill="#5a2a00">◆ Orange</text>
+    </g>
+    <g transform="translate(610 0)">
+      <rect x="0" y="0" rx="999" ry="999" width="190" height="56" fill="#ffb3b3" stroke="#c01818" stroke-width="3"/>
+      <text x="22" y="36" font-family="'Public Sans',system-ui,sans-serif" font-size="22" font-weight="700" fill="#5a0a0a">■ Rouge</text>
+    </g>
+  </g>
+
+  <text x="80" y="580" font-family="'Public Sans',system-ui,sans-serif" font-size="24" font-weight="500" fill="#6b6457">Gratuit · sans publicité · données ouvertes Météo France</text>
 </svg>