first step cleaning

src/pages/ConditionsGenerales.tsx

@@ -1,158 +1,92 @@
-import { 
-  Shield, 
-  ArrowLeft, 
-  FileText, 
-  Briefcase, 
-  Lock, 
-  Scale, 
-  Moon, 
-  Sun,
-  FileCheck 
-} from 'lucide-react';
-import { Link } from 'react-router-dom';
-import { useTheme } from '../hooks/useTheme';
+import { FileText, Briefcase, Lock, Scale, FileCheck } from 'lucide-react';
+import LegalLayout from '@layouts/LegalLayout';
 
 export default function ConditionsGenerales() {
-  const { isDark, toggleTheme } = useTheme();
-
   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" />
-            <span>Retour à l'accueil</span>
-          </Link>
+    <LegalLayout>
+      {/* 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">
+          <FileCheck className="w-3.5 h-3.5" />
+          <span>Cadre Contractuel</span>
+        </div>
+        <h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
+          Conditions Générales de Services (CGS)
+        </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>
+      </div>
 
+      <div className="space-y-6">
+        {/* SECTION 1 - OBJET */}
+        <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">
-            {/* BOUTON THEME */}
-            <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>
-
-            {/* LOGO */}
-            <div className="flex items-center gap-2">
-              <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 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">
+              <FileText className="w-5 h-5" />
             </div>
+            <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+              1. Objet des services
+            </h2>
           </div>
-        </div>
-      </header>
+          <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+            Les présentes Conditions Générales de Services (CGS) ont pour objet de définir le cadre contractuel dans lequel GISE SRL fournit au Client ses services informatiques d'audit d'infrastructure, d'infogérance souveraine, d'hébergement privé et de cybersécurité.
+          </p>
+        </section>
 
-      {/* CONTENU PRINCIPAL */}
-      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
-
-        {/* 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">
-            <FileCheck className="w-3.5 h-3.5" />
-            <span>Cadre Contractuel</span>
+        {/* SECTION 2 - OBLIGATION DE MOYENS */}
+        <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-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
+              <Briefcase className="w-5 h-5" />
+            </div>
+            <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+              2. Engagements & Obligation de moyens
+            </h2>
           </div>
-          <h1 className="text-3xl sm:text-5xl font-bold text-slate-900 dark:text-white tracking-tight">
-            Conditions Générales de Services (CGS)
-          </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>
+          <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+            Dans le domaine de la cybersécurité et des infrastructures informatiques, GISE déploie les meilleures pratiques du secteur et s'engage à une <strong className="text-slate-900 dark:text-white font-semibold">obligation de moyens renforcée</strong>. Nous mettons en œuvre l'ensemble des mesures techniques, organisationnelles et matérielles nécessaires pour garantir la santé, la disponibilité et la protection du système d'information du Client.
+          </p>
+        </section>
+
+        {/* SECTION 3 - SECRET PROFESSIONNEL ET CONFIDENTIALITÉ */}
+        <section className="bg-emerald-50/80 dark:bg-emerald-950/30 p-6 sm:p-8 rounded-[28px] border border-emerald-200/60 dark:border-emerald-900/50 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-900/60 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
+              <Lock className="w-5 h-5" />
+            </div>
+            <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+              3. Secret professionnel et Confidentialité
+            </h2>
           </div>
-        </div>
+          <p className="text-xs sm:text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
+            GISE s'engage à observer le <strong className="font-semibold text-slate-900 dark:text-white">secret professionnel le plus strict</strong> concernant l'ensemble des informations, données, fichiers et documents confidentiels auxquels elle pourrait avoir accès dans le cadre de l'exécution de ses prestations.
+          </p>
+        </section>
 
-        <div className="space-y-6">
-
-          {/* SECTION 1 - OBJET */}
-          <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-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
-                <FileText className="w-5 h-5" />
-              </div>
-              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
-                1. Objet des services
-              </h2>
+        {/* SECTION 4 - DROIT APPLICABLE ET JURIDICTION */}
+        <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>
-            
-            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-              Les présentes Conditions Générales de Services (CGS) ont pour objet de définir le cadre contractuel dans lequel GISE SRL fournit au Client ses services informatiques d'audit d'infrastructure, d'infogérance souveraine, d'hébergement privé et de cybersécurité.
+            <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
+              4. Droit applicable et juridiction compétente
+            </h2>
+          </div>
+          <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+            Les présentes Conditions Générales de Services sont régies exclusivement par le droit belge.
+          </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">Juridiction exclusive</p>
+            <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
+              En cas de litige relatif à l'interprétation, la validité ou l'exécution des présentes CGS, et à défaut de résolution amiable, les <strong className="text-slate-900 dark:text-white font-medium">tribunaux de l'arrondissement judiciaire de Bruxelles</strong> seront seuls compétents.
             </p>
-          </section>
-
-          {/* SECTION 2 - OBLIGATION DE MOYENS */}
-          <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-indigo-100 dark:bg-indigo-950 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
-                <Briefcase className="w-5 h-5" />
-              </div>
-              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
-                2. Engagements & Obligation de moyens
-              </h2>
-            </div>
-
-            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-              Dans le domaine de la cybersécurité et des infrastructures informatiques, GISE déploie les meilleures pratiques du secteur et s'engage à une <strong className="text-slate-900 dark:text-white font-semibold">obligation de moyens renforcée</strong>. Nous mettons en œuvre l'ensemble des mesures techniques, organisationnelles et matérielles nécessaires pour garantir la santé, la disponibilité et la protection du système d'information du Client.
-            </p>
-          </section>
-
-          {/* SECTION 3 - SECRET PROFESSIONNEL ET CONFIDENTIALITÉ */}
-          <section className="bg-emerald-50/80 dark:bg-emerald-950/30 p-6 sm:p-8 rounded-[28px] border border-emerald-200/60 dark:border-emerald-900/50 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-900/60 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
-                <Lock className="w-5 h-5" />
-              </div>
-              <h2 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">
-                3. Secret professionnel et Confidentialité
-              </h2>
-            </div>
-
-            <p className="text-xs sm:text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
-              GISE s'engage à observer le <strong className="font-semibold text-slate-900 dark:text-white">secret professionnel le plus strict</strong> concernant l'ensemble des informations, données, fichiers et documents confidentiels auxquels elle pourrait avoir accès dans le cadre de l'exécution de ses prestations.
-            </p>
-          </section>
-
-          {/* SECTION 4 - DROIT APPLICABLE ET JURIDICTION */}
-          <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. Droit applicable et juridiction compétente
-              </h2>
-            </div>
-
-            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-              Les présentes Conditions Générales de Services sont régies exclusivement par le droit belge.
-            </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">Juridiction exclusive</p>
-              <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
-                En cas de litige relatif à l'interprétation, la validité ou l'exécution des présentes CGS, et à défaut de résolution amiable, les <strong className="text-slate-900 dark:text-white font-medium">tribunaux de l'arrondissement judiciaire de Bruxelles</strong> seront seuls compétents.
-              </p>
-            </div>
-          </section>
-
-        </div>
-      </main>
-
-      {/* FOOTER */}
-      <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>
+          </div>
+        </section>
+      </div>
+    </LegalLayout>
   );
 }