feat(v3): refonte Pourquoi → 5 segments marché avec douleur/angle UE/pitch

Nouveau contenu Pourquoi (garde la forme grid 4 cards, passe à 5) :
- Cat. A — Agences de l'eau : DCE 2027 (5% petits cours d'eau suivis)
- Cat. B — Instituts de recherche (Ifremer, LEMAR, MIO…) : capteurs 70%
  du CAPEX, D11C2 évalué par modélisation
- Cat. C — Collectivités & Ports (hors HAROPA) : ICPE + eaux de baignade
- Cat. D — Conchyli/Aquaculture : 80% mortalité naissain Arcachon 2024,
  paracétamol/métolachlore Ifremer, angle FEAMPA
- Cat. E — Grands groupes eau (hors LyRE/VERI) : LoRaWAN déployé mais
  signal environnemental manquant, angle DCE + Taxonomie verte

Chaque card : douleur chiffrée avec source, angle UE, pitch en quote.
Callout mis à jour : un socle, cinq financements UE mobilisables.
Faits DCE/Arcachon/D11C2 validés via sources publiques (Cour des comptes,
Ifremer Emergent'Sea, Shom DCSMM).

src/components/Pourquoi.astro

@@ -1,28 +1,53 @@
 ---
-const issues = [
+const segments = [
   {
-    title: 'Bruit sous-marin',
-    desc: "Le trafic maritime, les manœuvres portuaires et les chantiers offshore génèrent une pression acoustique qui perturbe cétacés et poissons — sans mesure fine, impossible de la réguler.",
-    tag: 'Pression anthropique',
-    icon: 'sound',
+    cat: 'Cat. A',
+    title: "Agences de l'eau",
+    icon: 'drop',
+    pain: "Impossible d'atteindre le <strong class=\"text-foam-50\">Bon État DCE 2027</strong> avec le réseau actuel — <strong class=\"text-foam-50\">5&nbsp;%</strong> seulement des petits cours d'eau suivis.",
+    painSource: 'Cour des comptes',
+    euTag: 'DCE 2000/60/CE · risque contentieux Commission',
+    pitch: "Densification du réseau par facteur 10-100 à coût constant, éligible aux programmes Eau &amp; Biodiversité.",
   },
   {
-    title: 'Biodiversité côtière',
-    desc: "Zones Natura 2000, AMP et façades densément fréquentées : les gestionnaires ont besoin d'indicateurs en continu, pas de campagnes ponctuelles tous les deux ans.",
-    tag: 'Écosystèmes',
-    icon: 'fish',
+    cat: 'Cat. B',
+    title: 'Instituts de recherche',
+    sub: 'Ifremer, LEMAR, MIO, LIENSs, INRAE',
+    icon: 'atom',
+    pain: "Budget instrumentation saturé — <strong class=\"text-foam-50\">jusqu'à 70&nbsp;%</strong> de l'investissement initial part dans les capteurs. Le critère <strong class=\"text-foam-50\">D11C2</strong> (bruit) est aujourd'hui évalué par modélisation faute de mesure.",
+    painSource: 'Frontiers · DCSMM Shom',
+    euTag: 'DCSMM D11 · Horizon Europe Mission Ocean',
+    pitch: "Remplacer la modélisation par de la donnée réelle, co-publication ou CIFRE.",
   },
   {
-    title: 'Conformité environnementale',
-    desc: "Le cadre européen impose des objectifs de bon état écologique aux eaux marines. Les ports et façades doivent produire des données — mais les outils abordables manquent.",
-    tag: 'Cadre DCSMM',
-    icon: 'shield',
+    cat: 'Cat. C',
+    title: 'Collectivités & Ports',
+    sub: 'hors HAROPA',
+    icon: 'anchor',
+    pain: "Obligations <strong class=\"text-foam-50\">ICPE</strong>, gestion des eaux de ruissellement, microplastiques — audit DREAL possible à tout moment.",
+    painSource: '',
+    euTag: 'ICPE · Directive Eaux de Baignade · Plastics Strategy',
+    pitch: "Passer du prélèvement ponctuel contradictoire au tableau de bord permanent mobilisable devant la DREAL.",
   },
   {
-    title: 'Angle mort du littoral',
-    desc: "Les stations côtières de référence se comptent sur les doigts d'une main. Le littoral a besoin d'un réseau dense, pas d'îlots d'excellence isolés.",
-    tag: 'Réseau',
+    cat: 'Cat. D',
+    title: 'Conchyliculture & Aquaculture',
+    sub: 'CNC, CRC',
+    icon: 'shell',
+    pain: "<strong class=\"text-foam-50\">80&nbsp;%</strong> de mortalité naissain Arcachon 2024 · <strong class=\"text-foam-50\">7 à 11&nbsp;M€</strong> de pertes pendant l'interdiction de vente · contamination paracétamol / métolachlore détectée par Ifremer.",
+    painSource: "Ifremer · Emergent'Sea",
+    euTag: 'FEAMPA · REACH',
+    pitch: "Alerte hypoxie / salinité concession par concession, avant la mortalité. Éligible FEAMPA.",
+  },
+  {
+    cat: 'Cat. E',
+    title: 'Grands groupes eau',
+    sub: 'hors LyRE / VERI',
     icon: 'network',
+    pain: "Infrastructure LoRaWAN déployée, mais <strong class=\"text-foam-50\">signal environnemental manquant</strong>. Besoin de sortir du compteur urbain pour adresser les DSP littorales et rurales.",
+    painSource: '',
+    euTag: 'DCE · Green Deal · Taxonomie verte',
+    pitch: "Brique capteur milieu naturel compatible Hubgrade / LyRE. CIFRE ou co-développement.",
   },
 ];
 ---
@@ -31,44 +56,52 @@ const issues = [
   <div class="container-narrow">
     <div class="section-title-block">
       <span class="eyebrow">Pourquoi</span>
-      <h2 class="h-section mt-4">Le littoral mesure, mais pas encore à la bonne échelle.</h2>
+      <h2 class="h-section mt-4">Cinq marchés, cinq douleurs chiffrées, un même socle technique.</h2>
       <p class="lead mt-6">
-        La surveillance fine du milieu marin est un enjeu réglementaire, écologique et
-        économique. Les technologies existent, mais leur coût les réserve aux stations de
-        référence. Il manque un outil opérationnel, abordable, pour les ports et gestionnaires
-        qui veulent agir maintenant.
+        Le monitoring côtier est traversé par des enjeux très différents selon l'acteur :
+        conformité réglementaire, recherche, exploitation, prévention. NowYouSea adresse
+        ces cinq verticales avec une seule plateforme, en s'appuyant sur les cadres
+        européens qui financent leur densification.
       </p>
     </div>
 
     <div class="grid gap-5 md:grid-cols-2">
-      {issues.map((issue) => (
+      {segments.map((s) => (
         <article class="card group relative overflow-hidden">
-          <div class="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full bg-tide-500/10 blur-2xl transition-opacity group-hover:opacity-100 opacity-60"></div>
+          <div class="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full bg-tide-500/10 blur-2xl transition-opacity opacity-60 group-hover:opacity-100"></div>
 
           <div class="flex items-center gap-3">
             <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-abyss-700/70 text-lagoon-400 ring-1 ring-lagoon-400/20">
-              {issue.icon === 'sound' && (
+              {s.icon === 'drop' && (
                 <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                  <path d="M4 10v4h3l5 4V6L7 10H4z"/>
-                  <path d="M16 8a5 5 0 0 1 0 8"/>
-                  <path d="M18.5 5.5a9 9 0 0 1 0 13"/>
+                  <path d="M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z"/>
+                  <path d="M9 14a3 3 0 0 0 3 3"/>
                 </svg>
               )}
-              {issue.icon === 'fish' && (
-                <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                  <path d="M4 12c2-4 6-6 10-6 3 0 5 2 6 4-1 2-3 4-6 4-4 0-8-1-10-2z"/>
-                  <path d="M4 12l-2 2 2 2"/>
-                  <circle cx="16" cy="10" r=".8" fill="currentColor"/>
+              {s.icon === 'atom' && (
+                <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true">
+                  <circle cx="12" cy="12" r="1.4" fill="currentColor"/>
+                  <ellipse cx="12" cy="12" rx="10" ry="4"/>
+                  <ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)"/>
+                  <ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)"/>
                 </svg>
               )}
-              {issue.icon === 'shield' && (
+              {s.icon === 'anchor' && (
                 <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                  <path d="M12 3l8 3v5c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-3z"/>
-                  <path d="M9 12l2 2 4-4"/>
+                  <circle cx="12" cy="5" r="2"/>
+                  <path d="M12 7v13"/>
+                  <path d="M8 10h8"/>
+                  <path d="M5 16a7 7 0 0 0 14 0"/>
                 </svg>
               )}
-              {issue.icon === 'network' && (
-                <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+              {s.icon === 'shell' && (
+                <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M12 4c5 0 9 4 9 9 0 3-2 6-4 7H7c-2-1-4-4-4-7 0-5 4-9 9-9z"/>
+                  <path d="M12 4v16M7 8l5 12M17 8l-5 12"/>
+                </svg>
+              )}
+              {s.icon === 'network' && (
+                <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                   <circle cx="6" cy="6" r="2"/>
                   <circle cx="18" cy="6" r="2"/>
                   <circle cx="6" cy="18" r="2"/>
@@ -78,11 +111,35 @@ const issues = [
                 </svg>
               )}
             </span>
-            <span class="text-xs font-medium uppercase tracking-widest text-lagoon-400/80">{issue.tag}</span>
+            <div class="flex flex-col">
+              <span class="text-[10px] font-medium uppercase tracking-[0.2em] text-lagoon-400/80">{s.cat}</span>
+              <span class="font-display text-lg font-semibold leading-tight text-foam-50">{s.title}</span>
+              {s.sub && <span class="text-[11px] text-foam-100/55">({s.sub})</span>}
+            </div>
           </div>
 
-          <h3 class="mt-5 font-display text-xl font-semibold text-foam-50">{issue.title}</h3>
-          <p class="mt-3 text-sm leading-relaxed text-foam-100/75">{issue.desc}</p>
+          <div class="mt-5">
+            <div class="flex items-center gap-2 text-[10px] font-medium uppercase tracking-widest text-rose-300/80">
+              <span class="inline-block h-1 w-3 rounded-full bg-rose-400/70"></span>
+              Douleur
+            </div>
+            <p class="mt-2 text-sm leading-relaxed text-foam-100/80" set:html={s.pain}></p>
+            {s.painSource && (
+              <p class="mt-1.5 text-[11px] italic text-foam-100/45">source : {s.painSource}</p>
+            )}
+          </div>
+
+          <div class="mt-4">
+            <div class="flex items-center gap-2 text-[10px] font-medium uppercase tracking-widest text-tide-300/80">
+              <span class="inline-block h-1 w-3 rounded-full bg-tide-400/70"></span>
+              Angle UE
+            </div>
+            <p class="mt-2 text-xs text-foam-100/70">{s.euTag}</p>
+          </div>
+
+          <blockquote class="mt-5 rounded-lg border border-tide-400/20 bg-tide-500/5 px-4 py-3 text-sm italic leading-relaxed text-foam-100/90">
+            « {s.pitch} »
+          </blockquote>
         </article>
       ))}
     </div>
@@ -97,8 +154,8 @@ const issues = [
             <span class="text-lagoon-400">Il en faudrait 300.</span>
           </p>
           <p class="mt-3 text-sm text-foam-100/70 max-w-xl">
-            NowYouSea démocratise le monitoring marin : un rocher, une installation, des données
-            continues — au prix accessible à un port de plaisance.
+            Un seul socle technique, cinq financements européens mobilisables. NowYouSea
+            rend la densification réaliste — au prix accessible à un port de plaisance.
           </p>
         </div>
         <div class="flex items-center gap-6 md:flex-col md:items-end md:gap-2">