From 32e1068ace21f4385d1796c04c039954521fc823 Mon Sep 17 00:00:00 2001
From: LathanDevers <maxime.daniels@outlook.com>
Date: Tue, 28 Jul 2026 18:57:59 +0200
Subject: [PATCH 1/3] Contact

---
 src/index.css                  |  7 ++++
 src/pages/GiseLandingPage.tsx  | 68 ++++++++++++++++++++++++++--------
 src/pages/PolitiqueCookies.tsx | 20 +++++-----
 3 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/src/index.css b/src/index.css
index 7fdd436..9a04298 100644
--- a/src/index.css
+++ b/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;
diff --git a/src/pages/GiseLandingPage.tsx b/src/pages/GiseLandingPage.tsx
index b4cc83f..bb1bdb9 100644
--- a/src/pages/GiseLandingPage.tsx
+++ b/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">
-              <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>
+            <div className="p-8 rounded-[28px] bg-blue-50 dark:bg-blue-950 border-2 border-blue-600/40 space-y-4 relative">
+
               <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) */}
-        <section id="contact" className="py-24 bg-white dark:bg-slate-900/60 border-t border-slate-200/80 dark:border-slate-800">
+        {/* FORMULAIRE DE CONTACT (Web3Forms + Google Material Style) */}
+        <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>15 à 50 postes</option>
-                      <option>Plus de 50 postes</option>
+                      <option value="5 à 15 postes">5 à 15 postes</option>
+                      <option value="15 à 50 postes">15 à 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">
diff --git a/src/pages/PolitiqueCookies.tsx b/src/pages/PolitiqueCookies.tsx
index 8913e7d..224c803 100644
--- a/src/pages/PolitiqueCookies.tsx
+++ b/src/pages/PolitiqueCookies.tsx
@@ -1,11 +1,11 @@
-import { 
-  Shield, 
-  ArrowLeft, 
-  Cookie, 
-  Info, 
-  CheckCircle, 
-  Moon, 
-  Sun 
+import {
+  Shield,
+  ArrowLeft,
+  Cookie,
+  Info,
+  CheckCircle,
+  Moon,
+  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>
-- 
2.47.3


From 437175061308957780bc9d0d58a2421614009e3b Mon Sep 17 00:00:00 2001
From: LathanDevers <maxime.daniels@outlook.com>
Date: Tue, 28 Jul 2026 18:59:19 +0200
Subject: [PATCH 2/3] Contact

---
 src/pages/GiseLandingPage.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/pages/GiseLandingPage.tsx b/src/pages/GiseLandingPage.tsx
index bb1bdb9..5ca4fb1 100644
--- a/src/pages/GiseLandingPage.tsx
+++ b/src/pages/GiseLandingPage.tsx
@@ -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">
 
-- 
2.47.3


From e7ff4c2f969db6bde72cccdf8dee9010271ad800 Mon Sep 17 00:00:00 2001
From: LathanDevers <maxime.daniels@outlook.com>
Date: Tue, 28 Jul 2026 18:59:53 +0200
Subject: [PATCH 3/3] Contact

---
 src/pages/GiseLandingPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/GiseLandingPage.tsx b/src/pages/GiseLandingPage.tsx
index 5ca4fb1..6e1a475 100644
--- a/src/pages/GiseLandingPage.tsx
+++ b/src/pages/GiseLandingPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Shield,
   Server,
-- 
2.47.3