polish(marketing): refonte HYPER PRO 'Comment ça marche' — bezel iPhone, status bar, sound waves, modes enrichis (REC, waveform, typing, ripple, breadcrumb), IA card 40px brain + metrics, connecting line

10 améliorations cinématiques sur la section interactive :

PHONE FRAME RÉALISTE
- Bezel double border + glow ring externe pulsant
- Notch (Dynamic Island stylisé) + speaker grille + camera dot
- Status bar mobile (9:41, signal/wifi/batterie SVG)
- Drop shadow dramatique + inner shadow encastrée

MIC + SOUND WAVES
- 3 ripples concentriques émanant du mic (sound-ring keyframes)

MODE 1 TRANSCRIPTION
- Header REC indicator pulsant (rouge) + nom fichier
- Waveform animée (12 bars hauteurs randomisées)
- Barre progress double avec gradient + glow

MODE 2 DIARISATION
- Header conversation : 3 avatars empilés overlapping
- Bubbles avec timestamps (09:0X) + box-shadow
- Typing indicator (3 dots) entre messages

MODE 3 LANGUES
- Header DÉTECTION AUTOMATIQUE avec dot pulsant
- Ripple wave depuis le centre (rippleDelay calculé par distance)
- 5 langues highlight aléatoire glow brièvement
- Counter live FR · EN · ES · ... + 99+ détectées

MODE 4 EXPORTS
- Grid 4×2 organisé (au lieu de wrap aléatoire)
- Files détaillés avec mini-pages (3 lignes texte)
- Subtitle '7 FORMATS PRÊTS' + checkmark vert

MODE 5 USERS
- Counter centré 01 → 20 (font-mono black)
- 5 USER_COLORS variations (purple/cyan/green/blue/amber)
- Connecting lines SVG pointillés vers centre

MODE 6 SHARE
- Breadcrumb 'Mes dossiers › Réunions'
- Toolbar mini (search, filter, sort)
- Rows structurées avec 3-dots action

BOTTOM ZONE
- 6 boutons agrandis (30+px) avec labels + tab indicator border 2px
- AUTO pill (badge dot pulse) / Manuel countdown bar 4.5s

CARD INFO
- Icon container 32×32 + badge top-right + hover lift

RIGHT PANEL IA
- Brain dans cercle 40×40 gradient + glow
- Metrics row : 0ms latence · 100% privé · 24/7
- Sovereignty bullets : icon dans rounded box

GLOBAL
- Section background : grid pattern + 2 floating orbs blur
- Connecting line SVG cyan→violet phone↔IA panel
- Header section : eyebrow gradient pill + stats row (6/99+/0) + CTA démo
- Crossfade transitions modes (scale 0.96 → 1)

ACCESSIBILITÉ
- prefers-reduced-motion désactive toutes animations
- @media (max-width: 767px) désactive éléments décoratifs CPU-intensive
- aria-pressed, aria-live polite, focus-visible préservés
- 30 nouveaux keyframes CSS scopés

Tests : 1 existant + 1 enrichi (53 lignes, 22 nouvelles assertions)
Tests pass : 30/30 sur how-it-works (les 2 fails conformite sont pré-existants).

tests/test_marketing_secondary_pages.py

@@ -201,6 +201,59 @@ def test_fonctionnalites_how_it_works_reactor_section():
     assert 'prefers-reduced-motion' in body, "Reduced-motion guard missing"
     assert 'aria-pressed' in body, "Missing aria-pressed on feature buttons"
 
+    # ── HYPER PRO polish refactor 2026-04-29 ── ----------------------------
+    # Phone shell : bezel + notch + speaker + status bar
+    assert 'dictia-phone-shell' in body, "Missing phone shell class"
+    assert 'dictia-notch' in body, "Missing notch element"
+    assert 'dictia-statusbar' in body, "Missing mobile-style status bar"
+    assert '9:41' in body, "Missing 9:41 status bar time"
+    assert 'dictia-sound-ring' in body, "Missing sound ring animation"
+    assert 'dictia-phone-glow-ring' in body, "Missing phone external glow ring"
+
+    # Mode 1 — REC indicator + waveform
+    assert 'REC' in body, "Missing transcription REC indicator"
+    assert 'dictia-rec-dot' in body, "Missing REC pulsing dot"
+    assert 'dictia-wave-bar' in body, "Missing waveform animation"
+
+    # Mode 2 — typing indicator + timestamps + stacked avatars
+    assert 'dictia-typing-dot' in body, "Missing typing indicator dots"
+    assert 'Réunion · 3 participants' in body, "Missing diarisation header"
+
+    # Mode 3 — DÉTECTION AUTOMATIQUE header + ripple from center + counter
+    assert 'DÉTECTION AUTOMATIQUE' in body, "Missing langues detection header"
+    assert 'rippleDelay' in body, "Missing ripple delay function"
+    assert 'HIGHLIGHTS' in body, "Missing langues highlights array"
+
+    # Mode 4 — header EXPORTS + checkmark
+    assert 'EXPORTS DISPONIBLES' in body, "Missing exports header"
+    assert '7 FORMATS PRÊTS' in body, "Missing exports checkmark subtitle"
+
+    # Mode 5 — counter centered + USER_COLORS
+    assert 'UTILISATEURS' in body, "Missing users counter header"
+    assert 'USER_COLORS' in body, "Missing users color variations"
+
+    # Mode 6 — breadcrumb + toolbar
+    assert 'Mes dossiers' in body, "Missing share breadcrumb"
+
+    # BOTTOM zone — feature buttons + AUTO pill + countdown
+    assert 'featureShortLabel' in body, "Missing feature short labels function"
+    assert 'dictia-auto-pulse' in body, "Missing auto pill pulse"
+    assert 'dictia-countdown-fill' in body, "Missing manuel countdown bar"
+
+    # Right panel — IA card metrics + Brain in 40x40 circle
+    assert 'MISTRAL 7B' in body, "Missing Mistral badge label"
+    assert 'latence' in body, "Missing latency metric label"
+
+    # Section background + connecting line
+    assert 'dictia-bg-grid' in body, "Missing background grid pattern"
+    assert 'dictia-bg-orbs' in body, "Missing floating orbs"
+    assert 'dictia-connecting-line' in body, "Missing connecting line phone↔IA"
+
+    # Stats row in section header
+    assert 'modules' in body, "Missing stats row 'modules'"
+    assert 'cloud' in body, "Missing stats row 'cloud'"
+    assert 'Voir une démo' in body, "Missing demo CTA link"
+
 
 def test_fonctionnalites_export_formats_section():
     client = app.test_client()