src/index.css

@@ -3,6 +3,13 @@
 /* Configuration pour forcer le mode sombre via une classe .dark */
 @custom-variant dark (&:where(.dark, .dark *));
 
+@layer base {
+  :root {
+    --color-gise-blue: #1a73e8;
+    --color-gise-emerald: #10b981;
+  }
+}
+
 @theme {
   --color-gise-accent: #2563eb;
   --color-gise-accentHover: #1d4ed8;

src/pages/GiseLandingPage.tsx

@@ -378,7 +378,7 @@ export default function GiseLandingPage() {
         </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">
+        <section id="secteurs" className="py-20 bg-white/60 dark:bg-slate-900/85 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">
@@ -472,10 +472,8 @@ export default function GiseLandingPage() {
             </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">
+            <div className="p-8 rounded-[28px] bg-blue-50 dark:bg-blue-950 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">
@@ -495,16 +493,16 @@ export default function GiseLandingPage() {
           </div>
         </section>
 
-        {/* FORMULAIRE DE CONTACT (Google Forms Outlined Material Style) */}
+        {/* FORMULAIRE DE CONTACT (Web3Forms + Google 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">
+        <section id="contact" className="py-24 bg-white dark:bg-slate-900 border-t border-slate-200/80 dark:border-slate-800 transition-colors">
           <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
+                Demandez votre diagnostic
               </h2>
               <p className="text-slate-600 dark:text-slate-400 text-sm">
-                Un premier bilan rapide de votre infrastructure, sans aucun engagement.
+                Un premier bilan rapide de votre infrastructure, sans engagement.
               </p>
             </div>
 
@@ -517,13 +515,43 @@ export default function GiseLandingPage() {
                 </p>
                 <button
                   onClick={() => setFormStatus('idle')}
-                  className="mt-4 text-xs font-semibold text-blue-600 hover:underline"
+                  className="mt-4 text-xs font-semibold text-blue-600 dark:text-blue-400 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]">
+              <form
+                onSubmit={async (event) => {
+                  event.preventDefault();
+                  setFormStatus('submitting');
+
+                  // Logique officielle Web3Forms
+                  const formData = new FormData(event.currentTarget);
+                  formData.append("access_key", "6d360b7b-731f-4cbc-b6d1-9e9f21504bcc"); // <-- Votre clé
+                  formData.append("subject", "Demande de diagnostic (Site GISE)");
+
+                  try {
+                    const response = await fetch("https://api.web3forms.com/submit", {
+                      method: "POST",
+                      body: formData
+                    });
+
+                    const data = await response.json();
+
+                    if (data.success) {
+                      setFormStatus('success');
+                    } else {
+                      setFormStatus('idle');
+                      alert("Erreur lors de l'envoi : " + data.message);
+                    }
+                  } catch (error) {
+                    setFormStatus('idle');
+                    alert("Erreur de connexion. Veuillez réessayer.");
+                  }
+                }}
+                className="space-y-5 bg-[#f0f4f9] dark:bg-slate-950 p-8 sm:p-10 rounded-[28px] shadow-sm"
+              >
 
                 <div className="grid sm:grid-cols-2 gap-4">
                   <div>
@@ -535,6 +563,7 @@ export default function GiseLandingPage() {
                         required
                         type="text"
                         id="name"
+                        name="name" // Indispensable pour Web3Forms
                         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"
                       />
@@ -551,6 +580,7 @@ export default function GiseLandingPage() {
                         required
                         type="text"
                         id="company"
+                        name="company" // Indispensable
                         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"
                       />
@@ -569,6 +599,7 @@ export default function GiseLandingPage() {
                         required
                         type="email"
                         id="email"
+                        name="email" // Indispensable
                         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"
                       />
@@ -582,11 +613,12 @@ export default function GiseLandingPage() {
                     </label>
                     <select
                       id="size"
+                      name="taille_parc" // Nom du champ dans le mail
                       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 value="5 à 15 postes">5 à 15 postes</option>
-                      <option>15 à 50 postes</option>
+                      <option value="15 à 50 postes">15 à 50 postes</option>
-                      <option>Plus de 50 postes</option>
+                      <option value="Plus de 50 postes">Plus de 50 postes</option>
                     </select>
                   </div>
                 </div>
@@ -599,6 +631,7 @@ export default function GiseLandingPage() {
                     <textarea
                       required
                       id="message"
+                      name="message" // Indispensable
                       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..."
@@ -607,12 +640,15 @@ export default function GiseLandingPage() {
                   </div>
                 </div>
 
+                {/* Protection Anti-spam native de Web3Forms */}
+                <input type="checkbox" name="botcheck" className="hidden" style={{ display: 'none' }} />
+
                 <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'}
+                  {formStatus === 'submitting' ? 'Envoi en cours...' : 'Demander mon diagnostic'}
                 </button>
               </form>
             )}
@@ -627,7 +663,7 @@ export default function GiseLandingPage() {
                 <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>
+                <span className="font-bold text-slate-900 dark:text-white text-sm">GISE</span>
               </div>
 
               <div className="flex flex-wrap justify-center gap-x-6 gap-y-2 font-medium">

src/pages/PolitiqueCookies.tsx

@@ -1,11 +1,11 @@
-import { 
+import {
-  Shield, 
+  Shield,
-  ArrowLeft, 
+  ArrowLeft,
-  Cookie, 
+  Cookie,
-  Info, 
+  Info,
-  CheckCircle, 
+  CheckCircle,
-  Moon, 
+  Moon,
-  Sun 
+  Sun
 } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { useTheme } from '../hooks/useTheme';
@@ -19,7 +19,7 @@ export default function PolitiqueCookies() {
       {/* HEADER DE NAVIGATION (Style Google Pill Bar) */}
       <header className="sticky top-0 z-40 p-3 sm:p-4">
         <div className="max-w-5xl 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">
-          
+
           <Link
             to="/"
             className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-xs font-semibold px-3.5 py-1.5 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800"
@@ -82,7 +82,7 @@ export default function PolitiqueCookies() {
                 1. Qu'est-ce qu'un cookie ?
               </h2>
             </div>
-            
+
             <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
               Un cookie est un petit fichier texte déposé sur votre terminal (ordinateur, tablette, smartphone) lors de la visite d'un site web. Il permet au site de mémoriser vos préférences d'affichage (comme le choix du mode clair/sombre) pour faciliter votre navigation ultérieure.
             </p>