feat(marketing): refonte narrative 'Comment ça marche' — processus 4 étapes step-by-step (capture → IA → distribution → gouvernance)

Au lieu d'un cycle générique 1→12, l'animation suit maintenant un FLOW PROCESSUS
canonique qui raconte l'histoire produit du début à la fin :

  ÉTAPE 1 · CAPTURE          → Recording (7) + Transcription (1)
  ÉTAPE 2 · TRANSFORMATION IA → Diarisation (2) + Langues (3) + Résumé (9) + Chat IA (0)
  ÉTAPE 3 · DISTRIBUTION     → Exports (4) + Partage (6) + Users (5) + Intégrations (10)
  ÉTAPE 4 · GOUVERNANCE      → Recherche IA (8) + Audit (11) + Conformité (12)

PROCESS_ORDER = [7, 1, 2, 3, 9, 0, 4, 6, 5, 10, 8, 11, 12] — 13 sub-modes,
mode 0 IA inclus dans le cycle (au lieu d'être skippé), 1100ms × 13 ≈ 14.3s
tour complet.

Composants ajoutés / refondus :
- PROCESS BREADCRUMB visible au-dessus du phone (4 pilules · flèches · past/active/future)
- PROGRESS BAR sous breadcrumb (gradient brand-b1 → b2 → b3, role=progressbar)
- BOTTOM TAB BAR : 4 boutons étapes (au lieu de 6 features individuelles)
- RIGHT PANEL : 4 mini-sections par étape (12 boutons regroupés selon flow)
- FEATURE INFO CARD : préfixe 'Étape X/4 · TITRE' pour contexte processus
- CONNECTING LINE : flèche directionnelle + dot animé qui se déplace selon processIdx
- Mobile pills : suivent PROCESS_ORDER (13 sub-modes au lieu de 1-12)

Alpine refactor :
- selectedFeature devient un getter computed sur PROCESS_ORDER[processIdx]
- nouveau STEPS array avec subModes mapping + activeStep / progressPercent getters
- goToStep(id) helper jump au 1er sub-mode d'une étape
- handleManualSelect(i) résout l'index dans PROCESS_ORDER

Préservé : palette brand stricte (b1/b2/b3/navy), V3 radii, Inter+JetBrains Mono,
phone shell statique, 13 templates de modes, IA Mistral premium card, eyebrow
'COMMENT ÇA MARCHE' brand-navy, WCAG (aria-current, aria-label, role=navigation,
role=progressbar, role=tablist), prefers-reduced-motion guards.

Tests : 9/9 fonctionnalites passent (test how_it_works_reactor étendu de +37 assertions
narratives : PROCESS_ORDER, STEPS, processIdx, activeStep, goToStep, breadcrumb,
progressbar, step-bottom, step-section, contexte processus dans card).

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

tests/test_marketing_secondary_pages.py

@@ -300,6 +300,42 @@ def test_fonctionnalites_how_it_works_reactor_section():
     # Performance metrics : 3 cells with grad-text for 0ms / 24/7
     assert 'grad-text' in body, "Missing grad-text on metrics"
 
+    # ── REFONTE NARRATIVE PROCESSUS 2026-04-29 v3 ──────────────────────────
+    # PROCESS_ORDER : ordre canonique du flow utilisateur (13 sub-modes, mode 0 inclus)
+    assert 'PROCESS_ORDER' in body, "Missing PROCESS_ORDER array (narrative refactor)"
+    assert '[7, 1, 2, 3, 9, 0, 4, 6, 5, 10, 8, 11, 12]' in body, \
+        "Missing canonical PROCESS_ORDER sequence (Capture → Transform IA → Distribution → Gouvernance)"
+    # 4 STEPS (étapes principales) + helpers
+    assert 'STEPS:' in body, "Missing STEPS array"
+    assert "'Capture'" in body, "Missing étape 1 Capture"
+    assert "'Transformation IA'" in body, "Missing étape 2 Transformation IA"
+    assert "'Distribution'" in body, "Missing étape 3 Distribution"
+    assert "'Recherche & Gouvernance'" in body, "Missing étape 4 Recherche & Gouvernance"
+    assert 'subModes:' in body, "Missing subModes mapping"
+    # Computed states + helpers
+    assert 'processIdx' in body, "Missing processIdx state"
+    assert 'activeStep' in body, "Missing activeStep getter"
+    assert 'goToStep' in body, "Missing goToStep helper"
+    assert 'progressPercent' in body, "Missing progressPercent getter"
+    # Process breadcrumb visible above phone
+    assert 'dictia-process-breadcrumb' in body, "Missing process breadcrumb wrapper"
+    assert 'Étapes du processus DictIA' in body, "Missing breadcrumb aria-label"
+    assert 'aria-current' in body, "Missing aria-current on active step"
+    # Progress bar
+    assert 'role="progressbar"' in body, "Missing progressbar role"
+    assert 'Progression du flow' in body, "Missing progress bar label"
+    # Bottom step navigator (4 buttons étapes au lieu de 6 features)
+    assert 'dictia-step-bottom' in body, "Missing bottom step navigator class"
+    assert 'Étapes du processus' in body, "Missing bottom tablist aria-label"
+    # Right panel : 4 mini-sections par étape
+    assert 'dictia-step-section' in body, "Missing right panel step sections"
+    # Feature info card : context processus (Étape X/4 · Titre)
+    assert 'STEPS[activeStep - 1]' in body, "Missing process context binding in feature card"
+    # Connecting line : travelling dot following processIdx
+    assert 'PROCESS_ORDER.length' in body, "Missing PROCESS_ORDER.length binding (travelling dot or progress)"
+    # Right panel header : updated badge
+    assert '12 fonctions · 4 étapes' in body, "Missing right panel updated badge"
+
 
 def test_fonctionnalites_export_formats_section():
     client = app.test_client()