feat: add Pourquoi context section and four configurations grid

Illustrates the underwater noise / DCSMM framing and presents the MINI Sentinelle,
STD Gardien (recommended), PRO Observatoire and EOLIEN Vigie Offshore tiers with
indicative pricing and per-config feature highlights.

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

src/components/Configurations.astro

@@ -0,0 +1,151 @@
+---
+const configs = [
+  {
+    code: 'MINI',
+    name: 'Sentinelle',
+    accent: 'emerald',
+    tagline: "L'entrée de gamme pour petit port.",
+    price: '< 3 000 €',
+    priceSub: 'déployé',
+    cible: 'Petit port de plaisance, preuve de concept, sensibilisation',
+    features: [
+      { label: 'Hydrophone', value: 'Basse conso — tendances &amp; alertes' },
+      { label: 'Température eau', value: 'Sonde étanche intégrée' },
+      { label: 'Énergie', value: '30 W solaire · batterie 20 Ah' },
+      { label: 'Transmission', value: '4G direct — sobre, ~1 Ko/min' },
+    ],
+    highlight: 'Détection de tendances et alertes bruit, sans complexité.',
+  },
+  {
+    code: 'STD',
+    name: 'Gardien',
+    accent: 'tide',
+    tagline: 'Configuration recommandée pour un déploiement opérationnel.',
+    price: '< 8 000 €',
+    priceSub: 'déployé',
+    cible: 'Port moyen — conformité réglementaire et monitoring courant',
+    features: [
+      { label: 'Hydrophone', value: 'HTI-96-MIN — précision réglementaire' },
+      { label: 'Physico-chimie', value: 'T°, conductivité, O₂, pH, météo' },
+      { label: 'Compute', value: 'Raspberry Pi CM4 — FFT embarquée' },
+      { label: 'Énergie', value: '50 W solaire · batterie 50 Ah · 3 jours d\'autonomie' },
+    ],
+    highlight: 'Le bon compromis : précision, modularité, prix maîtrisé.',
+    featured: true,
+  },
+  {
+    code: 'PRO',
+    name: 'Observatoire',
+    accent: 'violet',
+    tagline: 'Station de référence pour AMP et zones à fort enjeu.',
+    price: '< 18 000 €',
+    priceSub: 'déployé',
+    cible: 'Aire Marine Protégée, port majeur, recherche, Natura 2000',
+    features: [
+      { label: 'Acoustique', value: 'Hydrophone LF + HF faible bruit' },
+      { label: 'Physico-chimie', value: 'CTD pro, O₂ optode, pH, turbidité, chloro-a, nitrates' },
+      { label: 'Optique', value: 'Caméra sous-marine + éclairage LED' },
+      { label: 'Compute', value: 'RPi CM4 4Go + SSD 256 Go · IA embarquée possible' },
+    ],
+    highlight: 'Proche research-grade, inter-calibrable avec les réseaux nationaux.',
+  },
+  {
+    code: 'EOLIEN',
+    name: 'Vigie Offshore',
+    accent: 'amber',
+    tagline: 'Monitoring acoustique et biodiversité autour des parcs éoliens.',
+    price: '< 15 000 €',
+    priceSub: 'déployé',
+    cible: 'Périphérie parc éolien offshore — construction &amp; exploitation',
+    features: [
+      { label: 'Acoustique', value: 'LF + HF pour bruit de battage &amp; opérations' },
+      { label: 'Mesures', value: 'Physico-chimie, turbidité, courantométrie' },
+      { label: 'Comms', value: '4G double antenne + LoRa + GPS PPS' },
+      { label: 'Ancrage', value: 'Renforcé pour courants forts — variante V2 possible' },
+    ],
+    highlight: 'Conçue pour des contrats long-terme, alignée sur la durée d\'exploitation des parcs.',
+  },
+];
+
+const accents = {
+  emerald: { badge: 'bg-emerald-500/15 text-emerald-300 ring-emerald-400/30', dot: 'bg-emerald-400', chip: 'text-emerald-300' },
+  tide: { badge: 'bg-tide-500/20 text-tide-300 ring-tide-400/40', dot: 'bg-tide-400', chip: 'text-tide-300' },
+  violet: { badge: 'bg-violet-500/15 text-violet-300 ring-violet-400/30', dot: 'bg-violet-400', chip: 'text-violet-300' },
+  amber: { badge: 'bg-amber-500/15 text-amber-300 ring-amber-400/30', dot: 'bg-amber-400', chip: 'text-amber-300' },
+};
+---
+
+<section id="configurations" class="section">
+  <div class="container-narrow">
+    <div class="section-title-block">
+      <span class="eyebrow">Configurations</span>
+      <h2 class="h-section mt-4">Quatre configurations pour quatre contextes terrain.</h2>
+      <p class="lead mt-6">
+        Une seule plateforme, déclinée selon le besoin opérationnel, le niveau d'exigence et
+        l'enveloppe du client. Les prix sont indicatifs et exprimés en euros HT, main-d'œuvre
+        d'assemblage et pose incluses.
+      </p>
+    </div>
+
+    <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
+      {configs.map((cfg) => {
+        const a = accents[cfg.accent];
+        return (
+          <article
+            class={`card relative flex h-full flex-col ${cfg.featured ? 'ring-1 ring-tide-400/40 shadow-glow' : ''}`}
+          >
+            {cfg.featured && (
+              <span class="absolute -top-3 right-5 rounded-full bg-tide-500 px-3 py-1 text-xs font-medium text-abyss-950 shadow-glow">
+                Recommandé
+              </span>
+            )}
+
+            <div class="flex items-baseline justify-between">
+              <div>
+                <div class={`inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-medium ring-1 ${a.badge}`}>
+                  <span class={`inline-block h-1.5 w-1.5 rounded-full ${a.dot}`}></span>
+                  {cfg.code}
+                </div>
+                <h3 class="mt-3 font-display text-2xl font-semibold text-foam-50">{cfg.name}</h3>
+              </div>
+            </div>
+
+            <p class="mt-3 text-sm text-foam-100/75">{cfg.tagline}</p>
+
+            <div class="mt-5 flex items-baseline gap-2">
+              <span class="font-display text-3xl font-semibold text-foam-50">{cfg.price}</span>
+              <span class="text-xs uppercase tracking-wider text-foam-100/55">{cfg.priceSub}</span>
+            </div>
+
+            <div class="mt-5 rounded-lg bg-abyss-900/50 px-4 py-3 text-xs leading-relaxed text-foam-100/70 ring-1 ring-white/5">
+              <span class="block text-[10px] font-medium uppercase tracking-widest text-foam-100/50">Cible</span>
+              <span set:html={cfg.cible}></span>
+            </div>
+
+            <ul class="mt-6 space-y-3">
+              {cfg.features.map((f) => (
+                <li class="flex items-start gap-3 text-sm">
+                  <svg viewBox="0 0 24 24" class={`mt-0.5 h-4 w-4 shrink-0 ${a.chip}`} fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M20 6L9 17l-5-5"/>
+                  </svg>
+                  <div>
+                    <div class="text-foam-100/60 text-[11px] uppercase tracking-wider">{f.label}</div>
+                    <div class="text-foam-50" set:html={f.value}></div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+
+            <p class={`mt-6 rounded-lg border border-white/5 bg-white/[0.02] px-4 py-3 text-xs italic text-foam-100/70`}>
+              {cfg.highlight}
+            </p>
+          </article>
+        );
+      })}
+    </div>
+
+    <p class="mt-8 text-center text-xs text-foam-100/50">
+      Prix de revient indicatifs · à affiner selon volumes et fournisseurs · marge commerciale et subventions non incluses.
+    </p>
+  </div>
+</section>

src/components/Pourquoi.astro

@@ -0,0 +1,113 @@
+---
+const issues = [
+  {
+    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',
+  },
+  {
+    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',
+  },
+  {
+    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',
+  },
+  {
+    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',
+    icon: 'network',
+  },
+];
+---
+
+<section id="pourquoi" class="section">
+  <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>
+      <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.
+      </p>
+    </div>
+
+    <div class="grid gap-5 md:grid-cols-2">
+      {issues.map((issue) => (
+        <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="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' && (
+                <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"/>
+                </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"/>
+                </svg>
+              )}
+              {issue.icon === 'shield' && (
+                <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"/>
+                </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">
+                  <circle cx="6" cy="6" r="2"/>
+                  <circle cx="18" cy="6" r="2"/>
+                  <circle cx="6" cy="18" r="2"/>
+                  <circle cx="18" cy="18" r="2"/>
+                  <circle cx="12" cy="12" r="2"/>
+                  <path d="M7.5 7.5l3 3M13.5 13.5l3 3M16.5 7.5l-3 3M10.5 13.5l-3 3" stroke="currentColor" stroke-width="1.5"/>
+                </svg>
+              )}
+            </span>
+            <span class="text-xs font-medium uppercase tracking-widest text-lagoon-400/80">{issue.tag}</span>
+          </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>
+        </article>
+      ))}
+    </div>
+
+    <!-- Callout -->
+    <div class="relative mt-12 overflow-hidden rounded-2xl border border-tide-400/20 bg-gradient-to-br from-tide-500/10 via-abyss-900/40 to-lagoon-500/10 p-8 md:p-10">
+      <div class="grid gap-6 md:grid-cols-[1fr_auto] md:items-center">
+        <div>
+          <p class="text-xs font-medium uppercase tracking-[0.2em] text-tide-400">Le constat</p>
+          <p class="mt-3 text-xl md:text-2xl font-display leading-snug text-foam-50">
+            En 25 ans, la France a déployé 3 stations MAREL pour surveiller son littoral.
+            <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.
+          </p>
+        </div>
+        <div class="flex items-center gap-6 md:flex-col md:items-end md:gap-2">
+          <div class="text-right">
+            <div class="font-display text-4xl font-semibold text-tide-400">×100</div>
+            <div class="text-xs uppercase tracking-wider text-foam-100/60">Objectif de densification</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>