change design

src/pages/PolitiqueConfidentialite.tsx

@@ -1,25 +1,44 @@
-import { Shield, ArrowLeft, Database, UserCheck, Scale, Server, Moon, Sun } from 'lucide-react';
+import React from 'react';
+import { 
+  Shield, 
+  ArrowLeft, 
+  Database, 
+  UserCheck, 
+  Scale, 
+  Server, 
+  Moon, 
+  Sun, 
+  ShieldCheck,
+  Lock,
+  Mail,
+  ExternalLink
+} from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { useTheme } from '../hooks/useTheme';
 
 export default function PolitiqueConfidentialite() {
   const { isDark, toggleTheme } = useTheme();
-  return (
-    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-700 dark:text-slate-300 selection:bg-gise-accent selection:text-white transition-colors duration-300">
 
-      {/* HEADER DE NAVIGATION */}
-      <header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-30 transition-colors">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
-          <Link to="/" className="inline-flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors text-sm font-medium">
+  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">
+
+      {/* 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"
+          >
             <ArrowLeft className="w-4 h-4" />
-            Retour à l'accueil
+            <span>Retour à l'accueil</span>
           </Link>
 
-          <div className="flex items-center gap-6">
+          <div className="flex items-center gap-3">
             {/* BOUTON THEME */}
             <button
               onClick={toggleTheme}
-              className="p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:text-gise-accent dark:hover:text-white transition-colors"
+              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" />}
@@ -27,115 +46,178 @@ export default function PolitiqueConfidentialite() {
 
             {/* LOGO */}
             <div className="flex items-center gap-2">
-              <Shield className="h-6 w-6 text-gise-accent" />
-              <span className="text-xl font-bold tracking-wider text-slate-900 dark:text-white">GISE</span>
+              <div className="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white shadow-sm">
+                <Shield className="h-4 w-4" />
+              </div>
+              <span className="text-lg font-bold tracking-tight text-slate-900 dark:text-white">
+                GISE
+              </span>
             </div>
           </div>
         </div>
       </header>
 
-      {/* CONTENU */}
-      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      {/* CONTENU PRINCIPAL */}
+      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
 
-        <div className="border-b border-slate-200 dark:border-slate-800 pb-8 mb-12">
-          <h1 className="text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight mb-4">Politique de Confidentialité</h1>
-          <p className="text-slate-500 dark:text-slate-400">
-            Dernière mise à jour : {new Date().toLocaleDateString('fr-BE')}
-          </p>
-          <p className="text-slate-600 dark:text-slate-400 mt-4 leading-relaxed">
-            En tant que cabinet d'expertise en cybersécurité, la protection de vos données personnelles n'est pas seulement une obligation légale (RGPD), c'est le cœur de notre métier et de notre engagement envers vous.
+        {/* Header Titre */}
+        <div className="mb-10 space-y-3">
+          <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-blue-50 dark:bg-blue-950/80 border border-blue-200/50 dark:border-blue-800/50 text-xs font-semibold text-blue-600 dark:text-blue-400">
+            <ShieldCheck className="w-3.5 h-3.5" />
+            <span>Protection des Données & RGPD</span>
+          </div>
+          <h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
+            Politique de Confidentialité
+          </h1>
+          <div className="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 pt-1">
+            <span className="px-2.5 py-0.5 rounded-full bg-slate-200/60 dark:bg-slate-800 font-medium">
+              Mise à jour : {new Date().toLocaleDateString('fr-BE')}
+            </span>
+          </div>
+          <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl pt-2">
+            En tant que cabinet d'expertise en cybersécurité, la protection de vos données personnelles n'est pas seulement une obligation légale, c'est le cœur de notre métier et de notre engagement de souveraineté.
           </p>
         </div>
 
-        <div className="space-y-12 leading-relaxed text-sm">
+        <div className="space-y-6">
 
-          {/* SECTION 1 */}
-          {/*<section>
-            <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
-              <Lock className="w-5 h-5 text-gise-accent" />
-              Responsable du traitement
-            </h2>
-            <div className="bg-white dark:bg-slate-900 p-4 rounded-lg border border-slate-200 dark:border-slate-800 space-y-1 transition-colors">
-              <p><strong className="text-slate-900 dark:text-white">GISE SRL</strong></p>
-              <p>Rue Exemple 123, 1000 Bruxelles, Belgique</p>
-              <p>BCE : 0123.456.789</p>
-              <p>E-mail : privacy@gise.be</p>
+          {/* SECTION 1 - DONNÉES COLLECTÉES ET FINALITÉS */}
+          <section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-5">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-2xl bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
+                <Database className="w-5 h-5" />
+              </div>
+              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+                1. Données collectées et finalités
+              </h2>
             </div>
-          </section>*/}
 
-          {/* SECTION 2 */}
-          <section>
-            <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
-              <Database className="w-5 h-5 text-gise-accent" />
-              Données collectées et finalités
-            </h2>
-            <div className="space-y-4">
-              <div className="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
-                <h3 className="font-bold text-slate-900 dark:text-white mb-2">A. Formulaire de contact et demandes d'audit</h3>
-                <ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1">
-                  <li><strong>Données :</strong> Nom, e-mail professionnel, entreprise, contenu du message.</li>
-                  <li><strong>Finalité :</strong> Répondre à vos demandes ou établir un devis.</li>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 space-y-2">
+                <h3 className="font-bold text-sm text-slate-900 dark:text-white flex items-center gap-2">
+                  <Mail className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                  Formulaires & Demandes d'audit
+                </h3>
+                <ul className="text-xs text-slate-600 dark:text-slate-400 space-y-1.5 leading-relaxed">
+                  <li><strong className="text-slate-800 dark:text-slate-200">Données :</strong> Nom, e-mail professionnel, nom de l'entreprise, taille du parc, message.</li>
+                  <li><strong className="text-slate-800 dark:text-slate-200">Finalité :</strong> Répondre à vos demandes de diagnostic ou établir un devis d'infogérance.</li>
                 </ul>
               </div>
-              <div className="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 transition-colors">
-                <h3 className="font-bold text-slate-900 dark:text-white mb-2">B. Sécurité du site et infrastructure</h3>
-                <ul className="list-disc list-inside text-slate-600 dark:text-slate-400 space-y-1">
-                  <li><strong>Données :</strong> Adresse IP, logs de connexion, agent utilisateur.</li>
-                  <li><strong>Finalité :</strong> Détecter et prévenir les cyberattaques.</li>
+
+              <div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 space-y-2">
+                <h3 className="font-bold text-sm text-slate-900 dark:text-white flex items-center gap-2">
+                  <Lock className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
+                  Sécurité & Infrastructure
+                </h3>
+                <ul className="text-xs text-slate-600 dark:text-slate-400 space-y-1.5 leading-relaxed">
+                  <li><strong className="text-slate-800 dark:text-slate-200">Données :</strong> Adresse IP anonymisée, logs de connexion, agent navigateur.</li>
+                  <li><strong className="text-slate-800 dark:text-slate-200">Finalité :</strong> Prévenir les tentatives d'intrusion et garantir la stabilité du site.</li>
                 </ul>
               </div>
             </div>
           </section>
 
-          {/* SECTION 3 */}
-          <section>
-            <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
-              <Server className="w-5 h-5 text-gise-accent" />
-              Hébergement et partage des données
-            </h2>
-            <p className="mb-3">
-              Vos données ne sont <strong>jamais vendues, louées ou cédées</strong> à des tiers à des fins commerciales.
-            </p>
-            <p>
-              Toutes les données collectées via ce site sont hébergées sur nos propres serveurs physiques (Bare-Metal) localisés en <strong>Belgique</strong>.
+          {/* SECTION 2 - HÉBERGEMENT ET PARTAGE DES DONNÉES */}
+          <section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-2xl bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
+                <Server className="w-5 h-5" />
+              </div>
+              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+                2. Hébergement et non-partage des données
+              </h2>
+            </div>
+
+            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+              Vos données personnelles ne sont <strong className="text-slate-900 dark:text-white font-semibold">jamais vendues, louées ou cédées</strong> à des tiers à des fins commerciales ou publicitaires.
             </p>
+
+            <div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 text-xs sm:text-sm space-y-2 text-slate-700 dark:text-slate-300">
+              <p className="flex items-center gap-2 font-semibold text-slate-900 dark:text-white">
+                <span className="w-2 h-2 rounded-full bg-emerald-500" />
+                Hébergement 100% Souverain Belge
+              </p>
+              <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed pl-4">
+                Toutes les données collectées au travers de nos formulaires et de la plateforme AEGIS sont hébergées sur notre propre infrastructure physique (Bare-Metal) localisée en Belgique, à l'abri du <em>Cloud Act</em> américain.
+              </p>
+            </div>
           </section>
 
-          {/* SECTION 4 */}
-          <section>
-            <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
-              <UserCheck className="w-5 h-5 text-gise-accent" />
-              Vos droits (Conformité RGPD)
-            </h2>
-            <ul className="grid sm:grid-cols-2 gap-3 mb-4">
-              <li className="bg-white dark:bg-slate-900 p-3 rounded border border-slate-200 dark:border-slate-800 transition-colors"><strong className="text-slate-900 dark:text-white">Droit d'accès :</strong> Obtenir une copie de vos données.</li>
-              <li className="bg-white dark:bg-slate-900 p-3 rounded border border-slate-200 dark:border-slate-800 transition-colors"><strong className="text-slate-900 dark:text-white">Droit de rectification :</strong> Corriger des données inexactes.</li>
-            </ul>
-            <p>
-              Pour exercer ces droits, contactez notre DPO : <strong>privacy@gise.be</strong>.
+          {/* SECTION 3 - VOS DROITS (RGPD) */}
+          <section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-5">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-2xl bg-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
+                <UserCheck className="w-5 h-5" />
+              </div>
+              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+                3. Vos droits (Conformité RGPD)
+              </h2>
+            </div>
+
+            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+              Conformément au Règlement Général sur la Protection des Données (RGPD), vous disposez d'un contrôle total sur vos données :
             </p>
+
+            <div className="grid gap-3 sm:grid-cols-2 text-xs">
+              <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800/80">
+                <strong className="text-slate-900 dark:text-white font-semibold block mb-1">Droit d'accès & d'export</strong>
+                <span className="text-slate-600 dark:text-slate-400">Obtenir une copie complète de l'ensemble de vos données en notre possession.</span>
+              </div>
+
+              <div className="p-4 rounded-2xl bg-[#f0f4f9] dark:bg-slate-950 border border-transparent dark:border-slate-800/80">
+                <strong className="text-slate-900 dark:text-white font-semibold block mb-1">Droit de rectification & d'effacement</strong>
+                <span className="text-slate-600 dark:text-slate-400">Corriger des informations inexactes ou demander la suppression définitive de vos données.</span>
+              </div>
+            </div>
+
+            <div className="pt-2 flex flex-col sm:flex-row items-start sm:items-center gap-3 p-4 rounded-2xl bg-blue-50/60 dark:bg-blue-950/30 border border-blue-200/50 dark:border-blue-900/50 text-xs">
+              <Mail className="w-4 h-4 text-blue-600 dark:text-blue-400 shrink-0" />
+              <span className="text-slate-700 dark:text-slate-300">
+                Pour exercer l'un de ces droits, contactez notre Délégué à la Protection des Données (DPO) : <strong className="font-semibold text-slate-900 dark:text-white">privacy@gise.be</strong>
+              </span>
+            </div>
           </section>
 
-          {/* SECTION 5 */}
-          <section className="bg-slate-100 dark:bg-slate-900 p-6 rounded-xl border-l-4 border-gise-accent transition-colors">
-            <h2 className="text-lg font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-2">
-              <Scale className="w-5 h-5" />
-              Réclamation auprès de l'autorité de contrôle
-            </h2>
-            <address className="not-italic text-slate-600 dark:text-slate-400">
-              <strong>Autorité de protection des données (Belgique)</strong><br />
-              Rue de la Presse, 35, 1000 Bruxelles<br />
-              Site web : <a href="https://www.autoriteprotectiondonnees.be" target="_blank" rel="noopener noreferrer" className="text-gise-accent hover:underline">www.autoriteprotectiondonnees.be</a>
-            </address>
+          {/* SECTION 4 - AUTORITÉ DE CONTRÔLE */}
+          <section className="bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-[28px] border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-2xl bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400 flex items-center justify-center shrink-0">
+                <Scale className="w-5 h-5" />
+              </div>
+              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+                4. Réclamation auprès de l'autorité de contrôle
+              </h2>
+            </div>
+
+            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+              Si vous estimez que le traitement de vos données ne respecte pas le cadre légal belge et européen, vous pouvez introduire une réclamation auprès de l'autorité compétente :
+            </p>
+
+            <div className="bg-[#f0f4f9] dark:bg-slate-950 p-5 rounded-2xl border border-transparent dark:border-slate-800/80 text-xs text-slate-700 dark:text-slate-300 space-y-1.5">
+              <p className="font-bold text-slate-900 dark:text-white text-sm">Autorité de Protection des Données (APD)</p>
+              <p>Rue de la Presse, 35 — 1000 Bruxelles, Belgique</p>
+              <p className="pt-1">
+                <a
+                  href="https://www.autoriteprotectiondonnees.be"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 font-semibold text-blue-600 dark:text-blue-400 hover:underline"
+                >
+                  <span>www.autoriteprotectiondonnees.be</span>
+                  <ExternalLink className="w-3 h-3" />
+                </a>
+              </p>
+            </div>
           </section>
 
         </div>
       </main>
 
       {/* FOOTER */}
-      <footer className="bg-slate-100 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-600 transition-colors">
-        <p>© {new Date().getFullYear()} GISE. Tous droits réservés.</p>
+      <footer className="bg-[#f0f4f9] dark:bg-slate-950 border-t border-slate-200/80 dark:border-slate-900 py-8 mt-16 text-center text-xs text-slate-500 dark:text-slate-400 transition-colors">
+        <p>© {new Date().getFullYear()} GISE SRL. Tous droits réservés.</p>
       </footer>
+
     </div>
   );
 }