feat(v5): Pourquoi → douleurs universelles, personas en interne

Retire toute mention explicite des segments clients (Cat. A-I.1, Ifremer,
Artelia, Surfrider, Cerema…). Les personas restent un outil interne, pas
du contenu public. Le site expose uniquement les douleurs chiffrées du
marché et le bénéfice que NowYouSea apporte.

6 cards universelles :
- DCE 2027 — densification à faire
- D11C2 modélisé — donnée acoustique manquante
- Budget capteurs saturé (70% CAPEX)
- Contaminations détectées a posteriori (Arcachon 2024)
- Audits sans donnée continue (ICPE/Baignade/Plastics)
- Couverture vs point (hydrophones k€/point)

Chaque card : titre punchy + douleur chiffrée + source scientifique +
cadre réglementaire (tag) + bénéfice transversal en callout.
This commit is contained in:
2026-04-21 08:31:40 +00:00
parent 1e90332b94
commit ba23d151bf

View File

@@ -1,103 +1,52 @@
---
const segments = [
const issues = [
{
cat: 'Cat. A',
title: "Agences de l'eau",
title: "L'Europe exige le Bon État 2027, le réseau ne le permet pas.",
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é.",
pain: "La Directive Cadre sur l'Eau impose un bon état écologique en 2027. Aujourd'hui, <strong class=\"text-foam-50\">5&nbsp;%</strong> seulement des petits cours d'eau sont effectivement suivis — le reste est évalué par extrapolation ou modélisation.",
painSource: 'Cour des comptes, « La gestion quantitative de l\'eau »',
tag: 'DCE 2000/60/CE',
benefit: "Densifier le réseau d'un facteur 10 à 100 sans faire exploser le coût de possession.",
},
{
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: "Le bruit sous-marin réglementaire est modélisé, pas mesuré.",
icon: 'sound',
pain: "Le critère <strong class=\"text-foam-50\">D11C2</strong> de la Directive Stratégie Milieu Marin évalue le bruit ambiant par <strong class=\"text-foam-50\">modélisation du trafic maritime</strong>, faute de stations de mesure assez denses. Les seuils de « bon état » sont définis qualitativement.",
painSource: 'Shom · évaluation DCSMM cycle 3',
tag: 'DCSMM D11',
benefit: "Produire la donnée acoustique terrain qui manque pour valider les modèles et caler les seuils.",
},
{
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: "Les capteurs saturent les budgets d'instrumentation.",
icon: 'wallet',
pain: "Sur un projet d'observation côtière, <strong class=\"text-foam-50\">jusqu'à 70&nbsp;%</strong> du budget d'instrumentation part dans les capteurs eux-mêmes. À ce coût unitaire, la couverture reste ponctuelle — quelques points de référence au lieu d'un maillage.",
painSource: 'Frontiers in Marine Science',
tag: 'Recherche & AMP',
benefit: "Remplacer le point de référence coûteux par un maillage dense à budget constant.",
},
{
cat: 'Cat. D',
title: 'Conchyliculture & Aquaculture',
sub: 'CNC, CRC',
title: "Les contaminations se détectent après les pertes.",
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.",
pain: "Arcachon, 2024 : <strong class=\"text-foam-50\">80&nbsp;%</strong> de mortalité naissain, <strong class=\"text-foam-50\">7 à 11 M€</strong> de pertes pendant l'interdiction de vente paracétamol et métolachlore identifiés par analyses en laboratoire, bien après coup.",
painSource: "Ifremer / CNRS-EPOC / OFB · étude Emergent'Sea",
tag: 'FEAMPA · REACH',
benefit: "Détecter l'hypoxie, la salinité anormale ou le signal acoustique inhabituel avant la mortalité.",
},
{
cat: 'Cat. E',
title: 'Grands groupes eau',
sub: 'hors LyRE / VERI',
title: "Les audits environnementaux réclament de la donnée continue.",
icon: 'shield',
pain: "Les obligations <strong class=\"text-foam-50\">ICPE</strong>, la Directive Eaux de Baignade, la Plastics Strategy imposent de produire des données que les <strong class=\"text-foam-50\">campagnes ponctuelles</strong> ne peuvent plus fournir à coût raisonnable. L'audit DREAL peut tomber à tout moment.",
painSource: '',
tag: 'ICPE · Eaux de Baignade · Plastics Strategy',
benefit: "Passer du prélèvement contradictoire au tableau de bord permanent, sans génie civil.",
},
{
title: "Couvrir une baie coûte le prix d'un seul point.",
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.",
},
{
cat: 'Cat. F',
title: "Bureaux d'études",
sub: 'Artelia, BRL, Egis',
icon: 'blueprint',
pain: "Livrer au client final (Agence, port, collectivité) une <strong class=\"text-foam-50\">data continue crédible</strong> là où ils facturent actuellement des campagnes ponctuelles coûteuses.",
painSource: '',
euTag: 'DCE · ICPE (marchés publics)',
pitch: "Brique instrumentation à revendre en marge dans vos missions AMO Eau.",
},
{
cat: 'Cat. G',
title: 'ONG & Associations',
sub: 'Surfrider, FNE',
icon: 'advocacy',
pain: "Pas d'accès à la <strong class=\"text-foam-50\">donnée terrain</strong> pour étayer le plaidoyer → dépendance aux rapports publics.",
painSource: '',
euTag: 'Directive Eaux de Baignade · Convention d\'Aarhus',
pitch: "Cartographier une baie pour le prix d'une seule bouée classique. Visibilité média assurée.",
},
{
cat: 'Cat. H',
title: 'OFB & Parcs Naturels Marins',
sub: '',
icon: 'leaf',
pain: "Mission de surveillance multi-parcs avec budgets limités — <strong class=\"text-foam-50\">hydrophones à plusieurs k€/point</strong> aujourd'hui, impossible de couvrir un parc entier.",
painSource: '',
euTag: 'DCSMM · Natura 2000 en mer',
pitch: "Couverture acoustique et multi-paramètres continue à l'échelle d'un parc entier, pas d'un point.",
},
{
cat: 'Cat. I',
title: 'Ports & VNF',
sub: 'hors HAROPA',
icon: 'port',
pain: "Obligations <strong class=\"text-foam-50\">ICPE</strong>, microplastiques alarmants Seine/Rhône/Loire et bruit anthropique impactant la faune — à documenter.",
painSource: '',
euTag: 'ICPE · DCSMM D11 (ports inclus) · Plastics Strategy',
pitch: "Tableau de bord permanent pour les audits DREAL, sans génie civil.",
},
{
cat: 'Cat. I.1',
title: 'Cerema',
sub: 'prescripteur technique',
icon: 'compass',
pain: "Expertise technique sollicitée sans <strong class=\"text-foam-50\">capacité de mesure dense</strong> à disposition.",
painSource: '',
euTag: 'Transposition technique DCE / DCSMM en France',
pitch: "Outil terrain que le Cerema peut recommander aux collectivités en déploiement pilote.",
pain: "Un hydrophone calibré de référence se chiffre en <strong class=\"text-foam-50\">milliers d'euros par point</strong>. Couvrir un parc naturel marin, une baie, un bassin versant entier reste hors budget pour la plupart des gestionnaires.",
painSource: 'Marché instrumentation scientifique 2024',
tag: 'Natura 2000 en mer · plaidoyer',
benefit: "Cartographier une zone entière pour le prix d'une seule bouée classique.",
},
];
---
@@ -106,51 +55,58 @@ const segments = [
<div class="container-narrow">
<div class="section-title-block">
<span class="eyebrow">Pourquoi</span>
<h2 class="h-section mt-4">Dix marchés, dix douleurs chiffrées, un même socle technique.</h2>
<h2 class="h-section mt-4">
Le littoral est cadré par l'Europe, mesuré par échantillonnage.
</h2>
<p class="lead mt-6">
Le monitoring côtier est traversé par des enjeux très différents selon l'acteur :
conformité réglementaire, recherche, exploitation, prévention, plaidoyer, expertise.
NowYouSea adresse ces dix verticales avec une seule plateforme, en s'appuyant sur
les cadres européens qui financent leur densification.
Les obligations européennes — DCE, DCSMM, Eaux de Baignade, Plastics Strategy —
imposent une surveillance continue à des échelles que les instruments
de référence actuels ne permettent pas d'atteindre. Il manque un outil
<em>opérationnel</em>, capable de passer du point isolé à la zone entière, sans
exploser le budget.
</p>
</div>
<div class="grid gap-5 md:grid-cols-2">
{segments.map((s) => (
{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 opacity-60 group-hover:opacity-100"></div>
<div class="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full bg-tide-500/10 blur-2xl opacity-60 transition-opacity 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">
{s.icon === 'drop' && (
{issue.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="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>
)}
{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>
)}
{s.icon === 'anchor' && (
{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">
<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"/>
<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>
)}
{s.icon === 'shell' && (
{issue.icon === 'wallet' && (
<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="M3 7a2 2 0 0 1 2-2h14v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>
<path d="M3 10h18"/>
<circle cx="16" cy="14" r="1.2" fill="currentColor"/>
</svg>
)}
{issue.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' && (
{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.6" aria-hidden="true">
<circle cx="6" cy="6" r="2"/>
<circle cx="18" cy="6" r="2"/>
@@ -160,70 +116,23 @@ const segments = [
<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>
)}
{s.icon === 'blueprint' && (
<svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="4" width="18" height="16" rx="2"/>
<path d="M3 9h18M9 4v16"/>
<path d="M13 13h5M13 16h3"/>
</svg>
)}
{s.icon === 'advocacy' && (
<svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 11l10-7v16L3 13z"/>
<path d="M13 9h3a3 3 0 0 1 0 6h-3"/>
<path d="M8 13v4a2 2 0 0 0 4 0v-3"/>
</svg>
)}
{s.icon === 'leaf' && (
<svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 20c0-9 7-15 15-15 0 9-6 15-15 15z"/>
<path d="M5 20c4-4 8-6 12-8"/>
</svg>
)}
{s.icon === 'port' && (
<svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 18h18"/>
<path d="M6 18V9l6-4 6 4v9"/>
<path d="M10 18v-5h4v5"/>
<path d="M2 21h20"/>
</svg>
)}
{s.icon === 'compass' && (
<svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="9"/>
<path d="M15.5 8.5L13 13l-4.5 2.5L11 11z"/>
</svg>
)}
</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>
<span class="text-xs font-medium uppercase tracking-widest text-lagoon-400/80">{issue.tag}</span>
</div>
<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>
<h3 class="mt-5 font-display text-xl font-semibold text-foam-50">{issue.title}</h3>
<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>
<p class="mt-3 text-sm leading-relaxed text-foam-100/80" set:html={issue.pain}></p>
{issue.painSource && (
<p class="mt-1.5 text-[11px] italic text-foam-100/45">source : {issue.painSource}</p>
)}
<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>
<div class="mt-5 flex items-start gap-2.5 rounded-lg border border-tide-400/20 bg-tide-500/5 px-4 py-3 text-sm leading-relaxed text-foam-100/90">
<svg viewBox="0 0 24 24" class="mt-0.5 h-4 w-4 shrink-0 text-tide-300" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14M13 5l7 7-7 7"/>
</svg>
<span>{issue.benefit}</span>
</div>
</article>
))}
</div>
@@ -238,9 +147,9 @@ const segments = [
<span class="text-lagoon-400">Il en faudrait 300.</span>
</p>
<p class="mt-3 text-sm text-foam-100/70 max-w-xl">
Un seul socle technique, dix verticales mobilisables — chacune avec son canal
de financement européen. NowYouSea rend la densification réaliste, au prix
accessible à un port de plaisance.
NowYouSea rend cette densification réaliste : une plateforme unique, des
capteurs adaptables au contexte, un coût unitaire compatible avec les budgets
réels des gestionnaires.
</p>
</div>
<div class="flex items-center gap-6 md:flex-col md:items-end md:gap-2">