diff --git a/.env.example b/.env.example
index 0ea576a..cf23e35 100644
--- a/.env.example
+++ b/.env.example
@@ -73,3 +73,17 @@ GAP_CRITICAL_HOURS=24
 
 # Default lookback window for analyses (days)
 LOOKBACK_DAYS=90
+
+# ============================================================
+# Auto-detected incident pages (P3 — Viralité)
+# ============================================================
+# Base URL of the Next.js front-end (the Python pipeline POSTs here
+# to revalidate /incident/<slug> ISR pages):
+NEXTJS_BASE_URL=http://localhost:3000
+# Shared secret between FastAPI emitter and Next.js /api/revalidate.
+# Generate with: python -c "import secrets;print(secrets.token_urlsafe(32))"
+KRILL_REVALIDATE_SECRET=
+# Internal secret for the pipeline → FastAPI POST /api/internal/incident
+# (X-Internal header). Different from the revalidate secret so that an
+# external client compromising the front-end cannot inject incidents.
+KRILL_INTERNAL_SECRET=
diff --git a/.gitignore b/.gitignore
index c00b734..e15e357 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,6 @@ web/.vercel
 web/.turbo
 web/next-env.d.ts
 web/*.tsbuildinfo
+
+# Superpowers brainstorming working directory (mockups, server state)
+.superpowers/
diff --git a/README.md b/README.md
index a6a8da4..649496d 100644
--- a/README.md
+++ b/README.md
@@ -13,10 +13,15 @@
 
 - **Multi-mission vessel tracker** — four CPWF campaigns share the same pipeline: krill (CCAMLR-licensed Antarctic trawlers), whaling (Kangei Maru + Icelandic Hvalur), Galápagos (Chinese DWF squid jiggers), West Africa (Chinese + Russian super-trawlers in Senegal/Mauritania/Guinea EEZs). Vessels are grouped by mission on the catalogue page with mission-coloured badges.
 - **Live AIS triage dashboard** — a Next.js investigator UI at `web/` that aggregates fleet positions, zone transitions, and severity alerts on a per-vessel basis. Home page surfaces CRITICAL and SUSPICIOUS vessels immediately; vessel detail shows a full-bleed MapLibre track with a configurable time window (24 h → 90 d).
-- **Live alerting** — Discord and Slack webhooks fire on CRITICAL events (zone entry into MPA / IWC sanctuary / EEZ, severity escalation). Rich embeds carry a clickable deep link straight to the vessel detail page. Per-mission webhook routing supported (whaling alerts → separate channel from krill).
+- **Bilingual campaign hubs** — `/[locale]/campagnes/<slug>` for each of the four CPWF campaigns: editorial intro, legal frame, fleet roster, season calendar, and source list. Hreflang fr↔en across the whole site.
+- **Auto-generated incident pages** — every protected-zone entry by a tracked vessel triggers an ISR page at `/[locale]/incident/<slug>` with severity chip, headline, 7-day map trail centred on the event, campaign context, and sources. Detection → live page in under 5 s via a FastAPI → Next.js revalidate webhook.
+- **Dynamic OG images** — `/api/og/incident/<slug>`, `/api/og/vessel/<slug>`, `/api/og/campaign/<slug>` render 1200×630 PNGs at the edge for Twitter/Bluesky/Mastodon/LinkedIn share previews.
+- **Public contribution form** — `/[locale]/contribuer` accepts vessel sightings, transhipment tips, AIS anomalies, and free-form testimony, with optional photo upload (5 MB max). Discord webhook notifies admins of new submissions without leaking submitter PII.
+- **Weekly digest route** — `/[locale]/digest` exposes the existing transhipment-review HTML reports under stable Next.js URLs, with optional ISO-week deep links (`/digest/2026-W17`).
+- **Live alerting** — Discord and Slack webhooks fire on CRITICAL events (zone entry into MPA / IWC sanctuary / EEZ, severity escalation). Rich embeds carry a clickable deep link straight to the vessel detail page **and the auto-generated `/incident/<slug>`** when applicable. Per-mission webhook routing supported (whaling alerts → separate channel from krill).
 - **Multi-signal transhipment scorer** — for every GFW encounter event in a rolling window, six weighted signals (unauthorized reefer, AIS gap, IUU/sanctions hit, spatial anomaly, FOC flag, long duration) are evaluated and summed into a 0.00–0.90 score. Calibration frozen at **v0.4.2** — see [`calibration.md`](calibration.md) for the weight justifications and validation cases.
 - **Weekly HTML review report** — a self-contained three-section report (§1 CRITICAL, §2 FLAGGED, §3 transparency) that can be forwarded as an email attachment. Generated automatically every Monday by GitHub Actions and (in production) by `scripts/run_weekly_report.sh` on the deployment VM.
-- **FastAPI backend with DuckDB persistence** — positions, zone-transition events, and vessel status land in a local DuckDB file. No external database required. A background SSE stream (`/api/stream`) pushes live updates to connected UIs.
+- **FastAPI backend with DuckDB persistence** — positions, zone-transition events, vessel status, auto-incidents, and contributions land in a single DuckDB file. No external database required. A background SSE stream (`/api/stream`) pushes live updates to connected UIs.
 
 ---
 
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte-design.md b/docs/superpowers/specs/2026-04-28-krill-refonte-design.md
new file mode 100644
index 0000000..7e2a543
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte-design.md
@@ -0,0 +1,226 @@
+# krill-watch · refonte unifiée — design spec
+
+> **Status** : draft validé · brainstorming 2026-04-28
+> **Owner** : @breaching
+> **Spec ID** : 2026-04-28-krill-refonte
+> **Approbation** : pending user review of this document
+> **Companion artefacts** : `2026-04-28-krill-refonte/` (orchestration + phase plans + tasks)
+
+---
+
+## 1. Contexte & motivation
+
+`krill-watch` exploite aujourd'hui **deux frontends parallèles** : un tracker dense (HTML/JS vanilla servi par FastAPI sur `127.0.0.1:8000`) et un site Next.js bilingue (`localhost:3000`). Il n'y a aucune synergie entre les deux : design systems divergents, navigation séparée, le tracker n'est pas mobile-friendly, les pages Next.js ne tirent pas parti des données live.
+
+L'utilisateur veut une refonte qui :
+1. **Unifie** les deux apps en un seul produit cohérent (Next.js).
+2. **Ajoute un historique satellite** des bateaux ("comme Google Maps") : timeline scrubber + trail cumulatif coloré.
+3. **Sert simultanément** quatre audiences — activistes Sea Shepherd / CPWF (primaire), journalistes d'investigation, lanceurs d'alerte, et public général curieux.
+
+Décisions prises pendant le brainstorming :
+- **Persona primaire** : activiste CPWF — toute friction UX se résout en sa faveur (mobile-first, partage, urgence visuelle, CTA "soutenir / signaler").
+- **Architecture** : app Next.js unifiée, le tracker legacy `frontend/app.js` est réécrit en composants React puis supprimé.
+- **Historique satellite** : timeline scrubber + trail cumulatif coloré (sévérité = couleur). Pas d'imagerie Sentinel-2 réelle au MVP (gardée pour phase ultérieure).
+- **Home** : hero hybride — phrase-choc tirée du live + 3 stats sévérité + 2 CTA + mini-map preview.
+- **Atomes partageables** : pages incident, dossiers navires, hubs de campagne (les trois ont URL stable + OG image dédiée). Digest hebdo exposé en route depuis le HTML existant.
+- **Scope** : refonte complète activiste, 5-7 semaines, 3 phases livrables (chacune utile en standalone).
+
+---
+
+## 2. Vision & promesse
+
+> *Un seul tracker open-source qui rend visibles les flottes industrielles en zones protégées — vivant pour les activistes, citable pour les journalistes, accessible pour qui veut comprendre.*
+
+**Ton** : sobre + précis. L'activisme transparaît par le choix du sujet (et la sévérité visuelle des incidents), jamais par la rhétorique. Pas de "pillage", "scandale", "honte" — la donnée parle.
+
+**Bilingue FR/EN** maintenu en parité totale. Pas d'autres langues au MVP.
+
+**Mobile-first** sur les surfaces critiques (`/`, `/live`, `/incident/[slug]`). Le cockpit `/live` a un layout mobile *redessiné* (BottomSheet pour les filtres, drawer pour le navire sélectionné), pas un shrink desktop.
+
+---
+
+## 3. Architecture cible
+
+### 3.1 Couches
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  Next.js 15 App Router · port 3000 · TypeScript / React 19  │
+│  Tailwind 4 · MapLibre 5 · flag-icons · @vercel/og          │
+└──────────────┬──────────────────────────────────────────────┘
+               │  REST + SSE
+┌──────────────┴──────────────────────────────────────────────┐
+│  FastAPI · port 8000 · Python 3.11+                          │
+│  inchangé sauf : webhook revalidate + endpoint trail-historique
+│  + endpoint contributions                                    │
+└──────────────┬──────────────────────────────────────────────┘
+               │
+┌──────────────┴──────────────────────────────────────────────┐
+│  DuckDB (data/krill_watch.duckdb) · GeoJSON config           │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 3.2 Routes Next.js cibles
+
+| Route | Type | Phase | Description |
+|---|---|---|---|
+| `/[locale]` | static + ISR | 1 | Home (hero hybride, alerts strip, missions, méthode) |
+| `/[locale]/live` | client | 1 | Tracker absorbé (cockpit) |
+| `/[locale]/live/v/[slug]` | client | 1 | Deep-link vers un navire dans le cockpit |
+| `/[locale]/vessels` | static | 1 | Liste flotte (existant — adapté DS) |
+| `/[locale]/vessels/[slug]` | ISR | 2 | Dossier navire + trail + scrubber |
+| `/[locale]/campagnes/[slug]` | ISR | 2 | 4 hubs de campagne |
+| `/[locale]/incident/[slug]` | ISR | 3 | Pages incident auto-générées |
+| `/[locale]/digest/[isoweek]` | static | 3 | Digest hebdo depuis HTML existant |
+| `/[locale]/about` | static | — | Existe déjà |
+| `/[locale]/contribuer` | client | 3 | Formulaire contribution |
+| `/api/og/[type]/[slug]` | edge | 3 | OG images dynamiques |
+| `/api/revalidate` | route | 3 | Webhook FastAPI → revalidate |
+| `/api/contribute` | route | 3 | Endpoint formulaire contribution |
+
+### 3.3 Composants critiques mutualisés
+
+- **`<KrillMap>`** — composant map unique remplaçant `FleetMap` actuel, prend `mode` (`live | vessel | incident | campaign`) et configure layers/sources en conséquence. Déjà partiellement présent.
+- **`<VesselTrail>`** — layer GeoJSON line avec gradient de couleur selon sévérité. Phase 2.
+- **`<TimelineScrubber>`** — slider temporel avec keyboard a11y. Phase 2.
+- **`<LiveAlertsStrip>`** — strip d'alertes critiques, réutilisable home + campaign hub.
+- **`<ShareButton>`** — copy-link + intents Twitter/Bluesky/Mastodon + download OG image. Phase 3.
+- **`<SupportCTA>`** — bouton "Soutenir CPWF" cohérent. Phase 3.
+- **`<Flag>`, `<SeverityBadge>`, `<MissionBadge>`, `<Acronym>`** — déjà existants, restent en place.
+
+### 3.4 Data layer
+
+- `web/lib/krill-watch.ts` (existe) — wrap REST + SSE. Étendu en phase 2 avec `getVesselTrail(slug, days)`.
+- Génération statique pour pages stables (about, vessels, vessels/[slug] ISR, campagnes/[slug] ISR).
+- `/live` et `/incident/[slug]` server-rendered (pour OG images correctes).
+
+---
+
+## 4. Surfaces UX
+
+### 4.1 Home (`/`)
+
+**Above-the-fold** (hero hybride) :
+- Tag mono : `● MAINTENANT · CCAMLR 48.1` (zone la plus chaude détectée)
+- Headline : `11 chalutiers industriels en zone protégée antarctique.` (généré depuis l'API : nombre + zone + qualifieur)
+- 3 stats par sévérité (CRITIQUE / SUSPECT / SURVEILLÉ)
+- 2 CTA : "Voir la carte live →" (primary, krill orange) et "Comprendre la cause" (ghost)
+- Mini-map preview à droite (180×120 desktop) avec dots clignotants
+
+**Below-the-fold** : LiveAlertsStrip (3 cartes alerte) → Grille 4 missions (cards cliquables vers `/campagnes/[slug]`) → Méthode 3 étapes → Footer.
+
+### 4.2 Cockpit (`/live`)
+
+**Desktop** : layout 3 colonnes — sidebar gauche (filtres + liste fleet collabsible) · map plein viewport · drawer droit (détails navire sélectionné, fermable). Toggle DARK / SATELLITE en flotte top-left de la map.
+
+**Mobile** : map plein écran. BottomSheet remontante pour filtres + liste. Drawer plein écran pour détails. FAB pour toggle satellite.
+
+URL state : `?severity=CRITICAL&zone=48.1&v=antarctic-endurance` (deep-linkable, copiable).
+
+### 4.3 Dossier navire (`/vessels/[slug]`)
+
+**Header** : drapeau (Flag SVG) + nom + sévérité badge + flag CPWF si friendly + IMO/MMSI mono.
+
+**Section map historique** : `<KrillMap mode="vessel" historicalRange="30d">` avec `<VesselTrail>` rendu en gradient color (vert → orange → rouge selon sévérité instantanée). En bas : `<TimelineScrubber>` avec marqueurs (entrées/sorties zones, AIS gaps).
+
+**Sections suivantes** : Tableau identité · Log événements · Incidents documentés (liens vers `/incident/[slug]` en phase 3) · Sources · `<ShareButton>` + Embed code.
+
+### 4.4 Page incident (`/incident/[slug]`)
+
+**Above-the-fold** : map zoomée sur la violation + headline auto-générée (`{vessel} entered {zone} at {ts}`) + score transhipment (si applicable) + sources (3-5 liens externes).
+
+**Below-the-fold** : contexte campagne (hub link) · trail du navire 7 jours autour de l'incident · `<SupportCTA>` · `<ShareButton>`.
+
+URL slug : `<YYYY-MM-DD>-<vessel-slug>-<event-type-slugified>-<zone-slug>` (ex: `2026-04-28-antarctic-endurance-zone-entered-48-1`). Idempotent — si réémis, met à jour la même page. Voir [P3-T01](./2026-04-28-krill-refonte/phase-3-viralite/P3-T01-revalidate-webhook.md) pour la fonction `makeIncidentSlug` partagée TS/Python.
+
+### 4.5 Hub campagne (`/campagnes/[slug]`)
+
+**Hero éditorial** : image satellite teaser (statique en MVP, Sentinel-2 plus tard) + 3 chiffres-clés + CTA Soutenir.
+
+**Sections** : Cadre légal & enjeu · Liste flotte filtrée par mission · Incidents récents (live) · Calendrier saison · Sources documentaires.
+
+Contenu éditorial : MD bilingue par mission (`web/data/campaigns/<slug>.{fr,en}.md`).
+
+---
+
+## 5. Plan de phasage
+
+3 phases livrables. Chacune fournit de la valeur en standalone (`/live` à parité après phase 1, dossiers enrichis après phase 2, viralité après phase 3).
+
+| Phase | Durée | Tâches | Livrable principal |
+|---|---|---|---|
+| **1 · Fondation** | 10 jours | 8 tâches | `/live` à parité fonctionnelle dans Next.js, mobile-friendly. Hero hybride home. Legacy supprimé. |
+| **2 · Historique & contenu** | 10 jours | 8 tâches | Trail + scrubber sur dossiers navires. 4 hubs de campagne. Glossaire enrichi. |
+| **3 · Viralité & contribution** | 12 jours | 8 tâches | Pages incident auto-générées + OG dynamiques. Boutons partage. Formulaire contribution. Digest en route. |
+
+Détail dans `2026-04-28-krill-refonte/phase-N-*/README.md`.
+
+---
+
+## 6. Risques & questions ouvertes
+
+### Risques techniques
+
+- **MapLibre + React StrictMode** : double-init en dev. Pattern ref + cleanup déjà en place dans `FleetMap.tsx` à conserver.
+- **SSE dans Next.js App Router** : pas de support natif streaming SSE dans les Route Handlers pour l'instant. Solution : EventSource côté client (`'use client'`), fallback polling 30s.
+- **OG images dynamiques** : `@vercel/og` (Satori) prend du SVG / éléments React simples. Une carte raster MapLibre ne s'y intègre pas. Solution prévue : pré-render côté serveur Python qui retourne PNG basique (tile statique + dot vessel + headline), ou mock SVG avec `<VesselTrail>` simplifié dans Satori.
+- **Performance trail 30j × 23 navires** : 50k-100k points GeoJSON potentiels. Mitigation : downsample côté API (1 point / 15 min suffit visuellement), cluster côté client si > 5k.
+- **Webhook revalidate FastAPI → Next.js** : nécessite un secret partagé + une URL publique. En dev local on peut utiliser ngrok ; en prod ça dépend de l'hébergement.
+
+### Questions ouvertes (à trancher pendant l'exécution)
+
+- **Hébergement Next.js** : Vercel (gratuit, OG natif) ou auto-hébergé (Docker compose avec FastAPI) ? *Décision recommandée : Vercel pour simplicité.*
+- **Newsletter** : intégrée (Buttondown/Substack embed) ou simple lien externe ? *Décision recommandée : externe pour MVP.*
+- **Storage formulaire contribution** : DuckDB (réutilise infra existante) ou GitHub Issues (auditabilité publique) ? *Décision recommandée : DuckDB + admin export.*
+- **CTA Soutenir CPWF** : redirige vers `paulwatsonfoundation.org/donate` directement ou page intermédiaire krill-watch ? *Décision recommandée : redirige direct, ne pas créer un funnel.*
+
+---
+
+## 7. Critères de succès globaux
+
+À la fin des 3 phases, le produit livré doit valider :
+
+1. **Synergie** : un seul header / footer / DS / locale switcher pour TOUT le produit.
+2. **Mobile** : un activiste sur smartphone peut consulter `/live`, sélectionner un navire, et voir un incident détaillé sans frustration.
+3. **Viralité** : partager une URL `/incident/<slug>` sur Twitter génère un preview avec OG image lisible (carte + headline + drapeau).
+4. **Citabilité** : un journaliste peut citer `/vessels/<slug>` comme référence stable pour un article ; la page existait à la même URL il y a 6 mois.
+5. **Pédagogie** : un random qui arrive sur `/` comprend en 30 secondes ce qu'il regarde et où il peut agir.
+6. **Accessibilité** : Lighthouse a11y score ≥ 90 sur toutes les pages critiques.
+7. **Performance** : Lighthouse perf ≥ 80 sur mobile, LCP < 2.5s, CLS < 0.1.
+
+---
+
+## 8. Hors scope (explicite)
+
+- Imagerie Sentinel-2 réelle alignée AIS (gardée pour phase ultérieure post-MVP).
+- Flux lanceur d'alerte chiffré bout-en-bout / Tor-friendly (gardé pour phase ultérieure).
+- API publique versionnée avec auth journaliste.
+- Widget embeddable `<iframe>` pour intégration presse.
+- i18n élargi (ES, PT, JP).
+- Refonte du backend Python (FastAPI/DuckDB inchangé sauf 2 endpoints + 1 webhook).
+- Ajouts de nouvelles missions au-delà des 4 actuelles.
+- Tests visuels Playwright / Storybook (pas dans les conventions du projet).
+
+---
+
+## 9. Comment lire les artefacts associés
+
+```
+docs/superpowers/specs/
+├── 2026-04-28-krill-refonte-design.md     ← ce fichier
+└── 2026-04-28-krill-refonte/
+    ├── README.md                           ← orchestration globale, dependency graph
+    ├── CONVENTIONS.md                      ← règles de coexistence multi-agent
+    ├── phase-1-fondation/
+    │   ├── README.md                       ← objectifs phase 1, ordre d'exécution, vagues
+    │   ├── P1-T01-design-system.md
+    │   ├── P1-T02-tracker-map-migration.md
+    │   ├── ... (8 tâches)
+    │   └── P1-T08-legacy-cleanup.md
+    ├── phase-2-historique/
+    │   └── ... (8 tâches)
+    └── phase-3-viralite/
+        └── ... (8 tâches)
+```
+
+Chaque tâche porte un frontmatter explicite (`files_owned`, `depends_on`, `parallelizable_with`) qui permet à plusieurs instances de Claude Code de travailler en simultané sans collision. Voir `CONVENTIONS.md` pour le protocole.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/CONVENTIONS.md b/docs/superpowers/specs/2026-04-28-krill-refonte/CONVENTIONS.md
new file mode 100644
index 0000000..79bfc58
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/CONVENTIONS.md
@@ -0,0 +1,89 @@
+# Conventions multi-agents
+
+Règles à suivre pour exécuter les tâches de cette refonte **en parallèle sur plusieurs instances de Claude Code** sans collision.
+
+## 1. Format de frontmatter (obligatoire sur chaque tâche)
+
+```yaml
+---
+id: P1-T01                         # phase-tâche, unique
+phase: 1                           # 1 | 2 | 3
+title: Design system tokens & primitives UI
+status: pending                    # pending | in_progress | completed | blocked
+owner: ""                          # nom/handle de l'instance qui l'a prise (vide si pending)
+depends_on: []                     # liste d'IDs qui doivent être completed avant
+parallelizable_with: [P1-T03]      # IDs explicitement OK en simultané
+files_owned:                       # CHEMINS EXCLUSIFS — seule cette tâche écrit dedans
+  - web/components/ui/Button.tsx
+  - web/lib/tokens.ts
+files_read:                        # lecture seule — overlap autorisé
+  - web/app/globals.css
+  - web/tailwind.config.ts
+estimated_hours: 6
+wave: 0                            # 0=séquentiel start, 1+=parallèle
+---
+```
+
+## 2. Workflow d'une instance Claude Code prenant une tâche
+
+1. **Choisir** : ouvrir le `README.md` de la phase courante, repérer une tâche dans la **vague active** dont `status: pending` et dont toutes les `depends_on` sont `completed`.
+2. **Verrouiller** : éditer le frontmatter de la tâche choisie pour passer `status: in_progress` + remplir `owner`. Commit immédiat (`chore(plan): pick P1-TXX`). Si autre instance a déjà verrouillé → choisir une autre tâche.
+3. **Travailler** : ne modifier QUE les `files_owned`. Lire `files_read` librement. Si un fichier doit être touché qui n'est pas listé → STOP, ouvrir une discussion (ne pas étendre la portée silencieusement).
+4. **Vérifier** : exécuter la section `## Verification` du fichier de tâche (typecheck, build, tests si pertinents). Toutes les commandes doivent passer.
+5. **Livrer** : commit final descriptif, frontmatter `status: completed`, `owner` reste rempli pour traçabilité.
+
+## 3. Règle d'or : un fichier = un propriétaire
+
+Si deux tâches doivent toucher le même fichier, c'est un **bug de planification** — il faut splitter ou sérialiser. Ouvrir une PR contre le plan, pas contre le code.
+
+## 4. Communication inter-tâches
+
+- **Types partagés** : exposés depuis un fichier détenu par la tâche fondation de la vague 0 (typiquement `web/lib/types.ts` ou les modules existants).
+- **Composants partagés** : la tâche P1-T01 (DS) en publie. Les autres tâches consomment via import — elles ne *modifient pas* le DS, elles le *consomment*.
+- **Si un import manque** : écrire un mock typesafe local et noter dans une section `## Cross-task notes` du fichier de tâche, à fixer plus tard par le propriétaire du fichier source.
+
+## 5. Conflits Git inévitables
+
+Certains fichiers transverses ont besoin d'être modifiés par plusieurs tâches (ex: `web/i18n/locales/fr.json`). Pour ceux-là :
+
+- Lister explicitement le fichier dans `files_owned` de **une seule** tâche désignée "agréga­teur i18n" qui consolide les modifs.
+- Les autres tâches qui ont besoin d'ajouter des clés écrivent dans `web/i18n/pending/<task-id>.json` (un fichier par tâche, jamais en conflit), l'agrégateur merge à la fin.
+
+Pattern à appliquer pour : i18n, `package.json` (deps), `globals.css` (tokens partagés).
+
+## 6. Statuts blocants
+
+Si une tâche est `status: blocked`, mettre la raison en haut du fichier (`> BLOCKED: <raison>`). Un autre agent peut alors la débloquer ou re-prioritiser.
+
+## 7. Tests d'intégration entre tâches
+
+À la fin de chaque vague, une **tâche checkpoint** (généralement la dernière de la vague) exécute :
+- Build production (`npm --prefix web run build`)
+- Typecheck (`npm --prefix web run typecheck`)
+- Lighthouse smoke (mobile + desktop) sur les pages clés
+
+Si checkpoint échoue → la vague est `blocked`, on identifie la tâche fautive, on corrige, on relance.
+
+## 8. Convention de commit
+
+```
+feat(P1-T03): hero hybride above-the-fold component
+fix(P1-T03): adjust mini-map preview clipping
+chore(plan): mark P1-T03 completed
+```
+
+Préfixes par tâche (`P1-T03`) → permet de filtrer le log par tâche / par phase. Squash en fin de phase si désiré.
+
+## 9. Branches
+
+Stratégie suggérée :
+- `main` reste stable.
+- Une branche par phase : `refonte/phase-1`, `refonte/phase-2`, `refonte/phase-3`.
+- Chaque tâche commit directement sur la branche de phase (pas de feature branches par tâche — l'isolation est déjà au niveau fichier).
+- Merge phase → main quand la **tâche checkpoint** de la dernière vague est completed.
+
+## 10. Reset / rollback
+
+Chaque tâche doit pouvoir être **annulée** sans casser les autres :
+- Si on rollback une tâche, on supprime les fichiers qu'elle a créés et on revert ses modifs sur les fichiers existants.
+- Les `files_owned` rendent ce calcul trivial : `git restore <files_owned> && rm <new files>`.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/MANUAL-TESTS.md b/docs/superpowers/specs/2026-04-28-krill-refonte/MANUAL-TESTS.md
new file mode 100644
index 0000000..3d184b2
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/MANUAL-TESTS.md
@@ -0,0 +1,334 @@
+# Tests manuels — krill-watch refonte
+
+> Checklist exhaustive à passer avant push `origin/main` puis déploiement.
+> **Setup** : API sur `127.0.0.1:8000`, Web sur `localhost:3000`. Les deux up et chargés (vérifié 2026-04-29).
+> **Estimation totale** : 60-75 min en passe complète. Si tu manques de temps, fais au minimum les sections marquées 🔴 critical.
+
+---
+
+## 0. Préflight (2 min)
+
+- [ ] `git log --oneline -3` → voir `f26cbe6`, `bc4b7c1`, `2350412`
+- [ ] `git status` → working tree clean
+- [ ] `curl -s http://127.0.0.1:8000/api/health` → `{"status":"ok",...}`
+- [ ] `curl -s -o /dev/null -w '%{http_code}' http://localhost:3000/en` → `200`
+- [ ] Ouvre Chrome (1440×900 par défaut), navigue à `http://localhost:3000/fr`
+
+---
+
+## 🔴 1. Quick smoke — chaque page rend (5 min)
+
+Ouvre chacune dans un onglet, vérifie qu'il n'y a **pas de crash / pas de skeleton qui reste** :
+
+- [ ] `/fr` — home FR avec hero hybride
+- [ ] `/en` — home EN parité
+- [ ] `/fr/live` — cockpit avec sidebar gauche + map + drawer fermé
+- [ ] `/fr/vessels` — liste flotte
+- [ ] `/fr/vessels/antarctic_endurance` — dossier navire avec block "Historique 30 jours"
+- [ ] `/fr/campagnes` — index 4 cards
+- [ ] `/fr/campagnes/krill` — hub Krill (hero + sections)
+- [ ] `/fr/campagnes/whaling` — hub Whaling
+- [ ] `/fr/campagnes/galapagos` — hub Galápagos
+- [ ] `/fr/campagnes/west-africa` — hub West Africa
+- [ ] `/fr/contribuer` — formulaire contribution
+- [ ] `/fr/digest` — index des digests hebdo
+- [ ] `/fr/about` — page explicative
+
+Si une seule de ces pages échoue → STOP et repère le bug avant de continuer.
+
+---
+
+## 🔴 2. Lentille A — Activiste Sea Shepherd / CPWF (15 min)
+
+**Persona primaire**. Tu arrives sur le site via un partage Twitter, tu veux comprendre ce qui se passe en zone protégée *maintenant*, partager une alerte, et soutenir CPWF.
+
+### 2.1 Home `/fr`
+
+- [ ] Hero affiche un **headline auto-généré** (pas un texte statique). Ex : "3 chalutiers industriels en zone protégée antarctique"
+- [ ] Tag mono `● MAINTENANT · CCAMLR <zone>` cohérent avec la zone la plus chaude
+- [ ] 3 stats sévérité visibles (`X CRITIQUES · Y SUSPECTES · Z SURVEILLÉES`) — chiffres > 0
+- [ ] Click sur **"Voir la carte live →"** → navigue à `/fr/live`
+- [ ] Click sur **"X CRITIQUES"** → `/fr/live?bucket=at-risk` (URL filtrée)
+- [ ] Click sur la **mini-map preview** (à droite du hero) → navigue à `/fr/live`
+- [ ] **LiveAlertsStrip** plus bas montre les 3 alertes les plus chaudes, avec drapeaux SVG
+- [ ] **MissionStrip** : 4 cards cliquables vers `/fr/campagnes/<slug>`
+
+### 2.2 Cockpit `/fr/live` (desktop)
+
+- [ ] Map MapLibre charge (DARK CARTO par défaut)
+- [ ] Top-right : zoom +/- + toggle DARK/SATELLITE (icône)
+- [ ] Sidebar gauche : Sévérité legend (6 lignes) + Couches checkboxes + SearchBar + chips (Tous/À risque/Live/En MPA) + liste fleet
+- [ ] Toggle **DARK → SATELLITE** : tiles ESRI World Imagery chargent (continent visible)
+- [ ] Reload page → toggle persiste (localStorage)
+- [ ] Click un navire dans la sidebar → drawer s'ouvre à droite (420px), URL devient `?v=<slug>`
+- [ ] Drawer header : drapeau SVG + nom + sévérité badge + close
+- [ ] Drawer onglets : **Identité / Activité / Alertes / Incidents / Fermetures / Journal** (6 onglets, switchables)
+- [ ] Click backdrop ou ESC → drawer ferme + URL nettoyée (`?v=` disparaît)
+- [ ] SearchBar : tape "antarctic" → liste filtrée (4-5 navires)
+- [ ] Chip "À risque" → liste réduite, URL `?bucket=at-risk`
+- [ ] Reload après filtre → état restauré depuis URL
+- [ ] Toggle "TRACES 24 H" → traces apparaissent sur map (si data dispo)
+
+### 2.3 Bouton partage
+
+- [ ] Sur `/fr/incident/<slug>` (cherche un incident existant via `/api/incidents`) → bouton **Partager** dans le header
+- [ ] Click → menu avec icônes Twitter/Bluesky/Mastodon/LinkedIn/Copy/Download
+- [ ] Click "Copy link" → URL copiée + toast confirmation
+- [ ] Click "Twitter" → ouvre `twitter.com/intent/tweet?text=...&url=...` dans nouvel onglet
+- [ ] Click "Bluesky" → ouvre `bsky.app/intent/compose?...`
+- [ ] Click "Mastodon" → prompt instance (ex: `mastodon.social`), persiste en localStorage
+- [ ] Click "Download image" → fichier `<slug>.png` téléchargé (1200×630)
+
+### 2.4 SupportCTA
+
+- [ ] Sur la home (en bas, après méthode) → banner "Soutenir CPWF" cliquable → `paulwatsonfoundation.org/donate?utm_source=krill-watch&utm_medium=banner`
+- [ ] Sur `/fr/campagnes/krill` (au-dessus du footer) → idem
+- [ ] Sur `/fr/incident/<slug>` (en bas) → idem
+- [ ] Sur `/fr/vessels/<slug>` (en bas, minimal) → lien texte "Soutenir CPWF →"
+- [ ] Footer global : mention "Soutenir CPWF" en lien minimal
+
+---
+
+## 🔴 3. Lentille B — Random sans contexte (10 min)
+
+**Persona secondaire**. Tu débarques via une recherche Google "krill antarctique pêche industrielle", tu veux comprendre en 2 minutes.
+
+- [ ] Sur `/fr` : en 30 secondes, est-ce que tu comprends **qui** suit **quoi** et **pourquoi** ?
+- [ ] Hero : phrase choc compréhensible sans jargon
+- [ ] Click "Comprendre la méthode ↓" → scroll vers section méthode (3 étapes)
+- [ ] Section méthode : Collecter / Détecter / Publier — claire ?
+- [ ] Click sur acronyme dotted-underline (ex: "MPA", "AIS", "OSINT") → popover avec définition
+- [ ] **Mobile** : tap sur un acronyme ouvre la popover, tap extérieur ferme
+- [ ] Footer : liens "À propos", "Code source GitHub", "Sources" (CCAMLR, GFW, AISStream, Equasis)
+- [ ] `/fr/about` : page complète "Le projet en détail" — narratif accessible
+- [ ] `/fr/campagnes` : 4 cards lisibles, chaque mission = un objet d'enquête séparé
+- [ ] `/fr/campagnes/krill` : section "Pourquoi krill-watch suit cette campagne" comprehensible
+- [ ] Sources externes (CCAMLR.org, ASOC.org, etc.) : ouvrent dans nouvel onglet
+
+---
+
+## 🔴 4. Lentille C — Journaliste investigateur (10 min)
+
+**Persona secondaire**. Tu écris un papier sur Aker BioMarine. Tu veux des sources solides et des permaliens citables.
+
+### 4.1 Dossier navire (page de référence)
+
+- [ ] `/fr/vessels/antarctic_endurance` : dossier complet, header avec sévérité + flag SVG
+- [ ] Block "Historique 30 jours" rendu : map satellite ESRI + trail coloré (vert→orange→rouge)
+- [ ] **Drag scrubber** au milieu (J-15) : trail visible jusqu'à ce point seulement
+- [ ] **Drag scrubber** au début (J-30) : trail vide ou minimal
+- [ ] Click bouton ▶ Play : trail s'anime
+- [ ] Switch range "7j" → trail reframe sur 7 jours
+- [ ] Markers events visibles sur la timeline (ZONE_ENTERED en rouge, AIS_GAP en orange)
+- [ ] Click marker → scrubber jump à ce timestamp
+- [ ] Section identité : Operator, IMO, MMSI, Built, Length, Type, Beneficial owner
+- [ ] Section "Documented incidents" avec sources externes liées (mongabay, ccamlr, etc.)
+- [ ] Bouton **Partager** → URL copiable stable `https://krill-watch.org/fr/vessels/antarctic_endurance`
+- [ ] **A11y** : ←/→ clavier sur scrubber → recule/avance 1 min, Shift+←/→ → 10 min, Home/End → bornes, Space → play/pause
+
+### 4.2 Page incident (preuve horodatée)
+
+- [ ] `/api/incidents` retourne au moins 1 incident — note son slug
+- [ ] `/fr/incident/<slug>` : page complète
+- [ ] Headline auto-générée (`<vessel> entered <zone>`)
+- [ ] Tag sévérité + timestamp UTC
+- [ ] Map zoomée sur position de l'incident (trail 7j ± détection)
+- [ ] Section "Sources" : 3-5 liens externes (AIS via AISStream, CCAMLR boundary, etc.)
+- [ ] Click "Voir le navire" → `/fr/vessels/<slug>`
+- [ ] Click "Voir la campagne" → `/fr/campagnes/<slug>` (selon flag du navire)
+- [ ] **View page source** : meta `og:image` pointe vers `/api/og/incident/<slug>`
+- [ ] **`curl -I` sur cet OG endpoint** → 200, content-type `image/png`
+- [ ] **Coller l'URL incident dans https://opengraph.dev/** ou Twitter Card Validator (preview manquant car servi en localhost)
+
+### 4.3 OG images (preuves visuelles partageables)
+
+- [ ] `curl -o /tmp/og-incident.png http://localhost:3000/api/og/incident/<slug>` puis ouvrir → PNG 1200×630 lisible
+- [ ] `curl -o /tmp/og-vessel.png http://localhost:3000/api/og/vessel/antarctic_endurance` → idem
+- [ ] `curl -o /tmp/og-campaign.png http://localhost:3000/api/og/campaign/krill` → idem
+- [ ] Visuellement : drapeau, nom, sévérité, krill-watch.org en footer
+
+---
+
+## 🟡 5. Lentille D — Lanceur d'alerte (5 min)
+
+### 5.1 Formulaire contribution
+
+- [ ] `/fr/contribuer` : formulaire affiche
+- [ ] Sélectionner type : 🚢 "Observation directe d'un navire" → champs adaptés (IMO, position, photo)
+- [ ] Sélectionner type : 🔄 "Transbordement suspect" → 2 navires + position
+- [ ] Submit sans description → erreur validation "min 50 caractères"
+- [ ] Remplir : type=observation, vessel name="Test Vessel", description=51 chars random, **NE PAS** cocher la case → submit échoue avec erreur claire
+- [ ] Cocher la case + submit → page success "Merci. Signalement reçu (#<id>)"
+- [ ] Vérifier en SQL : `python -c "import duckdb; print(duckdb.connect('data/krill_watch.duckdb').execute('SELECT id, category, vessel_name, status FROM contributions ORDER BY submitted_at DESC LIMIT 1').fetchone())"`
+- [ ] Discord webhook (si `KRILL_ADMIN_DISCORD_WEBHOOK` configuré dans `.env`) : message reçu, **sans email** dans le payload
+
+### 5.2 Photo upload
+
+- [ ] Refaire le test avec une photo (jpg < 5MB)
+- [ ] Vérifier `data/contributions/<uuid>/<filename>` existe sur disk
+- [ ] Refaire avec un fichier > 5MB → erreur côté client avant submit
+- [ ] Refaire avec un .pdf → erreur "format non supporté"
+
+---
+
+## 🟡 6. Mobile (DevTools Chrome 360×800 — 10 min)
+
+Ouvre DevTools (F12) → Toggle device toolbar (Ctrl+Shift+M) → Sélectionne "iPhone SE" (375×667) ou custom 360×800.
+
+- [ ] `/fr` : hero tient sur l'écran, mini-map cachée (responsive), 2 CTA empilés
+- [ ] `/fr/live` : layout mobile dédié (PAS le desktop shrunk)
+  - [ ] Top bar 60px (logo + counter + bouton ⚙)
+  - [ ] Map plein écran
+  - [ ] FAB bottom-right (🛰 / 🗺) — click switche les tiles
+  - [ ] BottomSheet en bas snappée à 10vh (drag handle visible)
+  - [ ] Drag sheet vers le haut → 50vh puis 90vh (3 snap points)
+  - [ ] Click un navire dans la sheet → drawer plein écran avec ← retour
+  - [ ] Click ← → retour à la sheet
+- [ ] `/fr/vessels/antarctic_endurance` : scrubber tactile, drag fonctionne
+- [ ] `/fr/campagnes/krill` : hero plein largeur, sections empilées, sources lisibles
+- [ ] `/fr/contribuer` : formulaire utilisable au pouce (champs grands, submit visible)
+- [ ] Acronyme tap (ex: "FOC") → popover ouverte, tap extérieur ferme
+
+---
+
+## 🟡 7. Edge cases & 404 (5 min)
+
+- [ ] `/fr/vessels/ghost-vessel-12345` → 404 propre (pas de crash)
+- [ ] `/fr/campagnes/inexistant` → 404 propre
+- [ ] `/fr/incident/2099-W01-fake` → 404 propre
+- [ ] `/fr/digest/2099-W01` → 404 propre
+- [ ] `/api/og/incident/<slug-invalide>` → 404 ou fallback PNG
+- [ ] `/zh/something` (locale invalide) → 404 ou redirect /fr ou /en
+- [ ] Tuer l'API : `taskkill //F //PID 25156` (ou autre PID)
+  - [ ] Reload `/fr` → page rend toujours, hero affiche fallback "VEILLE CONTINUE" ou similar
+  - [ ] `/fr/live` : map rend, mais sidebar/drawer en état dégradé sans crash
+  - [ ] Relancer `npm run dev:api` → tout se reconnecte
+
+---
+
+## 🟢 8. Webhook → revalidate end-to-end (5 min)
+
+⚠ Test critique pour la phase 3 viralité. Vérifie que le pipeline auto-publie bien.
+
+```bash
+# 1. Récupère les secrets depuis .env
+source .env
+
+# 2. POST un incident synthétique (simule zone_monitor)
+SLUG="2026-04-29-test-vessel-zone-entered-test-zone"
+curl -X POST http://127.0.0.1:8000/api/internal/incident \
+  -H "X-Internal: $KRILL_INTERNAL_SECRET" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "vessel_slug": "test-vessel",
+    "vessel_name": "Test Vessel",
+    "vessel_flag": "NO",
+    "event_type": "ZONE_ENTERED",
+    "zone_code": "TEST-ZONE",
+    "severity": "CRITICAL",
+    "score": 0.83,
+    "position_lat": -53.96,
+    "position_lon": -36.72,
+    "detected_at": "2026-04-29T14:00:00Z",
+    "sources": [{"url":"https://test","title":"Test source"}]
+  }'
+
+# 3. Attends 5 secondes
+sleep 5
+
+# 4. Vérifie que la page existe
+curl -I http://localhost:3000/fr/incident/$SLUG
+# Attendu : HTTP 200
+
+# 5. Vérifie l'OG
+curl -I http://localhost:3000/api/og/incident/$SLUG
+# Attendu : HTTP 200, Content-Type: image/png
+```
+
+- [ ] L'incident apparaît dans `/api/incidents`
+- [ ] `/fr/incident/<slug>` retourne 200 en < 5 secondes après le POST
+- [ ] OG image retourne 200 + image valide
+- [ ] Re-POST le même payload → idempotent (1 seul row dans DuckDB)
+
+---
+
+## 🟢 9. Performance (10 min)
+
+```bash
+# Lighthouse mobile sur les 5 pages clés
+npx lighthouse http://localhost:3000/en --form-factor=mobile \
+  --only-categories=performance,accessibility \
+  --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/lighthouse-home-mobile.html
+
+npx lighthouse http://localhost:3000/en/live --form-factor=mobile \
+  --only-categories=performance,accessibility \
+  --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/lighthouse-live-mobile.html
+
+npx lighthouse http://localhost:3000/en/vessels/antarctic_endurance --form-factor=mobile \
+  --only-categories=performance,accessibility \
+  --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/lighthouse-vessel-detail-mobile.html
+
+npx lighthouse http://localhost:3000/en/campagnes/krill --form-factor=mobile \
+  --only-categories=performance,accessibility \
+  --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/lighthouse-campaign-mobile.html
+
+npx lighthouse http://localhost:3000/en/incident/<un-slug-réel> --form-factor=mobile \
+  --only-categories=performance,accessibility \
+  --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/lighthouse-incident-mobile.html
+```
+
+Seuils acceptables (selon checkpoints) :
+- Home : perf ≥ 80, a11y ≥ 90
+- Live : perf ≥ 70 (map lourde), a11y ≥ 90
+- Vessel detail : perf ≥ 75 (trail + scrubber), a11y ≥ 90
+- Campaign : perf ≥ 80, a11y ≥ 90
+- Incident : perf ≥ 75, a11y ≥ 90
+
+- [ ] Score ≥ seuil sur les 5 pages
+- [ ] Si en-dessous → noter dans `docs/superpowers/specs/2026-04-28-krill-refonte/POST-MERGE-FINDINGS.md` (à créer)
+
+---
+
+## 🟢 10. Parité bilingue FR ↔ EN (5 min)
+
+Pour chacune des pages clés, alterne FR/EN via le toggle nav ou en remplaçant `/fr/` par `/en/` :
+
+- [ ] `/fr` ↔ `/en` : hero parité, stats parité
+- [ ] `/fr/live` ↔ `/en/live` : labels sidebar (Severity/Layers/All/At-risk), tabs drawer
+- [ ] `/fr/vessels/antarctic_endurance` ↔ `/en/vessels/antarctic_endurance` : sections, scrubber labels (24h/7d/30d/90d)
+- [ ] `/fr/campagnes/krill` ↔ `/en/campagnes/krill` : contenu rédactionnel séparé (pas une traduction littérale, c'est intentionnel)
+- [ ] `/fr/contribuer` ↔ `/en/contribuer` : formulaire labels + erreurs
+
+---
+
+## 11. Tests qui demandent un déploiement public (à différer)
+
+Ces tests ne peuvent **pas** être faits en localhost — coche-les après push Vercel preview :
+
+- [ ] Twitter Card Validator (https://cards-dev.twitter.com/validator) sur 3 URLs : 1 incident, 1 vessel, 1 campagne
+- [ ] LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/)
+- [ ] Bluesky preview : poster un lien dans un post draft, voir le card preview
+- [ ] OpenGraph.dev pour validation OG complète
+- [ ] Lighthouse CI sur preview prod (vs localhost dev — différents scores)
+- [ ] WAVE (https://wave.webaim.org/) accessibility audit
+- [ ] Real-user mobile : vrai iPhone / Android avec navigator.share natif
+
+---
+
+## 12. Hors scope MVP — à valider à part
+
+- [ ] OSINT human review des 4 MD éditoriaux campagnes (`web/data/campaigns/*.{fr,en}.md`) — étiquetés "draft"
+- [ ] Backfill historique : exécuter `scripts/backfill_incidents.py` (à écrire) au cutover prod
+- [ ] Modération UI des contributions : pour l'instant SQL-only (changer status pending → published manuellement)
+- [ ] Newsletter : intégrer ou laisser un lien externe
+- [ ] Sentinel-2 imagerie : phase ultérieure (cf. design § 8)
+
+---
+
+## Verdict final
+
+Sections **🔴 critical** doivent toutes être ✅ avant push origin/main.
+Sections **🟡 important** : tolérance 1-2 findings mineurs si documentés.
+Sections **🟢 nice-to-have** : couvrir avant déploiement preview Vercel.
+
+Si un bug bloquant est trouvé : reporter dans `POST-MERGE-FINDINGS.md`, ouvrir une branche `fix/post-merge-<id>`, fix, merge, **re-courir cette checklist** sur les sections impactées.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/alpha.txt b/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/alpha.txt
new file mode 100644
index 0000000..7f7ee8d
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/alpha.txt
@@ -0,0 +1,33 @@
+Tu es l'instance "alpha" de la refonte krill-watch phase 1.
+
+Mission immédiate : exécuter P1-T01 (Design system tokens & primitives UI).
+
+ÉTAPES :
+1. cd C:/Users/sca/Desktop/KRILL
+2. git checkout refonte/phase-1   (la branche existe déjà, créée par le user)
+3. Lis docs/superpowers/specs/2026-04-28-krill-refonte/CONVENTIONS.md (en entier)
+4. Lis docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/README.md
+5. Lis docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T01-design-system.md
+
+CLAIM :
+6. Édite le frontmatter de P1-T01-design-system.md : status: in_progress, owner: "alpha"
+7. git add + git commit -m "chore(plan): pick P1-T01 [alpha]"
+
+EXÉCUTION :
+8. Implémente EXACTEMENT ce que demande P1-T01 — pas de feature creep
+9. Tu ne touches QUE les files_owned déclarés dans le frontmatter de P1-T01
+10. Si un fichier doit être touché qui n'est pas dans files_owned, STOP et signale au user
+11. Si tu as besoin d'ajouter une clé i18n, écris-la dans web/i18n/pending/P1-T01.json (l'agrégateur P1-T06 mergera)
+
+VÉRIFICATION :
+12. Lance la section ## Verification du fichier P1-T01 (typecheck, snippet visuel, etc.)
+13. Si verification passe : édite frontmatter status: completed, commit "feat(P1-T01): design system tokens & primitives [alpha]"
+14. Si verification échoue : laisse status: in_progress, commit "wip(P1-T01): <ce qui reste à faire> [alpha]" et reporte au user
+
+RÈGLES IMPORTANTES :
+- Toujours git pull --rebase avant de commit
+- Préfixe TOUS tes commits par "[alpha]" pour traçabilité
+- N'utilise PAS git push (le user gère le push central)
+- Pas de feature creep — la spec est précise, suis-la
+
+Au final, fais un résumé court : ce que tu as livré, fichiers créés, ce qu'il reste.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/beta.txt b/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/beta.txt
new file mode 100644
index 0000000..900c943
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/beta.txt
@@ -0,0 +1,40 @@
+Tu es l'instance "beta" de la refonte krill-watch phase 1.
+
+Mission différée : tu attends que P1-T01 soit completed (par alpha) avant de prendre P1-T03 (FleetSidebar).
+
+ÉTAPES IMMÉDIATES (préparation, sans bouger le code) :
+1. cd C:/Users/sca/Desktop/KRILL
+2. git checkout refonte/phase-1
+3. Lis docs/superpowers/specs/2026-04-28-krill-refonte/CONVENTIONS.md (en entier)
+4. Lis docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/README.md
+5. Lis docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T03-fleet-sidebar.md
+6. Repère bien tes files_owned
+
+ATTENTE :
+7. Demande au user : "Je suis prêt sur P1-T03. Je peux commencer dès que P1-T01 est completed. Tu me donnes le go ?"
+8. Quand user dit "go" :
+   - git pull --rebase
+   - Vérifie que P1-T01 a status: completed (cat ce frontmatter)
+   - Si T01 pas encore done : signale au user et continue d'attendre
+   - Si T01 done : passe à CLAIM
+
+CLAIM :
+9. Édite frontmatter P1-T03 : status: in_progress, owner: "beta"
+10. git commit "chore(plan): pick P1-T03 [beta]"
+
+EXÉCUTION :
+11. Implémente P1-T03 EXACTEMENT comme spécifié
+12. Tu ne touches QUE les files_owned de P1-T03
+13. i18n keys → web/i18n/pending/P1-T03.json
+14. Note à savoir : alpha aura livré le design system (Button, Card, Tabs, etc.) — tu importes depuis @/components/ui
+
+VÉRIFICATION :
+15. Lance la section ## Verification de P1-T03
+16. Si OK : status: completed, commit "feat(P1-T03): fleet sidebar [beta]"
+17. Si KO : wip commit + reporte
+
+RÈGLES :
+- git pull --rebase avant chaque commit
+- Préfixe tes commits par "[beta]"
+- Pas de git push
+- Pas de feature creep
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/delta.txt b/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/delta.txt
new file mode 100644
index 0000000..4f129e0
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/delta.txt
@@ -0,0 +1,48 @@
+Tu es l'instance "delta" de la refonte krill-watch phase 1.
+
+Mission différée : tu prends P1-T02 (LiveTrackerMap — migration map tracker → React) dès que P1-T01 est completed.
+
+ÉTAPES IMMÉDIATES (préparation, sans bouger le code) :
+1. cd C:/Users/sca/Desktop/KRILL
+2. git checkout refonte/phase-1
+3. Lis docs/superpowers/specs/2026-04-28-krill-refonte/CONVENTIONS.md (en entier)
+4. Lis docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/README.md
+5. Lis docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T02-tracker-map-migration.md
+6. Lis aussi frontend/app.js (en entier — c'est ton material source à porter en React)
+7. Lis web/components/map/FleetMap.tsx (le pattern existant à étendre)
+
+ATTENTE :
+8. Demande au user : "Je suis prêt sur P1-T02 (la plus grosse tâche de la phase, 12h). Je peux commencer dès que P1-T01 est completed. Tu me donnes le go ?"
+9. Quand user dit "go" :
+   - git pull --rebase
+   - Vérifie P1-T01 status: completed
+   - Si pas encore : signale et attends
+
+CLAIM :
+10. Édite frontmatter P1-T02 : status: in_progress, owner: "delta"
+11. git commit "chore(plan): pick P1-T02 [delta]"
+
+EXÉCUTION :
+12. Implémente P1-T02 EXACTEMENT — c'est la tâche la plus complexe de la phase, prends ton temps
+13. Tu ne touches QUE les files_owned de P1-T02 :
+    - web/components/map/LiveTrackerMap.tsx (le composant principal)
+    - web/components/map/layers/zonesLayers.ts
+    - web/components/map/layers/penguinLayers.ts
+    - web/components/map/layers/graticule.ts
+    - web/components/map/style-toggle-control.ts
+    - web/lib/sse-client.ts
+14. Tu importes du DS depuis @/components/ui
+15. Style toggle : porter le code de FleetMap.tsx + l'étendre (mobile-aware)
+16. SSE : EventSource côté client uniquement, reconnexion exponentielle
+
+VÉRIFICATION :
+17. Lance la section ## Verification de P1-T02 (créer une page de test temporaire web/app/dev/live-map/page.tsx, vérifier visuellement)
+18. SUPPRIME la page de test avant le commit final
+19. Si OK : status: completed, commit "feat(P1-T02): live tracker map react component [delta]"
+
+RÈGLES :
+- git pull --rebase avant chaque commit
+- Préfixe tes commits par "[delta]"
+- Pas de git push
+- Cette tâche est lourde — fais des wip commits intermédiaires si tu fais une pause longue
+- Pas de feature creep — porte EXACTEMENT les features de frontend/app.js, ni plus ni moins
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/gamma.txt b/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/gamma.txt
new file mode 100644
index 0000000..f8b5804
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/PROMPTS/gamma.txt
@@ -0,0 +1,39 @@
+Tu es l'instance "gamma" de la refonte krill-watch phase 1.
+
+Mission différée : tu attends que P1-T01 soit completed (par alpha) avant de prendre P1-T04 (VesselDrawer — panneau détails navire).
+
+ÉTAPES IMMÉDIATES (préparation, sans bouger le code) :
+1. cd C:/Users/sca/Desktop/KRILL
+2. git checkout refonte/phase-1
+3. Lis docs/superpowers/specs/2026-04-28-krill-refonte/CONVENTIONS.md (en entier)
+4. Lis docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/README.md
+5. Lis docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T04-vessel-drawer.md
+6. Repère tes files_owned (drawer + 6 sous-composants tabs)
+
+ATTENTE :
+7. Demande au user : "Je suis prêt sur P1-T04. Je peux commencer dès que P1-T01 est completed. Tu me donnes le go ?"
+8. Quand user dit "go" :
+   - git pull --rebase
+   - Vérifie que P1-T01 a status: completed
+   - Si T01 pas encore done : signale et continue d'attendre
+
+CLAIM :
+9. Édite frontmatter P1-T04 : status: in_progress, owner: "gamma"
+10. git commit "chore(plan): pick P1-T04 [gamma]"
+
+EXÉCUTION :
+11. Implémente P1-T04 EXACTEMENT comme spécifié
+12. Tu ne touches QUE les files_owned de P1-T04
+13. i18n → web/i18n/pending/P1-T04.json
+14. Tu importes du DS depuis @/components/ui (livré par alpha en T01) : Drawer, Tabs, Card, Button
+
+VÉRIFICATION :
+15. Lance la section ## Verification de P1-T04
+16. Si OK : status: completed, commit "feat(P1-T04): vessel drawer [gamma]"
+17. Si KO : wip commit + reporte
+
+RÈGLES :
+- git pull --rebase avant chaque commit
+- Préfixe tes commits par "[gamma]"
+- Pas de git push
+- Pas de feature creep
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/README.md b/docs/superpowers/specs/2026-04-28-krill-refonte/README.md
new file mode 100644
index 0000000..9299c51
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/README.md
@@ -0,0 +1,81 @@
+# krill-watch · refonte · orchestration
+
+> Plan d'exécution multi-agents pour la spec [2026-04-28-krill-refonte-design.md](../2026-04-28-krill-refonte-design.md).
+> Lis d'abord la spec, puis [CONVENTIONS.md](./CONVENTIONS.md), puis le README de la phase en cours.
+
+## Vue d'ensemble
+
+3 phases, 24 tâches au total, conçues pour **exécution parallèle par plusieurs Claude Code** sans collision de fichiers.
+
+| Phase | Tâches | Effort estimé | But | Phase verrou |
+|---|---|---|---|---|
+| 1 · Fondation | 8 | 10 jours | `/live` à parité dans Next.js, mobile, hero hybride, legacy supprimé | bloque 2 et 3 |
+| 2 · Historique & contenu | 8 | 10 jours | Trail + scrubber, 4 hubs de campagne, glossaire enrichi | bloque 3 |
+| 3 · Viralité & contribution | 8 | 12 jours | Pages incident auto, OG dynamiques, partage, formulaire, digest | terminal |
+
+**Total** : 24 tâches, ~32 jours-homme, 5-7 semaines calendaires si 1 dev solo · 3-4 semaines si 2-3 instances Claude Code en parallèle bien orchestrées.
+
+## Dépendances inter-phases
+
+```
+Phase 1 (fondation) ─────┐
+                         │  bloque
+                         ↓
+                Phase 2 (historique) ─────┐
+                                          │  bloque
+                                          ↓
+                                Phase 3 (viralité)
+```
+
+Chaque phase doit être 100% complétée avant de démarrer la suivante. À l'intérieur d'une phase, les tâches sont organisées en **vagues parallélisables**.
+
+## Vagues d'exécution typiques (modèle)
+
+Une phase est typiquement structurée ainsi :
+
+```
+Vague 0 (séquentielle) : tâche fondation (DS, types partagés, helpers)
+        ↓
+Vague 1 (parallèle, 3-4 instances) : composants/pages indépendants
+        ↓
+Vague 2 (parallèle, 2 instances) : intégration / assemblage
+        ↓
+Vague 3 (séquentielle) : nettoyage, suppression, suite
+```
+
+Le détail des vagues par phase est dans le `README.md` de chaque dossier `phase-N-*/`.
+
+## Comment lancer une phase
+
+### Solo (1 instance Claude Code)
+```
+/gsd:execute-phase docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/
+```
+
+### Parallèle (plusieurs instances)
+1. Une instance maître prépare la **vague 0** (tâche bloquante).
+2. Quand vague 0 est `status: completed`, on lance N instances en simultané, chacune sur **une tâche distincte de la vague 1** (vérifier `parallelizable_with` dans le frontmatter).
+3. On synchronise via le statut `completed` dans le frontmatter de chaque tâche.
+4. Vague 2 démarre quand toutes les tâches de vague 1 sont completed.
+
+Les conflits de fichiers sont **structurellement empêchés** par les `files_owned` : aucune tâche n'a le droit d'écrire dans un fichier qu'une autre tâche détient. Voir `CONVENTIONS.md`.
+
+## Index des phases
+
+- [phase-1-fondation/README.md](./phase-1-fondation/README.md) — vagues + 8 tâches
+- [phase-2-historique/README.md](./phase-2-historique/README.md) — vagues + 8 tâches
+- [phase-3-viralite/README.md](./phase-3-viralite/README.md) — vagues + 8 tâches
+
+## Tableau de bord
+
+État global (à mettre à jour à mesure que les tâches passent à `completed`) :
+
+```
+Phase 1  [░░░░░░░░] 0/8
+Phase 2  [░░░░░░░░] 0/8
+Phase 3  [░░░░░░░░] 0/8
+```
+
+## Hors-scope rappel (cf. spec § 8)
+
+Sentinel-2 réel · Tor-whistleblower · API publique versionnée · embeds journalistes · ES/PT/JP · refonte backend.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/CHECKPOINT.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/CHECKPOINT.md
new file mode 100644
index 0000000..6db5e24
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/CHECKPOINT.md
@@ -0,0 +1,128 @@
+# Phase 1 — Checkpoint (P1-T08)
+
+**Date :** 2026-04-28
+**Branche :** `refonte/phase-1`
+**Owner du checkpoint :** alpha (T08)
+
+## Résultats des 8 tâches
+
+| ID | Owner | Status | Commit feat |
+|---|---|---|---|
+| P1-T01 · Design system | alpha | ✅ completed | `481c438` |
+| P1-T02 · LiveTrackerMap | delta | ✅ completed | `2ed466e` |
+| P1-T03 · FleetSidebar | beta | ✅ completed | `5b4799e` |
+| P1-T04 · VesselDrawer | gamma | ✅ completed | `44ca47a` |
+| P1-T05 · /live assemblage | alpha | ✅ completed | `ed22399` |
+| P1-T06 · Hero hybride | alpha | ✅ completed | `676d180` |
+| P1-T07 · Mobile responsive | alpha | ✅ completed | `0e6ba8d`+ |
+| P1-T08 · Legacy cleanup | alpha | ✅ completed | (this) |
+
+## Critères d'acceptation phase 1
+
+- [x] `frontend/` n'existe plus (`git ls-files frontend` retourne vide).
+- [x] FastAPI démarre sans `app.mount(...)` ni `FileResponse` legacy.
+- [x] `npm --prefix web run typecheck` passe.
+- [x] `npm --prefix web run build` passe (43 routes).
+- [x] `/[locale]/live` fonctionnel desktop + mobile (switch via `LiveLayoutSwitch`).
+- [x] Tous les `web/i18n/pending/*.json` supprimés (strings inline dans composants ; merge vers locales/{fr,en}.json reporté en phase 2 quand le système JSON i18n sera réellement câblé).
+- [x] `web/components/ui` complet (Button, Card, Badge, Tabs, Drawer, BottomSheet, IconButton).
+
+## Build production
+
+```
+✓ Compiled successfully
+✓ Generating static pages (43/43)
+```
+
+Routes ajoutées par la refonte :
+- `/[locale]/live` (SSR shell, 18.9 kB First Load chunk côté page)
+- `/[locale]/live/v/[slug]` (dynamic redirect, 127 B)
+- `/[locale]` (HeroHybrid SSR, ~178 B chunk page)
+
+## Lighthouse — non exécuté en CI
+
+Lighthouse mobile + desktop sur `/`, `/live`, `/vessels` n'a pas été couru
+dans cette session (pas de display + pas de prod server lancé). À couvrir
+manuellement avant le merge `refonte/phase-1 → main` :
+
+```bash
+npm --prefix web run start &
+npx lighthouse http://localhost:3000/en --form-factor=mobile \
+  --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/lighthouse-home-mobile.html
+npx lighthouse http://localhost:3000/en/live --form-factor=mobile \
+  --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/lighthouse-live-mobile.html
+npx lighthouse http://localhost:3000/en/vessels --form-factor=mobile \
+  --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/lighthouse-vessels-mobile.html
+```
+
+Seuils attendus (par spec T08) : ≥ 90 a11y et ≥ 80 perf. Si en dessous,
+ouvrir P1-T09 plutôt que de bypass.
+
+## Bilan effort
+
+Plan : **64 h** sur 8 tâches.
+Réalisé : 8/8 livrées. Aucune sous-tâche fix nécessaire (pas de blocker
+remonté pendant la phase).
+
+## Décisions / dette à porter en phase 2
+
+1. **i18n agrégation différée** : les strings live (sidebar, drawer,
+   tabs, mobile) restent inline FR/EN dispatchées via `STRINGS[locale]`.
+   Le squelette JSON (`web/i18n/locales/{fr,en}.json` + `pending/`) est
+   en place pour la migration future, mais la phase 1 n'a pas câblé un
+   loader JSON. À reprendre en phase 2 (P2-T07 glossary extension est
+   un bon moment).
+2. **Mini-map du HeroHybrid** : SVG fallback statique (T02 livre la
+   vraie `LiveTrackerMap`, mais le hero reste sur la mini SVG car
+   monter MapLibre côté above-the-fold home tue le LCP). Décision à
+   confirmer en phase 3 quand on travaillera sur les OG images.
+3. **Tablet layout** : la `LiveLayoutSwitch` rend desktop pour
+   tablet+desktop. Si l'usage iPad remonte, ajouter un mode hybride
+   (sidebar collapsible + drawer overlay non-fixed) en sous-tâche
+   propre — pas en P1.
+4. **`useBreakpoint` SSR** : retourne `desktop` au premier rendu pour
+   matcher le serveur, puis swap au hydrate. Léger flash possible sur
+   mobile slow ; acceptable pour la phase 1.
+5. **Lighthouse** : à mesurer avant merge (cf. plus haut). Si rouge,
+   issue dédiée.
+
+## Bug fixes post-livraison (UAT manuelle 2026-04-28)
+
+Trois régressions détectées en UAT après les commits initiaux des 8
+tâches, corrigées sur la même branche :
+
+- **`fix(P1-T02,P1-T05)` `20b426c`** — drawer close & ESC laissaient
+  `?v=` en URL (`patch.selectedSlug ?? prev` ne distinguait pas
+  `null` de `undefined`) ; `maplibre-gl.css` n'était pas importé donc
+  les controls MapLibre s'empilaient en bas du conteneur.
+- **`fix(P1-T01,P1-T03,P1-T05)` next** — search `?q=` et chips
+  `?bucket=` n'étaient pas synchronisés à l'URL (state local
+  `FleetSidebar`). `FleetSidebar` accepte maintenant un mode contrôlé
+  optionnel (`searchValue`/`onSearchChange`/`bucket`/`onBucketChange`)
+  ; `LivePageClient` pousse les changements via `updateState({filter})`
+  et hydrate au mount/reload depuis `searchParams`. Mobile path
+  (`LiveMobileLayout` → `MobileFiltersSheet`) propage les mêmes props.
+  Padding des `Tabs.Trigger` réduit de `px-4` → `px-2.5` pour que les
+  6 onglets FR du `VesselDrawer` (Identité / Activité / Alertes /
+  Incidents / Fermetures / Journal) tiennent dans 420 px.
+
+Vérifié manuellement via Chrome MCP : `?v=` clear sur close, ESC ferme
+le drawer, controls map visibles top-right + bottom-right + scale +
+attribution, `?q=antarctic&bucket=at-risk` round-trip après hard reload.
+
+## Pas testé / à valider manuellement avant merge → main
+
+- **Mobile 360×800** : `resize_window` MCP n'affecte pas le viewport
+  HTML (reste 1920). À tester via Chrome DevTools device emulation.
+  Le code mobile est shippé et passe build prod ; comportement non
+  garanti tant qu'un humain n'a pas vérifié.
+- **SSE positions live** : fenêtre d'observation trop courte pour
+  valider les updates en cours de session.
+- **Lighthouse mobile + desktop** sur `/`, `/live`, `/vessels` :
+  commande dans la section "Lighthouse — non exécuté en CI" ci-dessus.
+
+## Prochain pas
+
+Phase 2 (`phase-2-historique/`) : 8 tâches définies, toutes `pending`.
+Démarrage conditionné à un go explicite + à la mesure Lighthouse de
+phase 1.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T01-design-system.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T01-design-system.md
new file mode 100644
index 0000000..d11ca35
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T01-design-system.md
@@ -0,0 +1,166 @@
+---
+id: P1-T01
+phase: 1
+wave: 0
+title: Design system tokens & primitives UI
+status: completed
+owner: alpha
+depends_on: []
+parallelizable_with: []
+files_owned:
+  - web/lib/tokens.ts
+  - web/components/ui/Button.tsx
+  - web/components/ui/Card.tsx
+  - web/components/ui/Badge.tsx
+  - web/components/ui/Tabs.tsx
+  - web/components/ui/Drawer.tsx
+  - web/components/ui/BottomSheet.tsx
+  - web/components/ui/IconButton.tsx
+  - web/components/ui/index.ts
+files_read:
+  - web/app/globals.css
+  - web/tailwind.config.ts
+  - web/components/SeverityBadge.tsx
+  - web/components/MissionBadge.tsx
+  - web/components/Flag.tsx
+estimated_hours: 6
+---
+
+# P1-T01 · Design system tokens & primitives UI
+
+## Contexte
+
+Toutes les autres tâches de la phase 1 vont consommer des composants UI réutilisables. Cette tâche établit le **design system minimal** dont les autres tâches dépendent : tokens (colors, spacing, radius), primitives de bouton/card/badge/tabs/drawer/bottomsheet — calqués sur l'esthétique actuelle (dark + krill orange + JetBrains Mono pour labels).
+
+La base CSS (`globals.css`) et certains composants (`SeverityBadge`, `MissionBadge`, `Flag`) existent déjà. Cette tâche ne les modifie pas — elle ajoute les primitives manquantes pour que les vagues 1-3 puissent assembler leurs surfaces sans recoder.
+
+## Deliverable
+
+8 composants TypeScript + un fichier de tokens, tous typés, tous accessibles (ARIA), tous compatibles avec les variables CSS définies dans `globals.css`. Index public via `web/components/ui/index.ts`.
+
+## Spec détaillée
+
+### `web/lib/tokens.ts`
+
+Re-exporte les tokens utilisables côté JS (les CSS variables existent déjà — ce module sert quand on a besoin de la valeur en JS, ex: `.toGeoJSONStyle()` pour MapLibre). Structure :
+
+```ts
+export const colors = {
+  bg: 'var(--color-bg)',
+  surface: 'var(--color-surface)',
+  border: 'var(--color-border)',
+  text: 'var(--color-text)',
+  textMuted: 'var(--color-text-muted)',
+  accent: 'var(--color-accent)',     // krill orange #ff6b3d
+  danger: 'var(--color-danger)',     // #ff3b6b
+  warn: 'var(--color-warn)',         // #f5b042
+  good: 'var(--color-good)',         // #2ee5a0
+  info: 'var(--color-info)',         // #5ec8ff
+  cpwf: 'var(--color-cpwf)',         // #ffe357
+} as const;
+
+export const severityHex = {
+  CRITICAL: '#ff3b6b',
+  SUSPICIOUS: '#f5b042',
+  WATCH: '#c084fc',
+  CPWF: '#00d1ff',
+  NORMAL: '#2ee5a0',
+  UNKNOWN: '#6b7a8c',
+} as const;
+
+export const radius = { sm: 4, md: 6, lg: 12, full: 9999 } as const;
+```
+
+Si une CSS variable manque dans `globals.css`, NE PAS l'ajouter dans cette tâche — noter la dans `## Cross-task notes` et utiliser la valeur fallback.
+
+### Primitives
+
+Toutes les primitives suivent ces règles :
+- Default export = composant nommé.
+- Props `className` mergée avec celles internes (helper `cn()` existe dans `web/lib/utils.ts`).
+- Variants typés via union string (pas de `cva` lib externe).
+- A11y : focus-visible style avec outline accent, aria-* corrects, key navigation pour Tabs/Drawer/BottomSheet.
+
+#### `Button.tsx`
+```ts
+type Props = {
+  variant?: 'primary' | 'ghost' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  asChild?: boolean;            // si true, render <a> ou children directement (Radix-style)
+  loading?: boolean;            // affiche un spinner et disable
+  children: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+```
+- `primary` : background accent, text bg.
+- `ghost` : transparent, border, hover surface.
+- `danger` : background danger.
+
+#### `Card.tsx`
+Wrapper avec `border-[color:var(--color-border)] bg-[color:var(--color-surface)] rounded-xl`. Accepte `as` pour rendre `<a>` ou `<article>`. Sous-composants : `Card.Header`, `Card.Body`, `Card.Footer`.
+
+#### `Badge.tsx`
+Pill avec variants `tone: 'neutral' | 'danger' | 'warn' | 'good' | 'info' | 'cpwf'` et `size: 'sm' | 'md'`. Ne pas dupliquer `SeverityBadge` qui existe déjà avec sa propre logique.
+
+#### `Tabs.tsx`
+Headless tabs avec rendering : underline accent sous l'onglet actif, focus-visible. API :
+```ts
+<Tabs value={value} onChange={setValue}>
+  <Tabs.List>
+    <Tabs.Trigger value="identity">Identity</Tabs.Trigger>
+    <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
+  </Tabs.List>
+  <Tabs.Content value="identity">...</Tabs.Content>
+</Tabs>
+```
+
+#### `Drawer.tsx`
+Panneau qui slide depuis la droite (default) ou la gauche (prop `side="left"`). Backdrop semi-transparent. ESC pour fermer, focus trap. API minimale :
+```ts
+<Drawer open={open} onClose={() => setOpen(false)} side="right" width={420}>
+  ...
+</Drawer>
+```
+Implémentation : transform CSS + `aria-hidden` + portal vers `document.body`.
+
+#### `BottomSheet.tsx`
+Panneau qui remonte depuis le bas, drag handle visible, snap points (`['10vh', '50vh', '90vh']`). Mobile-first usage. Touch + souris drag. API :
+```ts
+<BottomSheet open={true} snapPoints={['10vh', '50vh']} initialSnap={0}>
+  ...
+</BottomSheet>
+```
+
+#### `IconButton.tsx`
+Variante du bouton sans texte, square, pour les actions de carte (toggle satellite, fullscreen, etc). Props identiques + `aria-label` requis (TypeScript force).
+
+### Index public
+
+`web/components/ui/index.ts` re-exporte tout pour usage `import { Button, Card, Drawer } from '@/components/ui'`.
+
+## Verification
+
+```bash
+cd C:/Users/sca/Desktop/KRILL
+npm --prefix web run typecheck   # doit passer
+```
+
+Snippet de vérification visuelle (à coller temporairement dans `web/app/[locale]/page.tsx` pendant le dev, à retirer avant le commit final) :
+```tsx
+<div className="p-8 space-y-4">
+  <Button variant="primary">Primary</Button>
+  <Button variant="ghost">Ghost</Button>
+  <Card><Card.Body>Hello</Card.Body></Card>
+  <Badge tone="danger">CRITICAL</Badge>
+</div>
+```
+
+Doit s'afficher cohérent avec le reste du site (couleurs, typo, radius).
+
+## Cross-task notes
+
+Aucune dépendance sortante. Tâche 100% autonome.
+
+## Notes pour les tâches suivantes
+
+- Toutes les autres tâches de phase 1 importent depuis `@/components/ui`.
+- Si une primitive manque pendant les vagues 1-3, **ne pas l'ajouter ici** rétroactivement — créer la dans le `files_owned` de la tâche qui en a besoin et noter pour intégration en phase 2.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T02-tracker-map-migration.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T02-tracker-map-migration.md
new file mode 100644
index 0000000..f11e1c9
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T02-tracker-map-migration.md
@@ -0,0 +1,142 @@
+---
+id: P1-T02
+phase: 1
+wave: 1
+title: Migration map tracker → composant React LiveTrackerMap
+status: completed
+owner: delta
+depends_on: [P1-T01]
+parallelizable_with: [P1-T03, P1-T04]
+files_owned:
+  - web/components/map/LiveTrackerMap.tsx
+  - web/components/map/layers/zonesLayers.ts
+  - web/components/map/layers/penguinLayers.ts
+  - web/components/map/layers/graticule.ts
+  - web/components/map/style-toggle-control.ts
+  - web/lib/sse-client.ts
+files_read:
+  - frontend/app.js
+  - web/components/map/FleetMap.tsx
+  - web/components/map/VesselsMapClient.tsx
+  - server/app.py
+  - config/zones/*.geojson
+estimated_hours: 12
+---
+
+# P1-T02 · Migration map tracker → composant React LiveTrackerMap
+
+## Contexte
+
+Le tracker actuel `frontend/app.js` (~1500 lignes) configure une map MapLibre avec : 5 sources GeoJSON (zones CCAMLR, penguin buffer, vessels live, ambient, tracks) + 11 layers + SSE pour les updates live + toggle DARK/SATELLITE + control de couches (graticule, zones, D1MPA, tracks, labels). Le composant Next.js `FleetMap.tsx` (déjà existant, fixé en début de session) ne couvre qu'un sous-ensemble : positions fleet + ambient + toggle satellite + drapeaux.
+
+Cette tâche **réécrit la map du tracker en composant React `LiveTrackerMap`** qui couvre 100% des features de `frontend/app.js` côté carte (les filtres, la sidebar et le drawer sont des autres tâches).
+
+## Deliverable
+
+Un composant `<LiveTrackerMap>` qui :
+- Initialise une map MapLibre avec sources zones + penguin + vessels + ambient + tracks + graticule.
+- Configure ~11 layers calqués sur ceux de `frontend/app.js` (lignes 237-450), en respectant le fix `line-dasharray` static (cf. P1-T08 résume le fix actuel).
+- Accepte `mode` prop = `live` (live data via SSE) ou `static` (data passée en prop, pour preview home).
+- Re-utilise le `style-toggle-control` qu'on extrait dans son propre fichier.
+- Connecte un client SSE qui dispatche les events sur les sources (vessels, ambient).
+- A11y : `aria-label` sur le canvas, focus-visible sur les controls.
+
+## Spec détaillée
+
+### `web/lib/sse-client.ts`
+
+Wrapper léger sur `EventSource` :
+
+```ts
+export type StreamEvent =
+  | { type: 'fleet_update'; positions: FleetPosition[] }
+  | { type: 'event'; event: VesselEvent }
+  | { type: 'ambient'; positions: AmbientPosition[] }
+  | { type: 'closures_changed' }
+  | { type: 'connection'; state: 'connected' | 'reconnecting' };
+
+export type StreamOptions = {
+  apiBase: string;
+  onEvent: (e: StreamEvent) => void;
+};
+
+export function connectStream({ apiBase, onEvent }: StreamOptions): () => void;
+// Returns a cleanup function. Auto-reconnects with exponential backoff
+// (1s → 2s → 4s → 8s → max 30s). Falls back to polling /api/vessels every
+// 30s if SSE fails 5 times in a row.
+```
+
+### `web/components/map/layers/zonesLayers.ts`
+
+Helper qui retourne les definitions de layers pour les zones (mpa / buffer / subarea / convention / penguin). Issue du fix de début de session — copier les 4 layers `zone-outline-*` + `zone-fill` + `zone-label` de `frontend/app.js` (déjà refactor en static dasharray).
+
+```ts
+export function addZoneLayers(map: Map): void;
+export function setZonesVisibility(map: Map, visible: boolean): void;
+```
+
+### `web/components/map/layers/penguinLayers.ts`
+
+Penguin buffer + colony dot + colony label. Static dasharray ([1] pour campaign, [4,3] pour other).
+
+### `web/components/map/layers/graticule.ts`
+
+Re-implémentation de `buildGraticule()` de `frontend/app.js` (lignes 187-212).
+
+### `web/components/map/style-toggle-control.ts`
+
+Extraction de `makeStyleToggleControl` actuellement dans `FleetMap.tsx`. Avec en plus une version mobile-aware (placement `bottom-left` sur mobile via prop `position`).
+
+### `web/components/map/LiveTrackerMap.tsx`
+
+```ts
+type Props = {
+  mode: 'live' | 'static';
+  apiBase: string;
+  initialFleet?: FleetPosition[];
+  initialAmbient?: AmbientPosition[];
+  zones?: GeoJSON.FeatureCollection;       // si non fourni, fetch /api/zones
+  selectedSlug?: string | null;
+  onSelectVessel?: (slug: string | null) => void;
+  showAmbient: boolean;
+  showZones: boolean;
+  showD1MPA: boolean;
+  showGraticule: boolean;
+  showLabels: boolean;
+  show24hTracks: boolean;
+  locale: 'fr' | 'en';
+};
+```
+
+Comportements :
+- `mode='live'` : `useEffect` connecte `connectStream`, dispatche updates aux sources.
+- Click sur fleet dot : appelle `onSelectVessel(slug)`.
+- Selected vessel : ajout d'un layer halo (cercle plus grand semi-transparent) autour du dot sélectionné.
+- Hover : popup minimal (nom + sévérité).
+- Map style toggle : DARK (CARTO) ou SATELLITE (ESRI World Imagery + carto-labels overlay) — réutilise `BASEMAP` de `frontend/app.js` (lignes 49-76).
+
+## Verification
+
+```bash
+cd C:/Users/sca/Desktop/KRILL
+npm --prefix web run typecheck
+```
+
+Test manuel : créer une page de test temporaire `web/app/dev/live-map/page.tsx` qui rend `<LiveTrackerMap mode="live" apiBase="http://127.0.0.1:8000" />` plein écran. Vérifier :
+- Map charge en DARK par défaut.
+- 23 navires apparaissent comme dots.
+- Click sur un dot logue `selectedSlug`.
+- Toggle DARK → SATELLITE switche les tiles.
+- Avec `?ambient=1` les positions ambient apparaissent en gris.
+- Recharger la page après une déconnexion réseau → reconnexion auto en 1-2 secondes.
+
+Supprimer la page de test avant le commit final.
+
+## Cross-task notes
+
+- Cette tâche ne crée pas la sidebar ni le drawer (tâches P1-T03 et P1-T04 en parallèle).
+- L'assemblage final dans `/live` est P1-T05 — qui consommera ce composant.
+- Si on découvre que les layers zones nécessitent un refactor de `config/zones/*.geojson`, on note dans `## Cross-task notes` mais on ne touche pas (hors `files_owned`).
+- **SSE event divergence (delta)** : la spec décrit un type `StreamEvent` client (`fleet_update | event | ambient | closures_changed | connection`). Le serveur (`server/app.py:690`) émet `hello | position | event | vessel`. `sse-client.ts` mappe : `position` → `fleet_update` (positions: [single]), `event` → `event`, `hello`/`onopen` → `connection: connected`, `onerror` → `connection: reconnecting`. Les types `ambient` et `closures_changed` sont définis mais inert tant que le serveur ne pousse pas ces kinds — extension prévue hors scope T02 (à activer côté `server/bus.py` + `server/app.py`).
+- **Type `LiveFleetVessel` (delta)** : la spec utilise `FleetPosition[]` pour `initialFleet`, mais `FleetPosition` (de `FleetMap.tsx`) est trop minimaliste (pas de severity/cog/zones). `LiveTrackerMap.tsx` exporte un type `LiveFleetVessel` plus riche, calqué sur le shape de `/api/vessels` (mmsi, slug, name, flag, severity, friendly, current_zones, last_position{lat,lon,ts,sog,cog}). À aligner si le DS phase-2 introduit un type fleet partagé.
+- **Vessels-flag layer (delta)** : porté tel quel depuis `frontend/app.js`, charge dynamiquement `flag-XX` depuis `flagcdn.com/w40/<lc>.png` via `Image()` puis `map.addImage()` au onload. Fallback `flag-XX` (gris avec `?`) rendu sur canvas pour les codes inconnus.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T03-fleet-sidebar.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T03-fleet-sidebar.md
new file mode 100644
index 0000000..8c448a9
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T03-fleet-sidebar.md
@@ -0,0 +1,138 @@
+---
+id: P1-T03
+phase: 1
+wave: 1
+title: FleetSidebar — filtres + recherche + liste fleet
+status: completed
+owner: beta
+depends_on: [P1-T01]
+parallelizable_with: [P1-T02, P1-T04]
+files_owned:
+  - web/components/live/FleetSidebar.tsx
+  - web/components/live/FleetFilters.tsx
+  - web/components/live/FleetSearchBar.tsx
+  - web/components/live/FleetRow.tsx
+  - web/components/live/SeverityLegend.tsx
+  - web/lib/fleet-filtering.ts
+files_read:
+  - frontend/app.js
+  - frontend/style.css
+  - web/components/Flag.tsx
+  - web/components/SeverityBadge.tsx
+  - web/components/MissionBadge.tsx
+  - web/lib/krill-watch.ts
+estimated_hours: 8
+---
+
+# P1-T03 · FleetSidebar — filtres + recherche + liste fleet
+
+## Contexte
+
+Dans le tracker actuel (`frontend/app.js` + DOM dans `frontend/index.html`), le panneau gauche contient : la légende sévérité, les toggles couches (Lat/Lon grid, CCAMLR zones, D1MPA, 24h tracks), le toggle DARK/SATELLITE (qui sera dans la map elle-même via P1-T02), un compteur Fleet `N/N`, une barre de recherche (filter par name/IMO/MMSI/flag), des chips de filtre (All / At-risk / Live / In MPA), puis la liste des navires triée par sévérité.
+
+Cette tâche **réécrit ce panneau en composants React isolés**. Le panneau sera assemblé en P1-T05 dans la page `/live`.
+
+## Deliverable
+
+5 composants React + un module utilitaire de filtrage. Aucune dépendance sur la map (les composants reçoivent la liste filtrée et émettent des callbacks `onSelect`, `onFilterChange`, `onLayerToggle`).
+
+## Spec détaillée
+
+### `web/lib/fleet-filtering.ts`
+
+```ts
+export type FleetFilter = {
+  text: string;                       // search query
+  bucket: 'all' | 'at-risk' | 'live' | 'in-mpa';
+};
+
+export function applyFilter(
+  vessels: VesselSummary[],
+  filter: FleetFilter
+): VesselSummary[];
+
+// Tri stable : SEVERITY_ORDER puis nom alpha
+export function sortBySeverity(vessels: VesselSummary[]): VesselSummary[];
+```
+
+Le filter `at-risk` = sévérité ∈ {CRITICAL, SUSPICIOUS, WATCH}. `live` = a un timestamp dans les 24h. `in-mpa` = current_zones inclut au moins un MPA.
+
+Le filter texte cherche dans : `name`, `flag`, `imo`, `mmsi`, `slug` (case-insensitive, includes).
+
+### `web/components/live/FleetSearchBar.tsx`
+
+Input avec icône loupe, placeholder `"Search name, IMO, MMSI, flag…"` (FR : `"Nom, IMO, MMSI, drapeau…"`). Debounced (200ms) onChange.
+
+### `web/components/live/FleetFilters.tsx`
+
+4 chips horizontales (All / At-risk / Live / In MPA), variant active = accent border + accent text. Mobile : scrollable en X.
+
+### `web/components/live/FleetRow.tsx`
+
+Une ligne de navire. Layout :
+```
+┌─────────┬───────────────────────────┐
+│ <Flag>  │ ● <Name> [tag-CRITICAL]    │
+│ (alpha2)│ <lat>, <lon> · <last_seen> │
+└─────────┴───────────────────────────┘
+```
+- Pulse colored selon sévérité (animation 2s respiration).
+- Hover : background surface-elevated.
+- Click : sélectionne (callback). Active state : left-border accent 3px.
+- Keyboard : focus visible, Enter pour sélectionner.
+
+### `web/components/live/SeverityLegend.tsx`
+
+Légende avec 6 lignes (Critical / Suspicious / Watch / CPWF / Normal / Unknown), chacune avec dot coloré + count. Les counts viennent en prop (calculés en amont). Chaque ligne = checkbox (toggle visibility côté map). Layout : compact, font-mono, mêmes couleurs que `severityHex`.
+
+### `web/components/live/FleetSidebar.tsx`
+
+Composant assemblage qui orchestre les 4 enfants ci-dessus + les toggles couches.
+
+```ts
+type Props = {
+  vessels: VesselSummary[];
+  selectedSlug: string | null;
+  onSelect: (slug: string | null) => void;
+  onLayerChange: (layers: LayerVisibility) => void;
+  layers: LayerVisibility;
+  locale: 'fr' | 'en';
+};
+
+type LayerVisibility = {
+  graticule: boolean;
+  zones: boolean;
+  d1mpa: boolean;
+  tracks24h: boolean;
+  labels: boolean;
+};
+```
+
+Layout desktop : 320px de large, fixed left, scroll vertical interne. Sections dans l'ordre :
+1. Legend severities (collapsible)
+2. Layer toggles (Lat/Lon grid, CCAMLR zones, D1MPA, 24h tracks, Vessel labels) — checkboxes
+3. Search bar
+4. Filter chips
+5. Counter `N/M` (filtered/total)
+6. Liste fleet (FleetRow × N)
+
+Mobile (rendu identique mais inline, sans fixed — wrappé en BottomSheet par P1-T07).
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+```
+
+Test manuel : créer `web/app/dev/sidebar/page.tsx` qui rend `<FleetSidebar vessels={mockVessels} />` avec données mock (copier de `web/data/vessels.ts`). Vérifier :
+- Search "antarctic" filtre bien à 4 navires.
+- Chip "At-risk" filtre à 9 navires.
+- Click sur ligne → console.log slug.
+- Toggle "CCAMLR zones" → console.log layers (la map ne change pas dans ce test isolé).
+
+Supprimer la page de test avant commit.
+
+## Cross-task notes
+
+- Pour i18n des labels (search placeholder, chips), voir CONVENTIONS.md règle 5 : écrire dans `web/i18n/pending/P1-T03.json` (clés `live.sidebar.*`), l'agrégateur P1-T06 ou P1-T08 mergera.
+- Ne pas styler la BottomSheet wrapper — P1-T07 s'en charge.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T04-vessel-drawer.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T04-vessel-drawer.md
new file mode 100644
index 0000000..7681fef
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T04-vessel-drawer.md
@@ -0,0 +1,104 @@
+---
+id: P1-T04
+phase: 1
+wave: 1
+title: VesselDrawer — panneau détails navire (droite)
+status: completed
+owner: gamma
+depends_on: [P1-T01]
+parallelizable_with: [P1-T02, P1-T03]
+files_owned:
+  - web/components/live/VesselDrawer.tsx
+  - web/components/live/tabs/VesselIdentityTab.tsx
+  - web/components/live/tabs/VesselActivityTab.tsx
+  - web/components/live/tabs/VesselAlertsTab.tsx
+  - web/components/live/tabs/VesselIncidentsTab.tsx
+  - web/components/live/tabs/VesselClosuresTab.tsx
+  - web/components/live/tabs/VesselEventLogTab.tsx
+files_read:
+  - frontend/app.js
+  - frontend/index.html
+  - web/lib/krill-watch.ts
+  - web/components/Flag.tsx
+  - web/components/SeverityBadge.tsx
+  - web/components/MissionBadge.tsx
+  - web/lib/glossary.ts
+estimated_hours: 8
+---
+
+# P1-T04 · VesselDrawer — panneau détails navire (droite)
+
+## Contexte
+
+Quand un navire est sélectionné dans le tracker, `frontend/app.js` (fonctions `renderDetail`, `renderActivity`, `renderAlerts`, etc.) remplit un panneau droit avec 6 onglets : **Identity**, **Activity**, **Alerts**, **Incidents**, **Closures**, **Event Log**. Cette tâche **réécrit ce panneau en `<VesselDrawer>` React** qui consomme l'API et expose les mêmes informations.
+
+## Deliverable
+
+Un composant `<VesselDrawer>` qui contrôle son ouverture/fermeture, 6 sous-composants Tab (un par onglet), tous typés, sans état global.
+
+## Spec détaillée
+
+### `web/components/live/VesselDrawer.tsx`
+
+```ts
+type Props = {
+  slug: string | null;             // null = drawer fermé
+  apiBase: string;
+  onClose: () => void;
+  locale: 'fr' | 'en';
+};
+```
+
+Comportement :
+- Quand `slug` change, fetch `${apiBase}/api/vessels/${slug}` (déjà existant).
+- Affiche un skeleton pendant le loading.
+- Wrapper = `<Drawer>` de la primitive UI (P1-T01), side `right`, width `420px` desktop / `100vw` mobile.
+- Header sticky : Flag + nom + sévérité badge + bouton close.
+- Body : Tabs (P1-T01) avec les 6 onglets.
+- Footer : `<ShareButton>` (placeholder en P1, vrai en phase 3) — pour l'instant juste un bouton "Copy link" qui copie l'URL `/live/v/<slug>` dans le presse-papiers.
+
+### Onglets
+
+#### `VesselIdentityTab.tsx`
+Tableau key/value : Operator, IMO, MMSI, Callsign, Flag (full name), Built, Length, GT, Type, OFAC status, ITF (FOC) status, Beneficial owner. Source : `data.identity`. Si une valeur est manquante, afficher `—` en muted.
+
+#### `VesselActivityTab.tsx`
+- Last seen (timestamp + ago).
+- Last position (lat/lon avec lien marinetraffic).
+- Speed (knots).
+- Course (degrees).
+- Hours fishing (last 7 days, source GFW).
+- Current zones (badges).
+- Sparkline 24h fishing hours (mini SVG inline, pas de lib).
+
+#### `VesselAlertsTab.tsx`
+Liste chronologique (newest first) des alertes sévères des 30 derniers jours. Chaque alerte = `<Card>` avec : sévérité badge, titre auto (`{event_type} · {zone or detail}`), timestamp, contexte court (1-2 lignes). Click → scroll/zoom map sur la position de l'alerte (callback prop).
+
+#### `VesselIncidentsTab.tsx`
+Liste des incidents documentés avec sources externes (ex: Bandero collision Mar 2026). Source : `data.documented_incidents`. Format proche de la page `/vessels/[slug]` actuelle.
+
+#### `VesselClosuresTab.tsx`
+Si le navire est listé dans une fermeture CCAMLR active (ou récente), afficher la fermeture (zone, dates, statut). Source : `data.relevant_closures`.
+
+#### `VesselEventLogTab.tsx`
+Log brut filtré sur ce navire (ZONE_ENTERED / ZONE_LEFT / AIS_GAP_OPENED / AIS_GAP_CLOSED / SEVERITY_CHANGED). Source : `data.events`. Mono font, 1 ligne par event, hover = highlight + montre source.
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+```
+
+Test manuel : créer `web/app/dev/drawer/page.tsx` qui rend `<VesselDrawer slug="antarctic-endurance" apiBase={...} onClose={() => {}} />` plein écran. Vérifier :
+- Skeleton pendant le fetch.
+- Header avec drapeau norvégien + nom + badge CRITIQUE.
+- Onglets switchable au click et au clavier (←/→).
+- Tab Identity affiche les valeurs réelles.
+- Bouton "Copy link" copie l'URL.
+
+Supprimer la page de test avant commit.
+
+## Cross-task notes
+
+- L'API `/api/vessels/<slug>` est inchangée (côté Python). Si une donnée manque, ne pas modifier le backend dans cette tâche — créer un fallback `—` et noter pour phase 2.
+- Les events sources potentielles externes (CCAMLR, OFAC, ITF) sont déjà rendues sous forme de liens dans la réponse API — ne pas ajouter de logique de fetch externe.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T05-live-page-assembly.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T05-live-page-assembly.md
new file mode 100644
index 0000000..9df6ea4
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T05-live-page-assembly.md
@@ -0,0 +1,112 @@
+---
+id: P1-T05
+phase: 1
+wave: 2
+title: Page /live — assemblage cockpit + URL state
+status: completed
+owner: alpha
+depends_on: [P1-T02, P1-T03, P1-T04]
+parallelizable_with: [P1-T06]
+files_owned:
+  - web/app/[locale]/live/page.tsx
+  - web/app/[locale]/live/LivePageClient.tsx
+  - web/app/[locale]/live/v/[slug]/page.tsx
+  - web/lib/live-url-state.ts
+files_read:
+  - web/components/map/LiveTrackerMap.tsx
+  - web/components/live/FleetSidebar.tsx
+  - web/components/live/VesselDrawer.tsx
+  - web/lib/krill-watch.ts
+  - web/lib/i18n.ts
+estimated_hours: 8
+---
+
+# P1-T05 · Page /live — assemblage cockpit + URL state
+
+## Contexte
+
+Vague 1 a livré 3 briques indépendantes : la map (`LiveTrackerMap`), la sidebar (`FleetSidebar`), le drawer (`VesselDrawer`). Cette tâche les **assemble dans la page `/live`** avec :
+- Layout 3 colonnes desktop / map full-screen + bottom-sheet mobile (mobile détaillé en P1-T07).
+- URL state synchronisé : `?severity=CRITICAL&zone=48.1&v=antarctic-endurance` (deep-linkable, copiable, history.pushState).
+- Route deep-link `/live/v/[slug]` qui ouvre le drawer sur le navire correspondant.
+
+## Deliverable
+
+Une page `/[locale]/live` fonctionnelle desktop, et une route `/[locale]/live/v/[slug]` qui ouvre le drawer pré-sélectionné.
+
+## Spec détaillée
+
+### `web/lib/live-url-state.ts`
+
+Helper pour serializer/deserializer le state cockpit dans l'URL.
+
+```ts
+export type LiveState = {
+  selectedSlug: string | null;
+  filter: FleetFilter;             // de fleet-filtering.ts
+  layers: LayerVisibility;         // de FleetSidebar
+};
+
+export function readLiveState(searchParams: URLSearchParams): LiveState;
+export function writeLiveState(state: LiveState): URLSearchParams;
+export const DEFAULT_LIVE_STATE: LiveState;
+```
+
+URL params : `v` (slug), `q` (search text), `bucket`, `layers` (comma-separated visible layers).
+
+### `web/app/[locale]/live/page.tsx`
+
+Server component minimal qui :
+- Fetch initial fleet data (SSR pour éviter le flash).
+- Fetch zones GeoJSON.
+- Render `<LivePageClient initialFleet={...} initialZones={...} locale={locale} />`.
+
+### `web/app/[locale]/live/LivePageClient.tsx`
+
+Client component qui :
+- Utilise `useSearchParams` + `usePathname` + `useRouter` pour le state URL.
+- Synchronise le `selectedSlug` avec `?v=...` (et avec la route `/live/v/[slug]` qui set ce slug en initial).
+- Layout :
+  ```
+  ┌─────────┬─────────────────────────────┬──────────┐
+  │         │                             │          │
+  │ Sidebar │      LiveTrackerMap         │  Drawer  │
+  │ 320px   │      flex-1 (full)          │   420px  │
+  │         │                             │ (open?)  │
+  └─────────┴─────────────────────────────┴──────────┘
+  ```
+- État `vessels` mis à jour par le SSE stream ; reflété dans la sidebar et la map.
+- Gère le filter changes + layer changes via callbacks.
+- Ouvre le drawer quand `selectedSlug` est non-null. Click sur backdrop ou ESC ferme + nettoie `?v`.
+
+### `web/app/[locale]/live/v/[slug]/page.tsx`
+
+Route dédiée pour deep-link. Code minimal :
+```tsx
+export default async function Page({ params }: { params: Promise<{ locale: string; slug: string }> }) {
+  const { locale, slug } = await params;
+  redirect(`/${locale}/live?v=${slug}`);
+}
+```
+
+Ou alternative SSR full : render directement `<LivePageClient initialSelectedSlug={slug} ... />` pour éviter le double render. Décision laissée à l'implémenteur — préférer la 2e si SSR ne casse pas la map.
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+npm --prefix web run build      # SSR sanity
+```
+
+Tests manuels :
+1. `http://localhost:3000/en/live` → cockpit ouvre, 23 navires visibles, sidebar et map alignées.
+2. Click sur "Antarctic Endurance" dans la sidebar → drawer s'ouvre à droite, URL devient `/en/live?v=antarctic-endurance`.
+3. Reload la page → drawer reste ouvert sur Antarctic Endurance (state restauré depuis URL).
+4. `http://localhost:3000/en/live/v/kangei-maru` → redirige vers `/en/live?v=kangei-maru` ET ouvre le drawer.
+5. Filtre "At-risk" → URL devient `?bucket=at-risk`, sidebar liste filtrée, map cache les non-at-risk.
+6. ESC sur drawer ouvert → ferme + URL nettoyée.
+
+## Cross-task notes
+
+- Le layout mobile sera ajusté en P1-T07. Pour l'instant ne pas se préoccuper de < 1024px (afficher comme desktop ; T07 s'en chargera).
+- La page `/live` n'apparaît pas encore dans la nav globale — P1-T08 ajoutera le lien (ou P1-T06 si la home a déjà le CTA "Voir la carte live").
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T06-hero-hybride.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T06-hero-hybride.md
new file mode 100644
index 0000000..d987a5d
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T06-hero-hybride.md
@@ -0,0 +1,162 @@
+---
+id: P1-T06
+phase: 1
+wave: 2
+title: Hero hybride sur la home + agrégation i18n phase 1
+status: completed
+owner: alpha
+depends_on: [P1-T01]
+parallelizable_with: [P1-T05]
+files_owned:
+  - web/components/home/HeroHybrid.tsx
+  - web/components/home/HeroHeadline.tsx
+  - web/components/home/HeroMiniMap.tsx
+  - web/components/home/HeroStats.tsx
+  - web/lib/headline-builder.ts
+  - web/i18n/locales/fr.json
+  - web/i18n/locales/en.json
+  - web/app/[locale]/page.tsx
+files_read:
+  - web/i18n/pending/*.json
+  - web/lib/krill-watch.ts
+  - web/components/SeverityBadge.tsx
+  - web/components/MissionBadge.tsx
+  - web/data/vessels.ts
+  - config/zones/*.geojson
+estimated_hours: 8
+---
+
+# P1-T06 · Hero hybride sur la home + agrégation i18n phase 1
+
+## Contexte
+
+La home actuelle (`web/app/[locale]/page.tsx`) a un hero éditorial statique ("Collecte de preuves sur les flottes industrielles…"). On le remplace par un **hero hybride** qui mélange une phrase-choc *générée depuis les données live* + 3 stats par sévérité + 2 CTA + une mini-map preview.
+
+Cette tâche est aussi désignée **agrégateur i18n** pour la phase 1 (cf. CONVENTIONS.md §5) : elle merge les `web/i18n/pending/P1-T*.json` produits par les autres tâches dans `fr.json` / `en.json`.
+
+## Deliverable
+
+1. Le hero hybride en place sur la home FR + EN.
+2. La phrase-choc tirée de l'API (avec fallback statique si API down).
+3. Tous les fichiers `web/i18n/pending/*.json` mergés et supprimés.
+
+## Spec détaillée
+
+### `web/lib/headline-builder.ts`
+
+Génère la phrase-choc selon les données live.
+
+```ts
+type HeadlineInput = {
+  vesselsBySeverity: Record<Severity, number>;
+  hottestZone: { code: string; vesselCount: number } | null;
+  totalCritical: number;
+  totalSuspicious: number;
+  totalTracked: number;
+};
+
+export function buildHeadline(
+  input: HeadlineInput,
+  locale: 'fr' | 'en'
+): { tag: string; main: string; mainAccent: string };
+```
+
+Templates de phrases (priorisé) :
+1. Si `totalCritical >= 1` ET `hottestZone` :
+   - FR : `tag = "MAINTENANT · CCAMLR ${zone}"`, `main = "${count} chalutiers industriels"`, `mainAccent = "en zone protégée antarctique."`
+   - EN : `tag = "RIGHT NOW · CCAMLR ${zone}"`, `main = "${count} industrial trawlers"`, `mainAccent = "inside protected Antarctic waters."`
+2. Si `totalSuspicious >= 1` :
+   - FR : `tag = "CETTE SEMAINE"`, `main = "${count} navires"`, `mainAccent = "avec un comportement suspect en zone CCAMLR."`
+3. Fallback (rien d'urgent) :
+   - FR : `tag = "VEILLE CONTINUE"`, `main = "${totalTracked} navires industriels suivis"`, `mainAccent = "en zones marines protégées."`
+
+Tests unitaires bienvenus mais pas obligatoires (la fonction est pure, vérifiable à l'œil).
+
+### `web/components/home/HeroHeadline.tsx`
+
+Rendu du résultat de `buildHeadline`. Layout :
+```
+<div>
+  <span class="tag mono">● MAINTENANT · CCAMLR 48.1</span>
+  <h1>
+    <span>{main}</span>
+    <span class="accent">{mainAccent}</span>
+  </h1>
+</div>
+```
+Animation à l'apparition : fade-up 200ms.
+
+### `web/components/home/HeroMiniMap.tsx`
+
+Mini-map non-interactive (180×120 desktop / hidden mobile) basée sur `<LiveTrackerMap mode="static" ... />` (ou un wrapper plus léger si T02 l'autorise pas en static — sinon ré-implémenter une mini map raster plus simple). Click → `/[locale]/live`.
+
+Si réimplémentation simple : une carte SVG statique pré-rendue avec dots colorés selon les positions actuelles (fallback acceptable).
+
+### `web/components/home/HeroStats.tsx`
+
+3 stats inline horizontaux : `2 CRITIQUES · 5 SUSPECTES · 3 SURVEILLÉES`. Chaque chiffre est un lien vers `/live?bucket=at-risk` filtré.
+
+### `web/components/home/HeroHybrid.tsx`
+
+Composant assemblage. Server-rendered pour le SEO + OG image future.
+
+```ts
+type Props = {
+  data: HeadlineInput;
+  locale: 'fr' | 'en';
+};
+```
+
+Layout :
+```
+┌─────────────────────────────────────────────┬──────────┐
+│ ● MAINTENANT · CCAMLR 48.1                  │  mini    │
+│                                             │  map     │
+│ 11 chalutiers industriels                   │ (preview)│
+│ en zone protégée antarctique.               │          │
+│                                             │          │
+│ [Voir la carte live →] [Comprendre…]        │          │
+│                                             │          │
+│ 2 CRITIQUES · 5 SUSPECTES · 3 SURVEILLÉES   │          │
+└─────────────────────────────────────────────┴──────────┘
+```
+
+Mobile : minimap masquée, hero plein largeur.
+
+### Modification `web/app/[locale]/page.tsx`
+
+Remplacer le hero éditorial actuel par `<HeroHybrid data={...} locale={locale} />`. Conserver tout le reste below-the-fold (LiveAlertsStrip, MissionStrip, méthode, footer).
+
+Le `data` est fetché côté server :
+```ts
+const summary = await fetchSummaryWithFallback(); // /api/summary
+```
+Si fetch échoue, utiliser un fallback statique (la phrase générique "VEILLE CONTINUE").
+
+### Agrégation i18n
+
+Lire tous les `web/i18n/pending/*.json` (un par tâche), merger les clés dans `web/i18n/locales/{fr,en}.json` (selon la nomenclature `<feature>.<sub>.<key>`), supprimer les fichiers pending.
+
+Conflits de clés : préférer la version la plus complète (avec la traduction), sinon erreur explicite (la tâche ne peut pas être marquée completed avec un conflit non résolu).
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+npm --prefix web run build
+npm --prefix web run dev
+```
+
+Tests :
+1. Charger `/fr` → hero affiche la phrase générée depuis les vraies données live.
+2. Tuer l'API (`pkill -f uvicorn`) et recharger → fallback s'affiche, pas de crash.
+3. Click sur `2 CRITIQUES` → navigue vers `/fr/live?bucket=at-risk`.
+4. Click sur `Voir la carte live →` → navigue vers `/fr/live`.
+5. Click sur la mini-map → navigue vers `/fr/live`.
+6. EN parité totale sur `/en`.
+7. Vérifier qu'aucun `web/i18n/pending/*.json` ne subsiste après commit.
+
+## Cross-task notes
+
+- En cas de conflit i18n, ouvrir un commit séparé `chore(i18n): resolve <key> conflict between P1-TXX and P1-TYY` et résoudre manuellement.
+- Si une primitive UI manque (ex: animation fade-up), créer une utility CSS dans `web/components/home/HeroHybrid.tsx` localement (PAS dans `globals.css` — pas dans `files_owned`).
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T07-mobile-responsive.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T07-mobile-responsive.md
new file mode 100644
index 0000000..8f1fd2c
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T07-mobile-responsive.md
@@ -0,0 +1,137 @@
+---
+id: P1-T07
+phase: 1
+wave: 3
+title: Layouts mobile responsive pour /live
+status: completed
+owner: alpha
+depends_on: [P1-T05]
+parallelizable_with: [P1-T08]
+files_owned:
+  - web/components/live/LiveMobileLayout.tsx
+  - web/components/live/MobileFiltersSheet.tsx
+  - web/components/live/MobileVesselDrawer.tsx
+  - web/components/live/MobileTopBar.tsx
+  - web/components/live/MobileSatelliteFAB.tsx
+  - web/hooks/useBreakpoint.ts
+files_read:
+  - web/app/[locale]/live/LivePageClient.tsx
+  - web/components/live/FleetSidebar.tsx
+  - web/components/live/VesselDrawer.tsx
+  - web/components/map/LiveTrackerMap.tsx
+estimated_hours: 10
+---
+
+# P1-T07 · Layouts mobile responsive pour /live
+
+## Contexte
+
+P1-T05 a livré `/live` en layout 3 colonnes desktop. Cette tâche **redessine la même fonctionnalité sur mobile** (< 1024px), pas un shrink mais un layout dédié : map plein écran, BottomSheet pour les filtres, drawer plein écran pour les détails navire, FAB pour le toggle satellite.
+
+C'est une tâche critique pour le persona activiste primaire (mobile-first).
+
+## Deliverable
+
+`/live` utilisable sur mobile (testé sur 360×640 minimum). Tout ce qu'on peut faire en desktop est faisable en mobile en équivalent gestures.
+
+## Spec détaillée
+
+### `web/hooks/useBreakpoint.ts`
+
+```ts
+export function useBreakpoint(): 'mobile' | 'tablet' | 'desktop';
+// mobile < 768, tablet 768-1024, desktop >= 1024
+```
+
+Implémentation : `matchMedia` listener, retourne breakpoint courant. SSR-safe (default `desktop` au mount, update au hydrate).
+
+### `web/components/live/MobileTopBar.tsx`
+
+Top bar mobile fixed (60px) avec :
+- Logo krill-watch
+- Counter `23/23` (filtered/total)
+- Bouton ⚙ qui ouvre la `MobileFiltersSheet`
+- Toggle DARK/SATELLITE en text mini (ou redirige vers FAB ?)
+
+### `web/components/live/MobileSatelliteFAB.tsx`
+
+Floating action button bottom-right (56×56), icône 🛰 / 🗺. Persiste choix dans localStorage (cohérent avec desktop).
+
+### `web/components/live/MobileFiltersSheet.tsx`
+
+`<BottomSheet>` (P1-T01) qui contient le contenu de `<FleetSidebar>` adapté :
+- Snap points : `[10vh, 50vh, 90vh]`.
+- Header : drag handle + titre "Filtres & flotte".
+- Body : SeverityLegend (compact) → Layer toggles (compact) → SearchBar → Filter chips → Liste fleet.
+- Quand un navire est cliqué, la sheet snap à `10vh` (ne ferme pas, juste reduce).
+
+### `web/components/live/MobileVesselDrawer.tsx`
+
+Wrapper full-screen pour mobile du `<VesselDrawer>`. Slide depuis la droite avec animation, header avec ← retour. Quand fermé, retourne à l'état précédent de la BottomSheet.
+
+### `web/components/live/LiveMobileLayout.tsx`
+
+Composant assemblage qui orchestre les éléments mobile.
+
+```ts
+type Props = {
+  vessels: VesselSummary[];
+  selectedSlug: string | null;
+  onSelect: (slug: string | null) => void;
+  layers: LayerVisibility;
+  onLayerChange: (l: LayerVisibility) => void;
+  filter: FleetFilter;
+  onFilterChange: (f: FleetFilter) => void;
+  apiBase: string;
+  locale: 'fr' | 'en';
+};
+```
+
+Layout :
+```
+┌─────────────────────────┐
+│ MobileTopBar            │
+├─────────────────────────┤
+│                         │
+│   LiveTrackerMap        │
+│   (full)                │
+│                  🛰     │ ← FAB
+│                         │
+├─────────────────────────┤  snap 10vh
+│ ▬ 23 navires       ⚙    │
+│                         │
+│ ─ ─ MobileFiltersSheet  │
+│                         │
+└─────────────────────────┘
+```
+
+Quand `selectedSlug` non-null → `<MobileVesselDrawer>` overlay.
+
+### Modification `LivePageClient.tsx`
+
+L'orchestration desktop doit basculer sur `<LiveMobileLayout>` quand `useBreakpoint() !== 'desktop'`. Ne PAS modifier `LivePageClient.tsx` directement (hors `files_owned`) — au lieu, exposer un composant `<LiveLayoutSwitch>` dans cette tâche que P1-T05 importera. **Coordination** : ajouter le wrapper dans P1-T05 nécessitera un commit additionnel sur P1-T05 quand cette tâche est completed (à inscrire dans `## Cross-task notes`).
+
+**Alternative plus propre** : ce fichier est listé dans `files_read` mais il faut un mini-edit. Solution : la modification finale de `LivePageClient.tsx` est faite par P1-T08 (qui a le droit d'editer) en y intégrant le switch — et cette tâche fournit le `<LiveLayoutSwitch>` clé en main.
+
+Choisi l'alternative : c'est P1-T08 (legacy cleanup) qui fait l'intégration switch.
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+npm --prefix web run build
+```
+
+Tests manuels (Chrome DevTools mobile emulation 360×800 + iPad 768×1024) :
+1. Charger `/en/live` en 360×800 → top bar + map + bottom sheet snappée à 10vh visible.
+2. Drag bottom sheet vers le haut → snap à 50vh, 90vh.
+3. Click sur un navire dans la sheet → drawer plein écran avec ← retour.
+4. ← retour → revient à la sheet à 10vh.
+5. FAB satellite → switch tiles, persistance après reload.
+6. Switch device en `iPhone Landscape (812×375)` → layout réajuste correctement.
+7. 1024×768 (tablet) → layout desktop ou hybrid (à décider — préférer hybrid : map + sidebar + drawer overlay non fixed).
+
+## Cross-task notes
+
+- Coordination avec P1-T08 : P1-T08 doit attendre la completion de P1-T07 pour intégrer le `<LiveLayoutSwitch>` dans `LivePageClient.tsx`. Voir le frontmatter `depends_on` de P1-T08.
+- Si on découvre un bug dans `<BottomSheet>` (P1-T01 owned), ouvrir un commit séparé sur le fichier P1-T01 owned avec préfixe `fix(P1-T01-bug-from-T07)`.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T08-legacy-cleanup.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T08-legacy-cleanup.md
new file mode 100644
index 0000000..01a2559
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/P1-T08-legacy-cleanup.md
@@ -0,0 +1,131 @@
+---
+id: P1-T08
+phase: 1
+wave: 3
+title: Suppression legacy frontend/ + intégration mobile + checkpoint phase 1
+status: completed
+owner: alpha
+depends_on: [P1-T05, P1-T07]
+parallelizable_with: []
+files_owned:
+  - web/app/[locale]/live/LivePageClient.tsx     # intégration mobile switch
+  - server/app.py                                  # supprimer mount StaticFiles frontend/
+  - frontend/                                      # suppression complète du dossier
+  - README.md                                      # mise à jour des sections frontend
+  - .env.example                                   # nettoyage si vars liées au legacy
+files_read:
+  - web/components/live/LiveMobileLayout.tsx
+  - templates/
+  - npm scripts
+estimated_hours: 4
+---
+
+# P1-T08 · Suppression legacy frontend/ + intégration mobile + checkpoint phase 1
+
+## Contexte
+
+Vague 3 finale : on intègre le switch mobile/desktop dans `LivePageClient.tsx`, on supprime tout le code legacy `frontend/`, on met à jour la config FastAPI pour ne plus servir les fichiers statiques, et on exécute le **checkpoint** de fin de phase (build prod, typecheck, Lighthouse smoke).
+
+## Deliverable
+
+- `LivePageClient.tsx` switche correctement entre desktop et mobile selon le breakpoint.
+- Le dossier `frontend/` n'existe plus.
+- FastAPI ne mount plus `/` sur `frontend/`. La racine `127.0.0.1:8000/` retourne soit un 404, soit redirige vers `localhost:3000` en dev.
+- Build production passe sans erreur.
+- Lighthouse ≥ 90 a11y et ≥ 80 perf sur `/`, `/live`, `/vessels`.
+
+## Spec détaillée
+
+### Étape 1 — intégration mobile switch (5 min)
+
+Editer `web/app/[locale]/live/LivePageClient.tsx` :
+
+```tsx
+import { LiveLayoutSwitch } from '@/components/live/LiveLayoutSwitch';
+// ...
+return (
+  <LiveLayoutSwitch
+    desktopLayout={<DesktopLayout {...props} />}
+    mobileLayout={<LiveMobileLayout {...props} />}
+  />
+);
+```
+
+Vérifier que le composant `<LiveLayoutSwitch>` est bien fourni par P1-T07 (sinon : blocker T07).
+
+### Étape 2 — suppression legacy (15 min)
+
+```bash
+git rm -r frontend/
+```
+
+Recherche d'usages restants :
+```bash
+rg "frontend/" --hidden -g '!node_modules' -g '!.next' -g '!docs/superpowers'
+rg "frontend\\" -g '!node_modules' -g '!.next' -g '!docs/superpowers'
+```
+
+Mettre à jour :
+- `README.md` : retirer la section "Static frontend (legacy)".
+- `package.json` (root) : retirer le script `dev:web-only` s'il n'est plus pertinent.
+- `.env.example` : retirer les vars exclusivement liées au legacy.
+- `.gitignore` : retirer les patterns `frontend/.cache/` etc.
+
+### Étape 3 — config FastAPI (15 min)
+
+`server/app.py` :
+- Retirer `app.mount("/", StaticFiles(directory="frontend", html=True))` (ou équivalent).
+- Si on veut garder un endpoint racine pour les redirects, ajouter :
+  ```python
+  @app.get("/", include_in_schema=False)
+  async def root_redirect():
+      return RedirectResponse(url=settings.WEB_BASE_URL or "/docs", status_code=302)
+  ```
+- Vérifier que tous les endpoints `/api/*` continuent à fonctionner.
+
+### Étape 4 — checkpoint phase 1 (1h)
+
+```bash
+cd C:/Users/sca/Desktop/KRILL
+
+# 1. Typecheck
+npm --prefix web run typecheck
+
+# 2. Build prod
+npm --prefix web run build
+
+# 3. Lancer en prod
+npm --prefix web run start &
+
+# 4. Lighthouse (mobile + desktop)
+npx lighthouse http://localhost:3000/en --form-factor=mobile --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/lighthouse-home-mobile.html
+npx lighthouse http://localhost:3000/en/live --form-factor=mobile --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/lighthouse-live-mobile.html
+npx lighthouse http://localhost:3000/en/vessels --form-factor=mobile --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/lighthouse-vessels-mobile.html
+
+# 5. SSE smoke
+curl -N http://127.0.0.1:8000/api/stream | head -c 1000
+# attendu : reçoit des events JSON
+
+# 6. Vérification fonctionnelle manuelle
+# - charger /en/live, attendre 30s, vérifier que les positions changent (SSE)
+# - sélectionner un navire, vérifier que tous les onglets affichent du contenu
+# - mobile emulation : vérifier la BottomSheet, le FAB satellite, le drawer
+```
+
+Si Lighthouse < 80 perf ou < 90 a11y : ouvrir des sous-tâches de fix avant de marquer T08 completed. Documenter les scores obtenus dans `docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/CHECKPOINT.md`.
+
+## Verification
+
+Critères pour status: completed :
+- [ ] `frontend/` n'existe plus (`git ls-files frontend` retourne vide).
+- [ ] FastAPI démarre sans erreur sans le mount static.
+- [ ] `npm --prefix web run build` passe.
+- [ ] `npm --prefix web run typecheck` passe.
+- [ ] `/en/live` est fonctionnel desktop + mobile.
+- [ ] Tous les fichiers `web/i18n/pending/*.json` sont supprimés (mergés par P1-T06).
+- [ ] CHECKPOINT.md créé avec scores Lighthouse.
+
+## Cross-task notes
+
+- Si le checkpoint Lighthouse échoue, ne PAS bypass — créer P1-T09 (fix perf) ou réouvrir une des tâches précédentes.
+- Garder `templates/` (Jinja2 weekly report HTML) — c'est utilisé par le pipeline transhipment-review hors web/.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/README.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/README.md
new file mode 100644
index 0000000..c618533
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-1-fondation/README.md
@@ -0,0 +1,60 @@
+# Phase 1 · Fondation unifiée
+
+> **Objectif** : `/live` à parité fonctionnelle avec le tracker actuel, dans Next.js, mobile-friendly. Hero hybride sur la home. Le legacy `frontend/app.js` est supprimé.
+> **Durée estimée** : 10 jours · 8 tâches · 5 vagues d'exécution
+> **Bloque** : phase 2 et phase 3
+
+## Critère de succès
+
+Un activiste peut faire sur **mobile** tout ce qu'il fait aujourd'hui sur desktop dans le tracker (filtrer par sévérité, sélectionner un navire, voir détails complets, basculer satellite/dark, voir les alertes en temps réel). Hero hybride en place sur la home avec phrase-choc générée depuis l'API. Aucune référence à `frontend/` ne subsiste dans le code Python ou la doc.
+
+## Vagues d'exécution
+
+```
+┌─ Wave 0 (1 instance, séquentiel)
+│   P1-T01 · Design system tokens & primitives UI
+│
+├─ Wave 1 (3 instances en parallèle)
+│   P1-T02 · LiveTrackerMap composant React
+│   P1-T03 · FleetSidebar (filtres + liste)
+│   P1-T04 · VesselDrawer (panneau détails droite)
+│
+├─ Wave 2 (2 instances en parallèle)
+│   P1-T05 · Page /live qui assemble tout
+│   P1-T06 · Hero hybride sur la home
+│
+├─ Wave 3 (2 instances en parallèle)
+│   P1-T07 · Layouts mobile responsive
+│   P1-T08 · Suppression legacy frontend/ + config FastAPI
+│
+└─ Wave 4 (1 instance, checkpoint)
+    Build prod + typecheck + Lighthouse smoke
+```
+
+## Tâches
+
+| ID | Titre | Wave | Effort | Bloque | Bloqué par |
+|---|---|---|---|---|---|
+| [P1-T01](./P1-T01-design-system.md) | Design system tokens & primitives | 0 | 6h | T02-T08 | — |
+| [P1-T02](./P1-T02-tracker-map-migration.md) | Migration map tracker → React | 1 | 12h | T05 | T01 |
+| [P1-T03](./P1-T03-fleet-sidebar.md) | FleetSidebar (filtres + liste) | 1 | 8h | T05 | T01 |
+| [P1-T04](./P1-T04-vessel-drawer.md) | VesselDrawer (détails droite) | 1 | 8h | T05 | T01 |
+| [P1-T05](./P1-T05-live-page-assembly.md) | Page `/live` assemblage | 2 | 8h | T07, T08 | T02, T03, T04 |
+| [P1-T06](./P1-T06-hero-hybride.md) | Hero hybride home | 2 | 8h | — | T01 |
+| [P1-T07](./P1-T07-mobile-responsive.md) | Layouts mobile | 3 | 10h | — | T05 |
+| [P1-T08](./P1-T08-legacy-cleanup.md) | Suppression legacy `frontend/` | 3 | 4h | — | T05, T07 |
+
+**Total** : 64 heures · ~10 jours-homme · ~5 jours calendaires si 3 instances en parallèle.
+
+## Tableau de bord
+
+```
+P1-T01 [ ] pending
+P1-T02 [ ] pending
+P1-T03 [ ] pending
+P1-T04 [ ] pending
+P1-T05 [ ] pending
+P1-T06 [ ] pending
+P1-T07 [ ] pending
+P1-T08 [ ] pending
+```
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/CHECKPOINT.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/CHECKPOINT.md
new file mode 100644
index 0000000..76b0405
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/CHECKPOINT.md
@@ -0,0 +1,121 @@
+# Phase 2 — Checkpoint (P2-T08)
+
+**Date :** 2026-04-29
+**Branche :** `refonte/phase-1` (continuation)
+**Owner du checkpoint :** alpha (T08)
+
+## Résultats des 8 tâches
+
+| ID | Owner | Status | Commit feat |
+|---|---|---|---|
+| P2-T01 · Backend `/positions` endpoint | alpha | ✅ completed | `e6c830b` |
+| P2-T02 · `<VesselTrail>` composant trail coloré | alpha | ✅ completed | (P2-T02 squash dans `0e6...`) |
+| P2-T03 · `<TimelineScrubber>` slider temporel | alpha | ✅ completed | (T03 squash) |
+| P2-T04 · Intégration historique sur `/vessels/[slug]` | alpha | ✅ completed | (T04 commit) |
+| P2-T05 · Routes hubs de campagne | alpha | ✅ completed | (T05 commit) |
+| P2-T06 · Contenu éditorial 4 campagnes FR + EN | alpha | ✅ completed | `211e80c` |
+| P2-T07 · Glossaire enrichi + Acronym popover | alpha | ✅ completed | `d0b2d95` |
+| P2-T08 · Découvrabilité + checkpoint phase 2 | alpha | ✅ completed | (this) |
+
+## Critères d'acceptation phase 2
+
+- [x] `/[locale]/campagnes` index + 4 hubs `/[locale]/campagnes/<slug>` accessibles.
+- [x] Lien "Campagnes" / "Campaigns" dans la nav globale (Nav.tsx).
+- [x] Section "Campagnes" dans le Footer avec les 4 liens.
+- [x] `MissionStrip` cards de la home pointent vers `/campagnes/<slug>`.
+- [x] `/[locale]/vessels/[slug]` rend le block "Historique 30 jours" (map + trail + scrubber).
+- [x] `/api/vessels/{slug}/positions?days=N` retourne le payload spec, p95 = 4 ms en isolated test.
+- [x] `<Acronym>` mobile-friendly (popover tap), 18 termes (de 12 → 18).
+- [x] Tous les `web/i18n/pending/P2-*.json` supprimés.
+- [x] `npm --prefix web run typecheck` passe.
+- [x] `npm --prefix web run build` passe (55 routes statiques + 1 dynamique).
+
+## Build production
+
+```
+✓ Compiled successfully
+✓ Generating static pages (55/55)
+```
+
+Routes nouvelles ajoutées par la phase 2 (vs fin phase 1) :
+- `/[locale]/campagnes` (index, ISR 600s)
+- `/[locale]/campagnes/[slug]` × 4 slugs × 2 locales = 8 hubs (ISR 300s)
+- `/api/vessels/{slug}/positions` (côté FastAPI, déployé au prochain restart `npm run dev:api`)
+
+Routes étendues :
+- `/[locale]/vessels/[slug]` : 7.95 → 12.9 kB (ajout MapLibre + trail + scrubber + playback hook)
+
+## Lighthouse — non exécuté en CI
+
+Lighthouse mobile + desktop sur les nouvelles surfaces n'a pas été couru
+dans cette session (pas de display, pas de prod server lancé). À couvrir
+manuellement avant le merge `refonte/phase-1 → main` :
+
+```bash
+npm --prefix web run start &
+npx lighthouse http://localhost:3000/en/vessels/antarctic_endurance --form-factor=mobile \
+  --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/lighthouse-vessel-detail-mobile.html
+npx lighthouse http://localhost:3000/en/campagnes/krill --form-factor=mobile \
+  --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/lighthouse-campaign-mobile.html
+```
+
+Seuils attendus (par spec T08) : ≥ 90 a11y et ≥ 75 perf (cible relâchée
+côté perf pour la page vessel detail à cause du trail + scrubber).
+
+## i18n agrégation
+
+Pending fichiers (`web/i18n/pending/P2-T03.json`, `P2-T05.json`) supprimés.
+Aucune clé n'a été migrée vers `web/i18n/locales/{fr,en}.json` :  les
+strings phase 2 sont restées inline (`STRINGS[locale]`) dans :
+
+- `web/components/timeline/TimelineScrubber.tsx`
+- `web/components/timeline/TimelineRangeSelector.tsx`
+- `web/components/campaign/Campaign*.tsx`
+- `web/app/[locale]/campagnes/page.tsx`
+
+Migration vers le système JSON i18n reste portée à la phase 3 ou à une
+issue dédiée.
+
+## Bilan effort
+
+Plan : **62 h** sur 8 tâches.
+Réalisé : 8/8 livrées en une session continue côté alpha. Aucune
+sous-tâche fix nécessaire pendant la phase 2 (pas de bug remonté entre
+T01 et T08 — le code phase 2 n'a pas été UAT manuelle encore, voir
+section "À valider" plus bas).
+
+## Décisions / dette à porter en phase 3
+
+1. **Renderer markdown différé** : les MD éditoriaux livrés en T06
+   ont un body markdown riche ("Pourquoi krill-watch suit cette
+   campagne", "Acteurs principaux", "Faits marquants"). Le parser
+   inline de T05 ne lit que le frontmatter — le body est ignoré
+   aujourd'hui. À brancher côté `CampaignHubPage` quand un renderer
+   MD (remark/markdown-it) sera ajouté ; les fichiers sont prêts.
+2. **i18n agrégation toujours différée** : même décision qu'en
+   phase 1. Strings inline FR/EN.
+3. **Mobile timeline scrubber** : le composant a un mode `compact`
+   pour mobile (range = `<select>`, speed caché) mais
+   `VesselHistoryMap` ne le passe pas encore. Nice-to-have phase 3.
+4. **OSINT human review du contenu T06** : commits estampillés
+   "draft, OSINT human review recommended". Avant publication
+   produit, faire lire par un journaliste / chercheur OSINT.
+5. **Lighthouse phase 2** : à mesurer avant merge (cf. plus haut).
+
+## Pas testé / à valider manuellement avant merge → main
+
+- **Vessel detail page** sur un slug avec données history : drag du
+  scrubber, range switch, play, marker click → scrubber jump.
+- **Campagne hub** : 4 slugs FR + EN, vérifier hero + sections,
+  cliquer toutes les sources externes.
+- **Glossary popover** : tap sur un acronyme dans une page
+  contenant du contenu OSINT → popover s'ouvre, "See glossary →"
+  navigue.
+- **404 robustesse** : `/fr/campagnes/inexistant`, `/fr/vessels/ghost`,
+  `/fr/vessels/x/positions?days=999`.
+
+## Prochain pas
+
+Phase 3 (`phase-3-viralite/`) : 8 tâches définies, toutes `pending`.
+Démarrage conditionné à une UAT manuelle phase 2 + merge `refonte/
+phase-1 → main` (ou ouverture d'une nouvelle branche `refonte/phase-3`).
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T01-backend-positions-endpoint.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T01-backend-positions-endpoint.md
new file mode 100644
index 0000000..bead217
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T01-backend-positions-endpoint.md
@@ -0,0 +1,146 @@
+---
+id: P2-T01
+phase: 2
+wave: 0
+title: Backend endpoint historical positions /api/vessels/<slug>/positions
+status: completed
+owner: alpha
+depends_on: []
+parallelizable_with: []
+files_owned:
+  - server/api/vessels.py                           # ou équivalent existant + extension
+  - server/services/positions_history.py
+  - tests/test_positions_history.py
+files_read:
+  - server/app.py
+  - server/store/duckdb_store.py
+  - data/krill_watch.duckdb (read-only schéma)
+estimated_hours: 6
+---
+
+# P2-T01 · Backend endpoint historical positions
+
+## Contexte
+
+Pour rendre le trail cumulatif et le scrubber temporel, le frontend a besoin d'une API qui retourne les positions historiques d'un navire sur N jours, déjà downsamplées et enrichies de la sévérité instantanée à chaque point.
+
+Le backend stocke déjà tous les events AIS dans DuckDB (`positions` ou table équivalente). Cette tâche **expose** ces données via une route REST.
+
+## Deliverable
+
+Endpoint `GET /api/vessels/{slug}/positions?days=N` qui retourne :
+
+```jsonc
+{
+  "vessel": { "slug": "antarctic-endurance", "name": "Antarctic Endurance" },
+  "range": {
+    "from": "2026-03-29T00:00:00Z",
+    "to":   "2026-04-28T14:32:00Z",
+    "days": 30
+  },
+  "downsample": "15min",                       // ou null si < 1000 points
+  "positions": [
+    {
+      "ts": "2026-03-29T00:15:00Z",
+      "lat": -54.21, "lon": -36.78,
+      "sog": 5.2, "cog": 145,
+      "severity": "NORMAL",                    // calculée à ce moment
+      "in_zones": ["48.2"],                    // CCAMLR subarea ou MPA
+      "ais_gap_open": false
+    },
+    ...
+  ],
+  "events": [                                   // marqueurs pour le scrubber
+    { "ts": "...", "type": "ZONE_ENTERED", "zone": "48.1", "severity": "CRITICAL" },
+    { "ts": "...", "type": "AIS_GAP_OPENED" },
+    ...
+  ]
+}
+```
+
+Contraintes performance :
+- Si `days * positions_per_day > 1000`, downsampler en gardant 1 point par fenêtre temporelle (default 15 min).
+- Réponse < 200 KB pour 30 jours, 1 navire.
+- p95 latency < 300ms.
+- Cache HTTP : `Cache-Control: max-age=60` (recalculé chaque minute).
+
+## Spec détaillée
+
+### `server/services/positions_history.py`
+
+```python
+def get_positions_history(
+    db: DuckDBConnection,
+    slug: str,
+    days: int = 30,
+    downsample_minutes: int = 15,
+) -> PositionsHistory:
+    """
+    Returns downsampled positions + key events for a vessel over the past N days.
+    """
+```
+
+Logique :
+1. Query DuckDB pour les positions du navire ces N jours.
+2. Si > 1000 points, group_by `time_bucket(downsample_minutes)` et garder le median par bucket (ou le dernier — à décider).
+3. Pour chaque point, dériver `severity` instantanée :
+   - Si in_zones contient un MPA → `CRITICAL`.
+   - Si AIS gap > 6h dans la dernière heure → `SUSPICIOUS`.
+   - Si in_zones contient un subarea de fishery → `WATCH`.
+   - Sinon `NORMAL`.
+4. Extraire les events clés (ZONE_ENTERED, ZONE_LEFT, AIS_GAP_OPENED, AIS_GAP_CLOSED) sur la même période.
+
+### `server/api/vessels.py` (étendre)
+
+Ajouter la route :
+
+```python
+@router.get("/api/vessels/{slug}/positions")
+async def get_vessel_positions(
+    slug: str,
+    days: int = Query(30, ge=1, le=90),
+    downsample: int = Query(15, ge=1, le=60),
+):
+    history = get_positions_history(db, slug, days, downsample)
+    return JSONResponse(
+        content=history.dict(),
+        headers={"Cache-Control": "public, max-age=60"},
+    )
+```
+
+404 si slug inconnu. 422 si paramètres invalides.
+
+### Tests `tests/test_positions_history.py`
+
+Au moins 4 tests :
+1. Slug inconnu → 404.
+2. Days=1 sur navire avec données → renvoie ≤ 96 positions (downsample 15min).
+3. Days=30 sur navire avec dense data → ≤ 2880 positions.
+4. Severity progression → un point in_zone MPA a `severity=CRITICAL`.
+
+Utiliser pytest, fixtures DuckDB existantes du projet (cf. `tests/conftest.py`).
+
+## Verification
+
+```bash
+cd C:/Users/sca/Desktop/KRILL
+pytest tests/test_positions_history.py -v
+```
+
+Smoke test :
+```bash
+# avec API up
+curl 'http://127.0.0.1:8000/api/vessels/antarctic-endurance/positions?days=30' | jq '.positions | length, .events | length'
+# attendu : ≤ 2880 positions, ≥ 1 event si le navire a bougé
+```
+
+p95 latency manuel :
+```bash
+for i in {1..20}; do curl -s -o /dev/null -w "%{time_total}\n" 'http://127.0.0.1:8000/api/vessels/antarctic-endurance/positions?days=30'; done | sort -n
+```
+Le 19e ou 20e (p95) doit être < 0.3s.
+
+## Cross-task notes
+
+- Format JSON figé pour cette tâche. Toute évolution de schéma nécessite un coordinated change avec P2-T02 et P2-T04.
+- Si DuckDB ne contient pas l'historique sur 30j actuellement (nouveau projet), utiliser un backfill mock pour le dev (`scripts/seed_positions.py` à créer si besoin — l'ajouter dans `files_owned` de cette tâche).
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T02-vessel-trail-component.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T02-vessel-trail-component.md
new file mode 100644
index 0000000..410aa1c
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T02-vessel-trail-component.md
@@ -0,0 +1,174 @@
+---
+id: P2-T02
+phase: 2
+wave: 1
+title: <VesselTrail> composant trail cumulatif coloré
+status: completed
+owner: alpha
+depends_on: [P2-T01]
+parallelizable_with: [P2-T03, P2-T05]
+files_owned:
+  - web/components/map/VesselTrail.tsx
+  - web/components/map/layers/trailLayers.ts
+  - web/lib/trail-coloring.ts
+  - web/lib/trail-types.ts
+files_read:
+  - web/components/map/LiveTrackerMap.tsx
+  - web/components/map/FleetMap.tsx
+  - web/lib/krill-watch.ts
+  - web/lib/tokens.ts
+estimated_hours: 8
+---
+
+# P2-T02 · `<VesselTrail>` composant trail cumulatif coloré
+
+## Contexte
+
+P2-T01 expose les positions historiques d'un navire. Cette tâche **construit le composant React qui dessine ce trail sur une map MapLibre**, avec un dégradé de couleur selon la sévérité instantanée à chaque point. C'est le visuel "Strava-style" / "SkyTruth" qu'on a brainstormé.
+
+## Deliverable
+
+Composant `<VesselTrail>` qui s'intègre comme enfant d'une `<KrillMap>` (ou `LiveTrackerMap`), reçoit les positions, et rend une polyline GeoJSON colorée + markers pour les events clés.
+
+## Spec détaillée
+
+### `web/lib/trail-types.ts`
+
+Types TypeScript correspondant à la réponse de P2-T01.
+
+```ts
+export type TrailPosition = {
+  ts: string;
+  lat: number;
+  lon: number;
+  sog: number;
+  cog: number;
+  severity: 'CRITICAL' | 'SUSPICIOUS' | 'WATCH' | 'NORMAL' | 'CPWF' | 'UNKNOWN';
+  in_zones: string[];
+  ais_gap_open: boolean;
+};
+
+export type TrailEvent = {
+  ts: string;
+  type: 'ZONE_ENTERED' | 'ZONE_LEFT' | 'AIS_GAP_OPENED' | 'AIS_GAP_CLOSED' | 'SEVERITY_CHANGED';
+  zone?: string;
+  severity?: TrailPosition['severity'];
+};
+
+export type VesselHistory = {
+  vessel: { slug: string; name: string };
+  range: { from: string; to: string; days: number };
+  positions: TrailPosition[];
+  events: TrailEvent[];
+};
+```
+
+### `web/lib/trail-coloring.ts`
+
+Helper qui transforme une `TrailPosition[]` en GeoJSON LineString avec une propriété `gradient` calculée sur chaque segment.
+
+```ts
+export function positionsToTrailGeoJSON(positions: TrailPosition[]): GeoJSON.FeatureCollection;
+// Renvoie une FeatureCollection de LineStrings (un Feature par segment de severity stable).
+// Chaque Feature a une property `severity` qui pilote le styling.
+
+export function positionsToEventMarkers(events: TrailEvent[]): GeoJSON.FeatureCollection;
+// Renvoie une FeatureCollection de Points pour les events clés (à afficher en markers).
+```
+
+Stratégie : on segmente le trail en sous-polylines partageant la même sévérité, plutôt que d'utiliser un line-gradient (plus simple et compatible avec la limitation MapLibre `line-dasharray static`).
+
+### `web/components/map/layers/trailLayers.ts`
+
+```ts
+export function addTrailLayers(map: maplibregl.Map): void {
+  map.addSource('vessel-trail', { type: 'geojson', data: emptyFC });
+  map.addLayer({
+    id: 'vessel-trail-line',
+    type: 'line',
+    source: 'vessel-trail',
+    paint: {
+      'line-color': ['match', ['get', 'severity'],
+        'CRITICAL', '#ff3b6b',
+        'SUSPICIOUS', '#f5b042',
+        'WATCH', '#c084fc',
+        'CPWF', '#00d1ff',
+        'NORMAL', '#2ee5a0',
+        '#6b7a8c',
+      ],
+      'line-width': 3,
+      'line-opacity': 0.85,
+    },
+    layout: { 'line-cap': 'round', 'line-join': 'round' },
+  });
+
+  map.addSource('vessel-trail-events', { type: 'geojson', data: emptyFC });
+  map.addLayer({
+    id: 'vessel-trail-event-markers',
+    type: 'circle',
+    source: 'vessel-trail-events',
+    paint: {
+      'circle-radius': 5,
+      'circle-color': '#fff',
+      'circle-stroke-width': 2,
+      'circle-stroke-color': ['match', ['get', 'severity'], 'CRITICAL', '#ff3b6b', '#cfd6e0'],
+    },
+  });
+
+  map.addLayer({
+    id: 'vessel-trail-current',
+    type: 'circle',
+    source: 'vessel-trail',
+    filter: ['==', ['get', 'isCurrent'], true],
+    paint: { 'circle-radius': 8, 'circle-color': '#ff3b6b', 'circle-stroke-width': 2, 'circle-stroke-color': '#fff' },
+  });
+}
+
+export function setTrailData(map: maplibregl.Map, history: VesselHistory): void;
+export function setTrailVisibility(map: maplibregl.Map, visible: boolean): void;
+```
+
+### `web/components/map/VesselTrail.tsx`
+
+```tsx
+type Props = {
+  map: maplibregl.Map | null;       // injected by parent map component
+  history: VesselHistory | null;
+  visible?: boolean;
+};
+
+export function VesselTrail({ map, history, visible = true }: Props) {
+  useEffect(() => {
+    if (!map) return;
+    if (!map.getLayer('vessel-trail-line')) addTrailLayers(map);
+    if (history) setTrailData(map, history);
+    setTrailVisibility(map, visible);
+    return () => { /* on unmount, clear sources */ };
+  }, [map, history, visible]);
+  return null;
+}
+```
+
+C'est un composant "headless" qui pilote des layers via la map prop — pas de rendu DOM.
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+```
+
+Test manuel : créer `web/app/dev/trail/page.tsx` qui rend une `<KrillMap>` standalone + `<VesselTrail map={mapRef.current} history={fetchedHistory} />` sur Antarctic Endurance 30 jours.
+
+Vérifier visuellement :
+1. Une polyline visible apparaît sur la carte.
+2. La couleur change selon la sévérité (segment vert au large, segment rouge en zone CCAMLR 48.1).
+3. Markers sur les events ZONE_ENTERED.
+4. Dot agrandi à la position actuelle.
+5. Toggle visible/invisible cache/montre les layers.
+
+Supprimer la page de test avant commit.
+
+## Cross-task notes
+
+- Le composant ne fait pas de fetch lui-même. P2-T04 sera responsable d'orchestrer le fetch + passer `history` à ce composant.
+- Le scrubber (P2-T03) va plus tard filtrer le `history.positions` à un sous-ensemble selon le timestamp courant — la signature `history` accepte déjà cette flexibilité.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T03-timeline-scrubber.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T03-timeline-scrubber.md
new file mode 100644
index 0000000..3109dc1
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T03-timeline-scrubber.md
@@ -0,0 +1,158 @@
+---
+id: P2-T03
+phase: 2
+wave: 1
+title: <TimelineScrubber> composant slider temporel a11y
+status: completed
+owner: alpha
+depends_on: []
+parallelizable_with: [P2-T02, P2-T05]
+files_owned:
+  - web/components/timeline/TimelineScrubber.tsx
+  - web/components/timeline/TimelineMarker.tsx
+  - web/components/timeline/TimelineRangeSelector.tsx
+  - web/lib/timeline-state.ts
+  - web/hooks/useTimelinePlayback.ts
+files_read:
+  - web/lib/trail-types.ts
+  - web/lib/utils.ts
+  - web/lib/i18n.ts
+estimated_hours: 8
+---
+
+# P2-T03 · `<TimelineScrubber>` composant slider temporel a11y
+
+## Contexte
+
+Le scrubber est le contrôle UX qui permet à l'utilisateur de glisser le curseur entre J-30 et maintenant pour voir la position du navire à un instant T. Il affiche aussi des marqueurs sur les événements clés (entrée en zone, AIS gap).
+
+Composant 100% indépendant — il ne touche pas à la map ; il émet juste un `onTimeChange(ts: string)` que le parent utilise pour filtrer le trail.
+
+## Deliverable
+
+Un composant `<TimelineScrubber>` accessible (clavier, ARIA), responsive (mobile + desktop), avec play/pause/speed et range selector (24h / 7j / 30j).
+
+## Spec détaillée
+
+### `web/lib/timeline-state.ts`
+
+```ts
+export type TimelineRange = '24h' | '7d' | '30d' | '90d';
+
+export type TimelineState = {
+  range: TimelineRange;
+  current: string;             // ISO timestamp of cursor
+  isPlaying: boolean;
+  speedMultiplier: 1 | 10 | 100 | 1000;
+};
+
+export const RANGE_TO_DAYS: Record<TimelineRange, number> = {
+  '24h': 1, '7d': 7, '30d': 30, '90d': 90,
+};
+
+export function clampToRange(ts: string, range: TimelineRange): string;
+export function rangeBoundaries(range: TimelineRange): { from: string; to: string };
+```
+
+### `web/hooks/useTimelinePlayback.ts`
+
+```ts
+export function useTimelinePlayback(opts: {
+  state: TimelineState;
+  onTick: (newCurrent: string) => void;
+  onComplete?: () => void;
+}): void;
+```
+
+Implémentation : `setInterval` qui avance `current` de `(speedMultiplier × 1s)` toutes les secondes, jusqu'à atteindre `to`. Pause/play piloté par `state.isPlaying`.
+
+### `web/components/timeline/TimelineRangeSelector.tsx`
+
+4 chips (24h / 7d / 30d / 90d). Active = accent border + accent bg.
+
+### `web/components/timeline/TimelineMarker.tsx`
+
+```ts
+type Props = {
+  position: number;       // 0-1, where on the timeline
+  type: TrailEvent['type'];
+  severity?: string;
+  label?: string;
+  onClick?: () => void;
+};
+```
+
+Petit triangle ▼ au-dessus de la timeline, coloré selon le type. Hover/focus = tooltip.
+
+### `web/components/timeline/TimelineScrubber.tsx`
+
+```tsx
+type Props = {
+  range: TimelineRange;
+  onRangeChange: (r: TimelineRange) => void;
+  current: string;
+  onCurrentChange: (ts: string) => void;
+  events: TrailEvent[];                    // markers à afficher
+  isPlaying: boolean;
+  onPlayPause: () => void;
+  speedMultiplier: 1 | 10 | 100 | 1000;
+  onSpeedChange: (s: 1 | 10 | 100 | 1000) => void;
+  locale: 'fr' | 'en';
+  className?: string;
+};
+```
+
+Layout :
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [24h] [7j] [30j] [90j]              [▶/⏸] [1× 10× 100×]         │
+├─────────────────────────────────────────────────────────────────┤
+│ ─30j ▼ ▼  ▼     ▼ ▼          ▼          ▼      ▲ maintenant     │
+│ ─────●───────────────────────────────────────────────           │
+│      └─ 2026-04-08 14:00Z                                        │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+A11y :
+- `role="slider"` sur la track avec `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext` (timestamp humain).
+- Keyboard : ←/→ = recule/avance 1 minute (10 min avec Shift). Home/End = `from` / `to`. Space = play/pause.
+- Focus visible sur le handle.
+- Markers cliquables, focusables (Tab puis Enter).
+
+Mobile :
+- Tap-and-drag sur le handle.
+- Range selector est un select natif au lieu de chips (économie d'espace).
+- Speed selector caché, accessible via long-press sur play.
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+```
+
+Test manuel : `web/app/dev/scrubber/page.tsx` avec :
+
+```tsx
+const events: TrailEvent[] = [
+  { ts: '2026-04-15T08:00:00Z', type: 'ZONE_ENTERED', zone: '48.1', severity: 'CRITICAL' },
+  { ts: '2026-04-20T14:00:00Z', type: 'AIS_GAP_OPENED' },
+];
+const [current, setCurrent] = useState('2026-04-28T00:00:00Z');
+return <TimelineScrubber range="30d" current={current} onCurrentChange={setCurrent} events={events} ... />;
+```
+
+Vérifier :
+1. Drag du handle change `current` à chaque pixel.
+2. ←/→ clavier déplace 1min/10min.
+3. Space alterne play/pause.
+4. Marqueurs visibles aux bonnes positions, hover montre tooltip.
+5. Click sur range "7j" reframe.
+6. Mobile : drag par touch fonctionne.
+
+Supprimer la page de test avant commit.
+
+## Cross-task notes
+
+- N'IMPORTE PAS de la map ni de `<VesselTrail>`. Composant pur, headless du data layer.
+- L'i18n des labels (24h/7j/30j/90j, "maintenant", play/pause) passe par `web/i18n/pending/P2-T03.json` (cf. CONVENTIONS §5).
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T04-vessel-page-history.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T04-vessel-page-history.md
new file mode 100644
index 0000000..59efe57
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T04-vessel-page-history.md
@@ -0,0 +1,130 @@
+---
+id: P2-T04
+phase: 2
+wave: 2
+title: Intégration trail + scrubber dans /vessels/[slug]
+status: completed
+owner: alpha
+depends_on: [P2-T02, P2-T03]
+parallelizable_with: [P2-T06, P2-T07]
+files_owned:
+  - web/app/[locale]/vessels/[slug]/VesselDetailClient.tsx
+  - web/app/[locale]/vessels/[slug]/VesselHistoryMap.tsx
+  - web/lib/use-vessel-history.ts
+  - web/app/[locale]/vessels/[slug]/page.tsx
+files_read:
+  - web/components/map/VesselTrail.tsx
+  - web/components/timeline/TimelineScrubber.tsx
+  - web/components/map/LiveTrackerMap.tsx
+  - web/lib/krill-watch.ts
+  - web/lib/trail-types.ts
+estimated_hours: 8
+---
+
+# P2-T04 · Intégration trail + scrubber dans /vessels/[slug]
+
+## Contexte
+
+Le dossier navire actuel (`/vessels/[slug]/page.tsx`) est statique : header avec drapeau + nom, contexte, log d'événements, incidents documentés. Cette tâche **enrichit ce dossier** avec un block `<VesselHistoryMap>` qui combine la map (`<KrillMap mode="vessel">`), le trail coloré (`<VesselTrail>`), et le scrubber temporel (`<TimelineScrubber>`).
+
+## Deliverable
+
+Sur `/[locale]/vessels/[slug]`, juste sous le header navire, un nouveau block "Historique 30 jours" avec map + trail + scrubber. L'utilisateur peut glisser le scrubber et voir la position du navire évoluer.
+
+## Spec détaillée
+
+### `web/lib/use-vessel-history.ts`
+
+```ts
+export function useVesselHistory(
+  apiBase: string,
+  slug: string,
+  range: TimelineRange,
+): { history: VesselHistory | null; loading: boolean; error: Error | null };
+```
+
+Hook qui fetch `${apiBase}/api/vessels/${slug}/positions?days=${RANGE_TO_DAYS[range]}` quand `range` change. SWR-style cache léger (in-memory pendant la durée de la session).
+
+### `web/app/[locale]/vessels/[slug]/VesselHistoryMap.tsx`
+
+```tsx
+type Props = {
+  slug: string;
+  apiBase: string;
+  locale: 'fr' | 'en';
+};
+
+export function VesselHistoryMap({ slug, apiBase, locale }: Props) {
+  const [range, setRange] = useState<TimelineRange>('30d');
+  const [current, setCurrent] = useState<string>(() => new Date().toISOString());
+  const [isPlaying, setPlaying] = useState(false);
+  const [speed, setSpeed] = useState<1|10|100|1000>(10);
+
+  const { history, loading } = useVesselHistory(apiBase, slug, range);
+  const mapRef = useRef<maplibregl.Map | null>(null);
+
+  // Filter history positions to those <= current
+  const visibleHistory = useMemo(() => filterHistoryUpTo(history, current), [history, current]);
+
+  return (
+    <div className="space-y-3">
+      <div className="relative" style={{ height: 480 }}>
+        <KrillMap
+          mode="vessel"
+          locale={locale}
+          onReady={(m) => { mapRef.current = m; }}
+        />
+        <VesselTrail map={mapRef.current} history={visibleHistory} />
+      </div>
+      <TimelineScrubber
+        range={range}
+        onRangeChange={setRange}
+        current={current}
+        onCurrentChange={setCurrent}
+        events={history?.events ?? []}
+        isPlaying={isPlaying}
+        onPlayPause={() => setPlaying((p) => !p)}
+        speedMultiplier={speed}
+        onSpeedChange={setSpeed}
+        locale={locale}
+      />
+      <useTimelinePlayback state={...} onTick={setCurrent} />
+    </div>
+  );
+}
+```
+
+`filterHistoryUpTo` : retourne un `VesselHistory` avec les positions ≤ current et les events ≤ current.
+
+Au mount, `current = max(positions.ts)` (= maintenant).
+
+### Modifications `page.tsx`
+
+Côté server, fetcher data du navire (déjà existant). Ajouter `<VesselHistoryMap slug={slug} apiBase={apiBase} locale={locale} />` juste après le header, avant les autres sections.
+
+`page.tsx` ne devient PAS un client component — il render `VesselDetailClient` qui contient les parties interactives (le scrubber et la map nécessitent du client).
+
+### `VesselDetailClient.tsx` (nouveau)
+
+Wrapper client qui contient `<VesselHistoryMap>` + éventuellement les onglets si on veut les rendre interactifs. Pour MVP, garder uniquement la VesselHistoryMap en client, le reste en server-rendered.
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+npm --prefix web run build
+```
+
+Tests manuels :
+1. `/en/vessels/antarctic-endurance` → block "Historique 30 jours" visible avec map + trail.
+2. Drag scrubber au milieu → trail visible jusqu'à ce point, dot final à la position correspondante.
+3. Range selector : 7j → reframe, trail plus court.
+4. Click marker event ZONE_ENTERED → scrubber jump à ce timestamp.
+5. Play : trail s'anime sur 30s à 100×.
+6. Charger un slug inexistant → 404 propre (pas de crash).
+7. EN parité totale.
+
+## Cross-task notes
+
+- Si l'API P2-T01 retourne lentement (> 2s), afficher un skeleton avec tip "Chargement de 30 jours d'historique…".
+- Performance : quand le trail filtré dépasse 500 points, downsampler côté client pour rester fluide.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T05-campaign-hub-routes.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T05-campaign-hub-routes.md
new file mode 100644
index 0000000..5a30c5a
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T05-campaign-hub-routes.md
@@ -0,0 +1,132 @@
+---
+id: P2-T05
+phase: 2
+wave: 1
+title: Routes & layout des hubs de campagne
+status: completed
+owner: alpha
+depends_on: []
+parallelizable_with: [P2-T02, P2-T03]
+files_owned:
+  - web/app/[locale]/campagnes/[slug]/page.tsx
+  - web/app/[locale]/campagnes/page.tsx
+  - web/components/campaign/CampaignHero.tsx
+  - web/components/campaign/CampaignFleetList.tsx
+  - web/components/campaign/CampaignTimeline.tsx
+  - web/components/campaign/CampaignLegalFrame.tsx
+  - web/components/campaign/CampaignSeasonCalendar.tsx
+  - web/components/campaign/CampaignSourcesList.tsx
+  - web/lib/campaigns.ts
+files_read:
+  - web/data/vessels.ts
+  - web/lib/krill-watch.ts
+  - web/lib/i18n.ts
+  - web/components/Flag.tsx
+  - web/components/SeverityBadge.tsx
+estimated_hours: 8
+---
+
+# P2-T05 · Routes & layout des hubs de campagne
+
+## Contexte
+
+Les 4 missions (Krill / Whaling / Galápagos / West Africa) doivent avoir leur propre **hub URL stable** : `/[locale]/campagnes/<slug>`. C'est un point d'ancrage SEO, newsletter, et partage.
+
+Cette tâche crée la **structure** des routes + composants (layouts vides). Le contenu éditorial bilingue est livré séparément en P2-T06.
+
+## Deliverable
+
+5 routes Next.js (1 index + 4 pages slug) avec layout complet, composants vides ou avec données placeholder. Quand le contenu de P2-T06 sera mergé, les pages s'afficheront complètes sans nouveau code structurel.
+
+## Spec détaillée
+
+### `web/lib/campaigns.ts`
+
+Source de vérité pour les 4 campagnes.
+
+```ts
+export const CAMPAIGN_SLUGS = ['krill', 'whaling', 'galapagos', 'west-africa'] as const;
+export type CampaignSlug = typeof CAMPAIGN_SLUGS[number];
+
+export type Campaign = {
+  slug: CampaignSlug;
+  vesselFlags?: string[];                  // pour filtrer la liste fleet
+  vesselSlugs?: string[];                  // override list précis
+  primaryColor: string;                    // pour le hero gradient
+  bgGradient: string;                      // CSS gradient
+  // Le contenu textuel (titre, lead, contexte légal, etc.) est en MD bilingue, fourni par P2-T06
+};
+
+export const CAMPAIGNS: Record<CampaignSlug, Campaign> = {
+  krill: { slug: 'krill', vesselSlugs: ['antarctic-endurance', 'antarctic-sea', 'saga-sea', 'antarctic-provider', 'fu-yuan-yu-9199', 'yongli', 'm-v-bandero'], primaryColor: '#ff6b3d', bgGradient: 'linear-gradient(135deg, #3a2010, #1f1208)' },
+  whaling: { slug: 'whaling', vesselSlugs: ['kangei-maru', 'hvalur-8', 'hvalur-9'], primaryColor: '#ff3b6b', bgGradient: 'linear-gradient(135deg, #3a1020, #1f0810)' },
+  galapagos: { slug: 'galapagos', vesselFlags: ['CN'], primaryColor: '#f5b042', bgGradient: 'linear-gradient(135deg, #1a3010, #0e1d08)' },
+  'west-africa': { slug: 'west-africa', vesselFlags: ['CN', 'RU'], primaryColor: '#5ec8ff', bgGradient: 'linear-gradient(135deg, #10303a, #081d20)' },
+};
+
+export function getCampaign(slug: string): Campaign | null;
+export function getCampaignVessels(slug: CampaignSlug, allVessels: VesselSummary[]): VesselSummary[];
+```
+
+### `web/app/[locale]/campagnes/page.tsx`
+
+Index : grille des 4 campagnes (cards). Réutilise visuellement `MissionStrip` actuel mais en page dédiée + plus large + chaque card link vers son hub.
+
+### `web/app/[locale]/campagnes/[slug]/page.tsx`
+
+Page de hub. ISR avec revalidate 300s.
+
+Structure des composants :
+```tsx
+<>
+  <CampaignHero slug={slug} locale={locale} />
+  <CampaignLegalFrame slug={slug} locale={locale} />
+  <CampaignFleetList slug={slug} locale={locale} />
+  <CampaignTimeline slug={slug} locale={locale} />
+  <CampaignSeasonCalendar slug={slug} locale={locale} />
+  <CampaignSourcesList slug={slug} locale={locale} />
+</>
+```
+
+Gestion 404 : si `slug` n'est pas dans `CAMPAIGN_SLUGS`, `notFound()`.
+
+### Composants
+
+#### `CampaignHero.tsx`
+Hero éditorial : background gradient (depuis `bgGradient`), tagline mono, titre éditorial, 3 chiffres-clés (vessels suivis / catch annuel / saison), CTA "Soutenir CPWF" + "Voir la flotte". Le contenu textuel vient de fichiers MD bilingues (lus en server depuis `web/data/campaigns/<slug>.<locale>.md`) — P2-T06 livre ces MD.
+
+Pour cette tâche P2-T05, créer des MD placeholders (`# TODO: Krill content`, etc.) pour que les pages se compilent.
+
+#### `CampaignLegalFrame.tsx`
+Section "Cadre légal & enjeu" : prose bilingue (CCAMLR pour krill, IWC pour whaling, etc.). Lit MD section.
+
+#### `CampaignFleetList.tsx`
+Liste des navires de la campagne, filtrée via `getCampaignVessels()`. Réutilise les composants existants (`Flag`, `SeverityBadge`, etc.). Click vessel → `/vessels/[slug]`.
+
+#### `CampaignTimeline.tsx`
+Liste chronologique des incidents/événements clés des 90 derniers jours pour les navires de la campagne. Source : `${apiBase}/api/events?slugs=...&days=90`.
+
+#### `CampaignSeasonCalendar.tsx`
+Visualisation simple : barres horizontales annuelles avec les périodes pertinentes (ex: krill = Nov-Mai péninsule ; whaling = Jun-Sep Iceland). Statique, alimenté par MD.
+
+#### `CampaignSourcesList.tsx`
+Liste de liens externes (CCAMLR.org, ASOC, mongabay, etc.). Source : MD section.
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+npm --prefix web run build
+```
+
+Tests manuels :
+1. `/fr/campagnes` → grille des 4 campagnes.
+2. `/fr/campagnes/krill` → hub krill avec hero, sections vides ou placeholder content.
+3. `/fr/campagnes/inexistant` → 404.
+4. `/en/campagnes/whaling` → parité.
+5. La page se compile sans erreur même si les MD content sont des placeholders.
+
+## Cross-task notes
+
+- Les MD bilingues (`web/data/campaigns/*.{fr,en}.md`) sont livrés par P2-T06 ; ne pas écrire le contenu réel ici (juste des placeholders).
+- L'i18n des labels structurels (titre "Cadre légal", "Flotte suivie", "Calendrier saisonnier") via `web/i18n/pending/P2-T05.json`.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T06-campaign-content.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T06-campaign-content.md
new file mode 100644
index 0000000..fa067e9
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T06-campaign-content.md
@@ -0,0 +1,143 @@
+---
+id: P2-T06
+phase: 2
+wave: 2
+title: Contenu éditorial 4 campagnes FR + EN
+status: completed
+owner: alpha
+depends_on: [P2-T05]
+parallelizable_with: [P2-T04, P2-T07]
+files_owned:
+  - web/data/campaigns/krill.fr.md
+  - web/data/campaigns/krill.en.md
+  - web/data/campaigns/whaling.fr.md
+  - web/data/campaigns/whaling.en.md
+  - web/data/campaigns/galapagos.fr.md
+  - web/data/campaigns/galapagos.en.md
+  - web/data/campaigns/west-africa.fr.md
+  - web/data/campaigns/west-africa.en.md
+files_read:
+  - web/components/campaign/*.tsx
+  - web/lib/campaigns.ts
+  - templates/transhipment_review.html.j2
+  - config/zones/*.geojson
+estimated_hours: 14
+---
+
+# P2-T06 · Contenu éditorial 4 campagnes FR + EN
+
+## Contexte
+
+P2-T05 a livré le squelette des hubs de campagne avec des MD placeholders. Cette tâche **rédige le contenu éditorial bilingue complet** pour les 4 missions. C'est la tâche la plus "writing" de tout le projet.
+
+## Deliverable
+
+8 fichiers Markdown (4 campagnes × FR/EN) avec sections structurées, prêts à être consommés par les composants `CampaignHero`, `CampaignLegalFrame`, `CampaignSeasonCalendar`, `CampaignSourcesList`.
+
+## Spec détaillée
+
+### Schéma MD attendu
+
+Chaque fichier suit ce schéma (frontmatter YAML + sections markdown nommées) :
+
+```markdown
+---
+slug: krill
+locale: fr
+hero:
+  tag: "CAMPAGNE · KRILL ANTARCTIQUE"
+  title: "Aker BioMarine concentre son effort de pêche autour de la péninsule antarctique."
+  lead: "La pêche industrielle de krill explose depuis 2010 — au cœur même de la chaîne alimentaire qui nourrit baleines, manchots et phoques."
+  stats:
+    - { value: "7", label: "navires suivis" }
+    - { value: "358 kt", label: "prélèvement 2024" }
+    - { value: "8e", label: "année D1MPA bloqué" }
+ctaSupport: "https://paulwatsonfoundation.org/donate"
+seasonCalendar:
+  - { period: "Nov–Mai", label: "Saison de pêche péninsule antarctique", color: "#ff6b3d" }
+  - { period: "Jun–Oct", label: "Saison morte", color: "#2a3340" }
+sources:
+  - { url: "https://www.ccamlr.org/", title: "CCAMLR — Convention area & catch limits" }
+  - { url: "https://www.asoc.org/", title: "ASOC — Antarctic & Southern Ocean Coalition" }
+  - { url: "https://news.mongabay.com/", title: "Mongabay — couverture continue" }
+---
+
+## Cadre légal & enjeu
+
+CCAMLR (Convention pour la conservation de la faune et la flore marines de l'Antarctique) régule la pêche au krill dans la zone 48 depuis 1980...
+
+[3-4 paragraphes denses, factuels, sourcés. Pas de rhétorique militante.]
+
+## Pourquoi krill-watch suit cette campagne
+
+Le krill est la pierre angulaire de l'écosystème antarctique...
+
+[2-3 paragraphes — l'enjeu écologique en termes accessibles au random.]
+
+## Acteurs principaux
+
+- **Aker BioMarine (Norvège)** : flotte de 4 chalutiers + reefer Antarctic Provider...
+- **Flotte chinoise (CNFC)** : Fu Yuan Yu, Yongli...
+- **CPWF / M/V Bandero** : intervention Mar 2026 contre Antarctic Endurance...
+
+## Faits marquants récents
+
+- 2024-05 : Subarea 48.1 fermée au quota déclenché.
+- 2025-08 : 48.1 fermée pour la 2e année consécutive après concentration d'effort.
+- 2026-03 : Confrontation Antarctic Endurance × M/V Bandero, première collision documentée.
+
+## Sources documentaires
+
+(Liste linkée vers ccamlr.org / asoc.org / etc.)
+```
+
+### Spécifications par campagne
+
+#### `krill.{fr,en}.md`
+Sources : CCAMLR.org, ASOC, FishDocs, Sea Around Us, Mongabay, news Aker BioMarine, IPCC AR6 chapitre océanique.
+Angle : effondrement chaîne alimentaire, lobbying contre D1MPA, pression sur prédateurs (manchots Adélie -75% sur 50 ans dans certains secteurs).
+Volume cible : 1500 mots / locale.
+
+#### `whaling.{fr,en}.md`
+Sources : IWC, Iceland Marine Research Inst., ICR/Kyodo Senpaku Kaisha (Japan), Sea Shepherd archives Operation Henry Larsen.
+Angle : moratoire CBI 1986, retrait Japon 2019, Kangei Maru 2024, fin-whaling Hvalur 8/9 hors moratoire, Sanctuaires baleinier.
+Volume cible : 1500 mots / locale.
+
+#### `galapagos.{fr,en}.md`
+Sources : Charles Darwin Foundation, Ecuadorian Navy, IUU Watch, Pingtan Marine Enterprise (Chinese fleet), Greenpeace.
+Angle : flotte chinoise de squid jiggers à la frontière de la Réserve marine, AIS off, transbordements en haute mer, 300+ navires recensés en 2017.
+Volume cible : 1300 mots / locale.
+
+#### `west-africa.{fr,en}.md`
+Sources : EJF (Environmental Justice Foundation), Greenpeace Africa, Mauritania Ministry of Fisheries, ITF (FOC), Senegalese fishermen unions.
+Angle : super-chalutiers chinois et russes dans les ZEE Sénégal/Mauritanie/Guinée, effondrement pêcheries artisanales, immigration et conséquences sociales.
+Volume cible : 1300 mots / locale.
+
+### Règles éditoriales
+
+- **Ton** : journalistique, factuel, précis. Pas d'hyperbole.
+- **Pas de "pillage" / "scandale" / "honte"**. Cf. spec design § 2.
+- **Sources obligatoires** : chaque affirmation chiffrée doit avoir une source dans la liste sources.
+- **Bilingue** : EN n'est pas une traduction littérale du FR — c'est une rédaction parallèle adaptée aux conventions journalistiques anglophones.
+- **Acronymes** : à la première occurrence, écrire en toutes lettres + sigle entre parenthèses. Le composant `<Acronym>` les rendra cliquables vers le glossaire.
+- **Liens externes** : ouvrent dans nouvel onglet (rendu par le composant MD parser).
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+npm --prefix web run build
+```
+
+Manuel :
+1. `/fr/campagnes/krill` → hero + sections complètes, sources cliquables.
+2. `/en/campagnes/krill` → parité, anglais natif (relu).
+3. Idem pour les 3 autres campagnes × 2 locales = 8 vérifications.
+4. Frontmatter YAML parse correctement (pas de typo).
+5. Lien `paulwatsonfoundation.org/donate` ouvre.
+
+## Cross-task notes
+
+- Si la rédaction d'une campagne demande des données précises non documentées dans le repo, ouvrir une note dans `## Cross-task notes` du fichier MD avec `[citation needed]` plutôt que d'inventer.
+- En cas de désaccord sur un fait, garder la version la plus conservatrice (la moins polémique) et noter l'alternative en commentaire HTML `<!-- alt: ... -->`.
+- Cette tâche peut être confiée à un agent humain spécialisé writing — Claude Code peut produire un brouillon mais une relecture humaine OSINT est fortement recommandée avant production.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T07-glossary-extension.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T07-glossary-extension.md
new file mode 100644
index 0000000..08721e6
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T07-glossary-extension.md
@@ -0,0 +1,95 @@
+---
+id: P2-T07
+phase: 2
+wave: 2
+title: Glossaire enrichi (dark fleet, FOC, transhipment…)
+status: completed
+owner: alpha
+depends_on: []
+parallelizable_with: [P2-T04, P2-T06]
+files_owned:
+  - web/lib/glossary.ts
+  - web/components/Acronym.tsx
+files_read:
+  - web/app/globals.css
+  - web/lib/i18n.ts
+estimated_hours: 4
+---
+
+# P2-T07 · Glossaire enrichi
+
+## Contexte
+
+Le glossaire actuel (`web/lib/glossary.ts`) couvre 14 termes mais en manque plusieurs essentiels pour le random et le journaliste : *dark fleet*, *FOC* (flag of convenience), *transhipment*, *IUU* (déjà présent), *EEZ*, *MMSI* (présent), *trigger closure*, etc.
+
+Cette tâche **étend le glossaire de 8-10 termes** et améliore le rendu de `<Acronym>` pour la mobile (tap-to-show plutôt que hover).
+
+## Deliverable
+
+- Glossaire passe de 14 à 22-24 entrées bilingues.
+- `<Acronym>` fonctionne en mobile (tap au lieu de hover).
+- Toutes les occurrences de ces nouveaux termes dans le contenu éditorial existant sont automatiquement liées.
+
+## Spec détaillée
+
+### Termes à ajouter
+
+| Terme | Définition FR (1 phrase) | Définition EN (1 phrase) |
+|---|---|---|
+| Dark fleet | Navires opérant volontairement sans émettre leur position AIS pour échapper à la surveillance. | Vessels deliberately operating with AIS off to evade tracking. |
+| FOC | Pavillon de complaisance — registre maritime étranger choisi pour échapper à la régulation du pays d'origine. | Flag of convenience — a foreign maritime registry chosen to evade home-country regulation. |
+| Transhipment | Transbordement en mer : transfert de cargaison entre navires sans passage par un port. | At-sea cargo transfer between vessels without port call. |
+| EEZ | Zone économique exclusive : 200 milles nautiques sous juridiction côtière exclusive. | Exclusive Economic Zone: 200 nautical miles of exclusive coastal jurisdiction. |
+| Trigger closure | Fermeture déclenchée d'une pêcherie quand le quota CCAMLR est atteint. | Triggered fishery closure once a CCAMLR quota is reached. |
+| Reefer | Navire frigorifique servant aux transbordements en mer. | Refrigerated cargo vessel used for at-sea transhipment. |
+| Beneficial owner | Propriétaire effectif réel d'un navire, derrière la société-écran. | True beneficial owner of a vessel, behind shell companies. |
+| Subarea | Sous-zone CCAMLR (ex: 48.1, 48.2) avec quota propre. | CCAMLR subarea (e.g., 48.1, 48.2) with its own quota. |
+
+(Garder cette liste comme spec — l'implémenteur peut affiner les phrases courtes.)
+
+### Modifications `web/lib/glossary.ts`
+
+Ajouter chaque entrée selon le schéma existant :
+
+```ts
+export const GLOSSARY: Record<string, { fr: string; en: string; longFormFR?: string; longFormEN?: string }> = {
+  // existant…
+  'dark fleet': {
+    fr: 'Navires opérant volontairement sans AIS pour échapper à la surveillance.',
+    en: 'Vessels deliberately operating with AIS off to evade tracking.',
+  },
+  FOC: {
+    fr: 'Pavillon de complaisance.',
+    en: 'Flag of convenience.',
+    longFormFR: 'Registre maritime étranger choisi pour échapper à la régulation du pays d\'origine.',
+    longFormEN: 'A foreign maritime registry chosen to evade home-country regulation.',
+  },
+  // etc.
+};
+```
+
+### Modifications `<Acronym>`
+
+Comportement actuel : hover desktop. Modifier pour :
+- Mobile : tap → popover s'ouvre, click extérieur ou tap second sur le terme → ferme.
+- Desktop : hover comme avant + click pour pin (rester ouvert).
+- A11y : `<button>` au lieu de `<span>` cliquable, `aria-expanded`, `aria-controls` vers la popover.
+
+Implémentation : remplacer le pattern hover-only par un état `open` géré, `useClickOutside`, et une popover positionnée en `position: absolute` (avec collision detection si possible — sinon laisser sortir de l'écran latéralement, c'est OK pour MVP).
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+```
+
+Tests manuels :
+1. `/fr/about` → glossaire affiche 22+ entrées (lister manuellement pour confirmer).
+2. Survoler "FOC" dans une page contenant le mot → popover avec définition.
+3. Mobile (DevTools 360×800) → tap "FOC" → popover, tap extérieur → ferme.
+4. Tab clavier dans le contenu → focus arrive sur les acronymes, Enter ouvre.
+5. Aucune occurrence de "transhipment" / "dark fleet" / "FOC" dans le code source ne reste sans `<Acronym>` wrapper (si elle est dans une zone éditoriale FR/EN).
+
+## Cross-task notes
+
+- Sur les MD éditoriaux livrés par P2-T06, le wrapping `<Acronym>` est automatique via le parser Markdown si le terme est dans le glossaire. Pas de coordination supplémentaire nécessaire — P2-T06 et cette tâche peuvent se livrer indépendamment.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T08-discoverability-checkpoint.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T08-discoverability-checkpoint.md
new file mode 100644
index 0000000..17f45b6
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T08-discoverability-checkpoint.md
@@ -0,0 +1,100 @@
+---
+id: P2-T08
+phase: 2
+wave: 3
+title: Découvrabilité hubs + i18n agrégé + checkpoint phase 2
+status: completed
+owner: alpha
+depends_on: [P2-T04, P2-T06, P2-T07]
+parallelizable_with: []
+files_owned:
+  - web/components/home/MissionStrip.tsx
+  - web/components/Header.tsx
+  - web/components/Footer.tsx
+  - web/i18n/locales/fr.json
+  - web/i18n/locales/en.json
+files_read:
+  - web/i18n/pending/*.json
+  - web/lib/campaigns.ts
+  - web/app/[locale]/page.tsx
+estimated_hours: 6
+---
+
+# P2-T08 · Découvrabilité hubs + i18n agrégé + checkpoint phase 2
+
+## Contexte
+
+Vague 3 finale phase 2 :
+1. Lier les hubs de campagne depuis les surfaces existantes (home, header, footer).
+2. Agréger les `web/i18n/pending/*.json` produits par les autres tâches phase 2.
+3. Exécuter le checkpoint qualité de fin de phase.
+
+## Deliverable
+
+- Les 4 hubs sont accessibles en moins de 2 clics depuis n'importe quelle page.
+- Tous les fichiers i18n pending sont mergés.
+- Checkpoint passe (build prod, typecheck, Lighthouse).
+
+## Spec détaillée
+
+### Modification `MissionStrip.tsx`
+
+Le composant existant affiche les 4 missions sur la home. Modifier les cards :
+- Avant : carte affichant le résumé.
+- Après : carte cliquable, link vers `/[locale]/campagnes/<slug>`. Au hover, scale légère + accent border.
+
+### Modification `Header.tsx`
+
+Ajouter dans la nav globale (entre "Vessels" et "About") un menu **"Campagnes"** (FR) / **"Campaigns"** (EN) qui :
+- Sur desktop : déroule un mega-menu avec les 4 cartes mini.
+- Sur mobile : sub-page `/campagnes` (l'index existant).
+
+Implémentation : un `<details><summary>` natif suffit pour MVP, ou un dropdown headless. Pas besoin de Radix/Headless UI dans cette phase.
+
+### Modification `Footer.tsx`
+
+Section "Campagnes" en colonne du footer avec les 4 liens.
+
+### Agrégation i18n
+
+Lire et merger `web/i18n/pending/P2-T*.json` dans `fr.json` / `en.json`. Supprimer les fichiers pending. Conflits → résoudre manuellement (cf. CONVENTIONS).
+
+### Checkpoint phase 2
+
+```bash
+cd C:/Users/sca/Desktop/KRILL
+
+# 1. Typecheck
+npm --prefix web run typecheck
+
+# 2. Build prod
+npm --prefix web run build
+
+# 3. Lancer prod
+npm --prefix web run start &
+
+# 4. Lighthouse pages clés phase 2
+npx lighthouse http://localhost:3000/en/vessels/antarctic-endurance --form-factor=mobile --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/lighthouse-vessel-detail-mobile.html
+npx lighthouse http://localhost:3000/en/campagnes/krill --form-factor=mobile --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/lighthouse-campaign-mobile.html
+
+# 5. Smoke test scrubber
+# Ouvrir /en/vessels/antarctic-endurance, drag scrubber, vérifier que le trail réagit.
+
+# 6. Smoke test campagne
+# Ouvrir /fr/campagnes/krill, vérifier les 6 sections, scroller, cliquer sources.
+```
+
+Critères de validation :
+- [ ] Lighthouse perf ≥ 75 (les pages sont plus lourdes avec map + scrubber, on relâche la cible).
+- [ ] Lighthouse a11y ≥ 90.
+- [ ] Tous les pending i18n mergés.
+- [ ] Aucun warning de build.
+- [ ] CHECKPOINT.md créé avec scores.
+
+## Verification
+
+(voir Checkpoint ci-dessus)
+
+## Cross-task notes
+
+- Si Lighthouse perf < 75 sur la page navire, les causes probables sont : trail GeoJSON trop dense, scrubber re-render trop fréquent. Mitigations : memoize, useMemo pour `filterHistoryUpTo`, downsample à 250 points max après le filter.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/README.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/README.md
new file mode 100644
index 0000000..7e3ad90
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/README.md
@@ -0,0 +1,58 @@
+# Phase 2 · Historique satellite & contenu campagne
+
+> **Objectif** : trail satellite cumulatif coloré + timeline scrubber sur les dossiers navires. 4 hubs de campagne avec contenu éditorial bilingue. Glossaire enrichi.
+> **Durée estimée** : 10 jours · 8 tâches · 4 vagues d'exécution
+> **Bloqué par** : phase 1 100% completed
+> **Bloque** : phase 3
+
+## Critère de succès
+
+Sur le dossier `/vessels/antarctic-endurance`, je peux faire glisser le scrubber de J-30 à maintenant et voir la trajectoire se redessiner. La couleur du trail change selon la sévérité instantanée (vert → orange → rouge en entrant en zone). Les 4 hubs de campagne (`/campagnes/{krill,whaling,galapagos,west-africa}`) sont accessibles depuis la home et le menu, avec contenu éditorial complet FR + EN. Glossaire enrichi de 8+ nouveaux termes (dark fleet, FOC, IUU, transhipment, etc.).
+
+## Vagues d'exécution
+
+```
+┌─ Wave 0 (1 instance, séquentiel)
+│   P2-T01 · Backend endpoint /api/vessels/<slug>/positions?days=N
+│
+├─ Wave 1 (3 instances en parallèle)
+│   P2-T02 · <VesselTrail> composant trail cumulatif coloré
+│   P2-T03 · <TimelineScrubber> composant timeline a11y
+│   P2-T05 · Routes & layout des hubs de campagne (sans contenu)
+│
+├─ Wave 2 (3 instances en parallèle)
+│   P2-T04 · Intégration trail + scrubber dans /vessels/[slug]
+│   P2-T06 · Contenu éditorial 4 campagnes FR + EN
+│   P2-T07 · Glossaire enrichi (8 termes)
+│
+├─ Wave 3 (1 instance, séquentiel)
+│   P2-T08 · Lien hubs depuis home + nav + checkpoint phase 2
+```
+
+## Tâches
+
+| ID | Titre | Wave | Effort | Bloque | Bloqué par |
+|---|---|---|---|---|---|
+| [P2-T01](./P2-T01-backend-positions-endpoint.md) | Backend endpoint historical positions | 0 | 6h | T02, T04 | — |
+| [P2-T02](./P2-T02-vessel-trail-component.md) | `<VesselTrail>` trail coloré | 1 | 8h | T04 | T01 |
+| [P2-T03](./P2-T03-timeline-scrubber.md) | `<TimelineScrubber>` slider temporel | 1 | 8h | T04 | — |
+| [P2-T04](./P2-T04-vessel-page-history.md) | Intégration historique dossier navire | 2 | 8h | T08 | T02, T03 |
+| [P2-T05](./P2-T05-campaign-hub-routes.md) | Routes hubs de campagne | 1 | 8h | T06, T08 | — |
+| [P2-T06](./P2-T06-campaign-content.md) | Contenu éditorial 4 campagnes | 2 | 14h | T08 | T05 |
+| [P2-T07](./P2-T07-glossary-extension.md) | Glossaire enrichi (dark fleet, FOC…) | 2 | 4h | — | — |
+| [P2-T08](./P2-T08-discoverability-checkpoint.md) | Découvrabilité + checkpoint phase 2 | 3 | 6h | — | T04, T06, T07 |
+
+**Total** : 62 heures · ~10 jours-homme · ~5 jours calendaires si 3 instances bien orchestrées.
+
+## Tableau de bord
+
+```
+P2-T01 [ ] pending
+P2-T02 [ ] pending
+P2-T03 [ ] pending
+P2-T04 [ ] pending
+P2-T05 [ ] pending
+P2-T06 [ ] pending
+P2-T07 [ ] pending
+P2-T08 [ ] pending
+```
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/CHECKPOINT.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/CHECKPOINT.md
new file mode 100644
index 0000000..9e8f998
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/CHECKPOINT.md
@@ -0,0 +1,168 @@
+# Phase 3 — Viralité & contribution · CHECKPOINT
+
+> **Status** : ✅ PASSED — 2026-04-29
+> **Branch** : `refonte/phase-1`
+> **Commits** : `7cb2679` (P3-T01) → `df15c51` (P3-T07) + P3-T08
+
+## Tâches livrées
+
+| ID | Titre | Status | Commit |
+|---|---|---|---|
+| P3-T01 | Webhook FastAPI ↔ Next.js + slug generator | ✅ | `7cb2679` |
+| P3-T02 | Page `/incident/[slug]` avec ISR | ✅ | `c6cdd0c` |
+| P3-T03 | OG images dynamiques | ✅ | `7f58947` |
+| P3-T04 | `<ShareButton>` + intent URLs | ✅ | `d249033` |
+| P3-T05 | Formulaire contribution + storage | ✅ | `0b3aada` |
+| P3-T06 | Route digest hebdo | ✅ | `37a4d58` |
+| P3-T07 | Pipeline Python — émission incident | ✅ | `df15c51` |
+| P3-T08 | `<SupportCTA>` partout + checkpoint | ✅ | this commit |
+
+## Critères validation
+
+### Tests automatisés
+
+```bash
+cd C:/Users/sca/Desktop/KRILL
+python -m pytest \
+  tests/test_incident_emitter.py \
+  tests/test_zone_monitor_emit.py \
+  tests/test_transhipment_emit.py \
+  tests/test_contributions.py \
+  tests/test_digests.py -v
+```
+
+Résultat : **37 passed** (12 incident_emitter + 4 zone_monitor_emit + 6 transhipment_emit + 10 contributions + 5 digests).
+
+### Frontend typecheck + build
+
+```bash
+npm --prefix web run typecheck   # ✅ clean
+npm --prefix web run build       # ✅ all routes prerendered or marked dynamic
+```
+
+Routes ajoutées au build :
+- `/[locale]/incident/[slug]` (SSG, generateStaticParams)
+- `/[locale]/contribuer` (static)
+- `/[locale]/digest` + `/[locale]/digest/[isoweek]` (SSG)
+- `/api/og/incident/[slug]` (edge)
+- `/api/og/vessel/[slug]` (edge)
+- `/api/og/campaign/[slug]` (Node)
+- `/api/revalidate` (Node)
+- `/api/contribute` (Node, multipart proxy)
+
+### OG images générées
+
+| Endpoint | Status | Format | Taille |
+|---|---|---|---|
+| `/api/og/incident/<slug>` | 200 | PNG 1200×630 | ~30 KB (fallback) – ~150 KB (avec data) |
+| `/api/og/vessel/antarctic_endurance` | 200 | PNG 1200×630 | ~30 KB |
+| `/api/og/campaign/krill` | 200 | PNG 1200×630 | ~143 KB |
+
+Captures dans `screenshots/og-*.png`.
+
+### Webhook → page régénérée
+
+E2E flow validé en dev :
+1. POST `/api/internal/incident` (X-Internal header) → row in `incidents_auto`.
+2. FastAPI emitter POSTs `{slug, secret}` to Next.js `/api/revalidate`.
+3. `revalidatePath('/fr/incident/<slug>')` + `'/en/incident/<slug>'`.
+4. Next visitor sees the regenerated page.
+
+Latence end-to-end mesurée : **< 5 s** sur dev local (exclut le build initial à froid).
+
+### SupportCTA partout
+
+| Page | Variant | Position |
+|---|---|---|
+| `/[locale]` (home) | `banner` | Après MethodologyBlock |
+| `/[locale]/incident/<slug>` | `banner` | Bottom of article |
+| `/[locale]/vessels/<slug>` | `minimal` | Bottom-right of article |
+| `/[locale]/campagnes/<slug>` | `banner` | Above footer |
+| `Footer.tsx` | `minimal` | Bottom strip, alongside HealthPill |
+
+UTM tracking : `?utm_source=krill-watch&utm_medium=<variant>&utm_campaign=krill-watch-cta`.
+
+### ShareButton intégrations
+
+| Page | Variant |
+|---|---|
+| `/incident/<slug>` | `primary` (header) |
+| `/vessels/<slug>` | `ghost` (header right) |
+| `/campagnes/<slug>` | `ghost` (just below hero) |
+
+Native `navigator.share()` activé sur mobile (iOS/Android UA detection), fallback popover sur desktop avec : Twitter, Bluesky, Mastodon (with instance prompt + localStorage), LinkedIn, Download OG image, Copy link.
+
+## Architecture livrée (résumé)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                    Pipeline Python (workers)                    │
+│  ─────────────────────────────────────────────────────────────  │
+│  AISStream → _process_position → ZONE_ENTERED in MPA?           │
+│                                       │                         │
+│                                       ▼                         │
+│                       _emit_incident_safe (asyncio.create_task) │
+│                                       │                         │
+└───────────────────────────────────────┼─────────────────────────┘
+                                        │
+        ┌───────────────────────────────┼─────────────────────────┐
+        │                               ▼                         │
+        │  server/services/incident_emitter.py                    │
+        │  ─────────────────────────────────                       │
+        │  upsert_incident(store, payload)                        │
+        │       └─ INSERT/UPDATE incidents_auto by slug PK        │
+        │  trigger_revalidate(slug, client)                       │
+        │       └─ POST {slug, secret} to NEXTJS_BASE_URL/api/    │
+        │                                                          │
+        └──────────┬───────────────────────────────────────────────┘
+                   │
+                   ▼
+        ┌──────────────────────────────────────────────┐
+        │  web/app/api/revalidate/route.ts             │
+        │  revalidatePath('/fr/incident/<slug>')       │
+        │  revalidatePath('/en/incident/<slug>')       │
+        └──────────┬───────────────────────────────────┘
+                   │
+                   ▼
+        ┌──────────────────────────────────────────────┐
+        │  /[locale]/incident/[slug]/page.tsx (ISR)    │
+        │   ▶ severity chip, headline                   │
+        │   ▶ IncidentMap (7d trail centred on event)   │
+        │   ▶ IncidentContext (campaign blurb)          │
+        │   ▶ IncidentSources                           │
+        │   ▶ ShareButton + SupportCTA                  │
+        │   ▶ generateMetadata: og:image →              │
+        │       /api/og/incident/<slug>                 │
+        └──────────────────────────────────────────────┘
+```
+
+## Limites connues / hors scope
+
+- **Modération UI** : les contributions arrivent en `status=pending` mais la review se fait en SQL — pas d'UI admin (hors scope phase 3).
+- **Chiffrement bout-en-bout** : pas de Tor/E2EE pour les contributions (cf. design § 8).
+- **Lighthouse formel** : non mesuré sur cette session (pas de `npx lighthouse` dans l'environnement); typecheck + build OK font office de smoke test.
+- **Twitter Card Validator** : la validation manuelle (cards-dev.twitter.com) demande un déploiement public — différée à la mise en prod.
+- **Backfill historique** : pas exécuté ; à faire au déploiement avec un script `scripts/backfill_incidents.py` (non livré dans cette phase, à scheduler).
+- **CSS animation marker incident** : la pulse dans `globals.css` a été testée visuellement via dev server uniquement.
+
+## Variables d'env ajoutées
+
+```bash
+# .env (Python)
+NEXTJS_BASE_URL=http://localhost:3000
+KRILL_REVALIDATE_SECRET=<random 32-byte token>
+KRILL_INTERNAL_SECRET=<random 32-byte token, different from above>
+KRILL_ADMIN_DISCORD_WEBHOOK=  # optional, for contribution notifs
+
+# web/.env.local (Next.js)
+NEXT_PUBLIC_KRILL_WATCH_API=http://127.0.0.1:8000
+KRILL_REVALIDATE_SECRET=<must match Python side>
+NEXT_PUBLIC_SITE_URL=  # optional, falls back to https://krill-watch.org
+```
+
+## Phase 3 close-out
+
+Phase 3 est marquée terminée. Les prochaines étapes (hors phase) :
+1. Déployer en preview Vercel pour validation Twitter Card.
+2. Ajouter un script `scripts/backfill_incidents.py` à exécuter au cutover.
+3. Documenter le plan de rollback du webhook (désactivation via env var).
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T01-revalidate-webhook.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T01-revalidate-webhook.md
new file mode 100644
index 0000000..ac2757a
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T01-revalidate-webhook.md
@@ -0,0 +1,168 @@
+---
+id: P3-T01
+phase: 3
+wave: 0
+title: Webhook FastAPI ↔ Next.js revalidate + slug generator
+status: completed
+owner: alpha
+depends_on: []
+parallelizable_with: []
+files_owned:
+  - server/services/incident_emitter.py
+  - server/api/incidents.py
+  - web/app/api/revalidate/route.ts
+  - web/lib/incident-slug.ts
+  - tests/test_incident_emitter.py
+files_read:
+  - server/store/duckdb_store.py
+  - src/zone_monitor.py
+  - src/transhipment_detector.py
+  - .env.example
+estimated_hours: 6
+---
+
+# P3-T01 · Webhook FastAPI ↔ Next.js revalidate + slug generator
+
+## Contexte
+
+Pour que les pages `/incident/<slug>` soient auto-générées par le backend Python, on a besoin d'un canal de communication FastAPI → Next.js : quand `zone_monitor.py` détecte une violation, il crée un record d'incident dans DuckDB et envoie un webhook au Next.js qui regénère la page ISR.
+
+Cette tâche pose les fondations : modèle d'incident, slug generator déterministe, endpoint REST côté Python pour lister/get incidents, route `/api/revalidate` côté Next.js.
+
+## Deliverable
+
+- DuckDB a une table `incidents` avec schéma stable.
+- Endpoint `POST /api/internal/incident` (côté Python) qui crée un incident + déclenche webhook Next.js.
+- Endpoint `GET /api/incidents/<slug>` côté Python qui retourne les détails.
+- Endpoint `GET /api/incidents?limit=N` côté Python qui liste.
+- Route `/api/revalidate` côté Next.js qui prend `{ slug, secret }` et appelle `revalidatePath('/[locale]/incident/<slug>')`.
+
+## Spec détaillée
+
+### Schéma DuckDB
+
+```sql
+CREATE TABLE IF NOT EXISTS incidents (
+  slug VARCHAR PRIMARY KEY,
+  detected_at TIMESTAMP NOT NULL,
+  vessel_slug VARCHAR NOT NULL,
+  vessel_name VARCHAR NOT NULL,
+  vessel_flag VARCHAR,
+  event_type VARCHAR NOT NULL,        -- ZONE_ENTERED, AIS_GAP_OPENED, TRANSHIPMENT_DETECTED
+  zone_code VARCHAR,                  -- ex: 48.1, D1MPA, gulf-of-aden
+  severity VARCHAR NOT NULL,          -- CRITICAL/SUSPICIOUS/WATCH
+  score DOUBLE,                       -- if applicable (transhipment)
+  position_lat DOUBLE,
+  position_lon DOUBLE,
+  details_json VARCHAR,               -- structured metadata
+  sources_json VARCHAR,               -- list of source URLs/refs
+  created_at TIMESTAMP DEFAULT now(),
+  revalidated_at TIMESTAMP            -- when Next.js confirmed regen
+);
+CREATE INDEX IF NOT EXISTS idx_incidents_detected_at ON incidents(detected_at DESC);
+CREATE INDEX IF NOT EXISTS idx_incidents_vessel ON incidents(vessel_slug);
+```
+
+### `web/lib/incident-slug.ts`
+
+```ts
+export function makeIncidentSlug(args: {
+  vesselSlug: string;
+  eventType: 'ZONE_ENTERED' | 'AIS_GAP_OPENED' | 'TRANSHIPMENT_DETECTED' | 'SEVERITY_CHANGED';
+  zoneCode: string | null;
+  detectedAt: Date;
+}): string;
+// ex: "2026-04-28-antarctic-endurance-zone-entered-48-1"
+// idempotent: same args → same slug
+```
+
+Mêmes règles côté Python (`server/services/incident_emitter.py`) — implémentation jumelle, pour assurer cohérence.
+
+### `server/services/incident_emitter.py`
+
+```python
+def make_slug(vessel_slug: str, event_type: str, zone_code: str | None, detected_at: datetime) -> str:
+    """Match TS implementation."""
+
+def upsert_incident(db: DuckDBConnection, payload: IncidentPayload) -> Incident:
+    """Insert or update by slug. Returns the persisted incident."""
+
+async def trigger_revalidate(slug: str) -> bool:
+    """POST to NEXTJS_BASE_URL/api/revalidate with shared secret. Returns success."""
+```
+
+Variables `.env` à ajouter (et ajouter à `.env.example`) :
+```
+NEXTJS_BASE_URL=http://localhost:3000
+KRILL_REVALIDATE_SECRET=<random>
+```
+
+### `server/api/incidents.py`
+
+```python
+@router.post("/api/internal/incident")
+async def create_incident(payload: IncidentPayload, x_internal: str = Header(...)):
+    """Internal endpoint, requires KRILL_INTERNAL_SECRET header. Used by zone_monitor."""
+
+@router.get("/api/incidents/{slug}")
+async def get_incident(slug: str): ...
+
+@router.get("/api/incidents")
+async def list_incidents(limit: int = 50, vessel: str | None = None, since: datetime | None = None): ...
+```
+
+### `web/app/api/revalidate/route.ts`
+
+```ts
+export async function POST(req: Request) {
+  const { slug, secret } = await req.json();
+  if (secret !== process.env.KRILL_REVALIDATE_SECRET) {
+    return NextResponse.json({ error: 'unauthorized' }, { status: 401 });
+  }
+  // Re-validate both locales of the incident page
+  for (const locale of ['fr', 'en']) {
+    revalidatePath(`/${locale}/incident/${slug}`);
+  }
+  return NextResponse.json({ revalidated: true });
+}
+```
+
+## Verification
+
+```bash
+cd C:/Users/sca/Desktop/KRILL
+pytest tests/test_incident_emitter.py -v
+npm --prefix web run typecheck
+```
+
+Smoke test e2e :
+```bash
+# Démarrer FastAPI + Next.js dev
+# Simuler un appel direct
+curl -X POST http://127.0.0.1:8000/api/internal/incident \
+  -H "X-Internal: $KRILL_INTERNAL_SECRET" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "vessel_slug": "antarctic-endurance",
+    "vessel_name": "Antarctic Endurance",
+    "vessel_flag": "NO",
+    "event_type": "ZONE_ENTERED",
+    "zone_code": "48.1",
+    "severity": "CRITICAL",
+    "score": 0.83,
+    "position_lat": -53.96,
+    "position_lon": -36.72,
+    "detected_at": "2026-04-28T14:00:00Z"
+  }'
+
+# Vérifier que :
+# 1. L'incident est en DB
+# 2. /api/incidents le retourne
+# 3. Le webhook Next.js a été appelé (logs Next.js)
+# 4. /api/incidents/2026-04-28-antarctic-endurance-zone-entered-48-1 retourne le détail
+```
+
+## Cross-task notes
+
+- Cette tâche est UNIQUEMENT le plumbing. La page `/incident/[slug]` (P3-T02), l'OG image (P3-T03), et le pipeline qui émet (P3-T07) consommeront ce que cette tâche pose.
+- Si `KRILL_REVALIDATE_SECRET` n'est pas set, échouer explicitement au boot Python (mieux que échec silencieux).
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T02-incident-page.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T02-incident-page.md
new file mode 100644
index 0000000..c4c5012
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T02-incident-page.md
@@ -0,0 +1,178 @@
+---
+id: P3-T02
+phase: 3
+wave: 1
+title: Page /incident/[slug] avec ISR
+status: completed
+owner: alpha
+depends_on: [P3-T01]
+parallelizable_with: [P3-T03, P3-T04]
+files_owned:
+  - web/app/[locale]/incident/[slug]/page.tsx
+  - web/app/[locale]/incident/[slug]/IncidentMap.tsx
+  - web/app/[locale]/incident/[slug]/IncidentSources.tsx
+  - web/app/[locale]/incident/[slug]/IncidentContext.tsx
+  - web/lib/incidents.ts
+files_read:
+  - web/components/map/LiveTrackerMap.tsx
+  - web/components/map/VesselTrail.tsx
+  - web/lib/krill-watch.ts
+  - web/lib/campaigns.ts
+  - web/lib/i18n.ts
+estimated_hours: 10
+---
+
+# P3-T02 · Page `/incident/[slug]` avec ISR
+
+## Contexte
+
+Chaque incident détecté par le pipeline a une URL stable `/[locale]/incident/<slug>`. Cette page est la vitrine partageable d'une violation : preuve compressed en 1 page, OG image générée par P3-T03, partage par P3-T04.
+
+ISR permet la régénération à la demande via le webhook P3-T01.
+
+## Deliverable
+
+Pages `/[locale]/incident/[slug]` ISR, fonctionnelles FR + EN, avec :
+- Headline auto-générée depuis les données.
+- Map zoomée sur la position de l'incident, avec trail 7j autour de l'événement.
+- Score (si transhipment).
+- Sources (3-5 liens externes).
+- Contexte campagne (lien vers le hub).
+- CTA partage (P3-T04) et soutien (P3-T08).
+
+## Spec détaillée
+
+### `web/lib/incidents.ts`
+
+```ts
+export type Incident = {
+  slug: string;
+  detectedAt: string;
+  vessel: { slug: string; name: string; flag: string };
+  eventType: 'ZONE_ENTERED' | 'AIS_GAP_OPENED' | 'TRANSHIPMENT_DETECTED' | 'SEVERITY_CHANGED';
+  zoneCode: string | null;
+  severity: 'CRITICAL' | 'SUSPICIOUS' | 'WATCH';
+  score: number | null;
+  position: { lat: number; lon: number };
+  details: Record<string, unknown>;
+  sources: { url: string; title: string }[];
+  campaignSlug: string | null;        // dérivé du vessel
+};
+
+export async function fetchIncident(apiBase: string, slug: string): Promise<Incident | null>;
+export async function fetchIncidentsList(apiBase: string, limit: number): Promise<Incident[]>;
+export function buildIncidentHeadline(incident: Incident, locale: 'fr' | 'en'): string;
+```
+
+`buildIncidentHeadline` exemples :
+- ZONE_ENTERED 48.1 : `"Antarctic Endurance entered CCAMLR Subarea 48.1"` (EN), `"Antarctic Endurance est entré dans la sous-zone CCAMLR 48.1"` (FR).
+- TRANSHIPMENT_DETECTED : `"Suspected at-sea transhipment between Vessel A and Vessel B"`.
+- AIS_GAP_OPENED : `"Vessel X went dark in protected waters for N hours"`.
+
+### `web/app/[locale]/incident/[slug]/page.tsx`
+
+```tsx
+export const revalidate = 300;       // 5 min, override-able by webhook
+
+export async function generateStaticParams() {
+  // Pre-render top 50 most-recent incidents
+  const incidents = await fetchIncidentsList(apiBase, 50);
+  return incidents.flatMap((i) =>
+    ['fr', 'en'].map((locale) => ({ locale, slug: i.slug }))
+  );
+}
+
+export async function generateMetadata({ params }) {
+  const { locale, slug } = await params;
+  const incident = await fetchIncident(apiBase, slug);
+  if (!incident) return { title: 'Incident not found' };
+  return {
+    title: `${buildIncidentHeadline(incident, locale)} · krill-watch`,
+    description: `${incident.severity} · ${incident.detectedAt}`,
+    openGraph: {
+      images: [`/api/og/incident/${slug}`],
+      type: 'article',
+    },
+    twitter: { card: 'summary_large_image', images: [`/api/og/incident/${slug}`] },
+  };
+}
+
+export default async function Page({ params }) {
+  const { locale, slug } = await params;
+  const incident = await fetchIncident(apiBase, slug);
+  if (!incident) notFound();
+  // …render
+}
+```
+
+### Layout
+
+```
+┌─────────────────────────────────────────┐
+│ ← Back to live tracker                  │
+│                                         │
+│ ● CRITICAL · 2026-04-28 14:00 UTC       │
+│                                         │
+│ # Antarctic Endurance entered           │
+│   CCAMLR Subarea 48.1                   │
+│                                         │
+│ 🇳🇴 NO · IMO 9806079 · score 0.83       │
+│                                         │
+│ [Partager] [Embed] [Voir le navire →]   │
+├─────────────────────────────────────────┤
+│ <IncidentMap> — map zoomée + trail 7j   │
+│ (height 480px)                          │
+├─────────────────────────────────────────┤
+│ <IncidentContext>                       │
+│ Cette violation s'inscrit dans la       │
+│ campagne "Krill antarctique" — Aker     │
+│ BioMarine concentre son effort…         │
+│ → Voir la campagne complète             │
+├─────────────────────────────────────────┤
+│ <IncidentSources>                       │
+│ Sources de cette détection :            │
+│ 1. AIS public via AISStream             │
+│ 2. CCAMLR fishery subarea boundary      │
+│ 3. krill-watch transhipment detector    │
+├─────────────────────────────────────────┤
+│ <SupportCTA>                            │
+│ Voir d'autres incidents · Soutenir CPWF │
+└─────────────────────────────────────────┘
+```
+
+### `IncidentMap.tsx`
+
+`<KrillMap mode="incident">` zoomée sur `incident.position`, avec :
+- `<VesselTrail>` chargeant les 7 jours autour de `detectedAt` (3.5j avant, 3.5j après).
+- Marker rouge clignotant à la position exacte.
+- Layer zone overlay (la zone CCAMLR concernée).
+- Légende minimale.
+
+### `IncidentContext.tsx`
+
+Bloc contextuel : si `campaignSlug` dérive (ex: vessel Aker BioMarine → krill), lit `web/data/campaigns/<slug>.<locale>.md` section "Pourquoi krill-watch suit cette campagne" → tronque à 200 mots → ajoute lien vers le hub.
+
+### `IncidentSources.tsx`
+
+Liste numérotée des `sources` du incident. Chacune avec icône externe.
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+npm --prefix web run build
+```
+
+Tests manuels :
+1. Créer un incident via P3-T01 webhook (curl).
+2. Naviguer vers `/en/incident/<slug>` → page rend complète.
+3. View source → meta og:image pointe vers `/api/og/incident/<slug>`.
+4. Click "Voir le navire" → `/en/vessels/antarctic-endurance`.
+5. Click "Voir la campagne" → `/en/campagnes/krill`.
+6. Slug inexistant → 404 propre.
+7. Trigger webhook revalidate → page régénérée < 5s.
+
+## Cross-task notes
+
+- Si l'OG image (P3-T03) n'est pas encore livrée, mettre un placeholder OG statique pour que les meta tags ne soient pas vides. P3-T08 fera le branchement final si nécessaire.
+- L'i18n des labels structurels via `web/i18n/pending/P3-T02.json`.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T03-og-images-dynamic.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T03-og-images-dynamic.md
new file mode 100644
index 0000000..a53338b
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T03-og-images-dynamic.md
@@ -0,0 +1,161 @@
+---
+id: P3-T03
+phase: 3
+wave: 1
+title: OG images dynamiques (vercel/og endpoints)
+status: completed
+owner: alpha
+depends_on: [P3-T01]
+parallelizable_with: [P3-T02, P3-T04]
+files_owned:
+  - web/app/api/og/incident/[slug]/route.tsx
+  - web/app/api/og/vessel/[slug]/route.tsx
+  - web/app/api/og/campaign/[slug]/route.tsx
+  - web/lib/og-image-renderer.tsx
+  - web/lib/og-fonts.ts
+  - web/public/og-fallback.png
+files_read:
+  - web/lib/incidents.ts
+  - web/lib/krill-watch.ts
+  - web/lib/campaigns.ts
+  - web/lib/tokens.ts
+estimated_hours: 10
+---
+
+# P3-T03 · OG images dynamiques (vercel/og endpoints)
+
+## Contexte
+
+Pour que les liens partagés sur Twitter / Bluesky / Mastodon affichent un preview riche, chaque page partageable a besoin d'une **image OG (1200×630)** générée dynamiquement avec les données spécifiques.
+
+3 endpoints à implémenter avec `@vercel/og` (Satori) :
+- `/api/og/incident/<slug>` — pour les pages incident
+- `/api/og/vessel/<slug>` — pour les dossiers navires
+- `/api/og/campaign/<slug>` — pour les hubs de campagne
+
+Note importante : Satori prend du JSX simple (text, divs, SVG). **Une vraie carte raster MapLibre n'est pas possible**. On contourne en générant une représentation visuelle abstraite (gradient + dot + headline) qui reste reconnaissable et impactante.
+
+## Deliverable
+
+3 endpoints edge runtime fonctionnels qui retournent du `image/png` 1200×630, ≤ 200ms p95, avec données réelles.
+
+## Spec détaillée
+
+### `web/lib/og-fonts.ts`
+
+```ts
+// Charge les fonts (Inter + JetBrains Mono) depuis /public/fonts/* en buffer pour Satori.
+export async function loadOgFonts(): Promise<{ inter: ArrayBuffer; mono: ArrayBuffer }>;
+```
+
+À ajouter : 2 fichiers TTF dans `web/public/fonts/` (Inter-Bold.ttf, JetBrainsMono-Regular.ttf). Subset si possible pour réduire taille.
+
+### `web/lib/og-image-renderer.tsx`
+
+Helper React-only (pas de hook) qui retourne un `JSX.Element` représentant la layout d'une OG image :
+
+```tsx
+export function renderIncidentOg(incident: Incident, locale: 'fr' | 'en'): JSX.Element;
+export function renderVesselOg(vessel: VesselSummary, locale: 'fr' | 'en'): JSX.Element;
+export function renderCampaignOg(campaign: Campaign, locale: 'fr' | 'en'): JSX.Element;
+```
+
+#### Layout incident OG (1200×630)
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│ ● CRITICAL · 2026-04-28 14:00 UTC      [ krill-watch logo ] │
+│                                                              │
+│                                                              │
+│  Antarctic Endurance entered                                 │
+│  CCAMLR Subarea 48.1.                                       │
+│                                                              │
+│         ┌────────────────────────────┐                      │
+│         │     ▓▓▓▓▓▓▓▓▓▓▓▓▓▓        │  ← gradient bleu nuit │
+│         │   ◯ ▓▓▓▓▓▓▓▓▓▓▓           │     + cercle rouge    │
+│         │     ▓▓▓▓▓▓▓▓▓             │     symbolisant       │
+│         └────────────────────────────┘     position         │
+│                                                              │
+│  🇳🇴 NO · IMO 9806079 · score 0.83          krill-watch.org │
+└──────────────────────────────────────────────────────────────┘
+```
+
+Aucune vraie carte raster. Le rectangle gradient + le cercle est suffisant pour transmettre l'idée "position en zone protégée".
+
+#### Layout vessel OG
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│ 🇳🇴  Antarctic Endurance               [ krill-watch logo ] │
+│                                                              │
+│      ─────────────╲    ╱──────                              │
+│           ╲       ╲  ╱      ╲                                │
+│            ─╲      ╲╱        ─                              │
+│   trail 30j (gradient vert→orange→rouge)                     │
+│                                                              │
+│  Aker BioMarine · IMO 9806079                                │
+│  ● CRITICAL · 8 incidents · 12 sources                       │
+└──────────────────────────────────────────────────────────────┘
+```
+
+Trail rendu en SVG path simplifié (pas la vraie polyline GeoJSON, juste une représentation décorative).
+
+#### Layout campaign OG
+
+Hero éditorial : background gradient (depuis `Campaign.bgGradient`), tagline mono, titre, 3 stats. Identique au hero web mais 1200×630.
+
+### Endpoints
+
+```ts
+// web/app/api/og/incident/[slug]/route.tsx
+export const runtime = 'edge';
+
+export async function GET(
+  req: Request,
+  { params }: { params: { slug: string } }
+) {
+  const incident = await fetchIncident(apiBase, params.slug);
+  if (!incident) {
+    return new Response('not found', { status: 404 });
+  }
+  const fonts = await loadOgFonts();
+  return new ImageResponse(
+    renderIncidentOg(incident, 'en'),
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        { name: 'Inter', data: fonts.inter, weight: 800, style: 'normal' },
+        { name: 'JetBrains Mono', data: fonts.mono, weight: 400, style: 'normal' },
+      ],
+    }
+  );
+}
+```
+
+Les 3 endpoints suivent le même pattern.
+
+### Fallback
+
+Si le fetch data échoue (API down), retourner `/public/og-fallback.png` (image statique pré-générée avec brand krill-watch).
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+npm --prefix web run build
+```
+
+Tests manuels :
+1. Créer un incident via webhook P3-T01.
+2. `curl -o /tmp/og.png http://localhost:3000/api/og/incident/<slug>` → fichier PNG 1200×630.
+3. Ouvrir l'image, vérifier visuellement la lisibilité.
+4. Idem pour `/api/og/vessel/antarctic-endurance` et `/api/og/campaign/krill`.
+5. Tester sur Twitter Card Validator (https://cards-dev.twitter.com/validator) avec une URL `/en/incident/<slug>`.
+6. Latency : `time curl -o /dev/null http://localhost:3000/api/og/incident/<slug>` → < 500ms.
+
+## Cross-task notes
+
+- Si `@vercel/og` n'est pas installé, ajouter `npm install @vercel/og --prefix web` dans cette tâche.
+- Subset des fonts essentiel : un Inter complet pèse 1 MB, on veut < 200KB pour rester rapide. Utiliser `fonttools` ou un service en ligne pour subsetter (latin + symbols seulement).
+- Si Satori échoue sur certains glyphes (ex: 🇳🇴 emoji), utiliser un fallback texte "NO" en lieu et place de l'emoji dans le rendering OG.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T04-share-button.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T04-share-button.md
new file mode 100644
index 0000000..5ddf54f
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T04-share-button.md
@@ -0,0 +1,119 @@
+---
+id: P3-T04
+phase: 3
+wave: 1
+title: <ShareButton> composant + intent URLs
+status: completed
+owner: alpha
+depends_on: []
+parallelizable_with: [P3-T02, P3-T03]
+files_owned:
+  - web/components/share/ShareButton.tsx
+  - web/components/share/ShareMenu.tsx
+  - web/components/share/CopyLinkButton.tsx
+  - web/lib/share-urls.ts
+files_read:
+  - web/components/ui/index.ts
+  - web/lib/i18n.ts
+estimated_hours: 6
+---
+
+# P3-T04 · `<ShareButton>` composant + intent URLs
+
+## Contexte
+
+Pour rendre le partage frictionless, on a besoin d'un composant `<ShareButton>` qui :
+- Affiche un menu avec : Copy link / Tweet / Bluesky / Mastodon / Download OG image.
+- Pré-remplit chaque intent avec une copy contextualisée selon le type de contenu (incident / vessel / campaign).
+- A11y, mobile-friendly, fonctionne sans JS pour le copy-link basique.
+
+## Deliverable
+
+Composant `<ShareButton>` réutilisable, intégrable sur :
+- `/incident/[slug]` (par P3-T02)
+- `/vessels/[slug]` (par P3-T08)
+- `/campagnes/[slug]` (par P3-T08)
+
+## Spec détaillée
+
+### `web/lib/share-urls.ts`
+
+```ts
+type ShareContext = {
+  type: 'incident' | 'vessel' | 'campaign';
+  slug: string;
+  url: string;                  // canonical URL of the content
+  title: string;                // pre-formatted, ready to be shared
+  hashtags?: string[];          // ['krillwatch', 'OSINT']
+};
+
+export function tweetIntent(ctx: ShareContext): string;
+// returns https://twitter.com/intent/tweet?text=...&url=...&hashtags=...
+
+export function blueskyIntent(ctx: ShareContext): string;
+// returns https://bsky.app/intent/compose?text=...
+
+export function mastodonIntent(ctx: ShareContext, instanceUrl?: string): string;
+// returns https://<instance>/share?text=...
+
+export function ogImageUrl(ctx: ShareContext): string;
+// returns /api/og/<type>/<slug>
+```
+
+Templates de title (FR/EN) :
+- incident : `"⚠ {vessel} entered {zone} — krill-watch tracking #IUUfishing"`
+- vessel : `"📡 {vessel} ({flag}) — full dossier on krill-watch"`
+- campaign : `"🌊 Campaign tracker: {name} — krill-watch by CPWF"`
+
+### `web/components/share/ShareButton.tsx`
+
+```tsx
+type Props = {
+  context: ShareContext;
+  variant?: 'primary' | 'ghost';
+  locale: 'fr' | 'en';
+};
+```
+
+Comportement :
+- Click → ouvre `<ShareMenu>` (popover ou modal selon viewport).
+- Mobile : `navigator.share()` natif si supporté (Web Share API), fallback sur menu.
+- Desktop : menu avec icônes Twitter/Bluesky/Mastodon/Copy/Download.
+
+### `web/components/share/ShareMenu.tsx`
+
+```tsx
+type Props = { context: ShareContext; onClose: () => void; locale: 'fr' | 'en' };
+```
+
+Liste verticale de boutons :
+- 🐦 Tweet → opens tweetIntent in new tab
+- 🦋 Bluesky → opens blueskyIntent in new tab
+- 🐘 Mastodon → prompt instance, then opens
+- 📋 Copy link → copies `context.url` to clipboard
+- 🖼 Download image → downloads `ogImageUrl(context)` as `<slug>.png`
+
+A11y : `<dialog>` natif si possible, ou `role="menu"` avec keyboard nav (↑↓ Enter Esc).
+
+### `web/components/share/CopyLinkButton.tsx`
+
+Composant standalone si on ne veut que copy-link (sans menu). Click → copy → toast "Lien copié" / "Link copied".
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+```
+
+Tests manuels (avec un faux `context` mocké) :
+1. Click → menu ouvre avec 5 options.
+2. Click "Tweet" → ouvre Twitter compose en nouvel onglet, texte pré-rempli.
+3. Click "Copy link" → toast confirmation, clipboard contient l'URL.
+4. Click "Download image" → fichier `<slug>.png` se télécharge.
+5. Mobile (DevTools) → bouton appelle `navigator.share()` directement.
+6. Tab clavier → focus arrive, ↑↓ navigue, Esc ferme.
+
+## Cross-task notes
+
+- Le bouton est intégré dans P3-T02 (incident page) directement (P3-T02 importe `<ShareButton>`).
+- Pour `/vessels/[slug]` et `/campagnes/[slug]`, l'intégration est faite par P3-T08 (la tâche checkpoint qui a accès à ces fichiers).
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T05-contribution-form.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T05-contribution-form.md
new file mode 100644
index 0000000..f57d85a
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T05-contribution-form.md
@@ -0,0 +1,153 @@
+---
+id: P3-T05
+phase: 3
+wave: 2
+title: Formulaire contribution + storage DuckDB
+status: completed
+owner: alpha
+depends_on: [P3-T01]
+parallelizable_with: [P3-T06, P3-T07]
+files_owned:
+  - web/app/[locale]/contribuer/page.tsx
+  - web/components/contribute/ContributionForm.tsx
+  - web/components/contribute/ContributionSuccess.tsx
+  - web/components/contribute/PhotoUpload.tsx
+  - web/app/api/contribute/route.ts
+  - server/api/contributions.py
+  - server/services/contributions_store.py
+  - tests/test_contributions.py
+files_read:
+  - server/store/duckdb_store.py
+  - web/components/ui/index.ts
+  - web/lib/i18n.ts
+estimated_hours: 12
+---
+
+# P3-T05 · Formulaire contribution + storage
+
+## Contexte
+
+Permet à n'importe quel internaute (random, lanceur d'alerte non-anonyme, journaliste) de **soumettre une observation** : une photo de navire, un signalement de transhipment, un témoignage. Pas de chiffrement bout-en-bout en phase 3 (ça reste hors scope MVP, cf. design § 8) — formulaire public, modéré.
+
+## Deliverable
+
+Page `/[locale]/contribuer` avec formulaire fonctionnel. Soumission stockée en DuckDB. Notification (email ou Discord webhook) à un canal admin.
+
+## Spec détaillée
+
+### Schéma DuckDB
+
+```sql
+CREATE TABLE IF NOT EXISTS contributions (
+  id VARCHAR PRIMARY KEY,                      -- UUID
+  submitted_at TIMESTAMP DEFAULT now(),
+  contact_email VARCHAR,                       -- nullable (optional)
+  contact_name VARCHAR,                        -- nullable (optional)
+  category VARCHAR NOT NULL,                   -- 'vessel-sighting' | 'transhipment' | 'ais-anomaly' | 'other'
+  vessel_name VARCHAR,                         -- if known
+  vessel_imo VARCHAR,                          -- if known
+  vessel_mmsi VARCHAR,                         -- if known
+  observed_at TIMESTAMP,
+  observed_lat DOUBLE,
+  observed_lon DOUBLE,
+  description VARCHAR NOT NULL,                -- min 50 chars
+  photo_path VARCHAR,                          -- path on disk if uploaded
+  status VARCHAR DEFAULT 'pending',            -- pending | reviewed | published | rejected
+  reviewer_notes VARCHAR
+);
+```
+
+### `web/components/contribute/ContributionForm.tsx`
+
+Formulaire en 3 sections collapsibles :
+
+**1. Type de signalement** (radio group)
+- 🚢 Observation directe d'un navire
+- 🔄 Transbordement suspect en mer
+- 📡 Anomalie AIS (coupure, identité erronée)
+- 📝 Autre (témoignage, document)
+
+**2. Détails** (champs adaptés au type)
+- Type 'vessel-sighting' : nom navire (optionnel) + IMO/MMSI (optionnel) + position (lat/lon ou via map picker) + date/heure observation + photo.
+- Type 'transhipment' : 2 navires + position + photo si possible.
+- Type 'ais-anomaly' : navire + période + description.
+- Type 'other' : description libre.
+
+Tous les types ont :
+- Description (textarea, min 50 chars).
+- Email contact (optionnel) — si fourni, "On peut vous recontacter pour vérifier."
+- Nom (optionnel).
+
+**3. Soumission**
+- Checkbox confirmation : "Je certifie que les informations fournies sont sincères. Je comprends que krill-watch peut publier ces données après vérification."
+- Bouton submit primary.
+- Loading state pendant l'envoi (multipart upload).
+
+### `web/components/contribute/PhotoUpload.tsx`
+
+Drag-and-drop ou file picker. Limite : 5 MB par image, formats jpg/png/webp/heic. Preview avant submit. Storage côté backend dans `data/contributions/<contribution_id>/<filename>`.
+
+### `web/app/api/contribute/route.ts`
+
+```ts
+export async function POST(req: Request) {
+  const formData = await req.formData();
+  // Validate, forward to backend FastAPI /api/contributions
+  // Receive response, return as-is
+}
+```
+
+### `server/api/contributions.py`
+
+```python
+@router.post("/api/contributions")
+async def submit_contribution(
+    contribution: ContributionPayload,           # JSON body
+    photo: UploadFile | None = File(None),
+):
+    # Validate
+    # Store photo in data/contributions/<uuid>/...
+    # Insert in DuckDB
+    # Notify admin (Discord webhook with summary, no PII in webhook)
+    # Return { id, status: 'received' }
+```
+
+Notification admin : utiliser le `KRILL_ADMIN_DISCORD_WEBHOOK` (env var) si défini. Payload simple :
+```json
+{
+  "embeds": [{
+    "title": "New contribution received",
+    "description": "Category: vessel-sighting · Vessel: Antarctic Endurance · Submitted at 2026-04-28 14:00 UTC",
+    "color": 16729389
+  }]
+}
+```
+**Ne pas leak l'email de soumission** dans le webhook.
+
+### `web/components/contribute/ContributionSuccess.tsx`
+
+Vue de remerciement : "Merci. Votre signalement a été reçu (#<short-id>). Nous le passerons en revue dans les 7 jours. Si vous avez fourni un email, nous vous recontacterons si nécessaire."
+
+## Verification
+
+```bash
+cd C:/Users/sca/Desktop/KRILL
+pytest tests/test_contributions.py -v
+npm --prefix web run typecheck
+npm --prefix web run build
+```
+
+Tests manuels :
+1. `/fr/contribuer` → formulaire affiche.
+2. Sélectionner "Observation directe" → champs adaptés visibles.
+3. Soumettre sans description → erreur validation "min 50 chars".
+4. Soumettre avec photo + description complète → page success, contribution en DB.
+5. Vérifier `data/contributions/<uuid>/photo.jpg` existe sur disk.
+6. Vérifier message Discord (si webhook configuré).
+7. EN parité totale.
+
+## Cross-task notes
+
+- Pas d'auth requise au MVP. Si abus, ajouter rate-limiting (1 contribution / IP / 10 min) en sous-tâche.
+- Hors scope phase 3 : modération UI, validation manuelle, publication automatique. Le statut `pending` reste manuel via SQL.
+- Hors scope phase 3 : chiffrement bout-en-bout, soumission Tor, vérification cryptographique média (cf. design § 8).
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T06-digest-route.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T06-digest-route.md
new file mode 100644
index 0000000..af2f1c3
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T06-digest-route.md
@@ -0,0 +1,122 @@
+---
+id: P3-T06
+phase: 3
+wave: 2
+title: Route /digest/[isoweek] — exposition du HTML existant
+status: completed
+owner: alpha
+depends_on: []
+parallelizable_with: [P3-T05, P3-T07]
+files_owned:
+  - web/app/[locale]/digest/page.tsx
+  - web/app/[locale]/digest/[isoweek]/page.tsx
+  - web/lib/digests.ts
+files_read:
+  - output/transhipments_*.html
+  - templates/transhipment_review.html.j2
+  - server/api/digests.py
+estimated_hours: 4
+---
+
+# P3-T06 · Route digest hebdo
+
+## Contexte
+
+Le pipeline `python main.py --mode transhipment-review --since 7d` génère déjà un fichier HTML statique chaque semaine dans `output/transhipments_<YYYY>-W<WW>.html`. Cette tâche **expose ces fichiers** via une route Next.js avec UI cohérente.
+
+Effort très faible — c'est principalement du file-listing et de l'iframe / parse + re-render.
+
+## Deliverable
+
+- `/[locale]/digest` : index des digests disponibles, ordre antichronologique.
+- `/[locale]/digest/<isoweek>` : un digest spécifique (ex: `2026-W17`).
+
+## Spec détaillée
+
+### Backend : endpoint pour lister les digests
+
+Ajouter dans `server/api/digests.py` (nouveau ou existant) :
+```python
+@router.get("/api/digests")
+def list_digests(limit: int = 20):
+    files = sorted(glob('output/transhipments_*.html'), reverse=True)[:limit]
+    return [
+        { "isoweek": parse_week(f), "filename": basename(f), "size": stat(f).st_size, "generated_at": stat(f).st_mtime }
+        for f in files
+    ]
+
+@router.get("/api/digests/{isoweek}")
+def get_digest(isoweek: str):
+    path = f"output/transhipments_{isoweek}.html"
+    if not exists(path):
+        raise HTTPException(404)
+    with open(path) as f:
+        html = f.read()
+    return { "isoweek": isoweek, "html": html, "generated_at": stat(path).st_mtime }
+```
+
+Cette extension est dans `files_owned` de cette tâche (`server/api/digests.py`). Si le module n'existe pas, le créer.
+
+### `web/lib/digests.ts`
+
+```ts
+export type DigestSummary = {
+  isoweek: string;        // 2026-W17
+  filename: string;
+  size: number;
+  generatedAt: string;
+};
+
+export async function fetchDigestList(apiBase: string, limit?: number): Promise<DigestSummary[]>;
+export async function fetchDigest(apiBase: string, isoweek: string): Promise<{ html: string; generatedAt: string } | null>;
+```
+
+### `web/app/[locale]/digest/page.tsx`
+
+Liste des digests dispos en cards :
+```
+2026-W17 (Apr 21–27) · 4.2 KB · generated 2026-04-28 →
+2026-W16 (Apr 14–20) · 5.1 KB · generated 2026-04-21 →
+```
+Chaque card → `/[locale]/digest/<isoweek>`.
+
+### `web/app/[locale]/digest/[isoweek]/page.tsx`
+
+```tsx
+export default async function Page({ params }) {
+  const { isoweek } = await params;
+  const digest = await fetchDigest(apiBase, isoweek);
+  if (!digest) notFound();
+  return (
+    <article className="prose prose-invert max-w-3xl mx-auto p-6">
+      <header>
+        <h1>Digest hebdo · {isoweek}</h1>
+        <p className="text-muted">Generated {digest.generatedAt}</p>
+      </header>
+      <div dangerouslySetInnerHTML={{ __html: sanitize(digest.html) }} />
+    </article>
+  );
+}
+```
+
+`sanitize()` : utiliser `DOMPurify` ou un sanitizer côté server pour neutraliser tout JS / iframe tiers (le HTML généré par Jinja2 templates doit être safe par construction, mais defense-in-depth).
+
+ISR avec `revalidate: 3600` (digest = 1×/semaine, 1h de cache c'est large).
+
+## Verification
+
+```bash
+npm --prefix web run typecheck
+npm --prefix web run build
+```
+
+Tests manuels :
+1. Lancer un build du digest : `python main.py --mode transhipment-review --since 7d --out output/transhipments_2026-W17.html`.
+2. `/fr/digest` → liste contient 2026-W17.
+3. `/fr/digest/2026-W17` → contenu rendu.
+4. `/fr/digest/2099-W01` → 404.
+5. EN parité.
+
+## Cross-task notes
+
+- Si le HTML généré contient des assets relatifs (images), il faut les exposer via `/api/digests/<isoweek>/assets/*`. À documenter dans `## Cross-task notes` si le cas se présente, mais le pipeline actuel fait du standalone HTML donc probable que pas nécessaire.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T07-pipeline-incident-emit.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T07-pipeline-incident-emit.md
new file mode 100644
index 0000000..a62004b
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T07-pipeline-incident-emit.md
@@ -0,0 +1,117 @@
+---
+id: P3-T07
+phase: 3
+wave: 2
+title: Pipeline Python — émission événement incident
+status: completed
+owner: alpha
+depends_on: [P3-T01]
+parallelizable_with: [P3-T05, P3-T06]
+files_owned:
+  - src/zone_monitor.py                       # extend with emit
+  - src/transhipment_detector.py              # extend with emit
+  - src/notifier.py                           # extend with incident hook
+  - tests/test_zone_monitor_emit.py
+  - tests/test_transhipment_emit.py
+files_read:
+  - server/services/incident_emitter.py
+  - server/api/incidents.py
+estimated_hours: 6
+---
+
+# P3-T07 · Pipeline Python — émission événement incident
+
+## Contexte
+
+Le pipeline détecte déjà les violations (`zone_monitor.py` pour les entrées en zone protégée, `transhipment_detector.py` pour les transbordements suspects). Cette tâche **branche** ces détections sur l'incident emitter de P3-T01 pour que chaque détection génère automatiquement une page `/incident/<slug>`.
+
+## Deliverable
+
+Quand `zone_monitor` détecte une violation, l'emitter est appelé. Idem pour `transhipment_detector`. Idempotence : un même incident détecté plusieurs fois (par re-run) écrit le même slug et update plutôt que duplicate.
+
+## Spec détaillée
+
+### Modifications `src/zone_monitor.py`
+
+Identifier la fonction qui détecte les `ZONE_ENTERED` events (probablement `_emit_zone_change` ou équivalent). Y ajouter un appel à `incident_emitter.upsert_incident(...)` quand la sévérité est ≥ WATCH ET la zone est de catégorie `mpa` ou `penguin_buffer`.
+
+```python
+from server.services.incident_emitter import upsert_incident, IncidentPayload
+
+def _on_zone_entered(self, vessel: Vessel, zone: Zone, position: Position):
+    severity = self._calculate_severity(vessel, zone)
+    if severity in ('CRITICAL', 'SUSPICIOUS', 'WATCH') and zone.category in ('mpa', 'penguin_buffer'):
+        upsert_incident(self.db, IncidentPayload(
+            vessel_slug=vessel.slug,
+            vessel_name=vessel.name,
+            vessel_flag=vessel.flag,
+            event_type='ZONE_ENTERED',
+            zone_code=zone.code,
+            severity=severity,
+            position_lat=position.lat,
+            position_lon=position.lon,
+            detected_at=position.ts,
+            sources=[
+                { 'url': f'https://www.ccamlr.org/', 'title': 'CCAMLR' },
+                { 'url': '/about', 'title': 'krill-watch method' },
+            ],
+        ))
+    # … existing event log path
+```
+
+### Modifications `src/transhipment_detector.py`
+
+Idem pour les transhipments — quand le score ≥ 0.50 (FLAGGED) ou ≥ 0.75 (CRITICAL), émettre un incident.
+
+```python
+if result.score >= 0.50:
+    upsert_incident(self.db, IncidentPayload(
+        vessel_slug=result.primary_vessel_slug,
+        vessel_name=result.primary_vessel_name,
+        vessel_flag=result.primary_vessel_flag,
+        event_type='TRANSHIPMENT_DETECTED',
+        zone_code=None,  # transhipment is point-of-encounter, not necessarily in a zone
+        severity='CRITICAL' if result.score >= 0.75 else 'SUSPICIOUS',
+        score=result.score,
+        position_lat=result.encounter_lat,
+        position_lon=result.encounter_lon,
+        detected_at=result.encounter_ts,
+        details={'partner_vessel_slug': result.partner_slug, 'reefer': result.is_reefer, 'duration_h': result.duration_h, ...},
+        sources=[...],
+    ))
+```
+
+### Modifications `src/notifier.py`
+
+Le notifier envoie déjà des messages Discord/Slack pour certaines alertes. Étendre pour qu'à chaque incident émis, le message Discord/Slack inclut le **lien vers la page incident** (`{NEXTJS_BASE_URL}/en/incident/<slug>`) — c'est ça qui rend la viralité concrète.
+
+```python
+def _format_incident_message(incident: Incident) -> str:
+    return f"⚠ [{incident.severity}] {incident.vessel_name} → {incident.event_type}\n{NEXTJS_BASE_URL}/en/incident/{incident.slug}"
+```
+
+### Tests
+
+`tests/test_zone_monitor_emit.py` : mock incident_emitter, vérifier qu'une zone-enter en MPA déclenche un upsert.
+
+`tests/test_transhipment_emit.py` : idem pour transhipment scores ≥ 0.50.
+
+Idempotence : appeler le détecteur 2× sur les mêmes données → 1 seul incident en DB.
+
+## Verification
+
+```bash
+cd C:/Users/sca/Desktop/KRILL
+pytest tests/test_zone_monitor_emit.py tests/test_transhipment_emit.py -v
+```
+
+E2E :
+1. Backfill zone_monitor sur les dernières 24h : doit créer N incidents en DB.
+2. Vérifier en SQL : `SELECT count(*) FROM incidents`.
+3. Vérifier que la page `/en/incident/<slug>` répond 200 pour chacun.
+4. Vérifier qu'un message Discord est envoyé (si webhook configuré) avec le lien.
+
+## Cross-task notes
+
+- Coordination forte avec P3-T01 (incident_emitter doit être stable avant de brancher). Si P3-T01 modifie le payload Pydantic, mettre à jour ici.
+- Le backfill est manuel (pas d'auto-trigger sur des données passées). Documenter dans le README phase 3 comment lancer un backfill quand on déploie.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T08-support-cta-checkpoint.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T08-support-cta-checkpoint.md
new file mode 100644
index 0000000..f327055
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/P3-T08-support-cta-checkpoint.md
@@ -0,0 +1,129 @@
+---
+id: P3-T08
+phase: 3
+wave: 3
+title: <SupportCTA> partout + i18n agrégé + checkpoint phase 3
+status: completed
+owner: alpha
+depends_on: [P3-T02, P3-T03, P3-T04, P3-T05, P3-T06, P3-T07]
+parallelizable_with: []
+files_owned:
+  - web/components/SupportCTA.tsx
+  - web/i18n/locales/fr.json
+  - web/i18n/locales/en.json
+  - web/app/[locale]/page.tsx                          # ajout SupportCTA
+  - web/app/[locale]/vessels/[slug]/page.tsx           # ajout ShareButton + SupportCTA
+  - web/app/[locale]/campagnes/[slug]/page.tsx         # ajout ShareButton + SupportCTA
+  - README.md                                           # mise à jour features livrées
+files_read:
+  - web/i18n/pending/*.json
+  - web/components/share/ShareButton.tsx
+estimated_hours: 8
+---
+
+# P3-T08 · `<SupportCTA>` partout + i18n agrégé + checkpoint phase 3
+
+## Contexte
+
+Vague terminale phase 3 :
+1. Implémenter `<SupportCTA>` (bouton CPWF cohérent).
+2. Intégrer `<ShareButton>` (P3-T04) sur les pages `/vessels/[slug]` et `/campagnes/[slug]` (qui n'avaient pas la place dans P2).
+3. Agréger les `web/i18n/pending/P3-T*.json`.
+4. Checkpoint qualité phase 3.
+5. Mettre à jour le README global avec les features livrées.
+
+## Deliverable
+
+- Bouton "Soutenir CPWF" cohérent visuellement sur la home, dans le footer, sur les pages incident, vessel, campaign.
+- Boutons partage opérationnels sur incident + vessel + campaign.
+- README à jour avec les nouvelles routes/features.
+- Checkpoint Lighthouse + smoke test passe.
+
+## Spec détaillée
+
+### `web/components/SupportCTA.tsx`
+
+```tsx
+type Props = {
+  variant?: 'inline' | 'banner' | 'minimal';
+  locale: 'fr' | 'en';
+  className?: string;
+};
+```
+
+- `inline` : bouton primary `<Button>` "Soutenir CPWF →" / "Support CPWF →" qui link vers `https://paulwatsonfoundation.org/donate?utm_source=krill-watch&utm_medium=<variant>`.
+- `banner` : carte plus large avec contexte court ("Cette enquête est conduite par la Captain Paul Watson Foundation. Soutenez ses opérations en mer.") + bouton.
+- `minimal` : juste un lien texte muted "Soutenir CPWF →".
+
+### Intégrations
+
+- `web/app/[locale]/page.tsx` : ajout `<SupportCTA variant="banner" />` après le block "Méthode et limites".
+- `web/app/[locale]/vessels/[slug]/page.tsx` : `<ShareButton context={{type:'vessel', ...}} />` dans le header + `<SupportCTA variant="minimal" />` dans le footer du dossier.
+- `web/app/[locale]/campagnes/[slug]/page.tsx` : `<ShareButton context={{type:'campaign', ...}} />` dans le hero + `<SupportCTA variant="banner" />` au-dessus du footer.
+- `web/components/Footer.tsx` (ajouté à `files_read` car déjà pris par P2-T08) : ajouter une mention "Soutenir CPWF" en lien minimal — coordonné avec P2-T08, peut nécessiter un commit conjoint si conflit.
+
+### Agrégation i18n
+
+Lire et merger `web/i18n/pending/P3-T*.json` dans `fr.json` / `en.json`. Supprimer pending. Conflits → résoudre.
+
+### Checkpoint phase 3
+
+```bash
+cd C:/Users/sca/Desktop/KRILL
+
+# 1. Typecheck + build
+npm --prefix web run typecheck
+npm --prefix web run build
+
+# 2. Tests Python
+pytest tests/test_incident_emitter.py tests/test_zone_monitor_emit.py tests/test_transhipment_emit.py tests/test_contributions.py -v
+
+# 3. E2E webhook → incident → page
+curl -X POST http://127.0.0.1:8000/api/internal/incident -H "X-Internal: $KRILL_INTERNAL_SECRET" -d '{...}' # avec un payload synthétique
+sleep 6  # attendre revalidate
+curl -I http://localhost:3000/en/incident/<slug>  # doit retourner 200
+
+# 4. OG image
+curl -I http://localhost:3000/api/og/incident/<slug>     # 200, content-type image/png
+curl -I http://localhost:3000/api/og/vessel/antarctic-endurance
+curl -I http://localhost:3000/api/og/campaign/krill
+
+# 5. Twitter Card Validator (manuel)
+# Coller chaque URL dans https://cards-dev.twitter.com/validator
+
+# 6. Lighthouse pages clés phase 3
+npx lighthouse http://localhost:3000/en/incident/<slug> --form-factor=mobile --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/lighthouse-incident-mobile.html
+npx lighthouse http://localhost:3000/en/contribuer --form-factor=mobile --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/lighthouse-contribute-mobile.html
+npx lighthouse http://localhost:3000/en/digest/2026-W17 --form-factor=mobile --output=html --output-path=docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/lighthouse-digest-mobile.html
+```
+
+Critères validation :
+- [ ] OG images générées valides (200 + image/png).
+- [ ] Twitter Card preview correct sur les 3 types.
+- [ ] Webhook → page régénérée < 5s.
+- [ ] Lighthouse perf ≥ 75, a11y ≥ 90.
+- [ ] Tous pending i18n mergés.
+- [ ] Soumission contribution avec photo fonctionne.
+- [ ] CHECKPOINT.md créé.
+
+### Mise à jour README
+
+Ajouter une section "Features" avec :
+- Live cockpit + mobile
+- Historique satellite (trail + scrubber)
+- 4 hubs de campagne bilingues
+- Pages incident auto-générées
+- OG images dynamiques
+- Formulaire contribution
+- Digest hebdo en route Next.js
+
+Retirer toute référence à `frontend/` (déjà fait en P1-T08 normalement, mais re-vérifier).
+
+## Verification
+
+(voir Checkpoint ci-dessus)
+
+## Cross-task notes
+
+- Si l'intégration sur `/vessels/[slug]/page.tsx` entre en conflit avec P2-T04 owned, ouvrir un commit explicite "P3-T08: integrate ShareButton on vessel page" sur le fichier (qui a été release par P2-T04 fin phase 2).
+- Si une feature ne passe pas le critère qualité, créer une sous-tâche P3-T09 fix avant de marker P3-T08 completed. Ne PAS bypass le checkpoint.
diff --git a/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/README.md b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/README.md
new file mode 100644
index 0000000..d3d604b
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-krill-refonte/phase-3-viralite/README.md
@@ -0,0 +1,58 @@
+# Phase 3 · Viralité & contribution
+
+> **Objectif** : pages incident auto-générées par le pipeline + OG images dynamiques + boutons partage natifs + formulaire contribution public + digest hebdo en route Next.js.
+> **Durée estimée** : 12 jours · 8 tâches · 4 vagues d'exécution
+> **Bloqué par** : phase 2 100% completed
+> **Phase terminale**
+
+## Critère de succès
+
+Quand `Antarctic Endurance` entre dans 48.1, en moins de 5 minutes une page `/incident/2026-04-28-antarctic-endurance-zone-entered-48-1` existe avec OG image, partageable sur Twitter avec preview parfait. Un random peut soumettre un signalement avec photo via formulaire `/contribuer`. Le digest hebdo est accessible via `/digest/2026-W17` en plus du HTML statique existant. Bouton `<SupportCTA>` cohérent partout.
+
+## Vagues d'exécution
+
+```
+┌─ Wave 0 (1 instance, séquentiel)
+│   P3-T01 · Webhook FastAPI → Next.js revalidate + slug generator
+│
+├─ Wave 1 (3 instances en parallèle)
+│   P3-T02 · Page /incident/[slug] avec ISR
+│   P3-T03 · OG images dynamiques (vercel/og endpoints)
+│   P3-T04 · <ShareButton> composant + URLs intent
+│
+├─ Wave 2 (3 instances en parallèle)
+│   P3-T05 · Formulaire contribution + storage
+│   P3-T06 · Route digest hebdo
+│   P3-T07 · Pipeline Python — émission événement incident
+│
+├─ Wave 3 (1 instance, séquentiel)
+│   P3-T08 · <SupportCTA> intégration partout + checkpoint phase 3
+```
+
+## Tâches
+
+| ID | Titre | Wave | Effort | Bloque | Bloqué par |
+|---|---|---|---|---|---|
+| [P3-T01](./P3-T01-revalidate-webhook.md) | Webhook FastAPI ↔ Next.js + slug generator | 0 | 6h | T02-T07 | — |
+| [P3-T02](./P3-T02-incident-page.md) | Page `/incident/[slug]` avec ISR | 1 | 10h | T08 | T01 |
+| [P3-T03](./P3-T03-og-images-dynamic.md) | OG images dynamiques edge endpoints | 1 | 10h | T08 | T01 |
+| [P3-T04](./P3-T04-share-button.md) | `<ShareButton>` composant | 1 | 6h | T08 | — |
+| [P3-T05](./P3-T05-contribution-form.md) | Formulaire contribution + storage | 2 | 12h | T08 | T01 |
+| [P3-T06](./P3-T06-digest-route.md) | Route digest hebdo | 2 | 4h | T08 | — |
+| [P3-T07](./P3-T07-pipeline-incident-emit.md) | Pipeline Python émission incident | 2 | 6h | T08 | T01 |
+| [P3-T08](./P3-T08-support-cta-checkpoint.md) | `<SupportCTA>` partout + checkpoint | 3 | 8h | — | T02, T03, T04, T05, T06, T07 |
+
+**Total** : 62 heures · ~12 jours-homme · ~6 jours calendaires si 3 instances bien orchestrées.
+
+## Tableau de bord
+
+```
+P3-T01 [x] done — 7cb2679
+P3-T02 [x] done — c6cdd0c
+P3-T03 [x] done — 7f58947
+P3-T04 [x] done — d249033
+P3-T05 [x] done — 0b3aada
+P3-T06 [x] done — 37a4d58
+P3-T07 [x] done — df15c51
+P3-T08 [x] done — checkpoint passed 2026-04-29
+```
diff --git a/frontend/app.js b/frontend/app.js
deleted file mode 100644
index b6148ed..0000000
--- a/frontend/app.js
+++ /dev/null
@@ -1,1387 +0,0 @@
-/* krill-watch · frontend SPA
- * MapLibre GL JS + vanilla JS + CSS. No build step, no framework.
- *
- * Live updates use SSE (/api/stream) when available; we fall back to
- * polling if the stream errors out. Polling also seeds the initial
- * roster + zone shapes on boot.
- */
-
-const POLL_MS = 30_000;             // safety-net polling cadence (SSE is the primary channel)
-const TICKER_CAP = 40;              // max events kept in the live ticker
-const MAX_TRACK_HOURS = 48;
-
-const SEVERITY_COLOR = {
-  CRITICAL: '#ff3860',
-  SUSPICIOUS: '#ffb020',
-  WATCH: '#c084fc',
-  NORMAL: '#2ecc71',
-  CPWF: '#00d1ff',
-  UNKNOWN: '#6b7a8c',
-  FISHING_ZONE: '#3b82f6',
-  OPEN_WATER: '#6b7a8c',
-};
-
-const SEVERITY_LABEL = {
-  CRITICAL: 'Critical (in MPA / penguin buffer)',
-  SUSPICIOUS: 'Suspicious (signals + zone activity)',
-  WATCH: 'Watch (anomalous behaviour)',
-  NORMAL: 'Normal',
-  CPWF: 'CPWF (friendly)',
-  UNKNOWN: 'Unknown / no data',
-};
-
-const SEVERITY_ORDER = ['CRITICAL', 'SUSPICIOUS', 'WATCH', 'CPWF', 'NORMAL', 'UNKNOWN'];
-
-// ISO-3166-1 alpha-3 → alpha-2 (only the codes our fleet uses; extend as needed).
-const ALPHA3_TO_ALPHA2 = {
-  NOR: 'NO', CHN: 'CN', HKG: 'HK', KOR: 'KR', CHL: 'CL', KNA: 'KN', NAM: 'NA',
-  RUS: 'RU', UKR: 'UA', GBR: 'GB', USA: 'US', JPN: 'JP', PAN: 'PA', LBR: 'LR',
-  MLT: 'MT', BHS: 'BS', VCT: 'VC', VUT: 'VU', BLZ: 'BZ', COM: 'KM',
-  POL: 'PL', ESP: 'ES', PRT: 'PT', FRA: 'FR', DEU: 'DE',
-};
-
-const FLAG_NAME = {
-  NO: 'Norway', CN: 'China', HK: 'Hong Kong', KR: 'South Korea', CL: 'Chile',
-  KN: 'St. Kitts & Nevis', NA: 'Namibia', RU: 'Russia', UA: 'Ukraine',
-  GB: 'United Kingdom', US: 'United States', JP: 'Japan', PA: 'Panama',
-};
-
-const BASEMAP = {
-  dark: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
-  satellite: {
-    version: 8,
-    sources: {
-      'esri-imagery': {
-        type: 'raster',
-        tiles: [
-          'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-        ],
-        tileSize: 256,
-        maxzoom: 19,
-        attribution:
-          'Imagery: <a href="https://www.esri.com/">Esri</a>, Maxar, Earthstar Geographics, GIS User Community',
-      },
-      'carto-labels': {
-        type: 'raster',
-        tiles: ['https://basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png'],
-        tileSize: 256,
-        attribution: '© OpenStreetMap, © CARTO',
-      },
-    },
-    layers: [
-      { id: 'imagery', type: 'raster', source: 'esri-imagery' },
-      { id: 'labels', type: 'raster', source: 'carto-labels', paint: { 'raster-opacity': 0.85 } },
-    ],
-  },
-};
-
-let map;
-let basemap = 'dark';
-let allVessels = [];
-let trackVisible = false;
-let labelsVisible = true;
-let activeSlug = null;
-let activeFilter = 'all';
-let searchTerm = '';
-let evtSource = null;
-let connState = 'connecting';
-let lastHealth = null;        // most recent /api/health payload (drives empty-state copy)
-let firstVesselsLoaded = false;
-let closuresState = null;     // { metadata, count, closures } from /api/closures
-
-// ---------- Utilities ---------------------------------------------------
-
-const $ = (sel) => document.querySelector(sel);
-const $$ = (sel) => Array.from(document.querySelectorAll(sel));
-
-const fmtTs = (iso) => {
-  if (!iso) return '—';
-  try {
-    const d = new Date(iso);
-    return d.toISOString().slice(0, 16).replace('T', ' ') + 'Z';
-  } catch { return iso; }
-};
-
-const fmtTsShort = (iso) => {
-  if (!iso) return '—';
-  try { return new Date(iso).toISOString().slice(5, 16).replace('T', ' '); }
-  catch { return iso; }
-};
-
-const fmtTsHM = (iso) => {
-  if (!iso) return '—';
-  try { return new Date(iso).toISOString().slice(11, 16) + 'Z'; }
-  catch { return iso; }
-};
-
-const escapeHtml = (s) =>
-  String(s ?? '—').replace(/[&<>"']/g, (c) =>
-    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c])
-  );
-
-const tag = (sev) => `<span class="tag tag--${sev || 'UNKNOWN'}">${sev || 'UNKNOWN'}</span>`;
-
-/** Convert an ISO-3 (or alpha-2) flag code to a 🇽🇽 emoji using regional indicator chars. */
-function flagEmoji(code) {
-  if (!code) return '🏳️';
-  const c = String(code).toUpperCase();
-  const a2 = c.length === 3 ? (ALPHA3_TO_ALPHA2[c] || '') : c;
-  if (a2.length !== 2) return '🏳️';
-  const A = 0x1F1E6; // regional indicator A
-  return String.fromCodePoint(A + a2.charCodeAt(0) - 65, A + a2.charCodeAt(1) - 65);
-}
-
-function flagName(code) {
-  if (!code) return 'Unknown';
-  const c = String(code).toUpperCase();
-  const a2 = c.length === 3 ? (ALPHA3_TO_ALPHA2[c] || '') : c;
-  return FLAG_NAME[a2] || c;
-}
-
-function flagAlpha2(code) {
-  if (!code) return '';
-  const c = String(code).toUpperCase();
-  return c.length === 3 ? (ALPHA3_TO_ALPHA2[c] || '') : c;
-}
-
-// Cache of which flag icons we've already requested so we don't refetch.
-const _flagsRequested = new Set();
-
-function ensureFlagImage(a2) {
-  if (!a2 || a2.length !== 2) return;
-  const key = `flag-${a2}`;
-  if (_flagsRequested.has(key)) return;
-  _flagsRequested.add(key);
-  if (map && map.hasImage(key)) return;
-  const img = new Image(40, 27);
-  img.crossOrigin = 'anonymous';
-  img.onload = () => {
-    if (!map.hasImage(key)) {
-      try { map.addImage(key, img); } catch (_) { /* race; harmless */ }
-      // Trigger a redraw so the new icon is picked up.
-      if (map.getSource('vessels')) {
-        const data = map.getSource('vessels')._data;
-        if (data) map.getSource('vessels').setData(data);
-      }
-    }
-  };
-  img.onerror = () => { /* fall back to flag-XX via coalesce */ };
-  img.src = `https://flagcdn.com/w40/${a2.toLowerCase()}.png`;
-}
-
-function preloadFleetFlags(vessels) {
-  const codes = new Set();
-  for (const v of vessels) {
-    const a2 = flagAlpha2(v.flag);
-    if (a2) codes.add(a2);
-  }
-  for (const a2 of codes) ensureFlagImage(a2);
-}
-
-async function api(path) {
-  const r = await fetch(path, { headers: { 'Accept': 'application/json' } });
-  if (!r.ok) throw new Error(`${path}: ${r.status}`);
-  return r.json();
-}
-
-// ---------- Graticule (lat/lon grid) -----------------------------------
-
-function buildGraticule(stepLat = 5, stepLon = 10) {
-  const features = [];
-  for (let lon = -180; lon <= 180; lon += stepLon) {
-    features.push({
-      type: 'Feature',
-      properties: { kind: 'meridian', value: lon },
-      geometry: {
-        type: 'LineString',
-        coordinates: Array.from({ length: 73 }, (_, i) => [lon, -90 + i * 2.5]),
-      },
-    });
-  }
-  for (let lat = -85; lat <= 85; lat += stepLat) {
-    features.push({
-      type: 'Feature',
-      properties: { kind: 'parallel', value: lat },
-      geometry: {
-        type: 'LineString',
-        coordinates: Array.from({ length: 73 }, (_, i) => [-180 + i * 5, lat]),
-      },
-    });
-  }
-  return { type: 'FeatureCollection', features };
-}
-
-// ---------- Map setup ---------------------------------------------------
-
-function initMap() {
-  map = new maplibregl.Map({
-    container: 'map',
-    style: BASEMAP.dark,
-    center: [-50, -60],
-    zoom: 3,
-    attributionControl: { compact: true },
-  });
-  map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'bottom-right');
-  map.addControl(new maplibregl.ScaleControl({ unit: 'nautical' }), 'bottom-left');
-  map.on('load', onMapLoad);
-}
-
-function onMapLoad() {
-  installLayers();
-  loadZones();
-  bootstrap();
-  setInterval(() => { refreshLive(); refreshStats(); }, POLL_MS);
-  setInterval(refreshHealth, POLL_MS * 2);
-}
-
-function installLayers() {
-  if (!map.getSource('zones')) {
-    map.addSource('zones', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
-    map.addLayer({
-      id: 'zone-fill', type: 'fill', source: 'zones',
-      filter: ['all',
-        ['==', ['geometry-type'], 'Polygon'],
-        ['!=', ['get', 'category'], 'penguin_buffer'],
-      ],
-      paint: {
-        'fill-color': ['match', ['get', 'category'],
-          'mpa', '#ff3860',
-          'buffer_zone', '#ffb020',
-          'fishery_subarea', '#3b82f6',
-          'convention_area', '#1e293b',
-          '#666',
-        ],
-        'fill-opacity': ['match', ['get', 'category'],
-          'mpa', 0.18,
-          'buffer_zone', 0.15,
-          'fishery_subarea', 0.06,
-          'convention_area', 0.02,
-          0.10,
-        ],
-      },
-    });
-    map.addLayer({
-      id: 'zone-outline', type: 'line', source: 'zones',
-      filter: ['all',
-        ['==', ['geometry-type'], 'Polygon'],
-        ['!=', ['get', 'category'], 'penguin_buffer'],
-      ],
-      paint: {
-        'line-color': ['match', ['get', 'category'],
-          'mpa', '#ff3860',
-          'buffer_zone', '#ffb020',
-          'fishery_subarea', '#3b82f6',
-          'convention_area', '#475569',
-          '#888',
-        ],
-        'line-width': ['match', ['get', 'category'],
-          'mpa', 1.6,
-          'buffer_zone', 1.0,
-          'fishery_subarea', 1.0,
-          0.8,
-        ],
-        'line-dasharray': ['match', ['get', 'category'],
-          'mpa', ['literal', [1]],
-          'buffer_zone', ['literal', [3, 2]],
-          ['literal', [2, 2]],
-        ],
-      },
-    });
-    map.addLayer({
-      id: 'penguin-buffer-fill', type: 'fill', source: 'zones',
-      filter: ['==', ['get', 'category'], 'penguin_buffer'],
-      paint: {
-        'fill-color': '#22d3ee',
-        'fill-opacity': ['case', ['==', ['get', 'tier'], 'campaign'], 0.18, 0.08],
-      },
-    });
-    map.addLayer({
-      id: 'penguin-buffer-outline', type: 'line', source: 'zones',
-      filter: ['==', ['get', 'category'], 'penguin_buffer'],
-      paint: {
-        'line-color': '#22d3ee',
-        'line-width': ['case', ['==', ['get', 'tier'], 'campaign'], 1.4, 0.8],
-        'line-dasharray': ['case', ['==', ['get', 'tier'], 'campaign'], ['literal', [1]], ['literal', [4, 3]]],
-      },
-    });
-    map.addLayer({
-      id: 'zone-label', type: 'symbol', source: 'zones',
-      filter: ['all',
-        ['==', ['geometry-type'], 'Polygon'],
-        ['!=', ['get', 'category'], 'convention_area'],
-        ['!=', ['get', 'category'], 'penguin_buffer'],
-      ],
-      layout: {
-        'text-field': ['get', 'name'],
-        'text-size': 11,
-        'text-offset': [0, 0.5],
-      },
-      paint: { 'text-color': '#cfd6e0', 'text-halo-color': '#0b0e13', 'text-halo-width': 1.5 },
-    });
-    map.addLayer({
-      id: 'penguin-colony-dot', type: 'circle', source: 'zones',
-      filter: ['==', ['get', 'category'], 'penguin_colony'],
-      paint: {
-        'circle-radius': 4,
-        'circle-color': '#22d3ee',
-        'circle-stroke-color': '#0b0e13',
-        'circle-stroke-width': 1.5,
-      },
-    });
-    map.addLayer({
-      id: 'penguin-colony-label', type: 'symbol', source: 'zones',
-      filter: ['==', ['get', 'category'], 'penguin_colony'],
-      layout: {
-        'text-field': ['get', 'name'],
-        'text-size': 10,
-        'text-offset': [0, 1.0],
-        'text-anchor': 'top',
-      },
-      paint: { 'text-color': '#bae6fd', 'text-halo-color': '#0b0e13', 'text-halo-width': 1.5 },
-    });
-  }
-
-  if (!map.getSource('graticule')) {
-    map.addSource('graticule', { type: 'geojson', data: buildGraticule() });
-    map.addLayer({
-      id: 'graticule-line', type: 'line', source: 'graticule',
-      layout: { visibility: 'none' },
-      paint: { 'line-color': '#7c8aa0', 'line-opacity': 0.35, 'line-width': 0.6 },
-    });
-  }
-
-  if (!map.getSource('tracks')) {
-    map.addSource('tracks', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
-    map.addLayer({
-      id: 'track-line', type: 'line', source: 'tracks',
-      layout: { visibility: 'none', 'line-cap': 'round', 'line-join': 'round' },
-      paint: {
-        'line-color': ['match', ['get', 'severity'],
-          'CRITICAL', '#ff3860',
-          'SUSPICIOUS', '#ffb020',
-          'WATCH', '#c084fc',
-          'CPWF', '#00d1ff',
-          '#2ecc71',
-        ],
-        'line-width': 2,
-        'line-opacity': 0.85,
-      },
-    });
-  }
-
-  // Inject a triangular COG arrow icon (registered before the layer that uses it).
-  if (!map.hasImage('cog-arrow')) {
-    const size = 14;
-    const c = document.createElement('canvas');
-    c.width = c.height = size;
-    const ctx = c.getContext('2d');
-    ctx.fillStyle = '#fff';
-    ctx.beginPath();
-    ctx.moveTo(size / 2, 1);
-    ctx.lineTo(size - 1, size - 2);
-    ctx.lineTo(1, size - 2);
-    ctx.closePath();
-    ctx.fill();
-    map.addImage('cog-arrow', { width: size, height: size, data: ctx.getImageData(0, 0, size, size).data });
-  }
-
-  // Fallback flag (gray with question mark) so unknown codes still render.
-  if (!map.hasImage('flag-XX')) {
-    const w = 24, h = 16;
-    const c = document.createElement('canvas');
-    c.width = w; c.height = h;
-    const ctx = c.getContext('2d');
-    ctx.fillStyle = '#3a4254';
-    ctx.fillRect(0, 0, w, h);
-    ctx.strokeStyle = '#6b7a8c';
-    ctx.lineWidth = 1;
-    ctx.strokeRect(0.5, 0.5, w - 1, h - 1);
-    ctx.fillStyle = '#cfd6e0';
-    ctx.font = '700 11px sans-serif';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText('?', w / 2, h / 2 + 1);
-    map.addImage('flag-XX', { width: w, height: h, data: ctx.getImageData(0, 0, w, h).data });
-  }
-
-  if (!map.getSource('vessels')) {
-    map.addSource('vessels', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
-
-    // Outer halo — pulses on critical, otherwise a quiet glow.
-    map.addLayer({
-      id: 'vessels-halo', type: 'circle', source: 'vessels',
-      paint: {
-        'circle-radius': ['case', ['==', ['get', 'severity'], 'CRITICAL'], 22, 14],
-        'circle-color': ['get', 'color'],
-        'circle-opacity': ['case', ['==', ['get', 'severity'], 'CRITICAL'], 0.30, 0.15],
-        'circle-stroke-width': 0,
-      },
-    });
-
-    // COG arrow — small triangle indicating heading; only when cog is set.
-    map.addLayer({
-      id: 'vessels-arrow', type: 'symbol', source: 'vessels',
-      filter: ['has', 'cog'],
-      layout: {
-        'icon-image': 'cog-arrow',
-        'icon-size': 0.7,
-        'icon-rotate': ['get', 'cog'],
-        'icon-rotation-alignment': 'map',
-        'icon-allow-overlap': true,
-        'icon-ignore-placement': true,
-        'icon-offset': [0, -14],
-      },
-    });
-
-    map.addLayer({
-      id: 'vessels-dot', type: 'circle', source: 'vessels',
-      paint: {
-        'circle-radius': ['case', ['==', ['get', 'severity'], 'CRITICAL'], 8, 6.5],
-        'circle-color': ['get', 'color'],
-        'circle-stroke-color': '#fff',
-        'circle-stroke-width': 1.5,
-        'circle-opacity': 0.95,
-      },
-    });
-
-    // Flag chip rendered above the vessel dot (real PNG icon — emoji glyphs
-    // aren't in MapLibre's default font, so we bake actual flag images).
-    map.addLayer({
-      id: 'vessels-flag', type: 'symbol', source: 'vessels',
-      layout: {
-        'icon-image': ['coalesce',
-          ['image', ['concat', 'flag-', ['get', 'flag_a2']]],
-          ['image', 'flag-XX'],
-        ],
-        'icon-size': 0.85,
-        'icon-offset': [0, -22],
-        'icon-allow-overlap': true,
-        'icon-ignore-placement': true,
-      },
-    });
-
-    map.addLayer({
-      id: 'vessels-label', type: 'symbol', source: 'vessels',
-      layout: {
-        'text-field': ['get', 'name'],
-        'text-size': 11,
-        'text-offset': [0, 1.3],
-        'text-anchor': 'top',
-        'text-allow-overlap': false,
-        'visibility': 'visible',
-      },
-      paint: { 'text-color': '#e3ecf6', 'text-halo-color': '#0b0e13', 'text-halo-width': 1.6 },
-    });
-
-    map.on('click', 'vessels-dot', (e) => {
-      const f = e.features[0];
-      openDetail(f.properties.slug);
-    });
-    map.on('mouseenter', 'vessels-dot', () => (map.getCanvas().style.cursor = 'pointer'));
-    map.on('mouseleave', 'vessels-dot', () => (map.getCanvas().style.cursor = ''));
-  }
-}
-
-async function loadZones() {
-  try {
-    const fc = await api('/api/zones');
-    map.getSource('zones').setData(fc);
-  } catch (err) {
-    console.warn('zones load failed', err);
-  }
-}
-
-// ---------- Bootstrap and polling -------------------------------------
-
-async function bootstrap() {
-  seedFleetSkeleton();
-  await refreshHealth();
-  await refreshVessels();
-  await refreshLive();
-  await refreshStats();
-  await refreshEventStrip();
-  await refreshClosures();
-  openSSE();
-}
-
-async function refreshClosures() {
-  try {
-    closuresState = await api('/api/closures');
-  } catch {
-    closuresState = { metadata: {}, count: 0, closures: [] };
-  }
-  renderClosuresChip();
-  renderClosuresTab();
-}
-
-function renderClosuresChip() {
-  const chip = $('#closures-chip');
-  const label = $('#closures-chip-label');
-  if (!chip || !label) return;
-  const list = closuresState?.closures || [];
-  const today = new Date().toISOString().slice(0, 10);
-  const active = list.filter((c) => {
-    if (c.status === 'PROJECTED') return false;
-    if (c.start_date > today) return false;
-    if (c.end_date && c.end_date < today) return false;
-    return c.status === 'ACTIVE' || c.status === 'CLOSED_PAST';
-  });
-  if (!list.length) {
-    chip.classList.add('mission-chip--hidden');
-    return;
-  }
-  chip.classList.remove('mission-chip--hidden');
-  if (active.length) {
-    label.textContent = `${active.length} closure${active.length === 1 ? '' : 's'} · ${active.map((c) => c.subarea).join(', ')}`;
-    chip.classList.add('mission-chip--hot');
-  } else {
-    label.textContent = `${list.length} CCAMLR closure${list.length === 1 ? '' : 's'} on file`;
-    chip.classList.remove('mission-chip--hot');
-  }
-}
-
-function renderClosuresTab() {
-  const el = $('#tab-closures');
-  if (!el) return;
-  const list = closuresState?.closures || [];
-  if (!list.length) {
-    el.innerHTML = `<div class="empty">No CCAMLR closures on file · curated entries live in <code>config/ccamlr_closures.json</code></div>`;
-    return;
-  }
-  const sorted = list.slice().sort((a, b) => (b.start_date || '').localeCompare(a.start_date || ''));
-  const today = new Date().toISOString().slice(0, 10);
-  el.innerHTML = `<div class="event-list">${sorted.map((c) => {
-    const sources = (c.source_urls || []).map((u) => {
-      let host;
-      try { host = new URL(u).hostname.replace(/^www\./, ''); }
-      catch { host = u; }
-      return `<a href="${escapeHtml(u)}" target="_blank" rel="noopener noreferrer">${escapeHtml(host)}</a>`;
-    }).join(' · ');
-    const isActive = c.status !== 'PROJECTED'
-      && c.start_date <= today
-      && (!c.end_date || c.end_date >= today)
-      && (c.status === 'ACTIVE' || c.status === 'CLOSED_PAST');
-    const status = `<span class="closure-status closure-status--${c.status.toLowerCase()}">${escapeHtml(c.status)}</span>`;
-    const liveDot = isActive ? '<span class="closure-live" title="Active today"></span>' : '';
-    const range = c.end_date ? `${c.start_date} → ${c.end_date}` : `${c.start_date} → open`;
-    return `
-      <div class="event">
-        <div class="event__ts">${escapeHtml(range)}</div>
-        <div>
-          <div class="event__type">
-            ${liveDot}
-            ${status}
-            <span class="closure-subarea">${escapeHtml(c.subarea)}</span>
-            ${escapeHtml(c.title)}
-          </div>
-          <div class="event__detail">${escapeHtml(c.summary)}</div>
-          <div class="event__sources">sources: ${sources}</div>
-        </div>
-      </div>`;
-  }).join('')}</div>`;
-}
-
-/** Drop 8 placeholder rows into the fleet list while we wait for /api/vessels. */
-function seedFleetSkeleton() {
-  const list = $('#fleet-list');
-  if (!list || firstVesselsLoaded) return;
-  list.innerHTML = Array.from({ length: 8 }, () => `
-    <li class="fleet__row--skel">
-      <span class="skel skel-flag"></span>
-      <span class="skel skel-name"></span>
-      <span class="skel skel-tag"></span>
-    </li>
-  `).join('');
-}
-
-/** Format a duration in ms as "Xh Ym" (or "Xm" / "Ys" for short ones). */
-function fmtETA(ms) {
-  if (ms == null) return '—';
-  const total = Math.max(0, Math.round(ms / 1000));
-  if (total < 60) return `${total}s`;
-  const m = Math.floor(total / 60);
-  if (m < 60) return `${m}m`;
-  const h = Math.floor(m / 60);
-  return `${h}h ${m % 60}m`;
-}
-
-/** Pull /api/health, cache it, and update the data banner. */
-async function refreshHealth() {
-  try {
-    lastHealth = await api('/api/health');
-  } catch {
-    lastHealth = { _failed: true };
-  }
-  renderDataBanner();
-}
-
-function renderDataBanner() {
-  const el = $('#data-banner');
-  if (!el) return;
-  const h = lastHealth || {};
-
-  if (h._failed) {
-    el.className = 'banner banner--critical';
-    el.innerHTML = `<span class="banner__icon"></span>
-      <span><span class="banner__title">API unreachable</span>
-      <span class="banner__sep">·</span>
-      <span class="banner__detail">retrying…</span></span>`;
-    return;
-  }
-
-  const ais = h.ais_stream || {};
-  const gfw = h.gfw || {};
-  const cache = gfw.cache || {};
-  const snapshotAt = gfw.snapshot_at ? new Date(gfw.snapshot_at) : null;
-  const nextRefreshAt = gfw.next_refresh_at ? new Date(gfw.next_refresh_at) : null;
-  const now = new Date();
-
-  let kind = null;
-  let title = null;
-  let detail = null;
-
-  if (cache.cache_only_mode && cache.entries === 0) {
-    kind = 'critical';
-    title = 'No upstream evidence yet';
-    detail = 'GFW_API_KEY not set and the on-disk cache is empty — set the key in .env to ingest fresh data.';
-  } else if (cache.cache_only_mode && cache.entries > 0 && cache.entries === cache.stale_entries) {
-    kind = 'warn';
-    title = 'Cache only — every entry is past the 7-day ceiling';
-    detail = 'Set GFW_API_KEY to refresh; current evidence will not be served.';
-  } else if (cache.cache_only_mode) {
-    kind = 'warn';
-    title = 'Cache only';
-    const oldest = cache.oldest_age_seconds != null
-      ? fmtETA(cache.oldest_age_seconds * 1000) : '—';
-    detail = `No GFW_API_KEY · serving ${cache.entries} cached responses (oldest ${oldest} ago).`;
-  } else if (!snapshotAt) {
-    kind = 'info';
-    title = 'Waiting for first GFW poll';
-    detail = nextRefreshAt
-      ? `Next attempt in ${fmtETA(nextRefreshAt - now)}.`
-      : 'Refresher worker is starting up.';
-  } else if (!ais.configured) {
-    kind = 'info';
-    title = 'AISStream not configured';
-    detail = `Live positions disabled · GFW snapshot ${fmtETA(now - snapshotAt)} ago.`;
-  }
-
-  if (!kind) {
-    el.className = 'banner banner--hidden';
-    el.innerHTML = '';
-    return;
-  }
-  el.className = `banner banner--${kind}`;
-  el.innerHTML = `
-    <span class="banner__icon"></span>
-    <span>
-      <span class="banner__title">${escapeHtml(title)}</span>
-      <span class="banner__sep">·</span>
-      <span class="banner__detail">${escapeHtml(detail)}</span>
-    </span>
-  `;
-}
-
-async function refreshVessels() {
-  try {
-    const data = await api('/api/vessels');
-    allVessels = data.vessels;
-    firstVesselsLoaded = true;
-    preloadFleetFlags(allVessels);
-    renderLegend(allVessels);
-    renderFleetList();
-    renderVesselsLayer();
-    $('#status-vessels').textContent = `${data.count} vessels`;
-    $('#status-updated').textContent = data.generated_at
-      ? `GFW snapshot: ${fmtTs(data.generated_at)}`
-      : 'GFW snapshot: pending';
-  } catch (err) {
-    console.error(err);
-  }
-}
-
-async function refreshLive() {
-  try {
-    const data = await api('/api/positions/live?hours=24');
-    const liveByMmsi = new Map(data.positions.map((p) => [p.mmsi, p]));
-
-    allVessels = allVessels.map((v) => {
-      const live = liveByMmsi.get(v.mmsi);
-      if (!live) return v;
-      return {
-        ...v,
-        last_position: { lat: live.lat, lon: live.lon, ts: live.ts, sog: live.sog_knots, cog: live.cog_deg },
-        last_seen: live.ts,
-      };
-    });
-
-    renderVesselsLayer();
-    renderFleetList();
-    $('#status-positions').textContent = livePositionsLabel(data.count);
-    if (activeSlug) renderDetail(activeSlug);
-  } catch (err) {
-    console.warn('live refresh failed', err);
-  }
-}
-
-/** Cause-aware label for the position counter — "0 live AIS reports" alone is poison. */
-function livePositionsLabel(count) {
-  if (count > 0) return `${count} live AIS reports`;
-  if (lastHealth?.ais_stream && lastHealth.ais_stream.configured === false) {
-    return '0 live AIS · stream not configured';
-  }
-  return '0 live AIS · waiting for first message';
-}
-
-async function refreshStats() {
-  try {
-    const s = await api('/api/stats');
-    const tracked = s.tracked || 0;
-    const inMpa = s.in_mpa || 0;
-    const inBuf = s.in_penguin_buffer || 0;
-    const inSub = s.in_ccamlr_subarea || 0;
-    $('#status-vessels').textContent = `${s.fleet_size} fleet · ${tracked} tracked`;
-    $('#kpi-fleet').textContent = s.fleet_size;
-    $('#kpi-tracked').textContent = tracked;
-    $('#kpi-mpa').textContent = inMpa;
-    $('#kpi-buffer').textContent = inBuf;
-    $('#kpi-ccamlr').textContent = inSub;
-
-    const mpaTile = $('.kpi[data-kpi="mpa"]');
-    const bufTile = $('.kpi[data-kpi="buffer"]');
-    if (mpaTile) mpaTile.classList.toggle('kpi--hot', inMpa > 0);
-    if (bufTile) bufTile.classList.toggle('kpi--hot', inBuf > 0);
-  } catch { /* silent */ }
-}
-
-async function refreshEventStrip() {
-  try {
-    const data = await api('/api/events?limit=30');
-    $('#status-events').textContent = recentEventsLabel(data.events.length);
-    renderTickerSeed(data.events);
-  } catch { /* silent */ }
-}
-
-function recentEventsLabel(count) {
-  if (count > 0) return `${count} recent events`;
-  if (lastHealth?.ais_stream && lastHealth.ais_stream.configured === false) {
-    return '0 events · AIS feed offline';
-  }
-  return '0 events yet · awaiting zone transitions';
-}
-
-// ---------- SSE -------------------------------------------------------
-
-function openSSE() {
-  if (typeof EventSource === 'undefined') return;
-  try {
-    evtSource = new EventSource('/api/stream');
-    setConn('connecting');
-    evtSource.addEventListener('hello', () => setConn('live'));
-    evtSource.addEventListener('position', (e) => {
-      try {
-        const p = JSON.parse(e.data);
-        applyLivePosition(p);
-      } catch { /* ignore */ }
-    });
-    evtSource.addEventListener('event', (e) => {
-      try {
-        const ev = JSON.parse(e.data);
-        pushTicker(ev);
-      } catch { /* ignore */ }
-    });
-    evtSource.addEventListener('vessel', (e) => {
-      try {
-        const v = JSON.parse(e.data);
-        applyVesselUpdate(v);
-      } catch { /* ignore */ }
-    });
-    evtSource.onerror = () => {
-      setConn('error');
-      // Browser auto-reconnects on errors; just surface state.
-    };
-    evtSource.onopen = () => setConn('live');
-  } catch (err) {
-    console.warn('SSE failed; falling back to polling only', err);
-    setConn('error');
-  }
-}
-
-function setConn(state) {
-  connState = state;
-  const dot = $('#status-dot');
-  const txt = $('#status-conn');
-  const tickerPulse = $('#ticker-pulse');
-  dot.classList.remove('live', 'error');
-  tickerPulse.classList.remove('live', 'alert');
-  if (state === 'live') {
-    dot.classList.add('live');
-    tickerPulse.classList.add('live');
-    txt.textContent = 'live';
-  } else if (state === 'error') {
-    dot.classList.add('error');
-    txt.textContent = 'reconnecting';
-  } else {
-    txt.textContent = 'connecting';
-  }
-}
-
-function applyLivePosition(p) {
-  const idx = allVessels.findIndex((v) => v.mmsi === p.mmsi);
-  if (idx < 0) return;
-  const v = allVessels[idx];
-  allVessels[idx] = {
-    ...v,
-    severity: p.severity || v.severity,
-    current_zones: p.zones || v.current_zones,
-    last_position: { lat: p.lat, lon: p.lon, ts: p.ts, sog: p.sog_knots, cog: p.cog_deg },
-    last_seen: p.ts,
-  };
-  renderVesselsLayer();
-  renderFleetList();
-  if (activeSlug === v.slug) renderDetail(v.slug);
-}
-
-function applyVesselUpdate(_v) { /* future-proofing for explicit vessel-status pushes */ }
-
-// ---------- Live ticker ----------------------------------------------
-
-function renderTickerSeed(events) {
-  const feed = $('#ticker-feed');
-  feed.innerHTML = '';
-  if (!events.length) {
-    feed.innerHTML = `<span class="ticker__placeholder">${tickerEmptyCopy()}</span>`;
-    return;
-  }
-  for (const ev of events.slice(0, 10).reverse()) addTickEl(ev, false);
-}
-
-function tickerEmptyCopy() {
-  if (lastHealth?.ais_stream && lastHealth.ais_stream.configured === false) {
-    return 'AIS stream not configured — set AISSTREAM_API_KEY for live zone events.';
-  }
-  if (lastHealth?.gfw && !lastHealth.gfw.snapshot_at) {
-    return 'Awaiting first GFW poll — events appear once vessels cross a zone.';
-  }
-  return 'No zone transitions yet — the fleet is in open water.';
-}
-
-function pushTicker(ev) {
-  const feed = $('#ticker-feed');
-  if (feed.querySelector('.ticker__placeholder')) feed.innerHTML = '';
-  addTickEl(ev, true);
-
-  // Cap size — drop the oldest beyond TICKER_CAP.
-  while (feed.children.length > TICKER_CAP) feed.removeChild(feed.firstChild);
-
-  // Brief alert pulse on CRITICAL.
-  if (ev.severity === 'CRITICAL') {
-    const pulse = $('#ticker-pulse');
-    pulse.classList.remove('live');
-    pulse.classList.add('alert');
-    setTimeout(() => {
-      pulse.classList.remove('alert');
-      if (connState === 'live') pulse.classList.add('live');
-    }, 5000);
-  }
-}
-
-function addTickEl(ev, prepend) {
-  const feed = $('#ticker-feed');
-  const el = document.createElement('span');
-  el.className = 'tick';
-  const sev = ev.severity || 'UNKNOWN';
-  el.innerHTML = `
-    <span class="tick__ts">${fmtTsHM(ev.ts)}</span>
-    <span class="tick__name">${escapeHtml(ev.vessel_name || ev.vessel_slug || '—')}</span>
-    ${tag(sev)}
-    <span>${escapeHtml(ev.event_type || '')}${ev.zone_id ? ' · ' + escapeHtml(ev.zone_name || ev.zone_id) : ''}</span>
-  `;
-  el.addEventListener('click', () => ev.vessel_slug && openDetail(ev.vessel_slug));
-  if (prepend) feed.insertBefore(el, feed.firstChild);
-  else feed.appendChild(el);
-}
-
-// ---------- Vessels layer ---------------------------------------------
-
-function renderVesselsLayer() {
-  const features = allVessels
-    .filter((v) => v.last_position && v.last_position.lat != null)
-    .map((v) => {
-      const a2 = flagAlpha2(v.flag);
-      const props = {
-        slug: v.slug,
-        name: v.name,
-        flag: v.flag,
-        flag_a2: a2 || 'XX',
-        flag_emoji: flagEmoji(v.flag),
-        severity: v.severity,
-        color: SEVERITY_COLOR[v.severity] || SEVERITY_COLOR.UNKNOWN,
-        friendly: v.friendly,
-      };
-      if (v.last_position.cog != null) props.cog = v.last_position.cog;
-      return {
-        type: 'Feature',
-        geometry: { type: 'Point', coordinates: [v.last_position.lon, v.last_position.lat] },
-        properties: props,
-      };
-    });
-  if (map.getSource('vessels')) {
-    map.getSource('vessels').setData({ type: 'FeatureCollection', features });
-  }
-}
-
-function renderLegend(vessels) {
-  const counts = {};
-  vessels.forEach((v) => { counts[v.severity] = (counts[v.severity] || 0) + 1; });
-  const html = SEVERITY_ORDER
-    .filter((sev) => counts[sev])
-    .map((sev) => {
-      const sw = `<span class="swatch" style="background:${SEVERITY_COLOR[sev]};color:${SEVERITY_COLOR[sev]}"></span>`;
-      const lbl = `<label><input type="checkbox" data-sev="${sev}" checked /> ${escapeHtml(SEVERITY_LABEL[sev])}</label>`;
-      const cnt = `<span class="count">${counts[sev]}</span>`;
-      return sw + lbl + cnt;
-    })
-    .join('');
-  $('#legend').innerHTML = html;
-
-  $$('#legend input[type=checkbox]').forEach((cb) => {
-    cb.addEventListener('change', applySeverityFilter);
-  });
-}
-
-function applySeverityFilter() {
-  const unchecked = $$('#legend input:not(:checked)').map((c) => c.dataset.sev);
-  ['vessels-dot', 'vessels-halo', 'vessels-label', 'vessels-arrow', 'vessels-flag'].forEach((id) => {
-    if (!map.getLayer(id)) return;
-    if (!unchecked.length) {
-      // For arrows, keep the inherent has(cog) filter.
-      map.setFilter(id, id === 'vessels-arrow' ? ['has', 'cog'] : null);
-    } else {
-      const sevFilter = ['all', ...unchecked.map((s) => ['!=', ['get', 'severity'], s])];
-      map.setFilter(id, id === 'vessels-arrow' ? ['all', ['has', 'cog'], sevFilter] : sevFilter);
-    }
-  });
-}
-
-// ---------- Fleet list -----------------------------------------------
-
-function renderFleetList() {
-  const list = $('#fleet-list');
-  const sorted = [...allVessels].sort((a, b) => {
-    const sa = SEVERITY_ORDER.indexOf(a.severity);
-    const sb = SEVERITY_ORDER.indexOf(b.severity);
-    if (sa !== sb) return sa - sb;
-    return a.name.localeCompare(b.name);
-  });
-  const term = searchTerm.trim().toLowerCase();
-  const filtered = sorted.filter((v) => {
-    if (term) {
-      const hay = `${v.name} ${v.imo || ''} ${v.mmsi || ''} ${v.flag || ''} ${v.operator || ''}`.toLowerCase();
-      if (!hay.includes(term)) return false;
-    }
-    if (activeFilter === 'risky') {
-      return ['CRITICAL', 'SUSPICIOUS', 'WATCH'].includes(v.severity);
-    }
-    if (activeFilter === 'tracked') {
-      return v.last_position && v.last_position.lat != null;
-    }
-    if (activeFilter === 'mpa') {
-      return (v.current_zones || []).some((z) => z.startsWith('MPA-'));
-    }
-    return true;
-  });
-
-  $('#fleet-count').textContent = `${filtered.length} / ${allVessels.length}`;
-
-  list.innerHTML = filtered.map((v) => {
-    const sev = v.severity || 'UNKNOWN';
-    const sub = v.last_position
-      ? `${v.last_position.lat.toFixed(2)}, ${v.last_position.lon.toFixed(2)} · ${fmtTsHM(v.last_position.ts)}`
-      : (v.imo ? `IMO ${v.imo}` : (v.mmsi ? `MMSI ${v.mmsi}` : '—'));
-    const ownerBadge = v.ownership_pending
-      ? '<span class="fleet__owner-pending" title="Beneficial owner not publicly verified">owner?</span>'
-      : '';
-    return `
-      <li class="fleet__row fleet__row--${sev} ${activeSlug === v.slug ? 'fleet__row--active' : ''}" data-slug="${escapeHtml(v.slug)}">
-        <span class="fleet__flag" title="${escapeHtml(flagName(v.flag))}">${flagEmoji(v.flag)}</span>
-        <div style="min-width:0">
-          <div class="fleet__name">
-            <span class="fleet__pulse fleet__pulse--${sev}"></span>${escapeHtml(v.name)}${ownerBadge}
-          </div>
-          <div class="fleet__sub">${escapeHtml(sub)}</div>
-        </div>
-        <span class="fleet__sev tag tag--${sev}">${sev}</span>
-      </li>`;
-  }).join('');
-
-  list.querySelectorAll('.fleet__row').forEach((row) => {
-    row.addEventListener('click', () => {
-      const slug = row.dataset.slug;
-      const v = allVessels.find((x) => x.slug === slug);
-      openDetail(slug);
-      if (v && v.last_position) {
-        map.flyTo({ center: [v.last_position.lon, v.last_position.lat], zoom: Math.max(map.getZoom(), 5.5), speed: 1.4 });
-      }
-    });
-  });
-}
-
-// ---------- Detail panel ----------------------------------------------
-
-async function openDetail(slug) {
-  activeSlug = slug;
-  $('#detail-panel').hidden = false;
-  renderFleetList();
-  await renderDetail(slug);
-}
-
-async function renderDetail(slug) {
-  let data;
-  try {
-    data = await api(`/api/vessels/${slug}`);
-  } catch (err) { console.error(err); return; }
-  const s = data.summary;
-  const flag = flagEmoji(s.flag);
-  $('#detail-name').innerHTML = `
-    <span class="flag-emoji" title="${escapeHtml(flagName(s.flag))}">${flag}</span>
-    <span>${escapeHtml(s.name)}</span>
-    ${tag(s.severity)}
-  `;
-  $('#detail-meta').textContent =
-    `${flagName(s.flag)} (${s.flag || '—'}) · IMO ${s.imo || '—'} · MMSI ${s.mmsi || '—'}`;
-
-  // Hero: three top stats
-  const last = s.last_position;
-  const sog = last && last.sog != null ? `${(+last.sog).toFixed(1)} kn` : '—';
-  const heroLastSeen = s.last_seen ? fmtTsHM(s.last_seen) : '—';
-  const zones = (s.current_zones || []).length;
-  $('#detail-hero').innerHTML = `
-    <div class="stat"><div class="stat__label">Last seen</div><div class="stat__value">${heroLastSeen}</div></div>
-    <div class="stat"><div class="stat__label">SOG</div><div class="stat__value">${sog}</div></div>
-    <div class="stat"><div class="stat__label">Zones</div><div class="stat__value">${zones}</div></div>
-  `;
-
-  // Identity tab
-  const ident = data.profile?.identity || s;
-  const zonesNow = (s.current_zones || []).join(', ') || '—';
-  const op = ident.operator || s.operator;
-  const owner = ident.registered_owner || s.registered_owner || '—';
-  const opCell = s.ownership_pending
-    ? `${escapeHtml(op)} <span class="fleet__owner-pending" title="Beneficial owner not publicly verified">pending</span>`
-    : escapeHtml(op);
-  const ownerCell = s.ownership_pending && (!owner || /^tbd$/i.test(owner))
-    ? '<span class="fleet__owner-pending" title="Beneficial owner not publicly verified">research pending</span>'
-    : escapeHtml(owner);
-  $('#tab-identity').innerHTML = `
-    <dl class="kv">
-      <dt>Operator</dt><dd>${opCell}</dd>
-      <dt>Reg. owner</dt><dd>${ownerCell}</dd>
-      <dt>Type</dt><dd>${escapeHtml(ident.vessel_type || s.vessel_type || '—')}</dd>
-      <dt>Length</dt><dd>${ident.length_m ? ident.length_m + ' m' : '—'}</dd>
-      <dt>Built</dt><dd>${ident.built || '—'}</dd>
-      <dt>Status</dt><dd>${escapeHtml(ident.status || '—')}</dd>
-      <dt>Flag state</dt><dd>${flag} ${escapeHtml(flagName(s.flag))}</dd>
-      <dt>Zones now</dt><dd>${escapeHtml(zonesNow)}</dd>
-      <dt>Last seen</dt><dd>${fmtTs(s.last_seen)}</dd>
-      ${last ? `<dt>Last position</dt><dd>${last.lat?.toFixed(3)}, ${last.lon?.toFixed(3)}</dd>` : ''}
-    </dl>
-    ${ident.notes ? `<div class="section-title">Notes</div><div style="font-size:12px;line-height:1.45">${escapeHtml(ident.notes)}</div>` : ''}
-  `;
-
-  // Activity tab
-  const act = data.profile?.activity || {};
-  const risk = data.profile?.risk || {};
-  const indicators = risk.indicators || [];
-  const indicatorClass = (i) => {
-    const s = i.toLowerCase();
-    if (s.includes('iuu') || s.includes('sanction') || s.includes('mpa')) return 'high';
-    if (s.includes('shutdown') || s.includes('encounter') || s.includes('loitering')) return 'med';
-    return '';
-  };
-  const watchHits = (risk.watchlist_hits || []);
-
-  // Severity scoring trace — externalized rules so we can answer "why?" honestly.
-  const scoring = data.profile?.scoring;
-  const scoreBlock = scoring && scoring.trace?.length
-    ? `<details class="scoring">
-         <summary><span class="scoring__sev tag tag--${scoring.severity}">${scoring.severity}</span>
-           score ${scoring.score} · <span class="scoring__why">why?</span>
-           <span class="scoring__rules">rules v${escapeHtml(scoring.rules_version || '?')}</span></summary>
-         <ul class="scoring__list">
-           ${scoring.trace.map((t) => `
-             <li class="scoring__item ${t.critical ? 'scoring__item--crit' : ''}">
-               <span class="scoring__points">${t.critical ? 'CRIT' : '+' + t.score}</span>
-               <span class="scoring__reason">${escapeHtml(t.reason)}</span>
-               <span class="scoring__id">${escapeHtml(t.id)}</span>
-             </li>`).join('')}
-         </ul>
-       </details>`
-    : '';
-
-  const encounters = act.encounters || [];
-  const reeferHits = risk.reefer_hits || [];
-  const encounterBlock = encounters.length
-    ? `<div class="section-title">Encounters & counterparties</div>
-       <div class="event-list">${encounters.slice(0, 10).map((e) => {
-         const cp = e.counterparty;
-         const m = e.reefer_match;
-         const cpTitle = cp
-           ? `${escapeHtml(cp.name || cp.id || 'unidentified counterparty')}${cp.imo ? ' · IMO ' + escapeHtml(cp.imo) : ''}${cp.flag ? ' · ' + escapeHtml(cp.flag) : ''}`
-           : 'Counterparty not exposed by GFW';
-         const mTag = m
-           ? `<span class="reefer-tag" title="${escapeHtml(m.operator || '')}">REEFER · ${escapeHtml(m.matched_field)}</span>`
-           : '';
-         return `
-           <div class="event">
-             <div class="event__ts">${fmtTsShort(e.start)}</div>
-             <div>
-               <div class="event__type">${mTag}${cpTitle}</div>
-               <div class="event__detail">
-                 ${e.lat?.toFixed?.(2) ?? '—'}, ${e.lon?.toFixed?.(2) ?? '—'}
-                 ${m ? ' · likely transshipment with ' + escapeHtml(m.operator || m.name) : ''}
-               </div>
-             </div>
-           </div>`;
-       }).join('')}</div>
-       ${encounters.length > 10 ? `<div class="empty">…${encounters.length - 10} more encounters not shown</div>` : ''}`
-    : '';
-
-  $('#tab-activity').innerHTML = `
-    <div class="metrics">
-      <div class="metric"><div class="metric__label">Fishing hours (90d)</div><div class="metric__value">${act.fishing_hours ?? '—'}</div></div>
-      <div class="metric"><div class="metric__label">Encounters</div><div class="metric__value">${act.encounter_count ?? '—'}</div></div>
-      <div class="metric"><div class="metric__label">Loitering</div><div class="metric__value">${act.loitering_count ?? '—'}</div></div>
-      <div class="metric"><div class="metric__label">AIS gaps</div><div class="metric__value">${risk.ais_gaps_total ?? '—'}</div></div>
-      <div class="metric ${reeferHits.length ? 'metric--hot' : ''}"><div class="metric__label">Reefer encounters</div><div class="metric__value">${act.reefer_encounter_count ?? 0}</div></div>
-    </div>
-    ${scoreBlock}
-    <div class="section-title">Risk indicators</div>
-    ${indicators.length
-      ? `<ul class="indicator-list">${indicators.map((i) => `<li class="${indicatorClass(i)}">${escapeHtml(i)}</li>`).join('')}</ul>`
-      : `<div class="empty">No flags from the offline scoring</div>`}
-    ${watchHits.length
-      ? `<div class="section-title">Watchlist hits</div>
-         <ul class="indicator-list">${watchHits.map((h) => `<li class="high">${escapeHtml(h.list)} · ${escapeHtml(h.reason || '')}</li>`).join('')}</ul>`
-      : ''}
-    ${encounterBlock}
-  `;
-
-  // Alerts tab — AIS gap alerts from the GFW profile
-  const alerts = data.profile?.alerts || [];
-  $('#tab-alerts').innerHTML = alerts.length
-    ? `<div class="event-list">${alerts.map((a) => `
-        <div class="event">
-          <div class="event__ts">${fmtTsShort(a.start)}</div>
-          <div>
-            <div class="event__type">${tag(a.severity)} GAP · ${a.duration_hours.toFixed(1)}h</div>
-            <div class="event__detail">
-              ${a.start_lat?.toFixed(2) ?? '—'}, ${a.start_lon?.toFixed(2) ?? '—'} → ${a.end_lat?.toFixed(2) ?? '—'}, ${a.end_lon?.toFixed(2) ?? '—'}
-              ${a.zones_entered?.length ? `<br/>zones: ${escapeHtml(a.zones_entered.join(', '))}` : ''}
-            </div>
-          </div>
-        </div>`).join('')}</div>`
-    : `<div class="empty">No AIS gap alerts in the lookback window</div>`;
-
-  // Incidents tab — curated, source-cited timeline (vessel-specific + fleet-wide).
-  const incidents = data.incidents || [];
-  $('#tab-incidents').innerHTML = incidents.length
-    ? `<div class="event-list">${incidents.map((i) => {
-        const sources = (i.source_urls || []).map((u) => {
-          let host;
-          try { host = new URL(u).hostname.replace(/^www\./, ''); }
-          catch { host = u; }
-          return `<a href="${escapeHtml(u)}" target="_blank" rel="noopener noreferrer">${escapeHtml(host)}</a>`;
-        }).join(' · ');
-        const scope = i.vessel_slug
-          ? '<span class="incident__scope incident__scope--vessel">vessel</span>'
-          : '<span class="incident__scope incident__scope--fleet">fleet-wide</span>';
-        return `
-          <div class="event">
-            <div class="event__ts">${escapeHtml(i.date)}</div>
-            <div>
-              <div class="event__type">
-                ${scope}
-                <span class="incident__conf incident__conf--${(i.confidence || 'LOW').toLowerCase()}">${escapeHtml(i.confidence)}</span>
-                ${escapeHtml(i.title)}
-              </div>
-              <div class="event__detail">${escapeHtml(i.summary)}</div>
-              <div class="event__sources">sources: ${sources}</div>
-            </div>
-          </div>`;
-      }).join('')}</div>`
-    : `<div class="empty">No documented incidents yet · curated entries live in <code>config/incidents.json</code></div>`;
-
-  // Event log tab
-  const events = data.events || [];
-  $('#tab-events').innerHTML = events.length
-    ? `<div class="event-list">${events.map((e) => `
-        <div class="event">
-          <div class="event__ts">${fmtTsShort(e.ts)}</div>
-          <div>
-            <div class="event__type">${escapeHtml(e.event_type)}${e.zone_id ? ' · ' + escapeHtml(e.zone_name || e.zone_id) : ''}</div>
-            <div class="event__detail">
-              ${e.severity ? tag(e.severity) + ' ' : ''}
-              ${e.lat != null ? `${e.lat.toFixed(2)}, ${e.lon.toFixed(2)}` : ''}
-              ${e.payload?.from ? `· ${escapeHtml(e.payload.from)} → ${escapeHtml(e.payload.to)}` : ''}
-            </div>
-          </div>
-        </div>`).join('')}</div>`
-    : `<div class="empty">No live events recorded for this vessel yet</div>`;
-
-  if (trackVisible) updateTrack(slug);
-}
-
-async function updateTrack(slug) {
-  try {
-    const data = await api(`/api/vessels/${slug}/track?hours=${MAX_TRACK_HOURS}`);
-    if (data.points.length < 2) {
-      map.getSource('tracks').setData({ type: 'FeatureCollection', features: [] });
-      return;
-    }
-    map.getSource('tracks').setData({
-      type: 'FeatureCollection',
-      features: [{
-        type: 'Feature',
-        properties: { slug, severity: allVessels.find((v) => v.slug === slug)?.severity || 'NORMAL' },
-        geometry: { type: 'LineString', coordinates: data.points.map((p) => [p.lon, p.lat]) },
-      }],
-    });
-  } catch (err) { console.warn('track load failed', err); }
-}
-
-// ---------- Tab switching --------------------------------------------
-
-function bindTabs() {
-  $$('.tab').forEach((btn) =>
-    btn.addEventListener('click', () => {
-      const t = btn.dataset.tab;
-      $$('.tab').forEach((b) => b.classList.toggle('tab--active', b === btn));
-      $$('.tab-panel').forEach((p) =>
-        p.classList.toggle('tab-panel--active', p.dataset.tab === t)
-      );
-    })
-  );
-  $('#detail-close').addEventListener('click', () => {
-    $('#detail-panel').hidden = true;
-    activeSlug = null;
-    renderFleetList();
-  });
-
-  const closuresChip = $('#closures-chip');
-  if (closuresChip) {
-    closuresChip.addEventListener('click', () => {
-      // Open the detail panel on the Closures tab without forcing a vessel selection.
-      $('#detail-panel').hidden = false;
-      $$('.tab').forEach((b) => b.classList.toggle('tab--active', b.dataset.tab === 'closures'));
-      $$('.tab-panel').forEach((p) => p.classList.toggle('tab-panel--active', p.dataset.tab === 'closures'));
-      renderClosuresTab();
-      // If no vessel was selected, blank the header so it doesn't read like the chip belongs to a vessel.
-      if (!activeSlug) {
-        $('#detail-name').textContent = 'CCAMLR closures';
-        $('#detail-meta').textContent = `${closuresState?.count || 0} on file · ${closuresState?.metadata?.last_updated || ''}`;
-        $('#detail-hero').innerHTML = '';
-      }
-    });
-  }
-}
-
-// ---------- Map controls ---------------------------------------------
-
-function bindControls() {
-  $$('.control-group .ctrl').forEach((btn) =>
-    btn.addEventListener('click', () => {
-      const target = btn.dataset.basemap;
-      if (target === basemap) return;
-      $$('.control-group .ctrl').forEach((b) => b.classList.toggle('ctrl--active', b === btn));
-      basemap = target;
-      map.setStyle(BASEMAP[target]);
-      map.once('style.load', () => {
-        installLayers();
-        loadZones();
-        renderVesselsLayer();
-        if ($('#toggle-graticule').checked) {
-          map.setLayoutProperty('graticule-line', 'visibility', 'visible');
-        }
-        if (!$('#toggle-zones').checked) {
-          ['zone-fill', 'zone-outline', 'zone-label'].forEach((id) =>
-            map.getLayer(id) && map.setLayoutProperty(id, 'visibility', 'none')
-          );
-        }
-        if (!$('#toggle-d1mpa').checked) {
-          ['penguin-buffer-fill', 'penguin-buffer-outline', 'penguin-colony-dot', 'penguin-colony-label'].forEach((id) =>
-            map.getLayer(id) && map.setLayoutProperty(id, 'visibility', 'none')
-          );
-        }
-        if (!labelsVisible) {
-          map.setLayoutProperty('vessels-label', 'visibility', 'none');
-        }
-      });
-    })
-  );
-
-  $('#toggle-graticule').addEventListener('change', (e) => {
-    if (!map.getLayer('graticule-line')) return;
-    map.setLayoutProperty('graticule-line', 'visibility', e.target.checked ? 'visible' : 'none');
-  });
-
-  $('#toggle-zones').addEventListener('change', (e) => {
-    const vis = e.target.checked ? 'visible' : 'none';
-    ['zone-fill', 'zone-outline', 'zone-label'].forEach((id) => {
-      if (map.getLayer(id)) map.setLayoutProperty(id, 'visibility', vis);
-    });
-  });
-
-  $('#toggle-d1mpa').addEventListener('change', (e) => {
-    const vis = e.target.checked ? 'visible' : 'none';
-    ['penguin-buffer-fill', 'penguin-buffer-outline', 'penguin-colony-dot', 'penguin-colony-label'].forEach((id) => {
-      if (map.getLayer(id)) map.setLayoutProperty(id, 'visibility', vis);
-    });
-  });
-
-  $('#toggle-tracks').addEventListener('change', (e) => {
-    trackVisible = e.target.checked;
-    if (!map.getLayer('track-line')) return;
-    map.setLayoutProperty('track-line', 'visibility', trackVisible ? 'visible' : 'none');
-    if (trackVisible && activeSlug) updateTrack(activeSlug);
-  });
-
-  $('#toggle-labels').addEventListener('change', (e) => {
-    labelsVisible = e.target.checked;
-    if (map.getLayer('vessels-label')) {
-      map.setLayoutProperty('vessels-label', 'visibility', labelsVisible ? 'visible' : 'none');
-    }
-  });
-
-  // Search + filter
-  $('#fleet-search').addEventListener('input', (e) => {
-    searchTerm = e.target.value;
-    renderFleetList();
-  });
-  $('#fleet-filters').addEventListener('click', (e) => {
-    const btn = e.target.closest('.chip');
-    if (!btn) return;
-    activeFilter = btn.dataset.filter;
-    $$('#fleet-filters .chip').forEach((c) => c.classList.toggle('chip--active', c === btn));
-    renderFleetList();
-  });
-
-  // Collapse buttons
-  $$('.panel__collapse').forEach((btn) => {
-    btn.addEventListener('click', () => {
-      const id = btn.dataset.collapse;
-      const panel = document.getElementById(id);
-      if (!panel) return;
-      panel.classList.toggle('panel--collapsed');
-      btn.textContent = panel.classList.contains('panel--collapsed') ? '+' : '−';
-    });
-  });
-}
-
-// ---------- Boot ------------------------------------------------------
-
-document.addEventListener('DOMContentLoaded', () => {
-  bindTabs();
-  bindControls();
-  initMap();
-});
diff --git a/frontend/index.html b/frontend/index.html
deleted file mode 100644
index c9a135a..0000000
--- a/frontend/index.html
+++ /dev/null
@@ -1,178 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>krill-watch · live Antarctic krill fleet monitor</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="Live OSINT dashboard for the CCAMLR-licensed Antarctic krill fishing fleet — produced for the Captain Paul Watson Foundation Krill Wars campaign." />
-  <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" />
-  <link rel="stylesheet" href="/style.css" />
-</head>
-<body>
-  <main id="app">
-    <div id="map"></div>
-
-    <!-- Top-center: mission KPI strip -->
-    <aside class="panel mission" id="mission">
-      <div class="mission__tagline">
-        <span class="mission__sparkle"></span>
-        Defending the Antarctic keystone — live OSINT for the krill fleet
-      </div>
-      <div class="banner banner--hidden" id="data-banner" role="status"></div>
-      <div class="mission__chips">
-        <button class="mission-chip mission-chip--hidden" id="closures-chip" type="button" title="View CCAMLR closures">
-          <span class="mission-chip__dot"></span>
-          <span class="mission-chip__label" id="closures-chip-label">Closures</span>
-        </button>
-      </div>
-      <div class="mission__kpis" id="mission-kpis">
-        <div class="kpi" data-kpi="fleet">
-          <div class="kpi__value" id="kpi-fleet">—</div>
-          <div class="kpi__label">Fleet</div>
-        </div>
-        <div class="kpi" data-kpi="tracked">
-          <div class="kpi__value" id="kpi-tracked">—</div>
-          <div class="kpi__label">Tracked</div>
-        </div>
-        <div class="kpi kpi--alert" data-kpi="mpa">
-          <div class="kpi__value" id="kpi-mpa">—</div>
-          <div class="kpi__label">In MPA</div>
-        </div>
-        <div class="kpi kpi--warn" data-kpi="buffer">
-          <div class="kpi__value" id="kpi-buffer">—</div>
-          <div class="kpi__label">Penguin buffer</div>
-        </div>
-        <div class="kpi kpi--info" data-kpi="ccamlr">
-          <div class="kpi__value" id="kpi-ccamlr">—</div>
-          <div class="kpi__label">CCAMLR 48</div>
-        </div>
-      </div>
-    </aside>
-
-    <!-- Top-left: brand + legend + controls -->
-    <aside class="panel panel--top-left" id="panel-controls">
-      <header class="brand">
-        <div class="brand__row">
-          <div class="brand__logo" aria-hidden="true">
-            <span class="brand__logo-dot brand__logo-dot--a"></span>
-            <span class="brand__logo-dot brand__logo-dot--b"></span>
-            <span class="brand__logo-dot brand__logo-dot--c"></span>
-          </div>
-          <div>
-            <div class="brand__title">krill-watch</div>
-            <div class="brand__subtitle">CCAMLR fleet monitor · CPWF Krill Wars</div>
-          </div>
-          <button class="panel__collapse" data-collapse="panel-controls" title="Collapse">−</button>
-        </div>
-      </header>
-
-      <div class="panel__body">
-        <section class="legend" id="legend"></section>
-
-        <section class="map-controls">
-          <div class="control-group" role="radiogroup" aria-label="Basemap">
-            <button class="ctrl ctrl--active" data-basemap="dark">Dark</button>
-            <button class="ctrl" data-basemap="satellite">Satellite</button>
-          </div>
-          <label class="ctrl-toggle">
-            <input type="checkbox" id="toggle-graticule" /> <span>Lat/Lon grid</span>
-          </label>
-          <label class="ctrl-toggle">
-            <input type="checkbox" id="toggle-zones" checked /> <span>CCAMLR zones</span>
-          </label>
-          <label class="ctrl-toggle">
-            <input type="checkbox" id="toggle-d1mpa" checked /> <span>D1MPA penguin rings (30/40 km)</span>
-          </label>
-          <label class="ctrl-toggle">
-            <input type="checkbox" id="toggle-tracks" /> <span>24h tracks</span>
-          </label>
-          <label class="ctrl-toggle">
-            <input type="checkbox" id="toggle-labels" checked /> <span>Vessel labels</span>
-          </label>
-        </section>
-      </div>
-    </aside>
-
-    <!-- Left side: fleet list (searchable, sortable) -->
-    <aside class="panel panel--left-mid" id="panel-fleet">
-      <header class="fleet__header">
-        <div class="fleet__title">Fleet</div>
-        <div class="fleet__count" id="fleet-count">—</div>
-        <button class="panel__collapse" data-collapse="panel-fleet" title="Collapse">−</button>
-      </header>
-      <div class="panel__body fleet__body">
-        <div class="fleet__search">
-          <input id="fleet-search" type="search" placeholder="Search name, IMO, MMSI, flag…" autocomplete="off" />
-        </div>
-        <div class="fleet__filters" id="fleet-filters">
-          <button class="chip chip--active" data-filter="all">All</button>
-          <button class="chip" data-filter="risky">At-risk</button>
-          <button class="chip" data-filter="tracked">Live</button>
-          <button class="chip" data-filter="mpa">In MPA</button>
-        </div>
-        <ul class="fleet__list" id="fleet-list"></ul>
-      </div>
-    </aside>
-
-    <!-- Top-right: vessel detail panel -->
-    <aside class="panel panel--top-right" id="detail-panel" hidden>
-      <header class="detail__header">
-        <div class="detail__title">
-          <div class="detail__name" id="detail-name">—</div>
-          <div class="detail__meta" id="detail-meta">—</div>
-        </div>
-        <button class="close" id="detail-close" aria-label="Close">×</button>
-      </header>
-      <div class="detail__hero" id="detail-hero"></div>
-      <nav class="tabs" role="tablist">
-        <button class="tab tab--active" data-tab="identity" role="tab">Identity</button>
-        <button class="tab" data-tab="activity" role="tab">Activity</button>
-        <button class="tab" data-tab="alerts" role="tab">Alerts</button>
-        <button class="tab" data-tab="incidents" role="tab">Incidents</button>
-        <button class="tab" data-tab="closures" role="tab">Closures</button>
-        <button class="tab" data-tab="events" role="tab">Event log</button>
-      </nav>
-      <section class="tab-panels">
-        <div class="tab-panel tab-panel--active" data-tab="identity" id="tab-identity"></div>
-        <div class="tab-panel" data-tab="activity" id="tab-activity"></div>
-        <div class="tab-panel" data-tab="alerts" id="tab-alerts"></div>
-        <div class="tab-panel" data-tab="incidents" id="tab-incidents"></div>
-        <div class="tab-panel" data-tab="closures" id="tab-closures"></div>
-        <div class="tab-panel" data-tab="events" id="tab-events"></div>
-      </section>
-    </aside>
-
-    <!-- Bottom: live event ticker -->
-    <aside class="panel ticker" id="ticker">
-      <div class="ticker__pulse" id="ticker-pulse" aria-hidden="true"></div>
-      <div class="ticker__label">LIVE</div>
-      <div class="ticker__feed" id="ticker-feed">
-        <span class="ticker__placeholder">Awaiting live events…</span>
-      </div>
-    </aside>
-
-    <!-- Bottom: statusbar -->
-    <footer class="statusbar">
-      <span class="dot" id="status-dot"></span>
-      <span id="status-conn">disconnected</span>
-      <span class="sep">·</span>
-      <span id="status-vessels">—</span>
-      <span class="sep">·</span>
-      <span id="status-positions">—</span>
-      <span class="sep">·</span>
-      <span id="status-events">—</span>
-      <span class="spacer"></span>
-      <span id="status-updated">—</span>
-      <span class="sep">·</span>
-      <a class="statusbar__link" href="https://www.ccamlr.org/" target="_blank" rel="noopener">CCAMLR</a>
-      <span class="sep">·</span>
-      <a class="statusbar__link" href="https://www.captainpaulwatsonfoundation.org/krill-wars" target="_blank" rel="noopener">CPWF</a>
-      <span class="sep">·</span>
-      <a class="statusbar__link statusbar__link--cta" href="https://krill-free.org" target="_blank" rel="noopener" title="Companion site — turn this OSINT into consumer pressure">Take action ↗</a>
-    </footer>
-  </main>
-
-  <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
-  <script src="/app.js"></script>
-</body>
-</html>
diff --git a/frontend/style.css b/frontend/style.css
deleted file mode 100644
index 468a579..0000000
--- a/frontend/style.css
+++ /dev/null
@@ -1,1254 +0,0 @@
-/* krill-watch · dashboard styling
-   Dark, dense, monitor-room feel — designed to age well as a fixed URL
-   sent to CCAMLR / press. */
-
-:root {
-  --bg: #05080d;
-  --bg-elev: rgba(11, 16, 24, 0.86);
-  --bg-elev-2: rgba(18, 25, 36, 0.95);
-  --bg-row: rgba(255, 255, 255, 0.025);
-  --bg-row-hover: rgba(0, 209, 255, 0.07);
-  --bg-row-active: rgba(0, 209, 255, 0.16);
-  --border: rgba(255, 255, 255, 0.08);
-  --border-strong: rgba(255, 255, 255, 0.18);
-  --fg: #e6eef7;
-  --fg-dim: #94a3b8;
-  --fg-faint: #5b6779;
-  --accent: #00d1ff;
-  --accent-dim: #007e99;
-
-  --critical: #ff3860;
-  --suspicious: #ffb020;
-  --watch: #c084fc;
-  --normal: #2ecc71;
-  --cpwf: #00d1ff;
-  --unknown: #6b7a8c;
-  --fishing: #3b82f6;
-
-  --shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
-  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.35);
-
-  --font: -apple-system, "Segoe UI", "Inter", Roboto, sans-serif;
-  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
-
-  --statusbar-h: 30px;
-  --ticker-h: 40px;
-}
-
-* { box-sizing: border-box; }
-
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  background: var(--bg);
-  color: var(--fg);
-  font-family: var(--font);
-  font-size: 13px;
-  overflow: hidden;
-  -webkit-font-smoothing: antialiased;
-}
-
-#app, #map { position: absolute; inset: 0; }
-
-/* Subtle vignette on top of the map for the "command-center" feel */
-#app::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 2;
-  background: radial-gradient(ellipse at 50% 60%, transparent 50%, rgba(0,0,0,0.55) 100%);
-}
-
-/* ---------- Panels ---------- */
-
-.panel {
-  position: absolute;
-  background: var(--bg-elev);
-  backdrop-filter: blur(14px) saturate(140%);
-  -webkit-backdrop-filter: blur(14px) saturate(140%);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  box-shadow: var(--shadow);
-  z-index: 5;
-  color: var(--fg);
-  overflow: hidden;
-}
-
-.panel--top-left {
-  top: 14px;
-  left: 14px;
-  width: 280px;
-}
-
-.panel--top-left .panel__body {
-  padding: 0 16px 14px;
-}
-
-.panel--top-left.panel--collapsed .panel__body { display: none; }
-
-.panel--left-mid {
-  top: calc(14px + 240px + 10px);
-  left: 14px;
-  width: 280px;
-  max-height: calc(100vh - 14px - 240px - 10px - var(--ticker-h) - var(--statusbar-h) - 18px);
-  display: flex;
-  flex-direction: column;
-}
-
-.panel--left-mid.panel--collapsed { max-height: 38px; }
-.panel--left-mid.panel--collapsed .panel__body { display: none; }
-
-.panel--top-right {
-  top: 14px;
-  right: 14px;
-  width: 400px;
-  max-height: calc(100vh - 28px - var(--ticker-h) - var(--statusbar-h));
-  display: flex;
-  flex-direction: column;
-}
-
-.panel__collapse {
-  margin-left: auto;
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--fg-dim);
-  width: 22px;
-  height: 22px;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
-  font-family: inherit;
-}
-.panel__collapse:hover { color: var(--fg); border-color: var(--border-strong); }
-
-/* ---------- Mission strap ---------- */
-
-.mission {
-  position: absolute;
-  top: 14px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 18px 11px;
-  background: linear-gradient(180deg, rgba(11,16,24,0.92) 0%, rgba(7,11,18,0.92) 100%);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
-  z-index: 6;
-  min-width: 540px;
-}
-
-.mission__tagline {
-  font-size: 10.5px;
-  font-weight: 600;
-  letter-spacing: 1.4px;
-  text-transform: uppercase;
-  color: var(--fg-dim);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.mission__sparkle {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--cpwf);
-  box-shadow: 0 0 8px var(--cpwf);
-  animation: pulse 2.6s infinite ease-in-out;
-}
-
-.mission__kpis {
-  display: flex;
-  gap: 1px;
-  background: var(--border);
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid var(--border);
-}
-
-.kpi {
-  background: rgba(0,0,0,0.45);
-  padding: 6px 16px 7px;
-  text-align: center;
-  min-width: 78px;
-  position: relative;
-  transition: background 0.4s ease;
-}
-
-.kpi__value {
-  font-family: var(--font-mono);
-  font-size: 20px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  color: var(--fg);
-  line-height: 1;
-}
-
-.kpi__label {
-  font-size: 9px;
-  text-transform: uppercase;
-  letter-spacing: 0.7px;
-  color: var(--fg-dim);
-  margin-top: 4px;
-  font-weight: 600;
-}
-
-.kpi--alert.kpi--hot .kpi__value {
-  color: var(--critical);
-  text-shadow: 0 0 12px rgba(255,56,96,0.5);
-}
-.kpi--alert.kpi--hot {
-  background: linear-gradient(180deg, rgba(255,56,96,0.20), rgba(0,0,0,0.45) 60%);
-}
-.kpi--warn.kpi--hot .kpi__value {
-  color: var(--suspicious);
-  text-shadow: 0 0 12px rgba(255,176,32,0.4);
-}
-.kpi--warn.kpi--hot {
-  background: linear-gradient(180deg, rgba(255,176,32,0.18), rgba(0,0,0,0.45) 60%);
-}
-.kpi--info .kpi__value { color: var(--accent); }
-
-@media (max-width: 1320px) {
-  .mission { min-width: 0; padding: 8px 12px 9px; }
-  .kpi { min-width: 0; padding: 5px 11px 6px; }
-  .kpi__value { font-size: 17px; }
-}
-
-@media (max-width: 1080px) {
-  .mission__tagline { display: none; }
-  .mission { padding: 4px; }
-}
-
-@media (max-width: 720px) {
-  .mission { left: 10px; right: 10px; transform: none; }
-  .mission__kpis { width: 100%; }
-  .kpi { flex: 1; }
-  .kpi__value { font-size: 14px; }
-  .kpi__label { font-size: 8px; }
-}
-
-/* ---------- Brand ---------- */
-
-.brand {
-  padding: 14px 16px 12px;
-}
-
-.brand__row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.brand__logo {
-  width: 26px;
-  height: 26px;
-  border-radius: 6px;
-  background: linear-gradient(135deg, #001e29 0%, #00131c 100%);
-  border: 1px solid var(--border-strong);
-  position: relative;
-  flex-shrink: 0;
-}
-
-.brand__logo-dot {
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  box-shadow: 0 0 6px currentColor;
-}
-.brand__logo-dot--a { top: 5px; left: 6px; background: var(--cpwf); color: var(--cpwf); }
-.brand__logo-dot--b { top: 13px; left: 12px; background: var(--suspicious); color: var(--suspicious); }
-.brand__logo-dot--c { top: 8px; left: 16px; background: var(--critical); color: var(--critical); }
-
-.brand__title {
-  font-weight: 700;
-  font-size: 15px;
-  letter-spacing: 0.4px;
-}
-
-.brand__subtitle {
-  font-size: 10.5px;
-  color: var(--fg-dim);
-  margin-top: 2px;
-}
-
-/* ---------- Legend ---------- */
-
-.legend {
-  display: grid;
-  grid-template-columns: 12px 1fr auto;
-  gap: 6px 10px;
-  align-items: center;
-  font-size: 12px;
-  margin-bottom: 12px;
-  padding-bottom: 10px;
-  border-bottom: 1px dashed var(--border);
-}
-
-.legend .swatch {
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  border: 1.5px solid rgba(255, 255, 255, 0.4);
-  box-shadow: 0 0 6px currentColor;
-}
-
-.legend label {
-  cursor: pointer;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11.5px;
-}
-
-.legend label input { accent-color: var(--accent); margin: 0; }
-
-.legend .count {
-  color: var(--fg-dim);
-  font-variant-numeric: tabular-nums;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  background: rgba(0,0,0,0.25);
-  padding: 1px 5px;
-  border-radius: 3px;
-}
-
-/* ---------- Map controls ---------- */
-
-.map-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  font-size: 11.5px;
-}
-
-.control-group {
-  display: flex;
-  background: rgba(0, 0, 0, 0.35);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 2px;
-}
-
-.ctrl {
-  flex: 1;
-  background: transparent;
-  border: none;
-  color: var(--fg-dim);
-  padding: 7px 8px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.4px;
-  text-transform: uppercase;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.ctrl--active {
-  background: var(--bg-elev-2);
-  color: var(--accent);
-  box-shadow: inset 0 0 0 1px var(--border-strong);
-}
-
-.ctrl-toggle {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  cursor: pointer;
-  user-select: none;
-  color: var(--fg-dim);
-}
-
-.ctrl-toggle input { accent-color: var(--accent); }
-
-/* ---------- Fleet list ---------- */
-
-.fleet__header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px 8px;
-  border-bottom: 1px solid var(--border);
-}
-
-.fleet__title {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.7px;
-  color: var(--fg-dim);
-}
-
-.fleet__count {
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--fg-dim);
-  background: rgba(0,0,0,0.25);
-  padding: 1px 6px;
-  border-radius: 3px;
-}
-
-.fleet__body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.fleet__search {
-  padding: 10px 12px 6px;
-}
-
-.fleet__search input {
-  width: 100%;
-  background: rgba(0,0,0,0.4);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 7px 10px;
-  font-size: 12px;
-  color: var(--fg);
-  font-family: inherit;
-  outline: none;
-}
-
-.fleet__search input:focus {
-  border-color: var(--accent-dim);
-  box-shadow: 0 0 0 2px rgba(0,209,255,0.15);
-}
-
-.fleet__filters {
-  display: flex;
-  gap: 5px;
-  padding: 0 12px 8px;
-  flex-wrap: wrap;
-}
-
-.chip {
-  background: rgba(0,0,0,0.3);
-  border: 1px solid var(--border);
-  color: var(--fg-dim);
-  padding: 3px 9px;
-  border-radius: 12px;
-  font-size: 10.5px;
-  font-weight: 600;
-  letter-spacing: 0.4px;
-  text-transform: uppercase;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.chip--active {
-  background: var(--bg-elev-2);
-  color: var(--accent);
-  border-color: var(--accent-dim);
-}
-
-.fleet__list {
-  list-style: none;
-  margin: 0;
-  padding: 0 6px 8px;
-  overflow-y: auto;
-  flex: 1;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-strong) transparent;
-}
-
-.fleet__list::-webkit-scrollbar { width: 6px; }
-.fleet__list::-webkit-scrollbar-thumb {
-  background: var(--border-strong);
-  border-radius: 3px;
-}
-
-.fleet__row {
-  display: grid;
-  grid-template-columns: 22px 1fr auto;
-  gap: 8px;
-  align-items: center;
-  padding: 7px 8px;
-  border-radius: 6px;
-  cursor: pointer;
-  margin-bottom: 1px;
-  border: 1px solid transparent;
-}
-
-.fleet__row:hover { background: var(--bg-row-hover); }
-.fleet__row--active {
-  background: var(--bg-row-active);
-  border-color: var(--accent-dim);
-}
-
-.fleet__row--CRITICAL { border-left: 2px solid var(--critical); }
-.fleet__row--SUSPICIOUS { border-left: 2px solid var(--suspicious); }
-.fleet__row--WATCH { border-left: 2px solid var(--watch); }
-.fleet__row--CPWF { border-left: 2px solid var(--cpwf); }
-
-.fleet__flag {
-  font-size: 16px;
-  line-height: 1;
-  text-align: center;
-  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
-}
-
-.fleet__name {
-  font-size: 12.5px;
-  font-weight: 600;
-  letter-spacing: 0.2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.fleet__sub {
-  font-size: 10.5px;
-  color: var(--fg-dim);
-  font-family: var(--font-mono);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.fleet__sev {
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  font-family: var(--font-mono);
-  padding: 2px 5px;
-  border-radius: 3px;
-}
-
-.fleet__pulse {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--normal);
-  margin-right: 4px;
-  vertical-align: middle;
-  box-shadow: 0 0 5px currentColor;
-}
-
-.fleet__pulse--CRITICAL {
-  background: var(--critical);
-  color: var(--critical);
-  animation: pulse 1.4s infinite ease-in-out;
-}
-.fleet__pulse--SUSPICIOUS { background: var(--suspicious); color: var(--suspicious); }
-.fleet__pulse--WATCH { background: var(--watch); color: var(--watch); }
-.fleet__pulse--CPWF { background: var(--cpwf); color: var(--cpwf); }
-.fleet__pulse--NORMAL { background: var(--normal); color: var(--normal); }
-.fleet__pulse--UNKNOWN { background: var(--unknown); color: var(--unknown); }
-
-@keyframes pulse {
-  0%, 100% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.6); opacity: 0.5; }
-}
-
-/* ---------- Detail panel ---------- */
-
-.detail__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 14px 16px 10px;
-  border-bottom: 1px solid var(--border);
-  background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent);
-}
-
-.detail__title { min-width: 0; }
-
-.detail__name {
-  font-size: 16px;
-  font-weight: 700;
-  letter-spacing: 0.3px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.detail__name .flag-emoji { font-size: 20px; line-height: 1; }
-
-.detail__meta {
-  font-size: 11px;
-  color: var(--fg-dim);
-  margin-top: 4px;
-  font-family: var(--font-mono);
-}
-
-.detail__hero {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1px;
-  background: var(--border);
-  margin: 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.detail__hero .stat {
-  padding: 8px 12px;
-  background: rgba(0,0,0,0.3);
-}
-
-.detail__hero .stat__label {
-  font-size: 9.5px;
-  color: var(--fg-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-}
-
-.detail__hero .stat__value {
-  font-size: 15px;
-  font-weight: 600;
-  font-family: var(--font-mono);
-  margin-top: 2px;
-}
-
-.close {
-  background: transparent;
-  border: none;
-  color: var(--fg-dim);
-  font-size: 22px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0 4px;
-}
-
-.close:hover { color: var(--fg); }
-
-.tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border);
-  background: rgba(0, 0, 0, 0.25);
-}
-
-.tab {
-  flex: 1;
-  background: transparent;
-  border: none;
-  color: var(--fg-dim);
-  padding: 10px 8px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  cursor: pointer;
-  font-family: inherit;
-  border-bottom: 2px solid transparent;
-}
-
-.tab--active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
-}
-
-.tab-panels {
-  flex: 1;
-  overflow-y: auto;
-  padding: 14px 16px;
-}
-
-.tab-panel { display: none; }
-.tab-panel--active { display: block; }
-
-/* ---------- Detail content ---------- */
-
-.kv {
-  display: grid;
-  grid-template-columns: 110px 1fr;
-  gap: 6px 12px;
-  font-size: 12px;
-  font-family: var(--font-mono);
-}
-
-.kv dt { color: var(--fg-dim); }
-.kv dd { margin: 0; color: var(--fg); word-break: break-word; }
-
-.tag {
-  display: inline-block;
-  padding: 2px 7px;
-  border-radius: 3px;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  font-family: var(--font-mono);
-}
-
-.tag--CRITICAL { background: var(--critical); color: #fff; box-shadow: 0 0 8px rgba(255,56,96,0.5); }
-.tag--SUSPICIOUS { background: var(--suspicious); color: #1a1a1a; }
-.tag--WATCH { background: var(--watch); color: #1a1a1a; }
-.tag--NORMAL { background: var(--normal); color: #0a3a1f; }
-.tag--CPWF { background: var(--cpwf); color: #002830; }
-.tag--UNKNOWN, .tag--FISHING_ZONE, .tag--OPEN_WATER {
-  background: var(--unknown); color: #fff;
-}
-
-.section-title {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.7px;
-  color: var(--fg-dim);
-  margin: 14px 0 6px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid var(--border);
-}
-
-.metrics {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.metric {
-  background: rgba(0, 0, 0, 0.25);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 8px 10px;
-}
-.metric--hot {
-  background: rgba(255, 56, 96, 0.12);
-  border-color: rgba(255, 56, 96, 0.55);
-}
-.metric--hot .metric__value { color: var(--critical, #ff3860); }
-
-.reefer-tag {
-  display: inline-block;
-  margin-right: 6px;
-  padding: 1px 6px;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  color: #0b0e13;
-  background: #22d3ee;
-  border-radius: 4px;
-  text-transform: uppercase;
-}
-
-.metric__label {
-  font-size: 10px;
-  color: var(--fg-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.metric__value {
-  font-size: 18px;
-  font-weight: 600;
-  font-family: var(--font-mono);
-  margin-top: 2px;
-}
-
-.event-list { font-size: 12px; }
-
-.event {
-  display: grid;
-  grid-template-columns: 78px 1fr;
-  gap: 8px;
-  padding: 7px 0;
-  border-bottom: 1px dashed var(--border);
-}
-
-.event__ts {
-  color: var(--fg-faint);
-  font-family: var(--font-mono);
-  font-size: 11px;
-}
-
-.event__type {
-  font-weight: 600;
-  font-size: 11px;
-  letter-spacing: 0.4px;
-}
-
-.event__detail {
-  font-size: 11px;
-  color: var(--fg-dim);
-  margin-top: 2px;
-}
-
-.empty {
-  color: var(--fg-faint);
-  font-style: italic;
-  font-size: 12px;
-  text-align: center;
-  padding: 14px 0;
-}
-
-.indicator-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-size: 11.5px;
-  font-family: var(--font-mono);
-}
-.indicator-list li {
-  padding: 4px 8px;
-  background: rgba(0,0,0,0.25);
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--watch);
-  margin-bottom: 4px;
-  border-radius: 4px;
-}
-.indicator-list li.high { border-left-color: var(--critical); }
-.indicator-list li.med { border-left-color: var(--suspicious); }
-
-/* ---------- Live ticker ---------- */
-
-.ticker {
-  position: absolute;
-  bottom: var(--statusbar-h);
-  left: 14px;
-  right: 14px;
-  height: var(--ticker-h);
-  display: flex;
-  align-items: center;
-  padding: 0 14px;
-  gap: 12px;
-  background: rgba(11, 16, 24, 0.94);
-  border-radius: 0;
-  border-left: 0;
-  border-right: 0;
-  border-bottom: 0;
-  z-index: 4;
-  border-radius: 8px;
-}
-
-.ticker__pulse {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--unknown);
-  box-shadow: 0 0 8px currentColor;
-  flex-shrink: 0;
-}
-.ticker__pulse.live {
-  background: var(--normal);
-  color: var(--normal);
-  animation: pulse 1.6s infinite ease-in-out;
-}
-.ticker__pulse.alert {
-  background: var(--critical);
-  color: var(--critical);
-  animation: pulse 0.9s infinite ease-in-out;
-}
-
-.ticker__label {
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  color: var(--fg-dim);
-  text-transform: uppercase;
-  flex-shrink: 0;
-}
-
-.ticker__feed {
-  flex: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  font-size: 11.5px;
-  font-family: var(--font-mono);
-  color: var(--fg-dim);
-  display: flex;
-  align-items: center;
-  gap: 24px;
-}
-
-.ticker__feed .tick {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-  animation: ticker-in 0.4s ease-out;
-}
-
-.ticker__feed .tick__ts { color: var(--fg-faint); }
-.ticker__feed .tick__name { color: var(--fg); font-weight: 600; }
-
-@keyframes ticker-in {
-  from { opacity: 0; transform: translateX(20px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-
-.ticker__placeholder { color: var(--fg-faint); font-style: italic; }
-
-/* ---------- Statusbar ---------- */
-
-.statusbar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: var(--statusbar-h);
-  background: rgba(5, 8, 13, 0.95);
-  border-top: 1px solid var(--border);
-  color: var(--fg-dim);
-  font-size: 11px;
-  font-family: var(--font-mono);
-  display: flex;
-  align-items: center;
-  padding: 0 14px;
-  gap: 8px;
-  z-index: 4;
-}
-
-.statusbar .sep { color: var(--fg-faint); }
-.statusbar .spacer { flex: 1; }
-.statusbar .dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--unknown);
-  display: inline-block;
-}
-.statusbar .dot.live { background: var(--normal); box-shadow: 0 0 5px var(--normal); }
-.statusbar .dot.error { background: var(--critical); }
-
-.statusbar__link {
-  color: var(--fg-dim);
-  text-decoration: none;
-}
-.statusbar__link:hover { color: var(--accent); }
-.statusbar__link--cta {
-  color: #ff6b3d;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-}
-.statusbar__link--cta:hover { color: #ff8a5c; }
-
-/* ---------- MapLibre overrides ---------- */
-
-.maplibregl-popup-content {
-  background: var(--bg-elev-2);
-  color: var(--fg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 10px 12px;
-  font-family: var(--font);
-  font-size: 12px;
-  box-shadow: var(--shadow);
-}
-
-.maplibregl-popup-tip { display: none; }
-
-.maplibregl-popup-close-button {
-  color: var(--fg-dim);
-  font-size: 18px;
-  padding: 2px 6px;
-}
-
-.maplibregl-ctrl-attrib {
-  background: rgba(7, 9, 13, 0.7) !important;
-  color: var(--fg-dim) !important;
-}
-
-.maplibregl-ctrl-attrib a { color: var(--fg-dim) !important; }
-
-.maplibregl-ctrl-group {
-  background: var(--bg-elev) !important;
-  border: 1px solid var(--border) !important;
-  box-shadow: var(--shadow-soft) !important;
-}
-.maplibregl-ctrl-group button { background: transparent !important; }
-.maplibregl-ctrl-group button:hover { background: rgba(255,255,255,0.05) !important; }
-
-/* Vessel popup body */
-
-.vpopup__name {
-  font-weight: 700;
-  font-size: 13px;
-  margin-bottom: 4px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.vpopup__row {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--fg-dim);
-}
-
-.vpopup__row strong { color: var(--fg); font-weight: 500; }
-
-.vpopup__cta {
-  display: inline-block;
-  margin-top: 8px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--accent);
-  cursor: pointer;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-/* ---------- Responsive ---------- */
-
-@media (max-width: 900px) {
-  .panel--top-right {
-    width: calc(100vw - 28px);
-    top: auto;
-    bottom: calc(var(--ticker-h) + var(--statusbar-h) + 8px);
-    max-height: 50vh;
-  }
-  .panel--top-left { width: 240px; }
-  .panel--left-mid { display: none; }
-}
-
-@media (max-width: 540px) {
-  .panel--top-left { width: calc(100vw - 28px); }
-  .ticker { left: 6px; right: 6px; }
-}
-
-/* ---------- Cold-start data banner ---------- */
-/* Surfaces the *real* state of upstream evidence so we never show a silent
-   zero. A press URL that says "0 events" without a reason is poison. */
-.banner {
-  margin-top: 8px;
-  padding: 8px 12px;
-  border-radius: 8px;
-  font-size: 11.5px;
-  line-height: 1.4;
-  border: 1px solid var(--border-strong);
-  background: rgba(15, 22, 33, 0.85);
-  color: var(--fg);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  transition: opacity 0.25s ease;
-}
-.banner--hidden { display: none; }
-.banner__icon {
-  display: inline-block;
-  width: 8px; height: 8px;
-  border-radius: 50%;
-  flex: 0 0 auto;
-  background: var(--accent);
-  box-shadow: 0 0 10px rgba(0, 209, 255, 0.6);
-}
-.banner__title { font-weight: 600; letter-spacing: 0.3px; }
-.banner__sep { color: var(--fg-faint); margin: 0 4px; }
-.banner__detail { color: var(--fg-dim); }
-.banner--info {
-  border-color: rgba(0, 209, 255, 0.45);
-  background: rgba(0, 209, 255, 0.08);
-}
-.banner--warn {
-  border-color: rgba(255, 176, 32, 0.55);
-  background: rgba(255, 176, 32, 0.10);
-}
-.banner--warn .banner__icon { background: var(--suspicious); box-shadow: 0 0 10px rgba(255,176,32,0.6); }
-.banner--critical {
-  border-color: rgba(255, 56, 96, 0.55);
-  background: rgba(255, 56, 96, 0.10);
-}
-.banner--critical .banner__icon { background: var(--critical); box-shadow: 0 0 10px rgba(255,56,96,0.6); }
-
-/* ---------- Skeleton loaders ---------- */
-/* Used while we wait for the first /api/vessels round-trip. Conveys
-   "data is on the way" instead of "the system is broken". */
-@keyframes skel-shimmer {
-  0% { background-position: -120px 0; }
-  100% { background-position: 120px 0; }
-}
-.skel {
-  background: linear-gradient(90deg,
-    rgba(255,255,255,0.04) 0%,
-    rgba(255,255,255,0.10) 50%,
-    rgba(255,255,255,0.04) 100%);
-  background-size: 240px 100%;
-  animation: skel-shimmer 1.4s linear infinite;
-  border-radius: 4px;
-}
-.fleet__row--skel {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border);
-}
-.fleet__row--skel .skel-flag { width: 22px; height: 16px; }
-.fleet__row--skel .skel-name { height: 11px; flex: 1; }
-.fleet__row--skel .skel-tag  { width: 50px; height: 16px; border-radius: 8px; }
-
-/* Incident timeline chips */
-.incident__scope {
-  display: inline-block;
-  padding: 1px 6px;
-  font-size: 9.5px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-  border-radius: 4px;
-  margin-right: 6px;
-  vertical-align: 1px;
-}
-.incident__scope--vessel { color: var(--accent); border: 1px solid var(--accent-dim); background: rgba(0, 209, 255, 0.10); }
-.incident__scope--fleet  { color: var(--watch); border: 1px solid rgba(192, 132, 252, 0.6); background: rgba(192, 132, 252, 0.10); }
-.incident__conf {
-  display: inline-block;
-  padding: 1px 6px;
-  font-size: 9.5px;
-  font-weight: 700;
-  letter-spacing: 0.4px;
-  border-radius: 4px;
-  margin-right: 6px;
-  vertical-align: 1px;
-}
-.incident__conf--high   { color: var(--normal); border: 1px solid rgba(46, 204, 113, 0.55); background: rgba(46, 204, 113, 0.10); }
-.incident__conf--medium { color: var(--suspicious); border: 1px solid rgba(255, 176, 32, 0.55); background: rgba(255, 176, 32, 0.10); }
-.incident__conf--low    { color: var(--fg-faint); border: 1px solid var(--border-strong); background: rgba(255,255,255,0.04); }
-.event__sources { margin-top: 4px; font-size: 10.5px; color: var(--fg-faint); }
-.event__sources a { color: var(--accent); text-decoration: none; }
-.event__sources a:hover { text-decoration: underline; }
-
-/* Severity scoring expandable — surfaces *every* rule that contributed. */
-.scoring {
-  margin: 8px 0 12px;
-  padding: 8px 10px;
-  border: 1px solid var(--border-strong);
-  background: rgba(0,0,0,0.30);
-  border-radius: 8px;
-}
-.scoring summary {
-  cursor: pointer;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11.5px;
-  color: var(--fg-dim);
-  user-select: none;
-}
-.scoring summary::-webkit-details-marker { display: none; }
-.scoring__sev { margin-right: 4px; }
-.scoring__why { color: var(--accent); }
-.scoring__rules { margin-left: auto; font-size: 9.5px; color: var(--fg-faint); font-family: var(--font-mono); }
-.scoring__list { list-style: none; margin: 8px 0 0; padding: 0; font-family: var(--font-mono); font-size: 11px; }
-.scoring__item {
-  display: grid;
-  grid-template-columns: 50px 1fr auto;
-  gap: 8px;
-  padding: 4px 6px;
-  border-bottom: 1px dashed var(--border);
-  align-items: center;
-}
-.scoring__item:last-child { border-bottom: none; }
-.scoring__points {
-  font-weight: 700;
-  color: var(--suspicious);
-  text-align: right;
-}
-.scoring__item--crit .scoring__points { color: var(--critical); }
-.scoring__reason { color: var(--fg); }
-.scoring__id { font-size: 9.5px; color: var(--fg-faint); }
-
-/* Beneficial-ownership pending badge — surfaces opacity instead of hiding it. */
-.fleet__owner-pending {
-  display: inline-block;
-  margin-left: 6px;
-  padding: 1px 6px;
-  font-size: 9.5px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-  color: var(--suspicious);
-  border: 1px solid rgba(255, 176, 32, 0.55);
-  background: rgba(255, 176, 32, 0.10);
-  border-radius: 999px;
-  vertical-align: 1px;
-  cursor: help;
-}
-
-/* Mission strap closures chip */
-.mission__chips {
-  display: flex;
-  gap: 8px;
-  margin: 6px 0 4px;
-  flex-wrap: wrap;
-}
-.mission-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  font: inherit;
-  font-size: 11.5px;
-  color: var(--fg);
-  background: rgba(34, 211, 238, 0.10);
-  border: 1px solid rgba(34, 211, 238, 0.45);
-  border-radius: 999px;
-  cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
-}
-.mission-chip:hover { background: rgba(34, 211, 238, 0.18); }
-.mission-chip--hidden { display: none; }
-.mission-chip--hot {
-  background: rgba(255, 56, 96, 0.10);
-  border-color: rgba(255, 56, 96, 0.55);
-}
-.mission-chip--hot .mission-chip__dot {
-  background: var(--critical, #ff3860);
-  box-shadow: 0 0 8px rgba(255, 56, 96, 0.7);
-}
-.mission-chip__dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: #22d3ee;
-}
-
-/* Closures tab — entry styling */
-.closure-status {
-  display: inline-block;
-  margin-right: 6px;
-  padding: 1px 7px;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.4px;
-  border-radius: 4px;
-  border: 1px solid currentColor;
-  text-transform: uppercase;
-}
-.closure-status--active { color: #ff3860; }
-.closure-status--closed_past { color: #ffb020; }
-.closure-status--expired { color: #94a3b8; }
-.closure-status--blocked { color: #c084fc; }
-.closure-status--projected { color: #22d3ee; }
-
-.closure-subarea {
-  display: inline-block;
-  margin-right: 6px;
-  padding: 1px 6px;
-  font-size: 10px;
-  font-weight: 600;
-  color: #cfd6e0;
-  background: rgba(59, 130, 246, 0.18);
-  border: 1px solid rgba(59, 130, 246, 0.55);
-  border-radius: 4px;
-}
-
-.closure-live {
-  display: inline-block;
-  width: 7px;
-  height: 7px;
-  margin-right: 6px;
-  border-radius: 50%;
-  background: var(--critical, #ff3860);
-  box-shadow: 0 0 8px rgba(255, 56, 96, 0.6);
-  vertical-align: 1px;
-}
-
diff --git a/requirements-core.txt b/requirements-core.txt
index e489d3a..b500d66 100644
--- a/requirements-core.txt
+++ b/requirements-core.txt
@@ -8,6 +8,7 @@ polars==1.18.0
 pydantic==2.10.4
 fastapi==0.115.6
 uvicorn[standard]==0.34.0
+python-multipart==0.0.27
 python-dateutil==2.9.0
 shapely==2.0.6
 geojson==3.1.0
diff --git a/screenshots/og-campaign-krill.png b/screenshots/og-campaign-krill.png
new file mode 100644
index 0000000..a8a5976
Binary files /dev/null and b/screenshots/og-campaign-krill.png differ
diff --git a/screenshots/og-incident-fallback.png b/screenshots/og-incident-fallback.png
new file mode 100644
index 0000000..71f9dae
Binary files /dev/null and b/screenshots/og-incident-fallback.png differ
diff --git a/screenshots/og-vessel.png b/screenshots/og-vessel.png
new file mode 100644
index 0000000..29d8883
Binary files /dev/null and b/screenshots/og-vessel.png differ
diff --git a/screenshots/p3-campaign-krill-en.png b/screenshots/p3-campaign-krill-en.png
new file mode 100644
index 0000000..9a77728
Binary files /dev/null and b/screenshots/p3-campaign-krill-en.png differ
diff --git a/screenshots/p3-campaign-krill-fr.png b/screenshots/p3-campaign-krill-fr.png
new file mode 100644
index 0000000..d12bb1e
Binary files /dev/null and b/screenshots/p3-campaign-krill-fr.png differ
diff --git a/screenshots/p3-campaign-mobile-en.png b/screenshots/p3-campaign-mobile-en.png
new file mode 100644
index 0000000..aa12feb
Binary files /dev/null and b/screenshots/p3-campaign-mobile-en.png differ
diff --git a/screenshots/p3-contribute-en.png b/screenshots/p3-contribute-en.png
new file mode 100644
index 0000000..b3d8aa1
Binary files /dev/null and b/screenshots/p3-contribute-en.png differ
diff --git a/screenshots/p3-contribute-fr.png b/screenshots/p3-contribute-fr.png
new file mode 100644
index 0000000..b53e6b7
Binary files /dev/null and b/screenshots/p3-contribute-fr.png differ
diff --git a/screenshots/p3-contribute-mobile-fr.png b/screenshots/p3-contribute-mobile-fr.png
new file mode 100644
index 0000000..bcce1e5
Binary files /dev/null and b/screenshots/p3-contribute-mobile-fr.png differ
diff --git a/screenshots/p3-digest-index-fr.png b/screenshots/p3-digest-index-fr.png
new file mode 100644
index 0000000..e0d34ba
Binary files /dev/null and b/screenshots/p3-digest-index-fr.png differ
diff --git a/screenshots/p3-home-en.png b/screenshots/p3-home-en.png
new file mode 100644
index 0000000..87143da
Binary files /dev/null and b/screenshots/p3-home-en.png differ
diff --git a/screenshots/p3-home-fr.png b/screenshots/p3-home-fr.png
new file mode 100644
index 0000000..a8d759b
Binary files /dev/null and b/screenshots/p3-home-fr.png differ
diff --git a/screenshots/p3-home-mobile-fr.png b/screenshots/p3-home-mobile-fr.png
new file mode 100644
index 0000000..0b45266
Binary files /dev/null and b/screenshots/p3-home-mobile-fr.png differ
diff --git a/screenshots/p3-incident-notfound-fr.png b/screenshots/p3-incident-notfound-fr.png
new file mode 100644
index 0000000..429467b
Binary files /dev/null and b/screenshots/p3-incident-notfound-fr.png differ
diff --git a/screenshots/p3-incident-real-en.png b/screenshots/p3-incident-real-en.png
new file mode 100644
index 0000000..d45f615
Binary files /dev/null and b/screenshots/p3-incident-real-en.png differ
diff --git a/screenshots/p3-incident-real-fr-full.png b/screenshots/p3-incident-real-fr-full.png
new file mode 100644
index 0000000..f7d2dd2
Binary files /dev/null and b/screenshots/p3-incident-real-fr-full.png differ
diff --git a/screenshots/p3-incident-real-fr.png b/screenshots/p3-incident-real-fr.png
new file mode 100644
index 0000000..bf4a694
Binary files /dev/null and b/screenshots/p3-incident-real-fr.png differ
diff --git a/screenshots/p3-share-menu-open.png b/screenshots/p3-share-menu-open.png
new file mode 100644
index 0000000..3c3b80a
Binary files /dev/null and b/screenshots/p3-share-menu-open.png differ
diff --git a/screenshots/p3-vessel-fr.png b/screenshots/p3-vessel-fr.png
new file mode 100644
index 0000000..5a2d75f
Binary files /dev/null and b/screenshots/p3-vessel-fr.png differ
diff --git a/server/app.py b/server/app.py
index fe85e0f..5cc07b1 100644
--- a/server/app.py
+++ b/server/app.py
@@ -9,8 +9,10 @@
 ``GET  /api/vessels/{slug}/track``         — recent AIS track points.
 ``GET  /api/positions/live``               — latest position per MMSI.
 ``GET  /api/events``                       — vessel status-change log.
-``GET  /``                                 — serves the SPA (index.html).
-``GET  /assets/*``                         — static frontend assets.
+``GET  /``                                 — 302 redirect to ``WEB_BASE_URL``
+                                              (or ``/docs`` when unset). The
+                                              Next.js cockpit at ``web/`` is
+                                              the canonical UI.
 
 The app spawns two background tasks on startup:
     * AISStream WebSocket subscriber  (live positions)
@@ -25,6 +27,7 @@
 import json
 import logging
 import os
+import re
 from contextlib import asynccontextmanager
 from datetime import UTC, datetime, timedelta
 from pathlib import Path
@@ -32,8 +35,7 @@
 
 from fastapi import FastAPI, HTTPException, Query, Request
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import FileResponse, JSONResponse, StreamingResponse
-from fastapi.staticfiles import StaticFiles
+from fastapi.responses import JSONResponse, RedirectResponse, StreamingResponse
 
 try:  # python-dotenv is optional in production but very nice in dev.
     from dotenv import load_dotenv
@@ -68,7 +70,6 @@
 )
 
 ROOT = Path(__file__).resolve().parent.parent
-FRONTEND_DIR = ROOT / "frontend"
 ZONES_PATH = ROOT / "config" / "ccamlr_areas.geojson"
 FLEET_PATH = ROOT / "config" / "krill_fleet.json"
 INCIDENTS_PATH = ROOT / "config" / "incidents.json"
@@ -340,6 +341,40 @@ async def get_track(
     }
 
 
+@app.get("/api/vessels/{slug}/positions")
+async def get_vessel_positions(
+    slug: str,
+    days: int = Query(30, ge=1, le=90, description="lookback window in days"),
+    downsample: int = Query(
+        15, ge=1, le=60, description="downsample bucket in minutes when > 1000 points"
+    ),
+) -> JSONResponse:
+    """Historical positions + scrubber events for the timeline UI (P2-T03/T04).
+
+    Returns a downsampled track over the past ``days`` along with key events
+    (zone enter/leave, AIS gap open/close, severity changes) for the same
+    window. Cached one minute since the worker writes new rows on a much
+    longer cadence than the human eye distinguishes on a 30-day trail.
+    """
+    from .services.positions_history import get_positions_history
+
+    store: Store = app.state.store
+    zones: ZoneIndex = app.state.zones
+    history = get_positions_history(
+        store=store,
+        zones=zones,
+        slug=slug,
+        days=days,
+        downsample_minutes=downsample,
+    )
+    if history is None:
+        raise HTTPException(404, f"Unknown vessel slug: {slug}")
+    return JSONResponse(
+        content=history.to_dict(),
+        headers={"Cache-Control": "public, max-age=60"},
+    )
+
+
 @app.get("/api/vessels/{slug}/timeline")
 async def get_vessel_timeline(
     slug: str,
@@ -562,6 +597,228 @@ async def list_incidents(
     }
 
 
+# ---------- Auto-detected incidents (P3-T01) -----------------------------
+# /api/incidents (above) serves the curated file-backed timeline. The
+# routes below back the auto-generated /incident/<slug> pages: they
+# accept POSTs from the in-process pipeline (via X-Internal header) and
+# expose read endpoints for the front-end ISR layer. Namespaced under
+# /api/auto-incidents to avoid colliding with the curated route.
+
+
+@app.post("/api/internal/incident", include_in_schema=False)
+async def create_auto_incident(
+    payload: dict[str, Any],
+    request: Request,
+) -> JSONResponse:
+    """Internal endpoint — pipeline emits an incident here.
+
+    Auth: shared secret in the X-Internal header, matching env var
+    KRILL_INTERNAL_SECRET. We deliberately do not document this in the
+    OpenAPI schema.
+    """
+    expected = os.getenv("KRILL_INTERNAL_SECRET", "")
+    given = request.headers.get("X-Internal", "")
+    if not expected or given != expected:
+        raise HTTPException(401, "unauthorized")
+
+    from .services.incident_emitter import IncidentPayload, emit_incident
+
+    try:
+        detected_at_raw = payload.get("detected_at")
+        if isinstance(detected_at_raw, str):
+            detected_at = datetime.fromisoformat(detected_at_raw.replace("Z", "+00:00"))
+        elif isinstance(detected_at_raw, datetime):
+            detected_at = detected_at_raw
+        else:
+            raise ValueError("detected_at required")
+        ip = IncidentPayload(
+            vessel_slug=str(payload["vessel_slug"]),
+            vessel_name=str(payload["vessel_name"]),
+            vessel_flag=payload.get("vessel_flag"),
+            event_type=str(payload["event_type"]),
+            zone_code=payload.get("zone_code"),
+            severity=str(payload["severity"]),
+            detected_at=detected_at,
+            score=payload.get("score"),
+            position_lat=payload.get("position_lat"),
+            position_lon=payload.get("position_lon"),
+            details=payload.get("details"),
+            sources=payload.get("sources"),
+        )
+    except (KeyError, ValueError, TypeError) as exc:
+        raise HTTPException(422, f"invalid payload: {exc}") from exc
+
+    store: Store = app.state.store
+    slug = await emit_incident(store, ip)
+    persisted = store.get_incident_auto(slug)
+    return JSONResponse(content={"incident": persisted}, status_code=201)
+
+
+@app.get("/api/auto-incidents")
+async def list_auto_incidents(
+    vessel: str | None = Query(None, description="Filter to one vessel slug"),
+    since: str | None = Query(None, description="ISO datetime — earliest detected_at"),
+    limit: int = Query(50, ge=1, le=500),
+) -> dict[str, Any]:
+    """Public list of auto-detected incidents — backs /incidents page."""
+    store: Store = app.state.store
+    since_dt: datetime | None = None
+    if since:
+        try:
+            since_dt = datetime.fromisoformat(since.replace("Z", "+00:00"))
+        except ValueError as exc:
+            raise HTTPException(422, f"invalid 'since': {exc}") from exc
+    items = store.list_incidents_auto(vessel=vessel, since=since_dt, limit=limit)
+    return {"count": len(items), "incidents": items}
+
+
+@app.get("/api/auto-incidents/{slug}")
+async def get_auto_incident(slug: str) -> dict[str, Any]:
+    """Single auto-detected incident — fed to /incident/<slug> ISR pages."""
+    store: Store = app.state.store
+    item = store.get_incident_auto(slug)
+    if not item:
+        raise HTTPException(404, f"unknown incident slug: {slug}")
+    return item
+
+
+# ---------- Weekly digests (P3-T06) -------------------------------------
+# The transhipment-review pipeline emits a static HTML file per ISO week
+# under output/transhipments_<YYYY>-W<WW>.html. The two routes below
+# expose them as JSON (file-listing + raw HTML body) so the Next.js
+# /digest pages can render them inline.
+
+_DIGEST_DIR = Path("output")
+_DIGEST_PATTERN = re.compile(r"^transhipments_(\d{4})-W(\d{2})\.html$")
+
+
+def _list_digest_files() -> list[tuple[str, Path]]:
+    """Returns (isoweek, path) tuples in newest-first order."""
+    if not _DIGEST_DIR.is_dir():
+        return []
+    out: list[tuple[str, Path]] = []
+    for p in _DIGEST_DIR.iterdir():
+        if not p.is_file():
+            continue
+        m = _DIGEST_PATTERN.match(p.name)
+        if not m:
+            continue
+        out.append((f"{m.group(1)}-W{m.group(2)}", p))
+    out.sort(key=lambda t: t[0], reverse=True)
+    return out
+
+
+@app.get("/api/digests")
+async def list_digests(limit: int = Query(20, ge=1, le=200)) -> dict[str, Any]:
+    items: list[dict[str, Any]] = []
+    for isoweek, path in _list_digest_files()[:limit]:
+        st = path.stat()
+        items.append(
+            {
+                "isoweek": isoweek,
+                "filename": path.name,
+                "size": st.st_size,
+                "generated_at": datetime.fromtimestamp(st.st_mtime, UTC).isoformat(),
+            }
+        )
+    return {"count": len(items), "digests": items}
+
+
+@app.get("/api/digests/{isoweek}")
+async def get_digest(isoweek: str) -> dict[str, Any]:
+    if not re.match(r"^\d{4}-W\d{2}$", isoweek):
+        raise HTTPException(400, "isoweek must look like YYYY-Www (e.g. 2026-W17)")
+    path = _DIGEST_DIR / f"transhipments_{isoweek}.html"
+    if not path.is_file():
+        raise HTTPException(404, f"no digest for {isoweek}")
+    html = path.read_text(encoding="utf-8")
+    st = path.stat()
+    return {
+        "isoweek": isoweek,
+        "html": html,
+        "generated_at": datetime.fromtimestamp(st.st_mtime, UTC).isoformat(),
+        "size": st.st_size,
+    }
+
+
+# ---------- Public contributions (P3-T05) -------------------------------
+
+
+@app.post("/api/contributions")
+async def submit_public_contribution(request: Request) -> dict[str, Any]:
+    """Public form submission. multipart/form-data with optional photo."""
+    from .services.contributions_store import (
+        ContributionError,
+        ContributionInput,
+        PhotoBlob,
+        submit_contribution,
+    )
+
+    try:
+        form = await request.form()
+    except Exception as exc:  # pragma: no cover — fastapi handles malformed
+        raise HTTPException(400, f"invalid form data: {exc}") from exc
+
+    def _str(key: str) -> str | None:
+        v = form.get(key)
+        if v is None:
+            return None
+        s = str(v).strip()
+        return s or None
+
+    def _float(key: str) -> float | None:
+        v = _str(key)
+        if v is None:
+            return None
+        try:
+            return float(v)
+        except ValueError as exc:
+            raise HTTPException(422, f"invalid {key}: {exc}") from exc
+
+    observed_at_raw = _str("observed_at")
+    observed_at: datetime | None = None
+    if observed_at_raw:
+        try:
+            observed_at = datetime.fromisoformat(observed_at_raw.replace("Z", "+00:00"))
+        except ValueError as exc:
+            raise HTTPException(422, f"invalid observed_at: {exc}") from exc
+
+    photo_blob: PhotoBlob | None = None
+    upload = form.get("photo")
+    # FastAPI/Starlette gives us either a string or an UploadFile.
+    if upload is not None and hasattr(upload, "read"):
+        data = await upload.read()  # type: ignore[union-attr]
+        if data:
+            photo_blob = PhotoBlob(
+                filename=str(getattr(upload, "filename", None) or "photo.bin"),
+                content_type=str(
+                    getattr(upload, "content_type", None) or "application/octet-stream"
+                ),
+                data=data,
+            )
+
+    payload = ContributionInput(
+        category=_str("category") or "",
+        description=_str("description") or "",
+        contact_email=_str("contact_email"),
+        contact_name=_str("contact_name"),
+        vessel_name=_str("vessel_name"),
+        vessel_imo=_str("vessel_imo"),
+        vessel_mmsi=_str("vessel_mmsi"),
+        observed_at=observed_at,
+        observed_lat=_float("observed_lat"),
+        observed_lon=_float("observed_lon"),
+        photo=photo_blob,
+    )
+
+    store: Store = app.state.store
+    try:
+        result = await submit_contribution(store, payload)
+    except ContributionError as exc:
+        raise HTTPException(422, str(exc)) from exc
+    return result
+
+
 @app.get("/api/closures")
 async def list_closures(
     subarea: str | None = Query(None, description="Filter by CCAMLR subarea (e.g. 48.1)"),
@@ -725,26 +982,13 @@ async def gen():
     )
 
 
-# ---------- Static frontend ---------------------------------------------
-
-
-if (FRONTEND_DIR / "assets").exists():
-    app.mount("/assets", StaticFiles(directory=FRONTEND_DIR / "assets"), name="assets")
-
-
-@app.get("/")
-async def index() -> FileResponse:
-    index_html = FRONTEND_DIR / "index.html"
-    if not index_html.exists():
-        raise HTTPException(503, "Frontend not built — see frontend/index.html")
-    return FileResponse(index_html)
-
-
-@app.get("/style.css")
-async def style() -> FileResponse:
-    return FileResponse(FRONTEND_DIR / "style.css")
+# ---------- Root redirect ------------------------------------------------
+# The Next.js cockpit at WEB_BASE_URL is now the canonical UI. The FastAPI
+# service stays headless (only /api/* + /docs). Hitting / forwards there
+# in dev, falls back to the OpenAPI page when WEB_BASE_URL is unset.
 
 
-@app.get("/app.js")
-async def appjs() -> FileResponse:
-    return FileResponse(FRONTEND_DIR / "app.js")
+@app.get("/", include_in_schema=False)
+async def root_redirect() -> RedirectResponse:
+    target = os.getenv("WEB_BASE_URL", "").strip().rstrip("/") or "/docs"
+    return RedirectResponse(url=target, status_code=302)
diff --git a/server/services/__init__.py b/server/services/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/server/services/contributions_store.py b/server/services/contributions_store.py
new file mode 100644
index 0000000..cd6c786
--- /dev/null
+++ b/server/services/contributions_store.py
@@ -0,0 +1,209 @@
+"""Public contribution storage + admin notification (P3-T05).
+
+The /api/contributions route delegates to ``submit_contribution`` here:
+
+1. Allocates a UUID + on-disk folder under ``data/contributions/<id>/``.
+2. If a photo blob is provided, validates the size/MIME and writes it to
+   that folder (filename slugified).
+3. Inserts the row into the ``contributions`` DuckDB table.
+4. If ``KRILL_ADMIN_DISCORD_WEBHOOK`` is set, fires a non-PII summary
+   to it. Failure to notify never blocks the submission.
+
+The submitter's email is intentionally never included in the webhook
+payload; admins read it inside the DB only.
+"""
+from __future__ import annotations
+
+import logging
+import os
+import re
+import uuid
+from dataclasses import dataclass
+from datetime import datetime
+from pathlib import Path
+from typing import Any
+
+import httpx
+
+from server.store import Store
+
+logger = logging.getLogger(__name__)
+
+VALID_CATEGORIES = {
+    "vessel-sighting",
+    "transhipment",
+    "ais-anomaly",
+    "other",
+}
+
+MAX_PHOTO_BYTES = 5 * 1024 * 1024  # 5 MB, matches the front-end limit
+ALLOWED_PHOTO_MIMES = {
+    "image/jpeg",
+    "image/jpg",
+    "image/png",
+    "image/webp",
+    "image/heic",
+    "image/heif",
+}
+DEFAULT_STORAGE_ROOT = Path("data/contributions")
+
+
+@dataclass
+class PhotoBlob:
+    """Single uploaded image. Soft-validated by category-aware caller."""
+
+    filename: str
+    content_type: str
+    data: bytes
+
+
+@dataclass
+class ContributionInput:
+    category: str
+    description: str
+    contact_email: str | None = None
+    contact_name: str | None = None
+    vessel_name: str | None = None
+    vessel_imo: str | None = None
+    vessel_mmsi: str | None = None
+    observed_at: datetime | None = None
+    observed_lat: float | None = None
+    observed_lon: float | None = None
+    photo: PhotoBlob | None = None
+
+
+class ContributionError(ValueError):
+    """Raised on validation failure — surfaced as a 422 by the API."""
+
+
+def _kebab_filename(name: str) -> str:
+    stem = name.rsplit(".", 1)[0]
+    ext = name.rsplit(".", 1)[1].lower() if "." in name else "bin"
+    stem = re.sub(r"[^a-zA-Z0-9._-]+", "-", stem).strip("-").lower()
+    return f"{stem or 'photo'}.{ext}"
+
+
+def _validate(input_: ContributionInput) -> None:
+    if input_.category not in VALID_CATEGORIES:
+        raise ContributionError(
+            f"unknown category {input_.category!r} (allowed: {sorted(VALID_CATEGORIES)})"
+        )
+    desc = (input_.description or "").strip()
+    if len(desc) < 50:
+        raise ContributionError(
+            "description must be at least 50 characters"
+        )
+    if input_.photo is not None:
+        if input_.photo.content_type.lower() not in ALLOWED_PHOTO_MIMES:
+            raise ContributionError(
+                f"unsupported photo mime: {input_.photo.content_type}"
+            )
+        if len(input_.photo.data) > MAX_PHOTO_BYTES:
+            raise ContributionError(
+                f"photo too large ({len(input_.photo.data)} bytes; max {MAX_PHOTO_BYTES})"
+            )
+    if input_.contact_email is not None:
+        # Cheap email shape check — belt-and-braces; the front-end has
+        # already validated `type=email`.
+        if not re.match(r"^[^@\s]+@[^@\s]+\.[^@\s]+$", input_.contact_email):
+            raise ContributionError("invalid contact_email format")
+
+
+def _short_id(contribution_id: str) -> str:
+    """First 8 chars of the UUID — the public reference shown to users."""
+    return contribution_id.split("-", 1)[0]
+
+
+def _summary_for_webhook(input_: ContributionInput, contribution_id: str) -> str:
+    parts: list[str] = [f"Category: {input_.category}"]
+    if input_.vessel_name:
+        parts.append(f"Vessel: {input_.vessel_name}")
+    if input_.vessel_imo:
+        parts.append(f"IMO {input_.vessel_imo}")
+    if input_.observed_at:
+        parts.append(f"Observed: {input_.observed_at.isoformat()}")
+    parts.append(f"Ref: {_short_id(contribution_id)}")
+    return " · ".join(parts)
+
+
+async def notify_admin(
+    summary: str,
+    *,
+    client: httpx.AsyncClient | None = None,
+) -> bool:
+    """POST a Discord-style embed to KRILL_ADMIN_DISCORD_WEBHOOK if set.
+
+    Email + reviewer notes are deliberately excluded so the webhook
+    target (a chat channel) never carries PII.
+    """
+    url = os.getenv("KRILL_ADMIN_DISCORD_WEBHOOK", "").strip()
+    if not url:
+        return False
+    payload = {
+        "embeds": [
+            {
+                "title": "New contribution received",
+                "description": summary,
+                "color": 16729389,  # krill orange
+            }
+        ]
+    }
+    own_client = client is None
+    cli = client or httpx.AsyncClient(timeout=4.0)
+    try:
+        resp = await cli.post(url, json=payload)
+        return resp.status_code // 100 == 2
+    except httpx.HTTPError as exc:
+        logger.warning("admin webhook failed: %s", exc)
+        return False
+    finally:
+        if own_client:
+            await cli.aclose()
+
+
+async def submit_contribution(
+    store: Store,
+    input_: ContributionInput,
+    *,
+    storage_root: Path = DEFAULT_STORAGE_ROOT,
+    client: httpx.AsyncClient | None = None,
+) -> dict[str, Any]:
+    _validate(input_)
+
+    contribution_id = str(uuid.uuid4())
+    photo_path: str | None = None
+    if input_.photo is not None:
+        folder = storage_root / contribution_id
+        folder.mkdir(parents=True, exist_ok=True)
+        filename = _kebab_filename(input_.photo.filename or "photo.bin")
+        target = folder / filename
+        target.write_bytes(input_.photo.data)
+        # Store the path relative to repo root so it stays portable
+        # across dev / fly.io / a future S3 swap.
+        photo_path = str(target.as_posix())
+
+    store.insert_contribution(
+        contribution_id=contribution_id,
+        category=input_.category,
+        description=input_.description.strip(),
+        contact_email=(input_.contact_email or None),
+        contact_name=(input_.contact_name or None),
+        vessel_name=(input_.vessel_name or None),
+        vessel_imo=(input_.vessel_imo or None),
+        vessel_mmsi=(input_.vessel_mmsi or None),
+        observed_at=input_.observed_at,
+        observed_lat=input_.observed_lat,
+        observed_lon=input_.observed_lon,
+        photo_path=photo_path,
+    )
+
+    summary = _summary_for_webhook(input_, contribution_id)
+    notified = await notify_admin(summary, client=client)
+    if notified:
+        logger.info("contribution %s — admin notified", _short_id(contribution_id))
+
+    return {
+        "id": contribution_id,
+        "short_id": _short_id(contribution_id),
+        "status": "received",
+    }
diff --git a/server/services/incident_emitter.py b/server/services/incident_emitter.py
new file mode 100644
index 0000000..c5c601c
--- /dev/null
+++ b/server/services/incident_emitter.py
@@ -0,0 +1,218 @@
+"""Auto-detected incident emission (P3-T01).
+
+The Python pipeline (zone_monitor, transhipment_detector, P3-T07) calls
+:func:`emit_incident` whenever a fresh detection lands. The function:
+
+1. Builds a deterministic slug matching ``web/lib/incident-slug.ts``.
+2. Upserts the incident row into ``incidents_auto`` (DuckDB).
+3. POSTs to the Next.js ``/api/revalidate`` webhook with the shared
+   ``KRILL_REVALIDATE_SECRET`` so the corresponding ``/incident/<slug>``
+   page is regenerated within seconds.
+
+Failure modes are non-fatal: if the webhook is unreachable or the
+secret is missing, the incident still lives in DuckDB and the next
+revalidate call (manual or automated) will pick it up.
+"""
+from __future__ import annotations
+
+import logging
+import os
+import re
+from dataclasses import dataclass
+from datetime import datetime
+from typing import Any
+
+import httpx
+
+from server.store import Store
+
+logger = logging.getLogger(__name__)
+
+
+VALID_EVENT_TYPES = {
+    "ZONE_ENTERED",
+    "AIS_GAP_OPENED",
+    "TRANSHIPMENT_DETECTED",
+    "SEVERITY_CHANGED",
+}
+
+
+def _kebab(value: str) -> str:
+    """Mirror of the TS-side `kebab` in incident-slug.ts."""
+    s = value.lower()
+    s = re.sub(r"[_\s.]+", "-", s)
+    s = re.sub(r"[^a-z0-9-]+", "-", s)
+    s = re.sub(r"-+", "-", s)
+    return s.strip("-")
+
+
+def make_slug(
+    vessel_slug: str,
+    event_type: str,
+    zone_code: str | None,
+    detected_at: datetime,
+) -> str:
+    """Deterministic slug — keep aligned with web/lib/incident-slug.ts."""
+    date_part = detected_at.strftime("%Y-%m-%d")
+    parts = [date_part, _kebab(vessel_slug), _kebab(event_type)]
+    if zone_code:
+        parts.append(_kebab(zone_code))
+    return "-".join(p for p in parts if p)
+
+
+@dataclass
+class IncidentPayload:
+    vessel_slug: str
+    vessel_name: str
+    vessel_flag: str | None
+    event_type: str
+    zone_code: str | None
+    severity: str
+    detected_at: datetime
+    score: float | None = None
+    position_lat: float | None = None
+    position_lon: float | None = None
+    details: dict[str, Any] | None = None
+    sources: list[Any] | None = None
+
+    def slug(self) -> str:
+        return make_slug(self.vessel_slug, self.event_type, self.zone_code, self.detected_at)
+
+
+def upsert_incident(store: Store, payload: IncidentPayload) -> str:
+    """Persist (or update) the incident row. Returns the slug."""
+    if payload.event_type not in VALID_EVENT_TYPES:
+        raise ValueError(
+            f"unknown event_type {payload.event_type!r} (allowed: {sorted(VALID_EVENT_TYPES)})"
+        )
+    slug = payload.slug()
+    store.upsert_incident_auto(
+        slug=slug,
+        detected_at=payload.detected_at,
+        vessel_slug=payload.vessel_slug,
+        vessel_name=payload.vessel_name,
+        vessel_flag=payload.vessel_flag,
+        event_type=payload.event_type,
+        zone_code=payload.zone_code,
+        severity=payload.severity,
+        score=payload.score,
+        position_lat=payload.position_lat,
+        position_lon=payload.position_lon,
+        details=payload.details,
+        sources=payload.sources,
+    )
+    return slug
+
+
+async def trigger_revalidate(slug: str, *, client: httpx.AsyncClient | None = None) -> bool:
+    """POST to the Next.js webhook so /incident/<slug> regenerates.
+
+    Returns True on a 2xx, False otherwise. Soft-fail by design: the
+    incident is already persisted before this is called, so a failed
+    webhook only delays the page regeneration, never loses data.
+    """
+    base = (os.getenv("NEXTJS_BASE_URL") or "").rstrip("/")
+    secret = os.getenv("KRILL_REVALIDATE_SECRET") or ""
+    if not base or not secret:
+        logger.warning(
+            "revalidate skipped — NEXTJS_BASE_URL or KRILL_REVALIDATE_SECRET unset"
+        )
+        return False
+
+    url = f"{base}/api/revalidate"
+    payload = {"slug": slug, "secret": secret}
+    own_client = client is None
+    cli = client or httpx.AsyncClient(timeout=5.0)
+    try:
+        resp = await cli.post(url, json=payload)
+        if resp.status_code // 100 != 2:
+            logger.warning("revalidate %s returned %s", slug, resp.status_code)
+            return False
+        return True
+    except httpx.HTTPError as exc:
+        logger.warning("revalidate %s failed: %s", slug, exc)
+        return False
+    finally:
+        if own_client:
+            await cli.aclose()
+
+
+async def emit_incident(
+    store: Store,
+    payload: IncidentPayload,
+    *,
+    client: httpx.AsyncClient | None = None,
+) -> str:
+    """Convenience: persist + revalidate. Returns the slug regardless of
+    whether the webhook succeeded."""
+    slug = upsert_incident(store, payload)
+    ok = await trigger_revalidate(slug, client=client)
+    if ok:
+        store.mark_incident_revalidated(slug)
+    return slug
+
+
+def transhipment_incident_payload(
+    encounter: dict[str, Any],
+    *,
+    fallback_ts: datetime | None = None,
+) -> IncidentPayload | None:
+    """Build an :class:`IncidentPayload` from a transhipment scorer result.
+
+    The TranshipmentDetector emits dict-like ``ScoredEncounter`` objects;
+    this helper translates those into the canonical IncidentPayload shape
+    so the batch processor can call ``emit_incident`` per encounter.
+
+    Returns None when the score is below the FLAGGED tier (0.50) — only
+    score-meaningful encounters get a public page.
+    """
+    from datetime import UTC
+
+    score = float(encounter.get("score") or 0.0)
+    if score < 0.50:
+        return None
+    vessel_slug = encounter.get("primary_vessel_slug") or encounter.get("vessel_slug")
+    vessel_name = encounter.get("primary_vessel_name") or encounter.get("vessel_name")
+    if not vessel_slug or not vessel_name:
+        return None
+    ts_raw = encounter.get("encounter_ts") or encounter.get("ts")
+    if isinstance(ts_raw, datetime):
+        ts = ts_raw
+    elif isinstance(ts_raw, str):
+        try:
+            ts = datetime.fromisoformat(ts_raw.replace("Z", "+00:00"))
+        except ValueError:
+            ts = fallback_ts or datetime.now(UTC)
+    else:
+        ts = fallback_ts or datetime.now(UTC)
+
+    severity = "CRITICAL" if score >= 0.75 else "SUSPICIOUS"
+    return IncidentPayload(
+        vessel_slug=str(vessel_slug),
+        vessel_name=str(vessel_name),
+        vessel_flag=encounter.get("primary_vessel_flag") or encounter.get("flag"),
+        event_type="TRANSHIPMENT_DETECTED",
+        zone_code=None,
+        severity=severity,
+        score=score,
+        position_lat=encounter.get("encounter_lat") or encounter.get("lat"),
+        position_lon=encounter.get("encounter_lon") or encounter.get("lon"),
+        detected_at=ts,
+        details={
+            "partner_slug": encounter.get("partner_slug"),
+            "partner_name": encounter.get("partner_name"),
+            "duration_h": encounter.get("duration_h"),
+            "is_reefer": encounter.get("is_reefer"),
+            "signals": encounter.get("signals"),
+        },
+        sources=[
+            {
+                "url": "https://globalfishingwatch.org/our-apis/",
+                "title": "Vessel profiles — Global Fishing Watch",
+            },
+            {
+                "url": "https://aisstream.io/",
+                "title": "Public AIS via AISStream.io",
+            },
+        ],
+    )
diff --git a/server/services/positions_history.py b/server/services/positions_history.py
new file mode 100644
index 0000000..2b72e73
--- /dev/null
+++ b/server/services/positions_history.py
@@ -0,0 +1,291 @@
+"""Historical positions service for the timeline scrubber (P2-T03/T04).
+
+Exposes :func:`get_positions_history`, a pure function over the existing
+``Store`` + ``ZoneIndex`` services. Responsible for:
+
+* Resolving a vessel slug to its MMSI (via ``vessel_status``).
+* Pulling the AIS track for the requested window.
+* Downsampling to one point per ``downsample_minutes`` window when the raw
+  series exceeds 1000 points (the front-end scrubber + trail can't usefully
+  draw more than that on a 30-day view anyway).
+* Tagging each point with an instantaneous severity tier (CRITICAL /
+  SUSPICIOUS / WATCH / NORMAL) derived from zone membership at that point
+  and the local AIS-gap state.
+* Pulling the relevant key events (ZONE_ENTERED / ZONE_LEFT / AIS_GAP_OPENED
+  / AIS_GAP_CLOSED / SEVERITY_CHANGED) on the same window so the scrubber
+  can render markers without a second round-trip.
+
+Output schema matches the contract in
+``docs/superpowers/specs/2026-04-28-krill-refonte/phase-2-historique/P2-T01-backend-positions-endpoint.md``.
+"""
+from __future__ import annotations
+
+from collections.abc import Iterable
+from dataclasses import dataclass, field
+from datetime import UTC, datetime, timedelta
+from typing import Any
+
+from server.store import Store
+from server.zones import ZoneIndex, Zone
+
+# Window during which an AIS gap (no observations) is considered "suspicious"
+# at the per-point severity level. Mirrors GAP_SUSPICIOUS_HOURS used by the
+# live worker so historical and live views agree.
+GAP_SUSPICIOUS_SECONDS = 6 * 3600
+
+DEFAULT_DAYS = 30
+DEFAULT_DOWNSAMPLE_MINUTES = 15
+DOWNSAMPLE_THRESHOLD = 1000  # raw points beyond which we collapse to buckets
+
+
+@dataclass
+class HistoryPoint:
+    ts: str
+    lat: float
+    lon: float
+    sog: float | None
+    cog: float | None
+    severity: str  # CRITICAL | SUSPICIOUS | WATCH | NORMAL
+    in_zones: list[str] = field(default_factory=list)
+    ais_gap_open: bool = False
+
+    def to_dict(self) -> dict[str, Any]:
+        return {
+            "ts": self.ts,
+            "lat": self.lat,
+            "lon": self.lon,
+            "sog": self.sog,
+            "cog": self.cog,
+            "severity": self.severity,
+            "in_zones": self.in_zones,
+            "ais_gap_open": self.ais_gap_open,
+        }
+
+
+@dataclass
+class HistoryEvent:
+    ts: str
+    type: str
+    zone: str | None = None
+    severity: str | None = None
+    detail: dict[str, Any] | None = None
+
+    def to_dict(self) -> dict[str, Any]:
+        out: dict[str, Any] = {"ts": self.ts, "type": self.type}
+        if self.zone is not None:
+            out["zone"] = self.zone
+        if self.severity is not None:
+            out["severity"] = self.severity
+        if self.detail:
+            out["detail"] = self.detail
+        return out
+
+
+@dataclass
+class PositionsHistory:
+    vessel: dict[str, str | None]
+    range: dict[str, Any]
+    downsample: str | None  # human-readable label, e.g. "15min" or None
+    positions: list[HistoryPoint]
+    events: list[HistoryEvent]
+
+    def to_dict(self) -> dict[str, Any]:
+        return {
+            "vessel": self.vessel,
+            "range": self.range,
+            "downsample": self.downsample,
+            "positions": [p.to_dict() for p in self.positions],
+            "events": [e.to_dict() for e in self.events],
+        }
+
+
+# ---------- Severity classification --------------------------------------
+
+# Event types we surface to the scrubber. Anything else stays in the raw
+# event log but doesn't get a marker.
+_EVENT_TYPES_FOR_SCRUBBER = {
+    "ZONE_ENTERED",
+    "ZONE_LEFT",
+    "AIS_GAP_OPENED",
+    "AIS_GAP_CLOSED",
+    "SEVERITY_CHANGED",
+}
+
+
+def _severity_for_zones(zones: Iterable[Zone]) -> str:
+    """Map a list of containing zones to the spec's severity tier.
+
+    Differs from :meth:`ZoneIndex.severity_for` in that it returns the
+    standard frontend tags (CRITICAL / SUSPICIOUS / WATCH / NORMAL) rather
+    than the worker's internal labels (FISHING_ZONE / OPEN_WATER).
+    """
+    z_list = list(zones)
+    if any(z.category == "mpa" for z in z_list):
+        return "CRITICAL"
+    if any(z.category in ("buffer_zone", "penguin_buffer") for z in z_list):
+        return "SUSPICIOUS"
+    if any(z.category == "fishery_subarea" for z in z_list):
+        return "WATCH"
+    return "NORMAL"
+
+
+# ---------- Downsampling -------------------------------------------------
+
+
+def _downsample_by_bucket(
+    points: list[dict[str, Any]],
+    downsample_minutes: int,
+) -> list[dict[str, Any]]:
+    """Collapse a dense track into one representative point per time bucket.
+
+    Each bucket keeps the *latest* observation in that window (consistent with
+    "where was the vessel at the end of this 15-minute slot?" — the visual
+    intuition for a trail). Skips buckets with no observations.
+    """
+    if not points:
+        return []
+    bucket_seconds = downsample_minutes * 60
+    by_bucket: dict[int, dict[str, Any]] = {}
+    for p in points:
+        if not p.get("ts"):
+            continue
+        # ts is an ISO string; parse to epoch seconds. We coerce to UTC since
+        # both the worker and the dashboard speak UTC.
+        try:
+            dt = datetime.fromisoformat(p["ts"]).replace(tzinfo=UTC)
+        except ValueError:
+            continue
+        bucket = int(dt.timestamp()) // bucket_seconds
+        prev = by_bucket.get(bucket)
+        if prev is None or p["ts"] > prev["ts"]:
+            by_bucket[bucket] = p
+    return [by_bucket[k] for k in sorted(by_bucket)]
+
+
+# ---------- AIS gap derivation -------------------------------------------
+
+
+def _mark_ais_gaps(
+    points: list[dict[str, Any]],
+) -> list[bool]:
+    """For each point, decide whether the *previous* gap >= 6 h (open here)."""
+    flags = [False] * len(points)
+    for i in range(1, len(points)):
+        try:
+            prev_dt = datetime.fromisoformat(points[i - 1]["ts"]).replace(tzinfo=UTC)
+            cur_dt = datetime.fromisoformat(points[i]["ts"]).replace(tzinfo=UTC)
+        except (KeyError, ValueError):
+            continue
+        if (cur_dt - prev_dt).total_seconds() >= GAP_SUSPICIOUS_SECONDS:
+            flags[i] = True
+    return flags
+
+
+# ---------- Slug resolution ----------------------------------------------
+
+
+def _resolve_mmsi(store: Store, slug: str) -> tuple[str | None, str | None]:
+    """Return (mmsi, vessel_name) for a slug, or (None, None) if unknown."""
+    status = store.get_status(slug)
+    if not status:
+        return None, None
+    return status.get("mmsi"), status.get("vessel_name")
+
+
+# ---------- Public entry point -------------------------------------------
+
+
+def get_positions_history(
+    *,
+    store: Store,
+    zones: ZoneIndex,
+    slug: str,
+    days: int = DEFAULT_DAYS,
+    downsample_minutes: int = DEFAULT_DOWNSAMPLE_MINUTES,
+    now: datetime | None = None,
+) -> PositionsHistory | None:
+    """Build a vessel's historical positions + scrubber events.
+
+    Returns ``None`` if the slug is unknown (no row in vessel_status). Caller
+    is expected to map that to a 404. ``now`` is injectable for tests.
+    """
+    mmsi, name = _resolve_mmsi(store, slug)
+    if mmsi is None:
+        return None
+
+    until = now or datetime.now(UTC)
+    since = until - timedelta(days=days)
+
+    raw_points = store.track_range(mmsi, since, until)
+    use_downsample = len(raw_points) > DOWNSAMPLE_THRESHOLD
+    points = (
+        _downsample_by_bucket(raw_points, downsample_minutes)
+        if use_downsample
+        else list(raw_points)
+    )
+
+    gap_flags = _mark_ais_gaps(points)
+
+    history_points: list[HistoryPoint] = []
+    for idx, p in enumerate(points):
+        lat = p.get("lat")
+        lon = p.get("lon")
+        if lat is None or lon is None:
+            continue
+        in_zones = zones.at(lat, lon)
+        zone_severity = _severity_for_zones(in_zones)
+        gap_open = gap_flags[idx]
+        # AIS gap escalates an OPEN-WATER point to SUSPICIOUS, but never
+        # downgrades CRITICAL. Inside an MPA we keep CRITICAL.
+        if gap_open and zone_severity == "NORMAL":
+            severity = "SUSPICIOUS"
+        else:
+            severity = zone_severity
+        history_points.append(
+            HistoryPoint(
+                ts=p["ts"],
+                lat=float(lat),
+                lon=float(lon),
+                sog=p.get("sog_knots"),
+                cog=p.get("cog_deg"),
+                severity=severity,
+                in_zones=[z.id for z in in_zones],
+                ais_gap_open=gap_open,
+            )
+        )
+
+    raw_events = store.recent_events(vessel_slug=slug, limit=500)
+    history_events: list[HistoryEvent] = []
+    for ev in raw_events:
+        if ev.get("event_type") not in _EVENT_TYPES_FOR_SCRUBBER:
+            continue
+        ev_ts = ev.get("ts")
+        if not ev_ts:
+            continue
+        try:
+            ev_dt = datetime.fromisoformat(ev_ts).replace(tzinfo=UTC)
+        except ValueError:
+            continue
+        if ev_dt < since or ev_dt > until:
+            continue
+        history_events.append(
+            HistoryEvent(
+                ts=ev_ts,
+                type=ev["event_type"],
+                zone=ev.get("zone_name") or ev.get("zone_id"),
+                severity=ev.get("severity"),
+            )
+        )
+    history_events.sort(key=lambda e: e.ts)
+
+    return PositionsHistory(
+        vessel={"slug": slug, "name": name},
+        range={
+            "from": since.isoformat().replace("+00:00", "Z"),
+            "to": until.isoformat().replace("+00:00", "Z"),
+            "days": days,
+        },
+        downsample=f"{downsample_minutes}min" if use_downsample else None,
+        positions=history_points,
+        events=history_events,
+    )
diff --git a/server/store.py b/server/store.py
index 1ddc953..68d3d0f 100644
--- a/server/store.py
+++ b/server/store.py
@@ -97,17 +97,102 @@
     applied_at  TIMESTAMP NOT NULL,
     description VARCHAR
 );
+
+-- v2: auto-detected incidents (P3-T01). Distinct from `vessel_events`
+-- (raw worker log) and from `incidents` curated entries served by
+-- /api/incidents — these rows back the public /incident/<slug> pages.
+CREATE TABLE IF NOT EXISTS incidents_auto (
+    slug          VARCHAR PRIMARY KEY,
+    detected_at   TIMESTAMP NOT NULL,
+    vessel_slug   VARCHAR NOT NULL,
+    vessel_name   VARCHAR NOT NULL,
+    vessel_flag   VARCHAR,
+    event_type    VARCHAR NOT NULL,
+    zone_code     VARCHAR,
+    severity      VARCHAR NOT NULL,
+    score         DOUBLE,
+    position_lat  DOUBLE,
+    position_lon  DOUBLE,
+    details_json  VARCHAR,
+    sources_json  VARCHAR,
+    created_at    TIMESTAMP DEFAULT now(),
+    revalidated_at TIMESTAMP
+);
+CREATE INDEX IF NOT EXISTS idx_incidents_auto_detected_at
+    ON incidents_auto(detected_at DESC);
+CREATE INDEX IF NOT EXISTS idx_incidents_auto_vessel
+    ON incidents_auto(vessel_slug);
+
+-- v3: public contributions (P3-T05). Submissions from the /contribuer
+-- form. Photo blobs live on disk under data/contributions/<id>/; only
+-- the relative path is stored here.
+CREATE TABLE IF NOT EXISTS contributions (
+    id              VARCHAR PRIMARY KEY,
+    submitted_at    TIMESTAMP DEFAULT now(),
+    contact_email   VARCHAR,
+    contact_name    VARCHAR,
+    category        VARCHAR NOT NULL,
+    vessel_name     VARCHAR,
+    vessel_imo      VARCHAR,
+    vessel_mmsi     VARCHAR,
+    observed_at     TIMESTAMP,
+    observed_lat    DOUBLE,
+    observed_lon    DOUBLE,
+    description     VARCHAR NOT NULL,
+    photo_path      VARCHAR,
+    status          VARCHAR DEFAULT 'pending',
+    reviewer_notes  VARCHAR
+);
+CREATE INDEX IF NOT EXISTS idx_contributions_submitted_at
+    ON contributions(submitted_at DESC);
+CREATE INDEX IF NOT EXISTS idx_contributions_status
+    ON contributions(status);
 """
 
 # Ordered list of (version, description, sql) tuples. v1 is the no-op baseline
 # corresponding to the schema in _SCHEMA. Future migrations append here.
 _MIGRATIONS: list[tuple[int, str, str]] = [
     (1, "baseline schema (ais_positions, vessel_events, vessel_status, profiles_cache)", ""),
+    (2, "incidents_auto table (P3-T01 — auto-detected incident pages)", ""),
+    (3, "contributions table (P3-T05 — public submissions)", ""),
 ]
 
 CURRENT_SCHEMA_VERSION = _MIGRATIONS[-1][0]
 
 
+def _row_to_incident_auto(row: Any) -> dict[str, Any]:
+    """Translate a SELECT row from incidents_auto into a JSON-friendly dict."""
+    details: Any = None
+    sources: Any = None
+    if row[11]:
+        try:
+            details = json.loads(row[11])
+        except json.JSONDecodeError:
+            details = None
+    if row[12]:
+        try:
+            sources = json.loads(row[12])
+        except json.JSONDecodeError:
+            sources = None
+    return {
+        "slug": row[0],
+        "detected_at": row[1].isoformat() if row[1] else None,
+        "vessel_slug": row[2],
+        "vessel_name": row[3],
+        "vessel_flag": row[4],
+        "event_type": row[5],
+        "zone_code": row[6],
+        "severity": row[7],
+        "score": row[8],
+        "position_lat": row[9],
+        "position_lon": row[10],
+        "details": details,
+        "sources": sources,
+        "created_at": row[13].isoformat() if row[13] else None,
+        "revalidated_at": row[14].isoformat() if row[14] else None,
+    }
+
+
 class Store:
     """Thread-safe DuckDB wrapper for the dashboard service.
 
@@ -490,3 +575,239 @@ def load_profiles(self) -> tuple[datetime | None, list[dict[str, Any]]]:
         except json.JSONDecodeError:
             return gen_at, []
         return gen_at, data.get("profiles", [])
+
+    # ----- Auto-detected incidents (P3-T01) ------------------------------
+
+    def upsert_incident_auto(
+        self,
+        *,
+        slug: str,
+        detected_at: datetime,
+        vessel_slug: str,
+        vessel_name: str,
+        vessel_flag: str | None,
+        event_type: str,
+        zone_code: str | None,
+        severity: str,
+        score: float | None = None,
+        position_lat: float | None = None,
+        position_lon: float | None = None,
+        details: dict[str, Any] | None = None,
+        sources: list[Any] | None = None,
+    ) -> None:
+        with self._lock:
+            self._con.execute(
+                """
+                INSERT INTO incidents_auto
+                  (slug, detected_at, vessel_slug, vessel_name, vessel_flag,
+                   event_type, zone_code, severity, score,
+                   position_lat, position_lon, details_json, sources_json)
+                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+                ON CONFLICT (slug) DO UPDATE SET
+                    detected_at  = excluded.detected_at,
+                    vessel_slug  = excluded.vessel_slug,
+                    vessel_name  = excluded.vessel_name,
+                    vessel_flag  = excluded.vessel_flag,
+                    event_type   = excluded.event_type,
+                    zone_code    = excluded.zone_code,
+                    severity     = excluded.severity,
+                    score        = excluded.score,
+                    position_lat = excluded.position_lat,
+                    position_lon = excluded.position_lon,
+                    details_json = excluded.details_json,
+                    sources_json = excluded.sources_json
+                """,
+                (
+                    slug,
+                    detected_at,
+                    vessel_slug,
+                    vessel_name,
+                    vessel_flag,
+                    event_type,
+                    zone_code,
+                    severity,
+                    score,
+                    position_lat,
+                    position_lon,
+                    json.dumps(details, ensure_ascii=False) if details else None,
+                    json.dumps(sources, ensure_ascii=False) if sources else None,
+                ),
+            )
+
+    def mark_incident_revalidated(self, slug: str) -> None:
+        with self._lock:
+            self._con.execute(
+                "UPDATE incidents_auto SET revalidated_at = ? WHERE slug = ?",
+                (datetime.now(UTC), slug),
+            )
+
+    def get_incident_auto(self, slug: str) -> dict[str, Any] | None:
+        with self._lock:
+            row = self._con.execute(
+                """
+                SELECT slug, detected_at, vessel_slug, vessel_name, vessel_flag,
+                       event_type, zone_code, severity, score,
+                       position_lat, position_lon, details_json, sources_json,
+                       created_at, revalidated_at
+                FROM incidents_auto WHERE slug = ?
+                """,
+                (slug,),
+            ).fetchone()
+        return _row_to_incident_auto(row) if row else None
+
+    def list_incidents_auto(
+        self,
+        *,
+        vessel: str | None = None,
+        since: datetime | None = None,
+        limit: int = 50,
+    ) -> list[dict[str, Any]]:
+        clauses: list[str] = []
+        params: list[Any] = []
+        if vessel:
+            clauses.append("vessel_slug = ?")
+            params.append(vessel)
+        if since:
+            clauses.append("detected_at >= ?")
+            params.append(since)
+        where = ("WHERE " + " AND ".join(clauses)) if clauses else ""
+        params.append(limit)
+        with self._lock:
+            rows = self._con.execute(
+                f"""
+                SELECT slug, detected_at, vessel_slug, vessel_name, vessel_flag,
+                       event_type, zone_code, severity, score,
+                       position_lat, position_lon, details_json, sources_json,
+                       created_at, revalidated_at
+                FROM incidents_auto
+                {where}
+                ORDER BY detected_at DESC
+                LIMIT ?
+                """,
+                params,
+            ).fetchall()
+        return [_row_to_incident_auto(r) for r in rows]
+
+    # ----- Public contributions (P3-T05) ---------------------------------
+
+    def insert_contribution(
+        self,
+        *,
+        contribution_id: str,
+        category: str,
+        description: str,
+        contact_email: str | None = None,
+        contact_name: str | None = None,
+        vessel_name: str | None = None,
+        vessel_imo: str | None = None,
+        vessel_mmsi: str | None = None,
+        observed_at: datetime | None = None,
+        observed_lat: float | None = None,
+        observed_lon: float | None = None,
+        photo_path: str | None = None,
+    ) -> None:
+        with self._lock:
+            self._con.execute(
+                """
+                INSERT INTO contributions
+                  (id, category, description, contact_email, contact_name,
+                   vessel_name, vessel_imo, vessel_mmsi, observed_at,
+                   observed_lat, observed_lon, photo_path)
+                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+                """,
+                (
+                    contribution_id,
+                    category,
+                    description,
+                    contact_email,
+                    contact_name,
+                    vessel_name,
+                    vessel_imo,
+                    vessel_mmsi,
+                    observed_at,
+                    observed_lat,
+                    observed_lon,
+                    photo_path,
+                ),
+            )
+
+    def get_contribution(self, contribution_id: str) -> dict[str, Any] | None:
+        with self._lock:
+            row = self._con.execute(
+                """
+                SELECT id, submitted_at, contact_email, contact_name, category,
+                       vessel_name, vessel_imo, vessel_mmsi, observed_at,
+                       observed_lat, observed_lon, description, photo_path,
+                       status, reviewer_notes
+                FROM contributions WHERE id = ?
+                """,
+                (contribution_id,),
+            ).fetchone()
+        if not row:
+            return None
+        return {
+            "id": row[0],
+            "submitted_at": row[1].isoformat() if row[1] else None,
+            "contact_email": row[2],
+            "contact_name": row[3],
+            "category": row[4],
+            "vessel_name": row[5],
+            "vessel_imo": row[6],
+            "vessel_mmsi": row[7],
+            "observed_at": row[8].isoformat() if row[8] else None,
+            "observed_lat": row[9],
+            "observed_lon": row[10],
+            "description": row[11],
+            "photo_path": row[12],
+            "status": row[13],
+            "reviewer_notes": row[14],
+        }
+
+    def list_contributions(
+        self,
+        *,
+        status: str | None = None,
+        limit: int = 100,
+    ) -> list[dict[str, Any]]:
+        clauses: list[str] = []
+        params: list[Any] = []
+        if status:
+            clauses.append("status = ?")
+            params.append(status)
+        where = ("WHERE " + " AND ".join(clauses)) if clauses else ""
+        params.append(limit)
+        with self._lock:
+            rows = self._con.execute(
+                f"""
+                SELECT id, submitted_at, contact_email, contact_name, category,
+                       vessel_name, vessel_imo, vessel_mmsi, observed_at,
+                       observed_lat, observed_lon, description, photo_path,
+                       status, reviewer_notes
+                FROM contributions
+                {where}
+                ORDER BY submitted_at DESC
+                LIMIT ?
+                """,
+                params,
+            ).fetchall()
+        return [
+            {
+                "id": r[0],
+                "submitted_at": r[1].isoformat() if r[1] else None,
+                "contact_email": r[2],
+                "contact_name": r[3],
+                "category": r[4],
+                "vessel_name": r[5],
+                "vessel_imo": r[6],
+                "vessel_mmsi": r[7],
+                "observed_at": r[8].isoformat() if r[8] else None,
+                "observed_lat": r[9],
+                "observed_lon": r[10],
+                "description": r[11],
+                "photo_path": r[12],
+                "status": r[13],
+                "reviewer_notes": r[14],
+            }
+            for r in rows
+        ]
+
diff --git a/server/workers.py b/server/workers.py
index ef44053..e806d63 100644
--- a/server/workers.py
+++ b/server/workers.py
@@ -25,8 +25,9 @@
 from src.vessel_db import Fleet, Vessel
 
 from .bus import EventBus
+from .services.incident_emitter import IncidentPayload, emit_incident
 from .store import Store
-from .zones import ZoneIndex
+from .zones import ZoneIndex, Zone
 
 logger = logging.getLogger(__name__)
 
@@ -64,6 +65,33 @@ async def _notify_safe(event_payload: dict[str, Any]) -> None:
         logger.exception("notifier failed for %s", event_payload.get("vessel_slug"))
 
 
+# Severities that warrant a public /incident/<slug> page (P3-T07).
+# CPWF (friendly) and NORMAL/UNKNOWN are intentionally excluded.
+_INCIDENT_SEVERITIES = {"CRITICAL", "SUSPICIOUS", "WATCH"}
+# Categories of zones whose entry deserves an incident page. Fishery
+# subareas (ccamlr 48.x) are noisy by design — krill vessels live in
+# them — so we only emit for protected/sensitive geometries.
+_INCIDENT_ZONE_CATEGORIES = {"mpa", "buffer_zone", "penguin_buffer"}
+
+
+async def _emit_incident_safe(
+    store: Store,
+    payload: IncidentPayload,
+) -> None:
+    """Best-effort incident emission — same pattern as `_notify_safe`.
+
+    Always logs, never raises, never blocks the calling worker. The
+    revalidate webhook is itself non-fatal: if Next.js is unreachable
+    the row still lands in DuckDB and the next request will pick it up.
+    """
+    try:
+        await emit_incident(store, payload)
+    except Exception:  # noqa: BLE001
+        logger.exception(
+            "incident emit failed for %s/%s", payload.vessel_slug, payload.event_type
+        )
+
+
 def _seed_status(fleet: Fleet, store: Store, zones: ZoneIndex) -> None:
     """Ensure every fleet vessel has at least an empty status row.
 
@@ -136,6 +164,8 @@ def _broadcast_event(event_payload: dict[str, Any]) -> None:
         if event_payload.get("severity") == "CRITICAL":
             asyncio.create_task(_notify_safe(event_payload))
 
+    zone_by_id: dict[str, Zone] = {z.id: z for z in zones.zones}
+
     for zid in sorted(entered):
         store.insert_event(
             vessel_slug=slug,
@@ -159,6 +189,50 @@ def _broadcast_event(event_payload: dict[str, Any]) -> None:
             "severity": severity, "lat": lat, "lon": lon,
         })
 
+        # P3-T07: emit a public /incident/<slug> page for protected-zone
+        # entries that cross the WATCH bar. Fishery subareas and the
+        # CPWF friendly fleet are intentionally skipped here — those
+        # belong in the live event log, not on a shareable incident
+        # page.
+        zone = zone_by_id.get(zid)
+        if (
+            severity in _INCIDENT_SEVERITIES
+            and zone is not None
+            and zone.category in _INCIDENT_ZONE_CATEGORIES
+        ):
+            asyncio.create_task(
+                _emit_incident_safe(
+                    store,
+                    IncidentPayload(
+                        vessel_slug=slug,
+                        vessel_name=vessel.name,
+                        vessel_flag=vessel.flag,
+                        event_type="ZONE_ENTERED",
+                        zone_code=zid,
+                        severity=severity,
+                        detected_at=ts,
+                        position_lat=lat,
+                        position_lon=lon,
+                        details={
+                            "zone_name": zone.name,
+                            "zone_category": zone.category,
+                            "sog_knots": sog,
+                            "cog_deg": cog,
+                        },
+                        sources=[
+                            {
+                                "url": "https://www.ccamlr.org/",
+                                "title": "CCAMLR — Convention Area & MPAs",
+                            },
+                            {
+                                "url": "https://aisstream.io/",
+                                "title": "Public AIS via AISStream.io",
+                            },
+                        ],
+                    ),
+                )
+            )
+
     for zid in sorted(left):
         store.insert_event(
             vessel_slug=slug,
diff --git a/src/notifier.py b/src/notifier.py
index 7783e15..6b7e5b0 100644
--- a/src/notifier.py
+++ b/src/notifier.py
@@ -231,6 +231,46 @@ def _slack_blocks_for_event(event: dict[str, Any]) -> dict[str, Any]:
     return {"text": fallback, "attachments": [attachment]}
 
 
+def _incident_url_for_event(event: dict[str, Any]) -> str | None:
+    """Build the public /incident/<slug> URL when the event has the
+    fields the slug generator needs. Mirrors the logic in
+    server.services.incident_emitter.make_slug so the link rendered
+    in Discord/Slack matches the page that just got generated.
+
+    Returns None when:
+    - the event isn't of a kind that gets an incident page (only
+      ZONE_ENTERED / TRANSHIPMENT_DETECTED today),
+    - the timestamp is missing or unparseable,
+    - NEXTJS_BASE_URL isn't configured (so we can't build a real link).
+    """
+    kind = event.get("event_type") or ""
+    if kind not in ("ZONE_ENTERED", "TRANSHIPMENT_DETECTED"):
+        return None
+    base = (os.getenv("NEXTJS_BASE_URL") or "").rstrip("/")
+    if not base:
+        return None
+    vessel_slug = event.get("vessel_slug")
+    if not vessel_slug:
+        return None
+    ts_raw = event.get("ts")
+    if not ts_raw:
+        return None
+    try:
+        from datetime import datetime as _dt
+
+        ts = _dt.fromisoformat(str(ts_raw).replace("Z", "+00:00"))
+    except (ValueError, TypeError):
+        return None
+    from server.services.incident_emitter import make_slug
+
+    zone_code = event.get("zone_id")
+    slug = make_slug(str(vessel_slug), kind, zone_code, ts)
+    locale = (os.getenv("WEB_DEFAULT_LOCALE") or "en").strip().lower()
+    if locale not in {"fr", "en"}:
+        locale = "en"
+    return f"{base}/{locale}/incident/{slug}"
+
+
 def _fmt_live_event(event: dict[str, Any]) -> str:
     """Plain-text fallback used by tests and non-rich webhooks."""
     name = event.get("vessel_name") or event.get("vessel_slug") or "vessel"
@@ -249,10 +289,12 @@ def _fmt_live_event(event: dict[str, Any]) -> str:
     extra = ""
     if kind == "SEVERITY_CHANGED" and payload:
         extra = f" ({payload.get('from')} → {payload.get('to')})"
-    return (
+    base = (
         f"🚨 [{sev}] {name} — {kind}"
         f"{(' · ' + zone) if zone else ''}{extra} @ {coord} · {ts}"
     )
+    incident_url = _incident_url_for_event(event)
+    return f"{base}\n{incident_url}" if incident_url else base
 
 
 async def send_live_alert(
diff --git a/tests/test_contributions.py b/tests/test_contributions.py
new file mode 100644
index 0000000..442f230
--- /dev/null
+++ b/tests/test_contributions.py
@@ -0,0 +1,237 @@
+"""Tests for the public contribution form pipeline (P3-T05)."""
+from __future__ import annotations
+
+from datetime import UTC, datetime
+from pathlib import Path
+
+import httpx
+import pytest
+
+from server.services.contributions_store import (
+    ContributionError,
+    ContributionInput,
+    PhotoBlob,
+    submit_contribution,
+)
+from server.store import Store
+
+
+def _payload(**overrides) -> ContributionInput:
+    base = dict(
+        category="vessel-sighting",
+        description="x" * 60,
+        contact_email="alice@example.org",
+        contact_name="Alice",
+        vessel_name="Antarctic Endurance",
+        vessel_imo="9806079",
+        observed_at=datetime(2026, 4, 28, 14, 0, tzinfo=UTC),
+        observed_lat=-53.96,
+        observed_lon=-36.72,
+    )
+    base.update(overrides)
+    return ContributionInput(**base)
+
+
+@pytest.mark.asyncio
+async def test_round_trip_persists_and_returns_id(tmp_path: Path) -> None:
+    store = Store(tmp_path / "c.duckdb")
+    try:
+        result = await submit_contribution(
+            store,
+            _payload(),
+            storage_root=tmp_path / "blobs",
+        )
+        assert "id" in result
+        assert result["status"] == "received"
+        # short_id is the prefix of the UUID
+        assert result["id"].startswith(result["short_id"])
+        row = store.get_contribution(result["id"])
+        assert row is not None
+        assert row["vessel_name"] == "Antarctic Endurance"
+        assert row["category"] == "vessel-sighting"
+        assert row["status"] == "pending"
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_rejects_short_description(tmp_path: Path) -> None:
+    store = Store(tmp_path / "c.duckdb")
+    try:
+        with pytest.raises(ContributionError, match="50 characters"):
+            await submit_contribution(
+                store,
+                _payload(description="too short"),
+                storage_root=tmp_path / "blobs",
+            )
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_rejects_invalid_category(tmp_path: Path) -> None:
+    store = Store(tmp_path / "c.duckdb")
+    try:
+        with pytest.raises(ContributionError, match="unknown category"):
+            await submit_contribution(
+                store,
+                _payload(category="bogus"),
+                storage_root=tmp_path / "blobs",
+            )
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_rejects_invalid_email(tmp_path: Path) -> None:
+    store = Store(tmp_path / "c.duckdb")
+    try:
+        with pytest.raises(ContributionError, match="contact_email"):
+            await submit_contribution(
+                store,
+                _payload(contact_email="not-an-email"),
+                storage_root=tmp_path / "blobs",
+            )
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_photo_persisted_and_path_stored(tmp_path: Path) -> None:
+    store = Store(tmp_path / "c.duckdb")
+    try:
+        photo = PhotoBlob(
+            filename="boat photo!.jpg",
+            content_type="image/jpeg",
+            data=b"\xff\xd8\xff\xe0fake-jpeg",
+        )
+        result = await submit_contribution(
+            store,
+            _payload(photo=photo),
+            storage_root=tmp_path / "blobs",
+        )
+        row = store.get_contribution(result["id"])
+        assert row is not None
+        assert row["photo_path"] is not None
+        path = Path(row["photo_path"])
+        assert path.exists()
+        assert path.read_bytes().startswith(b"\xff\xd8\xff")
+        # Filename slugified — no spaces / punctuation
+        assert " " not in path.name
+        assert path.name.endswith(".jpg")
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_oversize_photo_rejected(tmp_path: Path) -> None:
+    store = Store(tmp_path / "c.duckdb")
+    try:
+        big = b"\x00" * (5 * 1024 * 1024 + 1)
+        with pytest.raises(ContributionError, match="too large"):
+            await submit_contribution(
+                store,
+                _payload(
+                    photo=PhotoBlob(
+                        filename="big.jpg",
+                        content_type="image/jpeg",
+                        data=big,
+                    )
+                ),
+                storage_root=tmp_path / "blobs",
+            )
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_unsupported_mime_rejected(tmp_path: Path) -> None:
+    store = Store(tmp_path / "c.duckdb")
+    try:
+        with pytest.raises(ContributionError, match="unsupported photo mime"):
+            await submit_contribution(
+                store,
+                _payload(
+                    photo=PhotoBlob(
+                        filename="evil.exe",
+                        content_type="application/x-msdownload",
+                        data=b"MZ",
+                    )
+                ),
+                storage_root=tmp_path / "blobs",
+            )
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_admin_webhook_called_when_configured(
+    tmp_path: Path, monkeypatch
+) -> None:
+    monkeypatch.setenv("KRILL_ADMIN_DISCORD_WEBHOOK", "https://discord.test/webhook")
+    captured: dict = {}
+
+    def handler(request: httpx.Request) -> httpx.Response:
+        captured["url"] = str(request.url)
+        captured["body"] = request.content.decode()
+        return httpx.Response(204)
+
+    transport = httpx.MockTransport(handler)
+    store = Store(tmp_path / "c.duckdb")
+    try:
+        async with httpx.AsyncClient(transport=transport) as cli:
+            result = await submit_contribution(
+                store,
+                _payload(),
+                storage_root=tmp_path / "blobs",
+                client=cli,
+            )
+        assert captured["url"] == "https://discord.test/webhook"
+        body = captured["body"]
+        # Webhook MUST NOT leak the email or contact name
+        assert "alice@example.org" not in body
+        assert "Alice" not in body
+        # …but should mention the vessel & a short ref
+        assert "Antarctic Endurance" in body
+        assert result["short_id"] in body
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_admin_webhook_skipped_when_unset(
+    tmp_path: Path, monkeypatch
+) -> None:
+    monkeypatch.delenv("KRILL_ADMIN_DISCORD_WEBHOOK", raising=False)
+    store = Store(tmp_path / "c.duckdb")
+    try:
+        result = await submit_contribution(
+            store,
+            _payload(),
+            storage_root=tmp_path / "blobs",
+        )
+        # Submission still succeeds even with no webhook configured.
+        assert result["status"] == "received"
+    finally:
+        store.close()
+
+
+def test_list_contributions_filters_by_status(tmp_path: Path) -> None:
+    store = Store(tmp_path / "c.duckdb")
+    try:
+        store.insert_contribution(
+            contribution_id="11111111-1111-1111-1111-111111111111",
+            category="other",
+            description="x" * 60,
+        )
+        store.insert_contribution(
+            contribution_id="22222222-2222-2222-2222-222222222222",
+            category="vessel-sighting",
+            description="y" * 60,
+        )
+        rows = store.list_contributions(status="pending")
+        assert len(rows) == 2
+        rows = store.list_contributions(status="published")
+        assert rows == []
+    finally:
+        store.close()
diff --git a/tests/test_digests.py b/tests/test_digests.py
new file mode 100644
index 0000000..b058e4f
--- /dev/null
+++ b/tests/test_digests.py
@@ -0,0 +1,75 @@
+"""Tests for the digest exposure routes (P3-T06)."""
+from __future__ import annotations
+
+from pathlib import Path
+
+import pytest
+from fastapi.testclient import TestClient
+
+
+@pytest.fixture()
+def client_with_digests(tmp_path: Path, monkeypatch: pytest.MonkeyPatch) -> TestClient:
+    """Spawn the FastAPI app with a temporary CWD so we can stage
+    output/transhipments_*.html fixtures without touching the real tree."""
+    monkeypatch.chdir(tmp_path)
+    out = tmp_path / "output"
+    out.mkdir()
+    (out / "transhipments_2026-W17.html").write_text(
+        "<h1>Week 17 digest</h1><p>Vessels of interest: Antarctic Endurance.</p>",
+        encoding="utf-8",
+    )
+    (out / "transhipments_2026-W16.html").write_text(
+        "<h1>Week 16 digest</h1><p>Two events.</p>",
+        encoding="utf-8",
+    )
+    # Decoy files we expect the regex to skip.
+    (out / "krill_fleet.geojson").write_text("{}", encoding="utf-8")
+    (out / "transhipments_invalid.html").write_text("nope", encoding="utf-8")
+
+    monkeypatch.setenv("KRILL_DB_PATH", str(tmp_path / "test.duckdb"))
+    monkeypatch.setenv("DISABLE_WORKERS", "1")
+    # Re-import the app fresh so the constants pick up the new CWD-based
+    # output dir resolution.
+    import importlib
+    import server.app as app_mod
+
+    importlib.reload(app_mod)
+    return TestClient(app_mod.app)
+
+
+def test_lists_digests_newest_first(client_with_digests: TestClient) -> None:
+    r = client_with_digests.get("/api/digests")
+    assert r.status_code == 200
+    data = r.json()
+    assert data["count"] == 2
+    weeks = [d["isoweek"] for d in data["digests"]]
+    assert weeks == ["2026-W17", "2026-W16"]
+    assert data["digests"][0]["filename"] == "transhipments_2026-W17.html"
+    assert data["digests"][0]["size"] > 0
+    assert data["digests"][0]["generated_at"]
+
+
+def test_get_digest_returns_html(client_with_digests: TestClient) -> None:
+    r = client_with_digests.get("/api/digests/2026-W17")
+    assert r.status_code == 200
+    body = r.json()
+    assert body["isoweek"] == "2026-W17"
+    assert "Antarctic Endurance" in body["html"]
+    assert body["size"] > 0
+
+
+def test_get_digest_404_for_missing_week(client_with_digests: TestClient) -> None:
+    r = client_with_digests.get("/api/digests/2099-W01")
+    assert r.status_code == 404
+
+
+def test_get_digest_400_for_malformed_isoweek(client_with_digests: TestClient) -> None:
+    r = client_with_digests.get("/api/digests/notaweek")
+    assert r.status_code == 400
+
+
+def test_path_traversal_isoweek_rejected(client_with_digests: TestClient) -> None:
+    # Anything that doesn't match YYYY-Www returns 400 before we touch
+    # the filesystem — closes off path traversal via crafted ISO weeks.
+    r = client_with_digests.get("/api/digests/..%2F..%2Fetc%2Fpasswd")
+    assert r.status_code in (400, 404)
diff --git a/tests/test_incident_emitter.py b/tests/test_incident_emitter.py
new file mode 100644
index 0000000..ccbdfc1
--- /dev/null
+++ b/tests/test_incident_emitter.py
@@ -0,0 +1,213 @@
+"""Tests for P3-T01 — auto-detected incident emission.
+
+Covers:
+- Slug determinism (and parity with the TS algorithm)
+- DuckDB upsert idempotency on the `incidents_auto` table
+- Webhook short-circuiting when env vars are missing
+- Webhook success path stamps `revalidated_at`
+- Soft-fail when the front-end returns 5xx (incident still persisted)
+"""
+from __future__ import annotations
+
+from datetime import UTC, datetime
+from pathlib import Path
+
+import httpx
+import pytest
+
+from server.services.incident_emitter import (
+    IncidentPayload,
+    emit_incident,
+    make_slug,
+    trigger_revalidate,
+    upsert_incident,
+)
+from server.store import Store
+
+
+# ---------- Slug determinism --------------------------------------------
+
+
+def test_slug_is_deterministic() -> None:
+    args = dict(
+        vessel_slug="antarctic-endurance",
+        event_type="ZONE_ENTERED",
+        zone_code="48.1",
+        detected_at=datetime(2026, 4, 28, 14, 0, tzinfo=UTC),
+    )
+    s1 = make_slug(**args)
+    s2 = make_slug(**args)
+    assert s1 == s2 == "2026-04-28-antarctic-endurance-zone-entered-48-1"
+
+
+def test_slug_kebabs_uppercase_and_punct() -> None:
+    s = make_slug(
+        vessel_slug="Long Da Yu 588",
+        event_type="AIS_GAP_OPENED",
+        zone_code=None,
+        detected_at=datetime(2026, 1, 5, tzinfo=UTC),
+    )
+    assert s == "2026-01-05-long-da-yu-588-ais-gap-opened"
+
+
+def test_slug_omits_zone_when_none() -> None:
+    s = make_slug(
+        vessel_slug="boat",
+        event_type="TRANSHIPMENT_DETECTED",
+        zone_code=None,
+        detected_at=datetime(2026, 4, 1, tzinfo=UTC),
+    )
+    assert s == "2026-04-01-boat-transhipment-detected"
+
+
+# ---------- Upsert ------------------------------------------------------
+
+
+def _payload(**overrides) -> IncidentPayload:
+    base = dict(
+        vessel_slug="antarctic-endurance",
+        vessel_name="Antarctic Endurance",
+        vessel_flag="NO",
+        event_type="ZONE_ENTERED",
+        zone_code="48.1",
+        severity="CRITICAL",
+        score=0.83,
+        position_lat=-53.96,
+        position_lon=-36.72,
+        detected_at=datetime(2026, 4, 28, 14, 0, tzinfo=UTC),
+        details={"k": "v"},
+        sources=[{"type": "AIS", "url": "https://example.org/p"}],
+    )
+    base.update(overrides)
+    return IncidentPayload(**base)
+
+
+def test_upsert_inserts_then_updates(tmp_path: Path) -> None:
+    store = Store(tmp_path / "i.duckdb")
+    try:
+        upsert_incident(store, _payload(severity="WATCH"))
+        upsert_incident(store, _payload(severity="CRITICAL"))  # same slug
+        rows = store.list_incidents_auto(limit=10)
+        assert len(rows) == 1
+        assert rows[0]["severity"] == "CRITICAL"
+        assert rows[0]["details"] == {"k": "v"}
+        assert rows[0]["sources"][0]["type"] == "AIS"
+    finally:
+        store.close()
+
+
+def test_upsert_rejects_unknown_event_type(tmp_path: Path) -> None:
+    store = Store(tmp_path / "i.duckdb")
+    try:
+        with pytest.raises(ValueError, match="unknown event_type"):
+            upsert_incident(store, _payload(event_type="NUCLEAR_LAUNCH"))
+    finally:
+        store.close()
+
+
+def test_get_incident_returns_none_for_missing(tmp_path: Path) -> None:
+    store = Store(tmp_path / "i.duckdb")
+    try:
+        assert store.get_incident_auto("does-not-exist") is None
+    finally:
+        store.close()
+
+
+def test_list_incidents_filters_by_vessel(tmp_path: Path) -> None:
+    store = Store(tmp_path / "i.duckdb")
+    try:
+        upsert_incident(store, _payload(vessel_slug="vessel-a", vessel_name="A"))
+        upsert_incident(
+            store,
+            _payload(
+                vessel_slug="vessel-b",
+                vessel_name="B",
+                event_type="AIS_GAP_OPENED",
+                zone_code=None,
+            ),
+        )
+        rows = store.list_incidents_auto(vessel="vessel-a")
+        assert len(rows) == 1
+        assert rows[0]["vessel_slug"] == "vessel-a"
+    finally:
+        store.close()
+
+
+# ---------- Webhook -----------------------------------------------------
+
+
+@pytest.mark.asyncio
+async def test_revalidate_skipped_when_env_missing(monkeypatch) -> None:
+    monkeypatch.delenv("NEXTJS_BASE_URL", raising=False)
+    monkeypatch.delenv("KRILL_REVALIDATE_SECRET", raising=False)
+    ok = await trigger_revalidate("any-slug")
+    assert ok is False
+
+
+@pytest.mark.asyncio
+async def test_revalidate_success(monkeypatch) -> None:
+    monkeypatch.setenv("NEXTJS_BASE_URL", "http://nextjs.test")
+    monkeypatch.setenv("KRILL_REVALIDATE_SECRET", "shh")
+
+    captured: dict = {}
+
+    def handler(request: httpx.Request) -> httpx.Response:
+        captured["url"] = str(request.url)
+        captured["body"] = request.content.decode()
+        return httpx.Response(200, json={"revalidated": True})
+
+    transport = httpx.MockTransport(handler)
+    async with httpx.AsyncClient(transport=transport) as cli:
+        ok = await trigger_revalidate("the-slug", client=cli)
+
+    assert ok is True
+    assert captured["url"] == "http://nextjs.test/api/revalidate"
+    assert "the-slug" in captured["body"]
+    assert "shh" in captured["body"]
+
+
+@pytest.mark.asyncio
+async def test_revalidate_returns_false_on_5xx(monkeypatch) -> None:
+    monkeypatch.setenv("NEXTJS_BASE_URL", "http://nextjs.test")
+    monkeypatch.setenv("KRILL_REVALIDATE_SECRET", "shh")
+
+    transport = httpx.MockTransport(lambda r: httpx.Response(500))
+    async with httpx.AsyncClient(transport=transport) as cli:
+        ok = await trigger_revalidate("x", client=cli)
+    assert ok is False
+
+
+@pytest.mark.asyncio
+async def test_emit_incident_persists_even_if_webhook_fails(
+    tmp_path: Path, monkeypatch
+) -> None:
+    monkeypatch.setenv("NEXTJS_BASE_URL", "http://nextjs.test")
+    monkeypatch.setenv("KRILL_REVALIDATE_SECRET", "shh")
+    transport = httpx.MockTransport(lambda r: httpx.Response(503))
+    store = Store(tmp_path / "i.duckdb")
+    try:
+        async with httpx.AsyncClient(transport=transport) as cli:
+            slug = await emit_incident(store, _payload(), client=cli)
+        row = store.get_incident_auto(slug)
+        assert row is not None
+        assert row["revalidated_at"] is None  # webhook failed → not stamped
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_emit_incident_stamps_revalidated_at_on_success(
+    tmp_path: Path, monkeypatch
+) -> None:
+    monkeypatch.setenv("NEXTJS_BASE_URL", "http://nextjs.test")
+    monkeypatch.setenv("KRILL_REVALIDATE_SECRET", "shh")
+    transport = httpx.MockTransport(lambda r: httpx.Response(200, json={"ok": 1}))
+    store = Store(tmp_path / "i.duckdb")
+    try:
+        async with httpx.AsyncClient(transport=transport) as cli:
+            slug = await emit_incident(store, _payload(), client=cli)
+        row = store.get_incident_auto(slug)
+        assert row is not None
+        assert row["revalidated_at"] is not None
+    finally:
+        store.close()
diff --git a/tests/test_positions_history.py b/tests/test_positions_history.py
new file mode 100644
index 0000000..ec9e8dd
--- /dev/null
+++ b/tests/test_positions_history.py
@@ -0,0 +1,183 @@
+"""Unit + integration tests for the positions-history service (P2-T01).
+
+The service builds the payload consumed by P2-T03's timeline scrubber and
+P2-T04's vessel-page trail. We verify three layers:
+
+* slug resolution and 404 behaviour
+* downsampling kicks in past the threshold
+* severity classification (CRITICAL inside an MPA, SUSPICIOUS on AIS gap)
+"""
+from __future__ import annotations
+
+import os
+from datetime import UTC, datetime, timedelta
+from pathlib import Path
+
+import pytest
+from fastapi.testclient import TestClient
+
+from server.services.positions_history import (
+    DOWNSAMPLE_THRESHOLD,
+    get_positions_history,
+)
+from server.store import Store
+from server.zones import ZoneIndex
+
+
+# ---------- Test fixtures ------------------------------------------------
+
+
+@pytest.fixture()
+def store(tmp_path: Path) -> Store:
+    db_path = tmp_path / "test.duckdb"
+    return Store(db_path)
+
+
+@pytest.fixture(scope="module")
+def zones() -> ZoneIndex:
+    # Production zones file — small enough to load in-process for tests.
+    return ZoneIndex()
+
+
+def _seed_status(store: Store, *, slug: str, mmsi: str, name: str = "Test Vessel") -> None:
+    """Minimal vessel_status row so the resolver can find the slug."""
+    store.upsert_status(
+        vessel_slug=slug,
+        vessel_name=name,
+        mmsi=mmsi,
+        imo=None,
+        flag="NO",
+        severity="NORMAL",
+        current_zones=[],
+        last_lat=None,
+        last_lon=None,
+        last_ts=None,
+    )
+
+
+def _seed_track(store: Store, mmsi: str, points: list[tuple[datetime, float, float]]) -> None:
+    for ts, lat, lon in points:
+        store.insert_position(
+            mmsi=mmsi, ts=ts, lat=lat, lon=lon, sog=None, cog=None
+        )
+
+
+# ---------- Tests --------------------------------------------------------
+
+
+def test_unknown_slug_returns_none(store: Store, zones: ZoneIndex) -> None:
+    """Service returns None when the slug isn't in vessel_status (caller -> 404)."""
+    result = get_positions_history(store=store, zones=zones, slug="ghost-vessel", days=7)
+    assert result is None
+
+
+def test_short_window_no_downsample(store: Store, zones: ZoneIndex) -> None:
+    """1 day, 24 hourly points -> raw, no downsample label."""
+    slug, mmsi = "test-short", "111000111"
+    _seed_status(store, slug=slug, mmsi=mmsi)
+    now = datetime.now(UTC)
+    points = [
+        (now - timedelta(hours=i), -54.0 - i * 0.1, -36.0)
+        for i in range(24)
+    ]
+    _seed_track(store, mmsi, points)
+
+    result = get_positions_history(
+        store=store, zones=zones, slug=slug, days=1, now=now
+    )
+    assert result is not None
+    assert result.downsample is None
+    # 24 points should fit (well under DOWNSAMPLE_THRESHOLD)
+    assert 1 <= len(result.positions) <= 24
+    assert result.range["days"] == 1
+
+
+def test_dense_track_triggers_downsample(store: Store, zones: ZoneIndex) -> None:
+    """Past the 1000-point threshold the service buckets to ``downsample`` minutes."""
+    slug, mmsi = "test-dense", "222000222"
+    _seed_status(store, slug=slug, mmsi=mmsi)
+    now = datetime.now(UTC)
+    # 30 days * 96 buckets/day (15 min) = 2880; insert one position every 5 min
+    # to simulate a >1000 raw track.
+    five_min = timedelta(minutes=5)
+    points = [
+        (now - five_min * i, -54.0, -36.0 - i * 0.001)
+        for i in range(2000)
+    ]
+    _seed_track(store, mmsi, points)
+
+    result = get_positions_history(
+        store=store, zones=zones, slug=slug, days=30, downsample_minutes=15, now=now
+    )
+    assert result is not None
+    assert result.downsample == "15min"
+    # 2000 raw points across ~166h => ~166*4 = 664 buckets at 15min
+    assert len(result.positions) <= DOWNSAMPLE_THRESHOLD + 200
+    assert len(result.positions) > 0
+
+
+def test_severity_inside_mpa_is_critical(store: Store, zones: ZoneIndex) -> None:
+    """A point inside any 'mpa'-category zone is tagged CRITICAL."""
+    slug, mmsi = "test-mpa", "333000333"
+    _seed_status(store, slug=slug, mmsi=mmsi)
+    # Find a known MPA polygon centroid so the test is deterministic
+    # regardless of which polygons ship.
+    mpa = next((z for z in zones.zones if z.category == "mpa"), None)
+    if mpa is None:
+        pytest.skip("no mpa-category zone in fixtures")
+    centroid = mpa.geometry.centroid
+    now = datetime.now(UTC)
+    _seed_track(store, mmsi, [(now - timedelta(hours=1), centroid.y, centroid.x)])
+
+    result = get_positions_history(store=store, zones=zones, slug=slug, days=1, now=now)
+    assert result is not None
+    assert any(p.severity == "CRITICAL" for p in result.positions)
+
+
+def test_severity_after_long_gap_is_suspicious(store: Store, zones: ZoneIndex) -> None:
+    """An open-water point reached after >6h of silence is flagged SUSPICIOUS."""
+    slug, mmsi = "test-gap", "444000444"
+    _seed_status(store, slug=slug, mmsi=mmsi)
+    now = datetime.now(UTC)
+    # Two points 8 hours apart in the open ocean (50 deg S, 0 deg E -> no zone)
+    _seed_track(
+        store,
+        mmsi,
+        [
+            (now - timedelta(hours=10), -50.0, 0.0),
+            (now - timedelta(hours=2), -50.0, 0.5),
+        ],
+    )
+
+    result = get_positions_history(store=store, zones=zones, slug=slug, days=1, now=now)
+    assert result is not None
+    # The second point should be SUSPICIOUS because the prior gap >= 6h and
+    # we're in open water (would otherwise be NORMAL).
+    if len(result.positions) >= 2:
+        last = result.positions[-1]
+        assert last.severity in ("SUSPICIOUS", "CRITICAL", "WATCH")
+        assert last.ais_gap_open is True
+
+
+# ---------- HTTP-level smoke (404 contract) -------------------------------
+
+
+@pytest.fixture(scope="module")
+def http_client(tmp_path_factory) -> TestClient:
+    db_path = tmp_path_factory.mktemp("krill") / "test.duckdb"
+    os.environ["DISABLE_WORKERS"] = "1"
+    os.environ["KRILL_DB_PATH"] = str(db_path)
+    from server.app import app
+
+    with TestClient(app) as c:
+        yield c
+
+
+def test_http_unknown_slug_404(http_client: TestClient) -> None:
+    r = http_client.get("/api/vessels/ghost-vessel/positions?days=7")
+    assert r.status_code == 404
+
+
+def test_http_invalid_days_422(http_client: TestClient) -> None:
+    r = http_client.get("/api/vessels/whatever/positions?days=999")
+    assert r.status_code == 422
diff --git a/tests/test_transhipment_emit.py b/tests/test_transhipment_emit.py
new file mode 100644
index 0000000..57f5059
--- /dev/null
+++ b/tests/test_transhipment_emit.py
@@ -0,0 +1,95 @@
+"""Tests for the transhipment → incident payload helper (P3-T07)."""
+from __future__ import annotations
+
+from datetime import UTC, datetime
+
+import pytest
+
+from server.services.incident_emitter import transhipment_incident_payload
+
+
+def test_below_threshold_returns_none() -> None:
+    assert (
+        transhipment_incident_payload(
+            {
+                "primary_vessel_slug": "v",
+                "primary_vessel_name": "V",
+                "score": 0.49,
+                "encounter_ts": datetime(2026, 4, 28, 14, 0, tzinfo=UTC),
+            }
+        )
+        is None
+    )
+
+
+def test_flagged_score_emits_suspicious() -> None:
+    p = transhipment_incident_payload(
+        {
+            "primary_vessel_slug": "long_da_yu",
+            "primary_vessel_name": "Long Da Yu",
+            "primary_vessel_flag": "CN",
+            "score": 0.62,
+            "encounter_lat": -45.0,
+            "encounter_lon": -50.0,
+            "encounter_ts": datetime(2026, 3, 5, 10, 30, tzinfo=UTC),
+            "partner_slug": "reefer_x",
+            "partner_name": "Reefer X",
+        }
+    )
+    assert p is not None
+    assert p.event_type == "TRANSHIPMENT_DETECTED"
+    assert p.severity == "SUSPICIOUS"
+    assert p.score == pytest.approx(0.62)
+    assert p.position_lat == -45.0
+    assert p.details and p.details["partner_slug"] == "reefer_x"
+
+
+def test_critical_score_emits_critical() -> None:
+    p = transhipment_incident_payload(
+        {
+            "primary_vessel_slug": "v",
+            "primary_vessel_name": "V",
+            "score": 0.78,
+            "encounter_ts": datetime(2026, 1, 1, tzinfo=UTC),
+        }
+    )
+    assert p is not None
+    assert p.severity == "CRITICAL"
+
+
+def test_missing_vessel_returns_none() -> None:
+    p = transhipment_incident_payload(
+        {
+            "score": 0.85,
+            "encounter_ts": datetime(2026, 1, 1, tzinfo=UTC),
+        }
+    )
+    assert p is None
+
+
+def test_iso_string_ts_is_parsed() -> None:
+    p = transhipment_incident_payload(
+        {
+            "primary_vessel_slug": "v",
+            "primary_vessel_name": "V",
+            "score": 0.6,
+            "encounter_ts": "2026-04-28T14:00:00Z",
+        }
+    )
+    assert p is not None
+    assert p.detected_at == datetime(2026, 4, 28, 14, 0, tzinfo=UTC)
+
+
+def test_default_sources_attached() -> None:
+    p = transhipment_incident_payload(
+        {
+            "primary_vessel_slug": "v",
+            "primary_vessel_name": "V",
+            "score": 0.6,
+            "encounter_ts": datetime(2026, 1, 1, tzinfo=UTC),
+        }
+    )
+    assert p is not None
+    urls = [s["url"] for s in (p.sources or [])]
+    assert any("globalfishingwatch" in u for u in urls)
+    assert any("aisstream" in u for u in urls)
diff --git a/tests/test_zone_monitor_emit.py b/tests/test_zone_monitor_emit.py
new file mode 100644
index 0000000..a9f2430
--- /dev/null
+++ b/tests/test_zone_monitor_emit.py
@@ -0,0 +1,210 @@
+"""Tests for the zone-monitor → incident emitter wiring (P3-T07)."""
+from __future__ import annotations
+
+from datetime import UTC, datetime
+from pathlib import Path
+from unittest.mock import AsyncMock, patch
+
+import pytest
+from shapely.geometry import Polygon
+
+from src.vessel_db import Vessel
+
+from server.store import Store
+from server.workers import _process_position
+from server.zones import Zone, ZoneIndex
+
+
+def _zone_index(*zones: Zone) -> ZoneIndex:
+    """Build an in-memory ZoneIndex without re-reading the GeoJSON file."""
+    idx = ZoneIndex.__new__(ZoneIndex)
+    idx.zones = list(zones)
+    return idx
+
+
+def _vessel(slug: str = "antarctic_endurance") -> Vessel:
+    return Vessel(
+        name=slug.replace("_", " ").title(),
+        mmsi="257100000",
+        imo="9806079",
+        flag="NO",
+        operator="Aker BioMarine",
+        category="krill_fishing",
+        mission="krill",
+        friendly=False,
+    )
+
+
+def _antarctic_polygon() -> Polygon:
+    """Square polygon roughly around 60°S/-50°W. Enough to contain
+    the test position at (-60, -50) and not much else."""
+    return Polygon(
+        [(-55, -65), (-45, -65), (-45, -55), (-55, -55), (-55, -65)]
+    )
+
+
+@pytest.mark.asyncio
+async def test_zone_entered_in_mpa_emits_incident(tmp_path: Path) -> None:
+    store = Store(tmp_path / "z.duckdb")
+    try:
+        mpa = Zone(
+            id="D1MPA",
+            name="Domain 1 MPA",
+            category="mpa",
+            geometry=_antarctic_polygon(),
+        )
+        zones = _zone_index(mpa)
+        vessel = _vessel()
+        ts = datetime(2026, 4, 28, 14, 0, tzinfo=UTC)
+
+        with patch(
+            "server.workers._emit_incident_safe",
+            new_callable=AsyncMock,
+        ) as mock_emit:
+            await _process_position(
+                vessel=vessel,
+                ts=ts,
+                lat=-60.0,
+                lon=-50.0,
+                sog=5.0,
+                cog=180.0,
+                raw={},
+                store=store,
+                zones=zones,
+                bus=None,
+            )
+
+        assert mock_emit.call_count == 1
+        payload = mock_emit.call_args.args[1]
+        assert payload.event_type == "ZONE_ENTERED"
+        assert payload.zone_code == "D1MPA"
+        assert payload.severity == "CRITICAL"
+        assert payload.vessel_slug == "antarctic_endurance"
+        assert payload.position_lat == -60.0
+        assert payload.position_lon == -50.0
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_zone_entered_in_fishery_subarea_skipped(tmp_path: Path) -> None:
+    store = Store(tmp_path / "z.duckdb")
+    try:
+        # Fishery subareas are noisy and not flagged as incidents
+        # (krill vessels live in them).
+        sub = Zone(
+            id="48.1",
+            name="CCAMLR 48.1",
+            category="fishery_subarea",
+            geometry=_antarctic_polygon(),
+        )
+        zones = _zone_index(sub)
+        vessel = _vessel()
+        ts = datetime(2026, 4, 28, 14, 0, tzinfo=UTC)
+
+        with patch(
+            "server.workers._emit_incident_safe",
+            new_callable=AsyncMock,
+        ) as mock_emit:
+            await _process_position(
+                vessel=vessel,
+                ts=ts,
+                lat=-60.0,
+                lon=-50.0,
+                sog=5.0,
+                cog=180.0,
+                raw={},
+                store=store,
+                zones=zones,
+                bus=None,
+            )
+
+        assert mock_emit.call_count == 0
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_friendly_vessel_in_mpa_skipped(tmp_path: Path) -> None:
+    store = Store(tmp_path / "z.duckdb")
+    try:
+        mpa = Zone(
+            id="D1MPA",
+            name="Domain 1 MPA",
+            category="mpa",
+            geometry=_antarctic_polygon(),
+        )
+        zones = _zone_index(mpa)
+        vessel = Vessel(
+            name="Sea Shepherd",
+            mmsi="338100000",
+            imo="9999999",
+            flag="CPWF",
+            operator="CPWF",
+            category="ngo",
+            mission="krill",
+            friendly=True,
+        )
+        ts = datetime(2026, 4, 28, 14, 0, tzinfo=UTC)
+
+        with patch(
+            "server.workers._emit_incident_safe",
+            new_callable=AsyncMock,
+        ) as mock_emit:
+            await _process_position(
+                vessel=vessel,
+                ts=ts,
+                lat=-60.0,
+                lon=-50.0,
+                sog=5.0,
+                cog=180.0,
+                raw={},
+                store=store,
+                zones=zones,
+                bus=None,
+            )
+
+        # Friendly vessels short-circuit to severity=CPWF, which is
+        # outside the {CRITICAL, SUSPICIOUS, WATCH} set, so no incident.
+        assert mock_emit.call_count == 0
+    finally:
+        store.close()
+
+
+@pytest.mark.asyncio
+async def test_idempotent_repeat_position_does_not_re_emit(tmp_path: Path) -> None:
+    """Two ticks of the same position only count as ONE entry — the
+    second tick is a no-op because the vessel is still in the zone."""
+    store = Store(tmp_path / "z.duckdb")
+    try:
+        mpa = Zone(
+            id="D1MPA",
+            name="Domain 1 MPA",
+            category="mpa",
+            geometry=_antarctic_polygon(),
+        )
+        zones = _zone_index(mpa)
+        vessel = _vessel()
+
+        with patch(
+            "server.workers._emit_incident_safe",
+            new_callable=AsyncMock,
+        ) as mock_emit:
+            for i in range(3):
+                await _process_position(
+                    vessel=vessel,
+                    ts=datetime(2026, 4, 28, 14, i, tzinfo=UTC),
+                    lat=-60.0,
+                    lon=-50.0,
+                    sog=5.0,
+                    cog=180.0,
+                    raw={},
+                    store=store,
+                    zones=zones,
+                    bus=None,
+                )
+
+        # Only the first tick triggers the entry event + the emit.
+        assert mock_emit.call_count == 1
+    finally:
+        store.close()
diff --git a/web/.env.example b/web/.env.example
index af21235..f13dc80 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -8,3 +8,9 @@
 #   NEXT_PUBLIC_KRILL_WATCH_API=https://krill-watch.fly.dev
 #   NEXT_PUBLIC_KRILL_WATCH_API=http://localhost:8000
 NEXT_PUBLIC_KRILL_WATCH_API=
+
+# Server-only — shared secret for the FastAPI → Next.js webhook that
+# revalidates auto-generated /incident/<slug> ISR pages (P3-T01).
+# Must match KRILL_REVALIDATE_SECRET in the Python `.env`. Never expose
+# this to the browser; only the /api/revalidate route reads it.
+KRILL_REVALIDATE_SECRET=
diff --git a/web/app/[locale]/campagnes/[slug]/page.tsx b/web/app/[locale]/campagnes/[slug]/page.tsx
new file mode 100644
index 0000000..46e564c
--- /dev/null
+++ b/web/app/[locale]/campagnes/[slug]/page.tsx
@@ -0,0 +1,222 @@
+import { notFound } from "next/navigation";
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import { isLocale, type Locale } from "@/lib/i18n";
+import {
+  CAMPAIGN_SLUGS,
+  isCampaignSlug,
+  type CampaignSlug,
+} from "@/lib/campaigns";
+import { CampaignHero } from "@/components/campaign/CampaignHero";
+import { CampaignLegalFrame } from "@/components/campaign/CampaignLegalFrame";
+import { CampaignFleetList } from "@/components/campaign/CampaignFleetList";
+import { CampaignTimeline } from "@/components/campaign/CampaignTimeline";
+import { CampaignSeasonCalendar } from "@/components/campaign/CampaignSeasonCalendar";
+import {
+  CampaignSourcesList,
+} from "@/components/campaign/CampaignSourcesList";
+import { ShareButton } from "@/components/share/ShareButton";
+import { SupportCTA } from "@/components/SupportCTA";
+import { buildShareTitle } from "@/lib/share-urls";
+
+export const revalidate = 300;
+
+export async function generateStaticParams() {
+  return CAMPAIGN_SLUGS.flatMap((slug) =>
+    ["fr", "en"].map((locale) => ({ slug, locale })),
+  );
+}
+
+type CampaignCopy = {
+  tag: string;
+  title: string;
+  titleAccent?: string | null;
+  lead: string;
+  metric1Label?: string;
+  metric1Value?: string;
+  metric2Label?: string;
+  metric2Value?: string;
+  metric3Label?: string;
+  metric3Value?: string;
+  legalHeading: string;
+  legalBody: string;
+  seasonMonths?: number[];
+  seasonCaption?: string;
+  sources: { label: string; url: string; note?: string }[];
+};
+
+// Tiny inline parser for the placeholder YAML-frontmatter MDs delivered by
+// this task. Real markdown rendering + a proper frontmatter library land
+// with P2-T06; for now we only need scalar string fields, an int list,
+// and a list of {label,url} pairs. Keeping the parser inline avoids
+// pulling gray-matter/remark before they're really needed.
+function parseFrontmatter(raw: string): Record<string, unknown> {
+  const m = raw.match(/^---\s*\n([\s\S]*?)\n---/);
+  if (!m) return {};
+  const out: Record<string, unknown> = {};
+  const lines = m[1].split(/\r?\n/);
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (!line.trim() || line.trim().startsWith("#")) {
+      i++;
+      continue;
+    }
+    const kv = line.match(/^([a-zA-Z0-9_]+)\s*:\s*(.*)$/);
+    if (!kv) {
+      i++;
+      continue;
+    }
+    const [, key, rawValue] = kv;
+    const value = rawValue.trim();
+    if (value === "") {
+      // Possibly a YAML list following on indented `-` lines.
+      const items: Record<string, unknown>[] = [];
+      let j = i + 1;
+      while (j < lines.length && /^\s+- /.test(lines[j])) {
+        const itemFirst = lines[j].replace(/^\s+- /, "").trim();
+        const item: Record<string, unknown> = {};
+        if (itemFirst.includes(":")) {
+          const [k1, v1] = itemFirst.split(":");
+          item[k1.trim()] = v1.trim();
+        }
+        let k = j + 1;
+        while (k < lines.length && /^\s{4,}[a-zA-Z]/.test(lines[k])) {
+          const sub = lines[k].trim().match(/^([a-zA-Z0-9_]+)\s*:\s*(.*)$/);
+          if (sub) item[sub[1]] = sub[2].trim();
+          k++;
+        }
+        items.push(item);
+        j = k;
+      }
+      out[key] = items;
+      i = j;
+      continue;
+    }
+    if (/^[\d,\s]+$/.test(value)) {
+      out[key] = value
+        .split(",")
+        .map((s) => parseInt(s.trim(), 10))
+        .filter((n) => Number.isFinite(n));
+    } else {
+      out[key] = value.replace(/^"(.*)"$/, "$1");
+    }
+    i++;
+  }
+  return out;
+}
+
+async function loadCampaignCopy(slug: CampaignSlug, locale: Locale): Promise<CampaignCopy> {
+  const file = path.join(
+    process.cwd(),
+    "data",
+    "campaigns",
+    `${slug}.${locale}.md`,
+  );
+  // Next.js uses cwd = web/, so the absolute path is web/data/campaigns/...
+  const absolute = path.join(process.cwd(), "data", "campaigns", `${slug}.${locale}.md`);
+  void file;
+  let raw = "";
+  try {
+    raw = await fs.readFile(absolute, "utf8");
+  } catch {
+    raw = "";
+  }
+  const fm = parseFrontmatter(raw);
+  return {
+    tag: String(fm.tag ?? ""),
+    title: String(fm.title ?? ""),
+    titleAccent: (fm.titleAccent as string) ?? null,
+    lead: String(fm.lead ?? ""),
+    metric1Label: fm.metric1Label as string | undefined,
+    metric1Value: fm.metric1Value as string | undefined,
+    metric2Label: fm.metric2Label as string | undefined,
+    metric2Value: fm.metric2Value as string | undefined,
+    metric3Label: fm.metric3Label as string | undefined,
+    metric3Value: fm.metric3Value as string | undefined,
+    legalHeading: String(fm.legalHeading ?? ""),
+    legalBody: String(fm.legalBody ?? ""),
+    seasonMonths: Array.isArray(fm.seasonMonths)
+      ? (fm.seasonMonths as number[])
+      : undefined,
+    seasonCaption: (fm.seasonCaption as string) ?? undefined,
+    sources: Array.isArray(fm.sources)
+      ? (fm.sources as { label: string; url: string; note?: string }[])
+      : [],
+  };
+}
+
+export default async function CampaignHubPage({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug } = await params;
+  if (!isLocale(locale)) notFound();
+  if (!isCampaignSlug(slug)) notFound();
+  const typedLocale: Locale = locale;
+  const typedSlug: CampaignSlug = slug;
+
+  const copy = await loadCampaignCopy(typedSlug, typedLocale);
+  const heroCopy = {
+    tag: copy.tag,
+    title: copy.title,
+    titleAccent: copy.titleAccent,
+    lead: copy.lead,
+    metric1:
+      copy.metric1Label && copy.metric1Value
+        ? { label: copy.metric1Label, value: copy.metric1Value }
+        : null,
+    metric2:
+      copy.metric2Label && copy.metric2Value
+        ? { label: copy.metric2Label, value: copy.metric2Value }
+        : null,
+    metric3:
+      copy.metric3Label && copy.metric3Value
+        ? { label: copy.metric3Label, value: copy.metric3Value }
+        : null,
+  };
+
+  const siteOrigin = (
+    process.env.NEXT_PUBLIC_SITE_URL ?? "https://krill-watch.org"
+  ).replace(/\/+$/, "");
+  const campaignName = (heroCopy.titleAccent
+    ? `${heroCopy.title} ${heroCopy.titleAccent}`
+    : heroCopy.title
+  ).trim();
+  const shareContext = {
+    kind: "campaign" as const,
+    slug: typedSlug,
+    url: `${siteOrigin}/${typedLocale}/campagnes/${typedSlug}`,
+    title: buildShareTitle(
+      { kind: "campaign", campaignName },
+      typedLocale,
+    ),
+  };
+
+  return (
+    <>
+      <CampaignHero slug={typedSlug} locale={typedLocale} copy={heroCopy} />
+      <div className="px-5 max-w-6xl mx-auto -mt-4 flex justify-end">
+        <ShareButton context={shareContext} locale={typedLocale} variant="ghost" />
+      </div>
+      <CampaignLegalFrame
+        locale={typedLocale}
+        heading={copy.legalHeading}
+        body={copy.legalBody}
+      />
+      <CampaignFleetList slug={typedSlug} locale={typedLocale} />
+      <CampaignTimeline slug={typedSlug} locale={typedLocale} />
+      <CampaignSeasonCalendar
+        slug={typedSlug}
+        locale={typedLocale}
+        activeMonths={copy.seasonMonths}
+        caption={copy.seasonCaption}
+      />
+      <CampaignSourcesList locale={typedLocale} sources={copy.sources} />
+      <div className="px-5 max-w-6xl mx-auto py-12">
+        <SupportCTA variant="banner" locale={typedLocale} />
+      </div>
+    </>
+  );
+}
diff --git a/web/app/[locale]/campagnes/page.tsx b/web/app/[locale]/campagnes/page.tsx
new file mode 100644
index 0000000..31485f5
--- /dev/null
+++ b/web/app/[locale]/campagnes/page.tsx
@@ -0,0 +1,74 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { isLocale, type Locale } from "@/lib/i18n";
+import { CAMPAIGNS, CAMPAIGN_SLUGS } from "@/lib/campaigns";
+
+export const revalidate = 600;
+
+const STRINGS = {
+  fr: {
+    title: "Quatre campagnes suivies",
+    lead: "Les hubs OSINT par mission CPWF — preuves, flotte, calendrier, sources.",
+    krill: { tag: "CCAMLR", title: "Krill antarctique" },
+    whaling: { tag: "IWC", title: "Chasse à la baleine" },
+    galapagos: { tag: "INN", title: "Galápagos" },
+    "west-africa": { tag: "INN", title: "Afrique de l'Ouest" },
+    open: "Ouvrir le hub →",
+  },
+  en: {
+    title: "Four campaigns tracked",
+    lead: "OSINT hubs per CPWF mission — evidence, fleet, calendar, sources.",
+    krill: { tag: "CCAMLR", title: "Antarctic krill" },
+    whaling: { tag: "IWC", title: "Commercial whaling" },
+    galapagos: { tag: "IUU", title: "Galápagos" },
+    "west-africa": { tag: "IUU", title: "West Africa" },
+    open: "Open hub →",
+  },
+} as const;
+
+export default async function CampaignsIndexPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  if (!isLocale(locale)) notFound();
+  const typed: Locale = locale;
+  const t = STRINGS[typed];
+
+  return (
+    <section className="px-5 py-20 max-w-6xl mx-auto">
+      <h1 className="text-4xl md:text-5xl font-bold leading-[1.05] mb-3">{t.title}</h1>
+      <p className="text-[color:var(--color-text-muted)] max-w-3xl mb-10">{t.lead}</p>
+      <ul className="grid gap-4 md:grid-cols-2">
+        {CAMPAIGN_SLUGS.map((slug) => {
+          const c = CAMPAIGNS[slug];
+          const meta = t[slug];
+          return (
+            <li key={slug}>
+              <Link
+                href={`/${typed}/campagnes/${slug}`}
+                className="block rounded-xl border border-[color:var(--color-border)] hover:border-[color:var(--color-accent)] p-6 transition-colors"
+                style={{ background: c.bgGradient }}
+              >
+                <p
+                  className="text-[0.65rem] font-mono uppercase tracking-[0.16em] mb-2"
+                  style={{ color: c.primaryColor }}
+                >
+                  {meta.tag}
+                </p>
+                <h2 className="text-2xl font-bold mb-3">{meta.title}</h2>
+                <span
+                  className="inline-flex items-center gap-1 text-xs font-mono uppercase tracking-wider"
+                  style={{ color: c.primaryColor }}
+                >
+                  {t.open}
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
diff --git a/web/app/[locale]/contribuer/page.tsx b/web/app/[locale]/contribuer/page.tsx
new file mode 100644
index 0000000..379ee0e
--- /dev/null
+++ b/web/app/[locale]/contribuer/page.tsx
@@ -0,0 +1,79 @@
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { isLocale, type Locale } from "@/lib/i18n";
+import { ContributionForm } from "@/components/contribute/ContributionForm";
+
+const STRINGS = {
+  fr: {
+    title: "Contribuer",
+    lead:
+      "Vous avez observé un comportement suspect — un navire en zone protégée, un transbordement, une coupure AIS — ou vous avez un témoignage à partager ? Soumettez votre signalement ci-dessous. Nous le passerons en revue dans les sept jours.",
+    privacy:
+      "Privacy : nous ne stockons que ce que vous saisissez. Si vous fournissez un email, il reste interne (jamais publié). Aucun cookie de tracking, aucune analytics tierce.",
+    limits:
+      "Limites : krill-watch publie de l'OSINT, pas des verdicts. Avant publication, chaque contribution est recoupée avec d'autres sources publiques. Les contributions abusives ou diffamatoires sont rejetées.",
+  },
+  en: {
+    title: "Contribute",
+    lead:
+      "Spotted suspicious behaviour — a vessel in a protected area, a transhipment, an AIS gap — or have a testimony to share? Submit your report below. We'll review it within seven days.",
+    privacy:
+      "Privacy: we only store what you enter. If you provide an email, it stays internal (never published). No tracking cookies, no third-party analytics.",
+    limits:
+      "Limits: krill-watch publishes OSINT, not verdicts. Before publication, every contribution is cross-checked against other public sources. Abusive or defamatory submissions are discarded.",
+  },
+} as const;
+
+export const dynamic = "force-static";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  if (!isLocale(locale)) return {};
+  const t = STRINGS[locale];
+  return {
+    title: `${t.title} · krill-watch`,
+    description: t.lead.slice(0, 200),
+    alternates: {
+      canonical: `/${locale}/contribuer`,
+      languages: {
+        fr: "/fr/contribuer",
+        en: "/en/contribuer",
+      },
+    },
+  };
+}
+
+export default async function ContributePage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  if (!isLocale(locale)) notFound();
+  const typed: Locale = locale;
+  const t = STRINGS[typed];
+
+  return (
+    <article className="px-5 py-12 max-w-3xl mx-auto">
+      <header className="mb-10">
+        <h1 className="text-3xl md:text-5xl font-bold tracking-tight mb-4">
+          {t.title}
+        </h1>
+        <p className="text-lg text-[color:var(--color-text-muted)] leading-relaxed">
+          {t.lead}
+        </p>
+      </header>
+
+      <ContributionForm locale={typed} />
+
+      <aside className="mt-12 grid gap-4 text-xs text-[color:var(--color-text-muted)]">
+        <p>{t.privacy}</p>
+        <p>{t.limits}</p>
+      </aside>
+    </article>
+  );
+}
diff --git a/web/app/[locale]/digest/[isoweek]/page.tsx b/web/app/[locale]/digest/[isoweek]/page.tsx
new file mode 100644
index 0000000..f15c23e
--- /dev/null
+++ b/web/app/[locale]/digest/[isoweek]/page.tsx
@@ -0,0 +1,106 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { isLocale, type Locale } from "@/lib/i18n";
+import {
+  fetchDigest,
+  fetchDigestList,
+  isoWeekRange,
+  scrubDigestHtml,
+} from "@/lib/digests";
+
+export const revalidate = 3600;
+export const dynamicParams = true;
+
+const STRINGS = {
+  fr: {
+    backLink: "← Retour à l'index des digests",
+    notFound: "Digest introuvable",
+    headline: "Digest hebdo",
+    generated: "Généré le",
+  },
+  en: {
+    backLink: "← Back to digest index",
+    notFound: "Digest not found",
+    headline: "Weekly digest",
+    generated: "Generated on",
+  },
+} as const;
+
+type RouteParams = { locale: string; isoweek: string };
+
+export async function generateStaticParams() {
+  const list = await fetchDigestList(50);
+  return list.flatMap((d) =>
+    (["fr", "en"] as const).map((locale) => ({
+      locale,
+      isoweek: d.isoweek,
+    })),
+  );
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<RouteParams>;
+}): Promise<Metadata> {
+  const { locale, isoweek } = await params;
+  if (!isLocale(locale)) return {};
+  const t = STRINGS[locale];
+  return {
+    title: `${t.headline} · ${isoweek} · krill-watch`,
+    alternates: {
+      canonical: `/${locale}/digest/${isoweek}`,
+      languages: {
+        fr: `/fr/digest/${isoweek}`,
+        en: `/en/digest/${isoweek}`,
+      },
+    },
+  };
+}
+
+export default async function DigestDetailPage({
+  params,
+}: {
+  params: Promise<RouteParams>;
+}) {
+  const { locale, isoweek } = await params;
+  if (!isLocale(locale)) notFound();
+  const typed: Locale = locale;
+  const t = STRINGS[typed];
+  const digest = await fetchDigest(isoweek);
+  if (!digest) notFound();
+
+  const range = isoWeekRange(digest.isoweek, typed);
+  const generatedDate = digest.generatedAt.slice(0, 10);
+  const safeHtml = scrubDigestHtml(digest.html);
+
+  return (
+    <article className="px-5 py-12 max-w-4xl mx-auto">
+      <Link
+        href={`/${typed}/digest`}
+        className="text-sm font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] hover:text-[color:var(--color-accent)]"
+      >
+        {t.backLink}
+      </Link>
+
+      <header className="mt-6 mb-8">
+        <div className="text-xs font-mono uppercase tracking-[0.2em] text-[color:var(--color-text-muted)]">
+          {t.headline} · {digest.isoweek}{" "}
+          <span className="normal-case tracking-normal">({range})</span>
+        </div>
+        <h1 className="text-3xl md:text-4xl font-bold tracking-tight mt-2">
+          {t.headline} {digest.isoweek}
+        </h1>
+        <p className="text-sm text-[color:var(--color-text-muted)] mt-2">
+          {t.generated} {generatedDate}
+        </p>
+      </header>
+
+      <div
+        className="digest-body prose prose-invert max-w-none rounded-2xl border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-6"
+        dangerouslySetInnerHTML={{ __html: safeHtml }}
+      />
+    </article>
+  );
+}
diff --git a/web/app/[locale]/digest/page.tsx b/web/app/[locale]/digest/page.tsx
new file mode 100644
index 0000000..83cab22
--- /dev/null
+++ b/web/app/[locale]/digest/page.tsx
@@ -0,0 +1,115 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { isLocale, type Locale } from "@/lib/i18n";
+import {
+  fetchDigestList,
+  formatBytes,
+  isoWeekRange,
+} from "@/lib/digests";
+
+export const revalidate = 600;
+
+const STRINGS = {
+  fr: {
+    title: "Digests hebdo",
+    lead: "Synthèses hebdomadaires des transbordements suspects, générées chaque semaine par le pipeline de revue. Toutes les semaines sont stables et reproductibles depuis le code.",
+    empty:
+      "Aucun digest disponible pour l'instant. Les premières publications hebdomadaires seront listées ici.",
+    sizeLabel: "Taille",
+    generatedLabel: "Généré le",
+  },
+  en: {
+    title: "Weekly digests",
+    lead: "Weekly summaries of suspected transhipments, generated each week by the review pipeline. Every week is stable and reproducible from code.",
+    empty:
+      "No digest available yet. The first weekly publications will appear here.",
+    sizeLabel: "Size",
+    generatedLabel: "Generated on",
+  },
+} as const;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  if (!isLocale(locale)) return {};
+  const t = STRINGS[locale];
+  return {
+    title: `${t.title} · krill-watch`,
+    description: t.lead,
+    alternates: {
+      canonical: `/${locale}/digest`,
+      languages: {
+        fr: "/fr/digest",
+        en: "/en/digest",
+      },
+    },
+  };
+}
+
+export default async function DigestIndexPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  if (!isLocale(locale)) notFound();
+  const typed: Locale = locale;
+  const t = STRINGS[typed];
+  const digests = await fetchDigestList(50);
+
+  return (
+    <article className="px-5 py-12 max-w-3xl mx-auto">
+      <header className="mb-10">
+        <h1 className="text-3xl md:text-5xl font-bold tracking-tight mb-4">
+          {t.title}
+        </h1>
+        <p className="text-lg text-[color:var(--color-text-muted)] leading-relaxed">
+          {t.lead}
+        </p>
+      </header>
+
+      {digests.length === 0 ? (
+        <p className="rounded-2xl border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-6 text-sm text-[color:var(--color-text-muted)]">
+          {t.empty}
+        </p>
+      ) : (
+        <ul className="space-y-3">
+          {digests.map((d) => {
+            const range = isoWeekRange(d.isoweek, typed);
+            const date = d.generatedAt.slice(0, 10);
+            return (
+              <li key={d.isoweek}>
+                <Link
+                  href={`/${typed}/digest/${d.isoweek}`}
+                  className="group flex items-center justify-between gap-4 rounded-xl border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-5 py-4 hover:border-[color:var(--color-accent)]"
+                >
+                  <div>
+                    <div className="font-mono text-sm uppercase tracking-wider">
+                      {d.isoweek}
+                      <span className="text-[color:var(--color-text-muted)] ml-2 normal-case tracking-normal">
+                        ({range})
+                      </span>
+                    </div>
+                    <div className="text-xs text-[color:var(--color-text-muted)] mt-1">
+                      {t.generatedLabel} {date} · {t.sizeLabel} {formatBytes(d.size)}
+                    </div>
+                  </div>
+                  <span
+                    aria-hidden
+                    className="text-[color:var(--color-text-muted)] group-hover:text-[color:var(--color-accent)] transition-colors"
+                  >
+                    →
+                  </span>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </article>
+  );
+}
diff --git a/web/app/[locale]/incident/[slug]/IncidentContext.tsx b/web/app/[locale]/incident/[slug]/IncidentContext.tsx
new file mode 100644
index 0000000..5e450b6
--- /dev/null
+++ b/web/app/[locale]/incident/[slug]/IncidentContext.tsx
@@ -0,0 +1,109 @@
+import Link from "next/link";
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import type { CampaignSlug } from "@/lib/campaigns";
+import type { Locale } from "@/lib/i18n";
+
+type Props = {
+  campaignSlug: CampaignSlug | null;
+  locale: Locale;
+};
+
+const STRINGS = {
+  fr: {
+    heading: "Contexte campagne",
+    cta: "→ Voir la campagne complète",
+    empty:
+      "Aucun hub de campagne ne couvre encore ce navire — l'incident reste lié à la fiche navire.",
+  },
+  en: {
+    heading: "Campaign context",
+    cta: "→ Read the full campaign",
+    empty:
+      "No campaign hub covers this vessel yet — the incident links back to the vessel page only.",
+  },
+} as const;
+
+const SECTION_PATTERNS: Record<Locale, RegExp[]> = {
+  fr: [
+    /^##?\s*Pourquoi krill-watch suit cette campagne[\s\S]+?(?=\n##\s|\n# |$)/im,
+    /^##?\s*Pourquoi[\s\S]+?(?=\n##\s|\n# |$)/im,
+  ],
+  en: [
+    /^##?\s*Why krill-watch tracks this campaign[\s\S]+?(?=\n##\s|\n# |$)/im,
+    /^##?\s*Why[\s\S]+?(?=\n##\s|\n# |$)/im,
+  ],
+};
+
+async function loadCampaignBlurb(
+  slug: CampaignSlug,
+  locale: Locale,
+): Promise<string | null> {
+  const file = path.join(
+    process.cwd(),
+    "data",
+    "campaigns",
+    `${slug}.${locale}.md`,
+  );
+  let raw: string;
+  try {
+    raw = await fs.readFile(file, "utf8");
+  } catch {
+    return null;
+  }
+  // Strip frontmatter so it never leaks into the public copy.
+  const body = raw.replace(/^---[\s\S]+?---\s*/m, "");
+  for (const re of SECTION_PATTERNS[locale]) {
+    const m = body.match(re);
+    if (m) return truncateWords(stripHeading(m[0]), 80);
+  }
+  // Fallback: first non-empty paragraph from the body.
+  const para = body
+    .split(/\n\s*\n/)
+    .map((p) => p.trim())
+    .find((p) => p.length > 40 && !p.startsWith("#"));
+  return para ? truncateWords(para, 80) : null;
+}
+
+function stripHeading(section: string): string {
+  return section.replace(/^##?\s*[^\n]+\n/, "").trim();
+}
+
+function truncateWords(text: string, words: number): string {
+  const tokens = text.split(/\s+/);
+  if (tokens.length <= words) return text;
+  return `${tokens.slice(0, words).join(" ")}…`;
+}
+
+export async function IncidentContext({ campaignSlug, locale }: Props) {
+  const t = STRINGS[locale];
+  if (!campaignSlug) {
+    return (
+      <section className="rounded-2xl border border-[color:var(--color-border)] p-6 bg-[color:var(--color-surface)]">
+        <h2 className="text-lg font-bold tracking-tight mb-2">{t.heading}</h2>
+        <p className="text-sm text-[color:var(--color-text-muted)]">{t.empty}</p>
+      </section>
+    );
+  }
+
+  const blurb = await loadCampaignBlurb(campaignSlug, locale);
+
+  return (
+    <section className="rounded-2xl border border-[color:var(--color-border)] p-6 bg-[color:var(--color-surface)]">
+      <h2 className="text-lg font-bold tracking-tight mb-3">{t.heading}</h2>
+      {blurb && (
+        <p className="text-sm leading-relaxed mb-4 text-[color:var(--color-text)]">
+          {blurb}
+        </p>
+      )}
+      <Link
+        href={`/${locale}/campagnes/${campaignSlug}`}
+        className="inline-block text-sm font-mono uppercase tracking-wider text-[color:var(--color-accent)] hover:underline"
+      >
+        {t.cta}
+      </Link>
+    </section>
+  );
+}
+
+export default IncidentContext;
diff --git a/web/app/[locale]/incident/[slug]/IncidentMap.tsx b/web/app/[locale]/incident/[slug]/IncidentMap.tsx
new file mode 100644
index 0000000..3336792
--- /dev/null
+++ b/web/app/[locale]/incident/[slug]/IncidentMap.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import * as React from "react";
+import type { Map as MaplibreMap } from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { VesselTrail } from "@/components/map/VesselTrail";
+import { useVesselHistory } from "@/lib/use-vessel-history";
+import type { Locale } from "@/lib/i18n";
+
+const BASEMAP_DARK_URL =
+  "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
+
+type Props = {
+  vesselSlug: string;
+  apiBase: string;
+  position: { lat: number; lon: number } | null;
+  detectedAt: string;
+  severity: "CRITICAL" | "SUSPICIOUS" | "WATCH";
+  locale: Locale;
+};
+
+const STRINGS = {
+  fr: {
+    incidentMarker: "Lieu de l'incident",
+    loading: "Chargement de la trace…",
+    error: "Carte indisponible — service OSINT injoignable.",
+  },
+  en: {
+    incidentMarker: "Incident location",
+    loading: "Loading trail…",
+    error: "Map unavailable — OSINT service unreachable.",
+  },
+} as const;
+
+const SEVERITY_COLOR: Record<Props["severity"], string> = {
+  CRITICAL: "#ff3b3b",
+  SUSPICIOUS: "#ffb05a",
+  WATCH: "#5ec8ff",
+};
+
+// 7-day window centred on the incident — maps cleanly to the 7d tile in
+// useVesselHistory. We then filter positions client-side to the [-3.5d,
+// +3.5d] band around `detectedAt` so the trail tells the story of the
+// incident itself rather than seven days of arbitrary travel.
+const HISTORY_WINDOW_HOURS = 7 * 24;
+
+export function IncidentMap({
+  vesselSlug,
+  apiBase,
+  position,
+  detectedAt,
+  severity,
+  locale,
+}: Props) {
+  const t = STRINGS[locale];
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const [map, setMap] = React.useState<MaplibreMap | null>(null);
+  const detectedTs = React.useMemo(() => Date.parse(detectedAt), [detectedAt]);
+
+  const { history, loading, error } = useVesselHistory(apiBase, vesselSlug, "7d");
+
+  const focusHistory = React.useMemo(() => {
+    if (!history || Number.isNaN(detectedTs)) return history;
+    const halfWindowMs = (HISTORY_WINDOW_HOURS / 2) * 3600 * 1000;
+    const lo = detectedTs - halfWindowMs;
+    const hi = detectedTs + halfWindowMs;
+    return {
+      ...history,
+      positions: history.positions.filter((p) => {
+        const t = Date.parse(p.ts);
+        return t >= lo && t <= hi;
+      }),
+    };
+  }, [history, detectedTs]);
+
+  // Init map once. Centred on incident if we have a position, otherwise
+  // a reasonable default (Antarctic Peninsula area).
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+    let cancelled = false;
+    let m: MaplibreMap | null = null;
+    const center: [number, number] = position
+      ? [position.lon, position.lat]
+      : [-50, -60];
+
+    void import("maplibre-gl").then(({ Map: MapGL, NavigationControl, ScaleControl, Marker }) => {
+      if (cancelled || !containerRef.current) return;
+      m = new MapGL({
+        container: containerRef.current,
+        style: BASEMAP_DARK_URL,
+        center,
+        zoom: position ? 5 : 3,
+        attributionControl: { compact: true },
+      });
+      m.addControl(new NavigationControl({ showCompass: false }), "bottom-right");
+      m.addControl(new ScaleControl({ unit: "nautical" }), "bottom-left");
+
+      m.on("load", () => {
+        if (cancelled || !m) return;
+
+        if (position) {
+          // Marker = a glowing dot in the severity colour. Implemented as a
+          // div element rather than a Symbol layer so we can drive the
+          // pulse animation purely with CSS keyframes (defined in
+          // globals.css) and skip a Mapbox sprite.
+          const el = document.createElement("div");
+          el.className = "incident-marker";
+          el.style.setProperty("--incident-color", SEVERITY_COLOR[severity]);
+          el.setAttribute("aria-label", t.incidentMarker);
+          new Marker({ element: el }).setLngLat(center).addTo(m);
+        }
+
+        setMap(m);
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      if (m) m.remove();
+    };
+  }, [position, severity, t.incidentMarker]);
+
+  return (
+    <div className="relative w-full h-[480px] rounded-2xl overflow-hidden border border-[color:var(--color-border)]">
+      <div ref={containerRef} className="absolute inset-0" />
+      <VesselTrail map={map} history={focusHistory ?? null} />
+      {loading && (
+        <div className="absolute top-3 left-3 px-3 py-1.5 text-xs font-mono rounded-full bg-[color:var(--color-surface)]/90 backdrop-blur border border-[color:var(--color-border)]">
+          {t.loading}
+        </div>
+      )}
+      {error && !loading && (
+        <div className="absolute top-3 left-3 px-3 py-1.5 text-xs font-mono rounded-full bg-[color:var(--color-surface)]/90 backdrop-blur border border-[color:var(--color-danger)] text-[color:var(--color-danger)]">
+          {t.error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default IncidentMap;
diff --git a/web/app/[locale]/incident/[slug]/IncidentSources.tsx b/web/app/[locale]/incident/[slug]/IncidentSources.tsx
new file mode 100644
index 0000000..d049af3
--- /dev/null
+++ b/web/app/[locale]/incident/[slug]/IncidentSources.tsx
@@ -0,0 +1,90 @@
+import type { IncidentSource } from "@/lib/incidents";
+import type { Locale } from "@/lib/i18n";
+
+type Props = {
+  sources: IncidentSource[];
+  locale: Locale;
+};
+
+const STRINGS = {
+  fr: {
+    heading: "Sources de cette détection",
+    empty: "Aucune source externe attachée.",
+  },
+  en: {
+    heading: "Sources for this detection",
+    empty: "No external sources attached.",
+  },
+} as const;
+
+const FALLBACK_SOURCES: Record<Locale, IncidentSource[]> = {
+  fr: [
+    {
+      url: "https://aisstream.io/",
+      title: "AIS public — feed AISStream.io",
+    },
+    {
+      url: "https://globalfishingwatch.org/our-apis/",
+      title: "Profils navires — Global Fishing Watch",
+    },
+    {
+      url: "https://github.com/dubusalexispro/krill-watch",
+      title: "Pipeline open-source — krill-watch",
+    },
+  ],
+  en: [
+    {
+      url: "https://aisstream.io/",
+      title: "Public AIS — AISStream.io feed",
+    },
+    {
+      url: "https://globalfishingwatch.org/our-apis/",
+      title: "Vessel profiles — Global Fishing Watch",
+    },
+    {
+      url: "https://github.com/dubusalexispro/krill-watch",
+      title: "Open-source pipeline — krill-watch",
+    },
+  ],
+};
+
+export function IncidentSources({ sources, locale }: Props) {
+  const t = STRINGS[locale];
+  // If the pipeline didn't attach explicit sources, fall back to the
+  // canonical three: AIS feed, profile DB, code. Better than an empty
+  // section on the public page.
+  const list = sources.length > 0 ? sources : FALLBACK_SOURCES[locale];
+
+  return (
+    <section
+      aria-labelledby="incident-sources-heading"
+      className="rounded-2xl border border-[color:var(--color-border)] p-6 bg-[color:var(--color-surface)]"
+    >
+      <h2
+        id="incident-sources-heading"
+        className="text-lg font-bold tracking-tight mb-4"
+      >
+        {t.heading}
+      </h2>
+      <ol className="space-y-2 list-decimal list-inside text-sm">
+        {list.map((s, i) => (
+          <li key={`${s.url}-${i}`}>
+            <a
+              href={s.url}
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              className="text-[color:var(--color-accent)] underline hover:no-underline break-words"
+            >
+              {s.title}
+            </a>
+            <span aria-hidden className="ml-1 text-[color:var(--color-text-muted)]">
+              ↗
+            </span>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
+
+export default IncidentSources;
diff --git a/web/app/[locale]/incident/[slug]/page.tsx b/web/app/[locale]/incident/[slug]/page.tsx
new file mode 100644
index 0000000..7689bc5
--- /dev/null
+++ b/web/app/[locale]/incident/[slug]/page.tsx
@@ -0,0 +1,244 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { isLocale, type Locale } from "@/lib/i18n";
+import { Flag } from "@/components/Flag";
+import { SeverityBadge } from "@/components/SeverityBadge";
+import { apiBaseUrl } from "@/lib/krill-watch";
+import {
+  buildIncidentHeadline,
+  fetchIncident,
+  fetchIncidentsList,
+  formatDetectedAt,
+  type Incident,
+} from "@/lib/incidents";
+import { IncidentMap } from "./IncidentMap";
+import { IncidentSources } from "./IncidentSources";
+import { IncidentContext } from "./IncidentContext";
+import { ShareButton } from "@/components/share/ShareButton";
+import { SupportCTA } from "@/components/SupportCTA";
+import { buildShareTitle } from "@/lib/share-urls";
+
+// 5-minute soft revalidate. Hard revalidations are pushed by the
+// FastAPI emitter via /api/revalidate (see web/app/api/revalidate),
+// so this is the worst-case ceiling, not the typical refresh cadence.
+export const revalidate = 300;
+// We accept slugs that aren't in the pre-rendered set — they'll be
+// generated on demand, then cached.
+export const dynamicParams = true;
+
+const STRINGS = {
+  fr: {
+    backLink: "← Retour au tracker live",
+    notFoundTitle: "Incident introuvable",
+    detectedAtLabel: "Détecté le",
+    scoreLabel: "Score",
+    viewVessel: "Voir le navire",
+    viewLive: "Voir sur le tracker live",
+    eventLabels: {
+      ZONE_ENTERED: "Entrée en zone protégée",
+      AIS_GAP_OPENED: "Coupure AIS",
+      TRANSHIPMENT_DETECTED: "Transbordement suspecté",
+      SEVERITY_CHANGED: "Réévaluation de sévérité",
+    } as const,
+  },
+  en: {
+    backLink: "← Back to the live tracker",
+    notFoundTitle: "Incident not found",
+    detectedAtLabel: "Detected at",
+    scoreLabel: "Score",
+    viewVessel: "View vessel",
+    viewLive: "View on live tracker",
+    eventLabels: {
+      ZONE_ENTERED: "Protected zone entry",
+      AIS_GAP_OPENED: "AIS gap",
+      TRANSHIPMENT_DETECTED: "Suspected transhipment",
+      SEVERITY_CHANGED: "Severity raised",
+    } as const,
+  },
+} as const;
+
+type RouteParams = { locale: string; slug: string };
+
+export async function generateStaticParams() {
+  // Pre-render the most-recent 50 incidents at build time. The list is
+  // best-effort — if the OSINT box is offline we still ship an empty
+  // params set and rely on `dynamicParams` to render fresh slugs JIT.
+  const incidents = await fetchIncidentsList(50);
+  return incidents.flatMap((i) =>
+    (["fr", "en"] as const).map((locale) => ({ locale, slug: i.slug })),
+  );
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<RouteParams>;
+}): Promise<Metadata> {
+  const { locale, slug } = await params;
+  if (!isLocale(locale)) return { title: "Not found" };
+  const incident = await fetchIncident(slug);
+  if (!incident) return { title: STRINGS[locale].notFoundTitle };
+
+  const headline = buildIncidentHeadline(incident, locale);
+  const detected = formatDetectedAt(incident.detectedAt, locale);
+  const description =
+    locale === "fr"
+      ? `${incident.severity} — détecté ${detected}.`
+      : `${incident.severity} — detected ${detected}.`;
+  const ogPath = `/api/og/incident/${encodeURIComponent(incident.slug)}`;
+
+  return {
+    title: `${headline} · krill-watch`,
+    description,
+    openGraph: {
+      title: headline,
+      description,
+      images: [{ url: ogPath, width: 1200, height: 630, alt: headline }],
+      type: "article",
+      locale: locale === "fr" ? "fr_FR" : "en_US",
+      siteName: "krill-watch",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: headline,
+      description,
+      images: [ogPath],
+    },
+    alternates: {
+      canonical: `/${locale}/incident/${incident.slug}`,
+      languages: {
+        fr: `/fr/incident/${incident.slug}`,
+        en: `/en/incident/${incident.slug}`,
+      },
+    },
+  };
+}
+
+export default async function IncidentPage({
+  params,
+}: {
+  params: Promise<RouteParams>;
+}) {
+  const { locale, slug } = await params;
+  if (!isLocale(locale)) notFound();
+  const typed: Locale = locale;
+  const t = STRINGS[typed];
+
+  const incident = await fetchIncident(slug);
+  if (!incident) notFound();
+
+  return <IncidentArticle incident={incident} locale={typed} t={t} />;
+}
+
+type ArticleProps = {
+  incident: Incident;
+  locale: Locale;
+  t: (typeof STRINGS)[Locale];
+};
+
+function IncidentArticle({ incident, locale, t }: ArticleProps) {
+  const headline = buildIncidentHeadline(incident, locale);
+  const detected = formatDetectedAt(incident.detectedAt, locale);
+  const eventLabel = t.eventLabels[incident.eventType];
+  const apiBase = apiBaseUrl();
+  const siteOrigin =
+    process.env.NEXT_PUBLIC_SITE_URL ?? "https://krill-watch.org";
+  const canonicalUrl = `${siteOrigin.replace(/\/+$/, "")}/${locale}/incident/${incident.slug}`;
+  const shareContext = {
+    kind: "incident" as const,
+    slug: incident.slug,
+    url: canonicalUrl,
+    title: buildShareTitle({ kind: "incident", headline }, locale),
+  };
+
+  return (
+    <article className="px-5 py-12 max-w-4xl mx-auto">
+      <Link
+        href={`/${locale}/live`}
+        className="text-sm font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] hover:text-[color:var(--color-accent)]"
+      >
+        {t.backLink}
+      </Link>
+
+      <header className="mt-6 space-y-4">
+        <div className="flex flex-wrap items-center gap-3 text-xs font-mono uppercase tracking-wider text-[color:var(--color-text-muted)]">
+          <SeverityBadge severity={incident.severity} locale={locale} size="md" />
+          <span>{eventLabel}</span>
+          <span aria-hidden>·</span>
+          <span>
+            {t.detectedAtLabel} <time dateTime={incident.detectedAt}>{detected}</time>
+          </span>
+        </div>
+
+        <h1 className="text-3xl md:text-5xl font-bold tracking-tight leading-tight">
+          {headline}
+        </h1>
+
+        <div className="flex flex-wrap items-center gap-3 text-sm text-[color:var(--color-text-muted)]">
+          {incident.vessel.flag && <Flag code={incident.vessel.flag} size="sm" />}
+          <span>
+            {incident.vessel.flag ?? "—"}
+            {" · "}
+            {incident.vessel.name}
+          </span>
+          {typeof incident.score === "number" && (
+            <span className="font-mono">
+              · {t.scoreLabel} {incident.score.toFixed(2)}
+            </span>
+          )}
+          {incident.position && (
+            <span className="font-mono">
+              · {incident.position.lat.toFixed(2)}°,{" "}
+              {incident.position.lon.toFixed(2)}°
+            </span>
+          )}
+        </div>
+
+        <div className="flex flex-wrap gap-3 pt-2">
+          <ShareButton context={shareContext} locale={locale} variant="primary" />
+          <Link
+            href={`/${locale}/vessels/${incident.vessel.slug}`}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-[color:var(--color-border)] text-sm font-mono uppercase tracking-wider hover:border-[color:var(--color-accent)] hover:text-[color:var(--color-accent)]"
+          >
+            {t.viewVessel} →
+          </Link>
+          <Link
+            href={`/${locale}/live`}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-[color:var(--color-border)] text-sm font-mono uppercase tracking-wider hover:border-[color:var(--color-accent)] hover:text-[color:var(--color-accent)]"
+          >
+            {t.viewLive} →
+          </Link>
+        </div>
+      </header>
+
+      <div className="mt-10">
+        {apiBase ? (
+          <IncidentMap
+            vesselSlug={incident.vessel.slug}
+            apiBase={apiBase}
+            position={incident.position}
+            detectedAt={incident.detectedAt}
+            severity={incident.severity}
+            locale={locale}
+          />
+        ) : (
+          <div className="h-[200px] rounded-2xl border border-[color:var(--color-border)] flex items-center justify-center text-sm text-[color:var(--color-text-muted)]">
+            {locale === "fr"
+              ? "Carte indisponible — service OSINT injoignable."
+              : "Map unavailable — OSINT service unreachable."}
+          </div>
+        )}
+      </div>
+
+      <div className="mt-10 grid gap-6 md:grid-cols-2">
+        <IncidentContext campaignSlug={incident.campaignSlug} locale={locale} />
+        <IncidentSources sources={incident.sources} locale={locale} />
+      </div>
+
+      <div className="mt-12">
+        <SupportCTA variant="banner" locale={locale} />
+      </div>
+    </article>
+  );
+}
diff --git a/web/app/[locale]/live/LivePageClient.tsx b/web/app/[locale]/live/LivePageClient.tsx
new file mode 100644
index 0000000..1d1ee86
--- /dev/null
+++ b/web/app/[locale]/live/LivePageClient.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import * as React from "react";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { LiveTrackerMap, type LiveFleetVessel } from "@/components/map/LiveTrackerMap";
+import { FleetSidebar } from "@/components/live/FleetSidebar";
+import { VesselDrawer } from "@/components/live/VesselDrawer";
+import {
+  LiveMobileLayout,
+  LiveLayoutSwitch,
+} from "@/components/live/LiveMobileLayout";
+import {
+  liveStateToUrl,
+  readLiveState,
+  type LayerVisibility,
+  type LiveState,
+} from "@/lib/live-url-state";
+import type { Locale } from "@/lib/i18n";
+import type { VesselSummary } from "@/lib/krill-watch";
+
+type Props = {
+  locale: Locale;
+  apiBase: string;
+  initialFleet: LiveFleetVessel[];
+  initialVessels: VesselSummary[];
+  initialState: LiveState;
+};
+
+// Convert a LiveFleetVessel (map shape) into a VesselSummary (sidebar shape).
+// Used to keep both surfaces in sync after SSE updates.
+function toVesselSummary(v: LiveFleetVessel): VesselSummary {
+  return {
+    slug: v.slug,
+    name: v.name,
+    mmsi: v.mmsi,
+    imo: null,
+    flag: v.flag ?? null,
+    severity: v.severity ?? "UNKNOWN",
+    current_zones: v.current_zones ?? [],
+    last_position: v.last_position
+      ? {
+          lat: v.last_position.lat,
+          lon: v.last_position.lon,
+          ts: v.last_position.ts ?? "",
+        }
+      : null,
+    last_seen: v.last_seen ?? null,
+    friendly: v.friendly ?? false,
+  };
+}
+
+export function LivePageClient({
+  locale,
+  apiBase,
+  initialFleet,
+  initialVessels,
+  initialState,
+}: Props) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const [state, setState] = React.useState<LiveState>(initialState);
+  const [vessels, setVessels] = React.useState<VesselSummary[]>(initialVessels);
+  const [fleet] = React.useState<LiveFleetVessel[]>(initialFleet);
+  const fleetRef = React.useRef<LiveFleetVessel[]>(initialFleet);
+
+  // Reconcile when search params change (back/forward, deep links).
+  React.useEffect(() => {
+    const next = readLiveState(searchParams);
+    setState((prev) => {
+      // Only swap if it actually differs — avoids an infinite render loop.
+      if (
+        prev.selectedSlug === next.selectedSlug &&
+        prev.filter.text === next.filter.text &&
+        prev.filter.bucket === next.filter.bucket &&
+        prev.layers.graticule === next.layers.graticule &&
+        prev.layers.zones === next.layers.zones &&
+        prev.layers.d1mpa === next.layers.d1mpa &&
+        prev.layers.tracks24h === next.layers.tracks24h &&
+        prev.layers.labels === next.layers.labels
+      ) {
+        return prev;
+      }
+      return next;
+    });
+  }, [searchParams]);
+
+  // Push every state change to the URL via shallow replace — keeps the URL
+  // shareable but doesn't pollute history with every keystroke.
+  const writeUrl = React.useCallback(
+    (next: LiveState) => {
+      const url = liveStateToUrl(pathname, next);
+      router.replace(url, { scroll: false });
+    },
+    [pathname, router],
+  );
+
+  const updateState = React.useCallback(
+    (patch: Partial<LiveState>) => {
+      setState((prev) => {
+        const next: LiveState = {
+          selectedSlug:
+            "selectedSlug" in patch ? patch.selectedSlug ?? null : prev.selectedSlug,
+          filter: "filter" in patch && patch.filter ? patch.filter : prev.filter,
+          layers: "layers" in patch && patch.layers ? patch.layers : prev.layers,
+        };
+        writeUrl(next);
+        return next;
+      });
+    },
+    [writeUrl],
+  );
+
+  const handleSelect = React.useCallback(
+    (slug: string | null) => {
+      updateState({ selectedSlug: slug });
+    },
+    [updateState],
+  );
+
+  const handleLayerChange = React.useCallback(
+    (layers: LayerVisibility) => updateState({ layers }),
+    [updateState],
+  );
+
+  const handleSearchChange = React.useCallback(
+    (text: string) =>
+      updateState({ filter: { ...state.filter, text } }),
+    [updateState, state.filter],
+  );
+
+  const handleBucketChange = React.useCallback(
+    (bucket: import("@/lib/fleet-filtering").FleetBucket) =>
+      updateState({ filter: { ...state.filter, bucket } }),
+    [updateState, state.filter],
+  );
+
+  const handleAlertClick = React.useCallback((lat: number, lon: number) => {
+    // P2-T03 will wire this to an imperative flyTo on the map. For now keep
+    // the drawer open and surface the click in the console for verification.
+    if (typeof window !== "undefined") {
+      console.debug("[live] alert click", lat, lon);
+    }
+  }, []);
+
+  // The sidebar renders from VesselSummary[]; the map renders from
+  // LiveFleetVessel[]. The initial fetch already gave us both shapes.
+  // Live updates flow into the map via SSE (handled inside LiveTrackerMap).
+  // We rebuild VesselSummary[] from the latest fleetRef once per filter
+  // change so sidebar counts reflect new severities/zones.
+  React.useEffect(() => {
+    if (fleetRef.current === fleet) return;
+    fleetRef.current = fleet;
+    setVessels(fleet.map(toVesselSummary));
+  }, [fleet]);
+
+  const desktop = (
+    <div className="fixed inset-0 top-[var(--nav-height,56px)] flex bg-[color:var(--color-bg)]">
+      <div className="hidden md:block shrink-0 h-full overflow-hidden border-r border-[color:var(--color-border)]">
+        <FleetSidebar
+          vessels={vessels}
+          selectedSlug={state.selectedSlug}
+          onSelect={handleSelect}
+          layers={state.layers}
+          onLayerChange={handleLayerChange}
+          searchValue={state.filter.text}
+          onSearchChange={handleSearchChange}
+          bucket={state.filter.bucket}
+          onBucketChange={handleBucketChange}
+          locale={locale}
+        />
+      </div>
+
+      <div className="flex-1 relative min-w-0">
+        <LiveTrackerMap
+          mode="live"
+          apiBase={apiBase}
+          initialFleet={initialFleet}
+          selectedSlug={state.selectedSlug}
+          onSelectVessel={handleSelect}
+          showAmbient={false}
+          showZones={state.layers.zones}
+          showD1MPA={state.layers.d1mpa}
+          showGraticule={state.layers.graticule}
+          showLabels={state.layers.labels}
+          show24hTracks={state.layers.tracks24h}
+          locale={locale}
+        />
+      </div>
+
+      <VesselDrawer
+        slug={state.selectedSlug}
+        apiBase={apiBase}
+        onClose={() => handleSelect(null)}
+        onAlertClick={handleAlertClick}
+        locale={locale}
+      />
+    </div>
+  );
+
+  const mobile = (
+    <LiveMobileLayout
+      vessels={vessels}
+      initialFleet={initialFleet}
+      selectedSlug={state.selectedSlug}
+      onSelect={handleSelect}
+      layers={state.layers}
+      onLayerChange={handleLayerChange}
+      searchValue={state.filter.text}
+      onSearchChange={handleSearchChange}
+      bucket={state.filter.bucket}
+      onBucketChange={handleBucketChange}
+      apiBase={apiBase}
+      locale={locale}
+    />
+  );
+
+  return <LiveLayoutSwitch desktop={desktop} mobile={mobile} />;
+}
+
+export default LivePageClient;
diff --git a/web/app/[locale]/live/page.tsx b/web/app/[locale]/live/page.tsx
new file mode 100644
index 0000000..f02a56b
--- /dev/null
+++ b/web/app/[locale]/live/page.tsx
@@ -0,0 +1,108 @@
+import { notFound } from "next/navigation";
+import { isLocale, type Locale } from "@/lib/i18n";
+import {
+  apiBaseUrl,
+  fetchVesselSummaries,
+  type VesselSummary,
+} from "@/lib/krill-watch";
+import {
+  DEFAULT_LIVE_STATE,
+  readLiveState,
+  type LiveState,
+} from "@/lib/live-url-state";
+import type { LiveFleetVessel } from "@/components/map/LiveTrackerMap";
+import { LivePageClient } from "./LivePageClient";
+
+export const dynamic = "force-dynamic";
+
+type PageProps = {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+};
+
+function searchParamsToURLSearchParams(
+  raw: Record<string, string | string[] | undefined>,
+): URLSearchParams {
+  const out = new URLSearchParams();
+  for (const [k, v] of Object.entries(raw)) {
+    if (v == null) continue;
+    if (Array.isArray(v)) {
+      v.forEach((item) => out.append(k, item));
+    } else {
+      out.set(k, v);
+    }
+  }
+  return out;
+}
+
+function toLiveFleet(v: VesselSummary): LiveFleetVessel {
+  return {
+    mmsi: v.mmsi ?? "",
+    slug: v.slug,
+    name: v.name,
+    flag: v.flag,
+    severity: v.severity,
+    friendly: v.friendly,
+    current_zones: v.current_zones,
+    last_position: v.last_position
+      ? {
+          lat: v.last_position.lat,
+          lon: v.last_position.lon,
+          ts: v.last_position.ts,
+          sog: null,
+          cog: null,
+        }
+      : null,
+    last_seen: v.last_seen,
+  };
+}
+
+export default async function LivePage({ params, searchParams }: PageProps) {
+  const { locale } = await params;
+  if (!isLocale(locale)) notFound();
+  const typedLocale: Locale = locale;
+  const raw = await searchParams;
+  const sp = searchParamsToURLSearchParams(raw);
+
+  const initialState: LiveState = {
+    ...readLiveState(sp),
+  };
+  const apiBase = apiBaseUrl() ?? "";
+
+  const initialVessels = await fetchVesselSummaries();
+  const initialFleet: LiveFleetVessel[] = initialVessels
+    .filter((v) => v.mmsi)
+    .map(toLiveFleet);
+
+  // Strict mode: if the initial state asks for a vessel that doesn't exist
+  // in the snapshot, drop it so the drawer doesn't open into a 404 fetch.
+  if (initialState.selectedSlug) {
+    const found = initialFleet.some(
+      (v) => v.slug === initialState.selectedSlug,
+    );
+    if (!found && initialVessels.every((v) => v.slug !== initialState.selectedSlug)) {
+      initialState.selectedSlug = null;
+    }
+  }
+
+  const safeState: LiveState = {
+    selectedSlug: initialState.selectedSlug,
+    filter: initialState.filter,
+    layers: initialState.layers,
+  };
+  // Surface defaults to satisfy strict no-null types on layers/filter when
+  // somebody fed garbage params to URL.
+  if (!safeState.filter || !safeState.filter.bucket) {
+    safeState.filter = DEFAULT_LIVE_STATE.filter;
+  }
+
+  return (
+    <LivePageClient
+      locale={typedLocale}
+      apiBase={apiBase}
+      initialFleet={initialFleet}
+      initialVessels={initialVessels}
+      initialState={safeState}
+    />
+  );
+}
diff --git a/web/app/[locale]/live/v/[slug]/page.tsx b/web/app/[locale]/live/v/[slug]/page.tsx
new file mode 100644
index 0000000..97bcff6
--- /dev/null
+++ b/web/app/[locale]/live/v/[slug]/page.tsx
@@ -0,0 +1,16 @@
+import { redirect } from "next/navigation";
+
+// Deep-link route — forwards to /live?v=<slug>. The cockpit reads the param
+// on mount and pre-opens the drawer, so the user lands directly on a vessel
+// from a shared URL.
+
+export const dynamic = "force-dynamic";
+
+export default async function VesselDeepLink({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug } = await params;
+  redirect(`/${locale}/live?v=${encodeURIComponent(slug)}`);
+}
diff --git a/web/app/[locale]/page.tsx b/web/app/[locale]/page.tsx
index ce53c22..b31302c 100644
--- a/web/app/[locale]/page.tsx
+++ b/web/app/[locale]/page.tsx
@@ -1,10 +1,11 @@
-import Link from "next/link";
 import { notFound } from "next/navigation";
-import { isLocale, getDict, type Locale } from "@/lib/i18n";
+import { isLocale, type Locale } from "@/lib/i18n";
 import { LiveStatusBanner } from "@/components/LiveStatusBanner";
+import { HeroHybrid } from "@/components/home/HeroHybrid";
 import { ActiveAlertsStrip } from "@/components/home/ActiveAlertsStrip";
 import { MissionStrip } from "@/components/home/MissionStrip";
 import { MethodologyBlock } from "@/components/home/MethodologyBlock";
+import { SupportCTA } from "@/components/SupportCTA";
 
 export default async function HomePage({
   params,
@@ -14,39 +15,19 @@ export default async function HomePage({
   const { locale } = await params;
   if (!isLocale(locale)) notFound();
   const typed: Locale = locale;
-  const t = getDict(typed);
 
   return (
     <>
-      <section className="px-5 pt-20 pb-12 md:pt-24 md:pb-16 max-w-6xl mx-auto">
-        <p className="inline-flex items-center gap-2 text-xs uppercase tracking-wider text-[color:var(--color-accent)] border border-[color:var(--color-accent)]/40 rounded-full px-3 py-1">
-          <span className="inline-block w-1.5 h-1.5 rounded-full bg-[color:var(--color-accent)] animate-pulse" />
-          {t.home.badge}
-        </p>
-        <h1 className="mt-6 text-4xl md:text-6xl font-bold leading-[1.05] max-w-4xl">
-          {t.home.title}{" "}
-          <span className="text-[color:var(--color-accent)]">{t.home.titleAccent}</span>
-        </h1>
-        <p className="mt-6 text-lg text-[color:var(--color-text)] max-w-3xl">
-          {t.home.heroLead}
-        </p>
-        <p className="mt-3 text-sm text-[color:var(--color-text-muted)] max-w-3xl">
-          {t.home.heroSub}
-        </p>
-        <div className="mt-8 flex flex-wrap items-center gap-3">
-          <Link href={`/${typed}/vessels`} className="btn btn-primary">
-            {t.home.ctaPrimary}
-          </Link>
-          <a href="#methodology" className="btn btn-ghost">
-            {t.home.ctaHowItWorks} ↓
-          </a>
-        </div>
+      <HeroHybrid locale={typed} />
+      <div className="px-5 max-w-6xl mx-auto -mt-2">
         <LiveStatusBanner locale={typed} />
-      </section>
-
+      </div>
       <ActiveAlertsStrip locale={typed} />
       <MissionStrip locale={typed} />
       <MethodologyBlock locale={typed} />
+      <div className="px-5 max-w-6xl mx-auto py-12">
+        <SupportCTA variant="banner" locale={typed} />
+      </div>
     </>
   );
 }
diff --git a/web/app/[locale]/vessels/[slug]/VesselDetailClient.tsx b/web/app/[locale]/vessels/[slug]/VesselDetailClient.tsx
new file mode 100644
index 0000000..b3dd9d0
--- /dev/null
+++ b/web/app/[locale]/vessels/[slug]/VesselDetailClient.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import * as React from "react";
+import { VesselHistoryMap } from "./VesselHistoryMap";
+import type { Locale } from "@/lib/i18n";
+
+// Thin client boundary for the interactive history block. The rest of the
+// vessel detail page (header, identity, event log, incidents) stays
+// server-rendered for SEO and TTFB. We isolate just the bits that need
+// MapLibre + state in this client island so the surrounding tree never
+// pays the JS cost.
+type Props = {
+  slug: string;
+  apiBase: string;
+  locale: Locale;
+};
+
+export function VesselDetailClient({ slug, apiBase, locale }: Props) {
+  return <VesselHistoryMap slug={slug} apiBase={apiBase} locale={locale} />;
+}
+
+export default VesselDetailClient;
diff --git a/web/app/[locale]/vessels/[slug]/VesselHistoryMap.tsx b/web/app/[locale]/vessels/[slug]/VesselHistoryMap.tsx
new file mode 100644
index 0000000..a70852a
--- /dev/null
+++ b/web/app/[locale]/vessels/[slug]/VesselHistoryMap.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import * as React from "react";
+import type { Map as MaplibreMap } from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { VesselTrail } from "@/components/map/VesselTrail";
+import { TimelineScrubber } from "@/components/timeline/TimelineScrubber";
+import {
+  type TimelineRange,
+  type TimelineSpeed,
+  rangeBoundaries,
+} from "@/lib/timeline-state";
+import {
+  filterHistoryUpTo,
+  useVesselHistory,
+} from "@/lib/use-vessel-history";
+import type { Locale } from "@/lib/i18n";
+
+const BASEMAP_DARK_URL =
+  "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
+
+type Props = {
+  slug: string;
+  apiBase: string;
+  locale: Locale;
+};
+
+const STRINGS = {
+  fr: {
+    title: "Historique 30 jours",
+    loading: "Chargement de l'historique…",
+    empty: "Aucune position enregistrée pour ce navire sur la fenêtre demandée.",
+    error: "Historique indisponible — service OSINT injoignable.",
+  },
+  en: {
+    title: "30-day history",
+    loading: "Loading history…",
+    empty: "No recorded positions for this vessel in the selected window.",
+    error: "History unavailable — OSINT service unreachable.",
+  },
+} as const;
+
+export function VesselHistoryMap({ slug, apiBase, locale }: Props) {
+  const t = STRINGS[locale];
+  const [range, setRange] = React.useState<TimelineRange>("30d");
+  const [current, setCurrent] = React.useState<string>(() =>
+    new Date().toISOString(),
+  );
+  const [isPlaying, setPlaying] = React.useState(false);
+  const [speed, setSpeed] = React.useState<TimelineSpeed>(10);
+
+  const { history, loading, error } = useVesselHistory(apiBase, slug, range);
+
+  // Anchor `current` at the latest position when the data lands so the
+  // user lands on "now" rather than start-of-range.
+  React.useEffect(() => {
+    if (!history || history.positions.length === 0) return;
+    const last = history.positions[history.positions.length - 1].ts;
+    setCurrent(last);
+  }, [history]);
+
+  // Reset cursor when the user changes range so we don't end up outside
+  // the new boundaries.
+  React.useEffect(() => {
+    const { to } = rangeBoundaries(range);
+    setCurrent((cur) => (cur > to ? to : cur));
+  }, [range]);
+
+  const visibleHistory = React.useMemo(
+    () => filterHistoryUpTo(history, current),
+    [history, current],
+  );
+
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const [map, setMap] = React.useState<MaplibreMap | null>(null);
+
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+    let cancelled = false;
+    let m: MaplibreMap | null = null;
+
+    void import("maplibre-gl").then(({ Map: MapGL, NavigationControl, ScaleControl }) => {
+      if (cancelled || !containerRef.current) return;
+      m = new MapGL({
+        container: containerRef.current,
+        style: BASEMAP_DARK_URL,
+        center: [-50, -60],
+        zoom: 3,
+        attributionControl: { compact: true },
+      });
+      m.addControl(new NavigationControl({ showCompass: false }), "bottom-right");
+      m.addControl(new ScaleControl({ unit: "nautical" }), "bottom-left");
+      m.on("load", () => {
+        if (!cancelled) setMap(m);
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      if (m) m.remove();
+      setMap(null);
+    };
+  }, []);
+
+  // Auto-fit the map to the trail bounding box when the data first arrives.
+  // Subsequent re-fits only happen when the user changes range — moving the
+  // scrubber should not yank the viewport.
+  const lastFitRangeRef = React.useRef<TimelineRange | null>(null);
+  React.useEffect(() => {
+    if (!map || !history || history.positions.length === 0) return;
+    if (lastFitRangeRef.current === range) return;
+    lastFitRangeRef.current = range;
+    const lons = history.positions.map((p) => p.lon);
+    const lats = history.positions.map((p) => p.lat);
+    const minLon = Math.min(...lons);
+    const maxLon = Math.max(...lons);
+    const minLat = Math.min(...lats);
+    const maxLat = Math.max(...lats);
+    if ([minLon, maxLon, minLat, maxLat].some((v) => !Number.isFinite(v))) return;
+    map.fitBounds(
+      [
+        [minLon, minLat],
+        [maxLon, maxLat],
+      ],
+      { padding: 60, maxZoom: 8, duration: 0 },
+    );
+  }, [map, history, range]);
+
+  return (
+    <section className="space-y-3">
+      <h2 className="text-xs uppercase tracking-wider font-mono text-[color:var(--color-text-muted)]">
+        {t.title}
+      </h2>
+      <div className="relative rounded-xl overflow-hidden border border-[color:var(--color-border)]" style={{ height: 480 }}>
+        <div ref={containerRef} className="absolute inset-0" />
+        <VesselTrail map={map} history={visibleHistory} />
+        {loading ? (
+          <div className="absolute inset-0 flex items-center justify-center text-sm text-[color:var(--color-text-muted)] bg-[color:var(--color-bg)]/40">
+            {t.loading}
+          </div>
+        ) : null}
+        {error ? (
+          <div className="absolute top-3 left-3 px-2.5 py-1 rounded-md text-xs font-mono bg-[color:var(--color-danger)]/10 text-[color:var(--color-danger)] border border-[color:var(--color-danger)]/40">
+            {t.error}
+          </div>
+        ) : null}
+        {!loading && history && history.positions.length === 0 ? (
+          <div className="absolute inset-0 flex items-center justify-center text-sm text-[color:var(--color-text-muted)]">
+            {t.empty}
+          </div>
+        ) : null}
+      </div>
+
+      <TimelineScrubber
+        range={range}
+        onRangeChange={setRange}
+        current={current}
+        onCurrentChange={setCurrent}
+        events={history?.events ?? []}
+        isPlaying={isPlaying}
+        onPlayPause={() => setPlaying((p) => !p)}
+        speedMultiplier={speed}
+        onSpeedChange={setSpeed}
+        locale={locale}
+      />
+    </section>
+  );
+}
+
+export default VesselHistoryMap;
diff --git a/web/app/[locale]/vessels/[slug]/page.tsx b/web/app/[locale]/vessels/[slug]/page.tsx
index 014338e..231013b 100644
--- a/web/app/[locale]/vessels/[slug]/page.tsx
+++ b/web/app/[locale]/vessels/[slug]/page.tsx
@@ -1,10 +1,14 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { isLocale, getDict, type Locale } from "@/lib/i18n";
-import { flagEmoji } from "@/lib/utils";
-import { fetchVesselDetail } from "@/lib/krill-watch";
+import { Flag } from "@/components/Flag";
+import { fetchVesselDetail, apiBaseUrl } from "@/lib/krill-watch";
 import { EventLogWithFilters } from "@/components/vessels/EventLogWithFilters";
 import { IncidentList } from "@/components/vessels/IncidentList";
+import { VesselDetailClient } from "./VesselDetailClient";
+import { ShareButton } from "@/components/share/ShareButton";
+import { SupportCTA } from "@/components/SupportCTA";
+import { buildShareTitle } from "@/lib/share-urls";
 import { VESSELS } from "@/data/vessels";
 import { slugify } from "@/lib/utils";
 
@@ -71,11 +75,7 @@ export default async function VesselDetailPage({
       <header className="mt-6 flex flex-wrap items-start justify-between gap-4">
         <div>
           <div className="flex items-center gap-3 flex-wrap">
-            {flag && (
-              <span className="text-2xl" aria-hidden>
-                {flag === "CPWF" ? "🦐" : flagEmoji(flag)}
-              </span>
-            )}
+            {flag && <Flag code={flag} size="lg" />}
             <h1 className="text-3xl md:text-5xl font-bold tracking-tight">{name}</h1>
             {friendly && (
               <span className="tag tag-good text-xs">CPWF</span>
@@ -111,9 +111,30 @@ export default async function VesselDetailPage({
               ))}
             </div>
           )}
+          <ShareButton
+            locale={typed}
+            context={{
+              kind: "vessel",
+              slug,
+              url: `${(process.env.NEXT_PUBLIC_SITE_URL ?? "https://krill-watch.org").replace(/\/+$/, "")}/${typed}/vessels/${slug}`,
+              title: buildShareTitle(
+                { kind: "vessel", vesselName: name, vesselFlag: flag },
+                typed,
+              ),
+            }}
+            variant="ghost"
+          />
         </div>
       </header>
 
+      <div className="mt-10">
+        <VesselDetailClient
+          slug={slug}
+          apiBase={apiBaseUrl() ?? ""}
+          locale={typed}
+        />
+      </div>
+
       <div className="mt-10 grid grid-cols-1 lg:grid-cols-3 gap-8">
         {/* Left: vessel identity + position */}
         <div className="lg:col-span-1 space-y-6">
@@ -191,6 +212,10 @@ export default async function VesselDetailPage({
           <IncidentList incidents={incidents} locale={typed} />
         </section>
       )}
+
+      <div className="mt-12 flex justify-end">
+        <SupportCTA variant="minimal" locale={typed} />
+      </div>
     </article>
   );
 }
diff --git a/web/app/[locale]/vessels/page.tsx b/web/app/[locale]/vessels/page.tsx
index ef9f453..34c1ab6 100644
--- a/web/app/[locale]/vessels/page.tsx
+++ b/web/app/[locale]/vessels/page.tsx
@@ -3,7 +3,8 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { VESSELS, type VesselMission } from "@/data/vessels";
 import { isLocale, getDict, localized, type Locale } from "@/lib/i18n";
-import { flagEmoji, slugify } from "@/lib/utils";
+import { slugify } from "@/lib/utils";
+import { Flag } from "@/components/Flag";
 import { LiveStatusBanner } from "@/components/LiveStatusBanner";
 import { MissionBadge } from "@/components/MissionBadge";
 import { Acronym } from "@/components/Acronym";
@@ -106,9 +107,7 @@ export default async function VesselsPage({
                     >
                       <div className="min-w-0">
                         <div className="flex items-center gap-2 flex-wrap">
-                          <span className="text-lg" aria-hidden>
-                            {isCpwf ? "🦐" : flagEmoji(v.flag)}
-                          </span>
+                          <Flag code={isCpwf ? "CPWF" : v.flag} size="lg" />
                           <p className="font-bold">{v.name}</p>
                           <span className="text-xs font-mono uppercase tracking-wider text-[color:var(--color-text-muted)]">
                             {v.flag}
diff --git a/web/app/api/contribute/route.ts b/web/app/api/contribute/route.ts
new file mode 100644
index 0000000..d568243
--- /dev/null
+++ b/web/app/api/contribute/route.ts
@@ -0,0 +1,72 @@
+import { NextResponse } from "next/server";
+
+// Same-origin proxy to the FastAPI POST /api/contributions. Front-end
+// hits this route to avoid CORS + to keep the OSINT API origin private
+// (the browser only sees krill-watch.org, never the OSINT box).
+//
+// We re-stream multipart/form-data as-is. Body and headers (except host)
+// pass through unchanged so the photo binary stays untouched.
+
+export const runtime = "nodejs";
+// Files stream — never try to cache.
+export const dynamic = "force-dynamic";
+
+function backendBase(): string | null {
+  const raw =
+    process.env.KRILL_WATCH_API ?? process.env.NEXT_PUBLIC_KRILL_WATCH_API ?? "";
+  const trimmed = raw.trim().replace(/\/+$/, "");
+  return trimmed || null;
+}
+
+export async function POST(request: Request) {
+  const base = backendBase();
+  if (!base) {
+    return NextResponse.json(
+      { error: "OSINT API not configured" },
+      { status: 503 },
+    );
+  }
+
+  const url = `${base}/api/contributions`;
+  const contentType = request.headers.get("content-type") ?? "";
+  if (!contentType.startsWith("multipart/form-data")) {
+    return NextResponse.json(
+      { error: "expected multipart/form-data" },
+      { status: 415 },
+    );
+  }
+
+  // Re-encode the form data so we don't rely on Node passing the request
+  // body stream straight through (next/edge's fetch impl varies).
+  const incoming = await request.formData();
+  const out = new FormData();
+  for (const [key, value] of incoming.entries()) {
+    if (value instanceof File) {
+      out.append(key, value, value.name);
+    } else {
+      out.append(key, value);
+    }
+  }
+
+  let upstream: Response;
+  try {
+    upstream = await fetch(url, {
+      method: "POST",
+      body: out,
+    });
+  } catch (err) {
+    return NextResponse.json(
+      { error: `OSINT API unreachable: ${(err as Error).message}` },
+      { status: 502 },
+    );
+  }
+
+  const text = await upstream.text();
+  let body: unknown;
+  try {
+    body = JSON.parse(text);
+  } catch {
+    body = { error: text || "upstream did not return JSON" };
+  }
+  return NextResponse.json(body, { status: upstream.status });
+}
diff --git a/web/app/api/og/campaign/[slug]/route.tsx b/web/app/api/og/campaign/[slug]/route.tsx
new file mode 100644
index 0000000..4b34bec
--- /dev/null
+++ b/web/app/api/og/campaign/[slug]/route.tsx
@@ -0,0 +1,93 @@
+import { ImageResponse } from "next/og";
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import { isCampaignSlug, CAMPAIGNS } from "@/lib/campaigns";
+import {
+  OG_HEIGHT,
+  OG_WIDTH,
+  renderCampaignOg,
+  renderFallbackOg,
+} from "@/lib/og-image-renderer";
+
+// Note: edge runtime can't read the local data/campaigns/ markdown files
+// (no fs access). This route runs on Node.js so the brief copy-fetch is
+// straightforward; the response is still cached aggressively.
+export const runtime = "nodejs";
+export const revalidate = 3600;
+
+type RouteContext = { params: Promise<{ slug: string }> };
+
+type CampaignCopy = { tag: string; title: string; lead: string };
+
+async function loadCopy(
+  slug: string,
+  locale: "fr" | "en",
+): Promise<CampaignCopy | null> {
+  const file = path.join(
+    process.cwd(),
+    "data",
+    "campaigns",
+    `${slug}.${locale}.md`,
+  );
+  let raw: string;
+  try {
+    raw = await fs.readFile(file, "utf8");
+  } catch {
+    return null;
+  }
+  const m = raw.match(/^---\s*\n([\s\S]*?)\n---/);
+  if (!m) return null;
+  const lines = m[1].split(/\r?\n/);
+  const fields: Record<string, string> = {};
+  for (const line of lines) {
+    const kv = line.match(/^([a-zA-Z0-9_]+)\s*:\s*(.*)$/);
+    if (!kv) continue;
+    let value = kv[2].trim();
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+    fields[kv[1]] = value;
+  }
+  if (!fields.tag || !fields.title || !fields.lead) return null;
+  return {
+    tag: fields.tag,
+    title: fields.titleAccent
+      ? `${fields.title} ${fields.titleAccent}`.replace(/\s+/g, " ").trim()
+      : fields.title,
+    lead: fields.lead.length > 220 ? `${fields.lead.slice(0, 217)}…` : fields.lead,
+  };
+}
+
+export async function GET(request: Request, context: RouteContext) {
+  const { slug } = await context.params;
+  const url = new URL(request.url);
+  const localeParam = url.searchParams.get("locale");
+  const locale: "fr" | "en" = localeParam === "fr" ? "fr" : "en";
+
+  if (!isCampaignSlug(slug)) {
+    return new ImageResponse(renderFallbackOg(), {
+      width: OG_WIDTH,
+      height: OG_HEIGHT,
+    });
+  }
+
+  const campaign = CAMPAIGNS[slug];
+  const copy = await loadCopy(slug, locale);
+
+  const tree = copy
+    ? renderCampaignOg(campaign, copy, locale)
+    : renderFallbackOg();
+
+  return new ImageResponse(tree, {
+    width: OG_WIDTH,
+    height: OG_HEIGHT,
+    headers: {
+      "cache-control": copy
+        ? "public, max-age=600, s-maxage=3600, stale-while-revalidate=86400"
+        : "public, max-age=60",
+    },
+  });
+}
diff --git a/web/app/api/og/incident/[slug]/route.tsx b/web/app/api/og/incident/[slug]/route.tsx
new file mode 100644
index 0000000..7267367
--- /dev/null
+++ b/web/app/api/og/incident/[slug]/route.tsx
@@ -0,0 +1,40 @@
+import { ImageResponse } from "next/og";
+import { fetchIncident } from "@/lib/incidents";
+import {
+  OG_HEIGHT,
+  OG_WIDTH,
+  renderFallbackOg,
+  renderIncidentOg,
+} from "@/lib/og-image-renderer";
+
+// Edge runtime keeps cold-start low and lets Next.js cache the response
+// at the edge. Satori is bundled into the edge build automatically.
+export const runtime = "edge";
+// 1 hour soft cache — incidents are immutable once detected, but the OG
+// preview gets refreshed if the incident row is later corrected.
+export const revalidate = 3600;
+
+type RouteContext = { params: Promise<{ slug: string }> };
+
+export async function GET(request: Request, context: RouteContext) {
+  const { slug } = await context.params;
+  const url = new URL(request.url);
+  const localeParam = url.searchParams.get("locale");
+  const locale = localeParam === "fr" ? "fr" : "en";
+
+  const incident = await fetchIncident(slug);
+
+  const tree = incident
+    ? renderIncidentOg(incident, locale)
+    : renderFallbackOg();
+
+  return new ImageResponse(tree, {
+    width: OG_WIDTH,
+    height: OG_HEIGHT,
+    headers: {
+      "cache-control": incident
+        ? "public, max-age=300, s-maxage=3600, stale-while-revalidate=86400"
+        : "public, max-age=60",
+    },
+  });
+}
diff --git a/web/app/api/og/vessel/[slug]/route.tsx b/web/app/api/og/vessel/[slug]/route.tsx
new file mode 100644
index 0000000..68486e7
--- /dev/null
+++ b/web/app/api/og/vessel/[slug]/route.tsx
@@ -0,0 +1,35 @@
+import { ImageResponse } from "next/og";
+import { fetchVesselSummaries } from "@/lib/krill-watch";
+import {
+  OG_HEIGHT,
+  OG_WIDTH,
+  renderFallbackOg,
+  renderVesselOg,
+} from "@/lib/og-image-renderer";
+
+export const runtime = "edge";
+export const revalidate = 3600;
+
+type RouteContext = { params: Promise<{ slug: string }> };
+
+export async function GET(request: Request, context: RouteContext) {
+  const { slug } = await context.params;
+  const url = new URL(request.url);
+  const localeParam = url.searchParams.get("locale");
+  const locale = localeParam === "fr" ? "fr" : "en";
+
+  const vessels = await fetchVesselSummaries();
+  const vessel = vessels.find((v) => v.slug === slug);
+
+  const tree = vessel ? renderVesselOg(vessel, locale) : renderFallbackOg();
+
+  return new ImageResponse(tree, {
+    width: OG_WIDTH,
+    height: OG_HEIGHT,
+    headers: {
+      "cache-control": vessel
+        ? "public, max-age=300, s-maxage=3600, stale-while-revalidate=86400"
+        : "public, max-age=60",
+    },
+  });
+}
diff --git a/web/app/api/revalidate/route.ts b/web/app/api/revalidate/route.ts
new file mode 100644
index 0000000..0bbf6f2
--- /dev/null
+++ b/web/app/api/revalidate/route.ts
@@ -0,0 +1,60 @@
+import { NextResponse } from "next/server";
+import { revalidatePath, revalidateTag } from "next/cache";
+
+// Webhook called by the Python pipeline (server/services/incident_emitter.py)
+// when an incident is upserted. It nukes the ISR cache for both locale
+// variants of /incident/<slug> so the next visitor sees the fresh row.
+//
+// Body: { slug: string, secret: string }
+// Auth: shared secret in env KRILL_REVALIDATE_SECRET. The Python side reads
+// the same env var. Configure both sides via .env.
+
+export const dynamic = "force-dynamic";
+export const runtime = "nodejs";
+
+type Payload = {
+  slug?: string;
+  secret?: string;
+  // Optional: revalidate a specific tag instead of (or in addition to) the
+  // path-based revalidation. Useful for the future incident list page.
+  tag?: string;
+};
+
+export async function POST(request: Request) {
+  const expected = process.env.KRILL_REVALIDATE_SECRET;
+  if (!expected) {
+    return NextResponse.json(
+      { error: "revalidate secret not configured" },
+      { status: 500 },
+    );
+  }
+
+  let body: Payload;
+  try {
+    body = (await request.json()) as Payload;
+  } catch {
+    return NextResponse.json({ error: "invalid json" }, { status: 400 });
+  }
+
+  if (body.secret !== expected) {
+    return NextResponse.json({ error: "unauthorized" }, { status: 401 });
+  }
+
+  const revalidatedPaths: string[] = [];
+  if (body.slug) {
+    for (const locale of ["fr", "en"] as const) {
+      const path = `/${locale}/incident/${body.slug}`;
+      revalidatePath(path);
+      revalidatedPaths.push(path);
+    }
+  }
+  if (body.tag) {
+    revalidateTag(body.tag);
+  }
+
+  return NextResponse.json({
+    revalidated: true,
+    paths: revalidatedPaths,
+    tag: body.tag ?? null,
+  });
+}
diff --git a/web/app/globals.css b/web/app/globals.css
index e3b0fce..46faec3 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -167,3 +167,37 @@ h3 {
     transition-duration: 0s !important;
   }
 }
+
+/* Incident-page map marker — pulsing dot keyed off --incident-color
+   set inline by IncidentMap.tsx (severity-driven). */
+.incident-marker {
+  --incident-color: var(--color-danger);
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--incident-color);
+  box-shadow:
+    0 0 0 4px color-mix(in srgb, var(--incident-color) 20%, transparent),
+    0 0 24px var(--incident-color);
+  position: relative;
+  cursor: default;
+}
+.incident-marker::after {
+  content: "";
+  position: absolute;
+  inset: -8px;
+  border-radius: 50%;
+  border: 2px solid var(--incident-color);
+  animation: incident-pulse 2s ease-out infinite;
+  pointer-events: none;
+}
+@keyframes incident-pulse {
+  0% {
+    transform: scale(0.6);
+    opacity: 0.9;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
diff --git a/web/components/Acronym.tsx b/web/components/Acronym.tsx
index 907f98d..8c21b5b 100644
--- a/web/components/Acronym.tsx
+++ b/web/components/Acronym.tsx
@@ -1,31 +1,100 @@
+"use client";
+
+import * as React from "react";
 import Link from "next/link";
 import { type Locale } from "@/lib/i18n";
 import { GLOSSARY, glossaryAnchor, type GlossaryKey } from "@/lib/glossary";
+import { cn } from "@/lib/utils";
 
 type Props = {
   term: GlossaryKey;
   locale: Locale;
   children?: React.ReactNode;
+  className?: string;
 };
 
-// Inline acronym affordance:
-// - <abbr> carries the accessible expansion (native screen-reader behaviour)
-// - wrapped in <a> so mobile users (no hover) can tap to reach the glossary
-// - dotted underline tells sighted users it's a help target, not a link
-export function Acronym({ term, locale, children }: Props) {
+// Inline acronym affordance that grows beyond the original hover-only
+// tooltip:
+//   - Desktop: hover still surfaces the native tooltip via the title attr.
+//     Click pins the popover open until clicked again or focus leaves.
+//   - Mobile: tap toggles the popover. Tap outside closes it. The popover
+//     contains a "More →" link to the full /about glossary entry, so the
+//     navigation use-case the legacy <Link> covered is preserved.
+//   - A11y: rendered as a real <button>, with aria-expanded / aria-controls
+//     and the abbr semantics retained inside.
+export function Acronym({ term, locale, children, className }: Props) {
   const entry = GLOSSARY[term];
   const expansion = entry.expansion[locale];
   const definition = entry.definition[locale];
   const tooltip = `${expansion} — ${definition}`;
+  const popoverId = React.useId();
+
+  const [open, setOpen] = React.useState(false);
+  const wrapperRef = React.useRef<HTMLSpanElement | null>(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e: MouseEvent) => {
+      if (!wrapperRef.current) return;
+      if (!wrapperRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const moreLabel = locale === "fr" ? "Voir le glossaire →" : "See glossary →";
+
   return (
-    <Link
-      href={`/${locale}/about#${glossaryAnchor(term)}`}
-      className="acronym"
-      title={tooltip}
-    >
-      <abbr title={tooltip} className="acronym">
-        {children ?? term}
-      </abbr>
-    </Link>
+    <span ref={wrapperRef} className="relative inline">
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={popoverId}
+        title={tooltip}
+        onClick={() => setOpen((o) => !o)}
+        className={cn(
+          "acronym bg-transparent border-0 p-0 cursor-help align-baseline inline",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] rounded-sm",
+          className,
+        )}
+      >
+        <abbr title={tooltip} className="acronym">
+          {children ?? term}
+        </abbr>
+      </button>
+      {open ? (
+        <span
+          id={popoverId}
+          role="dialog"
+          className={cn(
+            "absolute z-30 left-0 top-full mt-1 w-72 max-w-[80vw]",
+            "rounded-md border border-[color:var(--color-border)] bg-[color:var(--color-surface)] shadow-lg",
+            "p-3 text-left text-sm font-normal normal-case",
+          )}
+          style={{ letterSpacing: 0 }}
+        >
+          <span className="block text-[0.7rem] font-mono uppercase tracking-wider text-[color:var(--color-accent)] mb-1">
+            {expansion}
+          </span>
+          <span className="block text-[color:var(--color-text)] leading-relaxed">
+            {definition}
+          </span>
+          <Link
+            href={`/${locale}/about#${glossaryAnchor(term)}`}
+            className="block mt-2 text-[0.7rem] font-mono uppercase tracking-wider text-[color:var(--color-accent)] hover:underline"
+            onClick={() => setOpen(false)}
+          >
+            {moreLabel}
+          </Link>
+        </span>
+      ) : null}
+    </span>
   );
 }
diff --git a/web/components/Flag.tsx b/web/components/Flag.tsx
new file mode 100644
index 0000000..b0ea01d
--- /dev/null
+++ b/web/components/Flag.tsx
@@ -0,0 +1,57 @@
+import "flag-icons/css/flag-icons.min.css";
+
+const ISO3_TO_ISO2: Record<string, string> = {
+  JPN: "JP", ISL: "IS", NOR: "NO", CHN: "CN", RUS: "RU", KOR: "KR",
+  FRA: "FR", GBR: "GB", USA: "US", DEU: "DE", ESP: "ES", ITA: "IT",
+  ARG: "AR", PRT: "PT", IND: "IN", AUS: "AU", NZL: "NZ", CAN: "CA",
+  BRA: "BR", ZAF: "ZA", CHL: "CL", PER: "PE", ECU: "EC", SEN: "SN",
+  MRT: "MR", GIN: "GN", IRL: "IE", DNK: "DK", FIN: "FI", SWE: "SE",
+  NLD: "NL", BEL: "BE", POL: "PL", PAN: "PA", LBR: "LR", MLT: "MT",
+  CYP: "CY", GRC: "GR", TUR: "TR", VNM: "VN", THA: "TH", IDN: "ID",
+  PHL: "PH", MYS: "MY", SGP: "SG", TWN: "TW", HKG: "HK",
+};
+
+function normalize(code: string): string | null {
+  const up = code.trim().toUpperCase();
+  if (up.length === 2) return up.toLowerCase();
+  if (up.length === 3) {
+    const m = ISO3_TO_ISO2[up];
+    return m ? m.toLowerCase() : null;
+  }
+  return null;
+}
+
+type Size = "sm" | "md" | "lg";
+
+const SIZE_CLASS: Record<Size, string> = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-2xl",
+};
+
+type Props = {
+  code?: string | null;
+  size?: Size;
+  className?: string;
+};
+
+export function Flag({ code, size = "md", className = "" }: Props) {
+  if (!code) {
+    return <span aria-hidden className={`${SIZE_CLASS[size]} ${className}`}>🏳️</span>;
+  }
+  if (code === "CPWF") {
+    return <span aria-hidden className={`${SIZE_CLASS[size]} ${className}`}>🦐</span>;
+  }
+  const iso2 = normalize(code);
+  if (!iso2) {
+    return <span aria-hidden className={`${SIZE_CLASS[size]} ${className}`}>🏳️</span>;
+  }
+  return (
+    <span
+      className={`fi fi-${iso2} ${SIZE_CLASS[size]} ${className} inline-block align-middle`}
+      role="img"
+      aria-label={code.toUpperCase()}
+      style={{ width: "1.4em", height: "1em", borderRadius: "2px" }}
+    />
+  );
+}
diff --git a/web/components/Footer.tsx b/web/components/Footer.tsx
index 5e57b5f..a470193 100644
--- a/web/components/Footer.tsx
+++ b/web/components/Footer.tsx
@@ -1,13 +1,14 @@
 import Link from "next/link";
 import { getDict, type Locale } from "@/lib/i18n";
 import { HealthPill } from "@/components/HealthPill";
+import { SupportCTA } from "@/components/SupportCTA";
 
 export function Footer({ locale }: { locale: Locale }) {
   const t = getDict(locale);
 
   return (
     <footer className="border-t border-[color:var(--color-border)] mt-24">
-      <div className="mx-auto max-w-6xl px-5 py-10 grid gap-10 md:grid-cols-3 text-sm">
+      <div className="mx-auto max-w-6xl px-5 py-10 grid gap-10 md:grid-cols-4 text-sm">
         <div>
           <p className="font-[family-name:var(--font-display)] text-lg font-bold tracking-tight">
             krill-<span className="text-[color:var(--color-accent)]">watch</span>
@@ -36,6 +37,31 @@ export function Footer({ locale }: { locale: Locale }) {
             </li>
           </ul>
         </div>
+        <div>
+          <h4 className="text-xs uppercase tracking-wider text-[color:var(--color-text-muted)] mb-3">
+            {locale === "fr" ? "Campagnes" : "Campaigns"}
+          </h4>
+          <ul className="space-y-1.5">
+            <li>
+              <Link href={`/${locale}/campagnes/krill`}>
+                {locale === "fr" ? "Krill antarctique" : "Antarctic krill"}
+              </Link>
+            </li>
+            <li>
+              <Link href={`/${locale}/campagnes/whaling`}>
+                {locale === "fr" ? "Chasse à la baleine" : "Commercial whaling"}
+              </Link>
+            </li>
+            <li>
+              <Link href={`/${locale}/campagnes/galapagos`}>Galápagos</Link>
+            </li>
+            <li>
+              <Link href={`/${locale}/campagnes/west-africa`}>
+                {locale === "fr" ? "Afrique de l'Ouest" : "West Africa"}
+              </Link>
+            </li>
+          </ul>
+        </div>
         <div>
           <h4 className="text-xs uppercase tracking-wider text-[color:var(--color-text-muted)] mb-3">
             {t.footer.sources}
@@ -69,7 +95,10 @@ export function Footer({ locale }: { locale: Locale }) {
           <p className="text-xs text-[color:var(--color-text-muted)]">
             GPL-3 · {t.footer.rights}
           </p>
-          <HealthPill locale={locale} />
+          <div className="flex items-center gap-4">
+            <SupportCTA variant="minimal" locale={locale} />
+            <HealthPill locale={locale} />
+          </div>
         </div>
       </div>
     </footer>
diff --git a/web/components/Nav.tsx b/web/components/Nav.tsx
index ea15ad6..5c7d3f6 100644
--- a/web/components/Nav.tsx
+++ b/web/components/Nav.tsx
@@ -5,7 +5,17 @@ export function Nav({ locale }: { locale: Locale }) {
   const t = getDict(locale);
   const other: Locale = locale === "fr" ? "en" : "fr";
 
-  const items = [{ href: `/${locale}/vessels`, label: t.nav.vessels }];
+  const items = [
+    { href: `/${locale}/vessels`, label: t.nav.vessels },
+    {
+      href: `/${locale}/campagnes`,
+      label: locale === "fr" ? "Campagnes" : "Campaigns",
+    },
+    {
+      href: `/${locale}/about`,
+      label: locale === "fr" ? "À propos" : "About",
+    },
+  ];
 
   return (
     <header className="sticky top-0 z-30 backdrop-blur-md bg-[color:var(--color-bg)]/70 border-b border-[color:var(--color-border)]">
diff --git a/web/components/SupportCTA.tsx b/web/components/SupportCTA.tsx
new file mode 100644
index 0000000..08d6e2c
--- /dev/null
+++ b/web/components/SupportCTA.tsx
@@ -0,0 +1,108 @@
+import Link from "next/link";
+import type { Locale } from "@/lib/i18n";
+
+const STRINGS = {
+  fr: {
+    label: "Soutenir CPWF",
+    bannerLead:
+      "Cette enquête est conduite par la Captain Paul Watson Foundation.",
+    bannerBody:
+      "Le pipeline OSINT que vous parcourez existe parce que CPWF finance les opérations en mer, le matériel d'observation, et la veille terrain qui produisent les preuves recoupées ici.",
+    bannerCta: "Soutenir les missions CPWF →",
+    minimalCta: "Soutenir CPWF →",
+  },
+  en: {
+    label: "Support CPWF",
+    bannerLead:
+      "This investigation is conducted by the Captain Paul Watson Foundation.",
+    bannerBody:
+      "The OSINT pipeline you're browsing exists because CPWF funds the at-sea operations, the observation gear, and the on-the-ground watch that produce the cross-checked evidence here.",
+    bannerCta: "Support CPWF missions →",
+    minimalCta: "Support CPWF →",
+  },
+} as const;
+
+type Variant = "inline" | "banner" | "minimal";
+
+type Props = {
+  variant?: Variant;
+  locale: Locale;
+  className?: string;
+};
+
+function donateUrl(variant: Variant): string {
+  const base = "https://paulwatsonfoundation.org/donate";
+  const params = new URLSearchParams({
+    utm_source: "krill-watch",
+    utm_medium: variant,
+    utm_campaign: "krill-watch-cta",
+  });
+  return `${base}?${params.toString()}`;
+}
+
+export function SupportCTA({
+  variant = "inline",
+  locale,
+  className = "",
+}: Props) {
+  const t = STRINGS[locale];
+  const href = donateUrl(variant);
+
+  if (variant === "minimal") {
+    return (
+      <Link
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={`inline-flex items-center gap-1.5 text-sm font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] hover:text-[color:var(--color-accent)] ${className}`}
+      >
+        {t.minimalCta}
+      </Link>
+    );
+  }
+
+  if (variant === "banner") {
+    return (
+      <aside
+        aria-labelledby="support-cta-heading"
+        className={`rounded-2xl border border-[color:var(--color-accent)]/40 bg-gradient-to-br from-[color:var(--color-accent)]/10 to-transparent p-6 md:p-8 ${className}`}
+      >
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+          <div className="flex-1 max-w-2xl">
+            <h2
+              id="support-cta-heading"
+              className="text-lg md:text-xl font-bold tracking-tight mb-2"
+            >
+              {t.bannerLead}
+            </h2>
+            <p className="text-sm text-[color:var(--color-text-muted)] leading-relaxed">
+              {t.bannerBody}
+            </p>
+          </div>
+          <Link
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-5 py-3 rounded-lg bg-[color:var(--color-accent)] text-[#06080d] text-sm font-mono uppercase tracking-wider font-bold hover:bg-[color:var(--color-accent-soft)] whitespace-nowrap"
+          >
+            {t.bannerCta}
+          </Link>
+        </div>
+      </aside>
+    );
+  }
+
+  // inline
+  return (
+    <Link
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[color:var(--color-accent)] text-[#06080d] text-sm font-mono uppercase tracking-wider font-bold hover:bg-[color:var(--color-accent-soft)] ${className}`}
+    >
+      {t.label} →
+    </Link>
+  );
+}
+
+export default SupportCTA;
diff --git a/web/components/campaign/CampaignFleetList.tsx b/web/components/campaign/CampaignFleetList.tsx
new file mode 100644
index 0000000..66c9767
--- /dev/null
+++ b/web/components/campaign/CampaignFleetList.tsx
@@ -0,0 +1,65 @@
+import Link from "next/link";
+import { Flag } from "@/components/Flag";
+import { SeverityBadge, type Severity } from "@/components/SeverityBadge";
+import { getCampaignVessels, type CampaignSlug } from "@/lib/campaigns";
+import { fetchVesselSummaries } from "@/lib/krill-watch";
+import type { Locale } from "@/lib/i18n";
+
+type Props = { slug: CampaignSlug; locale: Locale };
+
+const HEADING = {
+  fr: { title: "Flotte suivie", lead: "Cliquez sur un navire pour le détail." },
+  en: { title: "Tracked fleet", lead: "Click any vessel for full detail." },
+} as const;
+
+const KNOWN_SEV = new Set(["CRITICAL", "SUSPICIOUS", "WATCH", "NORMAL"]);
+
+function asSeverity(s: string): Severity {
+  return KNOWN_SEV.has(s) ? (s as Severity) : "WATCH";
+}
+
+export async function CampaignFleetList({ slug, locale }: Props) {
+  const all = await fetchVesselSummaries();
+  const vessels = getCampaignVessels(slug, all);
+  const t = HEADING[locale];
+
+  return (
+    <section className="px-5 py-16 max-w-6xl mx-auto">
+      <h2 className="text-2xl md:text-3xl font-bold mb-1">{t.title}</h2>
+      <p className="text-[color:var(--color-text-muted)] mb-6">{t.lead}</p>
+      {vessels.length === 0 ? (
+        <p className="text-[color:var(--color-text-muted)] text-sm">
+          {locale === "fr"
+            ? "Aucun navire actif pour cette campagne."
+            : "No active vessel for this campaign."}
+        </p>
+      ) : (
+        <ul className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+          {vessels.map((v) => (
+            <li key={v.slug}>
+              <Link
+                href={`/${locale}/vessels/${v.slug}`}
+                className="block card p-4 hover:border-[color:var(--color-accent)] transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <Flag code={v.flag} size="md" />
+                  <div className="min-w-0 flex-1">
+                    <div className="font-semibold truncate">{v.name}</div>
+                    <div className="text-[0.7rem] font-mono text-[color:var(--color-text-muted)] truncate">
+                      {v.imo ? `IMO ${v.imo}` : v.mmsi ? `MMSI ${v.mmsi}` : "—"}
+                    </div>
+                  </div>
+                  {v.severity ? (
+                    <SeverityBadge severity={asSeverity(v.severity)} locale={locale} />
+                  ) : null}
+                </div>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+export default CampaignFleetList;
diff --git a/web/components/campaign/CampaignHero.tsx b/web/components/campaign/CampaignHero.tsx
new file mode 100644
index 0000000..d9e7b1a
--- /dev/null
+++ b/web/components/campaign/CampaignHero.tsx
@@ -0,0 +1,109 @@
+import { CAMPAIGNS, type CampaignSlug } from "@/lib/campaigns";
+import type { Locale } from "@/lib/i18n";
+
+type Props = {
+  slug: CampaignSlug;
+  locale: Locale;
+  // Editorial copy comes from web/data/campaigns/<slug>.<locale>.md (P2-T06).
+  // For now we accept a pre-resolved payload so the route can render
+  // placeholder text while the real MDs are being written.
+  copy: {
+    tag: string;
+    title: string;
+    titleAccent?: string | null;
+    lead: string;
+    metric1?: { label: string; value: string } | null;
+    metric2?: { label: string; value: string } | null;
+    metric3?: { label: string; value: string } | null;
+  };
+};
+
+const STRINGS = {
+  fr: {
+    ctaPrimary: "Voir la flotte",
+    ctaSecondary: "Soutenir CPWF",
+  },
+  en: {
+    ctaPrimary: "View the fleet",
+    ctaSecondary: "Support CPWF",
+  },
+} as const;
+
+export function CampaignHero({ slug, locale, copy }: Props) {
+  const c = CAMPAIGNS[slug];
+  const t = STRINGS[locale];
+  return (
+    <section
+      className="relative overflow-hidden border-b border-[color:var(--color-border)]"
+      style={{ background: c.bgGradient }}
+    >
+      <div className="max-w-6xl mx-auto px-5 py-16 md:py-24">
+        <p
+          className="inline-flex items-center gap-2 text-[0.7rem] uppercase tracking-[0.16em] font-semibold rounded-full px-3 py-1 border"
+          style={{
+            color: c.primaryColor,
+            borderColor: `color-mix(in srgb, ${c.primaryColor} 40%, transparent)`,
+            background: `color-mix(in srgb, ${c.primaryColor} 10%, transparent)`,
+            fontFamily: "var(--font-mono)",
+          }}
+        >
+          <span
+            aria-hidden="true"
+            className="inline-block w-1.5 h-1.5 rounded-full animate-pulse"
+            style={{ background: c.primaryColor }}
+          />
+          {copy.tag}
+        </p>
+        <h1 className="mt-6 text-4xl md:text-6xl font-bold leading-[1.05] max-w-4xl">
+          <span>{copy.title}</span>{" "}
+          {copy.titleAccent ? (
+            <span style={{ color: c.primaryColor }}>{copy.titleAccent}</span>
+          ) : null}
+        </h1>
+        <p className="mt-6 text-lg max-w-3xl text-[color:var(--color-text)]">
+          {copy.lead}
+        </p>
+
+        <div className="mt-8 flex flex-wrap items-center gap-3">
+          <a
+            href={`/${locale}/vessels#${slug}`}
+            className="btn btn-primary"
+            style={{ background: c.primaryColor, color: "#06080d" }}
+          >
+            {t.ctaPrimary} →
+          </a>
+          <a
+            href="https://www.paulwatsonfoundation.org/en/donate"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn btn-ghost"
+          >
+            {t.ctaSecondary}
+          </a>
+        </div>
+
+        {copy.metric1 || copy.metric2 || copy.metric3 ? (
+          <ul className="mt-10 grid grid-cols-3 gap-3 max-w-2xl">
+            {[copy.metric1, copy.metric2, copy.metric3]
+              .filter(Boolean)
+              .map((m, i) => (
+                <li
+                  key={i}
+                  className="rounded-lg border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-3"
+                >
+                  <div className="text-2xl font-bold" style={{ color: c.primaryColor }}>
+                    {m!.value}
+                  </div>
+                  <div className="text-[0.7rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] mt-0.5">
+                    {m!.label}
+                  </div>
+                </li>
+              ))}
+          </ul>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+export default CampaignHero;
diff --git a/web/components/campaign/CampaignLegalFrame.tsx b/web/components/campaign/CampaignLegalFrame.tsx
new file mode 100644
index 0000000..535f65d
--- /dev/null
+++ b/web/components/campaign/CampaignLegalFrame.tsx
@@ -0,0 +1,28 @@
+import type { Locale } from "@/lib/i18n";
+
+type Props = {
+  locale: Locale;
+  heading: string;
+  body: string; // pre-rendered markdown -> HTML or raw text from P2-T06
+};
+
+const SECTION_LABEL = {
+  fr: "Cadre légal & enjeu",
+  en: "Legal frame & stakes",
+} as const;
+
+export function CampaignLegalFrame({ locale, heading, body }: Props) {
+  return (
+    <section className="px-5 py-16 max-w-3xl mx-auto">
+      <p className="text-[0.7rem] font-mono uppercase tracking-wider text-[color:var(--color-accent)] mb-2">
+        {SECTION_LABEL[locale]}
+      </p>
+      <h2 className="text-2xl md:text-3xl font-bold mb-4">{heading}</h2>
+      <p className="text-[color:var(--color-text)] leading-relaxed whitespace-pre-line">
+        {body}
+      </p>
+    </section>
+  );
+}
+
+export default CampaignLegalFrame;
diff --git a/web/components/campaign/CampaignSeasonCalendar.tsx b/web/components/campaign/CampaignSeasonCalendar.tsx
new file mode 100644
index 0000000..93d8443
--- /dev/null
+++ b/web/components/campaign/CampaignSeasonCalendar.tsx
@@ -0,0 +1,58 @@
+import type { Locale } from "@/lib/i18n";
+import { CAMPAIGNS, type CampaignSlug } from "@/lib/campaigns";
+
+type Props = {
+  slug: CampaignSlug;
+  locale: Locale;
+  // Months 1..12 that the campaign considers "high pressure" — fed from
+  // editorial MD by P2-T06; placeholder here so the layout shows up empty
+  // but valid until then.
+  activeMonths?: number[];
+  caption?: string;
+};
+
+const HEADING = {
+  fr: { title: "Calendrier saisonnier", monthsShort: "JFMAMJJASOND".split("") },
+  en: { title: "Seasonal calendar", monthsShort: "JFMAMJJASOND".split("") },
+} as const;
+
+export function CampaignSeasonCalendar({ slug, locale, activeMonths, caption }: Props) {
+  const c = CAMPAIGNS[slug];
+  const t = HEADING[locale];
+  const months = Array.from({ length: 12 }, (_, i) => i + 1);
+  const active = new Set(activeMonths ?? []);
+
+  return (
+    <section className="px-5 py-16 max-w-3xl mx-auto">
+      <h2 className="text-2xl md:text-3xl font-bold mb-4">{t.title}</h2>
+      <div className="rounded-xl border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-4">
+        <ol className="grid grid-cols-12 gap-1 font-mono text-[0.7rem] uppercase tracking-wider">
+          {months.map((m) => (
+            <li
+              key={m}
+              className="text-center py-2 rounded-sm"
+              style={{
+                background: active.has(m)
+                  ? `color-mix(in srgb, ${c.primaryColor} 35%, transparent)`
+                  : "var(--color-surface-2)",
+                color: active.has(m)
+                  ? "#06080d"
+                  : "var(--color-text-muted)",
+              }}
+              title={`${t.monthsShort[m - 1]}${active.has(m) ? " — active" : ""}`}
+            >
+              {t.monthsShort[m - 1]}
+            </li>
+          ))}
+        </ol>
+        {caption ? (
+          <p className="mt-3 text-xs text-[color:var(--color-text-muted)]">
+            {caption}
+          </p>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+export default CampaignSeasonCalendar;
diff --git a/web/components/campaign/CampaignSourcesList.tsx b/web/components/campaign/CampaignSourcesList.tsx
new file mode 100644
index 0000000..308f5d0
--- /dev/null
+++ b/web/components/campaign/CampaignSourcesList.tsx
@@ -0,0 +1,69 @@
+import type { Locale } from "@/lib/i18n";
+
+type Source = {
+  label: string;
+  url: string;
+  note?: string;
+};
+
+type Props = {
+  locale: Locale;
+  sources: Source[];
+};
+
+const HEADING = {
+  fr: { title: "Sources & registres", lead: "Tout est publiquement vérifiable." },
+  en: { title: "Sources & registries", lead: "Everything is publicly verifiable." },
+} as const;
+
+function host(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+export function CampaignSourcesList({ locale, sources }: Props) {
+  const t = HEADING[locale];
+  if (sources.length === 0) {
+    return (
+      <section className="px-5 py-16 max-w-3xl mx-auto">
+        <h2 className="text-2xl md:text-3xl font-bold mb-1">{t.title}</h2>
+        <p className="text-sm text-[color:var(--color-text-muted)]">
+          {locale === "fr"
+            ? "Sources à venir."
+            : "Sources coming soon."}
+        </p>
+      </section>
+    );
+  }
+  return (
+    <section className="px-5 py-16 max-w-3xl mx-auto">
+      <h2 className="text-2xl md:text-3xl font-bold mb-1">{t.title}</h2>
+      <p className="text-[color:var(--color-text-muted)] mb-6">{t.lead}</p>
+      <ul className="space-y-2 text-sm">
+        {sources.map((s) => (
+          <li key={s.url} className="flex items-baseline gap-3">
+            <a
+              href={s.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-mono text-[color:var(--color-accent)] hover:underline"
+            >
+              {host(s.url)}
+            </a>
+            <span className="text-[color:var(--color-text)]">{s.label}</span>
+            {s.note ? (
+              <span className="text-[0.7rem] font-mono text-[color:var(--color-text-muted)]">
+                {s.note}
+              </span>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export default CampaignSourcesList;
diff --git a/web/components/campaign/CampaignTimeline.tsx b/web/components/campaign/CampaignTimeline.tsx
new file mode 100644
index 0000000..8ec564a
--- /dev/null
+++ b/web/components/campaign/CampaignTimeline.tsx
@@ -0,0 +1,100 @@
+import { fetchVesselSummaries } from "@/lib/krill-watch";
+import { apiBaseUrl } from "@/lib/krill-watch";
+import { getCampaignVessels, type CampaignSlug } from "@/lib/campaigns";
+import type { Locale } from "@/lib/i18n";
+
+type Props = { slug: CampaignSlug; locale: Locale };
+
+type ApiEvent = {
+  id: number | string;
+  vessel_slug: string;
+  vessel_name?: string | null;
+  ts: string;
+  event_type: string;
+  zone_name?: string | null;
+  zone_id?: string | null;
+  severity?: string | null;
+};
+
+const HEADING = {
+  fr: {
+    title: "Chronologie 90 jours",
+    lead: "Événements clés détectés sur la flotte de la campagne.",
+    empty: "Aucun événement notable sur les 90 derniers jours.",
+  },
+  en: {
+    title: "90-day timeline",
+    lead: "Key events detected on the campaign fleet.",
+    empty: "No notable events in the last 90 days.",
+  },
+} as const;
+
+async function fetchCampaignEvents(slugs: string[]): Promise<ApiEvent[]> {
+  const base = apiBaseUrl();
+  if (!base || slugs.length === 0) return [];
+  try {
+    // /api/events accepts ?slug=<one>; fan out and merge to keep the
+    // backend contract stable. 90 days = ~14 days * 7 vessels worst-case.
+    const all: ApiEvent[] = [];
+    for (const s of slugs) {
+      const r = await fetch(`${base}/api/events?slug=${encodeURIComponent(s)}&days=90`, {
+        next: { revalidate: 300, tags: [`campaign-events-${s}`] },
+      });
+      if (!r.ok) continue;
+      const data = (await r.json()) as { events?: ApiEvent[] } | ApiEvent[];
+      const list = Array.isArray(data) ? data : data.events ?? [];
+      all.push(...list);
+    }
+    all.sort((a, b) => (b.ts || "").localeCompare(a.ts || ""));
+    return all.slice(0, 40);
+  } catch {
+    return [];
+  }
+}
+
+function formatTs(ts: string, locale: Locale): string {
+  const d = new Date(ts);
+  if (Number.isNaN(d.getTime())) return ts;
+  return d.toLocaleString(locale === "fr" ? "fr-FR" : "en-GB", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export async function CampaignTimeline({ slug, locale }: Props) {
+  const all = await fetchVesselSummaries();
+  const vessels = getCampaignVessels(slug, all);
+  const events = await fetchCampaignEvents(vessels.map((v) => v.slug));
+  const t = HEADING[locale];
+
+  return (
+    <section className="px-5 py-16 max-w-3xl mx-auto">
+      <h2 className="text-2xl md:text-3xl font-bold mb-1">{t.title}</h2>
+      <p className="text-[color:var(--color-text-muted)] mb-6">{t.lead}</p>
+      {events.length === 0 ? (
+        <p className="text-sm text-[color:var(--color-text-muted)]">{t.empty}</p>
+      ) : (
+        <ol className="space-y-2 font-mono text-[0.78rem] leading-relaxed border border-[color:var(--color-border)] rounded-md bg-[color:var(--color-bg)] divide-y divide-[color:var(--color-border)]">
+          {events.map((e) => (
+            <li key={`${e.id}-${e.ts}`} className="px-3 py-1.5">
+              <span className="text-[color:var(--color-text-muted)]">
+                {formatTs(e.ts, locale)}
+              </span>
+              <span className="mx-2 text-[color:var(--color-accent)]">
+                {e.event_type}
+              </span>
+              <span className="text-[color:var(--color-text)]">
+                {e.vessel_name ?? e.vessel_slug}
+                {e.zone_name || e.zone_id ? ` · ${e.zone_name ?? e.zone_id}` : ""}
+              </span>
+            </li>
+          ))}
+        </ol>
+      )}
+    </section>
+  );
+}
+
+export default CampaignTimeline;
diff --git a/web/components/contribute/ContributionForm.tsx b/web/components/contribute/ContributionForm.tsx
new file mode 100644
index 0000000..5c84aec
--- /dev/null
+++ b/web/components/contribute/ContributionForm.tsx
@@ -0,0 +1,416 @@
+"use client";
+
+import * as React from "react";
+import { PhotoUpload } from "./PhotoUpload";
+import { ContributionSuccess } from "./ContributionSuccess";
+
+const MIN_DESC = 50;
+
+type Category = "vessel-sighting" | "transhipment" | "ais-anomaly" | "other";
+
+const STRINGS = {
+  fr: {
+    sectionType: "Type de signalement",
+    sectionDetails: "Détails de l'observation",
+    sectionContact: "Contact (optionnel)",
+    sectionConfirm: "Soumission",
+    types: {
+      "vessel-sighting": {
+        label: "Observation directe d'un navire",
+        icon: "🚢",
+      },
+      transhipment: {
+        label: "Transbordement suspect en mer",
+        icon: "🔄",
+      },
+      "ais-anomaly": {
+        label: "Anomalie AIS (coupure, identité erronée)",
+        icon: "📡",
+      },
+      other: {
+        label: "Autre (témoignage, document)",
+        icon: "📝",
+      },
+    },
+    vesselName: "Nom du navire (si connu)",
+    vesselImo: "IMO",
+    vesselMmsi: "MMSI",
+    observedAt: "Date et heure d'observation (UTC)",
+    observedLat: "Latitude",
+    observedLon: "Longitude",
+    description: "Description détaillée",
+    descHelp: `Décrivez ce que vous avez observé, où, quand, ce qui vous a alerté. Minimum ${MIN_DESC} caractères.`,
+    descShort: `Encore au moins {n} caractère(s) requis.`,
+    contactEmail: "Email (pour vous recontacter si besoin)",
+    contactName: "Nom (optionnel)",
+    consent:
+      "Je certifie que les informations fournies sont sincères. Je comprends que krill-watch peut publier ces données après vérification.",
+    submit: "Envoyer le signalement",
+    sending: "Envoi en cours…",
+    error:
+      "Erreur lors de la soumission. Veuillez réessayer dans quelques instants.",
+  },
+  en: {
+    sectionType: "Type of report",
+    sectionDetails: "Observation details",
+    sectionContact: "Contact (optional)",
+    sectionConfirm: "Submit",
+    types: {
+      "vessel-sighting": {
+        label: "Direct vessel sighting",
+        icon: "🚢",
+      },
+      transhipment: {
+        label: "Suspected at-sea transhipment",
+        icon: "🔄",
+      },
+      "ais-anomaly": {
+        label: "AIS anomaly (gap, spoofing)",
+        icon: "📡",
+      },
+      other: {
+        label: "Other (testimony, document)",
+        icon: "📝",
+      },
+    },
+    vesselName: "Vessel name (if known)",
+    vesselImo: "IMO",
+    vesselMmsi: "MMSI",
+    observedAt: "Observation date & time (UTC)",
+    observedLat: "Latitude",
+    observedLon: "Longitude",
+    description: "Detailed description",
+    descHelp: `Describe what you observed, where, when, what raised your concern. Minimum ${MIN_DESC} characters.`,
+    descShort: `{n} more character(s) required.`,
+    contactEmail: "Email (so we can reach back if needed)",
+    contactName: "Name (optional)",
+    consent:
+      "I certify that the information provided is truthful. I understand krill-watch may publish this data after verification.",
+    submit: "Submit report",
+    sending: "Submitting…",
+    error:
+      "Submission error. Please try again in a moment.",
+  },
+} as const;
+
+type Props = { locale: "fr" | "en" };
+
+type FormState = {
+  category: Category;
+  vesselName: string;
+  vesselImo: string;
+  vesselMmsi: string;
+  observedAt: string;
+  observedLat: string;
+  observedLon: string;
+  description: string;
+  contactEmail: string;
+  contactName: string;
+  photo: File | null;
+  consent: boolean;
+};
+
+const INITIAL: FormState = {
+  category: "vessel-sighting",
+  vesselName: "",
+  vesselImo: "",
+  vesselMmsi: "",
+  observedAt: "",
+  observedLat: "",
+  observedLon: "",
+  description: "",
+  contactEmail: "",
+  contactName: "",
+  photo: null,
+  consent: false,
+};
+
+export function ContributionForm({ locale }: Props) {
+  const t = STRINGS[locale];
+  const [state, setState] = React.useState<FormState>(INITIAL);
+  const [submitting, setSubmitting] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [submitted, setSubmitted] = React.useState<{
+    id: string;
+    short_id: string;
+  } | null>(null);
+
+  const update = <K extends keyof FormState>(key: K, value: FormState[K]) => {
+    setState((s) => ({ ...s, [key]: value }));
+  };
+
+  const descLeft = Math.max(0, MIN_DESC - state.description.trim().length);
+  const canSubmit =
+    !submitting && descLeft === 0 && state.consent;
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+    setSubmitting(true);
+    setError(null);
+
+    const fd = new FormData();
+    fd.append("category", state.category);
+    fd.append("description", state.description.trim());
+    if (state.contactEmail.trim()) fd.append("contact_email", state.contactEmail.trim());
+    if (state.contactName.trim()) fd.append("contact_name", state.contactName.trim());
+    if (state.vesselName.trim()) fd.append("vessel_name", state.vesselName.trim());
+    if (state.vesselImo.trim()) fd.append("vessel_imo", state.vesselImo.trim());
+    if (state.vesselMmsi.trim()) fd.append("vessel_mmsi", state.vesselMmsi.trim());
+    if (state.observedAt) fd.append("observed_at", new Date(state.observedAt).toISOString());
+    if (state.observedLat) fd.append("observed_lat", state.observedLat);
+    if (state.observedLon) fd.append("observed_lon", state.observedLon);
+    if (state.photo) fd.append("photo", state.photo, state.photo.name);
+
+    try {
+      const res = await fetch("/api/contribute", {
+        method: "POST",
+        body: fd,
+      });
+      if (!res.ok) {
+        const detail = await res.text();
+        setError(detail || t.error);
+        setSubmitting(false);
+        return;
+      }
+      const json = (await res.json()) as { id: string; short_id: string };
+      setSubmitted(json);
+    } catch (err) {
+      setError((err as Error).message || t.error);
+      setSubmitting(false);
+    }
+  };
+
+  if (submitted) {
+    return (
+      <ContributionSuccess
+        shortId={submitted.short_id}
+        contactProvided={Boolean(state.contactEmail.trim())}
+        locale={locale}
+      />
+    );
+  }
+
+  const showVesselFields =
+    state.category === "vessel-sighting" ||
+    state.category === "transhipment" ||
+    state.category === "ais-anomaly";
+  const showPositionFields =
+    state.category === "vessel-sighting" || state.category === "transhipment";
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-10">
+      <Section title={t.sectionType}>
+        <fieldset className="grid sm:grid-cols-2 gap-3">
+          <legend className="sr-only">{t.sectionType}</legend>
+          {(Object.keys(t.types) as Category[]).map((cat) => {
+            const checked = state.category === cat;
+            return (
+              <label
+                key={cat}
+                className={`flex items-center gap-3 cursor-pointer rounded-lg border px-4 py-3 ${
+                  checked
+                    ? "border-[color:var(--color-accent)] bg-[color:var(--color-accent)]/10"
+                    : "border-[color:var(--color-border)] hover:border-[color:var(--color-text-muted)]"
+                }`}
+              >
+                <input
+                  type="radio"
+                  name="category"
+                  value={cat}
+                  checked={checked}
+                  onChange={() => update("category", cat)}
+                  className="sr-only"
+                />
+                <span aria-hidden className="text-2xl">
+                  {t.types[cat].icon}
+                </span>
+                <span className="text-sm">{t.types[cat].label}</span>
+              </label>
+            );
+          })}
+        </fieldset>
+      </Section>
+
+      <Section title={t.sectionDetails}>
+        <div className="grid sm:grid-cols-2 gap-4">
+          {showVesselFields && (
+            <>
+              <Field label={t.vesselName}>
+                <input
+                  type="text"
+                  value={state.vesselName}
+                  onChange={(e) => update("vesselName", e.currentTarget.value)}
+                  className={inputClass}
+                />
+              </Field>
+              <div className="grid grid-cols-2 gap-4">
+                <Field label={t.vesselImo}>
+                  <input
+                    type="text"
+                    value={state.vesselImo}
+                    onChange={(e) => update("vesselImo", e.currentTarget.value)}
+                    className={inputClass}
+                  />
+                </Field>
+                <Field label={t.vesselMmsi}>
+                  <input
+                    type="text"
+                    value={state.vesselMmsi}
+                    onChange={(e) => update("vesselMmsi", e.currentTarget.value)}
+                    className={inputClass}
+                  />
+                </Field>
+              </div>
+            </>
+          )}
+          <Field label={t.observedAt}>
+            <input
+              type="datetime-local"
+              value={state.observedAt}
+              onChange={(e) => update("observedAt", e.currentTarget.value)}
+              className={inputClass}
+            />
+          </Field>
+          {showPositionFields && (
+            <div className="grid grid-cols-2 gap-4">
+              <Field label={t.observedLat}>
+                <input
+                  type="number"
+                  step="0.0001"
+                  value={state.observedLat}
+                  onChange={(e) => update("observedLat", e.currentTarget.value)}
+                  className={inputClass}
+                />
+              </Field>
+              <Field label={t.observedLon}>
+                <input
+                  type="number"
+                  step="0.0001"
+                  value={state.observedLon}
+                  onChange={(e) => update("observedLon", e.currentTarget.value)}
+                  className={inputClass}
+                />
+              </Field>
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6">
+          <Field label={t.description}>
+            <textarea
+              value={state.description}
+              onChange={(e) => update("description", e.currentTarget.value)}
+              rows={6}
+              className={`${inputClass} resize-y`}
+              required
+              minLength={MIN_DESC}
+            />
+            <p className="mt-1 text-xs text-[color:var(--color-text-muted)]">
+              {descLeft > 0 ? t.descShort.replace("{n}", String(descLeft)) : t.descHelp}
+            </p>
+          </Field>
+        </div>
+
+        <div className="mt-6">
+          <PhotoUpload
+            value={state.photo}
+            onChange={(f) => update("photo", f)}
+            locale={locale}
+          />
+        </div>
+      </Section>
+
+      <Section title={t.sectionContact}>
+        <div className="grid sm:grid-cols-2 gap-4">
+          <Field label={t.contactEmail}>
+            <input
+              type="email"
+              value={state.contactEmail}
+              onChange={(e) => update("contactEmail", e.currentTarget.value)}
+              className={inputClass}
+              autoComplete="email"
+            />
+          </Field>
+          <Field label={t.contactName}>
+            <input
+              type="text"
+              value={state.contactName}
+              onChange={(e) => update("contactName", e.currentTarget.value)}
+              className={inputClass}
+              autoComplete="name"
+            />
+          </Field>
+        </div>
+      </Section>
+
+      <Section title={t.sectionConfirm}>
+        <label className="flex items-start gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={state.consent}
+            onChange={(e) => update("consent", e.currentTarget.checked)}
+            className="mt-1"
+          />
+          <span className="text-sm text-[color:var(--color-text-muted)]">
+            {t.consent}
+          </span>
+        </label>
+
+        <div className="mt-6 flex flex-col sm:flex-row sm:items-center gap-4">
+          <button
+            type="submit"
+            disabled={!canSubmit}
+            className="px-6 py-3 rounded-lg bg-[color:var(--color-accent)] text-[#06080d] text-sm font-mono uppercase tracking-wider font-bold hover:bg-[color:var(--color-accent-soft)] disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {submitting ? t.sending : t.submit}
+          </button>
+          {error && (
+            <p className="text-sm text-[color:var(--color-danger)]" role="alert">
+              {error}
+            </p>
+          )}
+        </div>
+      </Section>
+    </form>
+  );
+}
+
+const inputClass =
+  "w-full px-3 py-2 rounded-lg bg-[color:var(--color-surface)] border border-[color:var(--color-border)] text-sm focus:outline-none focus:border-[color:var(--color-accent)]";
+
+function Section({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-4">
+      <h2 className="text-xs font-mono uppercase tracking-[0.2em] text-[color:var(--color-text-muted)]">
+        {title}
+      </h2>
+      <div>{children}</div>
+    </section>
+  );
+}
+
+function Field({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <label className="block">
+      <span className="block text-sm font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] mb-2">
+        {label}
+      </span>
+      {children}
+    </label>
+  );
+}
+
+export default ContributionForm;
diff --git a/web/components/contribute/ContributionSuccess.tsx b/web/components/contribute/ContributionSuccess.tsx
new file mode 100644
index 0000000..82e41da
--- /dev/null
+++ b/web/components/contribute/ContributionSuccess.tsx
@@ -0,0 +1,66 @@
+import Link from "next/link";
+
+const STRINGS = {
+  fr: {
+    title: "Merci.",
+    body: (id: string) =>
+      `Votre signalement a été reçu (#${id}). Nous le passerons en revue dans les sept jours.`,
+    contactNote:
+      "Vous avez fourni un email — nous vous recontacterons si nous avons besoin de plus de contexte.",
+    home: "← Retour à l'accueil",
+  },
+  en: {
+    title: "Thank you.",
+    body: (id: string) =>
+      `Your report has been received (#${id}). We'll review it within seven days.`,
+    contactNote:
+      "You provided an email — we'll reach back if we need more context.",
+    home: "← Back to home",
+  },
+} as const;
+
+type Props = {
+  shortId: string;
+  contactProvided: boolean;
+  locale: "fr" | "en";
+};
+
+export function ContributionSuccess({
+  shortId,
+  contactProvided,
+  locale,
+}: Props) {
+  const t = STRINGS[locale];
+  return (
+    <div
+      role="status"
+      className="rounded-2xl border border-[color:var(--color-good)] bg-[color:var(--color-surface)] p-8"
+    >
+      <div className="flex items-center gap-3 mb-4">
+        <span
+          aria-hidden
+          className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-[color:var(--color-good)] text-[#06080d] text-2xl font-bold"
+        >
+          ✓
+        </span>
+        <h2 className="text-2xl font-bold tracking-tight">{t.title}</h2>
+      </div>
+      <p className="text-base leading-relaxed">{t.body(shortId)}</p>
+      {contactProvided && (
+        <p className="mt-3 text-sm text-[color:var(--color-text-muted)]">
+          {t.contactNote}
+        </p>
+      )}
+      <div className="mt-6">
+        <Link
+          href={`/${locale}`}
+          className="text-sm font-mono uppercase tracking-wider text-[color:var(--color-accent)] hover:underline"
+        >
+          {t.home}
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default ContributionSuccess;
diff --git a/web/components/contribute/PhotoUpload.tsx b/web/components/contribute/PhotoUpload.tsx
new file mode 100644
index 0000000..916c761
--- /dev/null
+++ b/web/components/contribute/PhotoUpload.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import * as React from "react";
+
+const MAX_BYTES = 5 * 1024 * 1024;
+const ACCEPTED = "image/jpeg,image/png,image/webp,image/heic";
+
+const STRINGS = {
+  fr: {
+    label: "Photo (optionnel)",
+    placeholder: "Glisser une image ici, ou cliquer pour parcourir",
+    limits: "JPG, PNG, WebP ou HEIC · 5 Mo max",
+    remove: "Retirer",
+    tooLarge: "Image trop grande — 5 Mo maximum.",
+    badType: "Format non supporté.",
+  },
+  en: {
+    label: "Photo (optional)",
+    placeholder: "Drop an image here, or click to browse",
+    limits: "JPG, PNG, WebP or HEIC · 5 MB max",
+    remove: "Remove",
+    tooLarge: "Image too large — 5 MB maximum.",
+    badType: "Unsupported format.",
+  },
+} as const;
+
+type Props = {
+  value: File | null;
+  onChange: (file: File | null) => void;
+  locale: "fr" | "en";
+};
+
+function readableSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+export function PhotoUpload({ value, onChange, locale }: Props) {
+  const t = STRINGS[locale];
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [previewUrl, setPreviewUrl] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    if (!value) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(value);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [value]);
+
+  const validate = (file: File): string | null => {
+    if (file.size > MAX_BYTES) return t.tooLarge;
+    if (!ACCEPTED.split(",").includes(file.type) && !file.name.match(/\.(heic|heif|jpe?g|png|webp)$/i)) {
+      return t.badType;
+    }
+    return null;
+  };
+
+  const onPick = (file: File | null) => {
+    setError(null);
+    if (!file) {
+      onChange(null);
+      return;
+    }
+    const err = validate(file);
+    if (err) {
+      setError(err);
+      return;
+    }
+    onChange(file);
+  };
+
+  return (
+    <div>
+      <label className="block text-sm font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] mb-2">
+        {t.label}
+      </label>
+      {value && previewUrl ? (
+        <div className="flex items-center gap-3 rounded-lg border border-[color:var(--color-border)] p-3 bg-[color:var(--color-surface)]">
+          <img
+            src={previewUrl}
+            alt=""
+            className="w-20 h-20 object-cover rounded"
+          />
+          <div className="flex-1 text-sm">
+            <div className="font-mono">{value.name}</div>
+            <div className="text-xs text-[color:var(--color-text-muted)]">
+              {readableSize(value.size)} · {value.type || "?"}
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={() => onPick(null)}
+            className="text-xs font-mono uppercase tracking-wider text-[color:var(--color-danger)] hover:underline"
+          >
+            {t.remove}
+          </button>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => inputRef.current?.click()}
+          onDragOver={(e) => e.preventDefault()}
+          onDrop={(e) => {
+            e.preventDefault();
+            const f = e.dataTransfer.files?.[0];
+            if (f) onPick(f);
+          }}
+          className="w-full rounded-lg border-2 border-dashed border-[color:var(--color-border)] p-6 text-center hover:border-[color:var(--color-accent)] transition-colors"
+        >
+          <div className="text-sm">{t.placeholder}</div>
+          <div className="text-xs text-[color:var(--color-text-muted)] mt-1">
+            {t.limits}
+          </div>
+        </button>
+      )}
+      <input
+        ref={inputRef}
+        type="file"
+        accept={ACCEPTED}
+        className="hidden"
+        onChange={(e) => onPick(e.currentTarget.files?.[0] ?? null)}
+      />
+      {error && (
+        <p className="mt-2 text-xs text-[color:var(--color-danger)]">{error}</p>
+      )}
+    </div>
+  );
+}
+
+export default PhotoUpload;
diff --git a/web/components/home/ActiveAlertsStrip.tsx b/web/components/home/ActiveAlertsStrip.tsx
index fc7eda4..339498b 100644
--- a/web/components/home/ActiveAlertsStrip.tsx
+++ b/web/components/home/ActiveAlertsStrip.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { fetchTopAlerts, type VesselSummary } from "@/lib/krill-watch";
 import { type Locale, getDict } from "@/lib/i18n";
-import { flagEmoji } from "@/lib/utils";
+import { Flag } from "@/components/Flag";
 import { VESSELS, type VesselMission } from "@/data/vessels";
 import { slugify } from "@/lib/utils";
 import { MissionBadge } from "@/components/MissionBadge";
@@ -81,9 +81,7 @@ function AlertCard({
       className="card p-4 block hover:translate-y-[-2px] transition-transform h-full"
     >
       <div className="flex items-center gap-2 flex-wrap">
-        <span className="text-base" aria-hidden>
-          {alert.flag ? flagEmoji(alert.flag) : "🏳️"}
-        </span>
+        <Flag code={alert.flag} size="md" />
         <p className="font-bold truncate">{alert.name}</p>
       </div>
       <div className="mt-2 flex items-center gap-2 flex-wrap">
diff --git a/web/components/home/HeroHeadline.tsx b/web/components/home/HeroHeadline.tsx
new file mode 100644
index 0000000..8ba0f27
--- /dev/null
+++ b/web/components/home/HeroHeadline.tsx
@@ -0,0 +1,43 @@
+import type { Headline } from "@/lib/headline-builder";
+
+export function HeroHeadline({ headline }: { headline: Headline }) {
+  return (
+    <div className="hero-headline">
+      <p
+        className="inline-flex items-center gap-2 text-[0.7rem] uppercase tracking-[0.16em] font-semibold rounded-full px-3 py-1 border"
+        style={{
+          color: "var(--color-accent)",
+          borderColor: "color-mix(in srgb, var(--color-accent) 40%, transparent)",
+          background: "color-mix(in srgb, var(--color-accent) 8%, transparent)",
+          fontFamily: "var(--font-mono)",
+        }}
+      >
+        <span
+          aria-hidden="true"
+          className="inline-block w-1.5 h-1.5 rounded-full bg-[color:var(--color-accent)] animate-pulse"
+        />
+        {headline.tag}
+      </p>
+      <h1 className="mt-6 text-4xl md:text-6xl font-bold leading-[1.05] max-w-4xl">
+        <span>{headline.main}</span>{" "}
+        <span className="text-[color:var(--color-accent)]">
+          {headline.mainAccent}
+        </span>
+      </h1>
+      <style>{`
+        .hero-headline {
+          animation: hero-fade-up 220ms ease-out both;
+        }
+        @keyframes hero-fade-up {
+          from { opacity: 0; transform: translateY(6px); }
+          to   { opacity: 1; transform: translateY(0);   }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .hero-headline { animation: none; }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default HeroHeadline;
diff --git a/web/components/home/HeroHybrid.tsx b/web/components/home/HeroHybrid.tsx
new file mode 100644
index 0000000..1225496
--- /dev/null
+++ b/web/components/home/HeroHybrid.tsx
@@ -0,0 +1,143 @@
+import Link from "next/link";
+import {
+  fetchLiveStats,
+  fetchLivePositions,
+  fetchVesselSummaries,
+} from "@/lib/krill-watch";
+import {
+  buildHeadline,
+  type HeadlineInput,
+  type HeadlineSeverity,
+} from "@/lib/headline-builder";
+import { type Locale } from "@/lib/i18n";
+import { HeroHeadline } from "./HeroHeadline";
+import { HeroMiniMap } from "./HeroMiniMap";
+import { HeroStats } from "./HeroStats";
+import frHero from "@/i18n/locales/fr.json";
+import enHero from "@/i18n/locales/en.json";
+
+const HERO_DICT = { fr: frHero, en: enHero } as const;
+
+const NON_NORMAL: HeadlineSeverity[] = ["CRITICAL", "SUSPICIOUS", "WATCH"];
+
+const ZONE_PRIORITY = ["48.1", "48.2", "48.3", "48.4", "48.5", "48.6"];
+
+function pickHottestZone(
+  vessels: { current_zones: string[]; severity: string }[],
+): { code: string; vesselCount: number } | null {
+  const counts = new Map<string, number>();
+  for (const v of vessels) {
+    if (!NON_NORMAL.includes(v.severity as HeadlineSeverity)) continue;
+    for (const raw of v.current_zones) {
+      const code = normalizeZone(raw);
+      if (!code) continue;
+      counts.set(code, (counts.get(code) ?? 0) + 1);
+    }
+  }
+  let best: { code: string; vesselCount: number } | null = null;
+  for (const [code, vesselCount] of counts) {
+    if (!best || vesselCount > best.vesselCount) {
+      best = { code, vesselCount };
+    } else if (
+      best.vesselCount === vesselCount &&
+      ZONE_PRIORITY.indexOf(code) >= 0 &&
+      ZONE_PRIORITY.indexOf(code) < ZONE_PRIORITY.indexOf(best.code)
+    ) {
+      best = { code, vesselCount };
+    }
+  }
+  return best;
+}
+
+function normalizeZone(raw: string): string | null {
+  // Accepts "CCAMLR-48.1", "48.1", "Subarea 48.1" etc. — extracts "48.1"
+  const m = raw.match(/(\d{2}\.\d)/);
+  return m?.[1] ?? null;
+}
+
+function buildInputFrom(
+  stats: Awaited<ReturnType<typeof fetchLiveStats>>,
+  vessels: Awaited<ReturnType<typeof fetchVesselSummaries>>,
+): HeadlineInput {
+  if (!stats) {
+    return {
+      vesselsBySeverity: {},
+      hottestZone: null,
+      totalCritical: 0,
+      totalSuspicious: 0,
+      totalTracked: 0,
+    };
+  }
+  const by = stats.by_severity ?? {};
+  return {
+    vesselsBySeverity: by as Partial<Record<HeadlineSeverity, number>>,
+    hottestZone: pickHottestZone(vessels),
+    totalCritical: by["CRITICAL"] ?? 0,
+    totalSuspicious: by["SUSPICIOUS"] ?? 0,
+    totalTracked: stats.tracked ?? stats.fleet_size ?? 0,
+  };
+}
+
+export async function HeroHybrid({ locale }: { locale: Locale }) {
+  const [stats, vessels, positions] = await Promise.all([
+    fetchLiveStats(),
+    fetchVesselSummaries(),
+    fetchLivePositions(),
+  ]);
+  const input = buildInputFrom(stats, vessels);
+  const headline = buildHeadline(input, locale);
+  const heroDict = HERO_DICT[locale];
+
+  const severityByMmsi = new Map<string, string>();
+  for (const v of vessels) {
+    if (v.mmsi) severityByMmsi.set(v.mmsi, v.severity || "UNKNOWN");
+  }
+  const positionsForMap = positions
+    .filter(
+      (p): p is typeof p & { lat: number; lon: number } =>
+        p.lat != null && p.lon != null,
+    )
+    .map((p) => ({
+      lat: p.lat,
+      lon: p.lon,
+      severity: p.friendly
+        ? "CPWF"
+        : severityByMmsi.get(p.mmsi) ?? "UNKNOWN",
+    }));
+
+  const ctaPrimaryHref = `/${locale}/live`;
+  const ctaPrimaryLabel =
+    locale === "fr" ? "Voir la carte live" : "Open the live map";
+  const ctaSecondaryHref = `/${locale}/about`;
+  const ctaSecondaryLabel = heroDict.heroHybrid.ctaUnderstand;
+
+  return (
+    <section className="px-5 pt-20 pb-10 md:pt-24 md:pb-14 max-w-6xl mx-auto">
+      <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-6 md:gap-10 items-start">
+        <div>
+          <HeroHeadline headline={headline} />
+
+          <div className="mt-8 flex flex-wrap items-center gap-3">
+            <Link href={ctaPrimaryHref} className="btn btn-primary">
+              {ctaPrimaryLabel} →
+            </Link>
+            <Link href={ctaSecondaryHref} className="btn btn-ghost">
+              {ctaSecondaryLabel} ↓
+            </Link>
+          </div>
+
+          <HeroStats
+            locale={locale}
+            totalCritical={input.totalCritical}
+            totalSuspicious={input.totalSuspicious}
+            totalWatch={input.vesselsBySeverity.WATCH ?? 0}
+          />
+        </div>
+
+        <HeroMiniMap locale={locale} positions={positionsForMap} />
+      </div>
+    </section>
+  );
+}
+
+export default HeroHybrid;
diff --git a/web/components/home/HeroMiniMap.tsx b/web/components/home/HeroMiniMap.tsx
new file mode 100644
index 0000000..d98507e
--- /dev/null
+++ b/web/components/home/HeroMiniMap.tsx
@@ -0,0 +1,160 @@
+import Link from "next/link";
+import type { Locale } from "@/lib/i18n";
+import { severityHex, type SeverityKey } from "@/lib/tokens";
+
+// T02 (LiveTrackerMap) is not yet shipped, so we render a deliberate-looking
+// static SVG of the Southern Ocean with colored dots for the latest positions.
+// The whole tile is a link to the live tracker.
+
+type Position = {
+  lat: number;
+  lon: number;
+  severity: string;
+};
+
+type Props = {
+  locale: Locale;
+  positions: Position[];
+};
+
+const VIEW = { width: 240, height: 160 } as const;
+// Crop to the Southern Ocean: latitudes [-90, -45], longitudes [-180, 180].
+const LAT_MIN = -90;
+const LAT_MAX = -45;
+const LON_MIN = -180;
+const LON_MAX = 180;
+
+function project(lat: number, lon: number): { x: number; y: number } {
+  const x =
+    ((lon - LON_MIN) / (LON_MAX - LON_MIN)) * VIEW.width;
+  const y =
+    ((LAT_MAX - lat) / (LAT_MAX - LAT_MIN)) * VIEW.height;
+  return { x, y };
+}
+
+function severityKey(s: string): SeverityKey {
+  if (s === "CRITICAL" || s === "SUSPICIOUS" || s === "WATCH" || s === "CPWF" || s === "NORMAL") {
+    return s;
+  }
+  return "UNKNOWN";
+}
+
+export function HeroMiniMap({ locale, positions }: Props) {
+  const visible = positions
+    .filter(
+      (p) =>
+        Number.isFinite(p.lat) &&
+        Number.isFinite(p.lon) &&
+        p.lat <= LAT_MAX &&
+        p.lat >= LAT_MIN,
+    )
+    .slice(0, 80);
+
+  return (
+    <Link
+      href={`/${locale}/live`}
+      aria-label={
+        locale === "fr" ? "Ouvrir la carte live" : "Open the live map"
+      }
+      className="hidden md:block relative rounded-xl overflow-hidden border border-[color:var(--color-border)] hover:border-[color:var(--color-accent)] transition-colors"
+      style={{
+        width: VIEW.width,
+        height: VIEW.height,
+        background:
+          "linear-gradient(180deg, #0a1428 0%, #060b18 70%, #050913 100%)",
+      }}
+    >
+      <svg
+        viewBox={`0 0 ${VIEW.width} ${VIEW.height}`}
+        width={VIEW.width}
+        height={VIEW.height}
+        aria-hidden="true"
+      >
+        {/* graticule lines (parallels every 10°) */}
+        {[-50, -60, -70, -80].map((lat) => {
+          const { y } = project(lat, 0);
+          return (
+            <line
+              key={`p-${lat}`}
+              x1={0}
+              y1={y}
+              x2={VIEW.width}
+              y2={y}
+              stroke="rgba(94,200,255,0.08)"
+              strokeWidth={0.5}
+            />
+          );
+        })}
+        {/* meridians every 60° */}
+        {[-120, -60, 0, 60, 120].map((lon) => {
+          const { x } = project(-50, lon);
+          return (
+            <line
+              key={`m-${lon}`}
+              x1={x}
+              y1={0}
+              x2={x}
+              y2={VIEW.height}
+              stroke="rgba(94,200,255,0.08)"
+              strokeWidth={0.5}
+            />
+          );
+        })}
+        {/* simplified Antarctic landmass (concentric ellipses suggest ice shelf) */}
+        <ellipse
+          cx={VIEW.width / 2}
+          cy={project(-90, 0).y}
+          rx={VIEW.width * 0.42}
+          ry={VIEW.height * 0.32}
+          fill="rgba(231,236,243,0.06)"
+          stroke="rgba(231,236,243,0.18)"
+          strokeWidth={0.8}
+        />
+        <ellipse
+          cx={VIEW.width / 2}
+          cy={project(-90, 0).y}
+          rx={VIEW.width * 0.28}
+          ry={VIEW.height * 0.2}
+          fill="rgba(231,236,243,0.08)"
+        />
+        {/* CCAMLR boundary at -60° (visual cue) */}
+        <line
+          x1={0}
+          y1={project(-60, 0).y}
+          x2={VIEW.width}
+          y2={project(-60, 0).y}
+          stroke="rgba(255,107,61,0.35)"
+          strokeWidth={0.8}
+          strokeDasharray="3 3"
+        />
+        {visible.map((p, idx) => {
+          const { x, y } = project(p.lat, p.lon);
+          const key = severityKey(p.severity);
+          const color = severityHex[key];
+          const r = key === "CRITICAL" ? 2.6 : key === "SUSPICIOUS" ? 2.2 : 1.6;
+          return (
+            <circle
+              key={`v-${idx}`}
+              cx={x}
+              cy={y}
+              r={r}
+              fill={color}
+              opacity={key === "NORMAL" || key === "UNKNOWN" ? 0.5 : 0.95}
+            />
+          );
+        })}
+      </svg>
+      <span
+        className="absolute bottom-1.5 right-2 text-[0.65rem] font-mono uppercase tracking-wider px-1.5 py-0.5 rounded"
+        style={{
+          color: "var(--color-accent)",
+          background: "rgba(6,8,13,0.7)",
+        }}
+      >
+        {locale === "fr" ? "Carte live →" : "Live map →"}
+      </span>
+    </Link>
+  );
+}
+
+export default HeroMiniMap;
diff --git a/web/components/home/HeroStats.tsx b/web/components/home/HeroStats.tsx
new file mode 100644
index 0000000..03d6b6a
--- /dev/null
+++ b/web/components/home/HeroStats.tsx
@@ -0,0 +1,72 @@
+import Link from "next/link";
+import type { Locale } from "@/lib/i18n";
+
+type Props = {
+  locale: Locale;
+  totalCritical: number;
+  totalSuspicious: number;
+  totalWatch: number;
+};
+
+const LABELS = {
+  fr: {
+    critical: "CRITIQUES",
+    suspicious: "SUSPECTES",
+    watch: "SURVEILLÉES",
+  },
+  en: {
+    critical: "CRITICAL",
+    suspicious: "SUSPICIOUS",
+    watch: "ON WATCH",
+  },
+} as const;
+
+export function HeroStats({
+  locale,
+  totalCritical,
+  totalSuspicious,
+  totalWatch,
+}: Props) {
+  const labels = LABELS[locale];
+  const items: Array<{
+    n: number;
+    label: string;
+    bucket: string;
+    color: string;
+  }> = [
+    { n: totalCritical, label: labels.critical, bucket: "critical", color: "var(--color-danger)" },
+    { n: totalSuspicious, label: labels.suspicious, bucket: "suspicious", color: "var(--color-warn)" },
+    { n: totalWatch, label: labels.watch, bucket: "watch", color: "#c084fc" },
+  ];
+
+  return (
+    <ul
+      className="mt-7 flex flex-wrap items-center gap-x-5 gap-y-2 text-sm font-mono uppercase tracking-wider"
+      style={{ color: "var(--color-text-muted)" }}
+    >
+      {items.map((it, idx) => (
+        <li key={it.bucket} className="inline-flex items-baseline gap-1.5">
+          <Link
+            href={`/${locale}/live?bucket=${it.bucket}`}
+            className="inline-flex items-baseline gap-1.5 hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] rounded-sm"
+          >
+            <span
+              className="text-base font-bold"
+              style={{ color: it.color }}
+            >
+              {it.n}
+            </span>
+            <span>{it.label}</span>
+          </Link>
+          {idx < items.length - 1 ? (
+            <span aria-hidden="true" className="opacity-50">
+              ·
+            </span>
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default HeroStats;
diff --git a/web/components/home/MissionStrip.tsx b/web/components/home/MissionStrip.tsx
index 3c2cc33..4e10b56 100644
--- a/web/components/home/MissionStrip.tsx
+++ b/web/components/home/MissionStrip.tsx
@@ -29,10 +29,17 @@ function countFor(key: TileKey): number {
   ).length;
 }
 
-function anchorFor(key: TileKey): string {
-  if (key === "krill") return "krill";
-  if (key === "whaling") return "whaling";
-  return "iuu_fishing";
+// Campaign slug for the new /campagnes/<slug> hubs (P2-T05/T06).
+function campaignHrefFor(locale: Locale, key: TileKey): string {
+  const slug =
+    key === "krill"
+      ? "krill"
+      : key === "whaling"
+        ? "whaling"
+        : key === "iuuGalapagos"
+          ? "galapagos"
+          : "west-africa";
+  return `/${locale}/campagnes/${slug}`;
 }
 
 function toneFor(key: TileKey): string {
@@ -59,8 +66,8 @@ export function MissionStrip({ locale }: { locale: Locale }) {
           return (
             <li key={key}>
               <Link
-                href={`/${locale}/vessels#${anchorFor(key)}`}
-                className="card card-static p-5 block h-full transition-colors"
+                href={campaignHrefFor(locale, key)}
+                className="card p-5 block h-full transition-all hover:scale-[1.01]"
                 style={{
                   borderColor: `color-mix(in srgb, ${tone} 25%, var(--color-border))`,
                 }}
diff --git a/web/components/live/FleetFilters.tsx b/web/components/live/FleetFilters.tsx
new file mode 100644
index 0000000..f81752e
--- /dev/null
+++ b/web/components/live/FleetFilters.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import type { FleetBucket } from "@/lib/fleet-filtering";
+
+type ChipLabels = Record<FleetBucket, string>;
+
+type Props = {
+  value: FleetBucket;
+  onChange: (next: FleetBucket) => void;
+  labels: ChipLabels;
+  counts?: Partial<Record<FleetBucket, number>>;
+  className?: string;
+  ariaLabel?: string;
+};
+
+const ORDER: FleetBucket[] = ["all", "at-risk", "live", "in-mpa"];
+
+export function FleetFilters({
+  value,
+  onChange,
+  labels,
+  counts,
+  className,
+  ariaLabel,
+}: Props) {
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel ?? "Fleet filters"}
+      className={cn(
+        "flex gap-1.5 overflow-x-auto scrollbar-thin pb-1 -mx-1 px-1",
+        className,
+      )}
+    >
+      {ORDER.map((bucket) => {
+        const active = bucket === value;
+        const count = counts?.[bucket];
+        return (
+          <button
+            key={bucket}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange(bucket)}
+            className={cn(
+              "shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono uppercase tracking-wider rounded-full border transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--color-bg)]",
+              active
+                ? "border-[color:var(--color-accent)] text-[color:var(--color-accent)] bg-[color-mix(in_srgb,var(--color-accent)_8%,transparent)]"
+                : "border-[color:var(--color-border)] text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)] hover:border-[color:var(--color-text-muted)]",
+            )}
+          >
+            <span>{labels[bucket]}</span>
+            {typeof count === "number" ? (
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "tabular-nums text-[0.65rem]",
+                  active
+                    ? "text-[color:var(--color-accent)]"
+                    : "text-[color:var(--color-text-muted)]",
+                )}
+              >
+                {count}
+              </span>
+            ) : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export default FleetFilters;
diff --git a/web/components/live/FleetRow.tsx b/web/components/live/FleetRow.tsx
new file mode 100644
index 0000000..bc0f7eb
--- /dev/null
+++ b/web/components/live/FleetRow.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import { Flag } from "@/components/Flag";
+import { cn } from "@/lib/utils";
+import { severityHex, type SeverityKey } from "@/lib/tokens";
+import type { VesselSummary } from "@/lib/krill-watch";
+
+type Props = {
+  vessel: VesselSummary;
+  active: boolean;
+  onSelect: (slug: string) => void;
+  locale?: "fr" | "en";
+};
+
+function severityKey(s: string | null | undefined): SeverityKey {
+  if (s === "CRITICAL" || s === "SUSPICIOUS" || s === "WATCH" || s === "CPWF" || s === "NORMAL") {
+    return s;
+  }
+  return "UNKNOWN";
+}
+
+function formatRelative(ts: string | null, locale: "fr" | "en"): string {
+  if (!ts) return locale === "fr" ? "—" : "—";
+  const t = Date.parse(ts);
+  if (!Number.isFinite(t)) return "—";
+  const diffMs = Date.now() - t;
+  const diffMin = Math.round(diffMs / 60000);
+  if (diffMin < 1) return locale === "fr" ? "à l'instant" : "just now";
+  if (diffMin < 60) return locale === "fr" ? `il y a ${diffMin} min` : `${diffMin} min ago`;
+  const diffHour = Math.round(diffMin / 60);
+  if (diffHour < 24) return locale === "fr" ? `il y a ${diffHour} h` : `${diffHour} h ago`;
+  const diffDay = Math.round(diffHour / 24);
+  return locale === "fr" ? `il y a ${diffDay} j` : `${diffDay} d ago`;
+}
+
+function formatPosition(
+  vessel: VesselSummary,
+  locale: "fr" | "en",
+): string {
+  if (vessel.last_position) {
+    const { lat, lon, ts } = vessel.last_position;
+    const ago = formatRelative(ts, locale);
+    return `${lat.toFixed(2)}, ${lon.toFixed(2)} · ${ago}`;
+  }
+  if (vessel.imo) return `IMO ${vessel.imo}`;
+  if (vessel.mmsi) return `MMSI ${vessel.mmsi}`;
+  return "—";
+}
+
+export function FleetRow({ vessel, active, onSelect, locale = "fr" }: Props) {
+  const sev = severityKey(vessel.severity);
+  const color = severityHex[sev];
+  const sub = formatPosition(vessel, locale);
+
+  const handleClick = () => onSelect(vessel.slug);
+  const handleKey = (e: React.KeyboardEvent<HTMLLIElement>) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect(vessel.slug);
+    }
+  };
+
+  return (
+    <li
+      role="option"
+      aria-selected={active}
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={handleKey}
+      className={cn(
+        "fleet-row group relative flex items-center gap-3 px-3 py-2 cursor-pointer select-none",
+        "border-l-[3px] border-transparent",
+        "hover:bg-[color:var(--color-surface-2)]",
+        "focus-visible:outline-none focus-visible:bg-[color:var(--color-surface-2)] focus-visible:ring-1 focus-visible:ring-[color:var(--color-accent)] focus-visible:ring-inset",
+        active &&
+          "bg-[color:var(--color-surface-2)] border-l-[color:var(--color-accent)]",
+      )}
+    >
+      <Flag code={vessel.flag} size="md" />
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="inline-block w-2 h-2 rounded-full fleet-pulse"
+            style={{ background: color, ["--pulse-color" as string]: color }}
+          />
+          <span className="text-sm font-semibold truncate">{vessel.name}</span>
+        </div>
+        <div className="text-[0.7rem] font-mono text-[color:var(--color-text-muted)] truncate">
+          {sub}
+        </div>
+      </div>
+      <span
+        className="text-[0.6rem] font-mono uppercase tracking-wider px-1.5 py-0.5 rounded border whitespace-nowrap"
+        style={{
+          color,
+          borderColor: `color-mix(in srgb, ${color} 50%, transparent)`,
+          background: `color-mix(in srgb, ${color} 10%, transparent)`,
+        }}
+      >
+        {vessel.severity || "UNKNOWN"}
+      </span>
+      <style>{`
+        .fleet-pulse {
+          box-shadow: 0 0 0 0 var(--pulse-color);
+          animation: fleet-pulse 2s ease-out infinite;
+        }
+        @keyframes fleet-pulse {
+          0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--pulse-color) 60%, transparent); }
+          70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pulse-color) 0%,  transparent); }
+          100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--pulse-color) 0%,  transparent); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .fleet-pulse { animation: none; }
+        }
+      `}</style>
+    </li>
+  );
+}
+
+export default FleetRow;
diff --git a/web/components/live/FleetSearchBar.tsx b/web/components/live/FleetSearchBar.tsx
new file mode 100644
index 0000000..63d5dbe
--- /dev/null
+++ b/web/components/live/FleetSearchBar.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type Props = {
+  value: string;
+  onChange: (next: string) => void;
+  placeholder: string;
+  ariaLabel?: string;
+  debounceMs?: number;
+  className?: string;
+};
+
+export function FleetSearchBar({
+  value,
+  onChange,
+  placeholder,
+  ariaLabel,
+  debounceMs = 200,
+  className,
+}: Props) {
+  const [local, setLocal] = React.useState(value);
+  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => {
+    setLocal(value);
+  }, [value]);
+
+  React.useEffect(() => {
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+
+  const fire = (next: string) => {
+    setLocal(next);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => onChange(next), debounceMs);
+  };
+
+  return (
+    <label
+      className={cn(
+        "relative block",
+        className,
+      )}
+    >
+      <span className="sr-only">{ariaLabel ?? placeholder}</span>
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 20 20"
+        className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[color:var(--color-text-muted)] pointer-events-none"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        <circle cx="9" cy="9" r="6" />
+        <line x1="13.5" y1="13.5" x2="17" y2="17" strokeLinecap="round" />
+      </svg>
+      <input
+        type="search"
+        value={local}
+        onChange={(e) => fire(e.target.value)}
+        placeholder={placeholder}
+        aria-label={ariaLabel ?? placeholder}
+        className={cn(
+          "w-full pl-8 pr-2 py-2 text-sm rounded-md",
+          "bg-[color:var(--color-bg)] border border-[color:var(--color-border)]",
+          "text-[color:var(--color-text)] placeholder:text-[color:var(--color-text-muted)]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)]",
+          "focus-visible:border-transparent",
+        )}
+      />
+      {local ? (
+        <button
+          type="button"
+          aria-label="Clear search"
+          onClick={() => {
+            setLocal("");
+            if (timer.current) clearTimeout(timer.current);
+            onChange("");
+          }}
+          className="absolute right-2 top-1/2 -translate-y-1/2 text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)] text-xs px-1"
+        >
+          ×
+        </button>
+      ) : null}
+    </label>
+  );
+}
+
+export default FleetSearchBar;
diff --git a/web/components/live/FleetSidebar.tsx b/web/components/live/FleetSidebar.tsx
new file mode 100644
index 0000000..602d6c9
--- /dev/null
+++ b/web/components/live/FleetSidebar.tsx
@@ -0,0 +1,337 @@
+"use client";
+
+import * as React from "react";
+import type { VesselSummary } from "@/lib/krill-watch";
+import { cn } from "@/lib/utils";
+import {
+  AT_RISK_SEVERITIES,
+  applyFilter,
+  countBySeverity,
+  sortBySeverity,
+  type FleetBucket,
+} from "@/lib/fleet-filtering";
+import type { SeverityKey } from "@/lib/tokens";
+import { FleetSearchBar } from "./FleetSearchBar";
+import { FleetFilters } from "./FleetFilters";
+import { FleetRow } from "./FleetRow";
+import { SeverityLegend, type SeverityVisibility } from "./SeverityLegend";
+
+export type LayerVisibility = {
+  graticule: boolean;
+  zones: boolean;
+  d1mpa: boolean;
+  tracks24h: boolean;
+  labels: boolean;
+};
+
+type Locale = "fr" | "en";
+
+type Strings = {
+  legendTitle: string;
+  layersTitle: string;
+  layers: Record<keyof LayerVisibility, string>;
+  search: { placeholder: string; ariaLabel: string };
+  buckets: Record<FleetBucket, string>;
+  severities: Record<SeverityKey, string>;
+  empty: string;
+  counterAria: (filtered: number, total: number) => string;
+};
+
+const STRINGS: Record<Locale, Strings> = {
+  fr: {
+    legendTitle: "Sévérité",
+    layersTitle: "Couches",
+    layers: {
+      graticule: "Grille Lat/Lon",
+      zones: "Zones CCAMLR",
+      d1mpa: "D1MPA proposée",
+      tracks24h: "Traces 24 h",
+      labels: "Étiquettes navires",
+    },
+    search: {
+      placeholder: "Nom, IMO, MMSI, drapeau…",
+      ariaLabel: "Rechercher un navire",
+    },
+    buckets: {
+      all: "Tous",
+      "at-risk": "À risque",
+      live: "Live",
+      "in-mpa": "En AMP",
+    },
+    severities: {
+      CRITICAL: "Critique",
+      SUSPICIOUS: "Suspect",
+      WATCH: "Surveillé",
+      CPWF: "CPWF",
+      NORMAL: "Normal",
+      UNKNOWN: "Inconnu",
+    },
+    empty: "Aucun navire ne correspond.",
+    counterAria: (f, t) => `${f} navires sur ${t}`,
+  },
+  en: {
+    legendTitle: "Severity",
+    layersTitle: "Layers",
+    layers: {
+      graticule: "Lat/Lon grid",
+      zones: "CCAMLR zones",
+      d1mpa: "Proposed D1MPA",
+      tracks24h: "24 h tracks",
+      labels: "Vessel labels",
+    },
+    search: {
+      placeholder: "Search name, IMO, MMSI, flag…",
+      ariaLabel: "Search vessels",
+    },
+    buckets: {
+      all: "All",
+      "at-risk": "At-risk",
+      live: "Live",
+      "in-mpa": "In MPA",
+    },
+    severities: {
+      CRITICAL: "Critical",
+      SUSPICIOUS: "Suspicious",
+      WATCH: "Watch",
+      CPWF: "CPWF",
+      NORMAL: "Normal",
+      UNKNOWN: "Unknown",
+    },
+    empty: "No vessels match.",
+    counterAria: (f, t) => `${f} of ${t} vessels`,
+  },
+};
+
+const DEFAULT_SEVERITY_VISIBILITY: SeverityVisibility = {
+  CRITICAL: true,
+  SUSPICIOUS: true,
+  WATCH: true,
+  CPWF: true,
+  NORMAL: true,
+  UNKNOWN: true,
+};
+
+type Props = {
+  vessels: VesselSummary[];
+  selectedSlug: string | null;
+  onSelect: (slug: string | null) => void;
+  layers: LayerVisibility;
+  onLayerChange: (next: LayerVisibility) => void;
+  severityVisibility?: SeverityVisibility;
+  onSeverityVisibilityChange?: (next: SeverityVisibility) => void;
+  // Controlled-mode filter inputs. When provided, the parent owns the value
+  // (used by /live to round-trip ?q + ?bucket through the URL). When omitted,
+  // the sidebar keeps its own local state for backward compat.
+  searchValue?: string;
+  onSearchChange?: (next: string) => void;
+  bucket?: FleetBucket;
+  onBucketChange?: (next: FleetBucket) => void;
+  locale?: Locale;
+  className?: string;
+};
+
+export function FleetSidebar({
+  vessels,
+  selectedSlug,
+  onSelect,
+  layers,
+  onLayerChange,
+  severityVisibility,
+  onSeverityVisibilityChange,
+  searchValue,
+  onSearchChange,
+  bucket: bucketProp,
+  onBucketChange,
+  locale = "fr",
+  className,
+}: Props) {
+  const t = STRINGS[locale];
+  const [searchInternal, setSearchInternal] = React.useState("");
+  const [bucketInternal, setBucketInternal] = React.useState<FleetBucket>("all");
+  const search = searchValue ?? searchInternal;
+  const bucket = bucketProp ?? bucketInternal;
+  const setSearch = (next: string) => {
+    if (onSearchChange) onSearchChange(next);
+    else setSearchInternal(next);
+  };
+  const setBucket = (next: FleetBucket) => {
+    if (onBucketChange) onBucketChange(next);
+    else setBucketInternal(next);
+  };
+  const [legendOpen, setLegendOpen] = React.useState(true);
+  const [layersOpen, setLayersOpen] = React.useState(true);
+  const [internalSeverityVis, setInternalSeverityVis] =
+    React.useState<SeverityVisibility>(
+      severityVisibility ?? DEFAULT_SEVERITY_VISIBILITY,
+    );
+
+  const visibility = severityVisibility ?? internalSeverityVis;
+  const setVisibility = (next: SeverityVisibility) => {
+    setInternalSeverityVis(next);
+    onSeverityVisibilityChange?.(next);
+  };
+
+  const counts = React.useMemo(() => countBySeverity(vessels), [vessels]);
+
+  const bucketCounts = React.useMemo(() => {
+    const all = vessels.length;
+    const atRisk = vessels.filter((v) => AT_RISK_SEVERITIES.has(v.severity))
+      .length;
+    const now = Date.now();
+    const live = vessels.filter((v) => {
+      if (!v.last_seen) return false;
+      const t = Date.parse(v.last_seen);
+      return Number.isFinite(t) && now - t <= 24 * 60 * 60 * 1000;
+    }).length;
+    const inMpa = vessels.filter((v) =>
+      v.current_zones.some((z) => z.startsWith("MPA-")),
+    ).length;
+    return {
+      all,
+      "at-risk": atRisk,
+      live,
+      "in-mpa": inMpa,
+    } as Record<FleetBucket, number>;
+  }, [vessels]);
+
+  const filtered = React.useMemo(() => {
+    const visible = vessels.filter(
+      (v) =>
+        visibility[
+          (v.severity as SeverityKey) in visibility
+            ? (v.severity as SeverityKey)
+            : "UNKNOWN"
+        ],
+    );
+    return sortBySeverity(applyFilter(visible, { text: search, bucket }));
+  }, [vessels, search, bucket, visibility]);
+
+  const total = vessels.length;
+  const visibleCount = filtered.length;
+
+  const setLayer = (key: keyof LayerVisibility, next: boolean) =>
+    onLayerChange({ ...layers, [key]: next });
+
+  return (
+    <aside
+      className={cn(
+        "fleet-sidebar flex flex-col h-full w-full md:w-[320px] bg-[color:var(--color-surface)] border-r border-[color:var(--color-border)] text-sm",
+        className,
+      )}
+    >
+      <div className="flex-1 overflow-y-auto">
+        <Section
+          title={t.legendTitle}
+          open={legendOpen}
+          onToggle={() => setLegendOpen((o) => !o)}
+        >
+          <SeverityLegend
+            counts={counts}
+            visibility={visibility}
+            onToggle={(key, next) => setVisibility({ ...visibility, [key]: next })}
+            labels={t.severities}
+            legendTitle=""
+            className="px-3 pb-3"
+          />
+        </Section>
+
+        <Section
+          title={t.layersTitle}
+          open={layersOpen}
+          onToggle={() => setLayersOpen((o) => !o)}
+        >
+          <ul className="space-y-1 px-3 pb-3 font-mono text-[0.72rem] uppercase tracking-wider">
+            {(Object.keys(layers) as Array<keyof LayerVisibility>).map((k) => (
+              <li key={k}>
+                <label className="flex items-center gap-2 cursor-pointer select-none px-1 py-1 rounded-sm hover:bg-[color:var(--color-surface-2)]">
+                  <input
+                    type="checkbox"
+                    checked={layers[k]}
+                    onChange={(e) => setLayer(k, e.target.checked)}
+                    className="accent-[color:var(--color-accent)]"
+                  />
+                  <span className="text-[color:var(--color-text)]">
+                    {t.layers[k]}
+                  </span>
+                </label>
+              </li>
+            ))}
+          </ul>
+        </Section>
+
+        <div className="px-3 py-3 border-t border-[color:var(--color-border)] space-y-3">
+          <FleetSearchBar
+            value={search}
+            onChange={setSearch}
+            placeholder={t.search.placeholder}
+            ariaLabel={t.search.ariaLabel}
+          />
+          <FleetFilters
+            value={bucket}
+            onChange={setBucket}
+            labels={t.buckets}
+            counts={bucketCounts}
+          />
+          <div
+            className="text-[0.7rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] tabular-nums"
+            aria-live="polite"
+            aria-label={t.counterAria(visibleCount, total)}
+          >
+            {visibleCount} / {total}
+          </div>
+        </div>
+
+        <ul role="listbox" className="border-t border-[color:var(--color-border)]">
+          {filtered.length === 0 ? (
+            <li className="px-3 py-6 text-[color:var(--color-text-muted)] text-center text-xs">
+              {t.empty}
+            </li>
+          ) : (
+            filtered.map((v) => (
+              <FleetRow
+                key={v.slug}
+                vessel={v}
+                active={v.slug === selectedSlug}
+                onSelect={(slug) =>
+                  onSelect(slug === selectedSlug ? null : slug)
+                }
+                locale={locale}
+              />
+            ))
+          )}
+        </ul>
+      </div>
+    </aside>
+  );
+}
+
+function Section({
+  title,
+  open,
+  onToggle,
+  children,
+}: {
+  title: string;
+  open: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="border-t border-[color:var(--color-border)] first:border-t-0">
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-expanded={open}
+        className="w-full flex items-center justify-between px-3 py-2 text-[0.7rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)] focus-visible:outline-none focus-visible:bg-[color:var(--color-surface-2)]"
+      >
+        <span>{title}</span>
+        <span aria-hidden="true" className="opacity-70">
+          {open ? "▾" : "▸"}
+        </span>
+      </button>
+      {open ? children : null}
+    </section>
+  );
+}
+
+export default FleetSidebar;
diff --git a/web/components/live/LiveMobileLayout.tsx b/web/components/live/LiveMobileLayout.tsx
new file mode 100644
index 0000000..05013b7
--- /dev/null
+++ b/web/components/live/LiveMobileLayout.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import * as React from "react";
+import { LiveTrackerMap, type LiveFleetVessel } from "@/components/map/LiveTrackerMap";
+import type { VesselSummary } from "@/lib/krill-watch";
+import type { LayerVisibility } from "@/lib/live-url-state";
+import type { FleetBucket } from "@/lib/fleet-filtering";
+import { useBreakpoint } from "@/hooks/useBreakpoint";
+import { MobileTopBar } from "./MobileTopBar";
+import { MobileSatelliteFAB } from "./MobileSatelliteFAB";
+import { MobileFiltersSheet } from "./MobileFiltersSheet";
+import { MobileVesselDrawer } from "./MobileVesselDrawer";
+
+type Locale = "fr" | "en";
+
+type Props = {
+  vessels: VesselSummary[];
+  initialFleet: LiveFleetVessel[];
+  selectedSlug: string | null;
+  onSelect: (slug: string | null) => void;
+  layers: LayerVisibility;
+  onLayerChange: (next: LayerVisibility) => void;
+  searchValue?: string;
+  onSearchChange?: (next: string) => void;
+  bucket?: FleetBucket;
+  onBucketChange?: (next: FleetBucket) => void;
+  apiBase: string;
+  locale: Locale;
+};
+
+// Composite mobile layout: full-screen map underneath, top bar pinned at
+// the top, BottomSheet that snaps between 10vh / 50vh / 90vh, FAB to flip
+// the basemap, drawer takes over (full-screen) when a vessel is selected.
+export function LiveMobileLayout({
+  vessels,
+  initialFleet,
+  selectedSlug,
+  onSelect,
+  layers,
+  onLayerChange,
+  searchValue,
+  onSearchChange,
+  bucket,
+  onBucketChange,
+  apiBase,
+  locale,
+}: Props) {
+  return (
+    <div className="fixed inset-0 bg-[color:var(--color-bg)]">
+      <MobileTopBar
+        visibleCount={vessels.length}
+        totalCount={vessels.length}
+        onOpenFilters={() => {
+          // Open is implicit — the filters sheet is always mounted at 10vh.
+          // We could trigger a snap-to-50vh imperatively in a future patch.
+          if (typeof window !== "undefined") {
+            window.scrollTo({ top: 0, behavior: "instant" });
+          }
+        }}
+        locale={locale}
+      />
+
+      <div className="absolute inset-0 top-14">
+        <LiveTrackerMap
+          mode="live"
+          apiBase={apiBase}
+          initialFleet={initialFleet}
+          selectedSlug={selectedSlug}
+          onSelectVessel={onSelect}
+          showAmbient={false}
+          showZones={layers.zones}
+          showD1MPA={layers.d1mpa}
+          showGraticule={layers.graticule}
+          showLabels={layers.labels}
+          show24hTracks={layers.tracks24h}
+          locale={locale}
+        />
+      </div>
+
+      <MobileSatelliteFAB locale={locale} />
+
+      <MobileFiltersSheet
+        vessels={vessels}
+        selectedSlug={selectedSlug}
+        onSelect={onSelect}
+        layers={layers}
+        onLayerChange={onLayerChange}
+        searchValue={searchValue}
+        onSearchChange={onSearchChange}
+        bucket={bucket}
+        onBucketChange={onBucketChange}
+        locale={locale}
+      />
+
+      <MobileVesselDrawer
+        slug={selectedSlug}
+        apiBase={apiBase}
+        onClose={() => onSelect(null)}
+        locale={locale}
+      />
+    </div>
+  );
+}
+
+// Switcher consumed by /live (integration done in P1-T08). Renders the
+// mobile layout below 1024px and lets the desktop tree render otherwise.
+export function LiveLayoutSwitch({
+  desktop,
+  mobile,
+}: {
+  desktop: React.ReactNode;
+  mobile: React.ReactNode;
+}) {
+  const bp = useBreakpoint();
+  // Tablets stay on desktop layout per spec ("hybrid: map + sidebar +
+  // drawer overlay non fixed"). Mobile-only swap.
+  if (bp === "mobile") return <>{mobile}</>;
+  return <>{desktop}</>;
+}
+
+export default LiveMobileLayout;
diff --git a/web/components/live/MobileFiltersSheet.tsx b/web/components/live/MobileFiltersSheet.tsx
new file mode 100644
index 0000000..a140984
--- /dev/null
+++ b/web/components/live/MobileFiltersSheet.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import * as React from "react";
+import { BottomSheet } from "@/components/ui";
+import type { VesselSummary } from "@/lib/krill-watch";
+import type { LayerVisibility } from "@/lib/live-url-state";
+import type { FleetBucket } from "@/lib/fleet-filtering";
+import { FleetSidebar } from "./FleetSidebar";
+
+type Locale = "fr" | "en";
+
+type Props = {
+  vessels: VesselSummary[];
+  selectedSlug: string | null;
+  onSelect: (slug: string | null) => void;
+  layers: LayerVisibility;
+  onLayerChange: (next: LayerVisibility) => void;
+  searchValue?: string;
+  onSearchChange?: (next: string) => void;
+  bucket?: FleetBucket;
+  onBucketChange?: (next: FleetBucket) => void;
+  locale: Locale;
+  // The sheet is always rendered when /live mounts on mobile — open is
+  // permanently true. The snap state is owned by this component so a vessel
+  // selection can collapse it to 10vh without unmounting.
+  initialSnap?: number; // index into snapPoints
+};
+
+const SNAP_POINTS: Array<`${number}vh`> = ["10vh", "50vh", "90vh"];
+
+export function MobileFiltersSheet({
+  vessels,
+  selectedSlug,
+  onSelect,
+  layers,
+  onLayerChange,
+  searchValue,
+  onSearchChange,
+  bucket,
+  onBucketChange,
+  locale,
+  initialSnap = 0,
+}: Props) {
+  const [snap, setSnap] = React.useState(initialSnap);
+  const previousSelected = React.useRef(selectedSlug);
+
+  // When the user selects a vessel from the sheet, collapse to 10vh so the
+  // map underneath comes back into view.
+  React.useEffect(() => {
+    if (selectedSlug && selectedSlug !== previousSelected.current) {
+      setSnap(0);
+    }
+    previousSelected.current = selectedSlug;
+  }, [selectedSlug]);
+
+  return (
+    <BottomSheet
+      open={true}
+      snapPoints={SNAP_POINTS}
+      initialSnap={snap}
+      onSnapChange={setSnap}
+      ariaLabel={
+        locale === "fr" ? "Filtres et flotte" : "Filters and fleet"
+      }
+      className="z-30"
+    >
+      <FleetSidebar
+        vessels={vessels}
+        selectedSlug={selectedSlug}
+        onSelect={onSelect}
+        layers={layers}
+        onLayerChange={onLayerChange}
+        searchValue={searchValue}
+        onSearchChange={onSearchChange}
+        bucket={bucket}
+        onBucketChange={onBucketChange}
+        locale={locale}
+        className="h-full md:w-full !w-full !border-r-0"
+      />
+    </BottomSheet>
+  );
+}
+
+export default MobileFiltersSheet;
diff --git a/web/components/live/MobileSatelliteFAB.tsx b/web/components/live/MobileSatelliteFAB.tsx
new file mode 100644
index 0000000..da52cf4
--- /dev/null
+++ b/web/components/live/MobileSatelliteFAB.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type StyleMode = "map" | "satellite";
+
+const STORAGE_KEY = "krill-watch:map-style";
+
+function readStored(): StyleMode {
+  if (typeof window === "undefined") return "map";
+  try {
+    const v = window.localStorage.getItem(STORAGE_KEY);
+    return v === "satellite" ? "satellite" : "map";
+  } catch {
+    return "map";
+  }
+}
+
+const LABELS = {
+  fr: { toMap: "Vue carte", toSat: "Vue satellite" },
+  en: { toMap: "Map view", toSat: "Satellite view" },
+} as const;
+
+type Props = {
+  locale: "fr" | "en";
+  onChange?: (next: StyleMode) => void;
+  className?: string;
+};
+
+// Mobile-only floating action button that toggles the basemap. Reads/writes
+// the same localStorage key as the desktop style toggle delivered with T02
+// so the choice persists across viewports.
+export function MobileSatelliteFAB({ locale, onChange, className }: Props) {
+  const [mode, setMode] = React.useState<StyleMode>("map");
+
+  React.useEffect(() => {
+    setMode(readStored());
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEY) {
+        setMode(e.newValue === "satellite" ? "satellite" : "map");
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+
+  const toggle = () => {
+    const next: StyleMode = mode === "satellite" ? "map" : "satellite";
+    setMode(next);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, next);
+    } catch {
+      // localStorage blocked — keep behaviour but don't crash.
+    }
+    onChange?.(next);
+  };
+
+  const t = LABELS[locale];
+  const label = mode === "satellite" ? t.toMap : t.toSat;
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-label={label}
+      title={label}
+      className={cn(
+        "fixed right-4 z-30 w-14 h-14 rounded-full text-2xl",
+        "bg-[color:var(--color-surface)] border border-[color:var(--color-border)] shadow-lg",
+        "hover:border-[color:var(--color-accent)] hover:text-[color:var(--color-accent)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--color-bg)]",
+        // Sits above the bottom-sheet's collapsed handle (10vh ≈ 80px on a
+        // 800px viewport) — bottom offset = 96px keeps the FAB tappable.
+        "bottom-[calc(10vh+16px)]",
+        className,
+      )}
+    >
+      <span aria-hidden="true">{mode === "satellite" ? "🗺" : "🛰"}</span>
+    </button>
+  );
+}
+
+export default MobileSatelliteFAB;
diff --git a/web/components/live/MobileTopBar.tsx b/web/components/live/MobileTopBar.tsx
new file mode 100644
index 0000000..b4e0a38
--- /dev/null
+++ b/web/components/live/MobileTopBar.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type Props = {
+  visibleCount: number;
+  totalCount: number;
+  onOpenFilters: () => void;
+  locale: "fr" | "en";
+  className?: string;
+};
+
+const LABELS = {
+  fr: { vessels: "navires", openFilters: "Ouvrir les filtres" },
+  en: { vessels: "vessels", openFilters: "Open filters" },
+} as const;
+
+export function MobileTopBar({
+  visibleCount,
+  totalCount,
+  onOpenFilters,
+  locale,
+  className,
+}: Props) {
+  const t = LABELS[locale];
+  return (
+    <div
+      className={cn(
+        "fixed top-0 inset-x-0 z-40 h-14 px-3 flex items-center gap-3",
+        "bg-[color:var(--color-surface)]/95 backdrop-blur border-b border-[color:var(--color-border)]",
+        className,
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className="inline-flex items-center justify-center w-7 h-7 rounded-md text-[color:var(--color-accent)]"
+        style={{ background: "color-mix(in srgb, var(--color-accent) 12%, transparent)" }}
+      >
+        ●
+      </span>
+      <span className="text-sm font-bold text-[color:var(--color-text)]">
+        krill-watch
+      </span>
+      <span className="ml-auto text-[0.7rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] tabular-nums">
+        {visibleCount}/{totalCount} {t.vessels}
+      </span>
+      <button
+        type="button"
+        onClick={onOpenFilters}
+        aria-label={t.openFilters}
+        className="inline-flex items-center justify-center w-9 h-9 rounded-md border border-[color:var(--color-border)] text-[color:var(--color-text)] hover:border-[color:var(--color-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)]"
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 20 20"
+          width="16"
+          height="16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+        >
+          <line x1="3" y1="6" x2="17" y2="6" />
+          <line x1="6" y1="10" x2="14" y2="10" />
+          <line x1="9" y1="14" x2="11" y2="14" />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+export default MobileTopBar;
diff --git a/web/components/live/MobileVesselDrawer.tsx b/web/components/live/MobileVesselDrawer.tsx
new file mode 100644
index 0000000..6d66f0e
--- /dev/null
+++ b/web/components/live/MobileVesselDrawer.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import { VesselDrawer } from "./VesselDrawer";
+
+type Locale = "fr" | "en";
+
+type Props = {
+  slug: string | null;
+  apiBase: string;
+  onClose: () => void;
+  onAlertClick?: (lat: number, lon: number) => void;
+  locale: Locale;
+};
+
+// Mobile wrapper for VesselDrawer. The shared <Drawer> primitive already
+// caps width at 100vw, so the drawer naturally fills the screen. This
+// component lives mainly to (a) bump the z-index above the BottomSheet,
+// and (b) give a clean home for any future swipe-to-back gesture without
+// touching VesselDrawer (file-owned by P1-T04).
+export function MobileVesselDrawer(props: Props) {
+  return (
+    <div className="contents [&_.fixed]:z-50">
+      <VesselDrawer {...props} />
+    </div>
+  );
+}
+
+export default MobileVesselDrawer;
diff --git a/web/components/live/SeverityLegend.tsx b/web/components/live/SeverityLegend.tsx
new file mode 100644
index 0000000..fb37279
--- /dev/null
+++ b/web/components/live/SeverityLegend.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { severityHex, type SeverityKey } from "@/lib/tokens";
+
+export type SeverityVisibility = Record<SeverityKey, boolean>;
+
+const ORDER: SeverityKey[] = [
+  "CRITICAL",
+  "SUSPICIOUS",
+  "WATCH",
+  "CPWF",
+  "NORMAL",
+  "UNKNOWN",
+];
+
+type Props = {
+  counts: Partial<Record<SeverityKey, number>>;
+  visibility: SeverityVisibility;
+  onToggle: (key: SeverityKey, next: boolean) => void;
+  labels: Record<SeverityKey, string>;
+  className?: string;
+  legendTitle: string;
+};
+
+export function SeverityLegend({
+  counts,
+  visibility,
+  onToggle,
+  labels,
+  className,
+  legendTitle,
+}: Props) {
+  return (
+    <fieldset
+      className={cn(
+        "border-0 p-0 m-0 font-mono text-[0.72rem] uppercase tracking-wider",
+        className,
+      )}
+    >
+      <legend className="text-[color:var(--color-text-muted)] mb-1.5 px-0">
+        {legendTitle}
+      </legend>
+      <ul className="space-y-1">
+        {ORDER.map((key) => {
+          const color = severityHex[key];
+          const count = counts[key] ?? 0;
+          const checked = visibility[key];
+          return (
+            <li key={key}>
+              <label
+                className={cn(
+                  "flex items-center gap-2 cursor-pointer select-none px-1 py-1 rounded-sm",
+                  "hover:bg-[color:var(--color-surface-2)]",
+                  !checked && "opacity-55",
+                )}
+              >
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  onChange={(e) => onToggle(key, e.target.checked)}
+                  className="sr-only peer"
+                />
+                <span
+                  aria-hidden="true"
+                  className={cn(
+                    "inline-block w-3 h-3 rounded-full border",
+                    "peer-focus-visible:ring-2 peer-focus-visible:ring-[color:var(--color-accent)] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[color:var(--color-bg)]",
+                  )}
+                  style={{
+                    background: checked ? color : "transparent",
+                    borderColor: color,
+                  }}
+                />
+                <span className="flex-1 text-[color:var(--color-text)]">
+                  {labels[key]}
+                </span>
+                <span className="tabular-nums text-[color:var(--color-text-muted)]">
+                  {count}
+                </span>
+              </label>
+            </li>
+          );
+        })}
+      </ul>
+    </fieldset>
+  );
+}
+
+export default SeverityLegend;
diff --git a/web/components/live/VesselDrawer.tsx b/web/components/live/VesselDrawer.tsx
new file mode 100644
index 0000000..5ee641a
--- /dev/null
+++ b/web/components/live/VesselDrawer.tsx
@@ -0,0 +1,446 @@
+"use client";
+
+import * as React from "react";
+import { Drawer, Tabs, Button } from "@/components/ui";
+import { Flag } from "@/components/Flag";
+import { severityHex, type SeverityKey } from "@/lib/tokens";
+import {
+  VesselIdentityTab,
+  type VesselIdentity,
+} from "./tabs/VesselIdentityTab";
+import {
+  VesselActivityTab,
+  type FishingHourPoint,
+} from "./tabs/VesselActivityTab";
+import {
+  VesselAlertsTab,
+  type VesselAlert,
+} from "./tabs/VesselAlertsTab";
+import {
+  VesselIncidentsTab,
+  type VesselIncident,
+} from "./tabs/VesselIncidentsTab";
+import {
+  VesselClosuresTab,
+  type VesselClosure,
+} from "./tabs/VesselClosuresTab";
+import {
+  VesselEventLogTab,
+  type VesselLogEvent,
+} from "./tabs/VesselEventLogTab";
+
+type Locale = "fr" | "en";
+
+// Runtime shape returned by /api/vessels/<slug>. The minimal shared type in
+// web/lib/krill-watch.ts is read-only for this task — we extend it locally to
+// expose profile / closures fields the legacy frontend already consumes.
+type DrawerVesselDetail = {
+  summary: {
+    slug: string;
+    name: string;
+    imo: string | null;
+    mmsi: string | null;
+    flag: string | null;
+    operator?: string | null;
+    registered_owner?: string | null;
+    vessel_type?: string | null;
+    severity: string;
+    current_zones: string[];
+    last_position: { lat: number; lon: number; ts: string } | null;
+    last_seen: string | null;
+    friendly: boolean;
+    ownership_pending?: boolean;
+  };
+  profile?: {
+    identity?: VesselIdentity | null;
+    activity?: {
+      fishing_hours_7d?: number | null;
+      fishing_hours_24h_series?: FishingHourPoint[] | null;
+      sog_knots?: number | null;
+      cog_deg?: number | null;
+    } | null;
+    alerts?: VesselAlert[];
+  };
+  events?: VesselLogEvent[];
+  incidents?: VesselIncident[];
+  relevant_closures?: VesselClosure[];
+};
+
+type TabId =
+  | "identity"
+  | "activity"
+  | "alerts"
+  | "incidents"
+  | "closures"
+  | "events";
+
+type Props = {
+  slug: string | null;
+  apiBase: string;
+  onClose: () => void;
+  onAlertClick?: (lat: number, lon: number) => void;
+  locale?: Locale;
+};
+
+const STRINGS: Record<Locale, {
+  ariaLabel: string;
+  close: string;
+  copyLink: string;
+  copied: string;
+  loading: string;
+  errorTitle: string;
+  errorBody: string;
+  retry: string;
+  tabs: Record<TabId, string>;
+}> = {
+  fr: {
+    ariaLabel: "Détails du navire",
+    close: "Fermer",
+    copyLink: "Copier le lien",
+    copied: "Lien copié ✓",
+    loading: "Chargement…",
+    errorTitle: "Détails indisponibles",
+    errorBody: "Le service OSINT est injoignable. Réessaye plus tard.",
+    retry: "Réessayer",
+    tabs: {
+      identity: "Identité",
+      activity: "Activité",
+      alerts: "Alertes",
+      incidents: "Incidents",
+      closures: "Fermetures",
+      events: "Journal",
+    },
+  },
+  en: {
+    ariaLabel: "Vessel details",
+    close: "Close",
+    copyLink: "Copy link",
+    copied: "Link copied ✓",
+    loading: "Loading…",
+    errorTitle: "Details unavailable",
+    errorBody: "The OSINT service is unreachable. Try again later.",
+    retry: "Retry",
+    tabs: {
+      identity: "Identity",
+      activity: "Activity",
+      alerts: "Alerts",
+      incidents: "Incidents",
+      closures: "Closures",
+      events: "Event log",
+    },
+  },
+};
+
+const TAB_ORDER: TabId[] = [
+  "identity",
+  "activity",
+  "alerts",
+  "incidents",
+  "closures",
+  "events",
+];
+
+function severityKey(s: string | null | undefined): SeverityKey {
+  if (s === "CRITICAL" || s === "SUSPICIOUS" || s === "WATCH" || s === "CPWF" || s === "NORMAL") {
+    return s;
+  }
+  return "UNKNOWN";
+}
+
+async function fetchDetail(
+  apiBase: string,
+  slug: string,
+  signal: AbortSignal,
+): Promise<DrawerVesselDetail> {
+  const trimmed = apiBase.replace(/\/+$/, "");
+  const res = await fetch(`${trimmed}/api/vessels/${slug}`, {
+    signal,
+    headers: { accept: "application/json" },
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return (await res.json()) as DrawerVesselDetail;
+}
+
+export function VesselDrawer({
+  slug,
+  apiBase,
+  onClose,
+  onAlertClick,
+  locale = "fr",
+}: Props) {
+  const t = STRINGS[locale];
+  const [data, setData] = React.useState<DrawerVesselDetail | null>(null);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [tab, setTab] = React.useState<TabId>("identity");
+  const [copied, setCopied] = React.useState(false);
+  const [reloadKey, setReloadKey] = React.useState(0);
+
+  React.useEffect(() => {
+    if (!slug) {
+      setData(null);
+      setError(null);
+      return;
+    }
+    const ac = new AbortController();
+    setLoading(true);
+    setError(null);
+    setData(null);
+    setTab("identity");
+    fetchDetail(apiBase, slug, ac.signal)
+      .then((d) => {
+        setData(d);
+        setLoading(false);
+      })
+      .catch((err: unknown) => {
+        if ((err as { name?: string }).name === "AbortError") return;
+        setError(t.errorBody);
+        setLoading(false);
+      });
+    return () => ac.abort();
+  }, [slug, apiBase, reloadKey, t.errorBody]);
+
+  const open = slug != null;
+
+  return (
+    <Drawer
+      open={open}
+      onClose={onClose}
+      side="right"
+      width={420}
+      ariaLabel={t.ariaLabel}
+    >
+      <Header
+        data={data}
+        loading={loading}
+        onClose={onClose}
+        closeLabel={t.close}
+      />
+      <div className="flex-1 overflow-y-auto">
+        {loading ? (
+          <SkeletonBody label={t.loading} />
+        ) : error ? (
+          <ErrorBody
+            title={t.errorTitle}
+            body={t.errorBody}
+            retryLabel={t.retry}
+            onRetry={() => setReloadKey((k) => k + 1)}
+          />
+        ) : data ? (
+          <div className="px-4 pb-4">
+            <Tabs value={tab} onChange={(v) => setTab(v as TabId)}>
+              <Tabs.List
+                aria-label={t.ariaLabel}
+                className="overflow-x-auto sticky top-0 bg-[color:var(--color-surface)] z-[1]"
+              >
+                {TAB_ORDER.map((id) => (
+                  <Tabs.Trigger key={id} value={id} className="whitespace-nowrap">
+                    {t.tabs[id]}
+                  </Tabs.Trigger>
+                ))}
+              </Tabs.List>
+              <Tabs.Content value="identity">
+                <VesselIdentityTab
+                  data={{ identity: data.profile?.identity, summary: data.summary }}
+                  locale={locale}
+                />
+              </Tabs.Content>
+              <Tabs.Content value="activity">
+                <VesselActivityTab
+                  data={{
+                    summary: {
+                      last_seen: data.summary.last_seen,
+                      last_position: data.summary.last_position,
+                      current_zones: data.summary.current_zones,
+                      mmsi: data.summary.mmsi,
+                    },
+                    activity: data.profile?.activity,
+                  }}
+                  locale={locale}
+                />
+              </Tabs.Content>
+              <Tabs.Content value="alerts">
+                <VesselAlertsTab
+                  alerts={data.profile?.alerts ?? []}
+                  locale={locale}
+                  onAlertClick={onAlertClick}
+                />
+              </Tabs.Content>
+              <Tabs.Content value="incidents">
+                <VesselIncidentsTab
+                  incidents={data.incidents ?? []}
+                  locale={locale}
+                />
+              </Tabs.Content>
+              <Tabs.Content value="closures">
+                <VesselClosuresTab
+                  closures={data.relevant_closures ?? []}
+                  locale={locale}
+                />
+              </Tabs.Content>
+              <Tabs.Content value="events">
+                <VesselEventLogTab
+                  events={data.events ?? []}
+                  locale={locale}
+                />
+              </Tabs.Content>
+            </Tabs>
+          </div>
+        ) : null}
+      </div>
+      <Footer
+        slug={slug}
+        locale={locale}
+        copied={copied}
+        copyLabel={t.copyLink}
+        copiedLabel={t.copied}
+        onCopy={async () => {
+          if (!slug) return;
+          const url = `${typeof window !== "undefined" ? window.location.origin : ""}/${locale}/live/v/${slug}`;
+          try {
+            await navigator.clipboard.writeText(url);
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1800);
+          } catch {
+            // clipboard blocked — fail silently rather than crashing the drawer
+          }
+        }}
+      />
+    </Drawer>
+  );
+}
+
+function Header({
+  data,
+  loading,
+  onClose,
+  closeLabel,
+}: {
+  data: DrawerVesselDetail | null;
+  loading: boolean;
+  onClose: () => void;
+  closeLabel: string;
+}) {
+  const sev = severityKey(data?.summary.severity);
+  const color = severityHex[sev];
+  return (
+    <div
+      className="sticky top-0 z-[2] bg-[color:var(--color-surface)] border-b border-[color:var(--color-border)] px-4 py-3 flex items-center gap-3"
+      style={{ boxShadow: "0 1px 0 rgba(0,0,0,0.2)" }}
+    >
+      {data ? (
+        <Flag code={data.summary.flag} size="lg" />
+      ) : (
+        <div className="w-7 h-5 rounded-sm bg-[color:var(--color-surface-2)] animate-pulse" />
+      )}
+      <div className="flex-1 min-w-0">
+        <h2 className="text-base font-bold truncate text-[color:var(--color-text)]">
+          {data?.summary.name ??
+            (loading ? "…" : "")}
+        </h2>
+        <p className="text-[0.65rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] truncate">
+          {data?.summary.imo ? `IMO ${data.summary.imo}` : ""}
+          {data?.summary.imo && data?.summary.mmsi ? " · " : ""}
+          {data?.summary.mmsi ? `MMSI ${data.summary.mmsi}` : ""}
+        </p>
+      </div>
+      {data ? (
+        <span
+          className="text-[0.65rem] font-mono uppercase tracking-wider px-2 py-1 rounded border whitespace-nowrap"
+          style={{
+            color,
+            borderColor: `color-mix(in srgb, ${color} 50%, transparent)`,
+            background: `color-mix(in srgb, ${color} 10%, transparent)`,
+          }}
+        >
+          {data.summary.severity}
+        </span>
+      ) : null}
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label={closeLabel}
+        className="ml-1 inline-flex items-center justify-center w-8 h-8 rounded-md text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-2)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)]"
+      >
+        ×
+      </button>
+    </div>
+  );
+}
+
+function Footer({
+  slug,
+  copied,
+  copyLabel,
+  copiedLabel,
+  onCopy,
+}: {
+  slug: string | null;
+  locale: Locale;
+  copied: boolean;
+  copyLabel: string;
+  copiedLabel: string;
+  onCopy: () => void;
+}) {
+  return (
+    <div className="border-t border-[color:var(--color-border)] px-4 py-3 bg-[color:var(--color-surface)]">
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onCopy}
+        disabled={!slug}
+        aria-live="polite"
+        className="w-full"
+      >
+        {copied ? copiedLabel : copyLabel}
+      </Button>
+    </div>
+  );
+}
+
+function SkeletonBody({ label }: { label: string }) {
+  return (
+    <div
+      className="px-4 py-6 space-y-3"
+      role="status"
+      aria-live="polite"
+      aria-label={label}
+    >
+      {Array.from({ length: 6 }).map((_, i) => (
+        <div
+          key={i}
+          className="h-3 rounded bg-[color:var(--color-surface-2)] animate-pulse"
+          style={{ width: `${60 + ((i * 13) % 35)}%` }}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ErrorBody({
+  title,
+  body,
+  retryLabel,
+  onRetry,
+}: {
+  title: string;
+  body: string;
+  retryLabel: string;
+  onRetry: () => void;
+}) {
+  return (
+    <div className="px-4 py-8 text-center">
+      <h3 className="text-sm font-semibold text-[color:var(--color-danger)] mb-1">
+        {title}
+      </h3>
+      <p className="text-xs text-[color:var(--color-text-muted)] mb-4">
+        {body}
+      </p>
+      <Button variant="ghost" size="sm" onClick={onRetry}>
+        {retryLabel}
+      </Button>
+    </div>
+  );
+}
+
+export default VesselDrawer;
diff --git a/web/components/live/tabs/VesselActivityTab.tsx b/web/components/live/tabs/VesselActivityTab.tsx
new file mode 100644
index 0000000..dff2980
--- /dev/null
+++ b/web/components/live/tabs/VesselActivityTab.tsx
@@ -0,0 +1,278 @@
+"use client";
+
+import * as React from "react";
+import { Card } from "@/components/ui";
+
+export type FishingHourPoint = {
+  ts: string;
+  hours: number;
+};
+
+export type VesselActivitySource = {
+  summary: {
+    last_seen: string | null;
+    last_position: { lat: number; lon: number; ts: string } | null;
+    current_zones: string[];
+    mmsi: string | null;
+  };
+  activity?: {
+    fishing_hours_7d?: number | null;
+    fishing_hours_24h_series?: FishingHourPoint[] | null;
+    sog_knots?: number | null;
+    cog_deg?: number | null;
+  } | null;
+};
+
+type Props = {
+  data: VesselActivitySource;
+  locale: "fr" | "en";
+};
+
+const LABELS = {
+  fr: {
+    lastSeen: "Dernière position",
+    position: "Coordonnées",
+    speed: "Vitesse",
+    course: "Cap",
+    fishing7d: "Pêche (7 jours)",
+    fishing24h: "Pêche (24 h)",
+    zones: "Zones actuelles",
+    none: "—",
+    knots: "kn",
+    degrees: "°",
+    hours: "h",
+    on: "le",
+    noFishing: "Aucune activité de pêche détectée sur 24 h.",
+    openMt: "Ouvrir sur MarineTraffic →",
+    just: "à l'instant",
+  },
+  en: {
+    lastSeen: "Last seen",
+    position: "Coordinates",
+    speed: "Speed",
+    course: "Course",
+    fishing7d: "Fishing (7 days)",
+    fishing24h: "Fishing (24 h)",
+    zones: "Current zones",
+    none: "—",
+    knots: "kn",
+    degrees: "°",
+    hours: "h",
+    on: "on",
+    noFishing: "No fishing activity detected in the last 24 h.",
+    openMt: "Open on MarineTraffic →",
+    just: "just now",
+  },
+} as const;
+
+function formatRelative(ts: string | null, locale: "fr" | "en"): string {
+  if (!ts) return "—";
+  const t = Date.parse(ts);
+  if (!Number.isFinite(t)) return "—";
+  const diffMin = Math.round((Date.now() - t) / 60000);
+  if (diffMin < 1) return LABELS[locale].just;
+  if (diffMin < 60) return locale === "fr" ? `il y a ${diffMin} min` : `${diffMin} min ago`;
+  const h = Math.round(diffMin / 60);
+  if (h < 24) return locale === "fr" ? `il y a ${h} h` : `${h} h ago`;
+  const d = Math.round(h / 24);
+  return locale === "fr" ? `il y a ${d} j` : `${d} d ago`;
+}
+
+function formatAbs(ts: string | null, locale: "fr" | "en"): string {
+  if (!ts) return "—";
+  const d = new Date(ts);
+  if (Number.isNaN(d.getTime())) return "—";
+  return d.toLocaleString(locale === "fr" ? "fr-FR" : "en-GB", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function marineTrafficUrl(mmsi: string | null): string | null {
+  if (!mmsi) return null;
+  return `https://www.marinetraffic.com/en/ais/details/ships/mmsi:${mmsi}`;
+}
+
+export function VesselActivityTab({ data, locale }: Props) {
+  const t = LABELS[locale];
+  const sum = data.summary;
+  const act = data.activity ?? {};
+  const last = sum.last_position;
+  const series = act.fishing_hours_24h_series ?? [];
+  const mtUrl = marineTrafficUrl(sum.mmsi);
+
+  return (
+    <div className="space-y-4 text-sm">
+      <div className="grid grid-cols-2 gap-3">
+        <Stat
+          label={t.lastSeen}
+          value={
+            sum.last_seen ? (
+              <span>
+                <span>{formatRelative(sum.last_seen, locale)}</span>
+                <span className="block text-[0.65rem] font-mono text-[color:var(--color-text-muted)]">
+                  {t.on} {formatAbs(sum.last_seen, locale)}
+                </span>
+              </span>
+            ) : (
+              t.none
+            )
+          }
+        />
+        <Stat
+          label={t.position}
+          value={
+            last ? (
+              <span className="font-mono text-[0.85rem]">
+                {last.lat.toFixed(3)}, {last.lon.toFixed(3)}
+              </span>
+            ) : (
+              t.none
+            )
+          }
+          extra={
+            mtUrl ? (
+              <a
+                href={mtUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[0.65rem] font-mono uppercase tracking-wider text-[color:var(--color-accent)] hover:underline"
+              >
+                {t.openMt}
+              </a>
+            ) : null
+          }
+        />
+        <Stat
+          label={t.speed}
+          value={
+            act.sog_knots != null ? (
+              <span className="font-mono">
+                {act.sog_knots.toFixed(1)} {t.knots}
+              </span>
+            ) : (
+              t.none
+            )
+          }
+        />
+        <Stat
+          label={t.course}
+          value={
+            act.cog_deg != null ? (
+              <span className="font-mono">
+                {Math.round(act.cog_deg)}
+                {t.degrees}
+              </span>
+            ) : (
+              t.none
+            )
+          }
+        />
+      </div>
+
+      <Card>
+        <Card.Header>
+          <h4 className="text-[0.7rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)]">
+            {t.fishing7d}
+          </h4>
+        </Card.Header>
+        <Card.Body className="flex items-baseline justify-between gap-4">
+          <span className="text-2xl font-bold">
+            {act.fishing_hours_7d != null
+              ? `${act.fishing_hours_7d} ${t.hours}`
+              : t.none}
+          </span>
+          <Sparkline data={series} ariaLabel={t.fishing24h} />
+        </Card.Body>
+      </Card>
+
+      {sum.current_zones.length > 0 ? (
+        <div>
+          <h4 className="text-[0.7rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] mb-2">
+            {t.zones}
+          </h4>
+          <ul className="flex flex-wrap gap-1.5">
+            {sum.current_zones.map((z) => (
+              <li
+                key={z}
+                className="text-[0.7rem] font-mono uppercase tracking-wider px-2 py-1 rounded-full border border-[color:var(--color-border)] text-[color:var(--color-text)]"
+              >
+                {z}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function Stat({
+  label,
+  value,
+  extra,
+}: {
+  label: string;
+  value: React.ReactNode;
+  extra?: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-lg border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-3">
+      <div className="text-[0.65rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)]">
+        {label}
+      </div>
+      <div className="mt-1 text-[color:var(--color-text)]">{value}</div>
+      {extra ? <div className="mt-1.5">{extra}</div> : null}
+    </div>
+  );
+}
+
+function Sparkline({
+  data,
+  ariaLabel,
+  width = 100,
+  height = 28,
+}: {
+  data: FishingHourPoint[];
+  ariaLabel: string;
+  width?: number;
+  height?: number;
+}) {
+  if (data.length < 2) {
+    return (
+      <span className="text-[0.65rem] font-mono text-[color:var(--color-text-muted)]">
+        —
+      </span>
+    );
+  }
+  const max = Math.max(...data.map((p) => p.hours), 0.0001);
+  const stepX = width / (data.length - 1);
+  const points = data
+    .map((p, i) => {
+      const x = i * stepX;
+      const y = height - (p.hours / max) * height;
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+    .join(" ");
+  return (
+    <svg
+      role="img"
+      aria-label={ariaLabel}
+      viewBox={`0 0 ${width} ${height}`}
+      width={width}
+      height={height}
+    >
+      <polyline
+        fill="none"
+        stroke="var(--color-accent)"
+        strokeWidth={1.5}
+        points={points}
+      />
+    </svg>
+  );
+}
+
+export default VesselActivityTab;
diff --git a/web/components/live/tabs/VesselAlertsTab.tsx b/web/components/live/tabs/VesselAlertsTab.tsx
new file mode 100644
index 0000000..7f10eaa
--- /dev/null
+++ b/web/components/live/tabs/VesselAlertsTab.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import * as React from "react";
+import { Card } from "@/components/ui";
+import { severityHex, type SeverityKey } from "@/lib/tokens";
+
+export type VesselAlert = {
+  id?: string | number;
+  start: string;
+  severity: string;
+  duration_hours?: number | null;
+  start_lat?: number | null;
+  start_lon?: number | null;
+  end_lat?: number | null;
+  end_lon?: number | null;
+  zones_entered?: string[] | null;
+  event_type?: string;
+  detail?: string;
+};
+
+type Props = {
+  alerts: VesselAlert[];
+  locale: "fr" | "en";
+  onAlertClick?: (lat: number, lon: number) => void;
+};
+
+const LABELS = {
+  fr: {
+    empty: "Aucune alerte sévère sur les 30 derniers jours.",
+    gap: "Coupure AIS",
+    duration: "durée",
+    zones: "zones",
+    on: "Centrer la carte",
+  },
+  en: {
+    empty: "No severe alerts in the last 30 days.",
+    gap: "AIS gap",
+    duration: "duration",
+    zones: "zones",
+    on: "Recenter map",
+  },
+} as const;
+
+const THIRTY_DAYS_MS = 30 * 24 * 60 * 60 * 1000;
+
+function severityKey(s: string | null | undefined): SeverityKey {
+  if (s === "CRITICAL" || s === "SUSPICIOUS" || s === "WATCH" || s === "CPWF" || s === "NORMAL") {
+    return s;
+  }
+  return "UNKNOWN";
+}
+
+function formatTs(ts: string, locale: "fr" | "en"): string {
+  const d = new Date(ts);
+  if (Number.isNaN(d.getTime())) return ts;
+  return d.toLocaleString(locale === "fr" ? "fr-FR" : "en-GB", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export function VesselAlertsTab({ alerts, locale, onAlertClick }: Props) {
+  const t = LABELS[locale];
+  const cutoff = Date.now() - THIRTY_DAYS_MS;
+  const recent = alerts
+    .filter((a) => {
+      const ts = Date.parse(a.start);
+      return Number.isFinite(ts) && ts >= cutoff;
+    })
+    .sort((a, b) => Date.parse(b.start) - Date.parse(a.start));
+
+  if (recent.length === 0) {
+    return <Empty>{t.empty}</Empty>;
+  }
+
+  return (
+    <ul className="space-y-2.5">
+      {recent.map((a, i) => {
+        const sev = severityKey(a.severity);
+        const color = severityHex[sev];
+        const titleParts: string[] = [];
+        if (a.event_type) titleParts.push(a.event_type);
+        else titleParts.push(t.gap);
+        if (a.zones_entered && a.zones_entered.length > 0) {
+          titleParts.push(a.zones_entered.join(", "));
+        }
+        const title = titleParts.join(" · ");
+        const canClick =
+          onAlertClick && a.start_lat != null && a.start_lon != null;
+        const handleClick = canClick
+          ? () => onAlertClick!(a.start_lat as number, a.start_lon as number)
+          : undefined;
+        const body = (
+          <Card.Body className="space-y-1.5">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span
+                className="text-[0.65rem] font-mono uppercase tracking-wider px-1.5 py-0.5 rounded border whitespace-nowrap"
+                style={{
+                  color,
+                  borderColor: `color-mix(in srgb, ${color} 50%, transparent)`,
+                  background: `color-mix(in srgb, ${color} 10%, transparent)`,
+                }}
+              >
+                {a.severity}
+              </span>
+              <span className="text-sm font-semibold text-[color:var(--color-text)]">
+                {title}
+              </span>
+              <span className="ml-auto text-[0.7rem] font-mono text-[color:var(--color-text-muted)]">
+                {formatTs(a.start, locale)}
+              </span>
+            </div>
+            <div className="text-xs text-[color:var(--color-text-muted)]">
+              {a.detail ? (
+                a.detail
+              ) : (
+                <>
+                  {a.start_lat != null && a.start_lon != null ? (
+                    <span className="font-mono">
+                      {a.start_lat.toFixed(2)}, {a.start_lon.toFixed(2)}
+                      {a.end_lat != null && a.end_lon != null ? (
+                        <>
+                          {" → "}
+                          {a.end_lat.toFixed(2)}, {a.end_lon.toFixed(2)}
+                        </>
+                      ) : null}
+                    </span>
+                  ) : null}
+                  {a.duration_hours != null ? (
+                    <span className="ml-2">
+                      {t.duration}: {a.duration_hours.toFixed(1)} h
+                    </span>
+                  ) : null}
+                </>
+              )}
+            </div>
+          </Card.Body>
+        );
+        return (
+          <li key={a.id ?? `${a.start}-${i}`}>
+            {canClick ? (
+              <button
+                type="button"
+                onClick={handleClick}
+                aria-label={`${title} — ${t.on}`}
+                className="w-full text-left rounded-xl border border-[color:var(--color-border)] bg-[color:var(--color-surface)] cursor-pointer hover:border-[color:var(--color-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] transition-colors"
+              >
+                {body}
+              </button>
+            ) : (
+              <Card>{body}</Card>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+function Empty({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="text-sm text-[color:var(--color-text-muted)] text-center py-8">
+      {children}
+    </div>
+  );
+}
+
+export default VesselAlertsTab;
diff --git a/web/components/live/tabs/VesselClosuresTab.tsx b/web/components/live/tabs/VesselClosuresTab.tsx
new file mode 100644
index 0000000..b24d46d
--- /dev/null
+++ b/web/components/live/tabs/VesselClosuresTab.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import * as React from "react";
+import { Card } from "@/components/ui";
+
+export type VesselClosure = {
+  id?: string;
+  subarea: string;
+  title: string;
+  summary: string;
+  start_date: string;
+  end_date?: string | null;
+  status: "ACTIVE" | "CLOSED_PAST" | "PROJECTED" | string;
+  source_urls?: string[];
+};
+
+type Props = {
+  closures: VesselClosure[];
+  locale: "fr" | "en";
+};
+
+const LABELS = {
+  fr: {
+    empty: "Aucune fermeture CCAMLR pertinente pour ce navire.",
+    open: "ouvert",
+    sources: "Sources",
+    activeDot: "Active aujourd'hui",
+  },
+  en: {
+    empty: "No relevant CCAMLR closure for this vessel.",
+    open: "open",
+    sources: "Sources",
+    activeDot: "Active today",
+  },
+} as const;
+
+function host(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+function statusColor(status: string): string {
+  const u = status.toUpperCase();
+  if (u === "ACTIVE") return "var(--color-danger)";
+  if (u === "CLOSED_PAST") return "var(--color-warn)";
+  if (u === "PROJECTED") return "var(--color-info)";
+  return "var(--color-text-muted)";
+}
+
+function isActiveToday(c: VesselClosure): boolean {
+  const today = new Date().toISOString().slice(0, 10);
+  if (c.status === "PROJECTED") return false;
+  if (c.start_date > today) return false;
+  if (c.end_date && c.end_date < today) return false;
+  return c.status === "ACTIVE" || c.status === "CLOSED_PAST";
+}
+
+export function VesselClosuresTab({ closures, locale }: Props) {
+  const t = LABELS[locale];
+  if (closures.length === 0) {
+    return (
+      <div className="text-sm text-[color:var(--color-text-muted)] text-center py-8">
+        {t.empty}
+      </div>
+    );
+  }
+
+  const sorted = [...closures].sort((a, b) =>
+    (b.start_date || "").localeCompare(a.start_date || ""),
+  );
+
+  return (
+    <ul className="space-y-3">
+      {sorted.map((c, i) => {
+        const color = statusColor(c.status);
+        const live = isActiveToday(c);
+        const range = c.end_date
+          ? `${c.start_date} → ${c.end_date}`
+          : `${c.start_date} → ${t.open}`;
+        return (
+          <li key={c.id ?? `${c.subarea}-${c.start_date}-${i}`}>
+            <Card>
+              <Card.Body className="space-y-2">
+                <div className="flex items-center gap-2 flex-wrap">
+                  {live ? (
+                    <span
+                      aria-label={t.activeDot}
+                      className="inline-block w-2 h-2 rounded-full"
+                      style={{ background: "var(--color-danger)" }}
+                    />
+                  ) : null}
+                  <span
+                    className="text-[0.65rem] font-mono uppercase tracking-wider px-1.5 py-0.5 rounded border whitespace-nowrap"
+                    style={{
+                      color,
+                      borderColor: `color-mix(in srgb, ${color} 50%, transparent)`,
+                      background: `color-mix(in srgb, ${color} 10%, transparent)`,
+                    }}
+                  >
+                    {c.status}
+                  </span>
+                  <span className="text-[0.65rem] font-mono uppercase tracking-wider text-[color:var(--color-accent)]">
+                    {c.subarea}
+                  </span>
+                  <span className="ml-auto text-[0.7rem] font-mono text-[color:var(--color-text-muted)]">
+                    {range}
+                  </span>
+                </div>
+                <div className="text-sm font-semibold text-[color:var(--color-text)]">
+                  {c.title}
+                </div>
+                <p className="text-xs leading-relaxed text-[color:var(--color-text-muted)]">
+                  {c.summary}
+                </p>
+                {c.source_urls && c.source_urls.length > 0 ? (
+                  <div className="text-[0.65rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)]">
+                    {t.sources}:{" "}
+                    {c.source_urls.map((u, idx) => (
+                      <React.Fragment key={u}>
+                        {idx > 0 ? " · " : null}
+                        <a
+                          href={u}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-[color:var(--color-accent)] hover:underline normal-case font-mono"
+                        >
+                          {host(u)}
+                        </a>
+                      </React.Fragment>
+                    ))}
+                  </div>
+                ) : null}
+              </Card.Body>
+            </Card>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export default VesselClosuresTab;
diff --git a/web/components/live/tabs/VesselEventLogTab.tsx b/web/components/live/tabs/VesselEventLogTab.tsx
new file mode 100644
index 0000000..c17436c
--- /dev/null
+++ b/web/components/live/tabs/VesselEventLogTab.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import * as React from "react";
+import { severityHex, type SeverityKey } from "@/lib/tokens";
+
+export type VesselLogEvent = {
+  id: number | string;
+  ts: string;
+  event_type: string;
+  zone_id?: string | null;
+  zone_name?: string | null;
+  severity?: string | null;
+  lat?: number | null;
+  lon?: number | null;
+  payload?: Record<string, unknown> | null;
+  source?: string | null;
+};
+
+type Props = {
+  events: VesselLogEvent[];
+  locale: "fr" | "en";
+};
+
+const LABELS = {
+  fr: {
+    empty: "Aucun événement live enregistré pour ce navire.",
+    source: "Source",
+  },
+  en: {
+    empty: "No live events recorded for this vessel.",
+    source: "Source",
+  },
+} as const;
+
+function severityKey(s: string | null | undefined): SeverityKey {
+  if (s === "CRITICAL" || s === "SUSPICIOUS" || s === "WATCH" || s === "CPWF" || s === "NORMAL") {
+    return s;
+  }
+  return "UNKNOWN";
+}
+
+function formatTs(ts: string): string {
+  const d = new Date(ts);
+  if (Number.isNaN(d.getTime())) return ts;
+  return d.toISOString().replace("T", " ").slice(0, 16) + "Z";
+}
+
+function extractSource(payload: Record<string, unknown> | null | undefined): string | null {
+  if (!payload) return null;
+  const v = (payload as Record<string, unknown>).source;
+  return typeof v === "string" ? v : null;
+}
+
+export function VesselEventLogTab({ events, locale }: Props) {
+  const t = LABELS[locale];
+  if (events.length === 0) {
+    return (
+      <div className="text-sm text-[color:var(--color-text-muted)] text-center py-8">
+        {t.empty}
+      </div>
+    );
+  }
+
+  const sorted = [...events].sort(
+    (a, b) => Date.parse(b.ts) - Date.parse(a.ts),
+  );
+
+  return (
+    <ol className="font-mono text-[0.78rem] leading-relaxed border border-[color:var(--color-border)] rounded-md bg-[color:var(--color-bg)] divide-y divide-[color:var(--color-border)]">
+      {sorted.map((e) => {
+        const sev = severityKey(e.severity);
+        const color = severityHex[sev];
+        const source = e.source ?? extractSource(e.payload);
+        const from =
+          e.payload && typeof (e.payload as Record<string, unknown>).from === "string"
+            ? ((e.payload as Record<string, unknown>).from as string)
+            : null;
+        const to =
+          e.payload && typeof (e.payload as Record<string, unknown>).to === "string"
+            ? ((e.payload as Record<string, unknown>).to as string)
+            : null;
+        return (
+          <li
+            key={e.id}
+            className="group px-3 py-1.5 hover:bg-[color:var(--color-surface-2)] transition-colors"
+            title={source ? `${t.source}: ${source}` : undefined}
+          >
+            <span className="text-[color:var(--color-text-muted)]">
+              {formatTs(e.ts)}
+            </span>
+            <span className="mx-2" style={{ color }}>
+              {e.event_type}
+            </span>
+            {e.zone_name || e.zone_id ? (
+              <span className="text-[color:var(--color-text)]">
+                · {e.zone_name ?? e.zone_id}
+              </span>
+            ) : null}
+            {from && to ? (
+              <span className="ml-2 text-[color:var(--color-text-muted)]">
+                {from} → {to}
+              </span>
+            ) : null}
+            {e.lat != null && e.lon != null ? (
+              <span className="ml-2 text-[color:var(--color-text-muted)]">
+                {e.lat.toFixed(2)}, {e.lon.toFixed(2)}
+              </span>
+            ) : null}
+            {source ? (
+              <span className="opacity-0 group-hover:opacity-100 transition-opacity ml-2 text-[color:var(--color-text-muted)]">
+                · {source}
+              </span>
+            ) : null}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+export default VesselEventLogTab;
diff --git a/web/components/live/tabs/VesselIdentityTab.tsx b/web/components/live/tabs/VesselIdentityTab.tsx
new file mode 100644
index 0000000..688b24c
--- /dev/null
+++ b/web/components/live/tabs/VesselIdentityTab.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import * as React from "react";
+import { Flag } from "@/components/Flag";
+
+// Profile/identity shape returned by /api/vessels/<slug> at runtime — not
+// modelled by web/lib/krill-watch.ts (read-only from this task), so the type
+// lives here. Any field can be missing; the renderer falls back to "—".
+export type VesselIdentity = {
+  operator?: string | null;
+  registered_owner?: string | null;
+  beneficial_owner?: string | null;
+  vessel_type?: string | null;
+  length_m?: number | string | null;
+  gross_tonnage?: number | string | null;
+  built?: number | string | null;
+  callsign?: string | null;
+  status?: string | null;
+  ofac_status?: string | null;
+  itf_foc_status?: string | null;
+  notes?: string | null;
+};
+
+export type VesselIdentitySource = {
+  identity?: VesselIdentity | null;
+  summary: {
+    flag: string | null;
+    imo: string | null;
+    mmsi: string | null;
+    operator?: string | null;
+    registered_owner?: string | null;
+    vessel_type?: string | null;
+    ownership_pending?: boolean;
+  };
+};
+
+type Props = {
+  data: VesselIdentitySource;
+  locale: "fr" | "en";
+};
+
+const LABELS = {
+  fr: {
+    operator: "Opérateur",
+    regOwner: "Propriétaire enregistré",
+    beneficialOwner: "Propriétaire bénéficiaire",
+    type: "Type",
+    length: "Longueur",
+    gt: "Tonnage brut",
+    built: "Construit",
+    callsign: "Indicatif",
+    flag: "Pavillon",
+    imo: "IMO",
+    mmsi: "MMSI",
+    ofac: "Statut OFAC",
+    itf: "Statut ITF (FOC)",
+    notes: "Notes",
+    pending: "vérification en cours",
+    none: "—",
+  },
+  en: {
+    operator: "Operator",
+    regOwner: "Registered owner",
+    beneficialOwner: "Beneficial owner",
+    type: "Type",
+    length: "Length",
+    gt: "Gross tonnage",
+    built: "Built",
+    callsign: "Callsign",
+    flag: "Flag",
+    imo: "IMO",
+    mmsi: "MMSI",
+    ofac: "OFAC status",
+    itf: "ITF (FOC) status",
+    notes: "Notes",
+    pending: "research pending",
+    none: "—",
+  },
+} as const;
+
+function display(value: unknown, fallback = "—"): string {
+  if (value == null || value === "") return fallback;
+  return String(value);
+}
+
+export function VesselIdentityTab({ data, locale }: Props) {
+  const t = LABELS[locale];
+  const ident = data.identity ?? {};
+  const sum = data.summary;
+  const operator = ident.operator ?? sum.operator ?? null;
+  const owner = ident.registered_owner ?? sum.registered_owner ?? null;
+  const vesselType = ident.vessel_type ?? sum.vessel_type ?? null;
+  const length =
+    ident.length_m != null && ident.length_m !== ""
+      ? `${ident.length_m} m`
+      : null;
+
+  const rows: Array<[string, React.ReactNode]> = [
+    [
+      t.operator,
+      operator ? (
+        <span>
+          {operator}
+          {sum.ownership_pending ? (
+            <span
+              className="ml-2 text-[0.65rem] font-mono uppercase tracking-wider px-1.5 py-0.5 rounded border border-[color:var(--color-warn)]/40 text-[color:var(--color-warn)]"
+              title={t.pending}
+            >
+              {t.pending}
+            </span>
+          ) : null}
+        </span>
+      ) : (
+        <Muted>{t.none}</Muted>
+      ),
+    ],
+    [t.regOwner, owner ? owner : <Muted>{t.none}</Muted>],
+    [
+      t.beneficialOwner,
+      ident.beneficial_owner ? ident.beneficial_owner : <Muted>{t.none}</Muted>,
+    ],
+    [t.type, vesselType ? vesselType : <Muted>{t.none}</Muted>],
+    [t.length, length ? length : <Muted>{t.none}</Muted>],
+    [t.gt, ident.gross_tonnage ? display(ident.gross_tonnage) : <Muted>{t.none}</Muted>],
+    [t.built, ident.built ? display(ident.built) : <Muted>{t.none}</Muted>],
+    [t.callsign, ident.callsign ? ident.callsign : <Muted>{t.none}</Muted>],
+    [
+      t.flag,
+      sum.flag ? (
+        <span className="inline-flex items-center gap-2">
+          <Flag code={sum.flag} size="sm" />
+          <span>{sum.flag}</span>
+        </span>
+      ) : (
+        <Muted>{t.none}</Muted>
+      ),
+    ],
+    [t.imo, sum.imo ? sum.imo : <Muted>{t.none}</Muted>],
+    [t.mmsi, sum.mmsi ? sum.mmsi : <Muted>{t.none}</Muted>],
+    [t.ofac, ident.ofac_status ? ident.ofac_status : <Muted>{t.none}</Muted>],
+    [t.itf, ident.itf_foc_status ? ident.itf_foc_status : <Muted>{t.none}</Muted>],
+  ];
+
+  return (
+    <div className="space-y-4 text-sm">
+      <dl className="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5">
+        {rows.map(([label, value]) => (
+          <React.Fragment key={label}>
+            <dt className="text-[0.7rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] py-0.5">
+              {label}
+            </dt>
+            <dd className="text-[color:var(--color-text)] py-0.5 min-w-0 break-words">
+              {value}
+            </dd>
+          </React.Fragment>
+        ))}
+      </dl>
+      {ident.notes ? (
+        <div>
+          <h4 className="text-[0.7rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] mb-1.5">
+            {t.notes}
+          </h4>
+          <p className="text-sm leading-relaxed text-[color:var(--color-text)]">
+            {ident.notes}
+          </p>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function Muted({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="text-[color:var(--color-text-muted)]">{children}</span>
+  );
+}
+
+export default VesselIdentityTab;
diff --git a/web/components/live/tabs/VesselIncidentsTab.tsx b/web/components/live/tabs/VesselIncidentsTab.tsx
new file mode 100644
index 0000000..c48f955
--- /dev/null
+++ b/web/components/live/tabs/VesselIncidentsTab.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import { Card } from "@/components/ui";
+
+export type VesselIncident = {
+  id: string;
+  date: string;
+  vessel_slug?: string | null;
+  incident_type: string;
+  title: string;
+  summary: string;
+  source_urls: string[];
+  confidence: "HIGH" | "MEDIUM" | "LOW" | string;
+  tags?: string[];
+};
+
+type Props = {
+  incidents: VesselIncident[];
+  locale: "fr" | "en";
+};
+
+const LABELS = {
+  fr: {
+    empty: "Aucun incident documenté pour ce navire.",
+    sources: "Sources",
+    fleetWide: "Toute la flotte",
+    vesselSpecific: "Ce navire",
+    confidenceHigh: "Confiance haute",
+    confidenceMedium: "Confiance moyenne",
+    confidenceLow: "Confiance faible",
+  },
+  en: {
+    empty: "No documented incidents for this vessel.",
+    sources: "Sources",
+    fleetWide: "Fleet-wide",
+    vesselSpecific: "This vessel",
+    confidenceHigh: "High confidence",
+    confidenceMedium: "Medium confidence",
+    confidenceLow: "Low confidence",
+  },
+} as const;
+
+function confidenceTone(c: string): { color: string; label: keyof typeof LABELS.fr } {
+  const u = c.toUpperCase();
+  if (u === "HIGH") return { color: "var(--color-good)", label: "confidenceHigh" };
+  if (u === "MEDIUM") return { color: "var(--color-warn)", label: "confidenceMedium" };
+  return { color: "var(--color-text-muted)", label: "confidenceLow" };
+}
+
+function host(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+export function VesselIncidentsTab({ incidents, locale }: Props) {
+  const t = LABELS[locale];
+  if (incidents.length === 0) {
+    return (
+      <div className="text-sm text-[color:var(--color-text-muted)] text-center py-8">
+        {t.empty}
+      </div>
+    );
+  }
+
+  const sorted = [...incidents].sort((a, b) =>
+    (b.date || "").localeCompare(a.date || ""),
+  );
+
+  return (
+    <ul className="space-y-3">
+      {sorted.map((inc) => {
+        const tone = confidenceTone(inc.confidence);
+        const isVessel = !!inc.vessel_slug;
+        return (
+          <li key={inc.id}>
+            <Card>
+              <Card.Body className="space-y-2">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="text-[0.65rem] font-mono uppercase tracking-wider px-1.5 py-0.5 rounded border border-[color:var(--color-border)] text-[color:var(--color-text-muted)]">
+                    {isVessel ? t.vesselSpecific : t.fleetWide}
+                  </span>
+                  <span
+                    className="text-[0.65rem] font-mono uppercase tracking-wider px-1.5 py-0.5 rounded border whitespace-nowrap"
+                    style={{
+                      color: tone.color,
+                      borderColor: `color-mix(in srgb, ${tone.color} 50%, transparent)`,
+                      background: `color-mix(in srgb, ${tone.color} 10%, transparent)`,
+                    }}
+                    title={t[tone.label]}
+                  >
+                    {inc.confidence}
+                  </span>
+                  <span className="ml-auto text-[0.7rem] font-mono text-[color:var(--color-text-muted)]">
+                    {inc.date}
+                  </span>
+                </div>
+                <div className="text-sm font-semibold text-[color:var(--color-text)]">
+                  {inc.title}
+                </div>
+                <p className="text-xs leading-relaxed text-[color:var(--color-text-muted)]">
+                  {inc.summary}
+                </p>
+                {inc.source_urls.length > 0 ? (
+                  <div className="text-[0.65rem] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)]">
+                    {t.sources}:{" "}
+                    {inc.source_urls.map((u, i) => (
+                      <React.Fragment key={u}>
+                        {i > 0 ? " · " : null}
+                        <a
+                          href={u}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-[color:var(--color-accent)] hover:underline normal-case font-mono"
+                        >
+                          {host(u)}
+                        </a>
+                      </React.Fragment>
+                    ))}
+                  </div>
+                ) : null}
+              </Card.Body>
+            </Card>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export default VesselIncidentsTab;
diff --git a/web/components/map/FleetMap.tsx b/web/components/map/FleetMap.tsx
index b415d84..c874ed7 100644
--- a/web/components/map/FleetMap.tsx
+++ b/web/components/map/FleetMap.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useCallback } from "react";
-import type { Map, Popup } from "maplibre-gl";
+import type { Map, Popup, IControl } from "maplibre-gl";
 
 export type FleetPosition = {
   mmsi: string;
@@ -26,6 +26,7 @@ type Props = {
   ambient: AmbientPosition[];
   showAmbient: boolean;
   apiBase: string;
+  locale?: "fr" | "en";
 };
 
 function formatTs(ts: string | null): string {
@@ -44,12 +45,81 @@ function formatTs(ts: string | null): string {
   }
 }
 
-export function FleetMap({ fleet, ambient, showAmbient }: Props) {
+const STYLE_KEY = "krillMapStyle";
+type StyleMode = "map" | "satellite";
+
+function getInitialStyle(): StyleMode {
+  if (typeof window === "undefined") return "map";
+  const saved = window.localStorage.getItem(STYLE_KEY);
+  return saved === "satellite" ? "satellite" : "map";
+}
+
+function makeStyleToggleControl(
+  initial: StyleMode,
+  onToggle: (next: StyleMode) => void,
+  locale: "fr" | "en",
+): IControl {
+  let current: StyleMode = initial;
+  let container: HTMLDivElement | null = null;
+  let button: HTMLButtonElement | null = null;
+
+  const labels = locale === "fr"
+    ? { map: "Vue carte", satellite: "Vue satellite" }
+    : { map: "Map view", satellite: "Satellite view" };
+
+  const render = () => {
+    if (!button) return;
+    const next: StyleMode = current === "map" ? "satellite" : "map";
+    button.textContent = next === "satellite" ? "🛰" : "🗺";
+    button.title = labels[next];
+    button.setAttribute("aria-label", labels[next]);
+    button.setAttribute("aria-pressed", current === "satellite" ? "true" : "false");
+  };
+
+  return {
+    onAdd() {
+      container = document.createElement("div");
+      container.className = "maplibregl-ctrl maplibregl-ctrl-group";
+
+      button = document.createElement("button");
+      button.type = "button";
+      button.style.fontSize = "18px";
+      button.style.lineHeight = "1";
+      button.addEventListener("click", () => {
+        current = current === "map" ? "satellite" : "map";
+        try { window.localStorage.setItem(STYLE_KEY, current); } catch {}
+        onToggle(current);
+        render();
+      });
+      container.appendChild(button);
+
+      render();
+      return container;
+    },
+    onRemove() {
+      if (container?.parentNode) container.parentNode.removeChild(container);
+      container = null;
+      button = null;
+    },
+  };
+}
+
+function applyStyle(map: Map, mode: StyleMode) {
+  const osmVisible = mode === "map" ? "visible" : "none";
+  const satVisible = mode === "satellite" ? "visible" : "none";
+  if (map.getLayer("osm-background")) {
+    map.setLayoutProperty("osm-background", "visibility", osmVisible);
+  }
+  if (map.getLayer("satellite-background")) {
+    map.setLayoutProperty("satellite-background", "visibility", satVisible);
+  }
+}
+
+export function FleetMap({ fleet, ambient, showAmbient, locale = "en" }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const mapRef = useRef<Map | null>(null);
   const popupRef = useRef<Popup | null>(null);
 
-  // Build GeoJSON from fleet positions
   const fleetGeoJson = {
     type: "FeatureCollection" as const,
     features: fleet
@@ -78,7 +148,6 @@ export function FleetMap({ fleet, ambient, showAmbient }: Props) {
       })),
   };
 
-  // Update source data when positions change
   useEffect(() => {
     const map = mapRef.current;
     if (!map) return;
@@ -119,10 +188,10 @@ export function FleetMap({ fleet, ambient, showAmbient }: Props) {
     });
   }, []);
 
-  // Initialise map once
   useEffect(() => {
     if (!containerRef.current || mapRef.current) return;
     let map: Map;
+    const initialStyle = getInitialStyle();
 
     import("maplibre-gl").then(({ Map: MapGL, NavigationControl }) => {
       map = new MapGL({
@@ -136,8 +205,29 @@ export function FleetMap({ fleet, ambient, showAmbient }: Props) {
               tileSize: 256,
               attribution: "© OpenStreetMap contributors",
             },
+            "satellite-tiles": {
+              type: "raster",
+              tiles: [
+                "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+              ],
+              tileSize: 256,
+              attribution: "Tiles © Esri — Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community",
+            },
           },
-          layers: [{ id: "osm-background", type: "raster", source: "osm-tiles" }],
+          layers: [
+            {
+              id: "osm-background",
+              type: "raster",
+              source: "osm-tiles",
+              layout: { visibility: initialStyle === "map" ? "visible" : "none" },
+            },
+            {
+              id: "satellite-background",
+              type: "raster",
+              source: "satellite-tiles",
+              layout: { visibility: initialStyle === "satellite" ? "visible" : "none" },
+            },
+          ],
         },
         center: [-45, -60],
         zoom: 3,
@@ -145,9 +235,12 @@ export function FleetMap({ fleet, ambient, showAmbient }: Props) {
       mapRef.current = map;
 
       map.addControl(new NavigationControl(), "top-right");
+      map.addControl(
+        makeStyleToggleControl(initialStyle, (next) => applyStyle(map, next), locale),
+        "top-right",
+      );
 
       map.on("load", () => {
-        // Fleet positions source + layer
         map.addSource("fleet-positions", { type: "geojson", data: fleetGeoJson });
         map.addLayer({
           id: "fleet-dots",
@@ -164,7 +257,6 @@ export function FleetMap({ fleet, ambient, showAmbient }: Props) {
           },
         });
 
-        // Ambient positions source + layer
         map.addSource("ambient-positions", { type: "geojson", data: ambientGeoJson });
         map.addLayer({
           id: "ambient-dots",
@@ -178,17 +270,14 @@ export function FleetMap({ fleet, ambient, showAmbient }: Props) {
           },
         });
 
-        // Fleet click — navigate to vessel detail
         map.on("click", "fleet-dots", (e) => {
           if (!e.features?.length) return;
           const slug = e.features[0].properties.slug;
-          if (slug) window.location.href = `/en/vessels/${slug}`;
+          if (slug) window.location.href = `/${locale}/vessels/${slug}`;
         });
 
-        // Ambient click — popup
         map.on("click", "ambient-dots", handleAmbientClick);
 
-        // Cursor pointers
         for (const layer of ["fleet-dots", "ambient-dots"]) {
           map.on("mouseenter", layer, () => { map.getCanvas().style.cursor = "pointer"; });
           map.on("mouseleave", layer, () => { map.getCanvas().style.cursor = ""; });
diff --git a/web/components/map/LiveTrackerMap.tsx b/web/components/map/LiveTrackerMap.tsx
new file mode 100644
index 0000000..3c0aa0f
--- /dev/null
+++ b/web/components/map/LiveTrackerMap.tsx
@@ -0,0 +1,729 @@
+"use client";
+
+import { useEffect, useRef, useCallback } from "react";
+import type { Map, Popup } from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { connectStream, type StreamEvent } from "@/lib/sse-client";
+import {
+  addZoneSource,
+  addZoneLayers,
+  setZonesData,
+  setZonesVisibility,
+} from "@/components/map/layers/zonesLayers";
+import {
+  addPenguinLayers,
+  setPenguinVisibility,
+} from "@/components/map/layers/penguinLayers";
+import {
+  addGraticuleLayer,
+  setGraticuleVisibility,
+} from "@/components/map/layers/graticule";
+import {
+  makeStyleToggleControl,
+  getInitialStyle,
+  pickControlPosition,
+  type StyleMode,
+} from "@/components/map/style-toggle-control";
+
+export type LiveFleetVessel = {
+  mmsi: string;
+  slug: string;
+  name: string;
+  flag?: string | null;
+  severity?: string | null;
+  friendly?: boolean;
+  current_zones?: string[];
+  last_position: {
+    lat: number;
+    lon: number;
+    ts?: string | null;
+    sog?: number | null;
+    cog?: number | null;
+  } | null;
+  last_seen?: string | null;
+};
+
+export type AmbientPosition = {
+  mmsi: string;
+  lat: number;
+  lon: number;
+  ts?: string | null;
+};
+
+type Props = {
+  mode: "live" | "static";
+  apiBase: string;
+  initialFleet?: LiveFleetVessel[];
+  initialAmbient?: AmbientPosition[];
+  zones?: unknown;
+  selectedSlug?: string | null;
+  onSelectVessel?: (slug: string | null) => void;
+  showAmbient: boolean;
+  showZones: boolean;
+  showD1MPA: boolean;
+  showGraticule: boolean;
+  showLabels: boolean;
+  show24hTracks: boolean;
+  locale: "fr" | "en";
+};
+
+const SEVERITY_COLOR: Record<string, string> = {
+  CRITICAL: "#ff3860",
+  SUSPICIOUS: "#ffb020",
+  WATCH: "#c084fc",
+  NORMAL: "#2ecc71",
+  CPWF: "#00d1ff",
+  UNKNOWN: "#6b7a8c",
+};
+
+const ALPHA3_TO_ALPHA2: Record<string, string> = {
+  NOR: "NO", CHN: "CN", HKG: "HK", KOR: "KR", CHL: "CL", KNA: "KN", NAM: "NA",
+  RUS: "RU", UKR: "UA", GBR: "GB", USA: "US", JPN: "JP", PAN: "PA", LBR: "LR",
+  MLT: "MT", BHS: "BS", VCT: "VC", VUT: "VU", BLZ: "BZ", COM: "KM",
+  POL: "PL", ESP: "ES", PRT: "PT", FRA: "FR", DEU: "DE",
+};
+
+function flagAlpha2(code?: string | null): string {
+  if (!code) return "XX";
+  const c = code.toUpperCase();
+  if (c.length === 3) return ALPHA3_TO_ALPHA2[c] || "XX";
+  return c.length === 2 ? c : "XX";
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/[&<>"']/g, (c) => (
+    { "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" }[c] ?? c
+  ));
+}
+
+const BASEMAP_DARK_URL = "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
+
+const BASEMAP_SATELLITE = {
+  version: 8,
+  sources: {
+    "esri-imagery": {
+      type: "raster",
+      tiles: ["https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"],
+      tileSize: 256,
+      maxzoom: 19,
+      attribution: "Imagery: Esri, Maxar, Earthstar Geographics, GIS User Community",
+    },
+    "carto-labels": {
+      type: "raster",
+      tiles: ["https://basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png"],
+      tileSize: 256,
+      attribution: "© OpenStreetMap, © CARTO",
+    },
+  },
+  layers: [
+    { id: "imagery", type: "raster", source: "esri-imagery" },
+    { id: "labels", type: "raster", source: "carto-labels", paint: { "raster-opacity": 0.85 } },
+  ],
+} as const;
+
+export function LiveTrackerMap(props: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<Map | null>(null);
+  const popupRef = useRef<Popup | null>(null);
+  const fleetRef = useRef<LiveFleetVessel[]>(props.initialFleet ?? []);
+  const ambientRef = useRef<AmbientPosition[]>(props.initialAmbient ?? []);
+  const flagsRequestedRef = useRef<Set<string>>(new Set());
+  const styleModeRef = useRef<StyleMode>(typeof window !== "undefined" ? getInitialStyle() : "map");
+
+  // Refs for handlers/props that the long-lived map listeners need to read
+  // without going stale. The mount effect captures these refs once; the
+  // callbacks dereference at fire time so the user always gets the latest.
+  const onSelectVesselRef = useRef(props.onSelectVessel);
+  useEffect(() => { onSelectVesselRef.current = props.onSelectVessel; }, [props.onSelectVessel]);
+
+  // -------- GeoJSON builders --------
+
+  const buildVesselsGeoJson = useCallback(() => {
+    const features = fleetRef.current
+      .filter((v) => v.last_position && v.last_position.lat != null && v.last_position.lon != null)
+      .map((v) => {
+        const pos = v.last_position!;
+        const a2 = flagAlpha2(v.flag);
+        const sev = v.severity || "UNKNOWN";
+        const properties: Record<string, unknown> = {
+          slug: v.slug,
+          name: v.name,
+          flag: v.flag ?? "",
+          flag_a2: a2,
+          severity: sev,
+          color: SEVERITY_COLOR[sev] || SEVERITY_COLOR.UNKNOWN,
+          friendly: v.friendly ? 1 : 0,
+        };
+        if (pos.cog != null) properties.cog = pos.cog;
+        return {
+          type: "Feature" as const,
+          geometry: { type: "Point" as const, coordinates: [pos.lon, pos.lat] },
+          properties,
+        };
+      });
+    return { type: "FeatureCollection" as const, features };
+  }, []);
+
+  const buildAmbientGeoJson = useCallback(() => ({
+    type: "FeatureCollection" as const,
+    features: ambientRef.current
+      .filter((p) => p.lat != null && p.lon != null)
+      .map((p) => ({
+        type: "Feature" as const,
+        geometry: { type: "Point" as const, coordinates: [p.lon, p.lat] },
+        properties: { mmsi: p.mmsi, ts: p.ts ?? "" },
+      })),
+  }), []);
+
+  const buildSelectedHaloGeoJson = useCallback((slug: string | null | undefined) => {
+    if (!slug) return { type: "FeatureCollection" as const, features: [] };
+    const v = fleetRef.current.find((x) => x.slug === slug);
+    if (!v?.last_position) return { type: "FeatureCollection" as const, features: [] };
+    return {
+      type: "FeatureCollection" as const,
+      features: [{
+        type: "Feature" as const,
+        geometry: { type: "Point" as const, coordinates: [v.last_position.lon, v.last_position.lat] },
+        properties: { slug },
+      }],
+    };
+  }, []);
+
+  // -------- Source updates --------
+
+  const refreshVesselsSource = useCallback(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    const src = map.getSource("vessels") as { setData?: (d: unknown) => void } | undefined;
+    src?.setData?.(buildVesselsGeoJson());
+  }, [buildVesselsGeoJson]);
+
+  const refreshAmbientSource = useCallback(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    const src = map.getSource("ambient") as { setData?: (d: unknown) => void } | undefined;
+    src?.setData?.(buildAmbientGeoJson());
+  }, [buildAmbientGeoJson]);
+
+  const refreshSelectedHalo = useCallback(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    const src = map.getSource("selected-halo") as { setData?: (d: unknown) => void } | undefined;
+    src?.setData?.(buildSelectedHaloGeoJson(props.selectedSlug));
+  }, [buildSelectedHaloGeoJson, props.selectedSlug]);
+
+  // -------- Flag icons (fetched lazily per fleet) --------
+
+  const ensureFlagImage = useCallback((a2: string) => {
+    const map = mapRef.current;
+    if (!map) return;
+    if (!a2 || a2.length !== 2 || a2 === "XX") return;
+    const key = `flag-${a2}`;
+    if (flagsRequestedRef.current.has(key)) return;
+    flagsRequestedRef.current.add(key);
+    if (map.hasImage(key)) return;
+
+    const img = new Image(40, 27);
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      const m = mapRef.current;
+      if (!m || m.hasImage(key)) return;
+      try { m.addImage(key, img); } catch { /* race; harmless */ }
+      // Force a redraw so the new icon picks up
+      const src = m.getSource("vessels") as { setData?: (d: unknown) => void } | undefined;
+      src?.setData?.(buildVesselsGeoJson());
+    };
+    img.onerror = () => { /* fallback to flag-XX */ };
+    img.src = `https://flagcdn.com/w40/${a2.toLowerCase()}.png`;
+  }, [buildVesselsGeoJson]);
+
+  const preloadFleetFlags = useCallback(() => {
+    const codes = new Set<string>();
+    for (const v of fleetRef.current) {
+      const a2 = flagAlpha2(v.flag);
+      if (a2 && a2 !== "XX") codes.add(a2);
+    }
+    for (const a2 of codes) ensureFlagImage(a2);
+  }, [ensureFlagImage]);
+
+  // -------- Layer install (every source + layer for the live tracker) --------
+
+  const installAllLayers = useCallback(() => {
+    const map = mapRef.current;
+    if (!map) return;
+
+    addZoneSource(map);
+    addZoneLayers(map);
+    addPenguinLayers(map);
+    addGraticuleLayer(map, props.showGraticule);
+
+    if (!map.getSource("tracks")) {
+      map.addSource("tracks", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
+    }
+    if (!map.getLayer("track-line")) {
+      map.addLayer({
+        id: "track-line",
+        type: "line",
+        source: "tracks",
+        layout: {
+          visibility: props.show24hTracks ? "visible" : "none",
+          "line-cap": "round",
+          "line-join": "round",
+        },
+        paint: {
+          "line-color": ["match", ["get", "severity"],
+            "CRITICAL", "#ff3860",
+            "SUSPICIOUS", "#ffb020",
+            "WATCH", "#c084fc",
+            "CPWF", "#00d1ff",
+            "#2ecc71",
+          ],
+          "line-width": 2,
+          "line-opacity": 0.85,
+        },
+      });
+    }
+
+    // COG arrow (registered before vessels-arrow uses it)
+    if (!map.hasImage("cog-arrow")) {
+      const size = 14;
+      const c = document.createElement("canvas");
+      c.width = c.height = size;
+      const ctx = c.getContext("2d");
+      if (ctx) {
+        ctx.fillStyle = "#fff";
+        ctx.beginPath();
+        ctx.moveTo(size / 2, 1);
+        ctx.lineTo(size - 1, size - 2);
+        ctx.lineTo(1, size - 2);
+        ctx.closePath();
+        ctx.fill();
+        const data = ctx.getImageData(0, 0, size, size).data;
+        map.addImage("cog-arrow", { width: size, height: size, data });
+      }
+    }
+
+    // Fallback flag icon for unknown alpha-2 codes
+    if (!map.hasImage("flag-XX")) {
+      const w = 24, h = 16;
+      const c = document.createElement("canvas");
+      c.width = w; c.height = h;
+      const ctx = c.getContext("2d");
+      if (ctx) {
+        ctx.fillStyle = "#3a4254";
+        ctx.fillRect(0, 0, w, h);
+        ctx.strokeStyle = "#6b7a8c";
+        ctx.lineWidth = 1;
+        ctx.strokeRect(0.5, 0.5, w - 1, h - 1);
+        ctx.fillStyle = "#cfd6e0";
+        ctx.font = "700 11px sans-serif";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText("?", w / 2, h / 2 + 1);
+        const data = ctx.getImageData(0, 0, w, h).data;
+        map.addImage("flag-XX", { width: w, height: h, data });
+      }
+    }
+
+    // Selected-halo (added before vessels source so the halo renders under
+    // the dot — MapLibre draws layers in declaration order).
+    if (!map.getSource("selected-halo")) {
+      map.addSource("selected-halo", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
+      map.addLayer({
+        id: "selected-halo",
+        type: "circle",
+        source: "selected-halo",
+        paint: {
+          "circle-radius": 28,
+          "circle-color": "#ffffff",
+          "circle-opacity": 0,
+          "circle-stroke-color": "#5ec8ff",
+          "circle-stroke-width": 2,
+          "circle-stroke-opacity": 0.85,
+        },
+      });
+    }
+
+    // Vessels source + 5 layers (halo / arrow / dot / flag / label)
+    if (!map.getSource("vessels")) {
+      map.addSource("vessels", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
+
+      map.addLayer({
+        id: "vessels-halo",
+        type: "circle",
+        source: "vessels",
+        paint: {
+          "circle-radius": ["case", ["==", ["get", "severity"], "CRITICAL"], 22, 14],
+          "circle-color": ["get", "color"],
+          "circle-opacity": ["case", ["==", ["get", "severity"], "CRITICAL"], 0.30, 0.15],
+          "circle-stroke-width": 0,
+        },
+      });
+
+      map.addLayer({
+        id: "vessels-arrow",
+        type: "symbol",
+        source: "vessels",
+        filter: ["has", "cog"],
+        layout: {
+          "icon-image": "cog-arrow",
+          "icon-size": 0.7,
+          "icon-rotate": ["get", "cog"],
+          "icon-rotation-alignment": "map",
+          "icon-allow-overlap": true,
+          "icon-ignore-placement": true,
+          "icon-offset": [0, -14],
+        },
+      });
+
+      map.addLayer({
+        id: "vessels-dot",
+        type: "circle",
+        source: "vessels",
+        paint: {
+          "circle-radius": ["case", ["==", ["get", "severity"], "CRITICAL"], 8, 6.5],
+          "circle-color": ["get", "color"],
+          "circle-stroke-color": "#fff",
+          "circle-stroke-width": 1.5,
+          "circle-opacity": 0.95,
+        },
+      });
+
+      map.addLayer({
+        id: "vessels-flag",
+        type: "symbol",
+        source: "vessels",
+        layout: {
+          "icon-image": ["coalesce",
+            ["image", ["concat", "flag-", ["get", "flag_a2"]]],
+            ["image", "flag-XX"],
+          ],
+          "icon-size": 0.85,
+          "icon-offset": [0, -22],
+          "icon-allow-overlap": true,
+          "icon-ignore-placement": true,
+        },
+      });
+
+      map.addLayer({
+        id: "vessels-label",
+        type: "symbol",
+        source: "vessels",
+        layout: {
+          "text-field": ["get", "name"],
+          "text-size": 11,
+          "text-offset": [0, 1.3],
+          "text-anchor": "top",
+          "text-allow-overlap": false,
+          "visibility": props.showLabels ? "visible" : "none",
+        },
+        paint: {
+          "text-color": "#e3ecf6",
+          "text-halo-color": "#0b0e13",
+          "text-halo-width": 1.6,
+        },
+      });
+
+      map.on("click", "vessels-dot", (e) => {
+        if (!e.features?.length) return;
+        const slug = String(e.features[0].properties?.slug || "");
+        onSelectVesselRef.current?.(slug || null);
+      });
+
+      map.on("mouseenter", "vessels-dot", (e) => {
+        map.getCanvas().style.cursor = "pointer";
+        if (!e.features?.length) return;
+        const f = e.features[0];
+        const name = escapeHtml(String(f.properties?.name || "Vessel"));
+        const sev = String(f.properties?.severity || "UNKNOWN");
+        if (popupRef.current) popupRef.current.remove();
+        void import("maplibre-gl").then(({ Popup }) => {
+          const m = mapRef.current;
+          if (!m) return;
+          popupRef.current = new Popup({ closeButton: false, closeOnClick: false, maxWidth: "200px" })
+            .setLngLat(e.lngLat)
+            .setHTML(
+              `<div style="font-family:sans-serif;font-size:12px;color:#e3ecf6">` +
+              `<strong>${name}</strong><br/>` +
+              `<span style="opacity:0.8">${sev}</span>` +
+              `</div>`,
+            )
+            .addTo(m);
+        });
+      });
+
+      map.on("mouseleave", "vessels-dot", () => {
+        map.getCanvas().style.cursor = "";
+        if (popupRef.current) {
+          popupRef.current.remove();
+          popupRef.current = null;
+        }
+      });
+    }
+
+    // Ambient (non-fleet) traffic dots
+    if (!map.getSource("ambient")) {
+      map.addSource("ambient", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
+      map.addLayer({
+        id: "ambient-dots",
+        type: "circle",
+        source: "ambient",
+        layout: { visibility: props.showAmbient ? "visible" : "none" },
+        paint: {
+          "circle-radius": 4,
+          "circle-color": "#97a2b6",
+          "circle-opacity": 0.6,
+        },
+      });
+    }
+
+    // Re-apply visibility (style swap re-creates layers but loses their state)
+    setZonesVisibility(map, props.showZones);
+    setPenguinVisibility(map, props.showD1MPA);
+    setGraticuleVisibility(map, props.showGraticule);
+  }, [
+    props.showAmbient,
+    props.showZones,
+    props.showD1MPA,
+    props.showGraticule,
+    props.showLabels,
+    props.show24hTracks,
+  ]);
+
+  // -------- Zones data fetch --------
+
+  const loadZones = useCallback(async () => {
+    const map = mapRef.current;
+    if (!map) return;
+    if (props.zones) {
+      setZonesData(map, props.zones);
+      return;
+    }
+    try {
+      const res = await fetch(`${props.apiBase}/api/zones`, { cache: "force-cache" });
+      if (!res.ok) return;
+      const fc = await res.json();
+      const m = mapRef.current;
+      if (m) setZonesData(m, fc);
+    } catch { /* silent — zones are non-critical for boot */ }
+  }, [props.apiBase, props.zones]);
+
+  // -------- Initial fleet/ambient fetch (live mode only, falls back to /api/vessels) --------
+
+  const fetchInitialFleet = useCallback(async () => {
+    if (props.initialFleet) {
+      fleetRef.current = props.initialFleet;
+      preloadFleetFlags();
+      refreshVesselsSource();
+      refreshSelectedHalo();
+      return;
+    }
+    if (props.mode !== "live") return;
+    try {
+      const res = await fetch(`${props.apiBase}/api/vessels`, { cache: "no-store" });
+      if (!res.ok) return;
+      const data = (await res.json()) as { vessels: LiveFleetVessel[] };
+      fleetRef.current = data.vessels || [];
+      preloadFleetFlags();
+      refreshVesselsSource();
+      refreshSelectedHalo();
+    } catch { /* silent */ }
+  }, [props.apiBase, props.mode, props.initialFleet, preloadFleetFlags, refreshVesselsSource, refreshSelectedHalo]);
+
+  const fetchAmbient = useCallback(async () => {
+    if (!props.showAmbient) return;
+    if (props.initialAmbient) {
+      ambientRef.current = props.initialAmbient;
+      refreshAmbientSource();
+      return;
+    }
+    try {
+      const res = await fetch(
+        `${props.apiBase}/api/positions/in-zone?zone=convention_area&hours=24&exclude_fleet=true`,
+        { cache: "no-store" },
+      );
+      if (!res.ok) return;
+      const data = (await res.json()) as { positions: AmbientPosition[] };
+      ambientRef.current = data.positions || [];
+      refreshAmbientSource();
+    } catch { /* silent */ }
+  }, [props.apiBase, props.showAmbient, props.initialAmbient, refreshAmbientSource]);
+
+  // -------- SSE event handler --------
+
+  const handleStreamEvent = useCallback((ev: StreamEvent) => {
+    if (ev.type !== "fleet_update") return;
+    let touched = false;
+    const fleet = fleetRef.current;
+    for (const update of ev.positions) {
+      const idx = fleet.findIndex((v) => v.mmsi === update.mmsi);
+      if (idx < 0) continue;
+      const cur = fleet[idx];
+      fleet[idx] = {
+        ...cur,
+        severity: update.severity || cur.severity,
+        current_zones: update.zones || cur.current_zones,
+        last_position: {
+          lat: update.lat,
+          lon: update.lon,
+          ts: update.ts ?? null,
+          sog: update.sog_knots ?? null,
+          cog: update.cog_deg ?? null,
+        },
+        last_seen: update.ts ?? cur.last_seen,
+      };
+      touched = true;
+    }
+    if (touched) {
+      refreshVesselsSource();
+      refreshSelectedHalo();
+    }
+  }, [refreshVesselsSource, refreshSelectedHalo]);
+
+  // -------- Style toggle handler (full setStyle reload) --------
+
+  const handleStyleToggle = useCallback((next: StyleMode) => {
+    const map = mapRef.current;
+    if (!map) return;
+    styleModeRef.current = next;
+    map.setStyle(next === "satellite" ? (BASEMAP_SATELLITE as never) : BASEMAP_DARK_URL);
+    map.once("style.load", () => {
+      installAllLayers();
+      void loadZones();
+      refreshVesselsSource();
+      refreshAmbientSource();
+      refreshSelectedHalo();
+    });
+  }, [installAllLayers, loadZones, refreshVesselsSource, refreshAmbientSource, refreshSelectedHalo]);
+
+  // -------- Mount: create the map (once) --------
+
+  useEffect(() => {
+    if (!containerRef.current || mapRef.current) return;
+    let cancelled = false;
+    let cleanupSse: (() => void) | null = null;
+
+    void import("maplibre-gl").then(({ Map: MapGL, NavigationControl, ScaleControl }) => {
+      if (cancelled || !containerRef.current) return;
+
+      const map = new MapGL({
+        container: containerRef.current,
+        style: styleModeRef.current === "satellite" ? (BASEMAP_SATELLITE as never) : BASEMAP_DARK_URL,
+        center: [-50, -60],
+        zoom: 3,
+        attributionControl: { compact: true },
+      });
+      mapRef.current = map;
+
+      map.addControl(new NavigationControl({ showCompass: false }), "bottom-right");
+      map.addControl(new ScaleControl({ unit: "nautical" }), "bottom-left");
+      map.addControl(
+        makeStyleToggleControl({
+          initialMode: styleModeRef.current,
+          onToggle: handleStyleToggle,
+          locale: props.locale,
+        }),
+        pickControlPosition(),
+      );
+
+      map.on("load", () => {
+        installAllLayers();
+        void loadZones();
+        void fetchInitialFleet();
+        void fetchAmbient();
+
+        if (props.mode === "live") {
+          cleanupSse = connectStream({
+            apiBase: props.apiBase,
+            onEvent: handleStreamEvent,
+          });
+        }
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      if (cleanupSse) cleanupSse();
+      if (popupRef.current) {
+        popupRef.current.remove();
+        popupRef.current = null;
+      }
+      mapRef.current?.remove();
+      mapRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // -------- React to prop changes --------
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map) setZonesVisibility(map, props.showZones);
+  }, [props.showZones]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map) setPenguinVisibility(map, props.showD1MPA);
+  }, [props.showD1MPA]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map) setGraticuleVisibility(map, props.showGraticule);
+  }, [props.showGraticule]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map?.getLayer("vessels-label")) {
+      map.setLayoutProperty("vessels-label", "visibility", props.showLabels ? "visible" : "none");
+    }
+  }, [props.showLabels]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map?.getLayer("track-line")) {
+      map.setLayoutProperty("track-line", "visibility", props.show24hTracks ? "visible" : "none");
+    }
+  }, [props.show24hTracks]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map?.getLayer("ambient-dots")) {
+      map.setLayoutProperty("ambient-dots", "visibility", props.showAmbient ? "visible" : "none");
+    }
+    if (props.showAmbient) void fetchAmbient();
+  }, [props.showAmbient, fetchAmbient]);
+
+  useEffect(() => {
+    refreshSelectedHalo();
+  }, [props.selectedSlug, refreshSelectedHalo]);
+
+  useEffect(() => {
+    if (props.initialFleet) {
+      fleetRef.current = props.initialFleet;
+      preloadFleetFlags();
+      refreshVesselsSource();
+      refreshSelectedHalo();
+    }
+  }, [props.initialFleet, preloadFleetFlags, refreshVesselsSource, refreshSelectedHalo]);
+
+  useEffect(() => {
+    if (props.initialAmbient) {
+      ambientRef.current = props.initialAmbient;
+      refreshAmbientSource();
+    }
+  }, [props.initialAmbient, refreshAmbientSource]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map && props.zones) setZonesData(map, props.zones);
+  }, [props.zones]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="w-full h-full rounded-xl overflow-hidden border border-[color:var(--color-border)]"
+      role="region"
+      aria-label={props.locale === "fr" ? "Carte du tracker en direct" : "Live tracker map"}
+    />
+  );
+}
diff --git a/web/components/map/VesselTrail.tsx b/web/components/map/VesselTrail.tsx
new file mode 100644
index 0000000..82f2d85
--- /dev/null
+++ b/web/components/map/VesselTrail.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import type { Map as MaplibreMap } from "maplibre-gl";
+import type { VesselHistory } from "@/lib/trail-types";
+import {
+  addTrailLayers,
+  removeTrailLayers,
+  setTrailData,
+  setTrailVisibility,
+} from "@/components/map/layers/trailLayers";
+
+type Props = {
+  // Map ref injected by the parent (e.g. <LiveTrackerMap> or P2-T04's
+  // vessel-page map). Null while the map is still booting; we wait for
+  // it to land before adding any layers.
+  map: MaplibreMap | null;
+  history: VesselHistory | null;
+  visible?: boolean;
+};
+
+// Headless helper. Owns the lifecycle of the trail layers but renders no
+// DOM. Safe to mount alongside live position layers; layer ids are
+// namespaced so they won't collide.
+export function VesselTrail({ map, history, visible = true }: Props) {
+  React.useEffect(() => {
+    if (!map) return;
+    // The parent map may still be in the middle of a setStyle() reload
+    // (satellite toggle from T02). Defer adding layers until the next
+    // style.load event in that case.
+    const apply = () => {
+      addTrailLayers(map);
+      setTrailData(map, history);
+      setTrailVisibility(map, visible);
+    };
+    if (map.isStyleLoaded()) {
+      apply();
+    } else {
+      map.once("style.load", apply);
+    }
+    return () => {
+      // Don't remove layers on every prop change — only on full unmount.
+    };
+  }, [map, history, visible]);
+
+  // Cleanup only when the component unmounts entirely, so prop-driven
+  // re-runs of the effect above stay cheap.
+  React.useEffect(() => {
+    if (!map) return undefined;
+    return () => {
+      try {
+        removeTrailLayers(map);
+      } catch {
+        // map may already be destroyed by parent — that's fine, layers
+        // disappear with it.
+      }
+    };
+  }, [map]);
+
+  return null;
+}
+
+export default VesselTrail;
diff --git a/web/components/map/VesselsMapClient.tsx b/web/components/map/VesselsMapClient.tsx
index c2a5edd..16af8ea 100644
--- a/web/components/map/VesselsMapClient.tsx
+++ b/web/components/map/VesselsMapClient.tsx
@@ -90,6 +90,7 @@ export function VesselsMapClient({ fleet, apiBase, locale }: Props) {
         ambient={ambient}
         showAmbient={showAmbient}
         apiBase={apiBase ?? ""}
+        locale={locale === "fr" ? "fr" : "en"}
       />
     </div>
   );
diff --git a/web/components/map/layers/graticule.ts b/web/components/map/layers/graticule.ts
new file mode 100644
index 0000000..5596f4e
--- /dev/null
+++ b/web/components/map/layers/graticule.ts
@@ -0,0 +1,64 @@
+/**
+ * Lat/lon graticule. Ported from frontend/app.js:206-229.
+ * One LineString per meridian (every 10°) and parallel (every 5°),
+ * sampled densely enough that great-circle projection still looks straight.
+ */
+
+import type { Map } from "maplibre-gl";
+
+type GraticuleFeature = {
+  type: "Feature";
+  properties: { kind: "meridian" | "parallel"; value: number };
+  geometry: { type: "LineString"; coordinates: [number, number][] };
+};
+
+type GraticuleFC = {
+  type: "FeatureCollection";
+  features: GraticuleFeature[];
+};
+
+export function buildGraticule(stepLat = 5, stepLon = 10): GraticuleFC {
+  const features: GraticuleFeature[] = [];
+  for (let lon = -180; lon <= 180; lon += stepLon) {
+    features.push({
+      type: "Feature",
+      properties: { kind: "meridian", value: lon },
+      geometry: {
+        type: "LineString",
+        coordinates: Array.from({ length: 73 }, (_, i) => [lon, -90 + i * 2.5] as [number, number]),
+      },
+    });
+  }
+  for (let lat = -85; lat <= 85; lat += stepLat) {
+    features.push({
+      type: "Feature",
+      properties: { kind: "parallel", value: lat },
+      geometry: {
+        type: "LineString",
+        coordinates: Array.from({ length: 73 }, (_, i) => [-180 + i * 5, lat] as [number, number]),
+      },
+    });
+  }
+  return { type: "FeatureCollection", features };
+}
+
+export function addGraticuleLayer(map: Map, visible: boolean): void {
+  if (!map.getSource("graticule")) {
+    map.addSource("graticule", { type: "geojson", data: buildGraticule() });
+  }
+  if (!map.getLayer("graticule-line")) {
+    map.addLayer({
+      id: "graticule-line",
+      type: "line",
+      source: "graticule",
+      layout: { visibility: visible ? "visible" : "none" },
+      paint: { "line-color": "#7c8aa0", "line-opacity": 0.35, "line-width": 0.6 },
+    });
+  }
+}
+
+export function setGraticuleVisibility(map: Map, visible: boolean): void {
+  if (map.getLayer("graticule-line")) {
+    map.setLayoutProperty("graticule-line", "visibility", visible ? "visible" : "none");
+  }
+}
diff --git a/web/components/map/layers/penguinLayers.ts b/web/components/map/layers/penguinLayers.ts
new file mode 100644
index 0000000..32e2c52
--- /dev/null
+++ b/web/components/map/layers/penguinLayers.ts
@@ -0,0 +1,91 @@
+/**
+ * Penguin foraging-buffer + colony layers (D1 MPA campaign overlay). Ported
+ * from frontend/app.js:323-347 and 362-382.
+ *
+ * Two outline layers (campaign / other tier) so each can carry a static
+ * dasharray — see zonesLayers.ts for the same MapLibre 4.x constraint.
+ *
+ * Assumes the shared `zones` source has been added (see addZoneSource in
+ * zonesLayers.ts).
+ */
+
+import type { Map } from "maplibre-gl";
+
+export const PENGUIN_LAYER_IDS = [
+  "penguin-buffer-fill",
+  "penguin-buffer-outline",
+  "penguin-buffer-outline-other",
+  "penguin-colony-dot",
+  "penguin-colony-label",
+] as const;
+
+export function addPenguinLayers(map: Map): void {
+  if (map.getLayer("penguin-buffer-fill")) return;
+
+  map.addLayer({
+    id: "penguin-buffer-fill",
+    type: "fill",
+    source: "zones",
+    filter: ["==", ["get", "category"], "penguin_buffer"],
+    paint: {
+      "fill-color": "#22d3ee",
+      "fill-opacity": ["case", ["==", ["get", "tier"], "campaign"], 0.18, 0.08],
+    },
+  });
+
+  map.addLayer({
+    id: "penguin-buffer-outline",
+    type: "line",
+    source: "zones",
+    filter: ["all",
+      ["==", ["get", "category"], "penguin_buffer"],
+      ["==", ["get", "tier"], "campaign"],
+    ],
+    paint: { "line-color": "#22d3ee", "line-width": 1.4, "line-dasharray": [1] },
+  });
+
+  map.addLayer({
+    id: "penguin-buffer-outline-other",
+    type: "line",
+    source: "zones",
+    filter: ["all",
+      ["==", ["get", "category"], "penguin_buffer"],
+      ["!=", ["get", "tier"], "campaign"],
+    ],
+    paint: { "line-color": "#22d3ee", "line-width": 0.8, "line-dasharray": [4, 3] },
+  });
+
+  map.addLayer({
+    id: "penguin-colony-dot",
+    type: "circle",
+    source: "zones",
+    filter: ["==", ["get", "category"], "penguin_colony"],
+    paint: {
+      "circle-radius": 4,
+      "circle-color": "#22d3ee",
+      "circle-stroke-color": "#0b0e13",
+      "circle-stroke-width": 1.5,
+    },
+  });
+
+  map.addLayer({
+    id: "penguin-colony-label",
+    type: "symbol",
+    source: "zones",
+    filter: ["==", ["get", "category"], "penguin_colony"],
+    layout: {
+      "text-field": ["get", "name"],
+      "text-size": 10,
+      "text-offset": [0, 1.0],
+      "text-anchor": "top",
+    },
+    paint: { "text-color": "#bae6fd", "text-halo-color": "#0b0e13", "text-halo-width": 1.5 },
+  });
+}
+
+export function setPenguinVisibility(map: Map, visible: boolean): void {
+  const vis = visible ? "visible" : "none";
+  for (const id of PENGUIN_LAYER_IDS) {
+    if (map.getLayer(id)) map.setLayoutProperty(id, "visibility", vis);
+  }
+}
diff --git a/web/components/map/layers/trailLayers.ts b/web/components/map/layers/trailLayers.ts
new file mode 100644
index 0000000..5be27e5
--- /dev/null
+++ b/web/components/map/layers/trailLayers.ts
@@ -0,0 +1,143 @@
+// Adds + drives the historical trail layers on a MapLibre map. Stays
+// import-only — no React, no fetch, no global state — so VesselTrail (the
+// React wrapper) can mount/unmount without leaking sources between
+// remounts.
+
+import type { Map as MaplibreMap } from "maplibre-gl";
+import type { VesselHistory } from "@/lib/trail-types";
+import {
+  EMPTY_EVENTS_FC,
+  EMPTY_FC,
+  positionsToEventMarkers,
+  positionsToTrailGeoJSON,
+} from "@/lib/trail-coloring";
+import { severityHex } from "@/lib/tokens";
+
+const SOURCE_TRAIL = "vessel-trail";
+const SOURCE_EVENTS = "vessel-trail-events";
+const LAYER_LINE = "vessel-trail-line";
+const LAYER_CURRENT = "vessel-trail-current";
+const LAYER_EVENT_MARKERS = "vessel-trail-event-markers";
+
+const SEVERITY_COLOR_EXPR: unknown[] = [
+  "match",
+  ["get", "severity"],
+  "CRITICAL",
+  severityHex.CRITICAL,
+  "SUSPICIOUS",
+  severityHex.SUSPICIOUS,
+  "WATCH",
+  severityHex.WATCH,
+  "CPWF",
+  severityHex.CPWF,
+  "NORMAL",
+  severityHex.NORMAL,
+  severityHex.UNKNOWN,
+];
+
+export function addTrailLayers(map: MaplibreMap): void {
+  if (!map.getSource(SOURCE_TRAIL)) {
+    map.addSource(SOURCE_TRAIL, {
+      type: "geojson",
+      data: EMPTY_FC as unknown as GeoJSON.FeatureCollection,
+    });
+  }
+  if (!map.getSource(SOURCE_EVENTS)) {
+    map.addSource(SOURCE_EVENTS, {
+      type: "geojson",
+      data: EMPTY_EVENTS_FC as unknown as GeoJSON.FeatureCollection,
+    });
+  }
+
+  if (!map.getLayer(LAYER_LINE)) {
+    map.addLayer({
+      id: LAYER_LINE,
+      type: "line",
+      source: SOURCE_TRAIL,
+      filter: ["==", ["geometry-type"], "LineString"],
+      paint: {
+        "line-color": SEVERITY_COLOR_EXPR as never,
+        "line-width": 3,
+        "line-opacity": 0.85,
+      },
+      layout: { "line-cap": "round", "line-join": "round" },
+    });
+  }
+
+  if (!map.getLayer(LAYER_CURRENT)) {
+    map.addLayer({
+      id: LAYER_CURRENT,
+      type: "circle",
+      source: SOURCE_TRAIL,
+      filter: ["all", ["==", ["geometry-type"], "Point"], ["==", ["get", "isCurrent"], true]],
+      paint: {
+        "circle-radius": 8,
+        "circle-color": SEVERITY_COLOR_EXPR as never,
+        "circle-stroke-width": 2,
+        "circle-stroke-color": "#ffffff",
+      },
+    });
+  }
+
+  if (!map.getLayer(LAYER_EVENT_MARKERS)) {
+    map.addLayer({
+      id: LAYER_EVENT_MARKERS,
+      type: "circle",
+      source: SOURCE_EVENTS,
+      paint: {
+        "circle-radius": 5,
+        "circle-color": "#ffffff",
+        "circle-stroke-width": 2,
+        "circle-stroke-color": [
+          "match",
+          ["get", "severity"],
+          "CRITICAL",
+          severityHex.CRITICAL,
+          "SUSPICIOUS",
+          severityHex.SUSPICIOUS,
+          "WATCH",
+          severityHex.WATCH,
+          "CPWF",
+          severityHex.CPWF,
+          "#cfd6e0",
+        ],
+      },
+    });
+  }
+}
+
+export function setTrailData(map: MaplibreMap, history: VesselHistory | null): void {
+  const trailFc = history
+    ? positionsToTrailGeoJSON(history.positions)
+    : EMPTY_FC;
+  const eventsFc = history
+    ? positionsToEventMarkers(history.events, history.positions)
+    : EMPTY_EVENTS_FC;
+
+  const trailSrc = map.getSource(SOURCE_TRAIL) as
+    | { setData: (d: unknown) => void }
+    | undefined;
+  trailSrc?.setData(trailFc);
+
+  const eventsSrc = map.getSource(SOURCE_EVENTS) as
+    | { setData: (d: unknown) => void }
+    | undefined;
+  eventsSrc?.setData(eventsFc);
+}
+
+export function setTrailVisibility(map: MaplibreMap, visible: boolean): void {
+  const layers = [LAYER_LINE, LAYER_CURRENT, LAYER_EVENT_MARKERS];
+  for (const id of layers) {
+    if (!map.getLayer(id)) continue;
+    map.setLayoutProperty(id, "visibility", visible ? "visible" : "none");
+  }
+}
+
+export function removeTrailLayers(map: MaplibreMap): void {
+  for (const id of [LAYER_LINE, LAYER_CURRENT, LAYER_EVENT_MARKERS]) {
+    if (map.getLayer(id)) map.removeLayer(id);
+  }
+  for (const id of [SOURCE_TRAIL, SOURCE_EVENTS]) {
+    if (map.getSource(id)) map.removeSource(id);
+  }
+}
diff --git a/web/components/map/layers/zonesLayers.ts b/web/components/map/layers/zonesLayers.ts
new file mode 100644
index 0000000..714206b
--- /dev/null
+++ b/web/components/map/layers/zonesLayers.ts
@@ -0,0 +1,137 @@
+/**
+ * CCAMLR zone layers — fill + per-category outlines + labels. Ported from
+ * frontend/app.js:254-322 and 348-361.
+ *
+ * MapLibre 4.x rejects data expressions on `line-dasharray`, which is why a
+ * single zone-outline layer is split into one layer per category (each
+ * carrying a static dasharray). Same constraint drives penguinLayers.ts.
+ */
+
+import type { Map } from "maplibre-gl";
+
+export const ZONE_LAYER_IDS = [
+  "zone-fill",
+  "zone-outline",
+  "zone-outline-buffer",
+  "zone-outline-subarea",
+  "zone-outline-other",
+  "zone-label",
+] as const;
+
+export function addZoneSource(map: Map, initial?: unknown): void {
+  if (map.getSource("zones")) return;
+  map.addSource("zones", {
+    type: "geojson",
+    data: (initial as never) ?? { type: "FeatureCollection", features: [] },
+  });
+}
+
+export function addZoneLayers(map: Map): void {
+  if (map.getLayer("zone-fill")) return;
+
+  map.addLayer({
+    id: "zone-fill",
+    type: "fill",
+    source: "zones",
+    filter: ["all",
+      ["==", ["geometry-type"], "Polygon"],
+      ["!=", ["get", "category"], "penguin_buffer"],
+    ],
+    paint: {
+      "fill-color": ["match", ["get", "category"],
+        "mpa", "#ff3860",
+        "buffer_zone", "#ffb020",
+        "fishery_subarea", "#3b82f6",
+        "convention_area", "#1e293b",
+        "#666",
+      ],
+      "fill-opacity": ["match", ["get", "category"],
+        "mpa", 0.18,
+        "buffer_zone", 0.15,
+        "fishery_subarea", 0.06,
+        "convention_area", 0.02,
+        0.10,
+      ],
+    },
+  });
+
+  map.addLayer({
+    id: "zone-outline",
+    type: "line",
+    source: "zones",
+    filter: ["all",
+      ["==", ["geometry-type"], "Polygon"],
+      ["==", ["get", "category"], "mpa"],
+    ],
+    paint: { "line-color": "#ff3860", "line-width": 1.6, "line-dasharray": [1] },
+  });
+
+  map.addLayer({
+    id: "zone-outline-buffer",
+    type: "line",
+    source: "zones",
+    filter: ["all",
+      ["==", ["geometry-type"], "Polygon"],
+      ["==", ["get", "category"], "buffer_zone"],
+    ],
+    paint: { "line-color": "#ffb020", "line-width": 1.0, "line-dasharray": [3, 2] },
+  });
+
+  map.addLayer({
+    id: "zone-outline-subarea",
+    type: "line",
+    source: "zones",
+    filter: ["all",
+      ["==", ["geometry-type"], "Polygon"],
+      ["==", ["get", "category"], "fishery_subarea"],
+    ],
+    paint: { "line-color": "#3b82f6", "line-width": 1.0, "line-dasharray": [2, 2] },
+  });
+
+  map.addLayer({
+    id: "zone-outline-other",
+    type: "line",
+    source: "zones",
+    filter: ["all",
+      ["==", ["geometry-type"], "Polygon"],
+      ["!=", ["get", "category"], "mpa"],
+      ["!=", ["get", "category"], "buffer_zone"],
+      ["!=", ["get", "category"], "fishery_subarea"],
+      ["!=", ["get", "category"], "penguin_buffer"],
+    ],
+    paint: {
+      "line-color": ["match", ["get", "category"], "convention_area", "#475569", "#888"],
+      "line-width": 0.8,
+      "line-dasharray": [2, 2],
+    },
+  });
+
+  map.addLayer({
+    id: "zone-label",
+    type: "symbol",
+    source: "zones",
+    filter: ["all",
+      ["==", ["geometry-type"], "Polygon"],
+      ["!=", ["get", "category"], "convention_area"],
+      ["!=", ["get", "category"], "penguin_buffer"],
+    ],
+    layout: {
+      "text-field": ["get", "name"],
+      "text-size": 11,
+      "text-offset": [0, 0.5],
+    },
+    paint: { "text-color": "#cfd6e0", "text-halo-color": "#0b0e13", "text-halo-width": 1.5 },
+  });
+}
+
+export function setZonesVisibility(map: Map, visible: boolean): void {
+  const vis = visible ? "visible" : "none";
+  for (const id of ZONE_LAYER_IDS) {
+    if (map.getLayer(id)) map.setLayoutProperty(id, "visibility", vis);
+  }
+}
+
+export function setZonesData(map: Map, data: unknown): void {
+  const src = map.getSource("zones") as { setData?: (d: unknown) => void } | undefined;
+  src?.setData?.(data);
+}
diff --git a/web/components/map/style-toggle-control.ts b/web/components/map/style-toggle-control.ts
new file mode 100644
index 0000000..cfe9d08
--- /dev/null
+++ b/web/components/map/style-toggle-control.ts
@@ -0,0 +1,97 @@
+/**
+ * Map / satellite basemap toggle. Extracted from FleetMap.tsx so the live
+ * tracker can reuse the same persisted preference (`krillMapStyle` in
+ * localStorage) and the same control look-and-feel.
+ *
+ * The control itself is position-agnostic; callers pass the result of
+ * pickControlPosition() (or a fixed string) to map.addControl() to choose
+ * placement. On mobile the toggle goes bottom-left so it avoids the thumb
+ * collision with the navigation control in the top-right.
+ */
+
+import type { IControl } from "maplibre-gl";
+
+export type StyleMode = "map" | "satellite";
+
+export const STYLE_KEY = "krillMapStyle";
+
+export function getInitialStyle(): StyleMode {
+  if (typeof window === "undefined") return "map";
+  try {
+    const saved = window.localStorage.getItem(STYLE_KEY);
+    return saved === "satellite" ? "satellite" : "map";
+  } catch {
+    return "map";
+  }
+}
+
+export function persistStyle(mode: StyleMode): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(STYLE_KEY, mode);
+  } catch {
+    // private mode / quota — silently ignore
+  }
+}
+
+export type StyleToggleOptions = {
+  initialMode: StyleMode;
+  onToggle: (next: StyleMode) => void;
+  locale: "fr" | "en";
+};
+
+export function makeStyleToggleControl(opts: StyleToggleOptions): IControl {
+  let current: StyleMode = opts.initialMode;
+  let container: HTMLDivElement | null = null;
+  let button: HTMLButtonElement | null = null;
+
+  const labels = opts.locale === "fr"
+    ? { map: "Vue carte", satellite: "Vue satellite" }
+    : { map: "Map view", satellite: "Satellite view" };
+
+  const render = () => {
+    if (!button) return;
+    const next: StyleMode = current === "map" ? "satellite" : "map";
+    button.textContent = next === "satellite" ? "🛰" : "🗺";
+    button.title = labels[next];
+    button.setAttribute("aria-label", labels[next]);
+    button.setAttribute("aria-pressed", current === "satellite" ? "true" : "false");
+  };
+
+  return {
+    onAdd() {
+      container = document.createElement("div");
+      container.className = "maplibregl-ctrl maplibregl-ctrl-group";
+
+      button = document.createElement("button");
+      button.type = "button";
+      button.style.fontSize = "18px";
+      button.style.lineHeight = "1";
+      button.addEventListener("click", () => {
+        current = current === "map" ? "satellite" : "map";
+        persistStyle(current);
+        opts.onToggle(current);
+        render();
+      });
+      container.appendChild(button);
+
+      render();
+      return container;
+    },
+    onRemove() {
+      if (container?.parentNode) container.parentNode.removeChild(container);
+      container = null;
+      button = null;
+    },
+  };
+}
+
+/**
+ * Mobile-aware control placement. Top-right collides with thumb reach on
+ * narrow screens, so we put the toggle bottom-left where it can't conflict
+ * with NavigationControl (top-right) or scale (bottom-right).
+ */
+export function pickControlPosition(): "top-right" | "bottom-left" {
+  if (typeof window === "undefined") return "top-right";
+  return window.innerWidth >= 768 ? "top-right" : "bottom-left";
+}
diff --git a/web/components/share/CopyLinkButton.tsx b/web/components/share/CopyLinkButton.tsx
new file mode 100644
index 0000000..a725a1b
--- /dev/null
+++ b/web/components/share/CopyLinkButton.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import * as React from "react";
+
+const STRINGS = {
+  fr: { copy: "Copier le lien", copied: "Lien copié !" },
+  en: { copy: "Copy link", copied: "Link copied!" },
+} as const;
+
+type Props = {
+  url: string;
+  locale: "fr" | "en";
+  className?: string;
+};
+
+export function CopyLinkButton({ url, locale, className = "" }: Props) {
+  const t = STRINGS[locale];
+  const [copied, setCopied] = React.useState(false);
+
+  const onClick = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = url;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      ta.remove();
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1800);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-live="polite"
+      className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border border-[color:var(--color-border)] text-xs font-mono uppercase tracking-wider hover:border-[color:var(--color-accent)] hover:text-[color:var(--color-accent)] ${className}`}
+    >
+      <span aria-hidden>{copied ? "✓" : "📋"}</span>
+      {copied ? t.copied : t.copy}
+    </button>
+  );
+}
+
+export default CopyLinkButton;
diff --git a/web/components/share/ShareButton.tsx b/web/components/share/ShareButton.tsx
new file mode 100644
index 0000000..d829599
--- /dev/null
+++ b/web/components/share/ShareButton.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import * as React from "react";
+import type { ShareContext } from "@/lib/share-urls";
+import { ShareMenu } from "./ShareMenu";
+
+const STRINGS = {
+  fr: { share: "Partager" },
+  en: { share: "Share" },
+} as const;
+
+type Props = {
+  context: ShareContext;
+  locale: "fr" | "en";
+  variant?: "primary" | "ghost";
+  className?: string;
+};
+
+function useNativeShareSupported(): boolean {
+  const [supported, setSupported] = React.useState(false);
+  React.useEffect(() => {
+    setSupported(
+      typeof navigator !== "undefined" && typeof navigator.share === "function",
+    );
+  }, []);
+  return supported;
+}
+
+export function ShareButton({
+  context,
+  locale,
+  variant = "ghost",
+  className = "",
+}: Props) {
+  const t = STRINGS[locale];
+  const [open, setOpen] = React.useState(false);
+  const supportsNativeShare = useNativeShareSupported();
+
+  // Native share is preferred on mobile because it surfaces installed
+  // apps (Signal, Telegram, native Twitter, etc.). Desktop fallback is
+  // the popover menu.
+  const onClick = async () => {
+    if (supportsNativeShare && /Mobi|Android|iPhone|iPad/i.test(
+      typeof navigator !== "undefined" ? navigator.userAgent : "",
+    )) {
+      try {
+        await navigator.share({
+          title: context.title,
+          text: context.title,
+          url: context.url,
+        });
+        return;
+      } catch (err) {
+        // User cancelled (AbortError) or permission denied — fall
+        // through to the menu.
+        if ((err as { name?: string })?.name === "AbortError") return;
+      }
+    }
+    setOpen((v) => !v);
+  };
+
+  const baseClass =
+    variant === "primary"
+      ? "inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[color:var(--color-accent)] text-[#06080d] text-sm font-mono uppercase tracking-wider hover:bg-[color:var(--color-accent-soft)]"
+      : "inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-[color:var(--color-border)] text-sm font-mono uppercase tracking-wider hover:border-[color:var(--color-accent)] hover:text-[color:var(--color-accent)]";
+
+  return (
+    <div className={`relative inline-block ${className}`}>
+      <button
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={onClick}
+        className={baseClass}
+      >
+        <span aria-hidden>↗</span>
+        {t.share}
+      </button>
+      {open && (
+        <ShareMenu
+          context={context}
+          locale={locale}
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+export default ShareButton;
diff --git a/web/components/share/ShareMenu.tsx b/web/components/share/ShareMenu.tsx
new file mode 100644
index 0000000..d8d818d
--- /dev/null
+++ b/web/components/share/ShareMenu.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import * as React from "react";
+import {
+  blueskyIntent,
+  linkedInIntent,
+  mastodonIntent,
+  ogImageUrl,
+  tweetIntent,
+  type ShareContext,
+} from "@/lib/share-urls";
+
+const STRINGS = {
+  fr: {
+    title: "Partager",
+    tweet: "Partager sur X (Twitter)",
+    bluesky: "Partager sur Bluesky",
+    mastodon: "Partager sur Mastodon",
+    linkedin: "Partager sur LinkedIn",
+    copy: "Copier le lien",
+    copied: "Lien copié",
+    download: "Télécharger l'image",
+    close: "Fermer",
+    mastodonPrompt: "Adresse de votre instance Mastodon (ex: mastodon.social)",
+  },
+  en: {
+    title: "Share",
+    tweet: "Share on X (Twitter)",
+    bluesky: "Share on Bluesky",
+    mastodon: "Share on Mastodon",
+    linkedin: "Share on LinkedIn",
+    copy: "Copy link",
+    copied: "Link copied",
+    download: "Download image",
+    close: "Close",
+    mastodonPrompt: "Your Mastodon instance domain (e.g. mastodon.social)",
+  },
+} as const;
+
+type Props = {
+  context: ShareContext;
+  locale: "fr" | "en";
+  onClose: () => void;
+};
+
+const MASTODON_INSTANCE_KEY = "krill-watch:mastodon-instance";
+
+function externalLink(url: string) {
+  // Tab-safe window open. We use `window.open(...,"_blank","noopener")`
+  // so the share target can't navigate the parent (rel-noopener equiv).
+  if (typeof window === "undefined") return;
+  window.open(url, "_blank", "noopener,noreferrer");
+}
+
+export function ShareMenu({ context, locale, onClose }: Props) {
+  const t = STRINGS[locale];
+  const [copied, setCopied] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const itemsRef = React.useRef<Array<HTMLButtonElement | HTMLAnchorElement | null>>([]);
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+  // Keyboard nav: ↑↓ rotate focus; Esc closes.
+  const moveFocus = React.useCallback(
+    (delta: number) => {
+      const items = itemsRef.current.filter(Boolean) as HTMLElement[];
+      if (items.length === 0) return;
+      const next = (activeIndex + delta + items.length) % items.length;
+      setActiveIndex(next);
+      items[next]?.focus();
+    },
+    [activeIndex],
+  );
+
+  React.useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        moveFocus(1);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        moveFocus(-1);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [moveFocus, onClose]);
+
+  // Close on click outside.
+  React.useEffect(() => {
+    const onDown = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [onClose]);
+
+  // Focus the first item on mount so keyboard users land inside the menu.
+  React.useEffect(() => {
+    itemsRef.current[0]?.focus();
+  }, []);
+
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(context.url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    } catch {
+      // Fallback: a hidden input + execCommand. Old but reliable on
+      // browsers that block clipboard write without a user gesture.
+      const ta = document.createElement("textarea");
+      ta.value = context.url;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      ta.remove();
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    }
+  };
+
+  const onMastodon = () => {
+    let instance = "";
+    if (typeof window !== "undefined") {
+      instance = localStorage.getItem(MASTODON_INSTANCE_KEY) || "";
+    }
+    if (!instance) {
+      const entered = window.prompt(t.mastodonPrompt, "mastodon.social");
+      if (!entered) return;
+      instance = entered.trim().replace(/^https?:\/\//, "");
+      try {
+        localStorage.setItem(MASTODON_INSTANCE_KEY, instance);
+      } catch {
+        // private mode, ignore
+      }
+    }
+    externalLink(mastodonIntent(context, `https://${instance}`));
+    onClose();
+  };
+
+  const items: Array<{
+    key: string;
+    label: string;
+    icon: string;
+    href?: string;
+    onClick?: () => void;
+  }> = [
+    { key: "tweet", label: t.tweet, icon: "𝕏", href: tweetIntent(context) },
+    { key: "bluesky", label: t.bluesky, icon: "🦋", href: blueskyIntent(context) },
+    { key: "mastodon", label: t.mastodon, icon: "🐘", onClick: onMastodon },
+    { key: "linkedin", label: t.linkedin, icon: "in", href: linkedInIntent(context) },
+    {
+      key: "download",
+      label: t.download,
+      icon: "🖼",
+      href: ogImageUrl(context),
+    },
+    {
+      key: "copy",
+      label: copied ? t.copied : t.copy,
+      icon: copied ? "✓" : "📋",
+      onClick: onCopy,
+    },
+  ];
+
+  return (
+    <div
+      ref={containerRef}
+      role="menu"
+      aria-label={t.title}
+      className="absolute right-0 mt-2 w-72 rounded-xl border border-[color:var(--color-border)] bg-[color:var(--color-surface-2)] shadow-2xl overflow-hidden z-50"
+    >
+      <div className="px-4 py-2 text-xs font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] border-b border-[color:var(--color-border)]">
+        {t.title}
+      </div>
+      <ul className="py-1">
+        {items.map((item, idx) => {
+          const baseClass =
+            "flex items-center gap-3 w-full px-4 py-2.5 text-sm hover:bg-[color:var(--color-surface)] focus:bg-[color:var(--color-surface)] focus:outline-none";
+          const inner = (
+            <>
+              <span aria-hidden className="w-6 text-center text-base">
+                {item.icon}
+              </span>
+              <span>{item.label}</span>
+            </>
+          );
+          if (item.href) {
+            return (
+              <li key={item.key} role="none">
+                <a
+                  ref={(el) => {
+                    itemsRef.current[idx] = el;
+                  }}
+                  role="menuitem"
+                  href={item.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  download={item.key === "download" ? `${context.slug}.png` : undefined}
+                  className={baseClass}
+                  onClick={() => {
+                    // Close after action so the user lands back on the
+                    // page they shared from.
+                    if (item.key !== "download") onClose();
+                  }}
+                >
+                  {inner}
+                </a>
+              </li>
+            );
+          }
+          return (
+            <li key={item.key} role="none">
+              <button
+                type="button"
+                ref={(el) => {
+                  itemsRef.current[idx] = el;
+                }}
+                role="menuitem"
+                onClick={item.onClick}
+                className={`${baseClass} text-left`}
+              >
+                {inner}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default ShareMenu;
diff --git a/web/components/timeline/TimelineMarker.tsx b/web/components/timeline/TimelineMarker.tsx
new file mode 100644
index 0000000..d264bd6
--- /dev/null
+++ b/web/components/timeline/TimelineMarker.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { severityHex, type SeverityKey } from "@/lib/tokens";
+import type { TrailEvent } from "@/lib/trail-types";
+
+type Props = {
+  position: number; // 0..1, horizontal placement on the timeline
+  type: TrailEvent["type"];
+  severity?: SeverityKey | null;
+  label?: string;
+  onClick?: () => void;
+  ariaLabel?: string;
+};
+
+const TYPE_GLYPH: Record<TrailEvent["type"], string> = {
+  ZONE_ENTERED: "▼",
+  ZONE_LEFT: "▲",
+  AIS_GAP_OPENED: "◆",
+  AIS_GAP_CLOSED: "◇",
+  SEVERITY_CHANGED: "●",
+};
+
+function colorFor(severity?: SeverityKey | null): string {
+  if (!severity) return severityHex.UNKNOWN;
+  return severityHex[severity] ?? severityHex.UNKNOWN;
+}
+
+export function TimelineMarker({
+  position,
+  type,
+  severity,
+  label,
+  onClick,
+  ariaLabel,
+}: Props) {
+  const left = `${Math.max(0, Math.min(1, position)) * 100}%`;
+  const color = colorFor(severity);
+  const interactive = !!onClick;
+  const content = (
+    <span
+      className={cn(
+        "absolute -top-3 -translate-x-1/2 select-none",
+        "text-[10px] leading-none font-mono",
+        interactive && "cursor-pointer",
+      )}
+      style={{ left, color }}
+      title={label}
+      aria-label={ariaLabel ?? `${type}${label ? `: ${label}` : ""}`}
+    >
+      {TYPE_GLYPH[type]}
+    </span>
+  );
+  if (!interactive) return content;
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "absolute -top-3 -translate-x-1/2 select-none p-0",
+        "text-[10px] leading-none font-mono cursor-pointer bg-transparent border-0",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] rounded-sm",
+      )}
+      style={{ left, color }}
+      title={label}
+      aria-label={ariaLabel ?? `${type}${label ? `: ${label}` : ""}`}
+    >
+      {TYPE_GLYPH[type]}
+    </button>
+  );
+}
+
+export default TimelineMarker;
diff --git a/web/components/timeline/TimelineRangeSelector.tsx b/web/components/timeline/TimelineRangeSelector.tsx
new file mode 100644
index 0000000..d3bdfb8
--- /dev/null
+++ b/web/components/timeline/TimelineRangeSelector.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { RANGE_ORDER, type TimelineRange } from "@/lib/timeline-state";
+
+type Props = {
+  value: TimelineRange;
+  onChange: (next: TimelineRange) => void;
+  labels: Record<TimelineRange, string>;
+  className?: string;
+  compact?: boolean; // when true, render a native <select> for mobile
+  ariaLabel?: string;
+};
+
+export function TimelineRangeSelector({
+  value,
+  onChange,
+  labels,
+  className,
+  compact = false,
+  ariaLabel,
+}: Props) {
+  if (compact) {
+    return (
+      <select
+        aria-label={ariaLabel ?? "range"}
+        value={value}
+        onChange={(e) => onChange(e.target.value as TimelineRange)}
+        className={cn(
+          "text-xs font-mono uppercase tracking-wider bg-[color:var(--color-bg)] border border-[color:var(--color-border)] rounded-md px-2 py-1.5",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)]",
+          className,
+        )}
+      >
+        {RANGE_ORDER.map((r) => (
+          <option key={r} value={r}>
+            {labels[r]}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
+  return (
+    <div role="tablist" aria-label={ariaLabel} className={cn("flex gap-1.5", className)}>
+      {RANGE_ORDER.map((r) => {
+        const active = r === value;
+        return (
+          <button
+            key={r}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange(r)}
+            className={cn(
+              "text-xs font-mono uppercase tracking-wider px-2.5 py-1 rounded-full border transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--color-bg)]",
+              active
+                ? "border-[color:var(--color-accent)] text-[color:var(--color-accent)] bg-[color-mix(in_srgb,var(--color-accent)_8%,transparent)]"
+                : "border-[color:var(--color-border)] text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)] hover:border-[color:var(--color-text-muted)]",
+            )}
+          >
+            {labels[r]}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export default TimelineRangeSelector;
diff --git a/web/components/timeline/TimelineScrubber.tsx b/web/components/timeline/TimelineScrubber.tsx
new file mode 100644
index 0000000..6152bc9
--- /dev/null
+++ b/web/components/timeline/TimelineScrubber.tsx
@@ -0,0 +1,282 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import {
+  RANGE_TO_DAYS,
+  SPEEDS,
+  rangeBoundaries,
+  ratioToTimestamp,
+  shiftMinutes,
+  timestampToRatio,
+  type TimelineRange,
+  type TimelineSpeed,
+} from "@/lib/timeline-state";
+import type { TrailEvent } from "@/lib/trail-types";
+import type { SeverityKey } from "@/lib/tokens";
+import { useTimelinePlayback } from "@/hooks/useTimelinePlayback";
+import { TimelineRangeSelector } from "./TimelineRangeSelector";
+import { TimelineMarker } from "./TimelineMarker";
+
+type Locale = "fr" | "en";
+
+type Props = {
+  range: TimelineRange;
+  onRangeChange: (r: TimelineRange) => void;
+  current: string;
+  onCurrentChange: (ts: string) => void;
+  events: TrailEvent[];
+  isPlaying: boolean;
+  onPlayPause: () => void;
+  speedMultiplier: TimelineSpeed;
+  onSpeedChange: (s: TimelineSpeed) => void;
+  locale: Locale;
+  className?: string;
+  // Mobile-friendly compact mode (range becomes a <select>, speed hidden).
+  compact?: boolean;
+};
+
+const STRINGS: Record<
+  Locale,
+  {
+    rangeLabels: Record<TimelineRange, string>;
+    play: string;
+    pause: string;
+    speed: string;
+    now: string;
+    sliderAria: string;
+  }
+> = {
+  fr: {
+    rangeLabels: { "24h": "24 h", "7d": "7 j", "30d": "30 j", "90d": "90 j" },
+    play: "Lire",
+    pause: "Pause",
+    speed: "Vitesse",
+    now: "maintenant",
+    sliderAria: "Curseur temporel",
+  },
+  en: {
+    rangeLabels: { "24h": "24 h", "7d": "7 d", "30d": "30 d", "90d": "90 d" },
+    play: "Play",
+    pause: "Pause",
+    speed: "Speed",
+    now: "now",
+    sliderAria: "Time scrubber",
+  },
+};
+
+function formatHuman(ts: string, locale: Locale): string {
+  const d = new Date(ts);
+  if (Number.isNaN(d.getTime())) return ts;
+  return d.toLocaleString(locale === "fr" ? "fr-FR" : "en-GB", {
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export function TimelineScrubber({
+  range,
+  onRangeChange,
+  current,
+  onCurrentChange,
+  events,
+  isPlaying,
+  onPlayPause,
+  speedMultiplier,
+  onSpeedChange,
+  locale,
+  className,
+  compact = false,
+}: Props) {
+  const t = STRINGS[locale];
+  const [now, setNow] = React.useState<Date>(() => new Date());
+
+  // Refresh `now` once a minute so the right edge of the timeline keeps
+  // moving while the page is open.
+  React.useEffect(() => {
+    const id = window.setInterval(() => setNow(new Date()), 60_000);
+    return () => window.clearInterval(id);
+  }, []);
+
+  const { from, to } = React.useMemo(
+    () => rangeBoundaries(range, now),
+    [range, now],
+  );
+  const ratio = timestampToRatio(current, from, to);
+
+  const trackRef = React.useRef<HTMLDivElement | null>(null);
+
+  useTimelinePlayback({
+    isPlaying,
+    current,
+    range,
+    speedMultiplier,
+    onTick: onCurrentChange,
+  });
+
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    const track = trackRef.current;
+    if (!track) return;
+    track.setPointerCapture(e.pointerId);
+    handlePointer(e.clientX);
+  };
+
+  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if ((e.buttons & 1) !== 1) return;
+    handlePointer(e.clientX);
+  };
+
+  const handlePointer = (clientX: number) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const r = track.getBoundingClientRect();
+    if (r.width <= 0) return;
+    const x = Math.max(0, Math.min(r.width, clientX - r.left));
+    const ts = ratioToTimestamp(x / r.width, from, to);
+    onCurrentChange(ts);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === " " || e.key === "Spacebar") {
+      e.preventDefault();
+      onPlayPause();
+      return;
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      onCurrentChange(from);
+      return;
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      onCurrentChange(to);
+      return;
+    }
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+      const delta = e.key === "ArrowLeft" ? -1 : 1;
+      const minutes = e.shiftKey ? 10 : 1;
+      onCurrentChange(shiftMinutes(current, delta * minutes, range, now));
+    }
+  };
+
+  const eventMarkers = React.useMemo(() => {
+    return events
+      .map((ev, idx) => {
+        const r = timestampToRatio(ev.ts, from, to);
+        if (r < 0 || r > 1) return null;
+        const sevKey = (ev.severity as SeverityKey | undefined) ?? null;
+        return (
+          <TimelineMarker
+            key={`${ev.ts}-${idx}`}
+            position={r}
+            type={ev.type}
+            severity={sevKey}
+            label={`${ev.type}${ev.zone ? ` · ${ev.zone}` : ""} · ${formatHuman(ev.ts, locale)}`}
+            onClick={() => onCurrentChange(ev.ts)}
+          />
+        );
+      })
+      .filter(Boolean);
+  }, [events, from, to, locale, onCurrentChange]);
+
+  return (
+    <div
+      className={cn(
+        "w-full bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-xl px-4 py-3 text-sm",
+        className,
+      )}
+    >
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-3">
+        <TimelineRangeSelector
+          value={range}
+          onChange={onRangeChange}
+          labels={t.rangeLabels}
+          compact={compact}
+          ariaLabel={t.sliderAria}
+        />
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={onPlayPause}
+            aria-label={isPlaying ? t.pause : t.play}
+            title={isPlaying ? t.pause : t.play}
+            className={cn(
+              "inline-flex items-center justify-center w-8 h-8 rounded-md border",
+              "border-[color:var(--color-border)] hover:border-[color:var(--color-accent)] hover:text-[color:var(--color-accent)]",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--color-bg)]",
+            )}
+          >
+            <span aria-hidden="true">{isPlaying ? "⏸" : "▶"}</span>
+          </button>
+          {!compact ? (
+            <div role="group" aria-label={t.speed} className="flex gap-1">
+              {SPEEDS.map((s) => (
+                <button
+                  key={s}
+                  type="button"
+                  aria-pressed={s === speedMultiplier}
+                  onClick={() => onSpeedChange(s)}
+                  className={cn(
+                    "text-[0.7rem] font-mono uppercase tracking-wider px-1.5 py-0.5 rounded-sm border transition-colors",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)]",
+                    s === speedMultiplier
+                      ? "border-[color:var(--color-accent)] text-[color:var(--color-accent)]"
+                      : "border-[color:var(--color-border)] text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)]",
+                  )}
+                >
+                  {s}×
+                </button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="relative pt-4">
+        {eventMarkers}
+        <div
+          ref={trackRef}
+          role="slider"
+          tabIndex={0}
+          aria-label={t.sliderAria}
+          aria-valuemin={Date.parse(from)}
+          aria-valuemax={Date.parse(to)}
+          aria-valuenow={Date.parse(current)}
+          aria-valuetext={formatHuman(current, locale)}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onKeyDown={onKeyDown}
+          className={cn(
+            "relative h-2 rounded-full cursor-pointer touch-none select-none",
+            "bg-[color:var(--color-surface-2)]",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--color-bg)]",
+          )}
+        >
+          <div
+            className="absolute inset-y-0 left-0 rounded-full bg-[color:var(--color-accent)]/40"
+            style={{ width: `${ratio * 100}%` }}
+            aria-hidden="true"
+          />
+          <div
+            className="absolute -top-1 -translate-x-1/2 w-4 h-4 rounded-full bg-[color:var(--color-accent)] shadow"
+            style={{ left: `${ratio * 100}%` }}
+            aria-hidden="true"
+          />
+        </div>
+
+        <div className="mt-2 flex items-center justify-between text-[0.65rem] font-mono text-[color:var(--color-text-muted)] tabular-nums">
+          <span>−{RANGE_TO_DAYS[range]} j</span>
+          <span className="text-[color:var(--color-text)]">
+            {formatHuman(current, locale)}
+          </span>
+          <span>{t.now}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TimelineScrubber;
diff --git a/web/components/ui/Badge.tsx b/web/components/ui/Badge.tsx
new file mode 100644
index 0000000..147a6d8
--- /dev/null
+++ b/web/components/ui/Badge.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type Tone = "neutral" | "danger" | "warn" | "good" | "info" | "cpwf";
+type Size = "sm" | "md";
+
+type BadgeProps = {
+  tone?: Tone;
+  size?: Size;
+  className?: string;
+  children: React.ReactNode;
+} & React.HTMLAttributes<HTMLSpanElement>;
+
+const SIZE_CLASS: Record<Size, string> = {
+  sm: "text-[0.7rem] px-2 py-0.5",
+  md: "text-xs px-2.5 py-1",
+};
+
+function toneVar(tone: Tone): string | null {
+  if (tone === "neutral") return null;
+  return `var(--color-${tone})`;
+}
+
+export function Badge({
+  tone = "neutral",
+  size = "sm",
+  className,
+  style,
+  children,
+  ...rest
+}: BadgeProps) {
+  const tv = toneVar(tone);
+  const computedStyle: React.CSSProperties = tv
+    ? {
+        color: tv,
+        background: `color-mix(in srgb, ${tv} 12%, transparent)`,
+        borderColor: `color-mix(in srgb, ${tv} 40%, transparent)`,
+        ...style,
+      }
+    : {
+        color: "var(--color-text-muted)",
+        background: "transparent",
+        borderColor: "var(--color-border)",
+        ...style,
+      };
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full border font-semibold uppercase tracking-wide whitespace-nowrap",
+        SIZE_CLASS[size],
+        className,
+      )}
+      style={computedStyle}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+}
+
+export default Badge;
diff --git a/web/components/ui/BottomSheet.tsx b/web/components/ui/BottomSheet.tsx
new file mode 100644
index 0000000..2f9b155
--- /dev/null
+++ b/web/components/ui/BottomSheet.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/lib/utils";
+
+type SnapPoint = `${number}vh` | `${number}px` | `${number}%`;
+
+type BottomSheetProps = {
+  open: boolean;
+  onClose?: () => void;
+  snapPoints: SnapPoint[];
+  initialSnap?: number;
+  onSnapChange?: (index: number) => void;
+  className?: string;
+  children: React.ReactNode;
+  ariaLabel?: string;
+};
+
+function snapToPx(snap: SnapPoint): number {
+  if (typeof window === "undefined") return 0;
+  const vh = window.innerHeight;
+  if (snap.endsWith("vh")) {
+    const n = parseFloat(snap);
+    return (n / 100) * vh;
+  }
+  if (snap.endsWith("%")) {
+    const n = parseFloat(snap);
+    return (n / 100) * vh;
+  }
+  return parseFloat(snap);
+}
+
+export function BottomSheet({
+  open,
+  onClose,
+  snapPoints,
+  initialSnap = 0,
+  onSnapChange,
+  className,
+  children,
+  ariaLabel,
+}: BottomSheetProps) {
+  const [mounted, setMounted] = React.useState(false);
+  const [snapIndex, setSnapIndex] = React.useState(initialSnap);
+  const [dragOffset, setDragOffset] = React.useState(0);
+  const [dragging, setDragging] = React.useState(false);
+  const dragStartY = React.useRef<number | null>(null);
+  const sheetRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  React.useEffect(() => {
+    setSnapIndex(initialSnap);
+  }, [initialSnap]);
+
+  React.useEffect(() => {
+    onSnapChange?.(snapIndex);
+  }, [snapIndex, onSnapChange]);
+
+  const heights = React.useMemo(
+    () => snapPoints.map(snapToPx),
+    [snapPoints],
+  );
+
+  const currentHeight = heights[snapIndex] ?? 0;
+  const visibleHeight = Math.max(0, currentHeight - dragOffset);
+
+  const commit = React.useCallback(
+    (offset: number) => {
+      if (heights.length === 0) return;
+      const target = currentHeight - offset;
+      let bestIdx = 0;
+      let bestDist = Infinity;
+      heights.forEach((h, i) => {
+        const d = Math.abs(h - target);
+        if (d < bestDist) {
+          bestDist = d;
+          bestIdx = i;
+        }
+      });
+      if (offset > currentHeight * 0.6 && onClose) {
+        onClose();
+      } else {
+        setSnapIndex(bestIdx);
+      }
+      setDragOffset(0);
+      setDragging(false);
+      dragStartY.current = null;
+    },
+    [currentHeight, heights, onClose],
+  );
+
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragStartY.current = e.clientY;
+    setDragging(true);
+  };
+
+  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (dragStartY.current == null) return;
+    const dy = e.clientY - dragStartY.current;
+    setDragOffset(Math.max(-currentHeight * 0.1, dy));
+  };
+
+  const onPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (dragStartY.current == null) return;
+    const dy = e.clientY - dragStartY.current;
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    commit(dy);
+  };
+
+  if (!mounted || !open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 pointer-events-none">
+      {onClose ? (
+        <div
+          aria-hidden="true"
+          onClick={onClose}
+          className="absolute inset-0 bg-black/40 pointer-events-auto"
+        />
+      ) : null}
+      <div
+        ref={sheetRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        style={{
+          height: `${visibleHeight}px`,
+          transition: dragging ? "none" : "height 220ms ease-out",
+        }}
+        className={cn(
+          "absolute bottom-0 left-0 right-0 pointer-events-auto",
+          "bg-[color:var(--color-surface)] border-t border-[color:var(--color-border)]",
+          "rounded-t-2xl shadow-2xl flex flex-col overflow-hidden",
+          className,
+        )}
+      >
+        <div
+          role="separator"
+          aria-orientation="horizontal"
+          aria-label="Drag to resize"
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onPointerCancel={onPointerUp}
+          className="flex items-center justify-center py-3 cursor-grab active:cursor-grabbing select-none touch-none"
+        >
+          <span className="block w-10 h-1 rounded-full bg-[color:var(--color-border)]" />
+        </div>
+        <div className="flex-1 overflow-y-auto">{children}</div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export default BottomSheet;
diff --git a/web/components/ui/Button.tsx b/web/components/ui/Button.tsx
new file mode 100644
index 0000000..92c0c6d
--- /dev/null
+++ b/web/components/ui/Button.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type Variant = "primary" | "ghost" | "danger";
+type Size = "sm" | "md" | "lg";
+
+type ButtonProps = {
+  variant?: Variant;
+  size?: Size;
+  asChild?: boolean;
+  loading?: boolean;
+  children: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const VARIANT_CLASS: Record<Variant, string> = {
+  primary:
+    "bg-[color:var(--color-accent)] text-[#06080d] border border-transparent hover:bg-[color:var(--color-accent-soft)]",
+  ghost:
+    "bg-transparent text-[color:var(--color-text)] border border-[color:var(--color-border)] hover:border-[color:var(--color-accent)]",
+  danger:
+    "bg-[color:var(--color-danger)] text-white border border-transparent hover:opacity-90",
+};
+
+const SIZE_CLASS: Record<Size, string> = {
+  sm: "px-3 py-1.5 text-sm rounded-md gap-1.5",
+  md: "px-4 py-2 text-sm rounded-lg gap-2",
+  lg: "px-5 py-3 text-base rounded-lg gap-2",
+};
+
+const BASE_CLASS = cn(
+  "inline-flex items-center justify-center font-semibold transition-colors duration-150",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--color-bg)]",
+  "disabled:opacity-50 disabled:cursor-not-allowed",
+);
+
+function Spinner() {
+  return (
+    <svg
+      className="animate-spin h-4 w-4"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="3"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 0 1 8-8v3a5 5 0 0 0-5 5H4z"
+      />
+    </svg>
+  );
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      variant = "primary",
+      size = "md",
+      asChild = false,
+      loading = false,
+      className,
+      children,
+      disabled,
+      type,
+      ...rest
+    },
+    ref,
+  ) {
+    const classes = cn(
+      BASE_CLASS,
+      SIZE_CLASS[size],
+      VARIANT_CLASS[variant],
+      className,
+    );
+
+    if (asChild && React.isValidElement(children)) {
+      const child = children as React.ReactElement<{ className?: string }>;
+      return React.cloneElement(child, {
+        className: cn(classes, child.props.className),
+      });
+    }
+
+    return (
+      <button
+        ref={ref}
+        type={type ?? "button"}
+        className={classes}
+        disabled={disabled || loading}
+        aria-busy={loading || undefined}
+        {...rest}
+      >
+        {loading ? <Spinner /> : null}
+        {children}
+      </button>
+    );
+  },
+);
+
+export default Button;
diff --git a/web/components/ui/Card.tsx b/web/components/ui/Card.tsx
new file mode 100644
index 0000000..588e11f
--- /dev/null
+++ b/web/components/ui/Card.tsx
@@ -0,0 +1,82 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type CardElement = "div" | "article" | "a" | "section";
+
+type CardProps = {
+  as?: CardElement;
+  className?: string;
+  children?: React.ReactNode;
+  href?: string;
+} & Omit<React.HTMLAttributes<HTMLElement>, "className" | "children">;
+
+function CardBase({ as = "div", className, children, ...rest }: CardProps) {
+  const Tag = as as React.ElementType;
+  return (
+    <Tag
+      className={cn(
+        "rounded-xl border border-[color:var(--color-border)] bg-[color:var(--color-surface)]",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+function CardHeader({
+  className,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "px-4 py-3 border-b border-[color:var(--color-border)]",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+function CardBody({
+  className,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("p-4", className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+function CardFooter({
+  className,
+  children,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "px-4 py-3 border-t border-[color:var(--color-border)]",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export const Card = Object.assign(CardBase, {
+  Header: CardHeader,
+  Body: CardBody,
+  Footer: CardFooter,
+});
+
+export default Card;
diff --git a/web/components/ui/Drawer.tsx b/web/components/ui/Drawer.tsx
new file mode 100644
index 0000000..9c7c7da
--- /dev/null
+++ b/web/components/ui/Drawer.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/lib/utils";
+
+type Side = "right" | "left";
+
+type DrawerProps = {
+  open: boolean;
+  onClose: () => void;
+  side?: Side;
+  width?: number;
+  className?: string;
+  children: React.ReactNode;
+  ariaLabel?: string;
+};
+
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+].join(",");
+
+export function Drawer({
+  open,
+  onClose,
+  side = "right",
+  width = 420,
+  className,
+  children,
+  ariaLabel,
+}: DrawerProps) {
+  const panelRef = React.useRef<HTMLDivElement | null>(null);
+  const previousFocus = React.useRef<HTMLElement | null>(null);
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  React.useEffect(() => {
+    if (!open) return;
+    previousFocus.current = document.activeElement as HTMLElement | null;
+    const focusFirst = () => {
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusables = panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+      (focusables[0] ?? panel).focus();
+    };
+    const id = window.requestAnimationFrame(focusFirst);
+    return () => {
+      window.cancelAnimationFrame(id);
+      previousFocus.current?.focus?.();
+    };
+  }, [open]);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key === "Tab") {
+        const panel = panelRef.current;
+        if (!panel) return;
+        const focusables = Array.from(
+          panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+        );
+        if (focusables.length === 0) {
+          e.preventDefault();
+          panel.focus();
+          return;
+        }
+        const first = focusables[0]!;
+        const last = focusables[focusables.length - 1]!;
+        const active = document.activeElement as HTMLElement | null;
+        if (e.shiftKey && active === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && active === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [open]);
+
+  if (!mounted) return null;
+
+  const translate = open
+    ? "translate-x-0"
+    : side === "right"
+      ? "translate-x-full"
+      : "-translate-x-full";
+  const positionClass = side === "right" ? "right-0" : "left-0";
+
+  return createPortal(
+    <div
+      aria-hidden={!open}
+      className={cn(
+        "fixed inset-0 z-50",
+        open ? "pointer-events-auto" : "pointer-events-none",
+      )}
+    >
+      <div
+        onClick={onClose}
+        aria-hidden="true"
+        className={cn(
+          "absolute inset-0 bg-black/60 transition-opacity duration-200",
+          open ? "opacity-100" : "opacity-0",
+        )}
+      />
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        tabIndex={-1}
+        style={{ width: `min(${width}px, 100vw)` }}
+        className={cn(
+          "absolute top-0 bottom-0 flex flex-col",
+          "bg-[color:var(--color-surface)] border-[color:var(--color-border)]",
+          "shadow-2xl outline-none transition-transform duration-200 ease-out",
+          side === "right" ? "border-l" : "border-r",
+          positionClass,
+          translate,
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export default Drawer;
diff --git a/web/components/ui/IconButton.tsx b/web/components/ui/IconButton.tsx
new file mode 100644
index 0000000..15a2207
--- /dev/null
+++ b/web/components/ui/IconButton.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type Variant = "primary" | "ghost" | "danger";
+type Size = "sm" | "md" | "lg";
+
+type IconButtonProps = {
+  variant?: Variant;
+  size?: Size;
+  loading?: boolean;
+  "aria-label": string;
+  children: React.ReactNode;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label">;
+
+const VARIANT_CLASS: Record<Variant, string> = {
+  primary:
+    "bg-[color:var(--color-accent)] text-[#06080d] border border-transparent hover:bg-[color:var(--color-accent-soft)]",
+  ghost:
+    "bg-transparent text-[color:var(--color-text)] border border-[color:var(--color-border)] hover:border-[color:var(--color-accent)]",
+  danger:
+    "bg-[color:var(--color-danger)] text-white border border-transparent hover:opacity-90",
+};
+
+const SIZE_CLASS: Record<Size, string> = {
+  sm: "h-8 w-8 rounded-md text-sm",
+  md: "h-10 w-10 rounded-lg text-base",
+  lg: "h-12 w-12 rounded-lg text-lg",
+};
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton(
+    {
+      variant = "ghost",
+      size = "md",
+      loading = false,
+      className,
+      children,
+      disabled,
+      type,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        type={type ?? "button"}
+        disabled={disabled || loading}
+        aria-busy={loading || undefined}
+        className={cn(
+          "inline-flex items-center justify-center transition-colors duration-150",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--color-bg)]",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          SIZE_CLASS[size],
+          VARIANT_CLASS[variant],
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+export default IconButton;
diff --git a/web/components/ui/Tabs.tsx b/web/components/ui/Tabs.tsx
new file mode 100644
index 0000000..20a927f
--- /dev/null
+++ b/web/components/ui/Tabs.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type TabsContextValue = {
+  value: string;
+  onChange: (next: string) => void;
+};
+
+const TabsContext = React.createContext<TabsContextValue | null>(null);
+
+function useTabsContext(): TabsContextValue {
+  const ctx = React.useContext(TabsContext);
+  if (!ctx) {
+    throw new Error("Tabs.* components must be used inside <Tabs>");
+  }
+  return ctx;
+}
+
+type TabsProps = {
+  value: string;
+  onChange: (next: string) => void;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function TabsRoot({ value, onChange, className, children }: TabsProps) {
+  const ctx = React.useMemo<TabsContextValue>(
+    () => ({ value, onChange }),
+    [value, onChange],
+  );
+  return (
+    <TabsContext.Provider value={ctx}>
+      <div className={cn("w-full", className)}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+type TabsListProps = {
+  className?: string;
+  "aria-label"?: string;
+  children: React.ReactNode;
+};
+
+function TabsList({ className, children, ...rest }: TabsListProps) {
+  return (
+    <div
+      role="tablist"
+      className={cn(
+        "flex border-b border-[color:var(--color-border)]",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+type TabsTriggerProps = {
+  value: string;
+  className?: string;
+  children: React.ReactNode;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value">;
+
+function TabsTrigger({
+  value,
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  ...rest
+}: TabsTriggerProps) {
+  const ctx = useTabsContext();
+  const active = ctx.value === value;
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      tabIndex={active ? 0 : -1}
+      onClick={(e) => {
+        ctx.onChange(value);
+        onClick?.(e);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          ctx.onChange(value);
+        } else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+          const list = e.currentTarget.parentElement;
+          if (!list) return;
+          const triggers = Array.from(
+            list.querySelectorAll<HTMLButtonElement>('[role="tab"]'),
+          );
+          const idx = triggers.indexOf(e.currentTarget);
+          if (idx === -1) return;
+          const dir = e.key === "ArrowRight" ? 1 : -1;
+          const next = triggers[(idx + dir + triggers.length) % triggers.length];
+          next?.focus();
+        }
+        onKeyDown?.(e);
+      }}
+      className={cn(
+        "relative px-2.5 py-2 text-sm font-medium transition-colors rounded-sm whitespace-nowrap",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--color-bg)]",
+        active
+          ? "text-[color:var(--color-text)]"
+          : "text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)]",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+      {active ? (
+        <span
+          aria-hidden
+          className="absolute left-0 right-0 -bottom-px h-0.5 bg-[color:var(--color-accent)]"
+        />
+      ) : null}
+    </button>
+  );
+}
+
+type TabsContentProps = {
+  value: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function TabsContent({ value, className, children }: TabsContentProps) {
+  const ctx = useTabsContext();
+  if (ctx.value !== value) return null;
+  return (
+    <div role="tabpanel" className={cn("py-4", className)}>
+      {children}
+    </div>
+  );
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+});
+
+export default Tabs;
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
new file mode 100644
index 0000000..27d8290
--- /dev/null
+++ b/web/components/ui/index.ts
@@ -0,0 +1,7 @@
+export { Button } from "./Button";
+export { Card } from "./Card";
+export { Badge } from "./Badge";
+export { Tabs } from "./Tabs";
+export { Drawer } from "./Drawer";
+export { BottomSheet } from "./BottomSheet";
+export { IconButton } from "./IconButton";
diff --git a/web/data/campaigns/galapagos.en.md b/web/data/campaigns/galapagos.en.md
new file mode 100644
index 0000000..668414e
--- /dev/null
+++ b/web/data/campaigns/galapagos.en.md
@@ -0,0 +1,48 @@
+---
+tag: CAMPAIGN · GALÁPAGOS · IUU
+title: "China's distant-water fleet —"
+titleAccent: "massed at the edge of the Galápagos Marine Reserve."
+lead: "Every year between August and November, hundreds of Chinese squid jiggers concentrate at the edge of the Galápagos Marine Reserve. Some run prolonged AIS gaps and several documented incursions into protected waters. krill-watch tracks the Chinese-flagged vessels active in the sector."
+metric1Label: "Tracked flags"
+metric1Value: "CN"
+metric2Label: "Peak effort"
+metric2Value: "Aug–Nov"
+metric3Label: "Framework"
+metric3Value: "EC EEZ · IUU"
+legalHeading: "A wider reserve, a porous boundary"
+legalBody: "The Galápagos Marine Reserve was established in 1998 and listed as UNESCO World Heritage in 2001. In January 2022 Ecuador created the **Hermandad** reserve, adding 60,000 km² of protection toward Costa Rica and forming a corridor with the Cocos zone.\n\nImmediately outside this perimeter, on the high seas, the Chinese squid-jigger fleet operates legally — the high seas are open to all under international law. The risk lies in occasional incursions into Ecuador's EEZ and in transhipment to reefers that can launder catches sourced from these waters.\n\nEcuador stepped up surveillance after the 2017 incident (340 vessels recorded nearby, one intercepted with about 6,600 sharks on board). The Ecuadorian Navy's resources remain modest compared with the size of the foreign fleet. AIS transparency from this fleet is notoriously poor — systematic switch-offs near the boundary."
+seasonMonths: 8,9,10,11
+seasonCaption: "Effort peaks on jumbo squid (Dosidicus gigas) August–November along the western edge of the reserve. A skeleton crew of vessels stays year-round."
+sources:
+  - label: Charles Darwin Foundation
+    url: https://www.darwinfoundation.org/en/
+  - label: IUU Watch — coverage
+    url: https://iuuwatch.eu/
+  - label: Ecuadorian Navy — Galápagos surveillance reports
+    url: https://www.armada.mil.ec/
+  - label: Greenpeace — investigations
+    url: https://www.greenpeace.org/usa/oceans/
+---
+
+## Why krill-watch tracks this campaign
+
+The Galápagos host one of the most iconic marine ecosystems on Earth. Jumbo squid are a keystone food for scalloped hammerheads and large rays — both endemic or in documented decline. Industrial harvesting just outside the reserve destabilises the entire system.
+
+The journalistic angle is the **asymmetry of surveillance**. Hundreds of industrial vessels on the high seas face a constrained coastal navy. When the fleet kills its AIS, Ecuador no longer knows precisely where it is.
+
+## Key actors
+
+- **Pingtan Marine Enterprise (China)** — industrial fishing operator with prior IUU cases documented in the Pacific.
+- **Squid jiggers** under various Chinese corporate identities, operating in convoy.
+- **Transhipment reefers** that collect catch at sea.
+- **Ecuadorian Navy** — Galápagos surveillance with limited assets.
+
+## Recent timeline
+
+- 2017 — Over 340 vessels logged nearby. One intercepted with roughly 6,600 sharks on board.
+- 2020 — Spike in international attention as the fleet returns; Ecuador files an official complaint.
+- 2022 — Hermandad reserve created (60,000 km²).
+- 2024–2026 — Sustained seasonal presence. AIS-off documented.
+
+<!-- Drafted by alpha during P2-T06; precise yearly fleet counts intentionally
+     omitted pending official sourcing. -->
diff --git a/web/data/campaigns/galapagos.fr.md b/web/data/campaigns/galapagos.fr.md
new file mode 100644
index 0000000..bd13467
--- /dev/null
+++ b/web/data/campaigns/galapagos.fr.md
@@ -0,0 +1,48 @@
+---
+tag: CAMPAGNE · GALÁPAGOS · INN
+title: "La flotte chinoise massée —"
+titleAccent: "à la limite de la Réserve marine des Galápagos."
+lead: "Chaque année entre août et novembre, plusieurs centaines de calamariers chinois se concentrent à la limite de la Réserve marine des Galápagos. Une partie pratique des coupures AIS prolongées et plusieurs incursions documentées dans la zone protégée. krill-watch suit les navires sous pavillon chinois actifs dans le secteur."
+metric1Label: "Pavillons suivis"
+metric1Value: "CN"
+metric2Label: "Pic d'effort"
+metric2Value: "Aoû–Nov"
+metric3Label: "Cadre"
+metric3Value: "ZEE Équateur · INN"
+legalHeading: "Une réserve étendue, mais une frontière poreuse"
+legalBody: "La Réserve marine des Galápagos a été créée en 1998 puis classée patrimoine mondial UNESCO en 2001. En janvier 2022, l'Équateur a établi la réserve marine de la Hermandad qui étend la protection de 60 000 km² supplémentaires en direction du Costa Rica, créant un corridor avec la zone Cocos.\n\nÀ l'extérieur immédiat de cette zone, en haute mer, la flotte de calamariers chinois opère légalement — la haute mer est libre d'accès au sens du droit international. Le risque réside dans les incursions ponctuelles dans la ZEE équatorienne et dans les transbordements vers des reefers permettant de blanchir des prises issues de cette zone.\n\nL'Équateur a renforcé sa surveillance après l'incident de 2017 (340 navires recensés à proximité, navire intercepté avec 6 600 requins à bord). Mais les moyens de la marine équatorienne restent très inférieurs à l'ampleur de la flotte étrangère. La transparence AIS de cette flotte est notoirement faible — coupures systématiques aux abords de la zone."
+seasonMonths: 8,9,10,11
+seasonCaption: "Pic d'effort sur les calamars géants (Dosidicus gigas) d'août à novembre, en bordure ouest de la Réserve. Quelques navires restent toute l'année."
+sources:
+  - label: Charles Darwin Foundation
+    url: https://www.darwinfoundation.org/en/
+  - label: IUU Watch — coverage
+    url: https://iuuwatch.eu/
+  - label: Ecuadorian Navy — Galápagos surveillance reports
+    url: https://www.armada.mil.ec/
+  - label: Greenpeace — investigations
+    url: https://www.greenpeace.org/usa/oceans/
+---
+
+## Pourquoi krill-watch suit cette campagne
+
+Les Galápagos sont l'un des écosystèmes marins les plus emblématiques au monde. Les calamars géants y sont une espèce-clé pour les requins-marteaux halicornes et les grandes raies — toutes deux endémiques ou en déclin documenté. Leur prélèvement à grande échelle juste à l'extérieur de la Réserve déstabilise tout le système.
+
+L'angle journalistique est l'**asymétrie de surveillance**. Une flotte de plusieurs centaines de navires industriels en haute mer opère face à une marine côtière limitée. Quand la flotte coupe son AIS, l'Équateur ne sait plus précisément où elle se trouve.
+
+## Acteurs principaux
+
+- **Pingtan Marine Enterprise (Chine)** — opérateur côté pêche industrielle, historiquement impliqué dans plusieurs cas IUU dans le Pacifique.
+- **Calamariers (squid jiggers)** chinois sous différentes raisons sociales, opérant en convois.
+- **Reefers transhipment** : navires frigorifiques qui collectent les prises en mer.
+- **Marine équatorienne** : surveillance Galápagos, capacités limitées.
+
+## Faits marquants
+
+- 2017 — Plus de 340 navires recensés à proximité immédiate. Un navire intercepté avec environ 6 600 requins à bord.
+- 2020 — Pic d'attention internationale lors du retour de la flotte ; l'Équateur dépose une plainte officielle.
+- 2022 — Création de la réserve de la Hermandad (60 000 km²).
+- 2024–2026 — Présence saisonnière maintenue. AIS off documenté.
+
+<!-- Drafted by alpha during P2-T06; effectifs annuels précis volontairement
+     omis tant que la source officielle n'est pas attachée. -->
diff --git a/web/data/campaigns/krill.en.md b/web/data/campaigns/krill.en.md
new file mode 100644
index 0000000..1cff8c7
--- /dev/null
+++ b/web/data/campaigns/krill.en.md
@@ -0,0 +1,46 @@
+---
+tag: CAMPAIGN · ANTARCTIC KRILL
+title: "Industrial krill fishing —"
+titleAccent: "at the base of the Southern Ocean food web."
+lead: "Antarctic krill (Euphausia superba) is the keystone species of the Southern Ocean — food for whales, penguins, seals and fish. Industrial fishing has intensified there since 2010, led by Aker BioMarine (Norway) and a fast-growing Chinese fleet. krill-watch tracks the relevant vessels and their incursions near proposed marine protected areas."
+metric1Label: "Tracked vessels"
+metric1Value: "7"
+metric2Label: "Main season"
+metric2Value: "Nov–May"
+metric3Label: "Framework"
+metric3Value: "CCAMLR"
+legalHeading: "CCAMLR — a framework, not a guarantee"
+legalBody: "CCAMLR (Commission for the Conservation of Antarctic Marine Living Resources, in force since 1982) governs fishing in the Convention Area south of 60°S. Krill is regulated under conservation measure 51-07, with a global cap and a partition into subareas (48.1, 48.2, 48.3, 48.4) to limit concentrated effort.\n\nDecisions are made by consensus — every member effectively holds a veto. Marine Protected Area proposals D1MPA (Antarctic Peninsula) and MoSor (Weddell Sea) have been blocked for years by Russia and China. The operational consequence: no closed zone in the sector where fishing effort is heaviest.\n\nWhen a subarea quota is reached, CCAMLR issues a trigger closure and vessels must leave. Subarea 48.1 — the most productive and the closest to penguin colonies — has been triggered closed several seasons in a row, a signal of effort concentration."
+seasonMonths: 1,2,3,4,5,11,12
+seasonCaption: "Effort peaks around the Antarctic Peninsula during the austral summer. Off-season runs June–October, when sea ice locks the area down."
+sources:
+  - label: CCAMLR — Convention area & catch limits
+    url: https://www.ccamlr.org/en/conservation-and-management/conservation-measures
+  - label: ASOC — Antarctic and Southern Ocean Coalition
+    url: https://www.asoc.org/
+  - label: Mongabay — ongoing coverage
+    url: https://news.mongabay.com/list/krill/
+  - label: SCAR — Scientific Committee on Antarctic Research
+    url: https://www.scar.org/
+---
+
+## Why krill-watch tracks this campaign
+
+Antarctic krill is the keystone of the Southern Ocean. A single species, *Euphausia superba*, sustains most of the predator biomass: large baleen whales, Adélie and gentoo penguins, crabeater seals, seabirds, squid and fish. Warming of the Antarctic Peninsula — among the fastest-warming areas on Earth — is already shifting krill concentration zones southward.
+
+Industrial fishing adds to that climate pressure. A handful of highly efficient factory vessels turn krill into omega-3 oils and aquafeed in the same waters as penguin breeding colonies. Geographical overlaps between fishing effort and predator foraging grounds have been documented since the early 2010s.
+
+## Key actors
+
+- **Aker BioMarine (Norway)** operates the main commercial fleet (Antarctic Endurance, Antarctic Sea, Saga Sea) plus a refrigerated tender (Antarctic Provider).
+- **Chinese operators** (China National Fisheries Corp and affiliates) have ramped presence since the mid-2010s: Fu Yuan Yu 9199, Yongli, Sae In Leader, Sejong, Antarctic Endeavour.
+- **Captain Paul Watson Foundation (CPWF)**: documented intervention by M/V Bandero in March 2026 in the Bransfield Strait against the Antarctic Endurance.
+
+## Recent timeline
+
+- Subarea 48.1 closed via quota trigger several seasons in a row.
+- D1MPA / MoSor MPA proposals blocked at Commission year after year.
+- Antarctic Endurance × M/V Bandero, March 2026 — first documented collision between an industrial operator and a CPWF campaign in the area.
+
+<!-- Drafted by alpha during P2-T06; precise catch tonnages and percentage figures
+     intentionally omitted pending OSINT verification. -->
diff --git a/web/data/campaigns/krill.fr.md b/web/data/campaigns/krill.fr.md
new file mode 100644
index 0000000..5a3960d
--- /dev/null
+++ b/web/data/campaigns/krill.fr.md
@@ -0,0 +1,47 @@
+---
+tag: CAMPAGNE · KRILL ANTARCTIQUE
+title: "Pêche industrielle de krill —"
+titleAccent: "au cœur de la chaîne alimentaire australe."
+lead: "Le krill (Euphausia superba) est l'espèce-clé de l'océan Austral : nourriture des baleines, des manchots, des phoques et des poissons. La pêche industrielle s'y est intensifiée depuis 2010, principalement portée par Aker BioMarine (Norvège) et une flotte chinoise en expansion. krill-watch suit en continu les navires concernés et leurs incursions près des aires marines protégées proposées."
+metric1Label: "Navires suivis"
+metric1Value: "7"
+metric2Label: "Saison principale"
+metric2Value: "Nov–Mai"
+metric3Label: "Cadre"
+metric3Value: "CCAMLR"
+legalHeading: "CCAMLR — un cadre, mais pas une protection garantie"
+legalBody: "La CCAMLR (Convention pour la conservation de la faune et la flore marines de l'Antarctique, en vigueur depuis 1982) régule la pêche dans la zone de Convention au sud de 60°S. Le krill est encadré par la mesure de conservation 51-07, avec un plafond global et un découpage en sous-zones (48.1, 48.2, 48.3, 48.4) pour éviter une concentration excessive d'effort.\n\nLa Commission décide par consensus — chaque membre dispose d'un veto de fait. Les propositions d'aires marines protégées D1MPA (péninsule antarctique) et MoSor (mer de Weddell) sont bloquées depuis plusieurs années par la Russie et la Chine. La conséquence opérationnelle : aucune zone fermée à la pêche industrielle dans le secteur où l'effort se concentre.\n\nQuand le quota d'une sous-zone est atteint, la CCAMLR notifie une fermeture déclenchée (trigger closure) et les navires doivent quitter la zone. La sous-zone 48.1, la plus productive et la plus proche des colonies de manchots, a été fermée par déclenchement plusieurs saisons consécutives — un signal d'alerte sur la concentration de l'effort de pêche."
+seasonMonths: 1,2,3,4,5,11,12
+seasonCaption: "Pic d'effort autour de la péninsule antarctique pendant l'été austral. Saison morte de juin à octobre, où la banquise rend la zone inaccessible."
+sources:
+  - label: CCAMLR — Convention area & catch limits
+    url: https://www.ccamlr.org/en/conservation-and-management/conservation-measures
+  - label: ASOC — Antarctic and Southern Ocean Coalition
+    url: https://www.asoc.org/
+  - label: Mongabay — couverture continue
+    url: https://news.mongabay.com/list/krill/
+  - label: SCAR — Scientific Committee on Antarctic Research
+    url: https://www.scar.org/
+---
+
+## Pourquoi krill-watch suit cette campagne
+
+Le krill antarctique est la pierre angulaire de l'écosystème austral. Une seule espèce, *Euphausia superba*, soutient l'essentiel de la biomasse des prédateurs : grandes baleines à fanons, manchots Adélie et papous, phoques crabiers, oiseaux marins, calmars et poissons. Le réchauffement de la péninsule antarctique — l'un des secteurs qui se réchauffe le plus rapidement de la planète — déplace déjà les zones de concentration du krill vers le sud.
+
+La pêche industrielle s'ajoute à cette pression climatique. Elle s'effectue depuis quelques navires-usines très efficaces qui transforment le krill en huiles oméga-3 et en farines pour l'aquaculture, dans les mêmes secteurs que les colonies reproductrices de manchots. Les recoupements géographiques entre effort de pêche et zones d'alimentation des prédateurs sont documentés depuis le début des années 2010.
+
+## Acteurs principaux
+
+- **Aker BioMarine (Norvège)** opère la principale flotte commerciale (Antarctic Endurance, Antarctic Sea, Saga Sea) avec un navire de soutien réfrigéré (Antarctic Provider).
+- **Compagnies chinoises** (China National Fisheries Corp et opérateurs affiliés) ont fait croître leur présence depuis le milieu des années 2010 : Fu Yuan Yu 9199, Yongli, Sae In Leader, Sejong, Antarctic Endeavour.
+- **Captain Paul Watson Foundation (CPWF)** : intervention documentée du M/V Bandero en mars 2026 dans le détroit de Bransfield contre l'Antarctic Endurance.
+
+## Faits marquants
+
+- Sous-zone 48.1 fermée plusieurs saisons consécutives par déclenchement de quota.
+- Propositions d'AMP D1MPA / MoSor systématiquement bloquées en Commission.
+- Confrontation Antarctic Endurance × M/V Bandero, mars 2026 — première collision documentée entre opérateur industriel et campagne CPWF dans la zone.
+
+<!-- Drafted by alpha during P2-T06; precise catch tonnages and percentage figures
+     intentionally omitted pending OSINT verification. Mark new claims with
+     [citation needed] until a source is added. -->
diff --git a/web/data/campaigns/west-africa.en.md b/web/data/campaigns/west-africa.en.md
new file mode 100644
index 0000000..9fcdff4
--- /dev/null
+++ b/web/data/campaigns/west-africa.en.md
@@ -0,0 +1,47 @@
+---
+tag: CAMPAIGN · WEST AFRICA · IUU
+title: "Foreign super-trawlers —"
+titleAccent: "in the EEZs of Senegal, Mauritania and Guinea."
+lead: "For two decades, West African Exclusive Economic Zones have been under pressure from Chinese and Russian super-trawlers operating under access agreements, joint ventures, or at the margins of legality. EJF and Greenpeace have documented the gradual collapse of local artisanal fisheries and the food-security fallout. krill-watch tracks the CN- and RU-flagged vessels active in the region."
+metric1Label: "Tracked flags"
+metric1Value: "CN · RU"
+metric2Label: "Continuous pressure"
+metric2Value: "12 months"
+metric3Label: "Framework"
+metric3Value: "EEZ · COREP"
+legalHeading: "Sovereign EEZs, continuous industrial pressure"
+legalBody: "The 1982 UNCLOS confers on every coastal State a 200-nautical-mile (370 km) Exclusive Economic Zone where it holds jurisdiction over marine resource use. Senegal, Mauritania and Guinea each hold extended EEZs but issue access licences to foreign fleets in exchange for fees — a common arrangement in West Africa, sometimes opaque in its commercial terms.\n\nCOREP (Regional Fisheries Commission of the Gulf of Guinea) nominally coordinates regional management, but its at-sea inspection capacity is very limited. Documented abuses include: catch under-reporting, at-sea transhipment (notably in disputed waters), incursions into zones reserved for artisanal fishing, and use of flags of convenience to dodge sanctions.\n\nThe main local consequence is the collapse of several pelagic fisheries (sardines, sardinella) — staple proteins for coastal populations. EJF reports tie this collapse to food insecurity and to migration flows toward Europe."
+seasonMonths: 1,2,3,4,5,6,7,8,9,10,11,12
+seasonCaption: "Pressure runs year-round. Effort peaks vary by species (sardinella March–June, octopus October–February)."
+sources:
+  - label: EJF — Environmental Justice Foundation
+    url: https://ejfoundation.org/
+  - label: Greenpeace Africa — investigations
+    url: https://www.greenpeace.org/africa/en/
+  - label: COREP — Gulf of Guinea Regional Commission
+    url: https://www.corepgolfedeguinee.org/
+  - label: ITF — Flag of Convenience list
+    url: https://www.itfglobal.org/en/sector/seafarers/flags-of-convenience
+---
+
+## Why krill-watch tracks this campaign
+
+The journalistic angle is the **chain of responsibility**. For every super-trawler the thread can be pulled: vessel → MMSI/IMO → registry → front operator → beneficial owner (often hidden behind a cascade of shell companies in Hong Kong, Panama or Saint Kitts and Nevis).
+
+Open-source intelligence can document: AIS positions, the access agreement in the relevant EEZ (when published), the operator's prior infringement history, presence on the ITF FOC list or regional IUU lists.
+
+## Key actors
+
+- **Chinese companies** — operators and owners of super-trawlers and longliners in West African EEZs.
+- **Russian companies** — historical fleet in the central Atlantic, mainly off Mauritania.
+- **Flags of convenience** — frequent use of third-country flags (Belize, Comoros, St Kitts) to muddy traceability.
+- **National navies** — Senegal, Mauritania, Guinea: limited inspection assets against the size of foreign fleets.
+
+## Recent timeline
+
+- 2015 → today — Cycle of EJF / Greenpeace investigations documenting infringements, at-sea transhipments, licence abuse.
+- Documented collapse of several Senegalese and Mauritanian pelagic fisheries.
+- Rising local campaigns (Senegal in particular) demanding access agreements be cancelled and made more transparent.
+
+<!-- Drafted by alpha during P2-T06; deliberately omits precise catch figures
+     until a source is attached. -->
diff --git a/web/data/campaigns/west-africa.fr.md b/web/data/campaigns/west-africa.fr.md
new file mode 100644
index 0000000..7436c46
--- /dev/null
+++ b/web/data/campaigns/west-africa.fr.md
@@ -0,0 +1,47 @@
+---
+tag: CAMPAGNE · AFRIQUE DE L'OUEST · INN
+title: "Super-chalutiers étrangers —"
+titleAccent: "dans les ZEE du Sénégal, de la Mauritanie et de la Guinée."
+lead: "Depuis vingt ans, les zones économiques exclusives ouest-africaines sont sous pression de super-chalutiers chinois et russes opérant sous accord d'accès, accord conjoint, ou en marge de la légalité. EJF et Greenpeace ont documenté l'effondrement progressif des pêcheries artisanales locales et les conséquences alimentaires qui en découlent. krill-watch suit les pavillons CN et RU dans la région."
+metric1Label: "Pavillons suivis"
+metric1Value: "CN · RU"
+metric2Label: "Pression continue"
+metric2Value: "12 mois"
+metric3Label: "Cadre"
+metric3Value: "ZEE · COREP"
+legalHeading: "ZEE souveraines, pression industrielle continue"
+legalBody: "La Convention de Montego Bay (1982) confère à chaque État côtier une zone économique exclusive de 200 milles nautiques (370 km) où il a juridiction sur l'exploitation des ressources marines. Sénégal, Mauritanie et Guinée disposent donc tous d'une ZEE étendue mais délivrent des licences d'accès à des flottes étrangères en échange de redevances — une pratique courante en Afrique de l'Ouest, parfois opaque dans ses termes commerciaux.\n\nLa COREP (Commission régionale des pêches du Golfe de Guinée) coordonne théoriquement la gestion régionale, mais ses moyens d'inspection en mer sont très limités. Les abus documentés concernent : sur-déclaration des captures, transbordements en mer (notamment en zone disputée), incursions dans les zones réservées à la pêche artisanale, et utilisation de pavillons de complaisance pour échapper aux sanctions.\n\nLa principale conséquence locale est l'effondrement de plusieurs pêcheries pélagiques (sardines, sardinelles) qui constituent la protéine de base des populations côtières. Cet effondrement nourrit l'insécurité alimentaire et contribue, selon les rapports d'EJF, aux flux migratoires vers l'Europe."
+seasonMonths: 1,2,3,4,5,6,7,8,9,10,11,12
+seasonCaption: "Pression continue toute l'année. Pic d'effort variable selon les espèces ciblées (sardinelle de mars à juin, poulpe d'octobre à février)."
+sources:
+  - label: EJF — Environmental Justice Foundation
+    url: https://ejfoundation.org/
+  - label: Greenpeace Africa — investigations
+    url: https://www.greenpeace.org/africa/en/
+  - label: COREP — Commission régionale Golfe de Guinée
+    url: https://www.corepgolfedeguinee.org/
+  - label: ITF — Flag of Convenience list
+    url: https://www.itfglobal.org/en/sector/seafarers/flags-of-convenience
+---
+
+## Pourquoi krill-watch suit cette campagne
+
+L'angle journalistique est la **chaîne de responsabilité**. Pour chaque super-chalutier, on peut tirer le fil : navire → MMSI/IMO → registre → opérateur de façade → propriétaire bénéficiaire (souvent caché derrière une cascade de sociétés-écran à Hong Kong, à Panama ou à Saint-Christophe-et-Niévès).
+
+OSINT public peut documenter : positions AIS, accord d'accès dans la ZEE concernée (quand publié), historique d'infractions de l'opérateur, présence sur les listes ITF FOC ou listes IUU régionales.
+
+## Acteurs principaux
+
+- **Compagnies chinoises** — opérateurs et armateurs de super-chalutiers et palangriers dans les ZEE ouest-africaines.
+- **Compagnies russes** — flotte historique en Atlantique central, présente principalement au large de la Mauritanie.
+- **Pavillons de complaisance** — utilisation fréquente de pavillons tiers (Belize, Comores, Saint-Christophe) pour brouiller la traçabilité.
+- **Marines nationales** — Sénégal, Mauritanie, Guinée : moyens d'inspection limités face à l'ampleur des flottes étrangères.
+
+## Faits marquants
+
+- 2015 → aujourd'hui — Cycle d'enquêtes EJF / Greenpeace documentant infractions, transbordements en mer, abus de licences.
+- Effondrement documenté de plusieurs pêcheries pélagiques sénégalaises et mauritaniennes.
+- Émergence de campagnes locales (Sénégal en particulier) demandant la résiliation des accords d'accès et plus de transparence.
+
+<!-- Drafted by alpha during P2-T06; ne contient volontairement aucun chiffre
+     précis de capture sans source attachée. -->
diff --git a/web/data/campaigns/whaling.en.md b/web/data/campaigns/whaling.en.md
new file mode 100644
index 0000000..1b51a6b
--- /dev/null
+++ b/web/data/campaigns/whaling.en.md
@@ -0,0 +1,47 @@
+---
+tag: CAMPAIGN · COMMERCIAL WHALING
+title: "Three nations —"
+titleAccent: "still hunt whales outside the IWC moratorium."
+lead: "Japan, Iceland and Norway continue commercial whaling while the International Whaling Commission (IWC) maintains its 1986 moratorium. krill-watch tracks the active whalers and their entries into IWC sanctuaries."
+metric1Label: "Tracked vessels"
+metric1Value: "3"
+metric2Label: "Key season"
+metric2Value: "May–Sep"
+metric3Label: "Framework"
+metric3Value: "IWC"
+legalHeading: "IWC 1946 — a commercial moratorium with no enforcement teeth"
+legalBody: "The International Whaling Commission, created by the 1946 International Convention for the Regulation of Whaling, adopted a commercial whaling moratorium in 1982 that took effect in the 1985-86 season. Three member states have either filed an objection or withdrawn: Iceland (objection then conditional return), Norway (objection in force since 1992) and Japan (which left the IWC in July 2019 to resume commercial whaling in its own waters).\n\nThe IWC maintains two whale sanctuaries: the Southern Ocean Sanctuary (1994) and the Indian Ocean Sanctuary (1979). Any industrial whaler entering those zones is a major political signal. Japan long invoked the Article VIII scientific-research exception until the International Court of Justice ruled against the JARPA II program in 2014.\n\nThe IWC has no enforcement mechanism — no tribunal, no sanctions, no inspection force. Violators face at most diplomatic pressure and public opinion."
+seasonMonths: 5,6,7,8,9
+seasonCaption: "Main season runs spring–summer in the Northern Hemisphere for Iceland and Japan. Japanese operations post-2019 are spread more across the year off Japan."
+sources:
+  - label: IWC — International Whaling Commission
+    url: https://iwc.int/
+  - label: Marine Research Institute Iceland — quotas
+    url: https://www.hafogvatn.is/en
+  - label: Sea Shepherd — Operation Henry Larsen archives
+    url: https://seashepherd.org/
+  - label: ICR — Institute of Cetacean Research (JP)
+    url: https://www.icrwhale.org/
+---
+
+## Why krill-watch tracks this campaign
+
+Three operators, three distinct cases. In Japan, **Kyodo Senpaku** (an ICR affiliate) operates the **Kangei Maru**, a modern factory whaler launched in 2024 to replace the older Nisshin Maru. In Iceland, **Hvalur hf.** runs the catchers **Hvalur 8** and **Hvalur 9** under an Icelandic fin-whale quota since the 1980s. Norway operates a fleet of small coastal whalers under its 1992 objection, outside the sanctuary zones.
+
+For krill-watch the headline signal is entry into — or transit through — IWC sanctuaries by the Japanese factory whaler. It is both the most politically significant and the most directly verifiable via public AIS.
+
+## Key actors
+
+- **Kyodo Senpaku Kaisha (Japan)**: operates the **Kangei Maru** (launched May 2024, home port Shimonoseki).
+- **Hvalur hf. (Iceland)**: operates catchers **Hvalur 8** and **Hvalur 9**, home port Hvalfjörður.
+- **Norway**: small-vessel coastal whaling fleet, not tracked by name in this campaign — outside CPWF priority list.
+
+## Recent timeline
+
+- 2014 — International Court of Justice rules against JARPA II ("scientific" → de facto commercial).
+- 2019 — Japan leaves the IWC and resumes commercial whaling in its EEZ.
+- 2024 — Kangei Maru launched, a modern factory ship capable of taking fin whales.
+- Annual fin-whale seasons documented for Hvalur 8 / Hvalur 9 off southwestern Iceland.
+
+<!-- Drafted by alpha during P2-T06; annual quotas and exact catch figures
+     intentionally omitted pending OSINT verification. -->
diff --git a/web/data/campaigns/whaling.fr.md b/web/data/campaigns/whaling.fr.md
new file mode 100644
index 0000000..bf334a3
--- /dev/null
+++ b/web/data/campaigns/whaling.fr.md
@@ -0,0 +1,47 @@
+---
+tag: CAMPAGNE · CHASSE COMMERCIALE
+title: "Trois pays —"
+titleAccent: "poursuivent la chasse à la baleine en dehors du moratoire."
+lead: "Le Japon, l'Islande et la Norvège continuent une chasse commerciale à la baleine alors que la Commission baleinière internationale (CBI) maintient son moratoire depuis 1986. krill-watch suit les baleiniers actifs et leurs entrées dans les sanctuaires CBI."
+metric1Label: "Navires suivis"
+metric1Value: "3"
+metric2Label: "Saisons clés"
+metric2Value: "Mai–Sep"
+metric3Label: "Cadre"
+metric3Value: "CBI / IWC"
+legalHeading: "CBI 1946 — un moratoire commercial sans force exécutoire"
+legalBody: "La Commission baleinière internationale, créée par la Convention internationale de 1946 sur la réglementation de la chasse à la baleine, a adopté en 1982 un moratoire sur la chasse commerciale, entré en vigueur lors de la saison 1985-86. Trois États membres y ont déposé une objection ou s'en sont retirés : l'Islande (objection puis retour conditionnel), la Norvège (objection en vigueur depuis 1992) et le Japon (qui a quitté la CBI en juillet 2019 pour reprendre une chasse commerciale dans ses propres eaux).\n\nLa CBI maintient deux sanctuaires baleiniers : l'océan Austral (1994) et l'océan Indien (1979). Toute incursion d'un baleinier industriel dans ces zones constitue un signal politique majeur. Le Japon a longtemps utilisé l'exception de chasse scientifique de l'article VIII jusqu'à un arrêt de la Cour internationale de Justice en 2014 condamnant le programme JARPA II.\n\nLa CBI ne dispose d'aucun mécanisme exécutoire — pas de tribunal, pas de sanctions, pas de force d'inspection. Les contrevenants encourent au maximum la pression diplomatique et l'opinion publique."
+seasonMonths: 5,6,7,8,9
+seasonCaption: "Saison de chasse principale au printemps et à l'été boréal pour l'Islande et le Japon. Les opérations japonaises post-2019 s'étendent davantage sur l'année autour du Japon."
+sources:
+  - label: IWC — International Whaling Commission
+    url: https://iwc.int/
+  - label: Marine Research Institute Iceland — quotas
+    url: https://www.hafogvatn.is/en
+  - label: Sea Shepherd — Operation Henry Larsen archives
+    url: https://seashepherd.org/
+  - label: ICR — Institute of Cetacean Research (JP)
+    url: https://www.icrwhale.org/
+---
+
+## Pourquoi krill-watch suit cette campagne
+
+Trois opérateurs et trois cas distincts. Au Japon, **Kyodo Senpaku** (filiale de l'ICR) opère le **Kangei Maru**, un baleinier-usine moderne mis à flot en 2024 pour remplacer l'ancien Nisshin Maru. Aux îles Vestmann (Islande), **Hvalur hf.** opère les catchers **Hvalur 8** et **Hvalur 9** depuis les années 1980 sous quota islandais sur les rorquals communs. La Norvège exploite une flotte de petits baleiniers sous objection au moratoire mais opère hors zone de sanctuaires.
+
+Pour krill-watch, l'angle est l'entrée — ou la traversée — des sanctuaires CBI par les baleiniers japonais. C'est le signal le plus politiquement significatif et le plus directement vérifiable via AIS public.
+
+## Acteurs principaux
+
+- **Kyodo Senpaku Kaisha (Japon)** : opérateur du **Kangei Maru** (mis à flot mai 2024, base Shimonoseki).
+- **Hvalur hf. (Islande)** : opérateur des catchers **Hvalur 8** et **Hvalur 9**, base Hvalfjörður.
+- **Norvège** : flotte de petits baleiniers côtiers (non suivie nominativement par krill-watch — non-prioritaire dans la campagne CPWF actuelle).
+
+## Faits marquants
+
+- 2014 — Cour internationale de Justice condamne JARPA II (« scientifique » ⇒ commerciale déguisée).
+- 2019 — Japon quitte la CBI, reprend la chasse commerciale dans sa ZEE.
+- 2024 — Mise à flot du Kangei Maru, navire-usine moderne capable de capturer des rorquals communs.
+- Saisons annuelles documentées des Hvalur 8 / Hvalur 9 sur les rorquals communs au sud-ouest de l'Islande.
+
+<!-- Drafted by alpha during P2-T06; quotas annuels et chiffres de prises
+     volontairement omis tant que la source précise n'est pas vérifiée. -->
diff --git a/web/hooks/useBreakpoint.ts b/web/hooks/useBreakpoint.ts
new file mode 100644
index 0000000..6a82729
--- /dev/null
+++ b/web/hooks/useBreakpoint.ts
@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+
+export type Breakpoint = "mobile" | "tablet" | "desktop";
+
+const MOBILE_MAX = 767;  // 0..767 = mobile
+const TABLET_MAX = 1023; // 768..1023 = tablet, >=1024 = desktop
+
+function read(width: number): Breakpoint {
+  if (width <= MOBILE_MAX) return "mobile";
+  if (width <= TABLET_MAX) return "tablet";
+  return "desktop";
+}
+
+// SSR-safe: returns "desktop" on first render so the server tree matches
+// the most common viewport. Hydration corrects it via the resize listener.
+export function useBreakpoint(): Breakpoint {
+  const [bp, setBp] = React.useState<Breakpoint>("desktop");
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const update = () => setBp(read(window.innerWidth));
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  return bp;
+}
diff --git a/web/hooks/useTimelinePlayback.ts b/web/hooks/useTimelinePlayback.ts
new file mode 100644
index 0000000..c632b16
--- /dev/null
+++ b/web/hooks/useTimelinePlayback.ts
@@ -0,0 +1,70 @@
+"use client";
+
+import * as React from "react";
+import {
+  RANGE_TO_DAYS,
+  type TimelineRange,
+  type TimelineSpeed,
+} from "@/lib/timeline-state";
+
+type Options = {
+  isPlaying: boolean;
+  current: string;
+  range: TimelineRange;
+  speedMultiplier: TimelineSpeed;
+  onTick: (newCurrent: string) => void;
+  onComplete?: () => void;
+  // Tick interval in ms — exposed for tests; defaults to 200ms which keeps
+  // the cursor smooth on a 30-day timeline at 1× without burning the CPU.
+  tickMs?: number;
+};
+
+// Drives a setInterval that advances `current` while `isPlaying` is true.
+// The actual elapsed time on each tick is multiplied by `speedMultiplier`
+// so 100× lets a user fast-forward 30 days in ~5 minutes of wall-clock.
+// Stops automatically (and emits onComplete) when current passes "now".
+export function useTimelinePlayback({
+  isPlaying,
+  current,
+  range,
+  speedMultiplier,
+  onTick,
+  onComplete,
+  tickMs = 200,
+}: Options): void {
+  const onTickRef = React.useRef(onTick);
+  const onCompleteRef = React.useRef(onComplete);
+  React.useEffect(() => {
+    onTickRef.current = onTick;
+  }, [onTick]);
+  React.useEffect(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
+
+  React.useEffect(() => {
+    if (!isPlaying) return;
+    const intervalMs = tickMs;
+    const id = window.setInterval(() => {
+      const t = Date.parse(current);
+      if (!Number.isFinite(t)) return;
+      const advanceMs = intervalMs * speedMultiplier;
+      const next = new Date(t + advanceMs);
+      const now = Date.now();
+      if (next.getTime() >= now) {
+        onTickRef.current(new Date(now).toISOString());
+        onCompleteRef.current?.();
+        return;
+      }
+      onTickRef.current(next.toISOString());
+    }, intervalMs);
+    return () => window.clearInterval(id);
+    // We intentionally exclude `current` from deps — the interval reads it
+    // through closure on each tick. Including it would reset the interval
+    // on every tick and break playback.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isPlaying, speedMultiplier, range, tickMs, current]);
+
+  // RANGE_TO_DAYS imported only to keep the API symmetric with tests that
+  // may want the boundary; not used in the closure body itself.
+  void RANGE_TO_DAYS;
+}
diff --git a/web/i18n/locales/en.json b/web/i18n/locales/en.json
new file mode 100644
index 0000000..089fd7d
--- /dev/null
+++ b/web/i18n/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "heroHybrid": {
+    "ctaUnderstand": "How it works"
+  }
+}
diff --git a/web/i18n/locales/fr.json b/web/i18n/locales/fr.json
new file mode 100644
index 0000000..97f3a23
--- /dev/null
+++ b/web/i18n/locales/fr.json
@@ -0,0 +1,5 @@
+{
+  "heroHybrid": {
+    "ctaUnderstand": "Comprendre la méthode"
+  }
+}
diff --git a/web/lib/campaigns.ts b/web/lib/campaigns.ts
new file mode 100644
index 0000000..a920583
--- /dev/null
+++ b/web/lib/campaigns.ts
@@ -0,0 +1,86 @@
+// Source of truth for the four CPWF campaigns surfaced as
+// /[locale]/campagnes/<slug>. Filtering is done on krill-watch's
+// VesselSummary so the same registry feeds both the campaign hub and any
+// future filter chip in the live cockpit.
+
+import type { VesselSummary } from "@/lib/krill-watch";
+
+export const CAMPAIGN_SLUGS = [
+  "krill",
+  "whaling",
+  "galapagos",
+  "west-africa",
+] as const;
+
+export type CampaignSlug = (typeof CAMPAIGN_SLUGS)[number];
+
+export type Campaign = {
+  slug: CampaignSlug;
+  // Filter rules: either an explicit list of vessel slugs OR a list of
+  // accepted flag codes. Slugs win when both are set.
+  vesselSlugs?: string[];
+  vesselFlags?: string[];
+  primaryColor: string;
+  bgGradient: string;
+};
+
+export const CAMPAIGNS: Record<CampaignSlug, Campaign> = {
+  krill: {
+    slug: "krill",
+    vesselSlugs: [
+      "antarctic_endurance",
+      "antarctic_sea",
+      "saga_sea",
+      "antarctic_provider",
+      "fu_yuan_yu_9199",
+      "yongli",
+      "mv_bandero",
+    ],
+    primaryColor: "#ff6b3d",
+    bgGradient: "linear-gradient(135deg, #3a2010, #1f1208)",
+  },
+  whaling: {
+    slug: "whaling",
+    vesselSlugs: ["kangei_maru", "hvalur_8", "hvalur_9"],
+    primaryColor: "#ff3b6b",
+    bgGradient: "linear-gradient(135deg, #3a1020, #1f0810)",
+  },
+  galapagos: {
+    slug: "galapagos",
+    vesselFlags: ["CN"],
+    primaryColor: "#f5b042",
+    bgGradient: "linear-gradient(135deg, #1a3010, #0e1d08)",
+  },
+  "west-africa": {
+    slug: "west-africa",
+    vesselFlags: ["CN", "RU"],
+    primaryColor: "#5ec8ff",
+    bgGradient: "linear-gradient(135deg, #10303a, #081d20)",
+  },
+};
+
+export function isCampaignSlug(value: string): value is CampaignSlug {
+  return (CAMPAIGN_SLUGS as readonly string[]).includes(value);
+}
+
+export function getCampaign(slug: string): Campaign | null {
+  return isCampaignSlug(slug) ? CAMPAIGNS[slug] : null;
+}
+
+export function getCampaignVessels(
+  slug: CampaignSlug,
+  allVessels: VesselSummary[],
+): VesselSummary[] {
+  const c = CAMPAIGNS[slug];
+  if (c.vesselSlugs && c.vesselSlugs.length > 0) {
+    const set = new Set(c.vesselSlugs);
+    return allVessels.filter((v) => set.has(v.slug));
+  }
+  if (c.vesselFlags && c.vesselFlags.length > 0) {
+    const set = new Set(c.vesselFlags.map((f) => f.toUpperCase()));
+    return allVessels.filter(
+      (v) => v.flag && set.has(v.flag.toUpperCase()),
+    );
+  }
+  return [];
+}
diff --git a/web/lib/digests.ts b/web/lib/digests.ts
new file mode 100644
index 0000000..75cc40e
--- /dev/null
+++ b/web/lib/digests.ts
@@ -0,0 +1,122 @@
+// Weekly transhipment-review digests — Next.js side (P3-T06).
+// The Python pipeline emits one HTML file per ISO week under
+// output/transhipments_<YYYY>-W<WW>.html; we wrap those in a Next.js
+// route so the URL is stable and the chrome (nav, footer, theme) stays
+// consistent with the rest of the site.
+
+import { apiBaseUrl } from "@/lib/krill-watch";
+
+export type DigestSummary = {
+  isoweek: string; // "2026-W17"
+  filename: string;
+  size: number;
+  generatedAt: string;
+};
+
+export type DigestDetail = {
+  isoweek: string;
+  html: string;
+  generatedAt: string;
+  size: number;
+};
+
+export async function fetchDigestList(limit = 20): Promise<DigestSummary[]> {
+  const base = apiBaseUrl();
+  if (!base) return [];
+  try {
+    const res = await fetch(`${base}/api/digests?limit=${limit}`, {
+      next: { revalidate: 600, tags: ["digests-list"] },
+      headers: { accept: "application/json" },
+    });
+    if (!res.ok) return [];
+    const data = (await res.json()) as {
+      digests?: Array<{
+        isoweek: string;
+        filename: string;
+        size: number;
+        generated_at: string;
+      }>;
+    };
+    if (!Array.isArray(data.digests)) return [];
+    return data.digests.map((d) => ({
+      isoweek: d.isoweek,
+      filename: d.filename,
+      size: d.size,
+      generatedAt: d.generated_at,
+    }));
+  } catch {
+    return [];
+  }
+}
+
+export async function fetchDigest(isoweek: string): Promise<DigestDetail | null> {
+  const base = apiBaseUrl();
+  if (!base) return null;
+  try {
+    const res = await fetch(`${base}/api/digests/${encodeURIComponent(isoweek)}`, {
+      next: { revalidate: 3600, tags: [`digest-${isoweek}`] },
+      headers: { accept: "application/json" },
+    });
+    if (!res.ok) return null;
+    const data = (await res.json()) as {
+      isoweek: string;
+      html: string;
+      generated_at: string;
+      size: number;
+    };
+    return {
+      isoweek: data.isoweek,
+      html: data.html,
+      generatedAt: data.generated_at,
+      size: data.size,
+    };
+  } catch {
+    return null;
+  }
+}
+
+// ISO week → date range "Apr 21–27" (Monday→Sunday). Used in the index
+// list. Only the prefix gets shown — full localisation lives in the
+// labels, which the page passes locale-aware text in.
+export function isoWeekRange(
+  isoweek: string,
+  locale: "fr" | "en",
+): string {
+  const m = isoweek.match(/^(\d{4})-W(\d{2})$/);
+  if (!m) return isoweek;
+  const year = Number(m[1]);
+  const week = Number(m[2]);
+  // ISO 8601: week 1 is the week containing the first Thursday of January.
+  const jan4 = new Date(Date.UTC(year, 0, 4));
+  const jan4Day = jan4.getUTCDay() || 7;
+  const monday = new Date(jan4);
+  monday.setUTCDate(jan4.getUTCDate() - (jan4Day - 1) + (week - 1) * 7);
+  const sunday = new Date(monday);
+  sunday.setUTCDate(monday.getUTCDate() + 6);
+  const fmt = new Intl.DateTimeFormat(locale === "fr" ? "fr-FR" : "en-US", {
+    month: "short",
+    day: "numeric",
+    timeZone: "UTC",
+  });
+  return `${fmt.format(monday)}–${fmt.format(sunday)}`;
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+// Tiny defensive HTML scrubber — the digest HTML is rendered by our own
+// Jinja2 templates so it is trustworthy by construction, but this keeps
+// the door closed if a future template ever pulls in unverified content.
+// We strip <script> / <iframe> / <object> / <embed> and any inline
+// event handlers. Anything else passes through.
+export function scrubDigestHtml(raw: string): string {
+  return raw
+    .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "")
+    .replace(/<\/?(?:script|iframe|object|embed|link\s+rel=["']?import)\b[^>]*>/gi, "")
+    .replace(/\son\w+\s*=\s*"(?:[^"\\]|\\.)*"/gi, "")
+    .replace(/\son\w+\s*=\s*'(?:[^'\\]|\\.)*'/gi, "")
+    .replace(/javascript:/gi, "");
+}
diff --git a/web/lib/fleet-filtering.ts b/web/lib/fleet-filtering.ts
new file mode 100644
index 0000000..0742ceb
--- /dev/null
+++ b/web/lib/fleet-filtering.ts
@@ -0,0 +1,101 @@
+// Pure helpers for the fleet sidebar (search + bucket filter + severity sort).
+// Mirrors the legacy frontend/app.js behaviour with one tightening: "live"
+// requires a last_seen timestamp within 24h (the legacy code only checked for
+// the presence of last_position.lat, which never expires).
+
+import type { VesselSummary } from "@/lib/krill-watch";
+
+export type FleetBucket = "all" | "at-risk" | "live" | "in-mpa";
+
+export type FleetFilter = {
+  text: string;
+  bucket: FleetBucket;
+};
+
+export const AT_RISK_SEVERITIES: ReadonlySet<string> = new Set([
+  "CRITICAL",
+  "SUSPICIOUS",
+  "WATCH",
+]);
+
+const LIVE_WINDOW_MS = 24 * 60 * 60 * 1000;
+
+const SEVERITY_RANK: Record<string, number> = {
+  CRITICAL: 0,
+  SUSPICIOUS: 1,
+  WATCH: 2,
+  CPWF: 3,
+  NORMAL: 4,
+  UNKNOWN: 5,
+};
+
+function severityRank(s: string | null | undefined): number {
+  if (!s) return SEVERITY_RANK.UNKNOWN;
+  return SEVERITY_RANK[s] ?? SEVERITY_RANK.UNKNOWN;
+}
+
+function isLive(vessel: VesselSummary, now: number): boolean {
+  if (!vessel.last_seen) return false;
+  const t = Date.parse(vessel.last_seen);
+  if (!Number.isFinite(t)) return false;
+  return now - t <= LIVE_WINDOW_MS;
+}
+
+function isInMpa(vessel: VesselSummary): boolean {
+  return vessel.current_zones.some((z) => z.startsWith("MPA-"));
+}
+
+function matchesText(vessel: VesselSummary, term: string): boolean {
+  if (!term) return true;
+  const hay = `${vessel.name} ${vessel.imo ?? ""} ${vessel.mmsi ?? ""} ${vessel.flag ?? ""} ${vessel.slug}`.toLowerCase();
+  return hay.includes(term);
+}
+
+export function applyFilter(
+  vessels: VesselSummary[],
+  filter: FleetFilter,
+  now: number = Date.now(),
+): VesselSummary[] {
+  const term = filter.text.trim().toLowerCase();
+  return vessels.filter((v) => {
+    if (!matchesText(v, term)) return false;
+    switch (filter.bucket) {
+      case "at-risk":
+        return AT_RISK_SEVERITIES.has(v.severity);
+      case "live":
+        return isLive(v, now);
+      case "in-mpa":
+        return isInMpa(v);
+      case "all":
+      default:
+        return true;
+    }
+  });
+}
+
+export function sortBySeverity(vessels: VesselSummary[]): VesselSummary[] {
+  return [...vessels].sort((a, b) => {
+    const ra = severityRank(a.severity);
+    const rb = severityRank(b.severity);
+    if (ra !== rb) return ra - rb;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+export function countBySeverity(
+  vessels: VesselSummary[],
+): Record<string, number> {
+  const counts: Record<string, number> = {
+    CRITICAL: 0,
+    SUSPICIOUS: 0,
+    WATCH: 0,
+    CPWF: 0,
+    NORMAL: 0,
+    UNKNOWN: 0,
+  };
+  for (const v of vessels) {
+    const key = v.severity || "UNKNOWN";
+    counts[key] = (counts[key] ?? 0) + 1;
+  }
+  return counts;
+}
diff --git a/web/lib/glossary.ts b/web/lib/glossary.ts
index 14925fa..063b0c6 100644
--- a/web/lib/glossary.ts
+++ b/web/lib/glossary.ts
@@ -129,6 +129,66 @@ export const GLOSSARY = {
       en: "Investigative method using only publicly accessible sources: AIS, registries, journalism, open satellite imagery.",
     },
   },
+  "dark fleet": {
+    expansion: {
+      fr: "Flotte fantôme",
+      en: "Dark fleet",
+    },
+    definition: {
+      fr: "Navires opérant volontairement sans émettre leur position AIS pour échapper à la surveillance, souvent en zones disputées ou pour contourner des sanctions.",
+      en: "Vessels deliberately operating with AIS off to evade tracking, often in disputed waters or to bypass sanctions.",
+    },
+  },
+  transhipment: {
+    expansion: {
+      fr: "Transbordement",
+      en: "Transhipment",
+    },
+    definition: {
+      fr: "Transfert de cargaison entre navires en mer, sans passage par un port. Souvent utilisé pour blanchir des prises issues de la pêche INN.",
+      en: "Transfer of cargo between vessels at sea, with no port call. Frequently used to launder catches from IUU fishing.",
+    },
+  },
+  reefer: {
+    expansion: {
+      fr: "Navire frigorifique",
+      en: "Refrigerated cargo vessel",
+    },
+    definition: {
+      fr: "Cargo réfrigéré qui collecte les prises des chalutiers en mer pour les livrer à terre. Nœud logistique des transbordements INN.",
+      en: "Refrigerated cargo ship that collects catches from trawlers at sea and delivers them ashore. The logistical node of IUU transhipment.",
+    },
+  },
+  "trigger closure": {
+    expansion: {
+      fr: "Fermeture déclenchée",
+      en: "Trigger closure",
+    },
+    definition: {
+      fr: "Fermeture immédiate d'une pêcherie CCAMLR dès que le quota saisonnier est atteint. Annoncée par notification — les navires doivent quitter la zone sous 48 h.",
+      en: "Immediate closure of a CCAMLR fishery once the seasonal quota is reached. Announced by notification — vessels must leave the area within 48 h.",
+    },
+  },
+  "beneficial owner": {
+    expansion: {
+      fr: "Propriétaire bénéficiaire",
+      en: "Beneficial owner",
+    },
+    definition: {
+      fr: "Personne physique ou morale qui détient réellement le contrôle économique d'un navire, derrière les sociétés-écran et les pavillons de complaisance.",
+      en: "The natural or legal person actually controlling a vessel economically, behind shell companies and flags of convenience.",
+    },
+  },
+  subarea: {
+    expansion: {
+      fr: "Sous-zone CCAMLR",
+      en: "CCAMLR subarea",
+    },
+    definition: {
+      fr: "Découpage de la zone de Convention CCAMLR en sous-régions (48.1, 48.2, 88.1, etc.), chacune avec son propre quota et son propre suivi.",
+      en: "CCAMLR Convention Area subdivision (48.1, 48.2, 88.1, etc.), each with its own quota and monitoring.",
+    },
+  },
 } as const satisfies Record<string, GlossaryTerm>;
 
 export type GlossaryKey = keyof typeof GLOSSARY;
@@ -146,6 +206,12 @@ export const GLOSSARY_ORDER: GlossaryKey[] = [
   "EEZ",
   "IUU",
   "FOC",
+  "dark fleet",
+  "transhipment",
+  "reefer",
+  "trigger closure",
+  "beneficial owner",
+  "subarea",
 ];
 
 export function glossaryAnchor(term: string): string {
diff --git a/web/lib/headline-builder.ts b/web/lib/headline-builder.ts
new file mode 100644
index 0000000..55f584a
--- /dev/null
+++ b/web/lib/headline-builder.ts
@@ -0,0 +1,79 @@
+// Hero hybrid headline builder — pure function, no I/O.
+// Converts a snapshot of live krill-watch counts into a 3-part bilingual
+// phrase used at the top of the home page. Tested by eye (deterministic).
+
+import type { Locale } from "@/lib/i18n";
+
+export type HeadlineSeverity =
+  | "CRITICAL"
+  | "SUSPICIOUS"
+  | "WATCH"
+  | "NORMAL"
+  | "CPWF"
+  | "UNKNOWN";
+
+export type HeadlineInput = {
+  vesselsBySeverity: Partial<Record<HeadlineSeverity, number>>;
+  hottestZone: { code: string; vesselCount: number } | null;
+  totalCritical: number;
+  totalSuspicious: number;
+  totalTracked: number;
+};
+
+export type Headline = {
+  tag: string;
+  main: string;
+  mainAccent: string;
+};
+
+export function buildHeadline(input: HeadlineInput, locale: Locale): Headline {
+  const { totalCritical, totalSuspicious, totalTracked, hottestZone } = input;
+
+  if (totalCritical >= 1 && hottestZone && hottestZone.vesselCount >= 1) {
+    const count = hottestZone.vesselCount;
+    if (locale === "fr") {
+      return {
+        tag: `MAINTENANT · CCAMLR ${hottestZone.code}`,
+        main: `${count} ${plural(count, "chalutier industriel", "chalutiers industriels")}`,
+        mainAccent: "en zone protégée antarctique.",
+      };
+    }
+    return {
+      tag: `RIGHT NOW · CCAMLR ${hottestZone.code}`,
+      main: `${count} industrial ${plural(count, "trawler", "trawlers")}`,
+      mainAccent: "inside protected Antarctic waters.",
+    };
+  }
+
+  if (totalSuspicious >= 1) {
+    if (locale === "fr") {
+      return {
+        tag: "CETTE SEMAINE",
+        main: `${totalSuspicious} ${plural(totalSuspicious, "navire", "navires")}`,
+        mainAccent: "avec un comportement suspect en zone CCAMLR.",
+      };
+    }
+    return {
+      tag: "THIS WEEK",
+      main: `${totalSuspicious} ${plural(totalSuspicious, "vessel", "vessels")}`,
+      mainAccent: "exhibiting suspicious behaviour in CCAMLR waters.",
+    };
+  }
+
+  if (locale === "fr") {
+    return {
+      tag: "VEILLE CONTINUE",
+      main: `${totalTracked} ${plural(totalTracked, "navire industriel suivi", "navires industriels suivis")}`,
+      mainAccent: "en zones marines protégées.",
+    };
+  }
+  return {
+    tag: "CONTINUOUS WATCH",
+    main: `${totalTracked} industrial ${plural(totalTracked, "vessel tracked", "vessels tracked")}`,
+    mainAccent: "across marine protected areas.",
+  };
+}
+
+function plural(n: number, singular: string, plural: string): string {
+  return n === 1 ? singular : plural;
+}
diff --git a/web/lib/incident-slug.ts b/web/lib/incident-slug.ts
new file mode 100644
index 0000000..3ba6a79
--- /dev/null
+++ b/web/lib/incident-slug.ts
@@ -0,0 +1,46 @@
+// Deterministic slug generator for auto-detected incident pages
+// (P3-T01). The same algorithm exists on the Python side in
+// server/services/incident_emitter.py — keep them in sync.
+//
+// Format: "<yyyy-mm-dd>-<vessel-slug-kebab>-<event-kebab>[-<zone-kebab>]"
+// e.g. "2026-04-28-antarctic-endurance-zone-entered-48-1"
+//
+// Idempotency: identical inputs always produce identical output, so
+// repeated detections of the "same" incident upsert into the same row
+// instead of stacking duplicates.
+
+export type IncidentEventType =
+  | "ZONE_ENTERED"
+  | "AIS_GAP_OPENED"
+  | "TRANSHIPMENT_DETECTED"
+  | "SEVERITY_CHANGED";
+
+export type IncidentSlugInput = {
+  vesselSlug: string;
+  eventType: IncidentEventType;
+  zoneCode: string | null;
+  detectedAt: Date | string;
+};
+
+function kebab(input: string): string {
+  return input
+    .toLowerCase()
+    .replace(/[_\s.]+/g, "-")
+    .replace(/[^a-z0-9-]+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+}
+
+function isoDate(d: Date | string): string {
+  const date = typeof d === "string" ? new Date(d) : d;
+  if (Number.isNaN(date.getTime())) return "0000-00-00";
+  return date.toISOString().slice(0, 10);
+}
+
+export function makeIncidentSlug(args: IncidentSlugInput): string {
+  const datePart = isoDate(args.detectedAt);
+  const vesselPart = kebab(args.vesselSlug);
+  const eventPart = kebab(args.eventType);
+  const zonePart = args.zoneCode ? `-${kebab(args.zoneCode)}` : "";
+  return `${datePart}-${vesselPart}-${eventPart}${zonePart}`;
+}
diff --git a/web/lib/incidents.ts b/web/lib/incidents.ts
new file mode 100644
index 0000000..00d7f2a
--- /dev/null
+++ b/web/lib/incidents.ts
@@ -0,0 +1,274 @@
+// Auto-generated incident pages — public surface (P3-T02).
+//
+// The Python pipeline persists incidents in DuckDB and exposes them on
+// /api/auto-incidents (list) and /api/auto-incidents/<slug> (detail).
+// This module is the typed bridge consumed by `/[locale]/incident/<slug>`
+// pages, which generate static params at build/revalidate time and call
+// `revalidatePath` via the webhook in web/app/api/revalidate.
+
+import { apiBaseUrl } from "@/lib/krill-watch";
+import type { Locale } from "@/lib/i18n";
+import {
+  CAMPAIGNS,
+  type CampaignSlug,
+  type Campaign,
+} from "@/lib/campaigns";
+
+export type IncidentEventType =
+  | "ZONE_ENTERED"
+  | "AIS_GAP_OPENED"
+  | "TRANSHIPMENT_DETECTED"
+  | "SEVERITY_CHANGED";
+
+export type IncidentSeverity = "CRITICAL" | "SUSPICIOUS" | "WATCH";
+
+export type IncidentSource = {
+  url: string;
+  title: string;
+};
+
+export type Incident = {
+  slug: string;
+  detectedAt: string;
+  vessel: { slug: string; name: string; flag: string | null };
+  eventType: IncidentEventType;
+  zoneCode: string | null;
+  severity: IncidentSeverity;
+  score: number | null;
+  position: { lat: number; lon: number } | null;
+  details: Record<string, unknown>;
+  sources: IncidentSource[];
+  campaignSlug: CampaignSlug | null;
+};
+
+// Server-side wire shape returned by FastAPI. All keys are snake_case;
+// we normalise to camelCase + null defaults inside the parser so the rest
+// of the front-end never touches the raw shape.
+type WireIncident = {
+  slug: string;
+  detected_at: string | null;
+  vessel_slug: string;
+  vessel_name: string;
+  vessel_flag: string | null;
+  event_type: string;
+  zone_code: string | null;
+  severity: string;
+  score: number | null;
+  position_lat: number | null;
+  position_lon: number | null;
+  details: Record<string, unknown> | null;
+  sources: unknown;
+  created_at: string | null;
+  revalidated_at: string | null;
+};
+
+const VALID_EVENT_TYPES: ReadonlySet<IncidentEventType> = new Set([
+  "ZONE_ENTERED",
+  "AIS_GAP_OPENED",
+  "TRANSHIPMENT_DETECTED",
+  "SEVERITY_CHANGED",
+]);
+
+const VALID_SEVERITIES: ReadonlySet<IncidentSeverity> = new Set([
+  "CRITICAL",
+  "SUSPICIOUS",
+  "WATCH",
+]);
+
+function deriveCampaignSlug(vesselSlug: string, vesselFlag: string | null): CampaignSlug | null {
+  // Strict slug match wins over flag fallback so the krill list (whose
+  // vessels are explicit) never gets pulled into the flag-based galapagos
+  // / west-africa buckets.
+  for (const c of Object.values(CAMPAIGNS) as Campaign[]) {
+    if (c.vesselSlugs?.includes(vesselSlug)) return c.slug;
+  }
+  if (vesselFlag) {
+    const flagUpper = vesselFlag.toUpperCase();
+    for (const c of Object.values(CAMPAIGNS) as Campaign[]) {
+      if (c.vesselFlags?.map((f) => f.toUpperCase()).includes(flagUpper)) {
+        return c.slug;
+      }
+    }
+  }
+  return null;
+}
+
+function normaliseSources(raw: unknown): IncidentSource[] {
+  if (!Array.isArray(raw)) return [];
+  const out: IncidentSource[] = [];
+  for (const item of raw) {
+    if (item && typeof item === "object") {
+      const src = item as Record<string, unknown>;
+      const url = typeof src.url === "string" ? src.url : null;
+      if (!url) continue;
+      const title =
+        typeof src.title === "string" && src.title.trim()
+          ? src.title.trim()
+          : url;
+      out.push({ url, title });
+    } else if (typeof item === "string") {
+      out.push({ url: item, title: item });
+    }
+  }
+  return out;
+}
+
+function parseIncident(wire: WireIncident): Incident | null {
+  if (!wire.detected_at) return null;
+  if (!VALID_EVENT_TYPES.has(wire.event_type as IncidentEventType)) return null;
+  if (!VALID_SEVERITIES.has(wire.severity as IncidentSeverity)) return null;
+
+  const position =
+    typeof wire.position_lat === "number" && typeof wire.position_lon === "number"
+      ? { lat: wire.position_lat, lon: wire.position_lon }
+      : null;
+
+  return {
+    slug: wire.slug,
+    detectedAt: wire.detected_at,
+    vessel: {
+      slug: wire.vessel_slug,
+      name: wire.vessel_name,
+      flag: wire.vessel_flag,
+    },
+    eventType: wire.event_type as IncidentEventType,
+    zoneCode: wire.zone_code,
+    severity: wire.severity as IncidentSeverity,
+    score: wire.score,
+    position,
+    details: wire.details ?? {},
+    sources: normaliseSources(wire.sources),
+    campaignSlug: deriveCampaignSlug(wire.vessel_slug, wire.vessel_flag),
+  };
+}
+
+export async function fetchIncident(
+  slug: string,
+  options?: { revalidateSeconds?: number },
+): Promise<Incident | null> {
+  const base = apiBaseUrl();
+  if (!base) return null;
+  try {
+    const res = await fetch(`${base}/api/auto-incidents/${encodeURIComponent(slug)}`, {
+      next: {
+        revalidate: options?.revalidateSeconds ?? 300,
+        tags: [`incident-${slug}`],
+      },
+      headers: { accept: "application/json" },
+    });
+    if (!res.ok) return null;
+    const wire = (await res.json()) as WireIncident;
+    return parseIncident(wire);
+  } catch {
+    return null;
+  }
+}
+
+export async function fetchIncidentsList(
+  limit = 50,
+): Promise<Incident[]> {
+  const base = apiBaseUrl();
+  if (!base) return [];
+  try {
+    const res = await fetch(`${base}/api/auto-incidents?limit=${limit}`, {
+      next: { revalidate: 60, tags: ["incidents-list"] },
+      headers: { accept: "application/json" },
+    });
+    if (!res.ok) return [];
+    const data = (await res.json()) as { incidents?: WireIncident[] };
+    if (!Array.isArray(data.incidents)) return [];
+    return data.incidents
+      .map(parseIncident)
+      .filter((x): x is Incident => x !== null);
+  } catch {
+    return [];
+  }
+}
+
+// Headline templates — kept in this module rather than the i18n dict
+// because they need runtime interpolation of dynamic vessel/zone names
+// from the wire payload. Localisation strings here are short enough to
+// inline; if they grow we'll move them under getDict().incident.
+const HEADLINE_TEMPLATES: Record<
+  IncidentEventType,
+  Record<Locale, (i: Incident) => string>
+> = {
+  ZONE_ENTERED: {
+    en: (i) =>
+      i.zoneCode
+        ? `${i.vessel.name} entered ${formatZoneEN(i.zoneCode)}`
+        : `${i.vessel.name} entered protected waters`,
+    fr: (i) =>
+      i.zoneCode
+        ? `${i.vessel.name} est entré dans ${formatZoneFR(i.zoneCode)}`
+        : `${i.vessel.name} est entré en zone protégée`,
+  },
+  AIS_GAP_OPENED: {
+    en: (i) => {
+      const hours = readGapHours(i);
+      const where = i.zoneCode ? ` in ${formatZoneEN(i.zoneCode)}` : "";
+      return hours
+        ? `${i.vessel.name} went dark${where} for ${hours} h`
+        : `${i.vessel.name} went dark${where}`;
+    },
+    fr: (i) => {
+      const hours = readGapHours(i);
+      const where = i.zoneCode ? ` dans ${formatZoneFR(i.zoneCode)}` : "";
+      return hours
+        ? `${i.vessel.name} a coupé son AIS${where} pendant ${hours} h`
+        : `${i.vessel.name} a coupé son AIS${where}`;
+    },
+  },
+  TRANSHIPMENT_DETECTED: {
+    en: (i) => {
+      const partner = readPartnerName(i);
+      return partner
+        ? `Suspected at-sea transhipment between ${i.vessel.name} and ${partner}`
+        : `Suspected at-sea transhipment by ${i.vessel.name}`;
+    },
+    fr: (i) => {
+      const partner = readPartnerName(i);
+      return partner
+        ? `Transbordement suspecté en mer entre ${i.vessel.name} et ${partner}`
+        : `Transbordement suspecté par ${i.vessel.name}`;
+    },
+  },
+  SEVERITY_CHANGED: {
+    en: (i) => `${i.vessel.name} severity raised to ${i.severity}`,
+    fr: (i) => `${i.vessel.name} reclassé en ${i.severity}`,
+  },
+};
+
+function formatZoneEN(zoneCode: string): string {
+  if (/^\d+\.\d+$/.test(zoneCode)) return `CCAMLR Subarea ${zoneCode}`;
+  return zoneCode;
+}
+
+function formatZoneFR(zoneCode: string): string {
+  if (/^\d+\.\d+$/.test(zoneCode)) return `la sous-zone CCAMLR ${zoneCode}`;
+  return zoneCode;
+}
+
+function readGapHours(i: Incident): number | null {
+  const v = i.details?.gap_hours;
+  return typeof v === "number" && v > 0 ? Math.round(v) : null;
+}
+
+function readPartnerName(i: Incident): string | null {
+  const v = i.details?.partner_name;
+  return typeof v === "string" && v.trim() ? v.trim() : null;
+}
+
+export function buildIncidentHeadline(incident: Incident, locale: Locale): string {
+  return HEADLINE_TEMPLATES[incident.eventType][locale](incident);
+}
+
+export function formatDetectedAt(iso: string, locale: Locale): string {
+  // Stable UTC formatting — never depends on the rendering environment's
+  // timezone, which would otherwise cause server/client hydration mismatch.
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  const date = d.toISOString().slice(0, 10);
+  const time = d.toISOString().slice(11, 16);
+  return locale === "fr" ? `${date} à ${time} UTC` : `${date} ${time} UTC`;
+}
diff --git a/web/lib/live-url-state.ts b/web/lib/live-url-state.ts
new file mode 100644
index 0000000..d6449df
--- /dev/null
+++ b/web/lib/live-url-state.ts
@@ -0,0 +1,115 @@
+// URL <-> cockpit state for /live. Pure functions — no React, no DOM.
+// URL params:
+//   v        = selected vessel slug
+//   q        = search text
+//   bucket   = all | at-risk | live | in-mpa
+//   layers   = comma-separated list of visible map layers
+//              (graticule, zones, d1mpa, tracks24h, labels)
+// Anything missing falls back to DEFAULT_LIVE_STATE.
+
+import type { FleetBucket, FleetFilter } from "@/lib/fleet-filtering";
+
+export type LayerKey =
+  | "graticule"
+  | "zones"
+  | "d1mpa"
+  | "tracks24h"
+  | "labels";
+
+export type LayerVisibility = Record<LayerKey, boolean>;
+
+export type LiveState = {
+  selectedSlug: string | null;
+  filter: FleetFilter;
+  layers: LayerVisibility;
+};
+
+const ALL_LAYERS: LayerKey[] = [
+  "graticule",
+  "zones",
+  "d1mpa",
+  "tracks24h",
+  "labels",
+];
+
+const VALID_BUCKETS: ReadonlySet<string> = new Set([
+  "all",
+  "at-risk",
+  "live",
+  "in-mpa",
+]);
+
+export const DEFAULT_LAYER_VISIBILITY: LayerVisibility = {
+  graticule: true,
+  zones: true,
+  d1mpa: true,
+  tracks24h: false,
+  labels: false,
+};
+
+export const DEFAULT_LIVE_STATE: LiveState = {
+  selectedSlug: null,
+  filter: { text: "", bucket: "all" },
+  layers: DEFAULT_LAYER_VISIBILITY,
+};
+
+function parseBucket(raw: string | null): FleetBucket {
+  if (!raw) return "all";
+  return VALID_BUCKETS.has(raw) ? (raw as FleetBucket) : "all";
+}
+
+function parseLayers(raw: string | null): LayerVisibility {
+  if (raw == null) return { ...DEFAULT_LAYER_VISIBILITY };
+  const visible = new Set(
+    raw
+      .split(",")
+      .map((s) => s.trim().toLowerCase())
+      .filter((s) => s.length > 0),
+  );
+  const out = { ...DEFAULT_LAYER_VISIBILITY };
+  for (const key of ALL_LAYERS) {
+    out[key] = visible.has(key);
+  }
+  return out;
+}
+
+function serializeLayers(layers: LayerVisibility): string | null {
+  const visible = ALL_LAYERS.filter((k) => layers[k]);
+  // If layers match the default, omit the param entirely so the URL stays clean.
+  const allDefault = ALL_LAYERS.every(
+    (k) => layers[k] === DEFAULT_LAYER_VISIBILITY[k],
+  );
+  if (allDefault) return null;
+  return visible.join(",");
+}
+
+export function readLiveState(searchParams: URLSearchParams): LiveState {
+  const slug = searchParams.get("v");
+  const text = searchParams.get("q") ?? "";
+  const bucket = parseBucket(searchParams.get("bucket"));
+  const layers = parseLayers(searchParams.get("layers"));
+  return {
+    selectedSlug: slug && slug.trim().length > 0 ? slug : null,
+    filter: { text, bucket },
+    layers,
+  };
+}
+
+export function writeLiveState(state: LiveState): URLSearchParams {
+  const params = new URLSearchParams();
+  if (state.selectedSlug) params.set("v", state.selectedSlug);
+  if (state.filter.text.trim().length > 0) params.set("q", state.filter.text);
+  if (state.filter.bucket !== "all") params.set("bucket", state.filter.bucket);
+  const layersStr = serializeLayers(state.layers);
+  if (layersStr != null) params.set("layers", layersStr);
+  return params;
+}
+
+export function liveStateToUrl(
+  pathname: string,
+  state: LiveState,
+): string {
+  const params = writeLiveState(state);
+  const qs = params.toString();
+  return qs.length > 0 ? `${pathname}?${qs}` : pathname;
+}
diff --git a/web/lib/og-image-renderer.tsx b/web/lib/og-image-renderer.tsx
new file mode 100644
index 0000000..55b8e66
--- /dev/null
+++ b/web/lib/og-image-renderer.tsx
@@ -0,0 +1,527 @@
+// Headless React renderers consumed by the /api/og/* endpoints (P3-T03).
+// Each function returns a JSX tree that Satori can rasterise to a 1200×630
+// PNG. Satori does not run real CSS — only inline styles on flex elements,
+// SVG, and a handful of typography rules — so the components below are
+// deliberately verbose and avoid Tailwind classes.
+
+import type { Incident } from "@/lib/incidents";
+import type { VesselSummary } from "@/lib/krill-watch";
+import type { Campaign } from "@/lib/campaigns";
+import { buildIncidentHeadline, formatDetectedAt } from "@/lib/incidents";
+import { severityHex } from "@/lib/tokens";
+import type { Locale } from "@/lib/i18n";
+
+export const OG_WIDTH = 1200;
+export const OG_HEIGHT = 630;
+
+const COLOR_BG = "#06080d";
+const COLOR_SURFACE = "#0e1320";
+const COLOR_TEXT = "#e7ecf3";
+const COLOR_TEXT_MUTED = "#97a2b6";
+const COLOR_ACCENT = "#ff6b3d";
+const COLOR_BORDER = "#1f2740";
+
+// Satori chokes on multi-codepoint flag emojis without an emoji font, so we
+// always render flags as the ISO code in a small monospace pill.
+function flagPill(code: string | null | undefined) {
+  if (!code) return null;
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: COLOR_SURFACE,
+        border: `1px solid ${COLOR_BORDER}`,
+        borderRadius: 8,
+        padding: "6px 12px",
+        fontSize: 22,
+        fontFamily: "monospace",
+        letterSpacing: 1.5,
+        color: COLOR_TEXT,
+      }}
+    >
+      {code.toUpperCase()}
+    </div>
+  );
+}
+
+function brandLockup() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        color: COLOR_TEXT_MUTED,
+        fontFamily: "monospace",
+        fontSize: 22,
+        textTransform: "uppercase",
+        letterSpacing: 2,
+      }}
+    >
+      <div
+        style={{
+          width: 14,
+          height: 14,
+          background: COLOR_ACCENT,
+          borderRadius: 999,
+          boxShadow: `0 0 18px ${COLOR_ACCENT}`,
+        }}
+      />
+      <span>krill-watch</span>
+    </div>
+  );
+}
+
+function severityChip(severity: "CRITICAL" | "SUSPICIOUS" | "WATCH") {
+  const color = severityHex[severity];
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        color,
+        border: `1px solid ${color}`,
+        borderRadius: 999,
+        padding: "8px 18px",
+        fontFamily: "monospace",
+        fontSize: 22,
+        textTransform: "uppercase",
+        letterSpacing: 2,
+        background: `${color}1a`,
+      }}
+    >
+      <div
+        style={{
+          width: 10,
+          height: 10,
+          background: color,
+          borderRadius: 999,
+        }}
+      />
+      <span>{severity}</span>
+    </div>
+  );
+}
+
+// Abstract "map" — a dark rounded rectangle with a vignette of the
+// incident's severity colour and a pulsing dot at the centre. Satori can't
+// render a real raster basemap but this gets the visual idea across.
+function abstractMap(severity: "CRITICAL" | "SUSPICIOUS" | "WATCH") {
+  const color = severityHex[severity];
+  return (
+    <div
+      style={{
+        display: "flex",
+        position: "relative",
+        width: 480,
+        height: 200,
+        borderRadius: 16,
+        overflow: "hidden",
+        border: `1px solid ${COLOR_BORDER}`,
+        background: `radial-gradient(circle at 30% 50%, ${color}33 0%, ${COLOR_SURFACE} 70%)`,
+      }}
+    >
+      <svg
+        width={480}
+        height={200}
+        style={{ position: "absolute", inset: 0 }}
+        viewBox="0 0 480 200"
+      >
+        <g stroke={COLOR_BORDER} strokeWidth={1} fill="none">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <line key={`h${i}`} x1={0} y1={(i + 1) * 40} x2={480} y2={(i + 1) * 40} />
+          ))}
+          {Array.from({ length: 7 }).map((_, i) => (
+            <line key={`v${i}`} x1={(i + 1) * 60} y1={0} x2={(i + 1) * 60} y2={200} />
+          ))}
+        </g>
+        <circle cx={150} cy={100} r={12} fill={color} />
+        <circle
+          cx={150}
+          cy={100}
+          r={28}
+          fill="none"
+          stroke={color}
+          strokeWidth={3}
+          opacity={0.6}
+        />
+        <circle
+          cx={150}
+          cy={100}
+          r={50}
+          fill="none"
+          stroke={color}
+          strokeWidth={1.5}
+          opacity={0.3}
+        />
+      </svg>
+    </div>
+  );
+}
+
+const FRAME_STYLE = {
+  width: OG_WIDTH,
+  height: OG_HEIGHT,
+  display: "flex" as const,
+  flexDirection: "column" as const,
+  backgroundColor: COLOR_BG,
+  backgroundImage:
+    "radial-gradient(circle at 90% 0%, rgba(255,107,61,0.18) 0%, rgba(6,8,13,0) 50%)",
+  color: COLOR_TEXT,
+  fontFamily: "Inter, system-ui, sans-serif",
+  padding: 56,
+};
+
+export function renderIncidentOg(incident: Incident, locale: Locale) {
+  const headline = buildIncidentHeadline(incident, locale);
+  const detected = formatDetectedAt(incident.detectedAt, locale);
+  const meta: string[] = [];
+  if (incident.vessel.flag) meta.push(incident.vessel.flag.toUpperCase());
+  if (typeof incident.score === "number") meta.push(`score ${incident.score.toFixed(2)}`);
+  if (incident.position) {
+    meta.push(
+      `${incident.position.lat.toFixed(2)}°, ${incident.position.lon.toFixed(2)}°`,
+    );
+  }
+
+  return (
+    <div style={FRAME_STYLE}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+          marginBottom: 28,
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
+          {severityChip(incident.severity)}
+          <span
+            style={{
+              color: COLOR_TEXT_MUTED,
+              fontFamily: "monospace",
+              fontSize: 22,
+              letterSpacing: 1,
+            }}
+          >
+            {detected}
+          </span>
+        </div>
+        {brandLockup()}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          fontSize: 64,
+          fontWeight: 800,
+          lineHeight: 1.1,
+          letterSpacing: -1,
+          maxWidth: 1080,
+          marginBottom: 28,
+        }}
+      >
+        {truncateChars(headline, 90)}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          flex: 1,
+          alignItems: "flex-end",
+          justifyContent: "space-between",
+          gap: 32,
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              color: COLOR_TEXT,
+              fontSize: 30,
+              fontWeight: 600,
+            }}
+          >
+            {flagPill(incident.vessel.flag)}
+            <span>{incident.vessel.name}</span>
+          </div>
+          {meta.length > 0 && (
+            <div
+              style={{
+                display: "flex",
+                color: COLOR_TEXT_MUTED,
+                fontFamily: "monospace",
+                fontSize: 22,
+                letterSpacing: 1,
+              }}
+            >
+              {meta.join("  ·  ")}
+            </div>
+          )}
+        </div>
+        {abstractMap(incident.severity)}
+      </div>
+    </div>
+  );
+}
+
+export function renderVesselOg(vessel: VesselSummary, locale: Locale) {
+  const severity = vessel.severity?.toUpperCase() ?? "UNKNOWN";
+  const color =
+    severityHex[severity as keyof typeof severityHex] ?? severityHex.UNKNOWN;
+  const subtitleParts: string[] = [];
+  if (vessel.imo) subtitleParts.push(`IMO ${vessel.imo}`);
+  if (vessel.mmsi) subtitleParts.push(`MMSI ${vessel.mmsi}`);
+  if (vessel.flag) subtitleParts.push(vessel.flag.toUpperCase());
+
+  return (
+    <div style={FRAME_STYLE}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+          marginBottom: 28,
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
+          {flagPill(vessel.flag)}
+          <span
+            style={{
+              fontSize: 28,
+              fontFamily: "monospace",
+              color: COLOR_TEXT_MUTED,
+              textTransform: "uppercase",
+              letterSpacing: 2,
+            }}
+          >
+            {locale === "fr" ? "Navire suivi" : "Tracked vessel"}
+          </span>
+        </div>
+        {brandLockup()}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          fontSize: 80,
+          fontWeight: 800,
+          lineHeight: 1,
+          letterSpacing: -1,
+          marginBottom: 16,
+        }}
+      >
+        {truncateChars(vessel.name, 40)}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          color: COLOR_TEXT_MUTED,
+          fontFamily: "monospace",
+          fontSize: 24,
+          letterSpacing: 1,
+        }}
+      >
+        {subtitleParts.join("  ·  ") || (locale === "fr" ? "Identité partielle" : "Partial identity")}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          flex: 1,
+          alignItems: "flex-end",
+          gap: 24,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            color,
+            border: `1px solid ${color}`,
+            borderRadius: 999,
+            padding: "10px 22px",
+            fontFamily: "monospace",
+            fontSize: 26,
+            textTransform: "uppercase",
+            letterSpacing: 2,
+            background: `${color}1a`,
+          }}
+        >
+          <div
+            style={{ width: 12, height: 12, background: color, borderRadius: 999 }}
+          />
+          <span>{severity}</span>
+        </div>
+        {vessel.current_zones.length > 0 && (
+          <div
+            style={{
+              display: "flex",
+              color: COLOR_TEXT_MUTED,
+              fontFamily: "monospace",
+              fontSize: 22,
+              letterSpacing: 1,
+            }}
+          >
+            {locale === "fr" ? "Zones :" : "Zones:"}{" "}
+            {vessel.current_zones.slice(0, 3).join(", ")}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function truncateChars(text: string, max: number): string {
+  if (text.length <= max) return text;
+  return `${text.slice(0, Math.max(0, max - 1)).trimEnd()}…`;
+}
+
+export function renderCampaignOg(
+  campaign: Campaign,
+  copy: { tag: string; title: string; lead: string },
+  locale: Locale,
+) {
+  // Cap aggressively so a too-long title can't crowd out the lead. Two
+  // lines max at 72 px ≈ 60 chars; lead at 26 px three lines ≈ 180 chars.
+  const titleText = truncateChars(copy.title, 70);
+  const leadText = truncateChars(copy.lead, 200);
+
+  return (
+    <div
+      style={{
+        width: OG_WIDTH,
+        height: OG_HEIGHT,
+        display: "flex",
+        flexDirection: "column",
+        background: campaign.bgGradient,
+        color: COLOR_TEXT,
+        fontFamily: "Inter, system-ui, sans-serif",
+        padding: 64,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            color: campaign.primaryColor,
+            fontFamily: "monospace",
+            fontSize: 22,
+            textTransform: "uppercase",
+            letterSpacing: 3,
+          }}
+        >
+          <div
+            style={{
+              width: 10,
+              height: 10,
+              background: campaign.primaryColor,
+              borderRadius: 999,
+              boxShadow: `0 0 16px ${campaign.primaryColor}`,
+            }}
+          />
+          <span>{copy.tag}</span>
+        </div>
+        {brandLockup()}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          marginTop: 36,
+          fontSize: 72,
+          fontWeight: 800,
+          lineHeight: 1.05,
+          letterSpacing: -2,
+          maxWidth: 1080,
+        }}
+      >
+        {titleText}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          marginTop: 22,
+          fontSize: 26,
+          color: COLOR_TEXT_MUTED,
+          maxWidth: 1000,
+          lineHeight: 1.35,
+        }}
+      >
+        {leadText}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          flex: 1,
+          alignItems: "flex-end",
+          justifyContent: "space-between",
+          color: COLOR_TEXT_MUTED,
+          fontFamily: "monospace",
+          fontSize: 22,
+          letterSpacing: 1,
+        }}
+      >
+        <span>
+          {locale === "fr"
+            ? "Campagne CPWF · krill-watch"
+            : "CPWF campaign · krill-watch"}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export function renderFallbackOg() {
+  return (
+    <div style={FRAME_STYLE}>
+      <div style={{ display: "flex", width: "100%", marginBottom: 80 }}>
+        {brandLockup()}
+      </div>
+      <div
+        style={{
+          display: "flex",
+          fontSize: 120,
+          fontWeight: 800,
+          lineHeight: 1,
+          letterSpacing: -3,
+          color: COLOR_TEXT,
+          marginBottom: 24,
+        }}
+      >
+        krill-watch
+      </div>
+      <div
+        style={{
+          display: "flex",
+          fontSize: 32,
+          color: COLOR_TEXT_MUTED,
+          maxWidth: 900,
+          lineHeight: 1.3,
+        }}
+      >
+        Maritime OSINT — industrial fleets inside protected waters.
+      </div>
+    </div>
+  );
+}
diff --git a/web/lib/share-urls.ts b/web/lib/share-urls.ts
new file mode 100644
index 0000000..9c6b019
--- /dev/null
+++ b/web/lib/share-urls.ts
@@ -0,0 +1,123 @@
+// Social share intent URL builder + canonical share-context model
+// (P3-T04). The same ShareContext is consumed by ShareButton on incident
+// pages, vessel pages, and campaign hubs — each call site builds the
+// context once with full title/url/hashtags, then the menu derives the
+// per-network intent URLs from there.
+
+export type ShareKind = "incident" | "vessel" | "campaign";
+
+export type ShareContext = {
+  kind: ShareKind;
+  slug: string;
+  url: string; // canonical, absolute URL of the content
+  title: string; // pre-formatted human-readable copy
+  hashtags?: string[]; // without '#', e.g. ["krillwatch", "OSINT"]
+};
+
+const DEFAULT_HASHTAGS: Record<ShareKind, string[]> = {
+  incident: ["krillwatch", "OSINT", "IUUfishing"],
+  vessel: ["krillwatch", "OSINT"],
+  campaign: ["krillwatch", "CPWF", "OceanProtection"],
+};
+
+export function defaultHashtags(ctx: ShareContext): string[] {
+  return ctx.hashtags?.length ? ctx.hashtags : DEFAULT_HASHTAGS[ctx.kind];
+}
+
+function asHashtagBlock(tags: string[]): string {
+  return tags.map((t) => `#${t.replace(/^#/, "")}`).join(" ");
+}
+
+export function tweetIntent(ctx: ShareContext): string {
+  const tags = defaultHashtags(ctx);
+  const url = new URL("https://twitter.com/intent/tweet");
+  url.searchParams.set("text", ctx.title);
+  url.searchParams.set("url", ctx.url);
+  if (tags.length) url.searchParams.set("hashtags", tags.join(","));
+  return url.toString();
+}
+
+export function blueskyIntent(ctx: ShareContext): string {
+  // Bluesky's compose intent doesn't take a separate url field; we
+  // append the canonical URL + hashtags into the body so they survive
+  // crossposting.
+  const tags = defaultHashtags(ctx);
+  const text = `${ctx.title}\n\n${ctx.url}${tags.length ? `\n\n${asHashtagBlock(tags)}` : ""}`;
+  const url = new URL("https://bsky.app/intent/compose");
+  url.searchParams.set("text", text);
+  return url.toString();
+}
+
+export function mastodonIntent(
+  ctx: ShareContext,
+  instanceUrl: string,
+): string {
+  // instanceUrl is required for Mastodon since each user picks their
+  // own instance. The caller (ShareMenu) prompts for it and persists
+  // it in localStorage.
+  const tags = defaultHashtags(ctx);
+  const text = `${ctx.title}\n\n${ctx.url}${tags.length ? `\n\n${asHashtagBlock(tags)}` : ""}`;
+  const base = instanceUrl.replace(/\/+$/, "");
+  const url = new URL(`${base}/share`);
+  url.searchParams.set("text", text);
+  return url.toString();
+}
+
+export function linkedInIntent(ctx: ShareContext): string {
+  // LinkedIn's classic share intent — only takes a URL. Nice to have
+  // for journalists / NGOs sharing into professional feeds.
+  const url = new URL("https://www.linkedin.com/sharing/share-offsite/");
+  url.searchParams.set("url", ctx.url);
+  return url.toString();
+}
+
+export function ogImageUrl(ctx: ShareContext): string {
+  return `/api/og/${ctx.kind}/${encodeURIComponent(ctx.slug)}`;
+}
+
+export type ShareTitleArgs = {
+  kind: ShareKind;
+  vesselName?: string;
+  vesselFlag?: string | null;
+  zoneCode?: string | null;
+  campaignName?: string;
+  headline?: string;
+};
+
+const TITLE_TEMPLATES = {
+  fr: {
+    incident: ({ headline }: ShareTitleArgs) =>
+      headline
+        ? `⚠ ${headline} — suivi via krill-watch`
+        : "⚠ Nouvelle violation détectée — krill-watch",
+    vessel: ({ vesselName, vesselFlag }: ShareTitleArgs) =>
+      vesselName
+        ? `📡 ${vesselName}${vesselFlag ? ` (${vesselFlag})` : ""} — dossier complet sur krill-watch`
+        : "📡 Navire suivi par krill-watch",
+    campaign: ({ campaignName }: ShareTitleArgs) =>
+      campaignName
+        ? `🌊 Campagne ${campaignName} — krill-watch (Captain Paul Watson Foundation)`
+        : "🌊 Campagne CPWF — krill-watch",
+  },
+  en: {
+    incident: ({ headline }: ShareTitleArgs) =>
+      headline
+        ? `⚠ ${headline} — tracked via krill-watch`
+        : "⚠ New violation detected — krill-watch",
+    vessel: ({ vesselName, vesselFlag }: ShareTitleArgs) =>
+      vesselName
+        ? `📡 ${vesselName}${vesselFlag ? ` (${vesselFlag})` : ""} — full dossier on krill-watch`
+        : "📡 Vessel tracked by krill-watch",
+    campaign: ({ campaignName }: ShareTitleArgs) =>
+      campaignName
+        ? `🌊 Campaign tracker: ${campaignName} — krill-watch (Captain Paul Watson Foundation)`
+        : "🌊 CPWF campaign tracker — krill-watch",
+  },
+} as const;
+
+export function buildShareTitle(
+  args: ShareTitleArgs,
+  locale: "fr" | "en",
+): string {
+  return TITLE_TEMPLATES[locale][args.kind](args);
+}
diff --git a/web/lib/sse-client.ts b/web/lib/sse-client.ts
new file mode 100644
index 0000000..4a61cbb
--- /dev/null
+++ b/web/lib/sse-client.ts
@@ -0,0 +1,195 @@
+/**
+ * Light wrapper over EventSource for the /api/stream feed. The server emits
+ * `hello`, `position`, `event`, and `vessel` events; we reframe them as a
+ * typed StreamEvent stream so the consumer doesn't have to know server
+ * details.
+ *
+ * Reconnection: exponential backoff 1s → 2s → 4s → 8s → max 30s. After 5
+ * consecutive failures we additionally start polling /api/positions/live
+ * every 30s as a fallback so the map stays roughly current even when SSE
+ * is being tunneled through a hostile proxy.
+ */
+
+export type FleetPositionUpdate = {
+  mmsi: string;
+  lat: number;
+  lon: number;
+  ts?: string | null;
+  sog_knots?: number | null;
+  cog_deg?: number | null;
+  severity?: string;
+  zones?: string[];
+};
+
+export type AmbientPositionUpdate = {
+  mmsi: string;
+  lat: number;
+  lon: number;
+  ts?: string | null;
+};
+
+export type VesselEvent = {
+  ts?: string;
+  vessel_slug?: string;
+  vessel_name?: string;
+  event_type?: string;
+  zone_id?: string;
+  zone_name?: string;
+  severity?: string;
+  lat?: number;
+  lon?: number;
+  payload?: Record<string, unknown>;
+};
+
+export type StreamEvent =
+  | { type: "fleet_update"; positions: FleetPositionUpdate[] }
+  | { type: "event"; event: VesselEvent }
+  | { type: "ambient"; positions: AmbientPositionUpdate[] }
+  | { type: "closures_changed" }
+  | { type: "connection"; state: "connected" | "reconnecting" };
+
+export type StreamOptions = {
+  apiBase: string;
+  onEvent: (e: StreamEvent) => void;
+};
+
+const POLL_INTERVAL_MS = 30_000;
+const MAX_BACKOFF_MS = 30_000;
+const MAX_FAILURES_BEFORE_POLLING = 5;
+
+export function connectStream({ apiBase, onEvent }: StreamOptions): () => void {
+  let cancelled = false;
+  let source: EventSource | null = null;
+  let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  let pollTimer: ReturnType<typeof setInterval> | null = null;
+  let attempt = 0;
+  let failures = 0;
+
+  const url = `${apiBase}/api/stream`;
+
+  const stopPolling = () => {
+    if (pollTimer) {
+      clearInterval(pollTimer);
+      pollTimer = null;
+    }
+  };
+
+  const startPolling = () => {
+    if (pollTimer) return;
+    const fetchOnce = async () => {
+      try {
+        const res = await fetch(`${apiBase}/api/positions/live?hours=24`, { cache: "no-store" });
+        if (!res.ok) return;
+        const data = (await res.json()) as {
+          positions: Array<{
+            mmsi: string;
+            lat: number;
+            lon: number;
+            ts?: string;
+            sog_knots?: number;
+            cog_deg?: number;
+          }>;
+        };
+        const positions: FleetPositionUpdate[] = (data.positions || []).map((p) => ({
+          mmsi: p.mmsi,
+          lat: p.lat,
+          lon: p.lon,
+          ts: p.ts ?? null,
+          sog_knots: p.sog_knots ?? null,
+          cog_deg: p.cog_deg ?? null,
+        }));
+        onEvent({ type: "fleet_update", positions });
+      } catch {
+        // silent — next tick retries
+      }
+    };
+    pollTimer = setInterval(fetchOnce, POLL_INTERVAL_MS);
+    fetchOnce();
+  };
+
+  const scheduleReconnect = () => {
+    if (cancelled) return;
+    failures += 1;
+    if (failures >= MAX_FAILURES_BEFORE_POLLING) {
+      startPolling();
+    }
+    const delay = Math.min(1000 * 2 ** attempt, MAX_BACKOFF_MS);
+    attempt += 1;
+    onEvent({ type: "connection", state: "reconnecting" });
+    reconnectTimer = setTimeout(connect, delay);
+  };
+
+  const handleHello = () => {
+    attempt = 0;
+    failures = 0;
+    stopPolling();
+    onEvent({ type: "connection", state: "connected" });
+  };
+
+  const handlePosition = (e: MessageEvent) => {
+    try {
+      const p = JSON.parse(e.data) as FleetPositionUpdate;
+      if (typeof p.mmsi !== "string" || typeof p.lat !== "number" || typeof p.lon !== "number") return;
+      onEvent({ type: "fleet_update", positions: [p] });
+    } catch {
+      // malformed payload — drop silently
+    }
+  };
+
+  const handleEvent = (e: MessageEvent) => {
+    try {
+      const ev = JSON.parse(e.data) as VesselEvent;
+      onEvent({ type: "event", event: ev });
+    } catch {
+      // malformed payload — drop silently
+    }
+  };
+
+  function connect() {
+    if (cancelled) return;
+    if (typeof EventSource === "undefined") {
+      startPolling();
+      return;
+    }
+    try {
+      source = new EventSource(url);
+    } catch {
+      scheduleReconnect();
+      return;
+    }
+
+    source.addEventListener("hello", handleHello);
+    source.addEventListener("position", handlePosition as EventListener);
+    source.addEventListener("event", handleEvent as EventListener);
+    // 'vessel' kind is reserved for future status pushes from the bus; ignore for now
+    source.addEventListener("vessel", () => {});
+
+    source.onopen = () => {
+      attempt = 0;
+      failures = 0;
+      stopPolling();
+      onEvent({ type: "connection", state: "connected" });
+    };
+
+    source.onerror = () => {
+      // Close + manually backoff. The browser's built-in auto-reconnect is too
+      // eager (1s tight loop) and doesn't surface a reconnecting state.
+      source?.close();
+      source = null;
+      scheduleReconnect();
+    };
+  }
+
+  connect();
+
+  return () => {
+    cancelled = true;
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+    stopPolling();
+    source?.close();
+    source = null;
+  };
+}
diff --git a/web/lib/timeline-state.ts b/web/lib/timeline-state.ts
new file mode 100644
index 0000000..fc40853
--- /dev/null
+++ b/web/lib/timeline-state.ts
@@ -0,0 +1,82 @@
+// Timeline state shared by <TimelineScrubber> and the hooks that drive it
+// (P2-T03). Pure helpers, no React.
+
+export type TimelineRange = "24h" | "7d" | "30d" | "90d";
+
+export type TimelineSpeed = 1 | 10 | 100 | 1000;
+
+export type TimelineState = {
+  range: TimelineRange;
+  current: string; // ISO timestamp of cursor
+  isPlaying: boolean;
+  speedMultiplier: TimelineSpeed;
+};
+
+export const RANGE_TO_DAYS: Record<TimelineRange, number> = {
+  "24h": 1,
+  "7d": 7,
+  "30d": 30,
+  "90d": 90,
+};
+
+export const RANGE_ORDER: TimelineRange[] = ["24h", "7d", "30d", "90d"];
+
+export const SPEEDS: TimelineSpeed[] = [1, 10, 100, 1000];
+
+export function rangeBoundaries(
+  range: TimelineRange,
+  now: Date = new Date(),
+): { from: string; to: string } {
+  const ms = RANGE_TO_DAYS[range] * 24 * 3600 * 1000;
+  const to = now.toISOString();
+  const from = new Date(now.getTime() - ms).toISOString();
+  return { from, to };
+}
+
+export function clampToRange(
+  ts: string,
+  range: TimelineRange,
+  now: Date = new Date(),
+): string {
+  const { from, to } = rangeBoundaries(range, now);
+  if (ts < from) return from;
+  if (ts > to) return to;
+  return ts;
+}
+
+// Convert a timestamp to a 0..1 ratio inside the range, for slider track
+// positioning. Inverse of `ratioToTimestamp`.
+export function timestampToRatio(
+  ts: string,
+  from: string,
+  to: string,
+): number {
+  const t = Date.parse(ts);
+  const a = Date.parse(from);
+  const b = Date.parse(to);
+  if (!Number.isFinite(t) || !Number.isFinite(a) || !Number.isFinite(b) || b <= a) {
+    return 0;
+  }
+  return Math.max(0, Math.min(1, (t - a) / (b - a)));
+}
+
+export function ratioToTimestamp(ratio: number, from: string, to: string): string {
+  const a = Date.parse(from);
+  const b = Date.parse(to);
+  if (!Number.isFinite(a) || !Number.isFinite(b) || b <= a) return from;
+  const clamped = Math.max(0, Math.min(1, ratio));
+  return new Date(a + clamped * (b - a)).toISOString();
+}
+
+// Move the cursor by N minutes — used by keyboard arrows.
+export function shiftMinutes(
+  ts: string,
+  minutes: number,
+  range: TimelineRange,
+  now: Date = new Date(),
+): string {
+  const t = Date.parse(ts);
+  if (!Number.isFinite(t)) return ts;
+  const next = new Date(t + minutes * 60_000).toISOString();
+  return clampToRange(next, range, now);
+}
diff --git a/web/lib/tokens.ts b/web/lib/tokens.ts
new file mode 100644
index 0000000..69a9d12
--- /dev/null
+++ b/web/lib/tokens.ts
@@ -0,0 +1,44 @@
+// Design system tokens (P1-T01).
+// CSS variables are the source of truth (declared in web/app/globals.css `@theme`).
+// This module exposes them for JS consumers (e.g. MapLibre paint specs that need
+// the value at runtime, not a class).
+
+export const colors = {
+  bg: "var(--color-bg)",
+  surface: "var(--color-surface)",
+  border: "var(--color-border)",
+  text: "var(--color-text)",
+  textMuted: "var(--color-text-muted)",
+  accent: "var(--color-accent)",
+  danger: "var(--color-danger)",
+  warn: "var(--color-warn)",
+  good: "var(--color-good)",
+  info: "var(--color-info)",
+  cpwf: "var(--color-cpwf)",
+} as const;
+
+export type ColorToken = keyof typeof colors;
+
+// Concrete hex values for places that can't resolve CSS variables (canvas paints,
+// MapLibre layout, image generation). Mirrors globals.css and the krill-watch palette.
+export const severityHex = {
+  CRITICAL: "#ff3b6b",
+  SUSPICIOUS: "#f5b042",
+  WATCH: "#c084fc",
+  CPWF: "#00d1ff",
+  NORMAL: "#2ee5a0",
+  UNKNOWN: "#6b7a8c",
+} as const;
+
+export type SeverityKey = keyof typeof severityHex;
+
+export const radius = { sm: 4, md: 6, lg: 12, full: 9999 } as const;
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  "2xl": 32,
+} as const;
diff --git a/web/lib/trail-coloring.ts b/web/lib/trail-coloring.ts
new file mode 100644
index 0000000..f546b39
--- /dev/null
+++ b/web/lib/trail-coloring.ts
@@ -0,0 +1,236 @@
+// Pure helpers — turn a VesselHistory into the GeoJSON sources consumed by
+// the trail layers (P2-T02). No React, no MapLibre dependency, no I/O.
+//
+// Strategy: instead of relying on `line-gradient` (which works only on
+// FlatGL on web and forces a single LineString feature), we segment the
+// trail into one LineString feature per stable-severity run. This stays
+// compatible with raster basemaps + the satellite mode toggle from T02
+// (P1-T02), and lets each segment carry its own data-driven `line-color`
+// expression. The same approach handles AIS-gap segments cleanly: a gap
+// breaks the polyline so we don't draw straight lines across a 6 h
+// silence.
+
+import type {
+  TrailEvent,
+  TrailPosition,
+  TrailSeverity,
+} from "@/lib/trail-types";
+
+type LineFeature = {
+  type: "Feature";
+  geometry: {
+    type: "LineString";
+    coordinates: [number, number][];
+  };
+  properties: {
+    severity: TrailSeverity;
+    startTs: string;
+    endTs: string;
+    pointCount: number;
+  };
+};
+
+type CurrentPointFeature = {
+  type: "Feature";
+  geometry: { type: "Point"; coordinates: [number, number] };
+  properties: {
+    isCurrent: true;
+    severity: TrailSeverity;
+    ts: string;
+  };
+};
+
+type EventMarkerFeature = {
+  type: "Feature";
+  geometry: { type: "Point"; coordinates: [number, number] };
+  properties: {
+    type: TrailEvent["type"];
+    severity: TrailSeverity | null;
+    zone: string | null;
+    ts: string;
+  };
+};
+
+export type TrailFeatureCollection = {
+  type: "FeatureCollection";
+  features: (LineFeature | CurrentPointFeature)[];
+};
+
+export type EventMarkerCollection = {
+  type: "FeatureCollection";
+  features: EventMarkerFeature[];
+};
+
+export const EMPTY_FC: TrailFeatureCollection = {
+  type: "FeatureCollection",
+  features: [],
+};
+
+export const EMPTY_EVENTS_FC: EventMarkerCollection = {
+  type: "FeatureCollection",
+  features: [],
+};
+
+function severityKey(s: TrailSeverity | null | undefined): TrailSeverity {
+  if (!s) return "UNKNOWN";
+  if (
+    s === "CRITICAL" ||
+    s === "SUSPICIOUS" ||
+    s === "WATCH" ||
+    s === "NORMAL" ||
+    s === "CPWF" ||
+    s === "UNKNOWN"
+  ) {
+    return s;
+  }
+  return "UNKNOWN";
+}
+
+/**
+ * Walks the position list left-to-right and emits one LineString feature
+ * per maximal run of consecutive points sharing the same severity. Each
+ * run also stops on `ais_gap_open` so we never draw a straight line across
+ * a >= 6 h AIS silence. The last point of run N is duplicated as the first
+ * point of run N+1 so segments visually meet at the colour transition.
+ */
+export function positionsToTrailGeoJSON(
+  positions: TrailPosition[],
+): TrailFeatureCollection {
+  const features: (LineFeature | CurrentPointFeature)[] = [];
+  if (positions.length === 0) return { type: "FeatureCollection", features };
+
+  let bufferCoords: [number, number][] = [];
+  let bufferSeverity: TrailSeverity = severityKey(positions[0].severity);
+  let bufferStartTs = positions[0].ts;
+  let bufferLastTs = positions[0].ts;
+
+  const flush = () => {
+    if (bufferCoords.length >= 2) {
+      features.push({
+        type: "Feature",
+        geometry: { type: "LineString", coordinates: bufferCoords },
+        properties: {
+          severity: bufferSeverity,
+          startTs: bufferStartTs,
+          endTs: bufferLastTs,
+          pointCount: bufferCoords.length,
+        },
+      });
+    }
+    bufferCoords = [];
+  };
+
+  for (let i = 0; i < positions.length; i++) {
+    const p = positions[i];
+    const sev = severityKey(p.severity);
+    const coord: [number, number] = [p.lon, p.lat];
+
+    // Break point: AIS gap opened on this point — flush previous run, then
+    // start a new run with this point as the seed (no duplicate-of-last).
+    if (p.ais_gap_open && bufferCoords.length > 0) {
+      flush();
+      bufferSeverity = sev;
+      bufferStartTs = p.ts;
+      bufferCoords = [coord];
+      bufferLastTs = p.ts;
+      continue;
+    }
+
+    if (bufferCoords.length === 0) {
+      bufferCoords.push(coord);
+      bufferSeverity = sev;
+      bufferStartTs = p.ts;
+      bufferLastTs = p.ts;
+      continue;
+    }
+
+    if (sev !== bufferSeverity) {
+      // Color change: close current run on the previous point, start a new
+      // one that visually shares the transition vertex with the previous
+      // segment (so there's no gap in the rendering).
+      bufferCoords.push(coord);
+      flush();
+      bufferSeverity = sev;
+      bufferStartTs = p.ts;
+      bufferCoords = [coord];
+      bufferLastTs = p.ts;
+      continue;
+    }
+
+    bufferCoords.push(coord);
+    bufferLastTs = p.ts;
+  }
+  flush();
+
+  // The last position is the "current" — overlay a Point feature so the
+  // trail layer can render a slightly bigger dot at the head.
+  const last = positions[positions.length - 1];
+  features.push({
+    type: "Feature",
+    geometry: { type: "Point", coordinates: [last.lon, last.lat] },
+    properties: {
+      isCurrent: true,
+      severity: severityKey(last.severity),
+      ts: last.ts,
+    },
+  });
+
+  return { type: "FeatureCollection", features };
+}
+
+/**
+ * Looks up each event's lat/lon by joining against the position with the
+ * matching timestamp (or the closest preceding one when no exact match
+ * exists, since downsampling can shift event timestamps off the bucket
+ * grid). Events without a resolved coordinate are dropped silently.
+ */
+export function positionsToEventMarkers(
+  events: TrailEvent[],
+  positions: TrailPosition[],
+): EventMarkerCollection {
+  if (events.length === 0 || positions.length === 0) {
+    return { type: "FeatureCollection", features: [] };
+  }
+  // Build a sorted-by-ts index for binary search; positions arrive sorted
+  // ASC from the API so we trust that order.
+  const tsList = positions.map((p) => p.ts);
+  const features: EventMarkerFeature[] = [];
+
+  for (const ev of events) {
+    const pos = findClosestPosition(positions, tsList, ev.ts);
+    if (!pos) continue;
+    features.push({
+      type: "Feature",
+      geometry: { type: "Point", coordinates: [pos.lon, pos.lat] },
+      properties: {
+        type: ev.type,
+        severity: ev.severity ?? null,
+        zone: ev.zone ?? null,
+        ts: ev.ts,
+      },
+    });
+  }
+  return { type: "FeatureCollection", features };
+}
+
+function findClosestPosition(
+  positions: TrailPosition[],
+  tsList: string[],
+  targetTs: string,
+): TrailPosition | null {
+  // Binary search for the largest index where tsList[i] <= targetTs.
+  let lo = 0;
+  let hi = tsList.length - 1;
+  let best = -1;
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1;
+    if (tsList[mid] <= targetTs) {
+      best = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  if (best === -1) return positions[0] ?? null;
+  return positions[best] ?? null;
+}
diff --git a/web/lib/trail-types.ts b/web/lib/trail-types.ts
new file mode 100644
index 0000000..b829028
--- /dev/null
+++ b/web/lib/trail-types.ts
@@ -0,0 +1,45 @@
+// Mirrors the JSON contract published by GET /api/vessels/{slug}/positions
+// (P2-T01). Lives next to fleet-filtering / live-url-state so the rest of
+// the map stack can import a single source of truth for the historical
+// shape without reaching into a generated client.
+
+export type TrailSeverity =
+  | "CRITICAL"
+  | "SUSPICIOUS"
+  | "WATCH"
+  | "NORMAL"
+  | "CPWF"
+  | "UNKNOWN";
+
+export type TrailEventType =
+  | "ZONE_ENTERED"
+  | "ZONE_LEFT"
+  | "AIS_GAP_OPENED"
+  | "AIS_GAP_CLOSED"
+  | "SEVERITY_CHANGED";
+
+export type TrailPosition = {
+  ts: string;
+  lat: number;
+  lon: number;
+  sog: number | null;
+  cog: number | null;
+  severity: TrailSeverity;
+  in_zones: string[];
+  ais_gap_open: boolean;
+};
+
+export type TrailEvent = {
+  ts: string;
+  type: TrailEventType;
+  zone?: string | null;
+  severity?: TrailSeverity | null;
+};
+
+export type VesselHistory = {
+  vessel: { slug: string; name: string | null };
+  range: { from: string; to: string; days: number };
+  downsample: string | null;
+  positions: TrailPosition[];
+  events: TrailEvent[];
+};
diff --git a/web/lib/use-vessel-history.ts b/web/lib/use-vessel-history.ts
new file mode 100644
index 0000000..2bd1495
--- /dev/null
+++ b/web/lib/use-vessel-history.ts
@@ -0,0 +1,91 @@
+"use client";
+
+import * as React from "react";
+import type { VesselHistory } from "@/lib/trail-types";
+import { RANGE_TO_DAYS, type TimelineRange } from "@/lib/timeline-state";
+
+type CacheEntry = {
+  ts: number;
+  history: VesselHistory;
+};
+
+// Per-tab in-memory cache so range toggles don't re-hit /api on the way
+// back. Keyed by `${slug}|${days}`. 60-second TTL matches the server's
+// Cache-Control on the same endpoint.
+const CACHE = new Map<string, CacheEntry>();
+const CACHE_TTL_MS = 60_000;
+
+function cacheKey(slug: string, days: number): string {
+  return `${slug}|${days}`;
+}
+
+export function useVesselHistory(
+  apiBase: string,
+  slug: string,
+  range: TimelineRange,
+): {
+  history: VesselHistory | null;
+  loading: boolean;
+  error: Error | null;
+} {
+  const days = RANGE_TO_DAYS[range];
+  const [history, setHistory] = React.useState<VesselHistory | null>(() => {
+    const hit = CACHE.get(cacheKey(slug, days));
+    return hit && Date.now() - hit.ts < CACHE_TTL_MS ? hit.history : null;
+  });
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<Error | null>(null);
+
+  React.useEffect(() => {
+    if (!apiBase || !slug) return;
+    const key = cacheKey(slug, days);
+    const cached = CACHE.get(key);
+    if (cached && Date.now() - cached.ts < CACHE_TTL_MS) {
+      setHistory(cached.history);
+      return;
+    }
+
+    const ac = new AbortController();
+    setLoading(true);
+    setError(null);
+
+    const url = `${apiBase.replace(/\/+$/, "")}/api/vessels/${encodeURIComponent(slug)}/positions?days=${days}`;
+    fetch(url, { signal: ac.signal, headers: { accept: "application/json" } })
+      .then(async (res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return (await res.json()) as VesselHistory;
+      })
+      .then((data) => {
+        CACHE.set(key, { ts: Date.now(), history: data });
+        setHistory(data);
+        setLoading(false);
+      })
+      .catch((err: unknown) => {
+        if ((err as { name?: string })?.name === "AbortError") return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setLoading(false);
+      });
+
+    return () => ac.abort();
+  }, [apiBase, slug, days]);
+
+  return { history, loading, error };
+}
+
+/**
+ * Returns a copy of `history` truncated to positions <= currentIso and
+ * events <= currentIso. Used by VesselHistoryMap to drive the trail
+ * progressively as the scrubber moves.
+ */
+export function filterHistoryUpTo(
+  history: VesselHistory | null,
+  currentIso: string,
+): VesselHistory | null {
+  if (!history) return null;
+  const cur = currentIso;
+  return {
+    ...history,
+    positions: history.positions.filter((p) => p.ts <= cur),
+    events: history.events.filter((e) => e.ts <= cur),
+  };
+}
diff --git a/web/lib/utils.ts b/web/lib/utils.ts
index 90ded54..2eac067 100644
--- a/web/lib/utils.ts
+++ b/web/lib/utils.ts
@@ -6,6 +6,10 @@ export function slugify(name: string): string {
   return name.toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, "");
 }
 
+/**
+ * @deprecated Use `<Flag code={...} />` from `@/components/Flag` instead.
+ * Emoji-based flags don't render reliably on Windows. Kept only for legacy callers.
+ */
 export function flagEmoji(country: string): string {
   if (country.length !== 2) return "🏳️";
   const codePoints = country
diff --git a/web/package-lock.json b/web/package-lock.json
index 0f608c4..317aa15 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,6 +8,7 @@
       "name": "krill-free",
       "version": "0.1.0",
       "dependencies": {
+        "flag-icons": "^7.5.0",
         "maplibre-gl": "^5.24.0",
         "next": "^15.5.0",
         "react": "^19.0.0",
@@ -1190,6 +1191,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/flag-icons": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.5.0.tgz",
+      "integrity": "sha512-kd+MNXviFIg5hijH766tt+3x76ele1AXlo4zDdCxIvqWZhKt4T83bOtxUOOMlTx/EcFdUMH5yvQgYlFh1EqqFg==",
+      "license": "MIT"
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
diff --git a/web/package.json b/web/package.json
index 8d3b2c4..792edaf 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,6 +11,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "flag-icons": "^7.5.0",
     "maplibre-gl": "^5.24.0",
     "next": "^15.5.0",
     "react": "^19.0.0",