diff --git a/public/bg_dark.jpg b/public/bg_dark.jpg
new file mode 100644
index 0000000..e51450f
Binary files /dev/null and b/public/bg_dark.jpg differ
diff --git a/public/bg_light.jpg b/public/bg_light.jpg
new file mode 100644
index 0000000..e666ef6
Binary files /dev/null and b/public/bg_light.jpg differ
diff --git a/src/assets/bg_dark.jpg b/src/assets/bg_dark.jpg
new file mode 100644
index 0000000..e51450f
Binary files /dev/null and b/src/assets/bg_dark.jpg differ
diff --git a/src/assets/bg_light.jpg b/src/assets/bg_light.jpg
new file mode 100644
index 0000000..e666ef6
Binary files /dev/null and b/src/assets/bg_light.jpg differ
diff --git a/src/components/AnimatedSvBackground.tsx b/src/components/AnimatedSvBackground.tsx
new file mode 100644
index 0000000..4e3b36c
--- /dev/null
+++ b/src/components/AnimatedSvBackground.tsx
@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '../hooks/useTheme';
+
+export const AnimatedSvgBackground: React.FC = () => {
+  const { isDark } = useTheme();
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    let ticking = false;
+
+    const handleScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          setScrollY(window.scrollY);
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Couleurs réactives selon le mode clair/sombre
+  const strokePrimary = isDark ? "rgba(59, 130, 246, 0.25)" : "rgba(37, 99, 235, 0.18)"; // Bleu Google
+  const strokeSuccess = isDark ? "rgba(16, 185, 129, 0.3)" : "rgba(16, 185, 129, 0.22)"; // Vert Émeraude
+  const strokeSubtle = isDark ? "rgba(148, 163, 184, 0.1)" : "rgba(100, 116, 139, 0.08)";
+  const fillGlow = isDark ? "rgba(59, 130, 246, 0.03)" : "rgba(37, 99, 235, 0.02)";
+
+  return (
+    <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden bg-[#f8f9fa] dark:bg-[#0f172a] transition-colors duration-500">
+      
+      {/* ------------------------------------------------------------- */}
+      {/* COUCHE 1 : GRILLE TECHNIQUE & FLUX LENTS (Vitesse: -0.1x)    */}
+      {/* ------------------------------------------------------------- */}
+      <svg
+        className="absolute inset-0 w-full h-[200vh] transition-transform duration-75 ease-out"
+        style={{ transform: `translateY(${scrollY * -0.1}px)` }}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <pattern id="gise-grid" width="80" height="80" patternUnits="userSpaceOnUse">
+            <path d="M 80 0 L 0 0 0 80" fill="none" stroke={strokeSubtle} strokeWidth="1" />
+            <circle cx="80" cy="0" r="1.5" fill={strokePrimary} />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#gise-grid)" />
+
+        {/* Lignes de flux de données sinusoïdales */}
+        <path
+          d="M -100 200 C 300 100, 600 500, 1200 300 T 2000 600"
+          fill="none"
+          stroke={strokePrimary}
+          strokeWidth="1.5"
+          strokeDasharray="8 6"
+        />
+        <path
+          d="M -100 800 C 400 600, 800 1100, 1500 900 T 2200 1200"
+          fill="none"
+          stroke={strokeSuccess}
+          strokeWidth="1.5"
+          strokeDasharray="12 8"
+        />
+      </svg>
+
+      {/* ------------------------------------------------------------- */}
+      {/* COUCHE 2 : SYMBOLES CLÉS GISE (BOUCLIER, SERVEUR, CADENAS)    */}
+      {/* Vitesse intermédiaire: -0.28x                                */}
+      {/* ------------------------------------------------------------- */}
+      <svg
+        className="absolute inset-0 w-full h-[250vh] transition-transform duration-75 ease-out"
+        style={{ transform: `translateY(${scrollY * -0.28}px)` }}
+        viewBox="0 0 1200 1800"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+        {/* --- DESSIN 1 : LE BOUCLIER SOUVERAIN (AEGIS) en haut à droite --- */}
+        <g transform="translate(850, 120) scale(1.2)">
+          {/* Contour externe du Bouclier */}
+          <path
+            d="M100 20 L180 50 V120 C180 170 100 210 100 210 C100 210 20 170 20 120 V50 L100 20 Z"
+            stroke={strokePrimary}
+            strokeWidth="2.5"
+            fill={fillGlow}
+          />
+          {/* Maillage interne Zero-Trust */}
+          <path d="M100 20 V210 M20 50 L180 120 M180 50 L20 120" stroke={strokePrimary} strokeWidth="1" />
+          <circle cx="100" cy="115" r="25" stroke={strokeSuccess} strokeWidth="2" fill="none" />
+          <circle cx="100" cy="115" r="6" fill={isDark ? "#10b981" : "#059669"} />
+        </g>
+
+        {/* --- DESSIN 2 : BAIE DE SERVEURS (CLOUD BELGE) au milieu à gauche --- */}
+        <g transform="translate(80, 650) scale(0.9)">
+          {/* Armoire Serveur */}
+          <rect x="0" y="0" width="160" height="240" rx="16" stroke={strokePrimary} strokeWidth="2" fill={fillGlow} />
+          {/* Serveur Lame 1 */}
+          <rect x="15" y="20" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
+          <circle cx="35" cy="37.5" r="3" fill={isDark ? "#10b981" : "#059669"} />
+          <line x1="55" y1="37.5" x2="125" y2="37.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="4 4" />
+          
+          {/* Serveur Lame 2 */}
+          <rect x="15" y="70" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
+          <circle cx="35" cy="87.5" r="3" fill={isDark ? "#3b82f6" : "#2563eb"} />
+          <line x1="55" y1="87.5" x2="125" y2="87.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="6 3" />
+
+          {/* Serveur Lame 3 */}
+          <rect x="15" y="120" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
+          <circle cx="35" cy="137.5" r="3" fill={isDark ? "#10b981" : "#059669"} />
+          <line x1="55" y1="137.5" x2="125" y2="137.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="4 4" />
+
+          {/* Base & Connexion terre */}
+          <path d="M80 160 V220 M40 220 H120" stroke={strokeSuccess} strokeWidth="2" />
+        </g>
+
+        {/* --- DESSIN 3 : CADENAS DE SÉCURITÉ / VAULT en bas à droite --- */}
+        <g transform="translate(900, 1250) scale(1.1)">
+          {/* Anse du cadenas */}
+          <path d="M30 60 V35 C30 18 43 5 60 5 C77 5 90 18 90 35 V60" stroke={strokeSuccess} strokeWidth="3" fill="none" />
+          {/* Corps du cadenas */}
+          <rect x="10" y="60" width="100" height="80" rx="16" stroke={strokeSuccess} strokeWidth="2.5" fill={fillGlow} />
+          {/* Serrure */}
+          <circle cx="60" cy="92" r="8" fill={isDark ? "#10b981" : "#059669"} />
+          <path d="M60 100 V115" stroke={isDark ? "#10b981" : "#059669"} strokeWidth="3" strokeLinecap="round" />
+        </g>
+
+        {/* --- DESSIN 4 : NŒUDS DE RÉSEAU INTERCONNECTÉS (Réseau Zero-Trust) --- */}
+        <g transform="translate(450, 950)">
+          <line x1="0" y1="0" x2="120" y2="-60" stroke={strokePrimary} strokeWidth="1.5" />
+          <line x1="120" y1="-60" x2="240" y2="20" stroke={strokePrimary} strokeWidth="1.5" />
+          <line x1="0" y1="0" x2="100" y2="80" stroke={strokePrimary} strokeWidth="1.5" />
+          <line x1="100" y1="80" x2="240" y2="20" stroke={strokePrimary} strokeWidth="1.5" />
+
+          <circle cx="0" cy="0" r="8" fill={isDark ? "#3b82f6" : "#2563eb"} />
+          <circle cx="120" cy="-60" r="6" fill={isDark ? "#10b981" : "#059669"} />
+          <circle cx="240" cy="20" r="10" stroke={strokePrimary} strokeWidth="2" fill={isDark ? "#0f172a" : "#ffffff"} />
+          <circle cx="100" cy="80" r="7" fill={isDark ? "#6366f1" : "#4f46e5"} />
+        </g>
+
+      </svg>
+
+      {/* ------------------------------------------------------------- */}
+      {/* COUCHE 3 : HALOS LUMINEUX EN ACCENTUATION (Vitesse: -0.4x)   */}
+      {/* ------------------------------------------------------------- */}
+      <div
+        className="absolute top-20 left-1/2 -translate-x-1/2 w-175 h-87.5 bg-blue-500/10 dark:bg-blue-600/15 blur-[140px] rounded-full transition-transform duration-75 ease-out"
+        style={{ transform: `translate(-50%, ${scrollY * -0.4}px)` }}
+      />
+      <div
+        className="absolute top-200 -left-20 w-125 h-125 bg-emerald-500/10 dark:bg-emerald-500/15 blur-[150px] rounded-full transition-transform duration-75 ease-out"
+        style={{ transform: `translateY(${scrollY * -0.2}px)` }}
+      />
+
+    </div>
+  );
+};
+
+export default AnimatedSvgBackground;
\ No newline at end of file
diff --git a/src/pages/GiseLandingPage.tsx b/src/pages/GiseLandingPage.tsx
index 49f8f78..b4cc83f 100644
--- a/src/pages/GiseLandingPage.tsx
+++ b/src/pages/GiseLandingPage.tsx
@@ -25,6 +25,7 @@ import {
 } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { useTheme } from '../hooks/useTheme';
+import AnimatedSvgBackground from '../components/AnimatedSvBackground';
 
 export default function GiseLandingPage() {
   const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);
@@ -74,604 +75,609 @@ export default function GiseLandingPage() {
   return (
     <div className="min-h-screen font-sans bg-[#f8f9fa] dark:bg-[#0f172a] text-[#1f1f1f] dark:text-[#e3e2e6] selection:bg-blue-600 selection:text-white transition-colors duration-300">
 
-      {/* NAVBAR (Style Google Bar avec conteneur arrondi flottant) */}
-      <header className="fixed top-0 left-0 right-0 z-50 p-3 sm:p-4">
-        <div className="max-w-7xl mx-auto bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-slate-200/80 dark:border-slate-800 rounded-full px-5 py-2.5 shadow-sm flex items-center justify-between transition-all">
-          
-          {/* Brand Logo - Google Style Icon */}
-          <div className="flex items-center gap-3">
-            <div className="h-9 w-9 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
-              <Shield className="h-5 w-5" />
+      <AnimatedSvgBackground />
+
+      <div className="relative z-10">
+
+        {/* NAVBAR (Style Google Bar avec conteneur arrondi flottant) */}
+        <header className="fixed top-0 left-0 right-0 z-50 p-3 sm:p-4">
+          <div className="max-w-7xl mx-auto bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-slate-200/80 dark:border-slate-800 rounded-full px-5 py-2.5 shadow-sm flex items-center justify-between transition-all">
+
+            {/* Brand Logo - Google Style Icon */}
+            <div className="flex items-center gap-3">
+              <div className="h-9 w-9 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
+                <Shield className="h-5 w-5" />
+              </div>
+              <div className="flex items-baseline gap-1.5">
+                <span className="text-xl font-bold tracking-tight text-slate-900 dark:text-white">
+                  GISE
+                </span>
+                <span className="text-[11px] font-semibold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/80 px-2.5 py-0.5 rounded-full border border-blue-200/50 dark:border-blue-800/50">
+                  Cloud Souverain
+                </span>
+              </div>
             </div>
-            <div className="flex items-baseline gap-1.5">
-              <span className="text-xl font-bold tracking-tight text-slate-900 dark:text-white">
-                GISE
-              </span>
-              <span className="text-[11px] font-semibold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/80 px-2.5 py-0.5 rounded-full border border-blue-200/50 dark:border-blue-800/50">
-                Cloud Souverain
-              </span>
+
+            {/* Nav Links (Material Chips Navigation) */}
+            <nav className="hidden md:flex items-center gap-1 font-medium text-xs text-slate-600 dark:text-slate-300">
+              <a href="#engagements" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
+                Nos Engagements
+              </a>
+              <a href="#aegis" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
+                Portail AEGIS
+              </a>
+              <a href="#secteurs" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
+                Secteurs
+              </a>
+              <a href="#comparatif" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
+                Pourquoi GISE
+              </a>
+            </nav>
+
+            {/* Action buttons */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={toggleTheme}
+                className="p-2.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
+                aria-label="Basculer le thème"
+              >
+                {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+              </button>
+
+              <a
+                href="#contact"
+                className="px-5 py-2 rounded-full text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 transition-all shadow-sm active:scale-95 flex items-center gap-1.5"
+              >
+                <span>Demander un audit</span>
+                <ArrowUpRight className="w-3.5 h-3.5" />
+              </a>
             </div>
           </div>
+        </header>
 
-          {/* Nav Links (Material Chips Navigation) */}
-          <nav className="hidden md:flex items-center gap-1 font-medium text-xs text-slate-600 dark:text-slate-300">
-            <a href="#engagements" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
-              Nos Engagements
-            </a>
-            <a href="#aegis" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
-              Portail AEGIS
-            </a>
-            <a href="#secteurs" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
-              Secteurs
-            </a>
-            <a href="#comparatif" className="px-4 py-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
-              Pourquoi GISE
-            </a>
-          </nav>
+        {/* HERO SECTION (Style Google Launch Header) */}
+        <section className="pt-36 pb-20 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto flex flex-col items-center text-center">
 
-          {/* Action buttons */}
-          <div className="flex items-center gap-2">
-            <button
-              onClick={toggleTheme}
-              className="p-2.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
-              aria-label="Basculer le thème"
-            >
-              {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-            </button>
+          {/* Google Pill Chip */}
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#edf2fa] dark:bg-slate-900 border border-blue-100 dark:border-slate-800 text-xs text-blue-700 dark:text-blue-300 font-medium mb-8">
+            <Sparkles className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400" />
+            <span>Infogérance & Cybersécurité Souveraine en Belgique</span>
+          </div>
 
+          {/* H1 Main Heading */}
+          <h1 className="text-4xl sm:text-6xl md:text-7xl font-bold text-slate-900 dark:text-white tracking-tight mb-6 max-w-4xl leading-[1.15]">
+            Concentrez-vous sur votre métier.{' '}
+            <span className="text-blue-600 dark:text-blue-400">
+              Nous gérons votre informatique.
+            </span>
+          </h1>
+
+          {/* Subtitle */}
+          <p className="text-base sm:text-xl text-slate-600 dark:text-slate-300 max-w-2xl mb-10 leading-relaxed font-normal">
+            GISE prend la responsabilité globale de votre infrastructure, de vos réseaux et de votre sécurité. Libérez votre entreprise des pannes grâce à notre Cloud souverain et à notre portail AEGIS.
+          </p>
+
+          {/* Action Buttons (Google Material Pills) */}
+          <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
             <a
               href="#contact"
-              className="px-5 py-2 rounded-full text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 transition-all shadow-sm active:scale-95 flex items-center gap-1.5"
+              className="px-8 py-3.5 text-sm font-semibold rounded-full text-white bg-blue-600 hover:bg-blue-700 transition-all shadow-md shadow-blue-600/20 flex items-center justify-center gap-2 active:scale-95"
             >
-              <span>Demander un audit</span>
-              <ArrowUpRight className="w-3.5 h-3.5" />
+              <span>Obtenir un diagnostic</span>
+              <ChevronRight className="w-4 h-4" />
+            </a>
+            <a
+              href="#aegis"
+              className="px-8 py-3.5 text-sm font-semibold rounded-full text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/80 transition-all flex items-center justify-center shadow-sm"
+            >
+              Explorer le Portail AEGIS
             </a>
           </div>
-        </div>
-      </header>
 
-      {/* HERO SECTION (Style Google Launch Header) */}
-      <section className="pt-36 pb-20 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto flex flex-col items-center text-center">
-        
-        {/* Google Pill Chip */}
-        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#edf2fa] dark:bg-slate-900 border border-blue-100 dark:border-slate-800 text-xs text-blue-700 dark:text-blue-300 font-medium mb-8">
-          <Sparkles className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400" />
-          <span>Infogérance & Cybersécurité Souveraine en Belgique</span>
-        </div>
-
-        {/* H1 Main Heading */}
-        <h1 className="text-4xl sm:text-6xl md:text-7xl font-bold text-slate-900 dark:text-white tracking-tight mb-6 max-w-4xl leading-[1.15]">
-          Concentrez-vous sur votre métier.{' '}
-          <span className="text-blue-600 dark:text-blue-400">
-            Nous gérons votre informatique.
-          </span>
-        </h1>
-
-        {/* Subtitle */}
-        <p className="text-base sm:text-xl text-slate-600 dark:text-slate-300 max-w-2xl mb-10 leading-relaxed font-normal">
-          GISE prend la responsabilité globale de votre infrastructure, de vos réseaux et de votre sécurité. Libérez votre entreprise des pannes grâce à notre Cloud souverain et à notre portail AEGIS.
-        </p>
-
-        {/* Action Buttons (Google Material Pills) */}
-        <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
-          <a
-            href="#contact"
-            className="px-8 py-3.5 text-sm font-semibold rounded-full text-white bg-blue-600 hover:bg-blue-700 transition-all shadow-md shadow-blue-600/20 flex items-center justify-center gap-2 active:scale-95"
-          >
-            <span>Obtenir un diagnostic gratuit</span>
-            <ChevronRight className="w-4 h-4" />
-          </a>
-          <a
-            href="#aegis"
-            className="px-8 py-3.5 text-sm font-semibold rounded-full text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/80 transition-all flex items-center justify-center shadow-sm"
-          >
-            Explorer le Portail AEGIS
-          </a>
-        </div>
-
-        {/* Feature Pill Tags */}
-        <div className="mt-16 pt-8 border-t border-slate-200/80 dark:border-slate-800/80 grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs text-slate-600 dark:text-slate-400 w-full max-w-3xl">
-          <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
-            <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
-            <span>100% Hébergé en Belgique</span>
-          </div>
-          <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
-            <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
-            <span>Sauvegardes Inviolables</span>
-          </div>
-          <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
-            <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
-            <span>Accès Nomade Sécurisé</span>
-          </div>
-          <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
-            <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
-            <span>Supervision 24/7 Proactive</span>
-          </div>
-        </div>
-      </section>
-
-      {/* --- SECTION NOS ENGAGEMENTS (Material Design 3 Surface Cards) --- */}
-      <section id="engagements" className="py-20 bg-white dark:bg-slate-900/40 border-y border-slate-200/80 dark:border-slate-800/80">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          
-          <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
-            <span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
-              Prise en charge globale
-            </span>
-            <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
-              Les 3 piliers de votre tranquillité informatique
-            </h2>
-            <p className="text-slate-600 dark:text-slate-400 text-sm">
-              Nous assumons la responsabilité technique complète de vos équipements et de vos données.
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-3 gap-6">
-            
-            {/* Pilier 1 */}
-            <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
-              <div className="h-12 w-12 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center">
-                <Server className="h-6 w-6" />
-              </div>
-              <h3 className="text-xl font-bold text-slate-900 dark:text-white">1. Cloud Privé Souverain & Accès Sécurisé</h3>
-              <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                Vos logiciels et fichiers sont hébergés sur nos propres serveurs <strong>100% situés en Belgique</strong>. Vos équipes travaillent depuis le bureau ou à distance en toute sécurité.
-              </p>
-              <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
-                <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Données confidentielles conservées en Belgique</li>
-                <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Accès à distance simple et rapide pour vos employés</li>
-                <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Protection contre le vol ou la perte de documents</li>
-              </ul>
+          {/* Feature Pill Tags */}
+          <div className="mt-16 pt-8 border-t border-slate-200/80 dark:border-slate-800/80 grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs text-slate-600 dark:text-slate-400 w-full max-w-3xl">
+            <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
+              <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
+              <span>100% Hébergé en Belgique</span>
             </div>
-
-            {/* Pilier 2 */}
-            <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
-              <div className="h-12 w-12 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
-                <ShieldCheck className="h-6 w-6" />
-              </div>
-              <h3 className="text-xl font-bold text-slate-900 dark:text-white">2. Protection Anti-Piratage & Sauvegardes</h3>
-              <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                Vos réseaux sont protégés contre les virus et le chantage au chiffrement. Vos fichiers essentiels sont <strong>sauvegardés automatiquement hors-site</strong>.
-              </p>
-              <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
-                <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Blocage automatique des attaques et piratages</li>
-                <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Sauvegardes quotidiennes isolées et sécurisées</li>
-                <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Restauration de vos fichiers en cas de problème</li>
-              </ul>
+            <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
+              <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
+              <span>Sauvegardes Inviolables</span>
             </div>
-
-            {/* Pilier 3 */}
-            <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
-              <div className="h-12 w-12 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center">
-                <Activity className="h-6 w-6" />
-              </div>
-              <h3 className="text-xl font-bold text-slate-900 dark:text-white">3. Supervision 24/7 & Assistance VIP</h3>
-              <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                Nous surveillons l'état de votre matériel en continu pour <strong>anticiper et corriger les pannes</strong>. Vous bénéficiez d'un contact direct avec votre spécialiste.
-              </p>
-              <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
-                <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Surveillance permanente de vos serveurs</li>
-                <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interventions préventives avant le blocage</li>
-                <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interlocuteur dédié sans répondeur ni robot</li>
-              </ul>
+            <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
+              <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
+              <span>Accès Nomade Sécurisé</span>
             </div>
-
-          </div>
-        </div>
-      </section>
-
-      {/* --- SECTION PORTAIL AEGIS (Style Google Workspace / Admin Center) --- */}
-      <section id="aegis" className="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
-          <span className="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400">
-            Transparence Totale
-          </span>
-          <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
-            Le Portail AEGIS : Votre tableau de bord en temps réel
-          </h2>
-          <p className="text-slate-600 dark:text-slate-400 text-sm">
-            En tant que dirigeant, vous disposez d'un espace privé réassurant qui vous prouve chaque jour que votre entreprise est protégée.
-          </p>
-        </div>
-
-        <div className="grid lg:grid-cols-12 gap-8 items-center">
-          
-          {/* Feature List Left (5 cols) */}
-          <div className="lg:col-span-5 space-y-3">
-            <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
-              <div className="flex items-center gap-3 mb-1">
-                <div className="p-2 rounded-xl bg-emerald-50 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400">
-                  <Activity className="h-4 w-4" />
-                </div>
-                <h4 className="text-sm font-bold text-slate-900 dark:text-white">Suivi de Santé & Disponibilité</h4>
-              </div>
-              <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
-                Visualisez l'état de marche de vos serveurs et de vos accès avec des indicateurs vert émeraude simples à lire.
-              </p>
-            </div>
-
-            <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
-              <div className="flex items-center gap-3 mb-1">
-                <div className="p-2 rounded-xl bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400">
-                  <Shield className="h-4 w-4" />
-                </div>
-                <h4 className="text-sm font-bold text-slate-900 dark:text-white">Sauvegardes & Menaces Neutralisées</h4>
-              </div>
-              <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
-                Consultez la date exacte de votre dernière sauvegarde et le nombre d'intrusions bloquées ce mois-ci.
-              </p>
-            </div>
-
-            <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
-              <div className="flex items-center gap-3 mb-1">
-                <div className="p-2 rounded-xl bg-indigo-50 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400">
-                  <Lock className="h-4 w-4" />
-                </div>
-                <h4 className="text-sm font-bold text-slate-900 dark:text-white">Coffre-Fort & Canal Direct</h4>
-              </div>
-              <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
-                Stockez vos documents importants et contactez directement votre spécialiste d'un simple clic.
-              </p>
+            <div className="flex items-center justify-center gap-2 bg-[#f0f4f9] dark:bg-slate-900 py-2.5 px-4 rounded-full font-medium">
+              <CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
+              <span>Supervision 24/7 Proactive</span>
             </div>
           </div>
+        </section>
 
-          {/* UI Box Preview (Style Google Admin Console) (7 cols) */}
-          <div className="lg:col-span-7 bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-lg space-y-5">
-            
-            {/* App Header Bar */}
-            <div className="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-4">
-              <div className="flex items-center gap-2.5">
-                <div className="h-3 w-3 rounded-full bg-emerald-500" />
-                <span className="text-xs font-bold text-slate-900 dark:text-white">AEGIS Command Center</span>
-              </div>
-              <span className="text-[11px] font-semibold text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/80 px-3 py-1 rounded-full border border-emerald-200/60 dark:border-emerald-800/60">
-                ● Système Protégé
+        {/* --- SECTION NOS ENGAGEMENTS (Material Design 3 Surface Cards) --- */}
+        <section id="engagements" className="py-20 bg-white/60 dark:bg-slate-900/85 border-y border-slate-200/80 dark:border-slate-800/80">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+            <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
+              <span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
+                Prise en charge globale
               </span>
+              <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
+                Les 3 piliers de votre tranquillité informatique
+              </h2>
+              <p className="text-slate-600 dark:text-slate-400 text-sm">
+                Nous assumons la responsabilité technique complète de vos équipements et de vos données.
+              </p>
             </div>
 
-            {/* Metric Rows */}
-            <div className="space-y-3">
-              <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
-                <div className="flex items-center gap-3">
-                  <Server className="h-4 w-4 text-blue-600" />
-                  <span className="font-semibold text-slate-800 dark:text-slate-200">Serveurs Cloud Privé (Belgique)</span>
+            <div className="grid md:grid-cols-3 gap-6">
+
+              {/* Pilier 1 */}
+              <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
+                <div className="h-12 w-12 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center">
+                  <Server className="h-6 w-6" />
                 </div>
-                <span className="font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-100 dark:bg-emerald-950 px-2.5 py-1 rounded-full">
-                  100% Opérationnel
-                </span>
+                <h3 className="text-xl font-bold text-slate-900 dark:text-white">1. Cloud Privé Souverain & Accès Sécurisé</h3>
+                <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                  Vos logiciels et fichiers sont hébergés sur nos propres serveurs <strong>100% situés en Belgique</strong>. Vos équipes travaillent depuis le bureau ou à distance en toute sécurité.
+                </p>
+                <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
+                  <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Données confidentielles conservées en Belgique</li>
+                  <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Accès à distance simple et rapide pour vos employés</li>
+                  <li className="flex items-center gap-2"><Check className="h-4 w-4 text-blue-600 shrink-0" /> Protection contre le vol ou la perte de documents</li>
+                </ul>
               </div>
 
-              <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
-                <div className="flex items-center gap-3">
-                  <HardDrive className="h-4 w-4 text-emerald-600" />
-                  <span className="font-semibold text-slate-800 dark:text-slate-200">Sauvegarde Automatique Hors-Site</span>
+              {/* Pilier 2 */}
+              <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
+                <div className="h-12 w-12 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
+                  <ShieldCheck className="h-6 w-6" />
                 </div>
-                <span className="font-bold text-slate-600 dark:text-slate-400">
-                  Dernier check : Aujourd'hui à 04h00
-                </span>
+                <h3 className="text-xl font-bold text-slate-900 dark:text-white">2. Protection Anti-Piratage & Sauvegardes</h3>
+                <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                  Vos réseaux sont protégés contre les virus et le chantage au chiffrement. Vos fichiers essentiels sont <strong>sauvegardés automatiquement hors-site</strong>.
+                </p>
+                <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
+                  <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Blocage automatique des attaques et piratages</li>
+                  <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Sauvegardes quotidiennes isolées et sécurisées</li>
+                  <li className="flex items-center gap-2"><Check className="h-4 w-4 text-emerald-600 shrink-0" /> Restauration de vos fichiers en cas de problème</li>
+                </ul>
               </div>
 
-              <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
-                <div className="flex items-center gap-3">
-                  <ShieldCheck className="h-4 w-4 text-indigo-600" />
-                  <span className="font-semibold text-slate-800 dark:text-slate-200">Tentatives d'Intrusion Bloquées (30j)</span>
+              {/* Pilier 3 */}
+              <div className="bg-[#f0f4f9] dark:bg-slate-950 p-8 rounded-[28px] border border-transparent dark:border-slate-800/80 hover:shadow-md transition-all space-y-4">
+                <div className="h-12 w-12 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center">
+                  <Activity className="h-6 w-6" />
                 </div>
-                <span className="font-bold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950 px-2.5 py-1 rounded-full">
-                  1 420 Attaques Neutralisées
-                </span>
+                <h3 className="text-xl font-bold text-slate-900 dark:text-white">3. Supervision 24/7 & Assistance VIP</h3>
+                <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                  Nous surveillons l'état de votre matériel en continu pour <strong>anticiper et corriger les pannes</strong>. Vous bénéficiez d'un contact direct avec votre spécialiste.
+                </p>
+                <ul className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 pt-3 border-t border-slate-200/60 dark:border-slate-800 font-medium">
+                  <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Surveillance permanente de vos serveurs</li>
+                  <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interventions préventives avant le blocage</li>
+                  <li className="flex items-center gap-2"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Interlocuteur dédié sans répondeur ni robot</li>
+                </ul>
               </div>
+
             </div>
-
-            <div className="p-4 rounded-2xl bg-blue-50/50 dark:bg-blue-950/30 border border-blue-100 dark:border-blue-900/50 text-xs text-slate-600 dark:text-slate-300 flex items-center gap-2.5">
-              <Zap className="h-4 w-4 text-blue-600 shrink-0" />
-              <span><em>Demande d'évolution : demandez un nouvel accès ou une extension en 1 clic depuis votre espace.</em></span>
-            </div>
-
           </div>
+        </section>
 
-        </div>
-      </section>
-
-      {/* --- SECTEURS D'ACTIVITÉ (Google Material Category Cards) --- */}
-      <section id="secteurs" className="py-20 bg-white dark:bg-slate-900/40 border-t border-slate-200/80 dark:border-slate-800/80">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* --- SECTION PORTAIL AEGIS (Style Google Workspace / Admin Center) --- */}
+        <section id="aegis" className="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
-            <span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
-              Secteurs Privilégiés
+            <span className="text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400">
+              Transparence Totale
             </span>
             <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
-              Adapté aux exigences de votre profession
-            </h2>
-          </div>
-
-          <div className="grid md:grid-cols-3 gap-6">
-            
-            {/* Avocats */}
-            <div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
-              <div className="h-12 w-12 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center">
-                <Scale className="w-6 h-6" />
-              </div>
-              <h3 className="text-xl font-bold text-slate-900 dark:text-white">Cabinets d'Avocats & Notaires</h3>
-              <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                <strong>Secret professionnel :</strong> Connexion chiffrée à distance depuis les tribunaux. Garantie de confidentialité absolue pour vos pièces de procédure.
-              </p>
-              <div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
-                <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Coffre-fort chiffré</span>
-                <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Accès Nomade</span>
-              </div>
-            </div>
-
-            {/* Comptables */}
-            <div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
-              <div className="h-12 w-12 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center">
-                <Calculator className="w-6 h-6" />
-              </div>
-              <h3 className="text-xl font-bold text-slate-900 dark:text-white">Fiduciaires & Comptables</h3>
-              <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                <strong>Sérénité pendant les clôtures :</strong> Protection contre les blocages malveillants de vos fichiers comptables. Zéro mauvaise surprise fiscale.
-              </p>
-              <div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
-                <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Sauvegardes Inviolables</span>
-                <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Uptime Garantit</span>
-              </div>
-            </div>
-
-            {/* Santé */}
-            <div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
-              <div className="h-12 w-12 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
-                <Stethoscope className="w-6 h-6" />
-              </div>
-              <h3 className="text-xl font-bold text-slate-900 dark:text-white">Cliniques Privées & Santé</h3>
-              <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                <strong>Données de santé :</strong> Protection renforcée de vos dossiers patients et de vos ordinateurs de consultation contre les intrusions.
-              </p>
-              <div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
-                <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Données Protégées</span>
-                <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Réseau Isolé</span>
-              </div>
-            </div>
-
-          </div>
-        </div>
-      </section>
-
-      {/* --- SECTION COMPARATIVE (Google Comparison Style) --- */}
-      <section id="comparatif" className="py-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center mb-16 space-y-2">
-          <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
-            Pourquoi choisir GISE plutôt qu'un prestataire classique ?
-          </h2>
-          <p className="text-sm text-slate-600 dark:text-slate-400">
-            Les dépanneurs traditionnels interviennent quand la panne est là. GISE prend un engagement de responsabilité.
-          </p>
-        </div>
-
-        <div className="grid md:grid-cols-2 gap-6">
-          {/* Classique */}
-          <div className="p-8 rounded-[28px] bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 space-y-4">
-            <h3 className="font-bold text-slate-500 text-xs uppercase tracking-wider">Prestataire Classique</h3>
-            <ul className="space-y-3.5 text-xs text-slate-600 dark:text-slate-400 font-medium">
-              <li className="flex items-start gap-2.5">
-                <X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
-                <span>Intervention réactive (dépanne une fois la panne survenue)</span>
-              </li>
-              <li className="flex items-start gap-2.5">
-                <X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
-                <span>Données hébergées à l'étranger sans garantie de confidentialité</span>
-              </li>
-              <li className="flex items-start gap-2.5">
-                <X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
-                <span>Facture mensuelle floue sans vision sur les menaces bloquées</span>
-              </li>
-            </ul>
-          </div>
-
-          {/* GISE */}
-          <div className="p-8 rounded-[28px] bg-blue-50/60 dark:bg-blue-950/30 border-2 border-blue-600/40 space-y-4 relative">
-            <span className="absolute -top-3 right-6 bg-blue-600 text-white text-[10px] font-bold uppercase tracking-wider px-3 py-0.5 rounded-full shadow-sm">
-              Recommandé
-            </span>
-            <h3 className="font-bold text-blue-600 dark:text-blue-400 text-xs uppercase tracking-wider">Offre GISE & AEGIS</h3>
-            <ul className="space-y-3.5 text-xs text-slate-800 dark:text-slate-200 font-semibold">
-              <li className="flex items-start gap-2.5">
-                <Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
-                <span>Gestion proactive et surveillance 24h/24 pour éviter les pannes</span>
-              </li>
-              <li className="flex items-start gap-2.5">
-                <Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
-                <span>Serveurs et sauvegardes 100% situés physiquement en Belgique</span>
-              </li>
-              <li className="flex items-start gap-2.5">
-                <Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
-                <span>Tableau de bord AEGIS en temps réel pour une transparence totale</span>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </section>
-
-      {/* FORMULAIRE DE CONTACT (Google Forms Outlined Material Style) */}
-      <section id="contact" className="py-24 bg-white dark:bg-slate-900/60 border-t border-slate-200/80 dark:border-slate-800">
-        <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
-          
-          <div className="text-center mb-12 space-y-2">
-            <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
-              Demandez votre diagnostic offert
+              Le Portail AEGIS : Votre tableau de bord en temps réel
             </h2>
             <p className="text-slate-600 dark:text-slate-400 text-sm">
-              Un premier bilan rapide de votre infrastructure, sans aucun engagement.
+              En tant que dirigeant, vous disposez d'un espace privé réassurant qui vous prouve chaque jour que votre entreprise est protégée.
             </p>
           </div>
 
-          {formStatus === 'success' ? (
-            <div className="bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800 p-8 rounded-[28px] text-center space-y-3">
-              <CheckCircle className="w-12 h-12 text-emerald-600 mx-auto" />
-              <h3 className="text-xl font-bold text-slate-900 dark:text-white">Demande bien reçue !</h3>
-              <p className="text-xs text-slate-600 dark:text-slate-300 max-w-md mx-auto">
-                Merci. Un spécialiste GISE étudiera vos besoins et vous recontactera très rapidement.
-              </p>
-              <button
-                onClick={() => setFormStatus('idle')}
-                className="mt-4 text-xs font-semibold text-blue-600 hover:underline"
-              >
-                Envoyer un autre message
-              </button>
-            </div>
-          ) : (
-            <form onSubmit={handleContactSubmit} className="space-y-5 bg-[#f0f4f9] dark:bg-slate-950 p-8 sm:p-10 rounded-[28px]">
-              
-              <div className="grid sm:grid-cols-2 gap-4">
-                <div>
-                  <label htmlFor="name" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
-                    Nom & Prénom
-                  </label>
-                  <div className="relative">
-                    <input
-                      required
-                      type="text"
-                      id="name"
-                      className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
-                      placeholder="Jean Dupont"
-                    />
-                    <User className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
+          <div className="grid lg:grid-cols-12 gap-8 items-center">
+
+            {/* Feature List Left (5 cols) */}
+            <div className="lg:col-span-5 space-y-3">
+              <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
+                <div className="flex items-center gap-3 mb-1">
+                  <div className="p-2 rounded-xl bg-emerald-50 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400">
+                    <Activity className="h-4 w-4" />
                   </div>
+                  <h4 className="text-sm font-bold text-slate-900 dark:text-white">Suivi de Santé & Disponibilité</h4>
                 </div>
+                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
+                  Visualisez l'état de marche de vos serveurs et de vos accès avec des indicateurs vert émeraude simples à lire.
+                </p>
+              </div>
 
-                <div>
-                  <label htmlFor="company" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
-                    Société / Cabinet
-                  </label>
-                  <div className="relative">
-                    <input
-                      required
-                      type="text"
-                      id="company"
-                      className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
-                      placeholder="Cabinet Dupont & Associés"
-                    />
-                    <Building className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
+              <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
+                <div className="flex items-center gap-3 mb-1">
+                  <div className="p-2 rounded-xl bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400">
+                    <Shield className="h-4 w-4" />
                   </div>
+                  <h4 className="text-sm font-bold text-slate-900 dark:text-white">Sauvegardes & Menaces Neutralisées</h4>
                 </div>
+                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
+                  Consultez la date exacte de votre dernière sauvegarde et le nombre d'intrusions bloquées ce mois-ci.
+                </p>
               </div>
 
-              <div className="grid sm:grid-cols-2 gap-4">
-                <div>
-                  <label htmlFor="email" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
-                    Email professionnel
-                  </label>
-                  <div className="relative">
-                    <input
-                      required
-                      type="email"
-                      id="email"
-                      className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
-                      placeholder="jean@dupont-avocats.be"
-                    />
-                    <Mail className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
+              <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm">
+                <div className="flex items-center gap-3 mb-1">
+                  <div className="p-2 rounded-xl bg-indigo-50 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400">
+                    <Lock className="h-4 w-4" />
                   </div>
+                  <h4 className="text-sm font-bold text-slate-900 dark:text-white">Coffre-Fort & Canal Direct</h4>
                 </div>
-
-                <div>
-                  <label htmlFor="size" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
-                    Taille du parc informatique
-                  </label>
-                  <select
-                    id="size"
-                    className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
-                  >
-                    <option>5 à 15 postes</option>
-                    <option>15 à 50 postes</option>
-                    <option>Plus de 50 postes</option>
-                  </select>
-                </div>
+                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-9">
+                  Stockez vos documents importants et contactez directement votre spécialiste d'un simple clic.
+                </p>
               </div>
-
-              <div>
-                <label htmlFor="message" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
-                  Votre besoin principal
-                </label>
-                <div className="relative">
-                  <textarea
-                    required
-                    id="message"
-                    rows={4}
-                    className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs resize-none transition-all"
-                    placeholder="Décrivez brièvement votre informatique actuelle..."
-                  />
-                  <MessageSquare className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
-                </div>
-              </div>
-
-              <button
-                disabled={formStatus === 'submitting'}
-                type="submit"
-                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3.5 rounded-full transition-all flex items-center justify-center gap-2 shadow-sm disabled:opacity-70 text-xs active:scale-95"
-              >
-                {formStatus === 'submitting' ? 'Envoi en cours...' : 'Demander mon diagnostic offert'}
-              </button>
-            </form>
-          )}
-        </div>
-      </section>
-
-      {/* FOOTER (Style Google Corporate Minimal Footer) */}
-      <footer className="bg-[#f0f4f9] dark:bg-slate-950 border-t border-slate-200/80 dark:border-slate-900 py-10 text-xs text-slate-600 dark:text-slate-400">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
-          <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
-            <div className="flex items-center gap-2">
-              <div className="h-6 w-6 rounded-full bg-blue-600 flex items-center justify-center text-white">
-                <Shield className="h-3.5 w-3.5" />
-              </div>
-              <span className="font-bold text-slate-900 dark:text-white text-sm">GISE SRL</span>
             </div>
 
-            <div className="flex flex-wrap justify-center gap-x-6 gap-y-2 font-medium">
-              <Link to="/mentions-legales" className="hover:text-slate-900 dark:hover:text-white transition-colors">Mentions Légales</Link>
-              <Link to="/politique-confidentialite" className="hover:text-slate-900 dark:hover:text-white transition-colors">Confidentialité</Link>
-              <Link to="/politique-cookies" className="hover:text-slate-900 dark:hover:text-white transition-colors">Cookies</Link>
-              <button onClick={handleResetCookies} className="hover:text-slate-900 dark:hover:text-white underline underline-offset-4">Gérer mes cookies</button>
-              <Link to="/cgs" className="hover:text-slate-900 dark:hover:text-white transition-colors">CGS</Link>
+            {/* UI Box Preview (Style Google Admin Console) (7 cols) */}
+            <div className="lg:col-span-7 bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-lg space-y-5">
+
+              {/* App Header Bar */}
+              <div className="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-4">
+                <div className="flex items-center gap-2.5">
+                  <div className="h-3 w-3 rounded-full bg-emerald-500" />
+                  <span className="text-xs font-bold text-slate-900 dark:text-white">AEGIS Command Center</span>
+                </div>
+                <span className="text-[11px] font-semibold text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/80 px-3 py-1 rounded-full border border-emerald-200/60 dark:border-emerald-800/60">
+                  ● Système Protégé
+                </span>
+              </div>
+
+              {/* Metric Rows */}
+              <div className="space-y-3">
+                <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
+                  <div className="flex items-center gap-3">
+                    <Server className="h-4 w-4 text-blue-600" />
+                    <span className="font-semibold text-slate-800 dark:text-slate-200">Serveurs Cloud Privé (Belgique)</span>
+                  </div>
+                  <span className="font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-100 dark:bg-emerald-950 px-2.5 py-1 rounded-full">
+                    100% Opérationnel
+                  </span>
+                </div>
+
+                <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
+                  <div className="flex items-center gap-3">
+                    <HardDrive className="h-4 w-4 text-emerald-600" />
+                    <span className="font-semibold text-slate-800 dark:text-slate-200">Sauvegarde Automatique Hors-Site</span>
+                  </div>
+                  <span className="font-bold text-slate-600 dark:text-slate-400">
+                    Dernier check : Aujourd'hui à 04h00
+                  </span>
+                </div>
+
+                <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 flex items-center justify-between text-xs">
+                  <div className="flex items-center gap-3">
+                    <ShieldCheck className="h-4 w-4 text-indigo-600" />
+                    <span className="font-semibold text-slate-800 dark:text-slate-200">Tentatives d'Intrusion Bloquées (30j)</span>
+                  </div>
+                  <span className="font-bold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950 px-2.5 py-1 rounded-full">
+                    1 420 Attaques Neutralisées
+                  </span>
+                </div>
+              </div>
+
+              <div className="p-4 rounded-2xl bg-blue-50/50 dark:bg-blue-950/30 border border-blue-100 dark:border-blue-900/50 text-xs text-slate-600 dark:text-slate-300 flex items-center gap-2.5">
+                <Zap className="h-4 w-4 text-blue-600 shrink-0" />
+                <span><em>Demande d'évolution : demandez un nouvel accès ou une extension en 1 clic depuis votre espace.</em></span>
+              </div>
+
+            </div>
+
+          </div>
+        </section>
+
+        {/* --- SECTEURS D'ACTIVITÉ (Google Material Category Cards) --- */}
+        <section id="secteurs" className="py-20 bg-white dark:bg-slate-900/40 border-t border-slate-200/80 dark:border-slate-800/80">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
+              <span className="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400">
+                Secteurs Privilégiés
+              </span>
+              <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
+                Adapté aux exigences de votre profession
+              </h2>
+            </div>
+
+            <div className="grid md:grid-cols-3 gap-6">
+
+              {/* Avocats */}
+              <div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
+                <div className="h-12 w-12 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center">
+                  <Scale className="w-6 h-6" />
+                </div>
+                <h3 className="text-xl font-bold text-slate-900 dark:text-white">Cabinets d'Avocats & Notaires</h3>
+                <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                  <strong>Secret professionnel :</strong> Connexion chiffrée à distance depuis les tribunaux. Garantie de confidentialité absolue pour vos pièces de procédure.
+                </p>
+                <div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Coffre-fort chiffré</span>
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Accès Nomade</span>
+                </div>
+              </div>
+
+              {/* Comptables */}
+              <div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
+                <div className="h-12 w-12 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center">
+                  <Calculator className="w-6 h-6" />
+                </div>
+                <h3 className="text-xl font-bold text-slate-900 dark:text-white">Fiduciaires & Comptables</h3>
+                <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                  <strong>Sérénité pendant les clôtures :</strong> Protection contre les blocages malveillants de vos fichiers comptables. Zéro mauvaise surprise fiscale.
+                </p>
+                <div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Sauvegardes Inviolables</span>
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Uptime Garantit</span>
+                </div>
+              </div>
+
+              {/* Santé */}
+              <div className="p-8 rounded-[28px] bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800 space-y-4">
+                <div className="h-12 w-12 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
+                  <Stethoscope className="w-6 h-6" />
+                </div>
+                <h3 className="text-xl font-bold text-slate-900 dark:text-white">Cliniques Privées & Santé</h3>
+                <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+                  <strong>Données de santé :</strong> Protection renforcée de vos dossiers patients et de vos ordinateurs de consultation contre les intrusions.
+                </p>
+                <div className="pt-2 flex flex-wrap gap-2 text-[11px] font-medium text-slate-600 dark:text-slate-400">
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Données Protégées</span>
+                  <span className="px-3 py-1 rounded-full bg-white dark:bg-slate-900">Réseau Isolé</span>
+                </div>
+              </div>
+
             </div>
           </div>
+        </section>
 
-          <div className="pt-4 border-t border-slate-200/60 dark:border-slate-900 flex flex-col sm:flex-row justify-between items-center gap-2 text-[11px] text-slate-500">
-            <p className="flex items-center gap-1.5">
-              <Server className="w-3.5 h-3.5 text-blue-600" />
-              Infrastructure souveraine 100% hébergée en Belgique.
+        {/* --- SECTION COMPARATIVE (Google Comparison Style) --- */}
+        <section id="comparatif" className="py-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16 space-y-2">
+            <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
+              Pourquoi choisir GISE plutôt qu'un prestataire classique ?
+            </h2>
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              Les dépanneurs traditionnels interviennent quand la panne est là. GISE prend un engagement de responsabilité.
             </p>
-            <p>© {new Date().getFullYear()} GISE Cybersecurity. Tous droits réservés.</p>
           </div>
-        </div>
-      </footer>
 
-      {/* COOKIE BANNER (Google Bottom Toast Style) */}
-      {cookieConsent === null && (
-        <div className="fixed bottom-4 left-4 right-4 sm:left-auto sm:right-6 sm:max-w-sm z-50 animate-in slide-in-from-bottom-6 duration-300">
-          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl rounded-3xl p-5 space-y-3">
-            <div className="space-y-1">
-              <h4 className="text-xs font-bold text-slate-900 dark:text-white">Respect de votre vie privée</h4>
-              <p className="text-[11px] text-slate-600 dark:text-slate-400 leading-relaxed">
-                GISE utilise uniquement des cookies strictement nécessaires au fonctionnement du site et à la sécurité. Aucun traceur publicitaire n'est déployé.
+          <div className="grid md:grid-cols-2 gap-6">
+            {/* Classique */}
+            <div className="p-8 rounded-[28px] bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 space-y-4">
+              <h3 className="font-bold text-slate-500 text-xs uppercase tracking-wider">Prestataire Classique</h3>
+              <ul className="space-y-3.5 text-xs text-slate-600 dark:text-slate-400 font-medium">
+                <li className="flex items-start gap-2.5">
+                  <X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
+                  <span>Intervention réactive (dépanne une fois la panne survenue)</span>
+                </li>
+                <li className="flex items-start gap-2.5">
+                  <X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
+                  <span>Données hébergées à l'étranger sans garantie de confidentialité</span>
+                </li>
+                <li className="flex items-start gap-2.5">
+                  <X className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
+                  <span>Facture mensuelle floue sans vision sur les menaces bloquées</span>
+                </li>
+              </ul>
+            </div>
+
+            {/* GISE */}
+            <div className="p-8 rounded-[28px] bg-blue-50/60 dark:bg-blue-950/30 border-2 border-blue-600/40 space-y-4 relative">
+              <span className="absolute -top-3 right-6 bg-blue-600 text-white text-[10px] font-bold uppercase tracking-wider px-3 py-0.5 rounded-full shadow-sm">
+                Recommandé
+              </span>
+              <h3 className="font-bold text-blue-600 dark:text-blue-400 text-xs uppercase tracking-wider">Offre GISE & AEGIS</h3>
+              <ul className="space-y-3.5 text-xs text-slate-800 dark:text-slate-200 font-semibold">
+                <li className="flex items-start gap-2.5">
+                  <Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
+                  <span>Gestion proactive et surveillance 24h/24 pour éviter les pannes</span>
+                </li>
+                <li className="flex items-start gap-2.5">
+                  <Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
+                  <span>Serveurs et sauvegardes 100% situés physiquement en Belgique</span>
+                </li>
+                <li className="flex items-start gap-2.5">
+                  <Check className="h-4 w-4 text-emerald-600 shrink-0 mt-0.5" />
+                  <span>Tableau de bord AEGIS en temps réel pour une transparence totale</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        {/* FORMULAIRE DE CONTACT (Google Forms Outlined Material Style) */}
+        <section id="contact" className="py-24 bg-white dark:bg-slate-900/60 border-t border-slate-200/80 dark:border-slate-800">
+          <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
+
+            <div className="text-center mb-12 space-y-2">
+              <h2 className="text-3xl font-bold text-slate-900 dark:text-white">
+                Demandez votre diagnostic offert
+              </h2>
+              <p className="text-slate-600 dark:text-slate-400 text-sm">
+                Un premier bilan rapide de votre infrastructure, sans aucun engagement.
               </p>
             </div>
-            <div className="flex justify-end gap-2 pt-1">
-              <button
-                onClick={handleRefuseCookies}
-                className="px-4 py-2 text-xs font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors"
-              >
-                Refuser
-              </button>
-              <button
-                onClick={handleAcceptCookies}
-                className="px-5 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-full transition-colors"
-              >
-                Accepter
-              </button>
+
+            {formStatus === 'success' ? (
+              <div className="bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800 p-8 rounded-[28px] text-center space-y-3">
+                <CheckCircle className="w-12 h-12 text-emerald-600 mx-auto" />
+                <h3 className="text-xl font-bold text-slate-900 dark:text-white">Demande bien reçue !</h3>
+                <p className="text-xs text-slate-600 dark:text-slate-300 max-w-md mx-auto">
+                  Merci. Un spécialiste GISE étudiera vos besoins et vous recontactera très rapidement.
+                </p>
+                <button
+                  onClick={() => setFormStatus('idle')}
+                  className="mt-4 text-xs font-semibold text-blue-600 hover:underline"
+                >
+                  Envoyer un autre message
+                </button>
+              </div>
+            ) : (
+              <form onSubmit={handleContactSubmit} className="space-y-5 bg-[#f0f4f9] dark:bg-slate-950 p-8 sm:p-10 rounded-[28px]">
+
+                <div className="grid sm:grid-cols-2 gap-4">
+                  <div>
+                    <label htmlFor="name" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
+                      Nom & Prénom
+                    </label>
+                    <div className="relative">
+                      <input
+                        required
+                        type="text"
+                        id="name"
+                        className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
+                        placeholder="Jean Dupont"
+                      />
+                      <User className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
+                    </div>
+                  </div>
+
+                  <div>
+                    <label htmlFor="company" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
+                      Société / Cabinet
+                    </label>
+                    <div className="relative">
+                      <input
+                        required
+                        type="text"
+                        id="company"
+                        className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
+                        placeholder="Cabinet Dupont & Associés"
+                      />
+                      <Building className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid sm:grid-cols-2 gap-4">
+                  <div>
+                    <label htmlFor="email" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
+                      Email professionnel
+                    </label>
+                    <div className="relative">
+                      <input
+                        required
+                        type="email"
+                        id="email"
+                        className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
+                        placeholder="jean@dupont-avocats.be"
+                      />
+                      <Mail className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
+                    </div>
+                  </div>
+
+                  <div>
+                    <label htmlFor="size" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
+                      Taille du parc informatique
+                    </label>
+                    <select
+                      id="size"
+                      className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs transition-all"
+                    >
+                      <option>5 à 15 postes</option>
+                      <option>15 à 50 postes</option>
+                      <option>Plus de 50 postes</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="message" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
+                    Votre besoin principal
+                  </label>
+                  <div className="relative">
+                    <textarea
+                      required
+                      id="message"
+                      rows={4}
+                      className="w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 rounded-2xl px-4 py-3 pl-10 text-slate-900 dark:text-white focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20 text-xs resize-none transition-all"
+                      placeholder="Décrivez brièvement votre informatique actuelle..."
+                    />
+                    <MessageSquare className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
+                  </div>
+                </div>
+
+                <button
+                  disabled={formStatus === 'submitting'}
+                  type="submit"
+                  className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3.5 rounded-full transition-all flex items-center justify-center gap-2 shadow-sm disabled:opacity-70 text-xs active:scale-95"
+                >
+                  {formStatus === 'submitting' ? 'Envoi en cours...' : 'Demander mon diagnostic offert'}
+                </button>
+              </form>
+            )}
+          </div>
+        </section>
+
+        {/* FOOTER (Style Google Corporate Minimal Footer) */}
+        <footer className="bg-[#f0f4f9] dark:bg-slate-950 border-t border-slate-200/80 dark:border-slate-900 py-10 text-xs text-slate-600 dark:text-slate-400">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
+            <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
+              <div className="flex items-center gap-2">
+                <div className="h-6 w-6 rounded-full bg-blue-600 flex items-center justify-center text-white">
+                  <Shield className="h-3.5 w-3.5" />
+                </div>
+                <span className="font-bold text-slate-900 dark:text-white text-sm">GISE SRL</span>
+              </div>
+
+              <div className="flex flex-wrap justify-center gap-x-6 gap-y-2 font-medium">
+                <Link to="/mentions-legales" className="hover:text-slate-900 dark:hover:text-white transition-colors">Mentions Légales</Link>
+                <Link to="/politique-confidentialite" className="hover:text-slate-900 dark:hover:text-white transition-colors">Confidentialité</Link>
+                <Link to="/politique-cookies" className="hover:text-slate-900 dark:hover:text-white transition-colors">Cookies</Link>
+                <button onClick={handleResetCookies} className="hover:text-slate-900 dark:hover:text-white underline underline-offset-4">Gérer mes cookies</button>
+                <Link to="/cgs" className="hover:text-slate-900 dark:hover:text-white transition-colors">CGS</Link>
+              </div>
+            </div>
+
+            <div className="pt-4 border-t border-slate-200/60 dark:border-slate-900 flex flex-col sm:flex-row justify-between items-center gap-2 text-[11px] text-slate-500">
+              <p className="flex items-center gap-1.5">
+                <Server className="w-3.5 h-3.5 text-blue-600" />
+                Infrastructure souveraine 100% hébergée en Belgique.
+              </p>
+              <p>© {new Date().getFullYear()} GISE Cybersecurity. Tous droits réservés.</p>
             </div>
           </div>
-        </div>
-      )}
+        </footer>
 
+        {/* COOKIE BANNER (Google Bottom Toast Style) */}
+        {cookieConsent === null && (
+          <div className="fixed bottom-4 left-4 right-4 sm:left-auto sm:right-6 sm:max-w-sm z-50 animate-in slide-in-from-bottom-6 duration-300">
+            <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl rounded-3xl p-5 space-y-3">
+              <div className="space-y-1">
+                <h4 className="text-xs font-bold text-slate-900 dark:text-white">Respect de votre vie privée</h4>
+                <p className="text-[11px] text-slate-600 dark:text-slate-400 leading-relaxed">
+                  GISE utilise uniquement des cookies strictement nécessaires au fonctionnement du site et à la sécurité. Aucun traceur publicitaire n'est déployé.
+                </p>
+              </div>
+              <div className="flex justify-end gap-2 pt-1">
+                <button
+                  onClick={handleRefuseCookies}
+                  className="px-4 py-2 text-xs font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors"
+                >
+                  Refuser
+                </button>
+                <button
+                  onClick={handleAcceptCookies}
+                  className="px-5 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-full transition-colors"
+                >
+                  Accepter
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+      </div>
     </div>
   );
 }
\ No newline at end of file