feat(landing): hero animé dessiné — la promesse du produit montrée au lieu d'une photo de banque d'images

Deux pages de document côte à côte (source FR, traduction qui cycle
EN/ES/DE) : squelette identique (titre, lignes, tableau, graphique),
seuls les mots et les longueurs de lignes changent, avec balayage doré
à chaque changement et points animés sur le connecteur. Respecte le
réglage « réduire les animations ». Légende : « Même mise en page,
nouvelle langue — rien d'autre ne bouge ».

frontend/src/components/landing/landing-page.tsx

@@ -23,10 +23,10 @@ import {
   Languages,
   Monitor,
   Eye,
-  Activity,
 } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useI18n } from "@/lib/i18n";
+import { HeroVisual } from "./hero-visual";
 import { API_BASE } from "@/lib/config";
 import { LanguageSwitcher } from "@/components/ui/language-switcher";
 
@@ -134,17 +134,10 @@ const Hero = () => {
           transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
           className="relative max-w-5xl mx-auto"
         >
-          <div className="editorial-card p-4 lg:p-6 overflow-hidden !bg-brand-muted/30 dark:!bg-[#1f1f1f]/30">
-            <div className="aspect-[16/9] lg:aspect-[21/9] bg-white dark:bg-[#141414] rounded-2xl relative overflow-hidden shadow-sm border border-black/5 dark:border-white/5">
-              <img
-                src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?auto=format&fit=crop&q=80&w=2000"
-                alt="Workspace"
-                className="w-full h-full object-cover filter saturate-[0.8] grayscale-[0.1]"
-                referrerPolicy="no-referrer"
-              />
-              <div className="absolute inset-0 bg-brand-dark/5 dark:bg-black/20" />
-            </div>
-          </div>
+          <HeroVisual />
+          <p className="mt-6 text-center text-xs font-light uppercase tracking-[0.25em] text-brand-dark/50 dark:text-white/50">
+            {t('landing.hero.visualCaption')}
+          </p>
         </motion.div>
       </div>
     </section>