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).
This commit is contained in:
Allison