diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 6aa8d1d..4e288b5 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -228,6 +228,83 @@
   to { transform: rotate(360deg); }
 }
 
+/* Luxury & Ambient Utilities */
+.hero-glow {
+  background: radial-gradient(circle at 50% 18%, rgba(197, 161, 122, 0.22) 0%, rgba(197, 161, 122, 0.08) 35%, transparent 70%);
+}
+.dark .hero-glow {
+  background: radial-gradient(circle at 50% 18%, rgba(197, 161, 122, 0.18) 0%, rgba(197, 161, 122, 0.04) 40%, transparent 75%);
+}
+
+.gradient-text-gold {
+  background: linear-gradient(135deg, #1A1A1A 0%, #8B6F47 50%, #C5A17A 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.dark .gradient-text-gold {
+  background: linear-gradient(135deg, #FFFFFF 0%, #E8D5C0 50%, #C5A17A 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.luxury-card {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(0, 0, 0, 0.07);
+  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.07);
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.luxury-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 30px 60px -15px rgba(139, 111, 71, 0.15);
+  border-color: rgba(197, 161, 122, 0.4);
+}
+
+.dark .luxury-card {
+  background: rgba(24, 24, 24, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.5);
+}
+.dark .luxury-card:hover {
+  border-color: rgba(197, 161, 122, 0.5);
+  box-shadow: 0 30px 60px -15px rgba(197, 161, 122, 0.2);
+}
+
+.popular-glow {
+  position: relative;
+}
+.popular-glow::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 34px;
+  background: linear-gradient(135deg, #C5A17A, #8B6F47, #C5A17A);
+  z-index: -1;
+  opacity: 0.85;
+  filter: blur(8px);
+}
+
+.floating-badge {
+  animation: floatSlow 6s ease-in-out infinite alternate;
+}
+.floating-badge-delayed {
+  animation: floatSlow 6s ease-in-out infinite alternate 3s;
+}
+@keyframes floatSlow {
+  0% { transform: translateY(0px) rotate(0deg); }
+  100% { transform: translateY(-10px) rotate(1deg); }
+}
+
+@keyframes laserScan {
+  0% { top: 0%; opacity: 0; }
+  10% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { top: 100%; opacity: 0; }
+}
+.laser-beam {
+  animation: laserScan 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
 /* Skeleton */
 .skeleton {
   background: linear-gradient(90deg, var(--muted) 0%, rgba(255,255,255,0.05) 50%, var(--muted) 100%);
diff --git a/frontend/src/components/landing/hero-visual.tsx b/frontend/src/components/landing/hero-visual.tsx
index 6e6a880..75cfd57 100644
--- a/frontend/src/components/landing/hero-visual.tsx
+++ b/frontend/src/components/landing/hero-visual.tsx
@@ -758,6 +758,31 @@ export function HeroVisual() {
 
   return (
     <div className="w-full relative mx-auto select-none">
+      {/* Halo d'ambiance doré sous la fenêtre */}
+      <div className="absolute -inset-2 bg-gradient-to-r from-brand-accent/30 via-amber-400/20 to-brand-accent/30 rounded-3xl blur-2xl opacity-70 pointer-events-none -z-10" />
+
+      {/* Pastille Flottante 1 (Gauche) */}
+      <div className="hidden xl:flex floating-badge absolute -left-12 top-16 z-30 items-center gap-3 px-4 py-2.5 rounded-2xl bg-white/95 dark:bg-[#1f1f1f]/95 border border-brand-accent/40 shadow-2xl backdrop-blur-xl">
+        <div className="w-8 h-8 rounded-xl bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
+          <ShieldCheck className="w-4 h-4" />
+        </div>
+        <div className="text-left">
+          <div className="text-xs font-bold text-brand-dark dark:text-white">SmartArt & Formules</div>
+          <div className="text-[10px] text-brand-dark/60 dark:text-white/60 font-medium">100% Intacts et recalculés</div>
+        </div>
+      </div>
+
+      {/* Pastille Flottante 2 (Droite) */}
+      <div className="hidden xl:flex floating-badge-delayed absolute -right-12 top-32 z-30 items-center gap-3 px-4 py-2.5 rounded-2xl bg-white/95 dark:bg-[#1f1f1f]/95 border border-brand-accent/40 shadow-2xl backdrop-blur-xl">
+        <div className="w-8 h-8 rounded-xl bg-blue-500/15 text-blue-600 dark:text-blue-400 flex items-center justify-center">
+          <Sparkles className="w-4 h-4 text-[#185ABD] dark:text-[#6BA5FF]" />
+        </div>
+        <div className="text-left">
+          <div className="text-xs font-bold text-brand-dark dark:text-white">Rétention Zéro</div>
+          <div className="text-[10px] text-brand-dark/60 dark:text-white/60 font-medium">Données supprimées après export</div>
+        </div>
+      </div>
+
       {/* Conteneur de fenêtre logicielle Office / PDF ultra-réaliste */}
       <div className="relative rounded-2xl md:rounded-3xl border border-black/15 dark:border-white/15 bg-[#FDFCF9] dark:bg-[#141414] shadow-[0_25px_60px_-15px_rgba(0,0,0,0.18)] dark:shadow-[0_25px_60px_-15px_rgba(0,0,0,0.8)] overflow-hidden">
 
diff --git a/frontend/src/components/landing/landing-page.tsx b/frontend/src/components/landing/landing-page.tsx
index 5b453d1..1839e5e 100644
--- a/frontend/src/components/landing/landing-page.tsx
+++ b/frontend/src/components/landing/landing-page.tsx
@@ -21,6 +21,9 @@ import {
   Languages,
   Monitor,
   Eye,
+  Sparkles,
+  Check,
+  Table as TableIcon,
 } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useI18n } from "@/lib/i18n";
@@ -29,11 +32,11 @@ import { API_BASE } from "@/lib/config";
 import { LanguageSwitcher } from "@/components/ui/language-switcher";
 
 const Logo = () => (
-  <div className="flex items-center gap-4 group cursor-pointer">
-    <div className="w-10 h-10 bg-brand-dark rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-xl transition-all duration-500 group-hover:rotate-[15deg] group-hover:scale-110">
+  <div className="flex items-center gap-3.5 group cursor-pointer">
+    <div className="w-10 h-10 bg-gradient-to-br from-brand-dark to-[#333] dark:from-brand-accent dark:to-[#8B6F47] rounded-xl flex items-center justify-center text-white dark:text-brand-dark font-serif font-bold text-xl shadow-lg shadow-black/10 transition-transform duration-300 group-hover:scale-105">
       W
     </div>
-    <span className="text-2xl font-bold tracking-tighter text-brand-dark dark:text-white">
+    <span className="text-2xl font-bold tracking-tight text-brand-dark dark:text-white">
       Wordly<span className="text-brand-goldink dark:text-brand-accent">.art</span>
     </span>
   </div>
@@ -44,20 +47,26 @@ const Navbar = () => {
   const { t } = useI18n();
 
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 bg-brand-bg/80 dark:bg-[#0a0a0a]/80 backdrop-blur-md border-b border-black/5 dark:border-white/5">
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-brand-bg/85 dark:bg-[#0d0d0d]/85 backdrop-blur-xl border-b border-black/5 dark:border-white/5 transition-colors">
       <div className="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
         <Link href="/">
           <Logo />
         </Link>
 
-        <div className="hidden md:flex items-center space-x-10">
-          <a href="#features" className="text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white transition-colors text-[11px] font-bold uppercase tracking-widest">{t('landing.nav.why')}</a>
-          <a href="#formats" className="text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white transition-colors text-[11px] font-bold uppercase tracking-widest">{t('landing.nav.formats')}</a>
-          <a href="#pricing" className="text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white transition-colors text-[11px] font-bold uppercase tracking-widest">{t('landing.nav.pricing')}</a>
+        <div className="hidden md:flex items-center space-x-9">
+          <a href="#how" className="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">{t('landing.steps.title')}</a>
+          <a href="#fidelity" className="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">{t('landing.nav.why')}</a>
+          <a href="#formats" className="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">{t('landing.nav.formats')}</a>
+          <a href="#pricing" className="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">{t('landing.nav.pricing')}</a>
           <div className="h-4 w-[1px] bg-black/10 dark:bg-white/10"></div>
-          <LanguageSwitcher className="h-9 w-auto gap-1.5 rounded-full border-black/10 dark:border-white/10 bg-transparent dark:bg-transparent px-4 text-[11px] font-bold uppercase tracking-widest text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white shadow-none" />
-          <Link href="/auth/login" className="text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white transition-colors text-[11px] font-bold uppercase tracking-widest">{t('landing.nav.login')}</Link>
-          <Link href="/auth/register" className="premium-button py-2.5 px-6 leading-none">{t('landing.nav.startFree')}</Link>
+          <LanguageSwitcher className="h-9 w-auto gap-1.5 rounded-full border-black/10 dark:border-white/10 bg-transparent dark:bg-transparent px-4 text-[11px] font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-dark dark:hover:text-white shadow-none" />
+          <Link href="/auth/login" className="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-dark dark:hover:text-white transition-colors">{t('landing.nav.login')}</Link>
+          <Link href="/auth/register" className="relative group overflow-hidden rounded-xl bg-brand-dark dark:bg-brand-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white dark:text-brand-dark shadow-lg shadow-black/15 dark:shadow-brand-accent/20 hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
+            <span className="relative z-10 flex items-center gap-2">
+              <span>{t('landing.nav.startFree')}</span>
+              <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
+            </span>
+          </Link>
         </div>
 
         <div className="md:hidden">
@@ -79,11 +88,12 @@ const Navbar = () => {
               <div className="flex justify-center">
                 <LanguageSwitcher className="w-full h-11 rounded-2xl border-2 border-black/5 dark:border-white/10 bg-transparent dark:bg-transparent font-bold text-brand-dark dark:text-white shadow-none" />
               </div>
-              <a href="#features" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-brand-dark dark:text-white">{t('landing.nav.why')}</a>
+              <a href="#how" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-brand-dark dark:text-white">{t('landing.steps.title')}</a>
+              <a href="#fidelity" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-brand-dark dark:text-white">{t('landing.nav.why')}</a>
               <a href="#formats" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-brand-dark dark:text-white">{t('landing.nav.formats')}</a>
               <a href="#pricing" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-brand-dark dark:text-white">{t('landing.nav.pricing')}</a>
               <div className="pt-6 grid grid-cols-2 gap-4">
-                <Link href="/auth/login" onClick={() => setIsOpen(false)} className="flex items-center justify-center py-4 text-brand-dark/60 dark:text-white/60 font-bold border-2 border-black/5 dark:border-white/10 rounded-2xl">{t('landing.nav.login')}</Link>
+                <Link href="/auth/login" onClick={() => setIsOpen(false)} className="flex items-center justify-center py-4 text-brand-dark/70 dark:text-white/70 font-bold border-2 border-black/5 dark:border-white/10 rounded-2xl">{t('landing.nav.login')}</Link>
                 <Link href="/auth/register" onClick={() => setIsOpen(false)} className="flex items-center justify-center py-4 bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark rounded-2xl font-bold">{t('landing.nav.startFree')}</Link>
               </div>
             </div>
@@ -98,34 +108,51 @@ const Hero = () => {
   const { t } = useI18n();
 
   return (
-    <section className="relative pt-48 pb-32 lg:pt-64 lg:pb-48 px-4 text-center">
-      <div className="max-w-5xl mx-auto relative z-10">
+    <section className="relative pt-36 pb-20 md:pt-48 md:pb-32 px-4 hero-glow overflow-hidden text-center">
+      {/* Halo d'ambiance doré d'arrière-plan */}
+      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-tr from-brand-accent/20 to-amber-200/10 dark:from-brand-accent/15 dark:to-transparent rounded-full blur-3xl pointer-events-none -z-10" />
+
+      <div className="max-w-6xl mx-auto relative z-10">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, ease: "easeOut" }}
         >
-          <div className="inline-flex items-center gap-2 px-4 py-1.5 mb-10 text-[10px] font-bold tracking-[0.3em] text-brand-dark/60 dark:text-white/60 uppercase bg-transparent border border-black/10 dark:border-white/10 rounded-full">
-            <Languages size={10} /> {t('landing.hero.tag')}
+          {/* Pastille / Pill */}
+          <div className="inline-flex items-center gap-2.5 px-4 py-1.5 mb-8 rounded-full border border-brand-accent/40 bg-brand-accent/10 dark:bg-brand-accent/5 backdrop-blur-md shadow-xs">
+            <span className="w-2 h-2 rounded-full bg-brand-goldink dark:bg-brand-accent animate-pulse" />
+            <span className="text-[11px] font-bold tracking-[0.25em] uppercase text-brand-goldink dark:text-brand-accent">
+              <Languages size={12} className="inline mr-1 -mt-0.5" /> {t('landing.hero.tag')}
+            </span>
           </div>
-          <h1 className="text-6xl md:text-8xl mb-10 text-brand-dark dark:text-white font-serif font-medium tracking-tight leading-[1.1]">
+
+          {/* Grand Titre Élégant */}
+          <h1 className="text-5xl sm:text-7xl md:text-8xl font-serif font-medium tracking-tight text-brand-dark dark:text-white leading-[1.08] mb-8">
             {t('landing.hero.titleLine1')}<br />
-            <span className="block mt-4 italic">{t('landing.hero.titleLine2')}</span>
+            <span className="italic gradient-text-gold font-serif">{t('landing.hero.titleLine2')}</span>
           </h1>
-          <p className="text-lg md:text-xl text-brand-dark/50 dark:text-white/50 mb-14 max-w-2xl mx-auto leading-relaxed font-light">
+
+          {/* Sous-titre */}
+          <p className="max-w-2xl mx-auto text-lg sm:text-xl text-brand-dark/75 dark:text-white/70 font-light leading-relaxed mb-12">
             {t('landing.hero.description')}
           </p>
 
-          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-24">
-            <Link href="/auth/register" className="premium-button px-12 py-5 text-base inline-block text-center">
-              {t('landing.hero.ctaMain')}
+          {/* Boutons d'action */}
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20">
+            <Link href="/auth/register" className="w-full sm:w-auto px-9 py-4 rounded-2xl bg-brand-dark hover:bg-brand-goldink dark:bg-brand-accent dark:hover:bg-amber-400 text-white dark:text-brand-dark font-bold text-xs uppercase tracking-widest shadow-xl shadow-brand-dark/20 dark:shadow-brand-accent/25 hover:shadow-2xl hover:scale-[1.02] active:scale-98 transition-all flex items-center justify-center gap-2.5">
+              <Sparkles size={16} />
+              <span>{t('landing.hero.ctaMain')}</span>
+              <ArrowRight size={16} />
             </Link>
-            <a href="#pricing" className="px-12 py-5 rounded-xl border border-black/10 dark:border-white/10 font-bold text-base hover:bg-black/5 dark:hover:bg-white/5 transition-all inline-block text-brand-dark dark:text-white">
-              {t('landing.hero.ctaSec')}
+
+            <a href="#fidelity" className="w-full sm:w-auto px-8 py-4 rounded-2xl border border-black/15 dark:border-white/15 hover:border-brand-accent bg-white/70 dark:bg-white/5 backdrop-blur-md text-brand-dark dark:text-white font-bold text-xs uppercase tracking-widest hover:bg-black/5 dark:hover:bg-white/10 transition-all flex items-center justify-center gap-2">
+              <Eye size={16} className="text-brand-goldink dark:text-brand-accent" />
+              <span>{t('landing.hero.ctaSec')}</span>
             </a>
           </div>
         </motion.div>
 
+        {/* Simulateur Bureautique Interactif */}
         <motion.div
           initial={{ opacity: 0, scale: 0.98, y: 30 }}
           animate={{ opacity: 1, scale: 1, y: 0 }}
@@ -142,6 +169,31 @@ const Hero = () => {
   );
 };
 
+const MetricsBanner = () => {
+  return (
+    <section className="border-y border-black/10 dark:border-white/10 bg-white/70 dark:bg-[#141414]/70 backdrop-blur-xl py-10 px-6">
+      <div className="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+        <div className="space-y-1">
+          <div className="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">+250 000</div>
+          <div className="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Pages traduites</div>
+        </div>
+        <div className="space-y-1">
+          <div className="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">99.8%</div>
+          <div className="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Fidélité visuelle</div>
+        </div>
+        <div className="space-y-1">
+          <div className="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">13</div>
+          <div className="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Langues majeures</div>
+        </div>
+        <div className="space-y-1">
+          <div className="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">0 Jour</div>
+          <div className="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Rétention données</div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
 const Steps = () => {
   const { t } = useI18n();
   const steps = [
@@ -151,22 +203,28 @@ const Steps = () => {
   ];
 
   return (
-    <section className="py-32 px-4 border-y border-black/5 dark:border-white/5">
+    <section id="how" className="py-28 px-6">
       <div className="max-w-7xl mx-auto">
-        <div className="mb-24">
-          <span className="accent-pill mb-6 block w-fit">{t('landing.steps.process')}</span>
-          <h2 className="text-4xl md:text-5xl text-brand-dark dark:text-white font-serif font-medium tracking-tight mb-6">{t('landing.steps.title')}</h2>
-          <p className="text-brand-dark/60 dark:text-white/60 text-lg max-w-xl font-light">{t('landing.steps.subtitle')}</p>
+        <div className="text-center mb-20">
+          <span className="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
+            {t('landing.steps.process')}
+          </span>
+          <h2 className="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
+            {t('landing.steps.title')}
+          </h2>
+          <p className="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
+            {t('landing.steps.subtitle')}
+          </p>
         </div>
 
-        <div className="grid md:grid-cols-3 gap-16">
+        <div className="grid md:grid-cols-3 gap-8">
           {steps.map((st, i) => (
-            <div key={i} className="group">
-              <div className="w-12 h-12 rounded-xl bg-brand-muted dark:bg-[#1f1f1f] flex items-center justify-center text-brand-dark dark:text-white mb-8 group-hover:bg-brand-dark dark:group-hover:bg-brand-accent group-hover:text-white dark:group-hover:text-brand-dark transition-all duration-500">
-                {st.icon}
+            <div key={i} className="luxury-card p-8 rounded-3xl relative">
+              <div className="w-12 h-12 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark flex items-center justify-center font-serif font-bold text-xl mb-6 shadow-md">
+                {st.num}
               </div>
-              <h3 className="text-xl font-serif font-medium text-brand-dark dark:text-white mb-4">{st.title}</h3>
-              <p className="text-brand-dark/60 dark:text-white/60 leading-relaxed font-light">{st.desc}</p>
+              <h3 className="text-xl font-serif font-bold text-brand-dark dark:text-white mb-3">{st.title}</h3>
+              <p className="text-sm text-brand-dark/75 dark:text-white/70 leading-relaxed font-light">{st.desc}</p>
             </div>
           ))}
         </div>
@@ -178,30 +236,33 @@ const Steps = () => {
 const FeaturesContext = () => {
   const { t } = useI18n();
   return (
-    <section id="features" className="py-32 px-4 bg-brand-muted/30 dark:bg-[#1f1f1f]/30">
+    <section id="features" className="py-28 px-6 bg-brand-muted/30 dark:bg-[#151515]/30">
       <div className="max-w-7xl mx-auto">
-        <div className="grid lg:grid-cols-12 gap-20 items-end mb-24">
-          <div className="lg:col-span-12">
-            <span className="accent-pill mb-6 block w-fit font-bold uppercase tracking-widest">{t('landing.features.tag')}</span>
-            <h2 className="text-4xl md:text-5xl text-brand-dark dark:text-white font-serif font-medium tracking-tight leading-none">
-              {t('landing.features.title')}
-            </h2>
-          </div>
+        <div className="text-center mb-20">
+          <span className="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
+            {t('landing.features.tag')}
+          </span>
+          <h2 className="text-4xl sm:text-5xl text-brand-dark dark:text-white font-serif font-medium tracking-tight">
+            {t('landing.features.title')}
+          </h2>
+          <p className="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
+            {t('landing.features.description')}
+          </p>
         </div>
 
         <div className="grid md:grid-cols-3 gap-8">
           {[
-            { icon: <Monitor className="text-brand-dark/60 dark:text-white/60" />, title: t('landing.features.context.title'), desc: t('landing.features.context.desc') },
-            { icon: <Layers className="text-brand-dark/60 dark:text-white/60" />, title: t('landing.features.glossary.title'), desc: t('landing.features.glossary.desc') },
-            { icon: <Eye className="text-brand-dark/60 dark:text-white/60" />, title: t('landing.features.vision.title'), desc: t('landing.features.vision.desc') },
+            { icon: <Monitor className="text-brand-goldink dark:text-brand-accent" size={24} />, title: t('landing.features.context.title'), desc: t('landing.features.context.desc') },
+            { icon: <Layers className="text-brand-goldink dark:text-brand-accent" size={24} />, title: t('landing.features.glossary.title'), desc: t('landing.features.glossary.desc') },
+            { icon: <Eye className="text-brand-goldink dark:text-brand-accent" size={24} />, title: t('landing.features.vision.title'), desc: t('landing.features.vision.desc') },
           ].map((item, i) => (
-            <div key={i} className="editorial-card p-10 flex flex-col items-start gap-8">
-              <div className="w-10 h-10 border border-black/5 dark:border-white/10 rounded-full flex items-center justify-center">
+            <div key={i} className="luxury-card p-8 sm:p-10 flex flex-col items-start gap-6 rounded-3xl">
+              <div className="w-12 h-12 rounded-2xl bg-brand-accent/10 border border-brand-accent/30 flex items-center justify-center">
                 {item.icon}
               </div>
               <div>
-                <h4 className="text-xl font-serif font-medium mb-4 text-brand-dark dark:text-white">{item.title}</h4>
-                <p className="text-brand-dark/60 dark:text-white/60 leading-relaxed font-light text-sm">{item.desc}</p>
+                <h4 className="text-xl font-serif font-bold mb-3 text-brand-dark dark:text-white">{item.title}</h4>
+                <p className="text-brand-dark/75 dark:text-white/70 leading-relaxed font-light text-sm">{item.desc}</p>
               </div>
             </div>
           ))}
@@ -214,92 +275,114 @@ const FeaturesContext = () => {
 const LayoutFeatures = () => {
   const { t } = useI18n();
 
-  // Deux vraies pages de document : même structure, deux langues.
-  // Le terme en gras montre le respect de la terminologie (glossaire).
-  const DocPage = ({ side }: { side: "source" | "target" }) => (
-    <div className="flex flex-col rounded-2xl bg-white p-8 text-start shadow-xl border border-black/5 dark:border-white/10 dark:bg-[#181818] lg:p-10">
-      <span className={`mb-6 w-fit rounded-full border px-3 py-1 text-[10px] font-black uppercase tracking-widest ${side === "source" ? "border-black/10 text-brand-dark/60 dark:border-white/15 dark:text-white/60" : "border-brand-accent/40 bg-brand-accent/10 text-brand-goldink dark:text-brand-accent"}`}>
-        {side === "source" ? "FR — original" : "EN — traduit"}
-      </span>
-      <h4 className="mb-4 font-serif text-xl font-medium tracking-tight text-brand-dark dark:text-white lg:text-2xl">
-        {side === "source" ? t("landing.beforeAfter.sourceTitle") : t("landing.beforeAfter.targetTitle")}
-      </h4>
-      <p className="mb-4 text-sm leading-relaxed text-brand-dark/85 dark:text-white/80">
-        {side === "source" ? t("landing.beforeAfter.sourcePara1") : t("landing.beforeAfter.targetPara1")}
-      </p>
-      <p className="mb-6 text-sm leading-relaxed text-brand-dark/85 dark:text-white/80">
-        {side === "source" ? (
-          <>
-            {t("landing.beforeAfter.sourcePara2Before")}{" "}
-            <strong className="font-bold text-brand-dark dark:text-white">{t("landing.beforeAfter.sourceTerm")}</strong>{" "}
-            {t("landing.beforeAfter.sourcePara2After")}
-          </>
-        ) : (
-          <>
-            {t("landing.beforeAfter.targetPara2Before")}{" "}
-            <strong className="font-bold text-brand-dark dark:text-white">{t("landing.beforeAfter.targetTerm")}</strong>{" "}
-            {t("landing.beforeAfter.targetPara2After")}
-          </>
-        )}
-      </p>
-      <ul className="mb-8 space-y-2 text-sm text-brand-dark/85 dark:text-white/80">
-        <li className="flex items-start gap-2">
-          <span className="mt-2 size-1 shrink-0 rounded-full bg-brand-accent" />
-          {side === "source" ? t("landing.beforeAfter.sourceItem1") : t("landing.beforeAfter.targetItem1")}
-        </li>
-        <li className="flex items-start gap-2">
-          <span className="mt-2 size-1 shrink-0 rounded-full bg-brand-accent" />
-          {side === "source" ? t("landing.beforeAfter.sourceItem2") : t("landing.beforeAfter.targetItem2")}
-        </li>
-      </ul>
-      <div className="mt-auto flex items-center justify-between border-t border-black/[0.06] pt-4 dark:border-white/[0.08]">
-        <span className="font-mono text-[10px] uppercase tracking-wider text-brand-dark/60 dark:text-white/60">cahier-des-charges.docx</span>
-        <span className="font-mono text-[10px] uppercase tracking-wider text-brand-dark/60 dark:text-white/60">3 pages · 2 481 mots</span>
-      </div>
-    </div>
-  );
-
   return (
-    <section id="fidelity" className="px-4 py-32 bg-brand-muted/20 dark:bg-[#1a1a1a]/20 border-y border-black/5 dark:border-white/5">
-      <div className="mx-auto max-w-7xl">
-        <div className="mb-16 text-center">
-          <h2 className="mb-8 font-serif text-4xl font-medium leading-tight tracking-tight text-brand-dark dark:text-white md:text-6xl">
-            {t("landing.layout.title")}<br /> <span className="italic">{t("landing.layout.title2")}</span>
+    <section id="fidelity" className="py-28 px-6 bg-brand-dark text-white relative overflow-hidden">
+      {/* Lueur dorée centrale */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[350px] bg-brand-accent/15 blur-[120px] pointer-events-none" />
+
+      <div className="max-w-7xl mx-auto relative z-10">
+        <div className="text-center mb-16">
+          <span className="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/20 text-brand-accent mb-4 border border-brand-accent/30">
+            {t("landing.layout.title")}
+          </span>
+          <h2 className="text-4xl sm:text-6xl font-serif font-medium tracking-tight mb-4">
+            {t("landing.layout.title")} <span className="italic text-brand-accent">{t("landing.layout.title2")}</span>
           </h2>
-          <p className="mx-auto max-w-2xl text-xl font-light tracking-wide text-brand-dark/60 dark:text-white/60">
+          <p className="text-white/70 text-lg max-w-2xl mx-auto font-light">
             {t("landing.layout.subtitle")}
           </p>
         </div>
 
-        <div className="relative grid gap-6 md:grid-cols-2 md:gap-10">
-          <DocPage side="source" />
-          <DocPage side="target" />
-
-          {/* sceau central : la promesse, entre les deux pages */}
-          <div className="pointer-events-none absolute inset-0 hidden items-center justify-center md:flex">
-            <div className="flex items-center gap-2 rounded-full border border-brand-accent/40 bg-white dark:bg-[#0a0a0a] px-5 py-2.5 shadow-2xl">
-              <CheckCircle2 size={14} className="text-brand-goldink dark:text-brand-accent" />
-              <span className="text-[10px] font-black uppercase tracking-widest text-brand-goldink dark:text-brand-accent">
-                {t("landing.beforeAfter.seal")}
+        {/* Comparaison 2 colonnes */}
+        <div className="grid md:grid-cols-2 gap-8 relative">
+          
+          {/* Document Source FR */}
+          <div className="bg-[#1e1e1e] p-8 sm:p-10 rounded-3xl border border-white/10 shadow-2xl">
+            <div className="flex items-center justify-between mb-6">
+              <span className="px-3 py-1 rounded-full text-[10px] font-bold font-mono uppercase bg-white/10 text-white/80 border border-white/15">
+                FR — Original
               </span>
+              <span className="text-xs text-white/50 font-mono">cahier-des-charges.docx</span>
+            </div>
+
+            <h4 className="text-2xl font-serif font-bold text-white mb-4">
+              {t("landing.beforeAfter.sourceTitle")}
+            </h4>
+            <p className="text-sm text-white/80 leading-relaxed mb-4">
+              {t("landing.beforeAfter.sourcePara1")}
+            </p>
+            <p className="text-sm text-white/80 leading-relaxed mb-6">
+              {t("landing.beforeAfter.sourcePara2Before")}{" "}
+              <strong className="font-bold text-brand-accent">{t("landing.beforeAfter.sourceTerm")}</strong>{" "}
+              {t("landing.beforeAfter.sourcePara2After")}
+            </p>
+            <div className="p-4 rounded-xl bg-black/40 border border-white/10 text-xs text-white/90 space-y-2">
+              <div className="flex justify-between">
+                <span>{t("landing.beforeAfter.sourceItem1")}</span>
+                <strong className="text-brand-accent font-mono">42 kW</strong>
+              </div>
+              <div className="flex justify-between">
+                <span>{t("landing.beforeAfter.sourceItem2")}</span>
+                <strong className="text-brand-accent font-mono">&le; 45 dB(A)</strong>
+              </div>
+            </div>
+          </div>
+
+          {/* Document Traduit EN */}
+          <div className="bg-[#1e1e1e] p-8 sm:p-10 rounded-3xl border border-brand-accent/40 shadow-2xl relative">
+            <div className="flex items-center justify-between mb-6">
+              <span className="px-3 py-1 rounded-full text-[10px] font-bold font-mono uppercase bg-brand-accent/20 text-brand-accent border border-brand-accent/40">
+                EN — Traduit (Wordly)
+              </span>
+              <span className="text-xs text-brand-accent font-mono font-bold">100% Alignement</span>
+            </div>
+
+            <h4 className="text-2xl font-serif font-bold text-white mb-4">
+              {t("landing.beforeAfter.targetTitle")}
+            </h4>
+            <p className="text-sm text-white/80 leading-relaxed mb-4">
+              {t("landing.beforeAfter.targetPara1")}
+            </p>
+            <p className="text-sm text-white/80 leading-relaxed mb-6">
+              {t("landing.beforeAfter.targetPara2Before")}{" "}
+              <strong className="font-bold text-brand-accent">{t("landing.beforeAfter.targetTerm")}</strong>{" "}
+              {t("landing.beforeAfter.targetPara2After")}
+            </p>
+            <div className="p-4 rounded-xl bg-black/40 border border-brand-accent/30 text-xs text-white/90 space-y-2">
+              <div className="flex justify-between">
+                <span>{t("landing.beforeAfter.targetItem1")}</span>
+                <strong className="text-brand-accent font-mono">42 kW</strong>
+              </div>
+              <div className="flex justify-between">
+                <span>{t("landing.beforeAfter.targetItem2")}</span>
+                <strong className="text-brand-accent font-mono">&le; 45 dB(A)</strong>
+              </div>
             </div>
           </div>
         </div>
 
-        {/* trois preuves précises, pas des promesses vagues */}
-        <div className="mt-14 grid gap-4 sm:grid-cols-3">
-          {[
-            { icon: <Layout size={16} />, label: t("landing.beforeAfter.proof1") },
-            { icon: <PieChart size={16} />, label: t("landing.beforeAfter.proof2") },
-            { icon: <MessageSquare size={16} />, label: t("landing.beforeAfter.proof3") },
-          ].map((proof, i) => (
-            <div key={i} className="flex items-center gap-3 rounded-2xl border border-black/10 dark:border-white/10 bg-white/80 dark:bg-white/5 px-5 py-4 shadow-sm">
-              <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-brand-accent/30 bg-brand-accent/10 text-brand-goldink dark:text-brand-accent">
-                {proof.icon}
-              </span>
-              <span className="text-sm font-medium text-brand-dark/80 dark:text-white/75">{proof.label}</span>
+        {/* 3 Cartes de preuves */}
+        <div className="grid sm:grid-cols-3 gap-5 mt-10">
+          <div className="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
+            <div className="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
+              <Layout size={20} />
             </div>
-          ))}
+            <span className="text-sm font-medium text-white/90">{t("landing.beforeAfter.proof1")}</span>
+          </div>
+
+          <div className="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
+            <div className="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
+              <PieChart size={20} />
+            </div>
+            <span className="text-sm font-medium text-white/90">{t("landing.beforeAfter.proof2")}</span>
+          </div>
+
+          <div className="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
+            <div className="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
+              <TableIcon size={20} />
+            </div>
+            <span className="text-sm font-medium text-white/90">{t("landing.beforeAfter.proof3")}</span>
+          </div>
         </div>
       </div>
     </section>
@@ -309,34 +392,40 @@ const LayoutFeatures = () => {
 const FormatsSection = () => {
   const { t } = useI18n();
   const formats = [
-    { id: ".DOCX", name: t('landing.formats.word.name'), icon: <FileText className="text-brand-dark/60 dark:text-white/60" />, items: [t('landing.formats.word.i1'), t('landing.formats.word.i2'), t('landing.formats.word.i3'), t('landing.formats.word.i4')] },
-    { id: ".XLSX", name: t('landing.formats.excel.name'), icon: <FileSpreadsheet className="text-brand-dark/60 dark:text-white/60" />, items: [t('landing.formats.excel.i1'), t('landing.formats.excel.i2'), t('landing.formats.excel.i3'), t('landing.formats.excel.i4')] },
-    { id: ".PPTX", name: t('landing.formats.pptx.name'), icon: <Presentation className="text-brand-dark/60 dark:text-white/60" />, items: [t('landing.formats.pptx.i1'), t('landing.formats.pptx.i2'), t('landing.formats.pptx.i3'), t('landing.formats.pptx.i4')] },
-    { id: ".PDF", name: t('landing.formats.pdf.name'), icon: <FileText className="text-brand-dark/60 dark:text-white/60" />, items: [t('landing.formats.pdf.i1'), t('landing.formats.pdf.i2'), t('landing.formats.pdf.i3'), t('landing.formats.pdf.i4')] },
+    { id: ".DOCX", name: t('landing.formats.word.name'), color: "text-[#185ABD]", bg: "bg-[#185ABD]/10", icon: <FileText className="w-6 h-6 text-[#185ABD]" />, items: [t('landing.formats.word.i1'), t('landing.formats.word.i2'), t('landing.formats.word.i3'), t('landing.formats.word.i4')] },
+    { id: ".XLSX", name: t('landing.formats.excel.name'), color: "text-[#107C41]", bg: "bg-[#107C41]/10", icon: <FileSpreadsheet className="w-6 h-6 text-[#107C41]" />, items: [t('landing.formats.excel.i1'), t('landing.formats.excel.i2'), t('landing.formats.excel.i3'), t('landing.formats.excel.i4')] },
+    { id: ".PPTX", name: t('landing.formats.pptx.name'), color: "text-[#C43E1C]", bg: "bg-[#C43E1C]/10", icon: <Presentation className="w-6 h-6 text-[#C43E1C]" />, items: [t('landing.formats.pptx.i1'), t('landing.formats.pptx.i2'), t('landing.formats.pptx.i3'), t('landing.formats.pptx.i4')] },
+    { id: ".PDF", name: t('landing.formats.pdf.name'), color: "text-[#E03E2D]", bg: "bg-[#E03E2D]/10", icon: <FileText className="w-6 h-6 text-[#E03E2D]" />, items: [t('landing.formats.pdf.i1'), t('landing.formats.pdf.i2'), t('landing.formats.pdf.i3'), t('landing.formats.pdf.i4')] },
   ];
 
   return (
-    <section id="formats" className="py-40 px-4">
+    <section id="formats" className="py-28 px-6">
       <div className="max-w-7xl mx-auto">
-        <div className="mb-24">
-          <span className="accent-pill mb-6 block w-fit">{t('landing.formats.pill')}</span>
-          <h2 className="text-4xl md:text-5xl text-brand-dark dark:text-white mb-6 leading-tight font-serif font-medium tracking-tight">{t('landing.formats.title')} <span className="italic">{t('landing.formats.title2')}</span></h2>
-          <p className="text-brand-dark/60 dark:text-white/60 max-w-xl text-lg font-light">{t('landing.formats.subtitle')}</p>
+        <div className="text-center mb-20">
+          <span className="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
+            {t('landing.formats.pill')}
+          </span>
+          <h2 className="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
+            {t('landing.formats.title')} <span className="italic text-brand-goldink dark:text-brand-accent">{t('landing.formats.title2')}</span>
+          </h2>
+          <p className="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
+            {t('landing.formats.subtitle')}
+          </p>
         </div>
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
           {formats.map((f, i) => (
-            <div key={i} className="editorial-card p-10 group">
-              <div className="flex justify-between items-start mb-10">
-                <div className="w-12 h-12 bg-brand-muted dark:bg-[#1f1f1f] rounded-xl flex items-center justify-center text-xl group-hover:bg-brand-dark dark:group-hover:bg-brand-accent group-hover:text-white dark:group-hover:text-brand-dark transition-all">
-                  {f.icon}
-                </div>
-                <span className="text-[10px] font-bold text-brand-dark/50 dark:text-white/50 uppercase tracking-[0.2em]">{f.id}</span>
+            <div key={i} className="luxury-card p-8 rounded-3xl group">
+              <div className={`w-12 h-12 rounded-2xl ${f.bg} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
+                {f.icon}
               </div>
-              <h3 className="text-xl font-serif font-medium mb-6 text-brand-dark dark:text-white tracking-tight">{f.name}</h3>
-              <ul className="space-y-4">
+              <div className={`text-[11px] font-bold font-mono ${f.color} mb-2 uppercase tracking-wider`}>{f.id}</div>
+              <h3 className="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-4">{f.name}</h3>
+              <ul className="space-y-2.5 text-xs text-brand-dark/75 dark:text-white/70 font-medium">
                 {f.items.map((item, j) => (
-                  <li key={j} className="flex items-start gap-3 text-xs text-brand-dark/60 dark:text-white/60 font-medium">
-                    <div className="w-1 h-1 bg-brand-accent rounded-full mt-1.5 shrink-0 opacity-40"></div> {item}
+                  <li key={j} className="flex items-center gap-2">
+                    <Check size={14} className="text-emerald-500 shrink-0" />
+                    <span>{item}</span>
                   </li>
                 ))}
               </ul>
@@ -351,8 +440,6 @@ const FormatsSection = () => {
 const PricingSection = () => {
   const { t } = useI18n();
   const [isAnnual, setIsAnnual] = useState(true);
-  // Prices come from the same live endpoint as /pricing (admin-configurable);
-  // the hardcoded values below are only a fallback while it loads or fails.
   const [livePrices, setLivePrices] = useState<Record<string, { monthly: number; annualMonthly: number }>>({});
 
   useEffect(() => {
@@ -384,56 +471,107 @@ const PricingSection = () => {
 
   const plans = [
     { id: 'starter', name: t('landing.pricing.starter.name'), desc: t('landing.pricing.starter.desc'), monthlyPrice: 9, annualPrice: 7, features: [t('landing.pricing.starter.f1'), t('landing.pricing.starter.f2'), t('landing.pricing.starter.f3'), t('landing.pricing.starter.f4')], cta: t('landing.pricing.starter.cta'), popular: false },
-    { id: 'pro', name: t('landing.pricing.pro.name'), desc: t('landing.pricing.pro.desc'), monthlyPrice: 19, annualPrice: 15, features: [t('landing.pricing.pro.f1'), t('landing.pricing.pro.f2'), t('landing.pricing.pro.f3'), t('landing.pricing.pro.f4'), t('landing.pricing.pro.f5'), t('landing.pricing.pro.f6')], cta: t('landing.pricing.pro.cta'), popular: true },
-    { id: 'business', name: t('landing.pricing.business.name'), desc: t('landing.pricing.business.desc'), monthlyPrice: 49, annualPrice: 39, features: [t('landing.pricing.business.f1'), t('landing.pricing.business.f2'), t('landing.pricing.business.f3'), t('landing.pricing.business.f4'), t('landing.pricing.business.f5'), t('landing.pricing.business.f6')], cta: t('landing.pricing.business.cta'), popular: false },
+    { id: 'pro', name: t('landing.pricing.pro.name'), desc: t('landing.pricing.pro.desc'), monthlyPrice: 19, annualPrice: 15, features: [t('landing.pricing.pro.f1'), t('landing.pricing.pro.f2'), t('landing.pricing.pro.f3'), t('landing.pricing.pro.f4'), t('landing.pricing.pro.f5')], cta: t('landing.pricing.pro.cta'), popular: true },
+    { id: 'business', name: t('landing.pricing.business.name'), desc: t('landing.pricing.business.desc'), monthlyPrice: 49, annualPrice: 39, features: [t('landing.pricing.business.f1'), t('landing.pricing.business.f2'), t('landing.pricing.business.f3'), t('landing.pricing.business.f4')], cta: t('landing.pricing.business.cta'), popular: false },
   ];
 
   return (
-    <section id="pricing" className="py-40 px-4 bg-brand-bg dark:bg-[#0a0a0a]">
+    <section id="pricing" className="py-28 px-6 bg-brand-muted/40 dark:bg-[#121212]/40">
       <div className="max-w-7xl mx-auto">
-        <div className="text-center mb-24">
-          <h2 className="text-4xl md:text-5xl mb-8 leading-tight text-brand-dark dark:text-white font-serif font-medium tracking-tight">{t('landing.pricing.title')}</h2>
-          <p className="text-brand-dark/60 dark:text-white/60 text-xl font-light max-w-2xl mx-auto">{t('landing.pricing.subtitle')}</p>
+        <div className="text-center mb-16">
+          <span className="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
+            {t('landing.nav.pricing')}
+          </span>
+          <h2 className="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
+            {t('landing.pricing.title')}
+          </h2>
+          <p className="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
+            {t('landing.pricing.subtitle')}
+          </p>
+
+          {/* Bascule Mensuel / Annuel */}
+          <div className="inline-flex items-center gap-3 p-1.5 rounded-2xl bg-white dark:bg-[#222] border border-black/10 dark:border-white/10 mt-8 shadow-xs">
+            <button
+              onClick={() => setIsAnnual(false)}
+              className={`px-5 py-2 rounded-xl text-xs font-bold uppercase tracking-wider transition-all ${!isAnnual ? 'bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark shadow-sm' : 'text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white'}`}
+            >
+              {t('landing.pricing.monthly')}
+            </button>
+            <button
+              onClick={() => setIsAnnual(true)}
+              className={`px-5 py-2 rounded-xl text-xs font-bold uppercase tracking-wider transition-all flex items-center gap-1.5 ${isAnnual ? 'bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark shadow-sm' : 'text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white'}`}
+            >
+              <span>{t('landing.pricing.annual')}</span>
+              <span className="px-1.5 py-0.5 rounded-full text-[9px] bg-brand-accent dark:bg-brand-dark text-brand-dark dark:text-brand-accent font-black">-20%</span>
+            </button>
+          </div>
         </div>
 
-        <div className="flex items-center justify-center gap-12 mb-32">
-          <button onClick={() => setIsAnnual(false)} className={`text-sm font-bold uppercase tracking-widest transition-all ${!isAnnual ? 'text-brand-dark dark:text-white underline underline-offset-8' : 'text-brand-dark/55 dark:text-white/55 hover:text-brand-dark dark:hover:text-white'}`}>
-            {t('landing.pricing.monthly')}
-          </button>
-          <button onClick={() => setIsAnnual(true)} className={`text-sm font-bold uppercase tracking-widest transition-all relative ${isAnnual ? 'text-brand-dark dark:text-white underline underline-offset-8' : 'text-brand-dark/55 dark:text-white/55 hover:text-brand-dark dark:hover:text-white'}`}>
-            {t('landing.pricing.annual')}
-            <span className="absolute -top-6 left-1/2 -translate-x-1/2 text-[10px] font-bold text-brand-goldink dark:text-brand-accent whitespace-nowrap italic">
-              (-20%)
-            </span>
-          </button>
-        </div>
-
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-black/5 dark:bg-white/5 rounded-[40px] overflow-hidden border border-black/5 dark:border-white/5">
+        <div className="grid md:grid-cols-3 gap-8 items-stretch">
           {plans.map((p, i) => (
-            <div key={i} className="p-16 bg-white dark:bg-[#141414] flex flex-col text-left transition-all duration-500 hover:z-10 hover:shadow-2xl hover:scale-[1.01]">
-              <h3 className="text-2xl font-serif font-medium mb-2 text-brand-dark dark:text-white tracking-tight">{p.name}</h3>
-              <p className="text-brand-dark/60 dark:text-white/60 text-xs font-light mb-14 tracking-widest uppercase">{p.desc}</p>
+            p.popular ? (
+              <div key={i} className="popular-glow rounded-3xl">
+                <div className="luxury-card p-8 sm:p-10 rounded-3xl h-full flex flex-col justify-between bg-gradient-to-b from-white to-amber-50/20 dark:from-[#222] dark:to-[#181818] border-brand-accent relative">
+                  <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark text-[10px] font-black uppercase tracking-widest shadow-md">
+                    ★ {t('landing.pricing.bestValue')}
+                  </div>
 
-              <div className="mb-14">
-                <span className="text-5xl font-serif font-medium leading-none text-brand-dark dark:text-white">{priceFor(p.id, p.monthlyPrice, p.annualPrice)} €</span>
-                <span className="text-brand-dark/55 dark:text-white/55 font-light ml-2 uppercase text-[10px] tracking-[0.2em]">/ {t('landing.pricing.month')}</span>
+                  <div>
+                    <h3 className="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-2">{p.name}</h3>
+                    <p className="text-xs text-brand-goldink dark:text-brand-accent font-bold uppercase tracking-widest mb-8">{p.desc}</p>
+                    
+                    <div className="flex items-baseline gap-2 mb-8">
+                      <span className="text-5xl font-serif font-bold text-brand-dark dark:text-white">{priceFor(p.id, p.monthlyPrice, p.annualPrice)} €</span>
+                      <span className="text-xs text-brand-dark/60 dark:text-white/60">/ {t('landing.pricing.month')}</span>
+                    </div>
+
+                    <ul className="space-y-4 text-xs text-brand-dark/90 dark:text-white/90 mb-10 font-medium">
+                      {p.features.map((f, j) => (
+                        <li key={j} className="flex items-center gap-3">
+                          <CheckCircle2 size={16} className="text-brand-goldink dark:text-brand-accent shrink-0" />
+                          <span>{f}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+
+                  <Link
+                    href={`/pricing?plan=${p.id}${isAnnual ? '&billing=yearly' : ''}`}
+                    className="w-full py-4 rounded-xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark text-center text-xs font-bold uppercase tracking-widest shadow-xl hover:shadow-2xl hover:scale-[1.02] transition-all block"
+                  >
+                    {p.cta}
+                  </Link>
+                </div>
               </div>
+            ) : (
+              <div key={i} className="luxury-card p-8 sm:p-10 rounded-3xl flex flex-col justify-between">
+                <div>
+                  <h3 className="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-2">{p.name}</h3>
+                  <p className="text-xs text-brand-dark/60 dark:text-white/60 uppercase tracking-widest mb-8">{p.desc}</p>
+                  
+                  <div className="flex items-baseline gap-2 mb-8">
+                    <span className="text-5xl font-serif font-bold text-brand-dark dark:text-white">{priceFor(p.id, p.monthlyPrice, p.annualPrice)} €</span>
+                    <span className="text-xs text-brand-dark/60 dark:text-white/60">/ {t('landing.pricing.month')}</span>
+                  </div>
 
-              <ul className="space-y-6 mb-16 flex-grow">
-                {p.features.map((f, j) => (
-                  <li key={j} className="flex items-start gap-4 text-sm text-brand-dark/80 dark:text-white/80 font-normal leading-snug">
-                    <div className="w-1 h-1 rounded-full bg-brand-accent mt-2 shrink-0"></div> <span>{f}</span>
-                  </li>
-                ))}
-              </ul>
+                  <ul className="space-y-4 text-xs text-brand-dark/80 dark:text-white/80 mb-10">
+                    {p.features.map((f, j) => (
+                      <li key={j} className="flex items-center gap-3">
+                        <Check size={16} className="text-emerald-500 shrink-0" />
+                        <span>{f}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
 
-              <Link
-                href={p.popular ? "/auth/register" : `/pricing?plan=${p.id}${isAnnual ? '&billing=yearly' : ''}`}
-                className={`w-full py-4 rounded-2xl text-xs font-bold uppercase tracking-widest transition-all leading-none text-center block ${p.popular ? 'bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark shadow-xl' : 'bg-transparent text-brand-dark dark:text-white border border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5'}`}
-              >
-                {p.cta}
-              </Link>
-            </div>
+                <Link
+                  href={`/pricing?plan=${p.id}${isAnnual ? '&billing=yearly' : ''}`}
+                  className="w-full py-3.5 rounded-xl border border-black/15 dark:border-white/15 text-center text-xs font-bold uppercase tracking-widest hover:bg-black/5 dark:hover:bg-white/5 transition-all text-brand-dark dark:text-white block"
+                >
+                  {p.cta}
+                </Link>
+              </div>
+            )
           ))}
         </div>
 
@@ -446,19 +584,24 @@ const PricingSection = () => {
 const CTASection = () => {
   const { t } = useI18n();
   return (
-    <section className="py-40 px-4 text-center">
-      <div className="max-w-4xl mx-auto">
-        <h2 className="text-5xl md:text-7xl text-brand-dark dark:text-white mb-10 leading-tight tracking-tight font-serif font-medium">
+    <section className="py-28 px-6 text-center relative overflow-hidden">
+      <div className="max-w-4xl mx-auto luxury-card p-12 sm:p-20 rounded-[40px] relative overflow-hidden border-brand-accent/30">
+        <div className="absolute -top-24 -right-24 w-72 h-72 bg-brand-accent/20 rounded-full blur-3xl pointer-events-none" />
+
+        <h2 className="text-4xl sm:text-6xl font-serif font-bold text-brand-dark dark:text-white tracking-tight mb-6">
           {t('landing.cta.title')}
         </h2>
-        <p className="text-lg text-brand-dark/60 dark:text-white/60 mb-16 font-light">
+        <p className="text-brand-dark/75 dark:text-white/70 text-base sm:text-lg max-w-xl mx-auto font-light leading-relaxed mb-10">
           {t('landing.cta.subtitle')}
         </p>
-        <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
-          <Link href="/auth/register" className="premium-button px-16 py-6 text-lg inline-block text-center rounded-[32px]">
-            {t('landing.cta.button')}
-          </Link>
-        </div>
+
+        <Link
+          href="/auth/register"
+          className="inline-flex items-center gap-3 px-10 py-5 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark font-bold text-xs uppercase tracking-widest shadow-2xl hover:scale-105 transition-all"
+        >
+          <span>{t('landing.cta.button')}</span>
+          <ArrowRight size={16} />
+        </Link>
       </div>
     </section>
   );
@@ -467,43 +610,31 @@ const CTASection = () => {
 const Footer = () => {
   const { t } = useI18n();
   return (
-    <footer className="bg-brand-muted/30 dark:bg-[#1f1f1f]/30 pt-40 pb-20 px-6">
-      <div className="max-w-7xl mx-auto">
-        <div className="grid md:grid-cols-12 gap-20 mb-40">
-          <div className="md:col-span-12 lg:col-span-6">
-            <Logo />
-            <p className="text-brand-dark/60 dark:text-white/60 text-lg font-medium mt-12 mb-12 max-w-sm leading-relaxed uppercase tracking-widest">
-              {t('landing.footer.desc')}
-            </p>
+    <footer className="border-t border-black/10 dark:border-white/10 bg-white dark:bg-[#0a0a0a] py-16 px-6">
+      <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 bg-brand-dark dark:bg-brand-accent rounded-lg flex items-center justify-center text-white dark:text-brand-dark font-serif font-bold text-base">
+            W
           </div>
-
-          <div className="md:col-span-4 lg:col-span-2">
-            <h4 className="text-[10px] font-bold uppercase tracking-[0.3em] text-brand-dark dark:text-white mb-10">{t('landing.footer.product')}</h4>
-            <ul className="space-y-6 text-xs text-brand-dark/60 dark:text-white/60 font-bold uppercase tracking-widest leading-none">
-              <li><a href="#features" className="hover:text-brand-dark dark:hover:text-white transition-colors">{t('landing.nav.why')}</a></li>
-              <li><a href="#formats" className="hover:text-brand-dark dark:hover:text-white transition-colors">{t('landing.nav.formats')}</a></li>
-              <li><a href="#pricing" className="hover:text-brand-dark dark:hover:text-white transition-colors">{t('landing.nav.pricing')}</a></li>
-            </ul>
-          </div>
-
+          <span className="font-bold text-lg text-brand-dark dark:text-white">
+            Wordly<span className="text-brand-goldink dark:text-brand-accent">.art</span>
+          </span>
         </div>
 
-        <div className="pt-10 border-t border-black/5 dark:border-white/5 flex flex-col md:flex-row justify-between items-center gap-10">
-          <div className="text-[10px] font-bold text-brand-dark/50 dark:text-white/50 uppercase tracking-[0.4em]">
-            {t('landing.footer.rights')}
-          </div>
-          <div className="flex items-center gap-6">
-            <button
-              type="button"
-              onClick={() => import('@/components/ui/cookie-consent').then(m => m.reopenCookieConsent())}
-              className="text-[10px] font-bold text-brand-dark/50 dark:text-white/50 uppercase tracking-[0.2em] hover:text-brand-dark dark:hover:text-white transition-colors"
-            >
-              {t('cookieConsent.reopen')}
-            </button>
-            <div className="text-[10px] font-mono text-brand-dark/55 dark:text-white/55 uppercase tracking-widest">
-              wordly.art
-            </div>
-          </div>
+        <div className="text-xs text-brand-dark/60 dark:text-white/60 uppercase tracking-widest font-mono">
+          © 2026 Wordly.art • Traduction certifiée haute fidélité
+        </div>
+
+        <div className="flex items-center gap-6 text-xs font-bold text-brand-dark/70 dark:text-white/70 uppercase tracking-wider">
+          <Link href="/privacy" className="hover:text-brand-dark dark:hover:text-white">Confidentialité</Link>
+          <a href="#pricing" className="hover:text-brand-dark dark:hover:text-white">Tarifs</a>
+          <button
+            type="button"
+            onClick={() => import('@/components/ui/cookie-consent').then(m => m.reopenCookieConsent())}
+            className="hover:text-brand-dark dark:hover:text-white transition-colors cursor-pointer"
+          >
+            {t('cookieConsent.reopen')}
+          </button>
         </div>
       </div>
     </footer>
@@ -516,6 +647,7 @@ export default function LandingPage() {
       <Navbar />
       <main>
         <Hero />
+        <MetricsBanner />
         <Steps />
         <FeaturesContext />
         <LayoutFeatures />
@@ -527,3 +659,4 @@ export default function LandingPage() {
     </div>
   );
 }
+
diff --git a/preview_landing.html b/preview_landing.html
new file mode 100644
index 0000000..e190d7e
--- /dev/null
+++ b/preview_landing.html
@@ -0,0 +1,850 @@
+<!DOCTYPE html>
+<html lang="fr" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wordly.art — Traduction de documents sans altérer la mise en page</title>
+  
+  <!-- Fonts Google -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
+  
+  <!-- Tailwind CSS CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  
+  <!-- Lucide Icons -->
+  <script src="https://unpkg.com/lucide@latest"></script>
+
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['Inter', 'sans-serif'],
+            serif: ['Playfair Display', 'Georgia', 'serif'],
+            mono: ['JetBrains Mono', 'monospace'],
+          },
+          colors: {
+            brand: {
+              bg: '#FDFCF9',
+              dark: '#141414',
+              accent: '#C5A17A',
+              goldink: '#8B6F47',
+              muted: '#F5F3EF',
+            }
+          }
+        }
+      }
+    }
+  </script>
+
+  <style>
+    /* Ambient Glow & Mesh effects */
+    .hero-glow {
+      background: radial-gradient(circle at 50% 18%, rgba(197, 161, 122, 0.22) 0%, rgba(197, 161, 122, 0.08) 35%, transparent 70%);
+    }
+    .dark .hero-glow {
+      background: radial-gradient(circle at 50% 18%, rgba(197, 161, 122, 0.18) 0%, rgba(197, 161, 122, 0.04) 40%, transparent 75%);
+    }
+
+    .gradient-text-gold {
+      background: linear-gradient(135deg, #1A1A1A 0%, #8B6F47 50%, #C5A17A 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .dark .gradient-text-gold {
+      background: linear-gradient(135deg, #FFFFFF 0%, #E8D5C0 50%, #C5A17A 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .luxury-card {
+      background: rgba(255, 255, 255, 0.85);
+      backdrop-filter: blur(16px);
+      border: 1px solid rgba(0, 0, 0, 0.07);
+      box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.07);
+      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    .luxury-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 30px 60px -15px rgba(139, 111, 71, 0.15);
+      border-color: rgba(197, 161, 122, 0.4);
+    }
+
+    .dark .luxury-card {
+      background: rgba(24, 24, 24, 0.8);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.5);
+    }
+    .dark .luxury-card:hover {
+      border-color: rgba(197, 161, 122, 0.5);
+      box-shadow: 0 30px 60px -15px rgba(197, 161, 122, 0.2);
+    }
+
+    .popular-glow {
+      position: relative;
+    }
+    .popular-glow::before {
+      content: '';
+      position: absolute;
+      inset: -2px;
+      border-radius: 34px;
+      background: linear-gradient(135deg, #C5A17A, #8B6F47, #C5A17A);
+      z-index: -1;
+      opacity: 0.85;
+      filter: blur(8px);
+    }
+
+    /* Floating Pill Badge */
+    .floating-badge {
+      animation: floatSlow 6s ease-in-out infinite alternate;
+    }
+    .floating-badge-delayed {
+      animation: floatSlow 6s ease-in-out infinite alternate 3s;
+    }
+    @keyframes floatSlow {
+      0% { transform: translateY(0px) rotate(0deg); }
+      100% { transform: translateY(-10px) rotate(1deg); }
+    }
+
+    /* Laser Scanner Beam */
+    @keyframes laserScan {
+      0% { top: 0%; opacity: 0; }
+      10% { opacity: 1; }
+      90% { opacity: 1; }
+      100% { top: 100%; opacity: 0; }
+    }
+    .laser-beam {
+      animation: laserScan 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    }
+  </style>
+</head>
+<body class="bg-brand-bg text-brand-dark dark:bg-[#0d0d0d] dark:text-white antialiased selection:bg-brand-accent/20 transition-colors duration-300">
+
+  <!-- ================================================================ -->
+  <!-- NAVBAR HAUT DE GAMME                                             -->
+  <!-- ================================================================ -->
+  <header class="fixed top-0 left-0 right-0 z-50 bg-brand-bg/85 dark:bg-[#0d0d0d]/85 backdrop-blur-xl border-b border-black/5 dark:border-white/5 transition-colors">
+    <div class="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
+      
+      <!-- Logo -->
+      <a href="#" class="flex items-center gap-3.5 group">
+        <div class="w-10 h-10 bg-gradient-to-br from-brand-dark to-[#333] dark:from-brand-accent dark:to-[#8B6F47] rounded-xl flex items-center justify-center text-white dark:text-brand-dark font-serif font-bold text-xl shadow-lg shadow-black/10 group-hover:scale-105 transition-transform">
+          W
+        </div>
+        <span class="text-2xl font-bold tracking-tight text-brand-dark dark:text-white">
+          Wordly<span class="text-brand-goldink dark:text-brand-accent">.art</span>
+        </span>
+      </a>
+
+      <!-- Menu Navigation -->
+      <nav class="hidden md:flex items-center space-x-9">
+        <a href="#how" class="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">Fonctionnement</a>
+        <a href="#fidelity" class="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">Fidélité visuelle</a>
+        <a href="#formats" class="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">Formats</a>
+        <a href="#pricing" class="text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-goldink dark:hover:text-brand-accent transition-colors">Tarification</a>
+      </nav>
+
+      <!-- Actions Droite -->
+      <div class="flex items-center gap-4">
+        <!-- Bouton Bascule Mode Sombre / Clair -->
+        <button id="themeToggle" class="p-2.5 rounded-full border border-black/10 dark:border-white/10 text-brand-dark/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/5 transition-all" title="Changer de thème">
+          <i data-lucide="moon" class="w-4 h-4 dark:hidden"></i>
+          <i data-lucide="sun" class="w-4 h-4 hidden dark:block text-brand-accent"></i>
+        </button>
+
+        <a href="#" class="hidden sm:inline-block text-xs font-bold uppercase tracking-widest text-brand-dark/70 dark:text-white/70 hover:text-brand-dark dark:hover:text-white transition-colors">
+          Connexion
+        </a>
+        
+        <a href="#pricing" class="relative group overflow-hidden rounded-xl bg-brand-dark dark:bg-brand-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white dark:text-brand-dark shadow-lg shadow-black/15 dark:shadow-brand-accent/20 hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
+          <span class="relative z-10 flex items-center gap-2">
+            <span>Essai gratuit</span>
+            <i data-lucide="arrow-right" class="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform"></i>
+          </span>
+        </a>
+      </div>
+    </div>
+  </header>
+
+  <!-- ================================================================ -->
+  <!-- HERO SECTION : MAJESTUEUSE & LUMINEUSE                           -->
+  <!-- ================================================================ -->
+  <section class="relative pt-36 pb-20 md:pt-48 md:pb-32 px-4 hero-glow overflow-hidden">
+    
+    <!-- Éléments de fond décoratifs -->
+    <div class="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-tr from-brand-accent/20 to-amber-200/10 dark:from-brand-accent/15 dark:to-transparent rounded-full blur-3xl pointer-events-none -z-10"></div>
+
+    <div class="max-w-6xl mx-auto text-center relative z-10">
+      
+      <!-- Pastille / Pill -->
+      <div class="inline-flex items-center gap-2.5 px-4 py-1.5 mb-8 rounded-full border border-brand-accent/40 bg-brand-accent/10 dark:bg-brand-accent/5 backdrop-blur-md shadow-xs">
+        <span class="w-2 h-2 rounded-full bg-brand-goldink dark:bg-brand-accent animate-pulse"></span>
+        <span class="text-[11px] font-bold tracking-[0.25em] uppercase text-brand-goldink dark:text-brand-accent">
+          Wordly 2.0 • Traduction Office & PDF Haute Fidélité
+        </span>
+      </div>
+
+      <!-- Titre Grand Format -->
+      <h1 class="text-5xl sm:text-7xl md:text-8xl font-serif font-medium tracking-tight text-brand-dark dark:text-white leading-[1.08] mb-8">
+        Traduisez vos documents.<br>
+        <span class="italic gradient-text-gold font-serif">Mise en forme parfaite.</span>
+      </h1>
+
+      <!-- Sous-titre rassurant -->
+      <p class="max-w-2xl mx-auto text-lg sm:text-xl text-brand-dark/75 dark:text-white/70 font-light leading-relaxed mb-12">
+        Le seul traducteur qui préserve les SmartArt, tableaux, graphiques, en-têtes et règles de mise en page — exactement tels qu'ils étaient dans le document d'origine.
+      </p>
+
+      <!-- Boutons d'action -->
+      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20">
+        <a href="#pricing" class="w-full sm:w-auto px-9 py-4 rounded-2xl bg-brand-dark hover:bg-brand-goldink dark:bg-brand-accent dark:hover:bg-amber-400 text-white dark:text-brand-dark font-bold text-xs uppercase tracking-widest shadow-xl shadow-brand-dark/20 dark:shadow-brand-accent/25 hover:shadow-2xl hover:scale-[1.02] active:scale-98 transition-all flex items-center justify-center gap-2.5">
+          <i data-lucide="sparkles" class="w-4 h-4"></i>
+          <span>Démarrer l'essai gratuit</span>
+          <i data-lucide="arrow-right" class="w-4 h-4"></i>
+        </a>
+
+        <a href="#fidelity" class="w-full sm:w-auto px-8 py-4 rounded-2xl border border-black/15 dark:border-white/15 hover:border-brand-accent bg-white/70 dark:bg-white/5 backdrop-blur-md text-brand-dark dark:text-white font-bold text-xs uppercase tracking-widest hover:bg-black/5 dark:hover:bg-white/10 transition-all flex items-center justify-center gap-2">
+          <i data-lucide="eye" class="w-4 h-4 text-brand-goldink dark:text-brand-accent"></i>
+          <span>Voir la comparaison</span>
+        </a>
+      </div>
+
+      <!-- ============================================================ -->
+      <!-- SIMULATEUR BUREAUTIQUE AVEC PASTILLES FLOTTANTES             -->
+      <!-- ============================================================ -->
+      <div class="relative max-w-4xl mx-auto mt-6">
+        
+        <!-- Pastille Flottante 1 (Gauche) -->
+        <div class="hidden xl:flex floating-badge absolute -left-16 top-20 z-30 items-center gap-3 px-4 py-2.5 rounded-2xl bg-white/95 dark:bg-[#1f1f1f]/95 border border-brand-accent/40 shadow-2xl backdrop-blur-xl">
+          <div class="w-8 h-8 rounded-xl bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
+            <i data-lucide="check-check" class="w-4 h-4"></i>
+          </div>
+          <div class="text-left">
+            <div class="text-xs font-bold text-brand-dark dark:text-white">SmartArt & Formules</div>
+            <div class="text-[10px] text-brand-dark/60 dark:text-white/60 font-medium">100% Intacts et recalculés</div>
+          </div>
+        </div>
+
+        <!-- Pastille Flottante 2 (Droite) -->
+        <div class="hidden xl:flex floating-badge-delayed absolute -right-16 top-36 z-30 items-center gap-3 px-4 py-2.5 rounded-2xl bg-white/95 dark:bg-[#1f1f1f]/95 border border-brand-accent/40 shadow-2xl backdrop-blur-xl">
+          <div class="w-8 h-8 rounded-xl bg-blue-500/15 text-blue-600 dark:text-blue-400 flex items-center justify-center">
+            <i data-lucide="shield-check" class="w-4 h-4"></i>
+          </div>
+          <div class="text-left">
+            <div class="text-xs font-bold text-brand-dark dark:text-white">Rétention Zéro</div>
+            <div class="text-[10px] text-brand-dark/60 dark:text-white/60 font-medium">Données supprimées après export</div>
+          </div>
+        </div>
+
+        <!-- Halo d'ambiance doré sous la fenêtre -->
+        <div class="absolute -inset-2 bg-gradient-to-r from-brand-accent/30 via-amber-400/25 to-brand-accent/30 rounded-3xl blur-2xl opacity-70 -z-10"></div>
+
+        <!-- Cadre de Fenêtre Logicielle -->
+        <div class="rounded-2xl md:rounded-3xl border border-black/15 dark:border-white/15 bg-white dark:bg-[#181818] shadow-2xl overflow-hidden text-start">
+          
+          <!-- 1. Barre de Titre (Word Blue) -->
+          <div id="officeHeader" class="bg-[#185ABD] px-4 py-2.5 flex items-center justify-between text-white transition-colors duration-300">
+            <div class="flex items-center gap-3">
+              <div class="flex gap-1.5 pr-2 border-r border-white/20">
+                <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span>
+                <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span>
+                <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span>
+              </div>
+              <div class="flex items-center gap-2 font-mono text-xs font-bold">
+                <i data-lucide="file-text" class="w-4 h-4"></i>
+                <span id="windowDocTitle">Cahier_Des_Charges_Technique.docx — Word</span>
+              </div>
+            </div>
+
+            <!-- Boutons de contrôle -->
+            <div class="flex items-center gap-2 opacity-80">
+              <span class="text-[10px] font-mono bg-black/20 px-2 py-0.5 rounded">En direct • FR → EN</span>
+            </div>
+          </div>
+
+          <!-- 2. Ruban des formats -->
+          <div class="bg-[#F3F2F1] dark:bg-[#222222] border-b border-black/10 dark:border-white/10 px-4 py-2 flex flex-wrap items-center justify-between gap-3">
+            <div class="flex items-center gap-1.5">
+              <button onclick="switchFormat('docx')" class="fmt-tab px-3 py-1 rounded-lg text-xs font-bold font-mono bg-white dark:bg-[#333] text-[#185ABD] dark:text-white border border-black/10 dark:border-white/15 shadow-xs flex items-center gap-1.5">
+                <i data-lucide="file-text" class="w-3.5 h-3.5 text-[#185ABD]"></i> .DOCX
+              </button>
+              <button onclick="switchFormat('xlsx')" class="fmt-tab px-3 py-1 rounded-lg text-xs font-bold font-mono text-brand-dark/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-1.5">
+                <i data-lucide="file-spreadsheet" class="w-3.5 h-3.5 text-[#107C41]"></i> .XLSX
+              </button>
+              <button onclick="switchFormat('pptx')" class="fmt-tab px-3 py-1 rounded-lg text-xs font-bold font-mono text-brand-dark/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-1.5">
+                <i data-lucide="presentation" class="w-3.5 h-3.5 text-[#C43E1C]"></i> .PPTX
+              </button>
+              <button onclick="switchFormat('pdf')" class="fmt-tab px-3 py-1 rounded-lg text-xs font-bold font-mono text-brand-dark/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-1.5">
+                <i data-lucide="file-check" class="w-3.5 h-3.5 text-[#E03E2D]"></i> .PDF
+              </button>
+            </div>
+
+            <!-- Langues -->
+            <div class="flex items-center gap-2">
+              <span class="text-xs font-semibold text-[#8B6F47] dark:text-[#C5A17A]">Langue :</span>
+              <div class="flex rounded-lg bg-black/5 dark:bg-white/10 p-0.5 border border-black/10 dark:border-white/10 text-xs font-mono font-bold">
+                <button class="px-2.5 py-0.5 rounded bg-brand-accent text-white shadow-xs">FR</button>
+                <button class="px-2.5 py-0.5 text-brand-dark/60 dark:text-white/60">EN</button>
+                <button class="px-2.5 py-0.5 text-brand-dark/60 dark:text-white/60">ES</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 3. Plan de travail A4 avec document -->
+          <div class="p-4 sm:p-7 bg-[#EFECE6] dark:bg-[#111111] relative overflow-hidden flex justify-center">
+            
+            <div class="w-full max-w-3xl bg-[#FAF8F5] dark:bg-[#1e1e1e] p-6 sm:p-8 rounded-xl border border-black/10 dark:border-white/10 shadow-xl relative overflow-hidden">
+              
+              <!-- Faisceau laser scanner en continu -->
+              <div class="laser-beam absolute inset-x-0 h-[2px] bg-gradient-to-r from-transparent via-brand-accent to-transparent shadow-[0_0_15px_#C5A17A] pointer-events-none z-20"></div>
+
+              <!-- En-tête document -->
+              <div class="border-b border-black/10 dark:border-white/10 pb-4 mb-5">
+                <div class="flex justify-between items-center text-xs text-brand-dark/60 dark:text-white/60 font-mono mb-1">
+                  <span>SECTION 1 • STYLE : TITRE 1</span>
+                  <span>MARGES NORMALES (2,5 CM)</span>
+                </div>
+                <h3 class="text-xl sm:text-2xl font-serif font-bold text-brand-dark dark:text-white">
+                  Tarte fine aux pommes caramélisées & cannelle
+                </h3>
+                <p class="text-xs text-brand-goldink dark:text-brand-accent font-medium mt-1">
+                  Recette artisanale • 15 min préparation • 25 min cuisson 180°C
+                </p>
+              </div>
+
+              <!-- Tableau Word stylisé -->
+              <div class="grid sm:grid-cols-2 gap-5 text-xs mb-5">
+                <div class="p-3.5 rounded-lg bg-white dark:bg-[#282828] border border-[#185ABD]/20">
+                  <div class="font-bold text-[#185ABD] dark:text-[#74A9FF] mb-2 uppercase tracking-wider text-[10px]">
+                    Tableau 1 — Ingrédients & Dosages
+                  </div>
+                  <div class="space-y-1.5 text-brand-dark/80 dark:text-white/80">
+                    <div class="flex justify-between border-b border-black/5 dark:border-white/5 pb-1">
+                      <span>Pâte feuilletée pur beurre</span>
+                      <strong class="text-brand-goldink dark:text-brand-accent font-mono">1 rouleau</strong>
+                    </div>
+                    <div class="flex justify-between border-b border-black/5 dark:border-white/5 pb-1">
+                      <span>Pommes Golden tranchées</span>
+                      <strong class="text-brand-goldink dark:text-brand-accent font-mono">4 pièces</strong>
+                    </div>
+                    <div class="flex justify-between">
+                      <span>Beurre doux fondu</span>
+                      <strong class="text-brand-goldink dark:text-brand-accent font-mono">25 g</strong>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="p-3.5 rounded-lg bg-white dark:bg-[#282828] border border-[#185ABD]/20">
+                  <div class="font-bold text-[#185ABD] dark:text-[#74A9FF] mb-2 uppercase tracking-wider text-[10px]">
+                    Instructions de préparation
+                  </div>
+                  <ol class="space-y-1.5 text-brand-dark/80 dark:text-white/80 list-decimal pl-4 leading-relaxed">
+                    <li>Étaler la pâte sur la plaque et piquer le fond.</li>
+                    <li>Disposer les lamelles de pommes en rosace serrée.</li>
+                    <li>Enfourner 25 min à 180°C jusqu'à dorure parfaite.</li>
+                  </ol>
+                </div>
+              </div>
+
+              <div class="pt-3 border-t border-black/10 dark:border-white/10 flex justify-between items-center text-[10px] font-mono text-brand-dark/60 dark:text-white/60">
+                <span class="flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-bold">
+                  <i data-lucide="shield-check" class="w-3 h-3"></i> Structure vectorielle & polices préservées
+                </span>
+                <span>Page 1 / 1 • 184 mots</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 4. Barre d'état logicielle -->
+          <div class="bg-[#185ABD] px-4 py-2 text-white flex justify-between items-center text-xs font-mono">
+            <span class="flex items-center gap-2">
+              <i data-lucide="check" class="w-3.5 h-3.5 text-emerald-300"></i>
+              <span>Fidélité garantie : 0 pixel de décalage</span>
+            </span>
+            <span class="text-white/75">Zoom : 100%</span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- ================================================================ -->
+  <!-- BANDEAU DE PREUVES & CHIFFRES CLÉS                               -->
+  <!-- ================================================================ -->
+  <section class="border-y border-black/10 dark:border-white/10 bg-white/70 dark:bg-[#141414]/70 backdrop-blur-xl py-10 px-6">
+    <div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+      
+      <div class="space-y-1">
+        <div class="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">+250 000</div>
+        <div class="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Pages traduites</div>
+      </div>
+
+      <div class="space-y-1">
+        <div class="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">99.8%</div>
+        <div class="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Fidélité visuelle</div>
+      </div>
+
+      <div class="space-y-1">
+        <div class="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">13</div>
+        <div class="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Langues majeures</div>
+      </div>
+
+      <div class="space-y-1">
+        <div class="text-3xl sm:text-4xl font-serif font-bold text-brand-dark dark:text-white">0 Jour</div>
+        <div class="text-xs font-bold uppercase tracking-wider text-brand-goldink dark:text-brand-accent">Rétention données</div>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- ================================================================ -->
+  <!-- SECTION : COMMENT ÇA MARCHE (3 ÉTAPES CLAIRES)                   -->
+  <!-- ================================================================ -->
+  <section id="how" class="py-28 px-6">
+    <div class="max-w-7xl mx-auto">
+      
+      <div class="text-center mb-20">
+        <span class="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
+          Processus fluide
+        </span>
+        <h2 class="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
+          Comment ça marche ?
+        </h2>
+        <p class="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
+          Trois étapes simples. Zéro perte de mise en page, zéro conversion destructrice.
+        </p>
+      </div>
+
+      <div class="grid md:grid-cols-3 gap-8">
+        
+        <!-- Étape 1 -->
+        <div class="luxury-card p-8 rounded-3xl relative">
+          <div class="w-12 h-12 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark flex items-center justify-center font-serif font-bold text-xl mb-6 shadow-md">
+            1
+          </div>
+          <h3 class="text-xl font-serif font-bold text-brand-dark dark:text-white mb-3">
+            Déposez votre fichier
+          </h3>
+          <p class="text-sm text-brand-dark/75 dark:text-white/70 leading-relaxed font-light">
+            Glissez votre document Word (.docx), classeur Excel (.xlsx), présentation PowerPoint (.pptx) ou PDF natif.
+          </p>
+        </div>
+
+        <!-- Étape 2 -->
+        <div class="luxury-card p-8 rounded-3xl relative">
+          <div class="w-12 h-12 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark flex items-center justify-center font-serif font-bold text-xl mb-6 shadow-md">
+            2
+          </div>
+          <h3 class="text-xl font-serif font-bold text-brand-dark dark:text-white mb-3">
+            Choisissez la langue & le style
+          </h3>
+          <p class="text-sm text-brand-dark/75 dark:text-white/70 leading-relaxed font-light">
+            Sélectionnez la langue cible, vos glossaires métier et ajoutez vos consignes de ton ou de contexte IA si souhaité.
+          </p>
+        </div>
+
+        <!-- Étape 3 -->
+        <div class="luxury-card p-8 rounded-3xl relative">
+          <div class="w-12 h-12 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark flex items-center justify-center font-serif font-bold text-xl mb-6 shadow-md">
+            3
+          </div>
+          <h3 class="text-xl font-serif font-bold text-brand-dark dark:text-white mb-3">
+            Téléchargez le document fini
+          </h3>
+          <p class="text-sm text-brand-dark/75 dark:text-white/70 leading-relaxed font-light">
+            Récupérez instantanément votre fichier traduit, identique au millimètre près à votre document original.
+          </p>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- ================================================================ -->
+  <!-- SECTION : AVANT / APRÈS & FIDÉLITÉ OBSIDIENNE (LUXE & CONTRASTE) -->
+  <!-- ================================================================ -->
+  <section id="fidelity" class="py-28 px-6 bg-brand-dark text-white relative overflow-hidden">
+    
+    <!-- Lueur dorée centrale -->
+    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[350px] bg-brand-accent/15 blur-[120px] pointer-events-none"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      
+      <div class="text-center mb-16">
+        <span class="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/20 text-brand-accent mb-4 border border-brand-accent/30">
+          Précision chirurgicale
+        </span>
+        <h2 class="text-4xl sm:text-6xl font-serif font-medium tracking-tight mb-4">
+          Votre mise en forme, <span class="italic text-brand-accent">parfaitement préservée</span>
+        </h2>
+        <p class="text-white/70 text-lg max-w-2xl mx-auto font-light">
+          Les autres traducteurs détruisent les tableaux et écrasent la structure. Wordly reconstruit le document dans son format natif.
+        </p>
+      </div>
+
+      <!-- Comparaison 2 colonnes -->
+      <div class="grid md:grid-cols-2 gap-8 relative">
+        
+        <!-- Document Source FR -->
+        <div class="bg-[#1e1e1e] p-8 sm:p-10 rounded-3xl border border-white/10 shadow-2xl">
+          <div class="flex items-center justify-between mb-6">
+            <span class="px-3 py-1 rounded-full text-[10px] font-bold font-mono uppercase bg-white/10 text-white/80 border border-white/15">
+              FR — Original
+            </span>
+            <span class="text-xs text-white/50 font-mono">cahier-des-charges.docx</span>
+          </div>
+
+          <h4 class="text-2xl font-serif font-bold text-white mb-4">
+            Cahier des charges — Traitement d'air
+          </h4>
+          <p class="text-sm text-white/80 leading-relaxed mb-4">
+            L'installation de ventilation doit respecter la classe de filtration F7 conformément au planning.
+          </p>
+          <div class="p-4 rounded-xl bg-black/40 border border-white/10 text-xs text-white/90 space-y-2">
+            <div class="flex justify-between">
+              <span>Charge thermique</span>
+              <strong class="text-brand-accent font-mono">42 kW au débit nominal</strong>
+            </div>
+            <div class="flex justify-between">
+              <span>Niveau sonore</span>
+              <strong class="text-brand-accent font-mono">&le; 45 dB(A) à 3 m</strong>
+            </div>
+          </div>
+        </div>
+
+        <!-- Document Traduit EN -->
+        <div class="bg-[#1e1e1e] p-8 sm:p-10 rounded-3xl border border-brand-accent/40 shadow-2xl relative">
+          
+          <div class="flex items-center justify-between mb-6">
+            <span class="px-3 py-1 rounded-full text-[10px] font-bold font-mono uppercase bg-brand-accent/20 text-brand-accent border border-brand-accent/40">
+              EN — Traduit (Wordly)
+            </span>
+            <span class="text-xs text-brand-accent font-mono font-bold">100% Alignement</span>
+          </div>
+
+          <h4 class="text-2xl font-serif font-bold text-white mb-4">
+            Technical specification — Air handling
+          </h4>
+          <p class="text-sm text-white/80 leading-relaxed mb-4">
+            The ventilation system must comply with filter class F7 as specified in the master schedule.
+          </p>
+          <div class="p-4 rounded-xl bg-black/40 border border-brand-accent/30 text-xs text-white/90 space-y-2">
+            <div class="flex justify-between">
+              <span>Thermal load</span>
+              <strong class="text-brand-accent font-mono">42 kW at nominal flow</strong>
+            </div>
+            <div class="flex justify-between">
+              <span>Sound level</span>
+              <strong class="text-brand-accent font-mono">&le; 45 dB(A) at 3 m</strong>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- 3 Cartes de preuves -->
+      <div class="grid sm:grid-cols-3 gap-5 mt-10">
+        <div class="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
+          <div class="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
+            <i data-lucide="layout" class="w-5 h-5"></i>
+          </div>
+          <span class="text-sm font-medium text-white/90">SmartArt & formes vectorielles reconstruits</span>
+        </div>
+
+        <div class="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
+          <div class="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
+            <i data-lucide="pie-chart" class="w-5 h-5"></i>
+          </div>
+          <span class="text-sm font-medium text-white/90">Séries et axes de graphiques traduits</span>
+        </div>
+
+        <div class="flex items-center gap-3.5 p-4 rounded-2xl bg-white/5 border border-white/10">
+          <div class="w-10 h-10 rounded-xl bg-brand-accent/20 text-brand-accent flex items-center justify-center shrink-0">
+            <i data-lucide="table" class="w-5 h-5"></i>
+          </div>
+          <span class="text-sm font-medium text-white/90">Tables des matières régénérées automatiquement</span>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- ================================================================ -->
+  <!-- SECTION : LES 4 FORMATS BUREAUTIQUES                             -->
+  <!-- ================================================================ -->
+  <section id="formats" class="py-28 px-6">
+    <div class="max-w-7xl mx-auto">
+      
+      <div class="text-center mb-20">
+        <span class="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
+          Compatibilité totale
+        </span>
+        <h2 class="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
+          Chaque format, <span class="italic text-brand-goldink dark:text-brand-accent">chaque élément</span>
+        </h2>
+        <p class="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
+          Une ingénierie dédiée pour chaque type de document de la suite bureautique.
+        </p>
+      </div>
+
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+        
+        <!-- Word -->
+        <div class="luxury-card p-8 rounded-3xl group">
+          <div class="w-12 h-12 rounded-2xl bg-[#185ABD]/10 text-[#185ABD] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <i data-lucide="file-text" class="w-6 h-6"></i>
+          </div>
+          <div class="text-[11px] font-bold font-mono text-[#185ABD] mb-2 uppercase tracking-wider">.DOCX</div>
+          <h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-4">Word</h3>
+          <ul class="space-y-2.5 text-xs text-brand-dark/75 dark:text-white/70 font-medium">
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Paragraphes & Titres</li>
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Tableaux & SmartArt</li>
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> En-têtes & Pieds de page</li>
+          </ul>
+        </div>
+
+        <!-- Excel -->
+        <div class="luxury-card p-8 rounded-3xl group">
+          <div class="w-12 h-12 rounded-2xl bg-[#107C41]/10 text-[#107C41] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <i data-lucide="file-spreadsheet" class="w-6 h-6"></i>
+          </div>
+          <div class="text-[11px] font-bold font-mono text-[#107C41] mb-2 uppercase tracking-wider">.XLSX</div>
+          <h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-4">Excel</h3>
+          <ul class="space-y-2.5 text-xs text-brand-dark/75 dark:text-white/70 font-medium">
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Formules 100% préservées</li>
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Onglets & Feuilles multiples</li>
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Graphiques & Noms de plages</li>
+          </ul>
+        </div>
+
+        <!-- PowerPoint -->
+        <div class="luxury-card p-8 rounded-3xl group">
+          <div class="w-12 h-12 rounded-2xl bg-[#C43E1C]/10 text-[#C43E1C] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <i data-lucide="presentation" class="w-6 h-6"></i>
+          </div>
+          <div class="text-[11px] font-bold font-mono text-[#C43E1C] mb-2 uppercase tracking-wider">.PPTX</div>
+          <h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-4">PowerPoint</h3>
+          <ul class="space-y-2.5 text-xs text-brand-dark/75 dark:text-white/70 font-medium">
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Zones de texte ajustées</li>
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Masques & Diapositives</li>
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Formes & Groupes vectoriels</li>
+          </ul>
+        </div>
+
+        <!-- PDF -->
+        <div class="luxury-card p-8 rounded-3xl group">
+          <div class="w-12 h-12 rounded-2xl bg-[#E03E2D]/10 text-[#E03E2D] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <i data-lucide="file-check" class="w-6 h-6"></i>
+          </div>
+          <div class="text-[11px] font-mono font-bold text-[#E03E2D] mb-2 uppercase tracking-wider">.PDF</div>
+          <h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-4">PDF</h3>
+          <ul class="space-y-2.5 text-xs text-brand-dark/75 dark:text-white/70 font-medium">
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> PDF vectoriels natifs</li>
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> Respect absolu de la mise en page</li>
+            <li class="flex items-center gap-2"><i data-lucide="check" class="w-3.5 h-3.5 text-emerald-500"></i> OCR haute définition intégré</li>
+          </ul>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- ================================================================ -->
+  <!-- SECTION : TARIFICATION CLAIRE & ATTRACTIVE                       -->
+  <!-- ================================================================ -->
+  <section id="pricing" class="py-28 px-6 bg-brand-muted/40 dark:bg-[#121212]/40">
+    <div class="max-w-7xl mx-auto">
+      
+      <div class="text-center mb-16">
+        <span class="inline-block px-3.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-brand-accent/15 text-brand-goldink dark:text-brand-accent mb-4">
+          Tarifs transparents
+        </span>
+        <h2 class="text-4xl sm:text-5xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
+          Choisissez votre formule
+        </h2>
+        <p class="text-brand-dark/70 dark:text-white/70 text-base max-w-xl mx-auto mt-3 font-light">
+          Commencez gratuitement. Évoluez selon vos volumes de traduction professionnelle.
+        </p>
+
+        <!-- Bascule Mensuel / Annuel -->
+        <div class="inline-flex items-center gap-3 p-1.5 rounded-2xl bg-white dark:bg-[#222] border border-black/10 dark:border-white/10 mt-8 shadow-xs">
+          <button id="btnMonthly" class="px-5 py-2 rounded-xl text-xs font-bold uppercase tracking-wider text-brand-dark/60 dark:text-white/60">Mensuel</button>
+          <button id="btnAnnual" class="px-5 py-2 rounded-xl text-xs font-bold uppercase tracking-wider bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark shadow-sm flex items-center gap-1.5">
+            <span>Annuel</span>
+            <span class="px-1.5 py-0.5 rounded-full text-[9px] bg-brand-accent dark:bg-brand-dark text-brand-dark dark:text-brand-accent font-black">-20%</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="grid md:grid-cols-3 gap-8 items-stretch">
+        
+        <!-- Formule Starter -->
+        <div class="luxury-card p-8 sm:p-10 rounded-3xl flex flex-col justify-between">
+          <div>
+            <h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-2">Starter</h3>
+            <p class="text-xs text-brand-dark/60 dark:text-white/60 uppercase tracking-widest mb-8">Idéal pour les indépendants</p>
+            
+            <div class="flex items-baseline gap-2 mb-8">
+              <span class="text-5xl font-serif font-bold text-brand-dark dark:text-white">7 €</span>
+              <span class="text-xs text-brand-dark/60 dark:text-white/60">/ mois</span>
+            </div>
+
+            <ul class="space-y-4 text-xs text-brand-dark/80 dark:text-white/80 mb-10">
+              <li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> 10 documents par mois</li>
+              <li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Word, Excel, PowerPoint & PDF</li>
+              <li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Glossaire personnalisé (100 termes)</li>
+              <li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Rétention zéro des fichiers</li>
+            </ul>
+          </div>
+
+          <a href="#" class="w-full py-3.5 rounded-xl border border-black/15 dark:border-white/15 text-center text-xs font-bold uppercase tracking-widest hover:bg-black/5 dark:hover:bg-white/5 transition-all text-brand-dark dark:text-white">
+            Choisir Starter
+          </a>
+        </div>
+
+        <!-- Formule Pro (Vedette) -->
+        <div class="popular-glow rounded-3xl">
+          <div class="luxury-card p-8 sm:p-10 rounded-3xl h-full flex flex-col justify-between bg-gradient-to-b from-white to-amber-50/20 dark:from-[#222] dark:to-[#181818] border-brand-accent relative">
+            
+            <div class="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark text-[10px] font-black uppercase tracking-widest shadow-md">
+              ★ Recommandé pour PME
+            </div>
+
+            <div>
+              <h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-2">Pro</h3>
+              <p class="text-xs text-brand-goldink dark:text-brand-accent font-bold uppercase tracking-widest mb-8">Volume & Équipes</p>
+              
+              <div class="flex items-baseline gap-2 mb-8">
+                <span class="text-5xl font-serif font-bold text-brand-dark dark:text-white">15 €</span>
+                <span class="text-xs text-brand-dark/60 dark:text-white/60">/ mois</span>
+              </div>
+
+              <ul class="space-y-4 text-xs text-brand-dark/90 dark:text-white/90 mb-10 font-medium">
+                <li class="flex items-center gap-3"><i data-lucide="check-circle-2" class="w-4 h-4 text-brand-goldink dark:text-brand-accent shrink-0"></i> 50 documents par mois</li>
+                <li class="flex items-center gap-3"><i data-lucide="check-circle-2" class="w-4 h-4 text-brand-goldink dark:text-brand-accent shrink-0"></i> Moteur IA Contextuelle & Consignes</li>
+                <li class="flex items-center gap-3"><i data-lucide="check-circle-2" class="w-4 h-4 text-brand-goldink dark:text-brand-accent shrink-0"></i> Glossaires illimités</li>
+                <li class="flex items-center gap-3"><i data-lucide="check-circle-2" class="w-4 h-4 text-brand-goldink dark:text-brand-accent shrink-0"></i> Table de relecture & validation</li>
+                <li class="flex items-center gap-3"><i data-lucide="check-circle-2" class="w-4 h-4 text-brand-goldink dark:text-brand-accent shrink-0"></i> Export XLIFF / Import CAT</li>
+              </ul>
+            </div>
+
+            <a href="#" class="w-full py-4 rounded-xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark text-center text-xs font-bold uppercase tracking-widest shadow-xl hover:shadow-2xl hover:scale-[1.02] transition-all">
+              Démarrer avec Pro
+            </a>
+          </div>
+        </div>
+
+        <!-- Formule Business -->
+        <div class="luxury-card p-8 sm:p-10 rounded-3xl flex flex-col justify-between">
+          <div>
+            <h3 class="text-2xl font-serif font-bold text-brand-dark dark:text-white mb-2">Business</h3>
+            <p class="text-xs text-brand-dark/60 dark:text-white/60 uppercase tracking-widest mb-8">Grands comptes & Agences</p>
+            
+            <div class="flex items-baseline gap-2 mb-8">
+              <span class="text-5xl font-serif font-bold text-brand-dark dark:text-white">39 €</span>
+              <span class="text-xs text-brand-dark/60 dark:text-white/60">/ mois</span>
+            </div>
+
+            <ul class="space-y-4 text-xs text-brand-dark/80 dark:text-white/80 mb-10">
+              <li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Documents illimités</li>
+              <li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Espaces de travail partagés</li>
+              <li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Accès API & automatisation</li>
+              <li class="flex items-center gap-3"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0"></i> Support dédié prioritaire</li>
+            </ul>
+          </div>
+
+          <a href="#" class="w-full py-3.5 rounded-xl border border-black/15 dark:border-white/15 text-center text-xs font-bold uppercase tracking-widest hover:bg-black/5 dark:hover:bg-white/5 transition-all text-brand-dark dark:text-white">
+            Choisir Business
+          </a>
+        </div>
+
+      </div>
+
+    </div>
+  </section>
+
+  <!-- ================================================================ -->
+  <!-- CALL TO ACTION FINAL                                             -->
+  <!-- ================================================================ -->
+  <section class="py-28 px-6 text-center relative overflow-hidden">
+    <div class="max-w-4xl mx-auto luxury-card p-12 sm:p-20 rounded-[40px] relative overflow-hidden border-brand-accent/30">
+      
+      <!-- Halo intérieur -->
+      <div class="absolute -top-24 -right-24 w-72 h-72 bg-brand-accent/20 rounded-full blur-3xl"></div>
+
+      <h2 class="text-4xl sm:text-6xl font-serif font-bold text-brand-dark dark:text-white tracking-tight mb-6">
+        Prêt à traduire sans perdre <span class="italic gradient-text-gold font-serif">une seule seconde ?</span>
+      </h2>
+      <p class="text-brand-dark/75 dark:text-white/70 text-base sm:text-lg max-w-xl mx-auto font-light leading-relaxed mb-10">
+        Glissez votre premier document et découvrez la précision Wordly. 3 documents offerts sans carte bancaire.
+      </p>
+
+      <a href="#pricing" class="inline-flex items-center gap-3 px-10 py-5 rounded-2xl bg-brand-dark dark:bg-brand-accent text-white dark:text-brand-dark font-bold text-xs uppercase tracking-widest shadow-2xl hover:scale-105 transition-all">
+        <span>Commencer maintenant</span>
+        <i data-lucide="arrow-right" class="w-4 h-4"></i>
+      </a>
+    </div>
+  </section>
+
+  <!-- ================================================================ -->
+  <!-- FOOTER                                                           -->
+  <!-- ================================================================ -->
+  <footer class="border-t border-black/10 dark:border-white/10 bg-white dark:bg-[#0a0a0a] py-16 px-6">
+    <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
+      
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 bg-brand-dark dark:bg-brand-accent rounded-lg flex items-center justify-center text-white dark:text-brand-dark font-serif font-bold text-base">
+          W
+        </div>
+        <span class="font-bold text-lg text-brand-dark dark:text-white">
+          Wordly<span class="text-brand-goldink dark:text-brand-accent">.art</span>
+        </span>
+      </div>
+
+      <div class="text-xs text-brand-dark/60 dark:text-white/60 uppercase tracking-widest font-mono">
+        © 2026 Wordly.art • Traduction certifiée haute fidélité
+      </div>
+
+      <div class="flex items-center gap-6 text-xs font-bold text-brand-dark/70 dark:text-white/70 uppercase tracking-wider">
+        <a href="#" class="hover:text-brand-dark dark:hover:text-white">Confidentialité</a>
+        <a href="#" class="hover:text-brand-dark dark:hover:text-white">Tarifs</a>
+        <a href="#" class="hover:text-brand-dark dark:hover:text-white">Contact</a>
+      </div>
+
+    </div>
+  </footer>
+
+  <script>
+    // Initialisation Lucide icons
+    lucide.createIcons();
+
+    // Toggle Mode Sombre / Clair
+    const themeBtn = document.getElementById('themeToggle');
+    themeBtn.addEventListener('click', () => {
+      document.documentElement.classList.toggle('dark');
+      lucide.createIcons();
+    });
+
+    // Bascule de format dans la démonstration
+    const formatHeaders = {
+      docx: { bg: 'bg-[#185ABD]', title: 'Cahier_Des_Charges_Technique.docx — Word' },
+      xlsx: { bg: 'bg-[#107C41]', title: 'Calculs_Financiers_Recette.xlsx — Excel' },
+      pptx: { bg: 'bg-[#C43E1C]', title: 'Presentation_Executive_Projet.pptx — PowerPoint' },
+      pdf:  { bg: 'bg-[#E03E2D]', title: 'Rapport_Officiel_Certifie.pdf — Adobe Acrobat' }
+    };
+
+    function switchFormat(fmt) {
+      const cfg = formatHeaders[fmt];
+      const header = document.getElementById('officeHeader');
+      const docTitle = document.getElementById('windowDocTitle');
+      
+      header.className = `${cfg.bg} px-4 py-2.5 flex items-center justify-between text-white transition-colors duration-300`;
+      docTitle.textContent = cfg.title;
+    }
+  </script>
+</body>
+</html>