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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Shield,
   Server,
@@ -66,12 +66,6 @@ export default function GiseLandingPage() {
     setCookieConsent(null);
   };
 
-  const handleContactSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setFormStatus('submitting');
-    setTimeout(() => setFormStatus('success'), 1500);
-  };
-
   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">
 
@@ -378,7 +372,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 +466,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 +487,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 +509,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 +557,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 +574,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 +593,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 +607,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 +625,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 +634,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 +657,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">