create-crm-tmp 2.0.0 → 2.1.0

package/template/src/app/(dashboard)/settings/page.tsx

@@ -1,19 +1,32 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import useSWR from 'swr';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useSession } from '@/lib/auth-client';
 import { useUserRole } from '@/hooks/use-user-role';
-import { cn, indexToColumn } from '@/lib/utils';
+import { cn, devToast } from '@/lib/utils';
+import {
+  DEFAULT_GOOGLE_AGENDA_EVENT_COLOR,
+  normalizeAgendaGoogleEventColor,
+} from '@/lib/google-calendar-agenda';
+
+const GOOGLE_AGENDA_COLOR_PRESETS = [
+  '#3b82f6',
+  '#22c55e',
+  '#a855f7',
+  '#f97316',
+  '#ef4444',
+  '#14b8a6',
+  '#ec4899',
+  '#eab308',
+] as const;
 import Link from 'next/link';
 import { LazyEditor as Editor, type DefaultTemplateRef } from '@/components/lazy-editor';
 import AddressAutocomplete from '@/components/address-autocomplete';
 import {
   Eye,
   EyeOff,
-  Plus,
-  Trash2,
-  ArrowRight,
   Settings,
   Grid3x3,
   Monitor,
@@ -21,9 +34,15 @@ import {
   RefreshCw,
 } from 'lucide-react';
 import { ProtectedPage } from '@/components/protected-page';
+import { SIGNATURE_MAX_IMAGE_BYTES } from '@/lib/editor-image-limits';
 import { useConfirm } from '@/hooks/use-confirm';
 import { useAppToast } from '@/contexts/app-toast-context';
 
+import { IntegrationLogPanel } from '@/components/settings/integrations/IntegrationLogPanel';
+import { GoogleSheetIntegration } from '@/components/settings/integrations/GoogleSheetIntegration';
+import { MetaLeadIntegration } from '@/components/settings/integrations/MetaLeadIntegration';
+import { GoogleAdsIntegration } from '@/components/settings/integrations/GoogleAdsIntegration';
+
 type MainSection = 'general' | 'app' | 'system' | 'integrations';
 const MAIN_SECTIONS = new Set<MainSection>(['general', 'app', 'system', 'integrations']);
 
@@ -39,6 +58,7 @@ export default function SettingsPage() {
   const { isAdmin } = useUserRole();
   const { confirm, ConfirmDialog } = useConfirm();
   const toast = useAppToast();
+
   const [showPasswordForm, setShowPasswordForm] = useState(false);
   const [passwordData, setPasswordData] = useState({
     currentPassword: '',
@@ -93,6 +113,10 @@ export default function SettingsPage() {
   const [smtpSuccess, setSmtpSuccess] = useState('');
   const [smtpTesting, setSmtpTesting] = useState(false);
   const [showSmtpPassword, setShowSmtpPassword] = useState(false);
+  const [showSmtpForm, setShowSmtpForm] = useState(true);
+  const [smtpSignatureSaving, setSmtpSignatureSaving] = useState(false);
+  const [smtpSignatureError, setSmtpSignatureError] = useState('');
+  const [smtpSignatureSuccess, setSmtpSignatureSuccess] = useState('');
   const [smtpTestResult, setSmtpTestResult] = useState<{
     success: boolean;
     message: string;
@@ -122,15 +146,6 @@ export default function SettingsPage() {
   const [statusSuccess, setStatusSuccess] = useState('');
   const [statusSaving, setStatusSaving] = useState(false);
 
-  // État pour Google Calendar
-  // État pour Google Drive (admin uniquement)
-  const [googleDriveAccount, setGoogleDriveAccount] = useState<{
-    email: string | null;
-    connected: boolean;
-  } | null>(null);
-  const [googleDriveLoading, setGoogleDriveLoading] = useState(true);
-  const [googleDriveDisconnecting, setGoogleDriveDisconnecting] = useState(false);
-
   // État pour Google Calendar (tous les utilisateurs)
   const [googleCalendarAccount, setGoogleCalendarAccount] = useState<{
     email: string | null;
@@ -138,83 +153,13 @@ export default function SettingsPage() {
   } | null>(null);
   const [googleCalendarLoading, setGoogleCalendarLoading] = useState(true);
   const [googleCalendarDisconnecting, setGoogleCalendarDisconnecting] = useState(false);
+  const [gCalPrefsSaving, setGCalPrefsSaving] = useState(false);
+  const [gCalDefaultId, setGCalDefaultId] = useState('');
+  const [gCalVisibleIds, setGCalVisibleIds] = useState<string[]>([]);
+  const [gCalEventColor, setGCalEventColor] = useState(DEFAULT_GOOGLE_AGENDA_EVENT_COLOR);
 
-  // État pour l'intégration Meta Lead Ads (admin uniquement)
-  const [metaLeadLoading, setMetaLeadLoading] = useState(true);
-  const [metaLeadSaving, setMetaLeadSaving] = useState(false);
-  const [metaLeadError, setMetaLeadError] = useState('');
-  const [metaLeadSuccess, setMetaLeadSuccess] = useState('');
-  const [metaLeadUsers, setMetaLeadUsers] = useState<{ id: string; name: string; email: string }[]>(
-    [],
-  );
-  const [metaLeadConfigs, setMetaLeadConfigs] = useState<
-    Array<{
-      id: string;
-      name: string;
-      active: boolean;
-      pageId: string;
-      verifyToken: string;
-      defaultStatusId: string | null;
-      defaultAssignedUserId: string | null;
-    }>
-  >([]);
-  const [showMetaLeadModal, setShowMetaLeadModal] = useState(false);
-  const [editingMetaLeadConfig, setEditingMetaLeadConfig] = useState<string | null>(null);
-  const [metaLeadFormData, setMetaLeadFormData] = useState<{
-    name: string;
-    active: boolean;
-    pageId: string;
-    accessToken: string;
-    verifyToken: string;
-    defaultStatusId: string | null;
-    defaultAssignedUserId: string | null;
-  }>({
-    name: '',
-    active: true,
-    pageId: '',
-    accessToken: '',
-    verifyToken: '',
-    defaultStatusId: null,
-    defaultAssignedUserId: null,
-  });
-
-  // État pour l'intégration Google Ads Lead Forms (admin uniquement)
-  const [googleAdsLoading, setGoogleAdsLoading] = useState(true);
-  const [googleAdsSaving, setGoogleAdsSaving] = useState(false);
-  const [googleAdsError, setGoogleAdsError] = useState('');
-  const [googleAdsSuccess, setGoogleAdsSuccess] = useState('');
-  const [googleAdsConfigs, setGoogleAdsConfigs] = useState<
-    Array<{
-      id: string;
-      name: string;
-      active: boolean;
-      webhookKey: string;
-      defaultStatusId: string | null;
-      defaultAssignedUserId: string | null;
-    }>
-  >([]);
-  const [showGoogleAdsModal, setShowGoogleAdsModal] = useState(false);
-  const [editingGoogleAdsConfig, setEditingGoogleAdsConfig] = useState<string | null>(null);
-  const [googleAdsFormData, setGoogleAdsFormData] = useState<{
-    name: string;
-    active: boolean;
-    webhookKey: string;
-    defaultStatusId: string | null;
-    defaultAssignedUserId: string | null;
-  }>({
-    name: '',
-    active: true,
-    webhookKey: '',
-    defaultStatusId: null,
-    defaultAssignedUserId: null,
-  });
-
-  // État pour l'intégration Google Sheets (admin uniquement)
-  const [googleSheetLoading, setGoogleSheetLoading] = useState(true);
-  const [googleSheetSaving, setGoogleSheetSaving] = useState(false);
-  const [googleSheetSyncing, setGoogleSheetSyncing] = useState(false);
-  const [googleSheetError, setGoogleSheetError] = useState('');
-  const [googleSheetSuccess, setGoogleSheetSuccess] = useState('');
+  // Utilisateurs pour les intégrations (admin uniquement)
+  const [integrationUsers, setIntegrationUsers] = useState<{ id: string; name: string; email: string }[]>([]);
   // Motifs de fermeture (ClosingReasons)
   const [closingReasons, setClosingReasons] = useState<Array<{ id: string; name: string }>>([]);
   const [closingReasonsLoading, setClosingReasonsLoading] = useState(false);
@@ -229,70 +174,56 @@ export default function SettingsPage() {
   const [closingReasonError, setClosingReasonError] = useState('');
   const [closingReasonSuccess, setClosingReasonSuccess] = useState('');
 
-  const [googleSheetConfigs, setGoogleSheetConfigs] = useState<
-    Array<{
-      id: string;
-      name: string;
-      active: boolean;
-      spreadsheetId: string;
-      sheetName: string;
-      headerRow: number;
-      phoneColumn: string;
-      firstNameColumn: string | null;
-      lastNameColumn: string | null;
-      emailColumn: string | null;
-      cityColumn: string | null;
-      postalCodeColumn: string | null;
-      originColumn: string | null;
-      defaultStatusId: string | null;
-      defaultAssignedUserId: string | null;
-    }>
-  >([]);
-  const [showGoogleSheetModal, setShowGoogleSheetModal] = useState(false);
-  const [editingGoogleSheetConfig, setEditingGoogleSheetConfig] = useState<string | null>(null);
-  const [googleSheetStep, setGoogleSheetStep] = useState<1 | 2>(1);
-  const [googleSheetFormData, setGoogleSheetFormData] = useState<{
-    name: string;
-    active: boolean;
-    sheetUrl: string;
-    sheetName: string;
-    headerRow: string;
-    defaultStatusId: string | null;
-    defaultAssignedUserId: string | null;
-  }>({
-    name: '',
-    active: true,
-    sheetUrl: '',
-    sheetName: '',
-    headerRow: '1',
-    defaultStatusId: null,
-    defaultAssignedUserId: null,
-  });
-
-  // Structure pour les mappings de colonnes
-  interface ColumnMapping {
-    id: string;
-    columnName: string; // Nom de la colonne dans Google Sheets
-    action: 'map' | 'note' | 'ignore';
-    crmField?: string; // Champ CRM si action = 'map'
-  }
-
-  const [googleSheetMappings, setGoogleSheetMappings] = useState<ColumnMapping[]>([]);
-  const [googleSheetPreview, setGoogleSheetPreview] = useState<Array<Record<string, string>>>([]);
-  const [googleSheetHeaders, setGoogleSheetHeaders] = useState<string[]>([]);
-
-  // Selecteur visuel de feuille / en-tete Google Sheet
-  const [gsPreviewStep, setGsPreviewStep] = useState<'url' | 'sheet' | 'header'>('url');
-  const [gsAvailableSheets, setGsAvailableSheets] = useState<string[]>([]);
-  const [gsRawRows, setGsRawRows] = useState<string[][]>([]);
-  const [gsSelectedHeaderRow, setGsSelectedHeaderRow] = useState<number>(0);
-  const [gsLoadingPreview, setGsLoadingPreview] = useState(false);
+  // Panel des logs d'intégration
+  const [showLogPanel, setShowLogPanel] = useState(false);
+  const [logPanelType, setLogPanelType] = useState<'google_sheet' | 'meta_lead' | 'google_ads'>('google_sheet');
+  const [logPanelConfigId, setLogPanelConfigId] = useState<string | undefined>();
+  const [logPanelConfigName, setLogPanelConfigName] = useState<string | undefined>();
 
   // États pour la navigation
   const [mainSection, setMainSection] = useState<MainSection>(() =>
     resolveMainSection(searchParams.get('section')),
   );
 
+  const gCalDetailsKey =
+    mainSection === 'integrations' && googleCalendarAccount?.connected
+      ? '/api/settings/google-calendar/calendars'
+      : null;
+  const { data: gCalDetails, mutate: mutateGCalDetails } = useSWR<{
+    calendars?: Array<{ id: string; summary: string; primary?: boolean; accessRole?: string }>;
+    defaultGoogleCalendarId?: string | null;
+    agendaVisibleGoogleCalendarIds?: string[];
+    agendaGoogleEventColor?: string | null;
+    error?: string;
+    needsGoogleReconnect?: boolean;
+  }>(gCalDetailsKey, async (url: string) => {
+    const response = await fetch(url);
+    return response.json();
+  });
+
+  const writableGoogleCalendars = useMemo(
+    () =>
+      (gCalDetails?.calendars ?? []).filter(
+        (c) => c.accessRole === 'owner' || c.accessRole === 'writer',
+      ),
+    [gCalDetails?.calendars],
+  );
+
+  useEffect(() => {
+    if (!gCalDetails?.calendars?.length) return;
+    const def =
+      gCalDetails.defaultGoogleCalendarId ||
+      gCalDetails.calendars.find((c) => c.primary)?.id ||
+      'primary';
+    setGCalDefaultId(def);
+    setGCalVisibleIds(
+      Array.isArray(gCalDetails.agendaVisibleGoogleCalendarIds)
+        ? [...gCalDetails.agendaVisibleGoogleCalendarIds]
+        : [],
+    );
+    setGCalEventColor(normalizeAgendaGoogleEventColor(gCalDetails.agendaGoogleEventColor));
+  }, [gCalDetails]);
+
   useEffect(() => {
     if (!nameError) return;
     toast.error(nameError);
@@ -333,6 +264,16 @@ export default function SettingsPage() {
     toast.success(smtpSuccess);
     setSmtpSuccess('');
   }, [smtpSuccess, toast]);
+  useEffect(() => {
+    if (!smtpSignatureError) return;
+    toast.error(smtpSignatureError);
+    setSmtpSignatureError('');
+  }, [smtpSignatureError, toast]);
+  useEffect(() => {
+    if (!smtpSignatureSuccess) return;
+    toast.success(smtpSignatureSuccess);
+    setSmtpSignatureSuccess('');
+  }, [smtpSignatureSuccess, toast]);
   useEffect(() => {
     if (!statusError) return;
     toast.error(statusError);
@@ -353,36 +294,6 @@ export default function SettingsPage() {
     toast.success(closingReasonSuccess);
     setClosingReasonSuccess('');
   }, [closingReasonSuccess, toast]);
-  useEffect(() => {
-    if (!googleSheetError) return;
-    toast.error(googleSheetError);
-    setGoogleSheetError('');
-  }, [googleSheetError, toast]);
-  useEffect(() => {
-    if (!googleSheetSuccess) return;
-    toast.success(googleSheetSuccess);
-    setGoogleSheetSuccess('');
-  }, [googleSheetSuccess, toast]);
-  useEffect(() => {
-    if (!metaLeadError) return;
-    toast.error(metaLeadError);
-    setMetaLeadError('');
-  }, [metaLeadError, toast]);
-  useEffect(() => {
-    if (!metaLeadSuccess) return;
-    toast.success(metaLeadSuccess);
-    setMetaLeadSuccess('');
-  }, [metaLeadSuccess, toast]);
-  useEffect(() => {
-    if (!googleAdsError) return;
-    toast.error(googleAdsError);
-    setGoogleAdsError('');
-  }, [googleAdsError, toast]);
-  useEffect(() => {
-    if (!googleAdsSuccess) return;
-    toast.success(googleAdsSuccess);
-    setGoogleAdsSuccess('');
-  }, [googleAdsSuccess, toast]);
   // Mettre à jour le nom quand la session change
   useEffect(() => {
     if (session?.user?.name) {
@@ -457,17 +368,20 @@ export default function SettingsPage() {
               signature: data.signature || '',
             });
             setSmtpConfigured(true);
+            setShowSmtpForm(false);
             // Injecter la signature existante dans l'éditeur si disponible
             if (smtpSignatureEditorRef.current && data.signature) {
               smtpSignatureEditorRef.current.injectHTML(data.signature);
             }
           } else {
             setSmtpConfigured(false);
+            setShowSmtpForm(true);
           }
         }
       } catch (error) {
         console.error('Erreur lors du chargement de la config SMTP:', error);
         setSmtpConfigured(false);
+        setShowSmtpForm(true);
       } finally {
         setSmtpLoading(false);
       }
@@ -503,75 +417,38 @@ export default function SettingsPage() {
     }
   }, [isAdmin]);
 
-  // Charger le statut de connexion Google Drive et Calendar
   useEffect(() => {
     const fetchGoogleStatus = async () => {
       try {
-        setGoogleDriveLoading(true);
         setGoogleCalendarLoading(true);
         const response = await fetch('/api/auth/google/status');
         if (response.ok) {
           const data = await response.json();
-          setGoogleDriveAccount(data.drive || { email: null, connected: false });
           setGoogleCalendarAccount(data.calendar || { email: null, connected: false });
         } else {
-          setGoogleDriveAccount({ email: null, connected: false });
           setGoogleCalendarAccount({ email: null, connected: false });
         }
       } catch (error) {
         console.error('Erreur lors du chargement du statut Google:', error);
-        setGoogleDriveAccount({ email: null, connected: false });
         setGoogleCalendarAccount({ email: null, connected: false });
       } finally {
-        setGoogleDriveLoading(false);
         setGoogleCalendarLoading(false);
       }
     };
     fetchGoogleStatus();
   }, []);
 
-  // Charger la configuration Meta Lead Ads et la liste des utilisateurs (admin uniquement)
+  // Charger les utilisateurs et les motifs de fermeture (admin uniquement)
   useEffect(() => {
     if (!isAdmin) return;
 
-    const fetchLeadConfigs = async () => {
+    const fetchAdminData = async () => {
       try {
-        setMetaLeadLoading(true);
-        setGoogleAdsLoading(true);
-        setGoogleSheetLoading(true);
-        setMetaLeadError('');
-        setGoogleAdsError('');
-        setGoogleSheetError('');
-
-        const [
-          metaConfigRes,
-          googleAdsConfigRes,
-          googleSheetConfigRes,
-          closingReasonsRes,
-          usersRes,
-        ] = await Promise.all([
-          fetch('/api/settings/meta-leads'),
-          fetch('/api/settings/google-ads'),
-          fetch('/api/settings/google-sheet'),
+        const [closingReasonsRes, usersRes] = await Promise.all([
           fetch('/api/settings/closing-reasons'),
           fetch('/api/users/list'),
         ]);
 
-        if (metaConfigRes.ok) {
-          const configsData = await metaConfigRes.json();
-          setMetaLeadConfigs(Array.isArray(configsData) ? configsData : []);
-        }
-
-        if (googleAdsConfigRes.ok) {
-          const configsData = await googleAdsConfigRes.json();
-          setGoogleAdsConfigs(Array.isArray(configsData) ? configsData : []);
-        }
-
-        if (googleSheetConfigRes.ok) {
-          const configsData = await googleSheetConfigRes.json();
-          setGoogleSheetConfigs(Array.isArray(configsData) ? configsData : []);
-        }
-
         if (closingReasonsRes.ok) {
           const reasonsData = await closingReasonsRes.json();
           setClosingReasons(Array.isArray(reasonsData) ? reasonsData : []);
@@ -579,20 +456,16 @@ export default function SettingsPage() {
 
         if (usersRes.ok) {
           const usersData = await usersRes.json();
-          setMetaLeadUsers(usersData);
+          setIntegrationUsers(usersData);
         }
       } catch (error) {
-        console.error("Erreur lors du chargement de l'intégration Meta Lead Ads:", error);
-        setMetaLeadError("Erreur lors du chargement de l'intégration Meta Lead Ads");
+        console.error('Erreur lors du chargement des données admin:', error);
       } finally {
-        setMetaLeadLoading(false);
-        setGoogleAdsLoading(false);
-        setGoogleSheetLoading(false);
         setClosingReasonsLoading(false);
       }
     };
 
-    fetchLeadConfigs();
+    fetchAdminData();
   }, [isAdmin]);
 
   // Gérer les messages de succès/erreur depuis l'URL
@@ -606,7 +479,6 @@ export default function SettingsPage() {
       fetch('/api/auth/google/status')
         .then((res) => res.json())
         .then((data) => {
-          setGoogleDriveAccount(data.drive || { email: null, connected: false });
           setGoogleCalendarAccount(data.calendar || { email: null, connected: false });
         })
         .catch(() => {});
@@ -625,47 +497,42 @@ export default function SettingsPage() {
     window.location.href = '/api/auth/google';
   };
 
-  const handleGoogleCalendarDisconnect = async () => {
-    const confirmed = await confirm({
-      title: 'Déconnecter Google Calendar',
-      description: 'Êtes-vous sûr de vouloir déconnecter votre compte Google Calendar ?',
-      confirmText: 'Déconnecter',
-      cancelText: 'Annuler',
-      variant: 'destructive',
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
+  const handleSaveGoogleCalendarPrefs = async () => {
+    setGCalPrefsSaving(true);
     try {
-      setGoogleCalendarDisconnecting(true);
-      const response = await fetch('/api/auth/google/disconnect', {
-        method: 'POST',
-      });
+      const body: Record<string, unknown> = {
+        agendaGoogleEventColor:
+          gCalEventColor.toLowerCase() === DEFAULT_GOOGLE_AGENDA_EVENT_COLOR.toLowerCase()
+            ? null
+            : gCalEventColor,
+      };
+      if ((gCalDetails?.calendars?.length ?? 0) > 0) {
+        body.defaultGoogleCalendarId = gCalDefaultId || null;
+        body.agendaVisibleGoogleCalendarIds = gCalVisibleIds;
+      }
 
-      if (response.ok) {
-        setGoogleCalendarAccount({ email: null, connected: false });
-      } else {
-        const data = await response.json();
-        console.error('Erreur lors de la déconnexion:', data.error);
+      const response = await fetch('/api/settings/google-calendar', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la sauvegarde');
       }
-    } catch (error) {
-      console.error('Erreur lors de la déconnexion Google Calendar:', error);
+      toast.success('Préférences Google Calendar enregistrées');
+      await mutateGCalDetails();
+    } catch (e: unknown) {
+      toast.error(devToast('Impossible de sauvegarder les préférences Google Calendar. Veuillez réessayer.', e));
     } finally {
-      setGoogleCalendarDisconnecting(false);
+      setGCalPrefsSaving(false);
     }
   };
 
-  const handleGoogleDriveConnect = () => {
-    window.location.href = '/api/auth/google';
-  };
-
-  const handleGoogleDriveDisconnect = async () => {
+  const handleGoogleCalendarDisconnect = async () => {
     const confirmed = await confirm({
-      title: 'Déconnecter Google Drive',
-      description:
-        "Êtes-vous sûr de vouloir déconnecter le compte Google Drive de l'administrateur ?",
+      title: 'Déconnecter Google Calendar',
+      description: 'Êtes-vous sûr de vouloir déconnecter votre compte Google Calendar ?',
       confirmText: 'Déconnecter',
       cancelText: 'Annuler',
       variant: 'destructive',
@@ -676,21 +543,22 @@ export default function SettingsPage() {
     }
 
     try {
-      setGoogleDriveDisconnecting(true);
+      setGoogleCalendarDisconnecting(true);
       const response = await fetch('/api/auth/google/disconnect', {
         method: 'POST',
       });
 
       if (response.ok) {
-        setGoogleDriveAccount({ email: null, connected: false });
+        setGoogleCalendarAccount({ email: null, connected: false });
+        toast.success('Google Calendar déconnecté');
       } else {
         const data = await response.json();
         console.error('Erreur lors de la déconnexion:', data.error);
       }
     } catch (error) {
-      console.error('Erreur lors de la déconnexion Google Drive:', error);
+      console.error('Erreur lors de la déconnexion Google Calendar:', error);
     } finally {
-      setGoogleDriveDisconnecting(false);
+      setGoogleCalendarDisconnecting(false);
     }
   };
 
@@ -718,7 +586,7 @@ export default function SettingsPage() {
         setCompanySuccess('');
       }, 5000);
     } catch (err: any) {
-      setCompanyError(err.message);
+      setCompanyError(devToast("Erreur lors de la sauvegarde de l'entreprise", err));
     } finally {
       setCompanySaving(false);
     }
@@ -760,7 +628,7 @@ export default function SettingsPage() {
         setNameSuccess('');
       }, 5000);
     } catch (err: any) {
-      setNameError(err.message);
+      setNameError(devToast('Erreur lors de la mise à jour du nom', err));
     } finally {
       setNameLoading(false);
     }
@@ -815,9 +683,10 @@ export default function SettingsPage() {
           }
 
           setSmtpSuccess('✅ Configuration SMTP testée et sauvegardée avec succès !');
+          setShowSmtpForm(false);
         } catch (saveErr: any) {
           // On affiche l’erreur de sauvegarde mais on garde le succès du test
-          setSmtpError(saveErr.message || 'La connexion fonctionne mais la sauvegarde a échoué.');
+          setSmtpError(devToast('La connexion fonctionne mais la sauvegarde a échoué.', saveErr));
         } finally {
           setSmtpSaving(false);
         }
@@ -870,6 +739,8 @@ export default function SettingsPage() {
       }
 
       setSmtpSuccess('✅ Configuration SMTP sauvegardée avec succès !');
+      setSmtpConfigured(true);
+      setShowSmtpForm(false);
       // Si le test a réussi précédemment, garder l'indicateur de configuration
       if (smtpTestResult?.success) {
         setSmtpConfigured(true);
@@ -878,12 +749,53 @@ export default function SettingsPage() {
         setSmtpSuccess('');
       }, 5000);
     } catch (err: any) {
-      setSmtpError(err.message);
+      setSmtpError(devToast('Erreur lors de la sauvegarde SMTP', err));
     } finally {
       setSmtpSaving(false);
     }
   };
 
+  const handleSmtpSignatureSave = async () => {
+    setSmtpSignatureError('');
+    setSmtpSignatureSuccess('');
+    setSmtpSignatureSaving(true);
+
+    try {
+      if (!smtpConfigured) {
+        throw new Error(
+          'Vous devez d’abord enregistrer la configuration SMTP avant de sauvegarder la signature.',
+        );
+      }
+
+      let signatureHtml = smtpData.signature;
+      if (smtpSignatureEditorRef.current) {
+        try {
+          signatureHtml = await smtpSignatureEditorRef.current.getHTML();
+        } catch {
+          // on ignore l'erreur, on garde la valeur du state
+        }
+      }
+
+      const response = await fetch('/api/settings/smtp', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ signature: signatureHtml }),
+      });
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la sauvegarde de la signature');
+      }
+
+      setSmtpData((prev) => ({ ...prev, signature: signatureHtml }));
+      setSmtpSignatureSuccess('✅ Signature sauvegardée avec succès !');
+    } catch (err: any) {
+      setSmtpSignatureError(devToast('Erreur lors de la sauvegarde de la signature', err));
+    } finally {
+      setSmtpSignatureSaving(false);
+    }
+  };
+
   const handleStatusSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setStatusError('');
@@ -926,7 +838,7 @@ export default function SettingsPage() {
         setStatusSuccess('');
       }, 5000);
     } catch (err: any) {
-      setStatusError(err.message);
+      setStatusError(devToast('Erreur lors de la sauvegarde du statut', err));
     } finally {
       setStatusSaving(false);
     }
@@ -968,7 +880,7 @@ export default function SettingsPage() {
         setStatuses(statusesData);
       }
     } catch (err: any) {
-      setStatusError(err.message);
+      setStatusError(devToast('Erreur lors de la suppression du statut', err));
     }
   };
 
@@ -1027,651 +939,140 @@ export default function SettingsPage() {
         setPasswordSuccess('');
       }, 5000);
     } catch (err: any) {
-      setPasswordError(err.message);
+      setPasswordError(devToast('Erreur lors du changement de mot de passe', err));
     } finally {
       setPasswordLoading(false);
     }
   };
 
-  const handleMetaLeadSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setMetaLeadError('');
-    setMetaLeadSuccess('');
-    setMetaLeadSaving(true);
-
-    try {
-      const url = editingMetaLeadConfig
-        ? `/api/settings/meta-leads/${editingMetaLeadConfig}`
-        : '/api/settings/meta-leads';
-      const method = editingMetaLeadConfig ? 'PUT' : 'POST';
-
-      const response = await fetch(url, {
-        method,
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(metaLeadFormData),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || 'Erreur lors de la sauvegarde de la configuration Meta');
-      }
-
-      setMetaLeadSuccess(
-        editingMetaLeadConfig
-          ? '✅ Configuration Meta Lead Ads mise à jour avec succès !'
-          : '✅ Configuration Meta Lead Ads créée avec succès !',
-      );
-      setShowMetaLeadModal(false);
-      setEditingMetaLeadConfig(null);
-      setMetaLeadFormData({
-        name: '',
-        active: true,
-        pageId: '',
-        accessToken: '',
-        verifyToken: '',
-        defaultStatusId: null,
-        defaultAssignedUserId: null,
-      });
-
-      // Recharger les configurations
-      const configsRes = await fetch('/api/settings/meta-leads');
-      if (configsRes.ok) {
-        const configsData = await configsRes.json();
-        setMetaLeadConfigs(Array.isArray(configsData) ? configsData : []);
-      }
-
-      setTimeout(() => setMetaLeadSuccess(''), 5000);
-    } catch (error: any) {
-      setMetaLeadError(error.message || 'Erreur lors de la sauvegarde de la configuration Meta');
-    } finally {
-      setMetaLeadSaving(false);
-    }
+  const handleOpenLogs = (type: 'google_sheet' | 'meta_lead' | 'google_ads') => (configId: string, configName: string) => {
+    setLogPanelType(type);
+    setLogPanelConfigId(configId);
+    setLogPanelConfigName(configName);
+    setShowLogPanel(true);
   };
 
-  const handleGoogleAdsSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setGoogleAdsError('');
-    setGoogleAdsSuccess('');
-    setGoogleAdsSaving(true);
-
-    try {
-      const url = editingGoogleAdsConfig
-        ? `/api/settings/google-ads/${editingGoogleAdsConfig}`
-        : '/api/settings/google-ads';
-      const method = editingGoogleAdsConfig ? 'PUT' : 'POST';
-
-      const response = await fetch(url, {
-        method,
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(googleAdsFormData),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(
-          data.error || 'Erreur lors de la sauvegarde de la configuration Google Ads',
-        );
-      }
-
-      setGoogleAdsSuccess(
-        editingGoogleAdsConfig
-          ? '✅ Configuration Google Ads mise à jour avec succès !'
-          : '✅ Configuration Google Ads créée avec succès !',
-      );
-      setShowGoogleAdsModal(false);
-      setEditingGoogleAdsConfig(null);
-      setGoogleAdsFormData({
-        name: '',
-        active: true,
-        webhookKey: '',
-        defaultStatusId: null,
-        defaultAssignedUserId: null,
-      });
-
-      // Recharger les configurations
-      const configsRes = await fetch('/api/settings/google-ads');
-      if (configsRes.ok) {
-        const configsData = await configsRes.json();
-        setGoogleAdsConfigs(Array.isArray(configsData) ? configsData : []);
-      }
-
-      setTimeout(() => setGoogleAdsSuccess(''), 5000);
-    } catch (error: any) {
-      setGoogleAdsError(error.message || 'Erreur lors de la sauvegarde de la configuration Google');
-    } finally {
-      setGoogleAdsSaving(false);
-    }
-  };
 
-  const handleGoogleSheetSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setGoogleSheetError('');
-    setGoogleSheetSuccess('');
-    setGoogleSheetSaving(true);
+  // Les handlers d'intégration ont été déplacés dans les composants dédiés
+  // (GoogleSheetIntegration, MetaLeadIntegration, GoogleAdsIntegration)
 
-    try {
-      // Vérifier qu'au moins un mapping téléphone est configuré
-      const phoneMapping = googleSheetMappings.find(
-        (m) => m.action === 'map' && m.crmField === 'phone' && m.columnName.trim() !== '',
-      );
+  return (
+    <ProtectedPage requiredPermission="settings.view">
+      <div className="kb-tab-scope bg-surface-page flex h-full flex-col">
+        {/* Header avec breadcrumbs */}
+        <div className="border-border bg-background/95 border-b px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-foreground text-2xl font-bold">Paramètres</h1>
+              <p className="text-muted-foreground mt-1 text-sm">Home {'>'} Paramètres</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => window.location.reload()}
+                className="text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-primary cursor-pointer rounded-lg p-2 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+                aria-label="Actualiser"
+              >
+                <RefreshCw className="h-5 w-5" />
+              </button>
+              <button
+                type="button"
+                className="text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-primary cursor-pointer rounded-lg p-2 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+                aria-label="Paramètres"
+              >
+                <Settings className="h-5 w-5" />
+              </button>
+            </div>
+          </div>
+        </div>
 
-      if (!phoneMapping) {
-        setGoogleSheetError('Le mapping du téléphone est obligatoire');
-        setGoogleSheetSaving(false);
-        return;
-      }
+        {/* Navbar horizontale avec sections principales */}
+        <div className="border-border bg-background/95 border-b px-4 sm:px-6 lg:px-8">
+          <div className="flex gap-1 overflow-x-auto">
+            <button
+              type="button"
+              onClick={() => handleMainSectionChange('general')}
+              className={cn(
+                'focus-visible:ring-primary/40 flex cursor-pointer items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
+                mainSection === 'general'
+                  ? 'border-blue-700 text-blue-700'
+                  : 'text-muted-foreground hover:border-border hover:text-foreground border-transparent',
+              )}
+            >
+              <Settings className="h-4 w-4" />
+              Paramètres Généraux
+            </button>
+            {isAdmin && (
+              <button
+                type="button"
+                onClick={() => handleMainSectionChange('app')}
+                className={cn(
+                  'focus-visible:ring-primary/40 flex cursor-pointer items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
+                  mainSection === 'app'
+                    ? 'border-blue-700 text-blue-700'
+                    : 'text-muted-foreground hover:border-border hover:text-foreground border-transparent',
+                )}
+              >
+                <Grid3x3 className="h-4 w-4" />
+                Paramètres de l&apos;Application
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => handleMainSectionChange('system')}
+              className={cn(
+                'focus-visible:ring-primary/40 flex cursor-pointer items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
+                mainSection === 'system'
+                  ? 'border-blue-700 text-blue-700'
+                  : 'text-muted-foreground hover:border-border hover:text-foreground border-transparent',
+              )}
+            >
+              <Monitor className="h-4 w-4" />
+              Paramètres Système
+            </button>
+            <button
+              type="button"
+              onClick={() => handleMainSectionChange('integrations')}
+              className={cn(
+                'focus-visible:ring-primary/40 flex cursor-pointer items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
+                mainSection === 'integrations'
+                  ? 'border-blue-700 text-blue-700'
+                  : 'text-muted-foreground hover:border-border hover:text-foreground border-transparent',
+              )}
+            >
+              <Plug className="h-4 w-4" />
+              Intégrations
+            </button>
+          </div>
+        </div>
 
-      const url = editingGoogleSheetConfig
-        ? `/api/settings/google-sheet/${editingGoogleSheetConfig}`
-        : '/api/settings/google-sheet';
-      const method = editingGoogleSheetConfig ? 'PUT' : 'POST';
-
-      const response = await fetch(url, {
-        method,
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          ...googleSheetFormData,
-          columnMappings: googleSheetMappings,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(
-          data.error || 'Erreur lors de la sauvegarde de la configuration Google Sheets',
-        );
-      }
-
-      setGoogleSheetSuccess(
-        editingGoogleSheetConfig
-          ? '✅ Configuration Google Sheets mise à jour avec succès !'
-          : '✅ Configuration Google Sheets créée avec succès !',
-      );
-      setShowGoogleSheetModal(false);
-      setEditingGoogleSheetConfig(null);
-      setGoogleSheetStep(1);
-      setGoogleSheetFormData({
-        name: '',
-        active: true,
-        sheetUrl: '',
-        sheetName: '',
-        headerRow: '1',
-        defaultStatusId: null,
-        defaultAssignedUserId: null,
-      });
-      setGoogleSheetMappings([]);
-      setGsPreviewStep('url');
-      setGsAvailableSheets([]);
-      setGsRawRows([]);
-      setGsSelectedHeaderRow(0);
-
-      // Recharger les configurations
-      const configsRes = await fetch('/api/settings/google-sheet');
-      if (configsRes.ok) {
-        const configsData = await configsRes.json();
-        setGoogleSheetConfigs(Array.isArray(configsData) ? configsData : []);
-      }
-
-      setTimeout(() => setGoogleSheetSuccess(''), 5000);
-    } catch (error: any) {
-      setGoogleSheetError(
-        error.message || 'Erreur lors de la sauvegarde de la configuration Google Sheets',
-      );
-    } finally {
-      setGoogleSheetSaving(false);
-    }
-  };
-
-  // Mapping automatique des colonnes Google Sheets (comme pour l'import CSV)
-  const handleGoogleSheetAutoMap = async (): Promise<boolean> => {
-    try {
-      setGoogleSheetError('');
-      setGoogleSheetSuccess('');
-
-      if (
-        !googleSheetFormData.sheetUrl ||
-        !googleSheetFormData.sheetName ||
-        !googleSheetFormData.headerRow
-      ) {
-        setGoogleSheetError(
-          'Veuillez renseigner le lien du Google Sheet, le nom de l’onglet et la ligne des en-têtes avant de continuer.',
-        );
-        return false;
-      }
-
-      const response = await fetch('/api/settings/google-sheet/auto-map', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          sheetUrl: googleSheetFormData.sheetUrl,
-          sheetName: googleSheetFormData.sheetName,
-          headerRow: googleSheetFormData.headerRow || '1',
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(
-          data.error || 'Erreur lors du mapping automatique des colonnes Google Sheets',
-        );
-      }
-
-      const headers = data.headers || [];
-      const autoMapping = data.mapping || {};
-      const preview = data.preview || [];
-
-      // Stocker les headers et l'aperçu
-      setGoogleSheetHeaders(headers);
-      setGoogleSheetPreview(preview);
-
-      // Initialiser les mappings avec les colonnes trouvées
-      const initialMappings: ColumnMapping[] = [];
-
-      // Créer un mapping pour chaque colonne trouvée
-      headers.forEach((header: string, index: number) => {
-        if (!header) return;
-
-        // L'API auto-map retourne les index de colonnes (A, B, C), mais on utilise les noms réels
-        // Chercher si cette colonne (par index) a été auto-mappée
-        const columnLetter = indexToColumn(index);
-        const mappedField = Object.entries(autoMapping).find(
-          ([, columnLetterFromMapping]) => columnLetterFromMapping === columnLetter,
-        )?.[0];
-
-        if (mappedField) {
-          // Convertir l'ancien format vers le nouveau
-          const crmFieldMap: Record<string, string> = {
-            phoneColumn: 'phone',
-            firstNameColumn: 'firstName',
-            lastNameColumn: 'lastName',
-            emailColumn: 'email',
-            cityColumn: 'city',
-            postalCodeColumn: 'postalCode',
-            originColumn: 'origin',
-          };
-
-          initialMappings.push({
-            id: `mapping-${Date.now()}-${Math.random()}`,
-            columnName: header, // Utiliser le nom réel de la colonne
-            action: 'map',
-            crmField: crmFieldMap[mappedField] || undefined,
-          });
-        } else {
-          // Colonne non mappée automatiquement, laisser l'utilisateur choisir
-          initialMappings.push({
-            id: `mapping-${Date.now()}-${Math.random()}`,
-            columnName: header,
-            action: 'ignore',
-          });
-        }
-      });
-
-      setGoogleSheetMappings(initialMappings);
-
-      setGoogleSheetSuccess(
-        '✅ Colonnes détectées. Configurez maintenant le mapping des colonnes.',
-      );
-      return true;
-    } catch (error: any) {
-      console.error('Erreur lors du mapping automatique Google Sheets:', error);
-      setGoogleSheetError(
-        error.message || 'Erreur lors du mapping automatique des colonnes Google Sheets',
-      );
-      return false;
-    }
-  };
-
-  const handleGoogleSheetSync = async () => {
-    setGoogleSheetError('');
-    setGoogleSheetSuccess('');
-    setGoogleSheetSyncing(true);
-
-    try {
-      const response = await fetch('/api/integrations/google-sheet/sync', {
-        method: 'POST',
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || 'Erreur lors de la synchronisation Google Sheets');
-      }
-
-      const totalImported = data.totalImported || data.imported || 0;
-      const totalUpdated = data.totalUpdated || data.updated || 0;
-      const totalSkipped = data.totalSkipped || data.skipped || 0;
-      setGoogleSheetSuccess(
-        `✅ Synchronisation terminée : ${totalImported} nouveau(x) contact(s), ${totalUpdated} mis à jour, ${totalSkipped} ignoré(s).`,
-      );
-      setTimeout(() => setGoogleSheetSuccess(''), 8000);
-    } catch (error: any) {
-      setGoogleSheetError(
-        error.message || 'Erreur lors de la synchronisation des contacts Google Sheets',
-      );
-    } finally {
-      setGoogleSheetSyncing(false);
-    }
-  };
-
-  // Fonctions pour gérer les configurations Meta Lead Ads
-  const handleEditMetaLead = (config: (typeof metaLeadConfigs)[0]) => {
-    setEditingMetaLeadConfig(config.id);
-    setMetaLeadFormData({
-      name: config.name,
-      active: config.active,
-      pageId: config.pageId,
-      accessToken: '', // Ne pas charger le token
-      verifyToken: config.verifyToken,
-      defaultStatusId: config.defaultStatusId,
-      defaultAssignedUserId: config.defaultAssignedUserId,
-    });
-    setShowMetaLeadModal(true);
-    setMetaLeadError('');
-    setMetaLeadSuccess('');
-  };
-
-  const handleDeleteMetaLead = async (id: string) => {
-    const confirmed = await confirm({
-      title: 'Supprimer la configuration Meta Lead',
-      description: 'Êtes-vous sûr de vouloir supprimer cette configuration ?',
-      confirmText: 'Supprimer',
-      cancelText: 'Annuler',
-      variant: 'destructive',
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    try {
-      const response = await fetch(`/api/settings/meta-leads/${id}`, {
-        method: 'DELETE',
-      });
-
-      if (!response.ok) {
-        const data = await response.json();
-        throw new Error(data.error || 'Erreur lors de la suppression');
-      }
-
-      setMetaLeadSuccess('✅ Configuration supprimée avec succès !');
-      setTimeout(() => setMetaLeadSuccess(''), 5000);
-
-      // Recharger les configurations
-      const configsRes = await fetch('/api/settings/meta-leads');
-      if (configsRes.ok) {
-        const configsData = await configsRes.json();
-        setMetaLeadConfigs(Array.isArray(configsData) ? configsData : []);
-      }
-    } catch (error: any) {
-      setMetaLeadError(error.message || 'Erreur lors de la suppression');
-    }
-  };
-
-  // Fonctions pour gérer les configurations Google Ads
-  const handleEditGoogleAds = (config: (typeof googleAdsConfigs)[0]) => {
-    setEditingGoogleAdsConfig(config.id);
-    setGoogleAdsFormData({
-      name: config.name,
-      active: config.active,
-      webhookKey: config.webhookKey,
-      defaultStatusId: config.defaultStatusId,
-      defaultAssignedUserId: config.defaultAssignedUserId,
-    });
-    setShowGoogleAdsModal(true);
-    setGoogleAdsError('');
-    setGoogleAdsSuccess('');
-  };
-
-  const handleDeleteGoogleAds = async (id: string) => {
-    const confirmed = await confirm({
-      title: 'Supprimer la configuration Google Ads',
-      description: 'Êtes-vous sûr de vouloir supprimer cette configuration ?',
-      confirmText: 'Supprimer',
-      cancelText: 'Annuler',
-      variant: 'destructive',
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    try {
-      const response = await fetch(`/api/settings/google-ads/${id}`, {
-        method: 'DELETE',
-      });
-
-      if (!response.ok) {
-        const data = await response.json();
-        throw new Error(data.error || 'Erreur lors de la suppression');
-      }
-
-      setGoogleAdsSuccess('✅ Configuration supprimée avec succès !');
-      setTimeout(() => setGoogleAdsSuccess(''), 5000);
-
-      // Recharger les configurations
-      const configsRes = await fetch('/api/settings/google-ads');
-      if (configsRes.ok) {
-        const configsData = await configsRes.json();
-        setGoogleAdsConfigs(Array.isArray(configsData) ? configsData : []);
-      }
-    } catch (error: any) {
-      setGoogleAdsError(error.message || 'Erreur lors de la suppression');
-    }
-  };
-
-  // Fonctions pour gérer les configurations Google Sheets
-  const handleEditGoogleSheet = (config: (typeof googleSheetConfigs)[0]) => {
-    setEditingGoogleSheetConfig(config.id);
-    setGoogleSheetFormData({
-      name: config.name,
-      active: config.active,
-      sheetUrl: config.spreadsheetId
-        ? `https://docs.google.com/spreadsheets/d/${config.spreadsheetId}/edit`
-        : '',
-      sheetName: config.sheetName,
-      headerRow: config.headerRow.toString(),
-      defaultStatusId: config.defaultStatusId,
-      defaultAssignedUserId: config.defaultAssignedUserId,
-    });
-
-    // Charger les mappings existants (si disponibles) ou convertir l'ancien format
-    if ((config as any).columnMappings && Array.isArray((config as any).columnMappings)) {
-      setGoogleSheetMappings((config as any).columnMappings);
-    } else {
-      // Convertir l'ancien format vers le nouveau
-      const mappings: ColumnMapping[] = [];
-      const oldMappings = [
-        { column: config.phoneColumn, field: 'phone' },
-        { column: config.firstNameColumn, field: 'firstName' },
-        { column: config.lastNameColumn, field: 'lastName' },
-        { column: config.emailColumn, field: 'email' },
-        { column: config.cityColumn, field: 'city' },
-        { column: config.postalCodeColumn, field: 'postalCode' },
-        { column: config.originColumn, field: 'origin' },
-      ];
-
-      oldMappings.forEach(({ column, field }) => {
-        if (column) {
-          mappings.push({
-            id: `mapping-${Date.now()}-${Math.random()}`,
-            columnName: column,
-            action: 'map',
-            crmField: field,
-          });
-        }
-      });
-
-      setGoogleSheetMappings(mappings);
-    }
-
-    setGoogleSheetStep(2);
-    setGsPreviewStep('header');
-    setGsAvailableSheets([]);
-    setGsRawRows([]);
-    setGsSelectedHeaderRow(config.headerRow - 1);
-    setShowGoogleSheetModal(true);
-    setGoogleSheetError('');
-    setGoogleSheetSuccess('');
-  };
-
-  const handleDeleteGoogleSheet = async (id: string) => {
-    const confirmed = await confirm({
-      title: 'Supprimer la configuration Google Sheet',
-      description: 'Êtes-vous sûr de vouloir supprimer cette configuration ?',
-      confirmText: 'Supprimer',
-      cancelText: 'Annuler',
-      variant: 'destructive',
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    try {
-      const response = await fetch(`/api/settings/google-sheet/${id}`, {
-        method: 'DELETE',
-      });
-
-      if (!response.ok) {
-        const data = await response.json();
-        throw new Error(data.error || 'Erreur lors de la suppression');
-      }
-
-      setGoogleSheetSuccess('✅ Configuration supprimée avec succès !');
-      setTimeout(() => setGoogleSheetSuccess(''), 5000);
-
-      // Recharger les configurations
-      const configsRes = await fetch('/api/settings/google-sheet');
-      if (configsRes.ok) {
-        const configsData = await configsRes.json();
-        setGoogleSheetConfigs(Array.isArray(configsData) ? configsData : []);
-      }
-    } catch (error: any) {
-      setGoogleSheetError(error.message || 'Erreur lors de la suppression');
-    }
-  };
-
-  return (
-    <ProtectedPage requiredPermission="settings.view">
-      <div className="kb-tab-scope bg-surface-page flex h-full flex-col">
-        {/* Header avec breadcrumbs */}
-        <div className="border-b border-border bg-background/95 px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-2xl font-bold text-foreground">Paramètres</h1>
-              <p className="mt-1 text-sm text-muted-foreground">Home {'>'} Paramètres</p>
-            </div>
-            <div className="flex items-center gap-2">
-              <button
-                type="button"
-                onClick={() => window.location.reload()}
-                className="cursor-pointer rounded-lg p-2 text-muted-foreground transition-colors duration-200 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
-                aria-label="Actualiser"
-              >
-                <RefreshCw className="h-5 w-5" />
-              </button>
-              <button
-                type="button"
-                className="cursor-pointer rounded-lg p-2 text-muted-foreground transition-colors duration-200 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
-                aria-label="Paramètres"
-              >
-                <Settings className="h-5 w-5" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* Navbar horizontale avec sections principales */}
-        <div className="border-b border-border bg-background/95 px-4 sm:px-6 lg:px-8">
-          <div className="flex gap-1 overflow-x-auto">
-            <button
-              type="button"
-              onClick={() => handleMainSectionChange('general')}
-              className={cn(
-                  'flex cursor-pointer items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset',
-                mainSection === 'general'
-                  ? 'border-blue-700 text-blue-700'
-                  : 'border-transparent text-muted-foreground hover:border-border hover:text-foreground',
-              )}
-            >
-              <Settings className="h-4 w-4" />
-              Paramètres Généraux
-            </button>
-            {isAdmin && (
-              <button
-                type="button"
-                onClick={() => handleMainSectionChange('app')}
-                className={cn(
-                  'flex cursor-pointer items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset',
-                  mainSection === 'app'
-                    ? 'border-blue-700 text-blue-700'
-                    : 'border-transparent text-muted-foreground hover:border-border hover:text-foreground',
-                )}
-              >
-                <Grid3x3 className="h-4 w-4" />
-                Paramètres de l&apos;Application
-              </button>
-            )}
-            <button
-              type="button"
-              onClick={() => handleMainSectionChange('system')}
-              className={cn(
-                'flex cursor-pointer items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset',
-                mainSection === 'system'
-                  ? 'border-blue-700 text-blue-700'
-                  : 'border-transparent text-muted-foreground hover:border-border hover:text-foreground',
-              )}
-            >
-              <Monitor className="h-4 w-4" />
-              Paramètres Système
-            </button>
-            <button
-              type="button"
-              onClick={() => handleMainSectionChange('integrations')}
-              className={cn(
-                'flex cursor-pointer items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset',
-                mainSection === 'integrations'
-                  ? 'border-blue-700 text-blue-700'
-                  : 'border-transparent text-muted-foreground hover:border-border hover:text-foreground',
-              )}
-            >
-              <Plug className="h-4 w-4" />
-              Intégrations
-            </button>
-          </div>
-        </div>
-
-        {/* Content avec panneau principal */}
-        <div className="flex flex-1 overflow-hidden">
-          {/* Panneau de contenu principal */}
-          <div className="bg-surface-page flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
-            <div className="mx-auto max-w-4xl space-y-4 sm:space-y-6">
-              {/* Section Paramètres Généraux */}
-              {mainSection === 'general' && (
-                <div className="space-y-6">
-                  {/* Section Profil */}
-                  <div className="rounded-lg border border-border bg-card p-6 shadow-(--shadow-card)">
-                    <div className="mb-1 flex items-center justify-between">
-                      <div>
-                        <h2 className="text-lg font-bold text-foreground">Profil</h2>
-                      </div>
-                    </div>
-                    <p className="mb-6 text-sm text-muted-foreground">
-                      Gérez vos informations personnelles
-                    </p>
+        {/* Content avec panneau principal */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* Panneau de contenu principal */}
+          <div className="bg-surface-page flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
+            <div className="mx-auto max-w-4xl space-y-4 sm:space-y-6">
+              {/* Section Paramètres Généraux */}
+              {mainSection === 'general' && (
+                <div className="space-y-6">
+                  {/* Section Profil */}
+                  <div className="border-border bg-card rounded-lg border p-6 shadow-(--shadow-card)">
+                    <div className="mb-1 flex items-center justify-between">
+                      <div>
+                        <h2 className="text-foreground text-lg font-bold">Profil</h2>
+                      </div>
+                    </div>
+                    <p className="text-muted-foreground mb-6 text-sm">
+                      Gérez vos informations personnelles
+                    </p>
 
                     <div className="space-y-4">
                       {/* Nom - Modifiable */}
-                      <div className="border-b border-border/70 pb-4">
+                      <div className="border-border/70 border-b pb-4">
                         {!showNameForm ? (
                           <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                             <div className="min-w-0 flex-1">
-                              <p className="font-medium text-foreground">Nom</p>
-                              <p className="mt-1 truncate text-sm text-muted-foreground">
+                              <p className="text-foreground font-medium">Nom</p>
+                              <p className="text-muted-foreground mt-1 truncate text-sm">
                                 {session?.user?.name || 'Non défini'}
                               </p>
                             </div>
@@ -1682,7 +1083,7 @@ export default function SettingsPage() {
                                 setNameError('');
                                 setNameSuccess('');
                               }}
-                              className="w-full cursor-pointer rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors duration-200 hover:bg-muted sm:w-auto"
+                              className="border-border text-foreground hover:bg-muted w-full cursor-pointer rounded-lg border px-4 py-2 text-sm font-medium transition-colors duration-200 sm:w-auto"
                             >
                               Modifier
                             </button>
@@ -1690,13 +1091,15 @@ export default function SettingsPage() {
                         ) : (
                           <form onSubmit={handleNameUpdate} className="space-y-4">
                             <div>
-                              <label className="block text-sm font-medium text-foreground">Nom</label>
+                              <label className="text-foreground block text-sm font-medium">
+                                Nom
+                              </label>
                               <input
                                 type="text"
                                 required
                                 value={nameValue}
                                 onChange={(e) => setNameValue(e.target.value)}
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="Votre nom"
                               />
                             </div>
@@ -1705,7 +1108,7 @@ export default function SettingsPage() {
                               <button
                                 type="submit"
                                 disabled={nameLoading}
-                                className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                                className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
                               >
                                 {nameLoading ? 'Enregistrement...' : 'Enregistrer'}
                               </button>
@@ -1776,7 +1179,7 @@ export default function SettingsPage() {
                                   currentPassword: e.target.value,
                                 })
                               }
-                              className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                              className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                               placeholder="••••••••"
                             />
                           </div>
@@ -1796,7 +1199,7 @@ export default function SettingsPage() {
                                   newPassword: e.target.value,
                                 })
                               }
-                              className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                              className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                               placeholder="••••••••"
                             />
                             <p className="mt-1 text-xs text-gray-500">Minimum 6 caractères</p>
@@ -1817,7 +1220,7 @@ export default function SettingsPage() {
                                   confirmPassword: e.target.value,
                                 })
                               }
-                              className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                              className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                               placeholder="••••••••"
                             />
                           </div>
@@ -1826,7 +1229,7 @@ export default function SettingsPage() {
                             <button
                               type="submit"
                               disabled={passwordLoading}
-                              className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                              className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
                             >
                               {passwordLoading ? 'Modification...' : 'Modifier le mot de passe'}
                             </button>
@@ -1879,7 +1282,7 @@ export default function SettingsPage() {
                                 onChange={(e) =>
                                   setCompanyData({ ...companyData, name: e.target.value })
                                 }
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="Nom de l'entreprise"
                               />
                             </div>
@@ -1897,7 +1300,7 @@ export default function SettingsPage() {
                                     legalRepresentative: e.target.value,
                                   })
                                 }
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="Nom du représentant légal"
                               />
                               <p className="mt-1 text-xs text-gray-500">
@@ -1915,7 +1318,7 @@ export default function SettingsPage() {
                                 onChange={(e) =>
                                   setCompanyData({ ...companyData, email: e.target.value })
                                 }
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="contact@entreprise.com"
                               />
                             </div>
@@ -1930,7 +1333,7 @@ export default function SettingsPage() {
                                 onChange={(e) =>
                                   setCompanyData({ ...companyData, phone: e.target.value })
                                 }
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="+33 1 23 45 67 89"
                               />
                             </div>
@@ -1945,7 +1348,7 @@ export default function SettingsPage() {
                                 onChange={(e) =>
                                   setCompanyData({ ...companyData, website: e.target.value })
                                 }
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="https://www.entreprise.com"
                               />
                             </div>
@@ -1984,7 +1387,7 @@ export default function SettingsPage() {
                                 onChange={(e) =>
                                   setCompanyData({ ...companyData, city: e.target.value })
                                 }
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="Paris"
                               />
                             </div>
@@ -1999,7 +1402,7 @@ export default function SettingsPage() {
                                 onChange={(e) =>
                                   setCompanyData({ ...companyData, postalCode: e.target.value })
                                 }
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="75001"
                               />
                             </div>
@@ -2014,7 +1417,7 @@ export default function SettingsPage() {
                                 onChange={(e) =>
                                   setCompanyData({ ...companyData, country: e.target.value })
                                 }
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="France"
                               />
                             </div>
@@ -2029,7 +1432,7 @@ export default function SettingsPage() {
                                 onChange={(e) =>
                                   setCompanyData({ ...companyData, siret: e.target.value })
                                 }
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="123 456 789 00012"
                               />
                             </div>
@@ -2044,7 +1447,7 @@ export default function SettingsPage() {
                                 onChange={(e) =>
                                   setCompanyData({ ...companyData, vatNumber: e.target.value })
                                 }
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="FR12 345678901"
                               />
                             </div>
@@ -2059,7 +1462,7 @@ export default function SettingsPage() {
                                 onChange={(e) =>
                                   setCompanyData({ ...companyData, logo: e.target.value })
                                 }
-                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                 placeholder="https://example.com/logo.png"
                               />
                             </div>
@@ -2069,7 +1472,7 @@ export default function SettingsPage() {
                             <button
                               type="submit"
                               disabled={companySaving}
-                              className="cursor-pointer rounded-lg bg-blue-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                              className="cursor-pointer rounded-lg bg-blue-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
                             >
                               {companySaving ? 'Enregistrement...' : 'Enregistrer'}
                             </button>
@@ -2184,160 +1587,267 @@ export default function SettingsPage() {
                   {smtpLoading ? (
                     <div className="mt-6 text-center text-gray-500">Chargement...</div>
                   ) : (
-                    <form onSubmit={handleSmtpSubmit} className="mt-6 space-y-4">
-                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700">
-                            Serveur SMTP (Host) *
-                          </label>
-                          <input
-                            type="text"
-                            required
-                            value={smtpData.host}
-                            onChange={(e) => setSmtpData({ ...smtpData, host: e.target.value })}
-                            className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                            placeholder="smtp.gmail.com"
-                          />
-                        </div>
-
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700">Port *</label>
-                          <input
-                            type="text"
-                            inputMode="numeric"
-                            required
-                            value={smtpData.port}
-                            onChange={(e) => {
-                              const value = e.target.value;
-                              if (value === '' || /^\d+$/.test(value)) {
-                                const num = Number(value);
-                                if (value === '' || (num >= 1 && num <= 65535)) {
-                                  setSmtpData({ ...smtpData, port: value });
-                                }
-                              }
-                            }}
-                            className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                            placeholder="587"
-                          />
-                          <p className="mt-1 text-xs text-gray-500">
-                            Ports courants : 587 (TLS), 465 (SSL), 25 (non sécurisé)
-                          </p>
-                        </div>
-
-                        <div className="flex items-center">
-                          <input
-                            type="checkbox"
-                            id="smtp-secure"
-                            checked={smtpData.secure}
-                            onChange={(e) => setSmtpData({ ...smtpData, secure: e.target.checked })}
-                            className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-gray-400/30"
-                          />
-                          <label
-                            htmlFor="smtp-secure"
-                            className="ml-2 text-sm font-medium text-gray-700"
-                          >
-                            Connexion sécurisée (SSL/TLS)
-                          </label>
-                        </div>
-
-                        <div className="md:col-span-2">
-                          <label className="block text-sm font-medium text-gray-700">
-                            Nom d'utilisateur *
-                          </label>
-                          <input
-                            type="text"
-                            required
-                            value={smtpData.username}
-                            onChange={(e) => setSmtpData({ ...smtpData, username: e.target.value })}
-                            className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                            placeholder="votre.email@exemple.com"
-                          />
-                        </div>
-
-                        <div className="md:col-span-2">
-                          <label className="block text-sm font-medium text-gray-700">
-                            Mot de passe *
-                          </label>
-                          <div className="relative mt-1">
-                            <input
-                              type={showSmtpPassword ? 'text' : 'password'}
-                              required
-                              value={smtpData.password}
-                              onChange={(e) =>
-                                setSmtpData({ ...smtpData, password: e.target.value })
-                              }
-                              className="block w-full rounded-lg border border-gray-300 px-4 py-2 pr-10 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                              placeholder="••••••••"
-                            />
+                    <div className="mt-6 space-y-4">
+                      {!showSmtpForm && smtpConfigured ? (
+                        <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+                          <div className="flex flex-col gap-3 border-b border-gray-100 bg-gray-50/60 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+                            <div className="min-w-0">
+                              <p className="text-sm font-semibold text-gray-900">
+                                Configuration SMTP enregistrée
+                              </p>
+                              <p className="mt-0.5 text-xs text-gray-600">
+                                Les emails partent avec cette configuration.
+                              </p>
+                            </div>
                             <button
                               type="button"
-                              onClick={() => setShowSmtpPassword((prev) => !prev)}
-                              className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400 hover:text-gray-600"
-                              aria-label={
-                                showSmtpPassword
-                                  ? 'Masquer le mot de passe'
-                                  : 'Afficher le mot de passe'
-                              }
+                              onClick={() => setShowSmtpForm(true)}
+                              className="cursor-pointer rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                             >
-                              {showSmtpPassword ? <EyeOff /> : <Eye />}
+                              Modifier
                             </button>
                           </div>
-                          <p className="mt-1 text-xs text-gray-500">
-                            Pour Gmail, utilisez un mot de passe d'application
-                          </p>
-                        </div>
 
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700">
-                            Email expéditeur (From) *
-                          </label>
-                          <input
-                            type="email"
-                            required
-                            value={smtpData.fromEmail}
-                            onChange={(e) =>
-                              setSmtpData({ ...smtpData, fromEmail: e.target.value })
-                            }
-                            className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                            placeholder="votre.email@exemple.com"
-                          />
+                          <dl className="grid grid-cols-1 gap-0 sm:grid-cols-2">
+                            <div className="space-y-1 border-b border-gray-100 px-4 py-3 sm:border-r">
+                              <dt className="text-xs font-medium text-gray-500">Serveur SMTP</dt>
+                              <dd className="min-w-0 truncate text-sm font-medium text-gray-900">
+                                {smtpData.host || '-'}
+                              </dd>
+                            </div>
+                            <div className="space-y-1 border-b border-gray-100 px-4 py-3">
+                              <dt className="text-xs font-medium text-gray-500">Port</dt>
+                              <dd className="text-sm font-medium text-gray-900">
+                                {smtpData.port || '-'}
+                              </dd>
+                            </div>
+                            <div className="space-y-1 border-b border-gray-100 px-4 py-3 sm:border-r sm:border-b-0">
+                              <dt className="text-xs font-medium text-gray-500">Nom d&apos;utilisateur</dt>
+                              <dd className="min-w-0 truncate text-sm font-medium text-gray-900">
+                                {smtpData.username || '-'}
+                              </dd>
+                            </div>
+                            <div className="space-y-1 border-b border-gray-100 px-4 py-3 sm:border-b-0">
+                              <dt className="text-xs font-medium text-gray-500">Sécurité</dt>
+                              <dd>
+                                <span
+                                  className={cn(
+                                    'inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium',
+                                    smtpData.secure
+                                      ? 'bg-green-100 text-green-800'
+                                      : 'bg-gray-100 text-gray-700',
+                                  )}
+                                >
+                                  {smtpData.secure ? 'SSL/TLS activé' : 'Sans SSL/TLS'}
+                                </span>
+                              </dd>
+                            </div>
+                            <div className="space-y-1 border-t border-gray-100 px-4 py-3 sm:border-r">
+                              <dt className="text-xs font-medium text-gray-500">Email expéditeur</dt>
+                              <dd className="min-w-0 truncate text-sm font-medium text-gray-900">
+                                {smtpData.fromEmail || '-'}
+                              </dd>
+                            </div>
+                            <div className="space-y-1 border-t border-gray-100 px-4 py-3">
+                              <dt className="text-xs font-medium text-gray-500">Nom expéditeur</dt>
+                              <dd className="min-w-0 truncate text-sm font-medium text-gray-900">
+                                {smtpData.fromName || '-'}
+                              </dd>
+                            </div>
+                          </dl>
                         </div>
+                      ) : (
+                        <form onSubmit={handleSmtpSubmit} className="space-y-4">
+                          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700">
+                                Serveur SMTP (Host) *
+                              </label>
+                              <input
+                                type="text"
+                                required
+                                value={smtpData.host}
+                                onChange={(e) => setSmtpData({ ...smtpData, host: e.target.value })}
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                                placeholder="smtp.gmail.com"
+                              />
+                            </div>
 
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700">
-                            Nom expéditeur (optionnel)
-                          </label>
-                          <input
-                            type="text"
-                            value={smtpData.fromName}
-                            onChange={(e) => setSmtpData({ ...smtpData, fromName: e.target.value })}
-                            className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                            placeholder="Votre Nom"
-                          />
-                        </div>
-                      </div>
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700">
+                                Port *
+                              </label>
+                              <input
+                                type="text"
+                                inputMode="numeric"
+                                required
+                                value={smtpData.port}
+                                onChange={(e) => {
+                                  const value = e.target.value;
+                                  if (value === '' || /^\d+$/.test(value)) {
+                                    const num = Number(value);
+                                    if (value === '' || (num >= 1 && num <= 65535)) {
+                                      setSmtpData({ ...smtpData, port: value });
+                                    }
+                                  }
+                                }}
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                                placeholder="587"
+                              />
+                              <p className="mt-1 text-xs text-gray-500">
+                                Ports courants : 587 (TLS), 465 (SSL), 25 (non sécurisé)
+                              </p>
+                            </div>
 
-                      <div className="mt-4 rounded-lg bg-blue-50 p-3 text-xs text-blue-900">
-                        <p className="font-medium">Utiliser Gmail avec SMTP</p>
-                        <p className="mt-1">
-                          Si vous utilisez une adresse Gmail, vous devez créer un{' '}
-                          <span className="font-semibold">mot de passe d&apos;application</span>{' '}
-                          dédié et le renseigner dans le champ &quot;Mot de passe&quot; ci-dessus.
-                          Rendez-vous sur{' '}
-                          <Link
-                            href="https://myaccount.google.com/apppasswords"
-                            target="_blank"
-                            rel="noreferrer"
-                            className="font-semibold underline"
-                          >
-                            la page des mots de passe d&apos;application Google
-                          </Link>{' '}
-                          pour en générer un (compte Google protégé par la validation en deux étapes
-                          requis).
-                        </p>
-                      </div>
+                            <div className="flex items-center">
+                              <input
+                                type="checkbox"
+                                id="smtp-secure"
+                                checked={smtpData.secure}
+                                onChange={(e) =>
+                                  setSmtpData({ ...smtpData, secure: e.target.checked })
+                                }
+                                className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-gray-400/30"
+                              />
+                              <label
+                                htmlFor="smtp-secure"
+                                className="ml-2 text-sm font-medium text-gray-700"
+                              >
+                                Connexion sécurisée (SSL/TLS)
+                              </label>
+                            </div>
+
+                            <div className="md:col-span-2">
+                              <label className="block text-sm font-medium text-gray-700">
+                                Nom d&apos;utilisateur *
+                              </label>
+                              <input
+                                type="text"
+                                required
+                                value={smtpData.username}
+                                onChange={(e) =>
+                                  setSmtpData({ ...smtpData, username: e.target.value })
+                                }
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                                placeholder="votre.email@exemple.com"
+                              />
+                            </div>
+
+                            <div className="md:col-span-2">
+                              <label className="block text-sm font-medium text-gray-700">
+                                Mot de passe *
+                              </label>
+                              <div className="relative mt-1">
+                                <input
+                                  type={showSmtpPassword ? 'text' : 'password'}
+                                  required
+                                  value={smtpData.password}
+                                  onChange={(e) =>
+                                    setSmtpData({ ...smtpData, password: e.target.value })
+                                  }
+                                  className="block w-full rounded-lg border border-gray-300 px-4 py-2 pr-10 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                                  placeholder="••••••••"
+                                />
+                                <button
+                                  type="button"
+                                  onClick={() => setShowSmtpPassword((prev) => !prev)}
+                                  className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400 hover:text-gray-600"
+                                  aria-label={
+                                    showSmtpPassword
+                                      ? 'Masquer le mot de passe'
+                                      : 'Afficher le mot de passe'
+                                  }
+                                >
+                                  {showSmtpPassword ? <EyeOff /> : <Eye />}
+                                </button>
+                              </div>
+                              <p className="mt-1 text-xs text-gray-500">
+                                Pour Gmail, utilisez un mot de passe d&apos;application
+                              </p>
+                            </div>
+
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700">
+                                Email expéditeur (From) *
+                              </label>
+                              <input
+                                type="email"
+                                required
+                                value={smtpData.fromEmail}
+                                onChange={(e) =>
+                                  setSmtpData({ ...smtpData, fromEmail: e.target.value })
+                                }
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                                placeholder="votre.email@exemple.com"
+                              />
+                            </div>
+
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700">
+                                Nom expéditeur (optionnel)
+                              </label>
+                              <input
+                                type="text"
+                                value={smtpData.fromName}
+                                onChange={(e) =>
+                                  setSmtpData({ ...smtpData, fromName: e.target.value })
+                                }
+                                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                                placeholder="Votre Nom"
+                              />
+                            </div>
+                          </div>
+
+                          <div className="mt-4 rounded-lg bg-blue-50 p-3 text-xs text-blue-900">
+                            <p className="font-medium">Utiliser Gmail avec SMTP</p>
+                            <p className="mt-1">
+                              Si vous utilisez une adresse Gmail, vous devez créer un{' '}
+                              <span className="font-semibold">mot de passe d&apos;application</span>{' '}
+                              dédié et le renseigner dans le champ &quot;Mot de passe&quot;
+                              ci-dessus. Rendez-vous sur{' '}
+                              <Link
+                                href="https://myaccount.google.com/apppasswords"
+                                target="_blank"
+                                rel="noreferrer"
+                                className="font-semibold underline"
+                              >
+                                la page des mots de passe d&apos;application Google
+                              </Link>{' '}
+                              pour en générer un (compte Google protégé par la validation en deux
+                              étapes requis).
+                            </p>
+                          </div>
+
+                          <div className="flex flex-col gap-3 pt-4 sm:flex-row sm:justify-end">
+                            {smtpConfigured && (
+                              <button
+                                type="button"
+                                onClick={() => setShowSmtpForm(false)}
+                                className="w-full cursor-pointer rounded-lg border border-gray-300 px-6 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 sm:w-auto"
+                              >
+                                Annuler
+                              </button>
+                            )}
+                            <button
+                              type="button"
+                              onClick={handleSmtpTest}
+                              disabled={smtpTesting || smtpSaving}
+                              className="w-full cursor-pointer rounded-lg border border-blue-600 px-6 py-2 text-sm font-medium text-blue-600 transition-colors hover:bg-blue-50 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                            >
+                              {smtpTesting ? 'Test en cours...' : 'Tester la connexion'}
+                            </button>
+                            <button
+                              type="submit"
+                              disabled={smtpSaving || smtpTesting}
+                              className="w-full cursor-pointer rounded-lg bg-blue-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                            >
+                              {smtpSaving ? 'Enregistrement...' : 'Enregistrer'}
+                            </button>
+                          </div>
+                        </form>
+                      )}
 
-                      <div className="mt-6 rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4">
+                      <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4">
                         <label className="mb-2 block text-sm font-medium text-gray-700">
                           Votre signature (optionnel)
                         </label>
@@ -2346,8 +1856,14 @@ export default function SettingsPage() {
                           cette configuration SMTP (par exemple&nbsp;: nom, fonction, coordonnées,
                           mentions légales…).
                         </p>
+                        <p className="mb-2 text-xs text-gray-500">
+                          Logo / image&nbsp;: maximum{' '}
+                          {Math.round(SIGNATURE_MAX_IMAGE_BYTES / 1024)}&nbsp;Ko par fichier
+                          (signature en base64 — privilégiez un PNG ou WebP compressé).
+                        </p>
                         <div className="mt-1">
                           <Editor
+                            maxImageBytes={SIGNATURE_MAX_IMAGE_BYTES}
                             ref={smtpSignatureEditorRef}
                             onReady={(methods) => {
                               // garder la ref synchronisée
@@ -2359,36 +1875,29 @@ export default function SettingsPage() {
                             }}
                           />
                         </div>
+                        <div className="mt-4 flex justify-end">
+                          <button
+                            type="button"
+                            onClick={handleSmtpSignatureSave}
+                            disabled={smtpSignatureSaving}
+                            className="cursor-pointer rounded-lg bg-blue-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
+                          >
+                            {smtpSignatureSaving ? 'Enregistrement...' : 'Enregistrer la signature'}
+                          </button>
+                        </div>
                       </div>
-
-                      <div className="flex flex-col gap-3 pt-4 sm:flex-row sm:justify-end">
-                        <button
-                          type="button"
-                          onClick={handleSmtpTest}
-                          disabled={smtpTesting || smtpSaving}
-                          className="w-full cursor-pointer rounded-lg border border-blue-600 px-6 py-2 text-sm font-medium text-blue-600 transition-colors hover:bg-blue-50 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
-                        >
-                          {smtpTesting ? 'Test en cours...' : 'Tester la connexion'}
-                        </button>
-                        <button
-                          type="submit"
-                          disabled={smtpSaving || smtpTesting}
-                          className="w-full cursor-pointer rounded-lg bg-blue-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
-                        >
-                          {smtpSaving ? 'Enregistrement...' : 'Enregistrer'}
-                        </button>
-                      </div>
-                    </form>
+                    </div>
                   )}
                 </div>
               )}
 
               {/* Section Gestion des statuts - Paramètres de l'Application */}
               {mainSection === 'app' && (
-                <>
-                  {isAdmin ? (
-                    <div className="space-y-6">
-                      <div className="rounded-lg bg-white p-6 shadow-sm">
+                isAdmin ? (
+                  <div className="space-y-6">
+                      {isAdmin && (
+                        <div className="space-y-6">
+                          <div className="rounded-lg bg-white p-6 shadow-sm">
                         <div className="flex items-center justify-between">
                           <div>
                             <h2 className="text-lg font-bold text-gray-900">Gestion des statuts</h2>
@@ -2430,7 +1939,7 @@ export default function SettingsPage() {
                                   onChange={(e) =>
                                     setStatusFormData({ ...statusFormData, name: e.target.value })
                                   }
-                                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-100"
+                                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-gray-100"
                                   placeholder="Ex: Nouveau"
                                   disabled={editingStatus?.isSystem}
                                 />
@@ -2466,7 +1975,7 @@ export default function SettingsPage() {
                                         color: e.target.value,
                                       })
                                     }
-                                    className="block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                    className="block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                     placeholder="#3B82F6"
                                   />
                                 </div>
@@ -2486,7 +1995,7 @@ export default function SettingsPage() {
                                   }
                                   className="peer sr-only"
                                 />
-                                <div className="peer h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-gray-400/30 after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white" />
+                                <div className="peer h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-gray-400/30 after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-transform after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white" />
                               </label>
                               <span className="text-sm text-gray-700">
                                 Demander un motif de fermeture
@@ -2514,7 +2023,7 @@ export default function SettingsPage() {
                               <button
                                 type="submit"
                                 disabled={statusSaving}
-                                className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                                className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
                               >
                                 {statusSaving
                                   ? 'Enregistrement...'
@@ -2583,10 +2092,10 @@ export default function SettingsPage() {
                             )}
                           </div>
                         )}
-                      </div>
+                          </div>
 
-                      {/* Section Motifs de fermeture - Paramètres de l'Application */}
-                      <div className="rounded-lg bg-white p-6 shadow-sm">
+                          {/* Section Motifs de fermeture - Paramètres de l'Application */}
+                          <div className="rounded-lg bg-white p-6 shadow-sm">
                         <div className="flex items-center justify-between gap-2">
                           <div>
                             <h2 className="text-lg font-bold text-gray-900">Motifs de fermeture</h2>
@@ -2665,8 +2174,7 @@ export default function SettingsPage() {
                               } catch (error: any) {
                                 console.error('Erreur motif de fermeture:', error);
                                 setClosingReasonError(
-                                  error.message ||
-                                    'Erreur lors de la sauvegarde du motif de fermeture',
+                                  devToast('Erreur lors de la sauvegarde du motif de fermeture', error),
                                 );
                               }
                             }}
@@ -2686,7 +2194,7 @@ export default function SettingsPage() {
                                       name: e.target.value,
                                     }))
                                   }
-                                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                                   placeholder="Ex: Faux numéro"
                                 />
                               </div>
@@ -2707,7 +2215,7 @@ export default function SettingsPage() {
                               </button>
                               <button
                                 type="submit"
-                                className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                                className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
                               >
                                 {closingReasonFormData.id ? 'Mettre à jour' : 'Créer'}
                               </button>
@@ -2789,8 +2297,7 @@ export default function SettingsPage() {
                                         } catch (error: any) {
                                           console.error('Erreur suppression motif:', error);
                                           setClosingReasonError(
-                                            error.message ||
-                                              'Erreur lors de la suppression du motif',
+                                            devToast('Erreur lors de la suppression du motif', error),
                                           );
                                         }
                                       }}
@@ -2804,109 +2311,29 @@ export default function SettingsPage() {
                             </div>
                           )}
                         </div>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="rounded-lg bg-white p-6 shadow-sm">
-                      <div className="py-12 text-center">
-                        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
-                          <Grid3x3 className="h-6 w-6 text-blue-600" />
+                          </div>
                         </div>
-                        <h3 className="mt-4 text-lg font-semibold text-gray-900">
-                          Accès restreint
-                        </h3>
-                        <p className="mt-2 text-sm text-gray-600">
-                          Cette section est réservée aux administrateurs.
-                        </p>
+                      )}
                       </div>
+                ) : (
+                  <div className="rounded-lg bg-white p-6 shadow-sm">
+                    <div className="py-12 text-center">
+                      <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
+                        <Grid3x3 className="h-6 w-6 text-blue-600" />
+                      </div>
+                      <h3 className="mt-4 text-lg font-semibold text-gray-900">Accès restreint</h3>
+                      <p className="mt-2 text-sm text-gray-600">
+                        Cette section est réservée aux administrateurs.
+                      </p>
                     </div>
-                  )}
-                </>
+                  </div>
+                )
               )}
 
               {/* Section Intégrations */}
               {mainSection === 'integrations' && (
                 <>
                   <div className="space-y-6">
-                    {/* Google Drive - Admin uniquement */}
-                    {isAdmin && (
-                      <div className="rounded-lg bg-white p-6 shadow-sm">
-                        <div className="flex items-center justify-between">
-                          <div>
-                            <h2 className="text-lg font-bold text-gray-900">Google Drive</h2>
-                            <p className="mt-1 text-sm text-gray-600">
-                              Connectez votre compte Google Drive. Tous les fichiers uploadés par
-                              les utilisateurs seront stockés dans votre Drive.
-                            </p>
-                          </div>
-                        </div>
-
-                        <div className="mt-6">
-                          <div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
-                            <div className="flex items-center justify-between">
-                              <div className="flex items-center gap-3">
-                                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100">
-                                  <Grid3x3 className="h-6 w-6 text-blue-600" />
-                                </div>
-                                <div>
-                                  <h3 className="font-medium text-gray-900">Google Drive</h3>
-                                  <p className="mt-1 text-xs text-gray-500">
-                                    Stockage des fichiers dans votre Drive personnel
-                                  </p>
-                                </div>
-                              </div>
-                            </div>
-                            {googleDriveLoading ? (
-                              <div className="mt-4 text-center text-sm text-gray-500">
-                                Chargement...
-                              </div>
-                            ) : (
-                              <div className="mt-4 flex items-center justify-between">
-                                {googleDriveAccount?.connected ? (
-                                  <>
-                                    <div className="flex items-center gap-2">
-                                      <span className="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
-                                        Connecté
-                                      </span>
-                                      {googleDriveAccount.email && (
-                                        <span className="text-xs text-gray-600">
-                                          <span className="font-medium">Configuré par</span>{' '}
-                                          <span className="text-gray-900">
-                                            {googleDriveAccount.email}
-                                          </span>
-                                        </span>
-                                      )}
-                                    </div>
-                                    <button
-                                      type="button"
-                                      onClick={handleGoogleDriveDisconnect}
-                                      disabled={googleDriveDisconnecting}
-                                      className="cursor-pointer rounded-lg border border-blue-300 bg-white px-3 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
-                                    >
-                                      {googleDriveDisconnecting ? 'Déconnexion...' : 'Déconnecter'}
-                                    </button>
-                                  </>
-                                ) : (
-                                  <>
-                                    <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
-                                      Non connecté
-                                    </span>
-                                    <button
-                                      type="button"
-                                      onClick={handleGoogleDriveConnect}
-                                      className="cursor-pointer rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700"
-                                    >
-                                      Connecter
-                                    </button>
-                                  </>
-                                )}
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    )}
-
                     {/* Google Calendar - Tous les utilisateurs */}
                     <div className="rounded-lg bg-white p-6 shadow-sm">
                       <div className="flex items-center justify-between">
@@ -2916,7 +2343,9 @@ export default function SettingsPage() {
                           </h2>
                           <p className="mt-1 text-sm text-gray-600">
                             Connectez votre compte Google pour synchroniser vos rendez-vous, tâches
-                            et Google Meet avec votre calendrier personnel.
+                            et Google Meet. Vous pouvez choisir un calendrier partagé à la création et
+                            afficher plusieurs agendas dans l&apos;agenda du CRM. Après une mise à jour
+                            des autorisations Google, reconnectez-vous via « Connecter ».
                           </p>
                         </div>
                       </div>
@@ -2943,1425 +2372,211 @@ export default function SettingsPage() {
                               Chargement...
                             </div>
                           ) : (
-                            <div className="mt-4 flex items-center justify-between">
-                              {googleCalendarAccount?.connected ? (
-                                <>
-                                  <div className="flex items-center gap-2">
-                                    <span className="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
-                                      Connecté
-                                    </span>
-                                    {googleCalendarAccount.email && (
-                                      <span className="text-xs text-gray-600">
-                                        {googleCalendarAccount.email}
+                            <div className="mt-4 space-y-6">
+                              <div className="flex items-center justify-between">
+                                {googleCalendarAccount?.connected ? (
+                                  <>
+                                    <div className="flex items-center gap-2">
+                                      <span className="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
+                                        Connecté
                                       </span>
-                                    )}
-                                  </div>
-                                  <button
-                                    type="button"
-                                    onClick={handleGoogleCalendarDisconnect}
-                                    disabled={googleCalendarDisconnecting}
-                                    className="cursor-pointer rounded-lg border border-blue-300 bg-white px-3 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
-                                  >
-                                    {googleCalendarDisconnecting ? 'Déconnexion...' : 'Déconnecter'}
-                                  </button>
-                                </>
-                              ) : (
-                                <>
-                                  <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
-                                    Non connecté
-                                  </span>
-                                  <button
-                                    type="button"
-                                    onClick={handleGoogleCalendarConnect}
-                                    className="cursor-pointer rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700"
-                                  >
-                                    Connecter
-                                  </button>
-                                </>
-                              )}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Google Sheets - Admin uniquement */}
-                    {isAdmin && (
-                      <>
-                        <div className="rounded-lg bg-white p-6 shadow-sm">
-                          <div className="flex items-center justify-between">
-                            <div>
-                              <h2 className="text-lg font-bold text-gray-900">
-                                Intégration Google Sheets
-                              </h2>
-                              <p className="mt-1 text-sm text-gray-600">
-                                Importez automatiquement des contacts à partir d&apos;un Google
-                                Sheet.
-                              </p>
-                            </div>
-                            <div className="flex items-center gap-2">
-                              <button
-                                type="button"
-                                onClick={handleGoogleSheetSync}
-                                disabled={googleSheetSyncing}
-                                className="cursor-pointer rounded-lg border border-blue-600 px-4 py-2 text-sm font-medium text-blue-600 transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
-                              >
-                                {googleSheetSyncing ? 'Synchronisation...' : 'Synchroniser'}
-                              </button>
-                              <button
-                                onClick={() => {
-                                  setEditingGoogleSheetConfig(null);
-                                  setGoogleSheetFormData({
-                                    name: '',
-                                    active: true,
-                                    sheetUrl: '',
-                                    sheetName: '',
-                                    headerRow: '1',
-                                    defaultStatusId: null,
-                                    defaultAssignedUserId: null,
-                                  });
-                                  setGoogleSheetMappings([]);
-                                  setGoogleSheetStep(1);
-                                  setShowGoogleSheetModal(true);
-                                  setGoogleSheetError('');
-                                  setGoogleSheetSuccess('');
-                                }}
-                                className="cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
-                              >
-                                + Ajouter
-                              </button>
-                            </div>
-                          </div>
-
-                          {googleSheetLoading ? (
-                            <div className="mt-6 text-center text-gray-500">Chargement...</div>
-                          ) : googleSheetConfigs.length === 0 ? (
-                            <div className="mt-6 rounded-lg border border-dashed border-gray-300 bg-gray-50 p-8 text-center">
-                              <p className="text-sm text-gray-600">
-                                Aucune configuration Google Sheets
-                              </p>
-                              <p className="mt-1 text-xs text-gray-500">
-                                Cliquez sur &quot;+ Ajouter&quot; pour créer votre première
-                                configuration
-                              </p>
-                            </div>
-                          ) : (
-                            <div className="mt-6 space-y-3">
-                              {googleSheetConfigs.map((config) => (
-                                <div
-                                  key={config.id}
-                                  className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 p-4"
-                                >
-                                  <div className="flex-1">
-                                    <div className="flex items-center gap-2">
-                                      <h3 className="font-medium text-gray-900">{config.name}</h3>
-                                      {config.active ? (
-                                        <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
-                                          Actif
-                                        </span>
-                                      ) : (
-                                        <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-800">
-                                          Inactif
+                                      {googleCalendarAccount.email && (
+                                        <span className="text-xs text-gray-600">
+                                          {googleCalendarAccount.email}
                                         </span>
                                       )}
                                     </div>
-                                    <p className="mt-1 text-xs text-gray-500">
-                                      {config.sheetName} - Ligne {config.headerRow}
-                                    </p>
-                                  </div>
-                                  <div className="flex items-center gap-2">
                                     <button
-                                      onClick={() => handleEditGoogleSheet(config)}
-                                      className="cursor-pointer rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100"
+                                      type="button"
+                                      onClick={handleGoogleCalendarDisconnect}
+                                      disabled={googleCalendarDisconnecting}
+                                      className="cursor-pointer rounded-lg border border-blue-300 bg-white px-3 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
                                     >
-                                      Modifier
+                                      {googleCalendarDisconnecting ? 'Déconnexion...' : 'Déconnecter'}
                                     </button>
+                                  </>
+                                ) : (
+                                  <>
+                                    <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
+                                      Non connecté
+                                    </span>
                                     <button
-                                      onClick={() => handleDeleteGoogleSheet(config.id)}
-                                      className="cursor-pointer rounded-lg border border-blue-300 px-3 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-50"
+                                      type="button"
+                                      onClick={handleGoogleCalendarConnect}
+                                      className="cursor-pointer rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700"
                                     >
-                                      Supprimer
+                                      Connecter
                                     </button>
-                                  </div>
-                                </div>
-                              ))}
-                            </div>
-                          )}
-                        </div>
-                      </>
-                    )}
-
-                    {/* Meta Lead Ads */}
-                    {isAdmin && (
-                      <div className="rounded-lg bg-white p-6 shadow-sm">
-                        <div className="flex items-center justify-between">
-                          <div>
-                            <h2 className="text-lg font-bold text-gray-900">
-                              Intégration Meta Lead Ads
-                            </h2>
-                            <p className="mt-1 text-sm text-gray-600">
-                              Recevez automatiquement les leads depuis Facebook Lead Ads.
-                            </p>
-                          </div>
-                          <button
-                            onClick={() => {
-                              setEditingMetaLeadConfig(null);
-                              setMetaLeadFormData({
-                                name: '',
-                                active: true,
-                                pageId: '',
-                                accessToken: '',
-                                verifyToken: '',
-                                defaultStatusId: null,
-                                defaultAssignedUserId: null,
-                              });
-                              setShowMetaLeadModal(true);
-                              setMetaLeadError('');
-                              setMetaLeadSuccess('');
-                            }}
-                            className="cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
-                          >
-                            + Ajouter
-                          </button>
-                        </div>
-
-                        {metaLeadLoading ? (
-                          <div className="mt-6 text-center text-gray-500">Chargement...</div>
-                        ) : metaLeadConfigs.length === 0 ? (
-                          <div className="mt-6 rounded-lg border border-dashed border-gray-300 bg-gray-50 p-8 text-center">
-                            <p className="text-sm text-gray-600">
-                              Aucune configuration Meta Lead Ads
-                            </p>
-                            <p className="mt-1 text-xs text-gray-500">
-                              Cliquez sur &quot;+ Ajouter&quot; pour créer votre première
-                              configuration
-                            </p>
-                          </div>
-                        ) : (
-                          <div className="mt-6 space-y-3">
-                            {metaLeadConfigs.map((config) => (
-                              <div
-                                key={config.id}
-                                className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 p-4"
-                              >
-                                <div className="flex-1">
-                                  <div className="flex items-center gap-2">
-                                    <h3 className="font-medium text-gray-900">{config.name}</h3>
-                                    {config.active ? (
-                                      <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
-                                        Actif
-                                      </span>
-                                    ) : (
-                                      <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-800">
-                                        Inactif
-                                      </span>
-                                    )}
-                                  </div>
-                                  <p className="mt-1 text-xs text-gray-500">
-                                    Page ID: {config.pageId}
-                                  </p>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                  <button
-                                    onClick={() => handleEditMetaLead(config)}
-                                    className="cursor-pointer rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100"
-                                  >
-                                    Modifier
-                                  </button>
-                                  <button
-                                    onClick={() => handleDeleteMetaLead(config.id)}
-                                    className="cursor-pointer rounded-lg border border-blue-300 px-3 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-50"
-                                  >
-                                    Supprimer
-                                  </button>
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    )}
-
-                    {/* Google Ads */}
-                    {isAdmin && (
-                      <div className="rounded-lg bg-white p-6 shadow-sm">
-                        <div className="flex items-center justify-between">
-                          <div>
-                            <h2 className="text-lg font-bold text-gray-900">
-                              Intégration Google Ads
-                            </h2>
-                            <p className="mt-1 text-sm text-gray-600">
-                              Recevez automatiquement les leads depuis Google Ads Lead Forms.
-                            </p>
-                          </div>
-                          <button
-                            onClick={() => {
-                              setEditingGoogleAdsConfig(null);
-                              setGoogleAdsFormData({
-                                name: '',
-                                active: true,
-                                webhookKey: '',
-                                defaultStatusId: null,
-                                defaultAssignedUserId: null,
-                              });
-                              setShowGoogleAdsModal(true);
-                              setGoogleAdsError('');
-                              setGoogleAdsSuccess('');
-                            }}
-                            className="cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
-                          >
-                            + Ajouter
-                          </button>
-                        </div>
-
-                        {googleAdsLoading ? (
-                          <div className="mt-6 text-center text-gray-500">Chargement...</div>
-                        ) : googleAdsConfigs.length === 0 ? (
-                          <div className="mt-6 rounded-lg border border-dashed border-gray-300 bg-gray-50 p-8 text-center">
-                            <p className="text-sm text-gray-600">Aucune configuration Google Ads</p>
-                            <p className="mt-1 text-xs text-gray-500">
-                              Cliquez sur &quot;+ Ajouter&quot; pour créer votre première
-                              configuration
-                            </p>
-                          </div>
-                        ) : (
-                          <div className="mt-6 space-y-3">
-                            {googleAdsConfigs.map((config) => (
-                              <div
-                                key={config.id}
-                                className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 p-4"
-                              >
-                                <div className="flex-1">
-                                  <div className="flex items-center gap-2">
-                                    <h3 className="font-medium text-gray-900">{config.name}</h3>
-                                    {config.active ? (
-                                      <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
-                                        Actif
-                                      </span>
-                                    ) : (
-                                      <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-800">
-                                        Inactif
-                                      </span>
-                                    )}
-                                  </div>
-                                  <p className="mt-1 text-xs text-gray-500">
-                                    Webhook Key: {config.webhookKey}
-                                  </p>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                  <button
-                                    onClick={() => handleEditGoogleAds(config)}
-                                    className="cursor-pointer rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100"
-                                  >
-                                    Modifier
-                                  </button>
-                                  <button
-                                    onClick={() => handleDeleteGoogleAds(config.id)}
-                                    className="cursor-pointer rounded-lg border border-blue-300 px-3 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-50"
-                                  >
-                                    Supprimer
-                                  </button>
-                                </div>
+                                  </>
+                                )}
                               </div>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Modals - doivent être en dehors des sections conditionnelles */}
-        {showGoogleSheetModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
-            <div className="flex max-h-[90vh] w-full max-w-5xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
-              {/* En-tête fixe */}
-              <div className="shrink-0 border-b border-gray-100 pb-4">
-                <div className="flex items-center justify-between">
-                  <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">
-                    {editingGoogleSheetConfig ? 'Modifier' : 'Ajouter'} une configuration Google
-                    Sheets
-                  </h2>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowGoogleSheetModal(false);
-                      setEditingGoogleSheetConfig(null);
-                      setGoogleSheetStep(1);
-                      setGoogleSheetFormData({
-                        name: '',
-                        active: true,
-                        sheetUrl: '',
-                        sheetName: '',
-                        headerRow: '1',
-                        defaultStatusId: null,
-                        defaultAssignedUserId: null,
-                      });
-                      setGoogleSheetMappings([]);
-                      setGoogleSheetError('');
-                      setGoogleSheetPreview([]);
-                      setGoogleSheetHeaders([]);
-                      setGsPreviewStep('url');
-                      setGsAvailableSheets([]);
-                      setGsRawRows([]);
-                      setGsSelectedHeaderRow(0);
-                    }}
-                    className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
-                  >
-                    <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M6 18L18 6M6 6l12 12"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-
-              {/* Contenu scrollable */}
-              <form
-                id="google-sheet-form"
-                onSubmit={handleGoogleSheetSubmit}
-                className="flex-1 space-y-4 overflow-y-auto pt-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-              >
-                {/* Étape 1 : informations de base */}
-                {googleSheetStep === 1 && (
-                  <>
-                    <div>
-                      <label className="block text-sm font-medium text-gray-700">
-                        Nom de la configuration *
-                      </label>
-                      <input
-                        type="text"
-                        required
-                        value={googleSheetFormData.name}
-                        onChange={(e) =>
-                          setGoogleSheetFormData((prev) => ({
-                            ...prev,
-                            name: e.target.value,
-                          }))
-                        }
-                        className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                        placeholder="Ex: Contacts Ventes"
-                      />
-                    </div>
-
-                    {/* Indicateur d'etapes */}
-                    {gsPreviewStep !== 'url' && (
-                      <div className="flex items-center gap-2 text-xs font-medium text-gray-500">
-                        <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-gray-500">
-                          1. Lien
-                        </span>
-                        <span className="text-gray-300">/</span>
-                        {gsAvailableSheets.length > 1 && (
-                          <>
-                            <span
-                              className={cn(
-                                'rounded-full px-2.5 py-0.5',
-                                gsPreviewStep === 'sheet'
-                                  ? 'bg-blue-100 text-blue-700'
-                                  : 'bg-gray-100 text-gray-500',
-                              )}
-                            >
-                              2. Feuille
-                            </span>
-                            <span className="text-gray-300">/</span>
-                          </>
-                        )}
-                        <span
-                          className={cn(
-                            'rounded-full px-2.5 py-0.5',
-                            gsPreviewStep === 'header'
-                              ? 'bg-blue-100 text-blue-700'
-                              : 'bg-gray-100 text-gray-500',
-                          )}
-                        >
-                          {gsAvailableSheets.length > 1 ? '3' : '2'}. En-tête
-                        </span>
-                      </div>
-                    )}
 
-                    {/* Sous-etape URL */}
-                    {gsPreviewStep === 'url' && (
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700">
-                          Lien du Google Sheet *
-                        </label>
-                        <input
-                          type="url"
-                          required
-                          value={googleSheetFormData.sheetUrl}
-                          onChange={(e) => {
-                            setGoogleSheetFormData((prev) => ({
-                              ...prev,
-                              sheetUrl: e.target.value,
-                              sheetName: '',
-                              headerRow: '1',
-                            }));
-                            setGsAvailableSheets([]);
-                            setGsRawRows([]);
-                            setGsSelectedHeaderRow(0);
-                            setGoogleSheetPreview([]);
-                            setGoogleSheetHeaders([]);
-                          }}
-                          className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                          placeholder="https://docs.google.com/spreadsheets/d/..."
-                        />
-                      </div>
-                    )}
-
-                    {/* Sous-etape Feuille */}
-                    {gsPreviewStep === 'sheet' && (
-                      <div className="space-y-6">
-                        <div className="rounded-lg border border-gray-200 p-4">
-                          <div className="flex items-center justify-between">
-                            <div>
-                              <p className="text-sm font-medium text-gray-900">
-                                {googleSheetFormData.sheetUrl.length > 60
-                                  ? googleSheetFormData.sheetUrl.slice(0, 60) + '...'
-                                  : googleSheetFormData.sheetUrl}
-                              </p>
-                            </div>
-                            <button
-                              type="button"
-                              onClick={() => {
-                                setGsPreviewStep('url');
-                                setGsAvailableSheets([]);
-                                setGsRawRows([]);
-                              }}
-                              className="cursor-pointer rounded-lg p-1 text-gray-400 transition-colors hover:text-gray-600"
-                            >
-                              <svg
-                                className="h-4 w-4"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  strokeWidth={2}
-                                  d="M6 18L18 6M6 6l12 12"
-                                />
-                              </svg>
-                            </button>
-                          </div>
-                        </div>
-                        <div>
-                          <h3 className="mb-2 text-base font-semibold text-gray-900">
-                            Choisir une feuille
-                          </h3>
-                          <p className="mb-4 text-sm text-gray-600">
-                            Ce fichier contient {gsAvailableSheets.length} feuilles. Sélectionnez
-                            celle qui contient les contacts à importer.
-                          </p>
-                          <div className="space-y-2">
-                            {gsAvailableSheets.map((name, idx) => (
-                              <button
-                                key={name}
-                                type="button"
-                                disabled={gsLoadingPreview}
-                                onClick={async () => {
-                                  setGoogleSheetFormData((prev) => ({ ...prev, sheetName: name }));
-                                  setGsLoadingPreview(true);
-                                  setGoogleSheetError('');
-                                  try {
-                                    const res = await fetch('/api/settings/google-sheet/preview', {
-                                      method: 'POST',
-                                      headers: { 'Content-Type': 'application/json' },
-                                      body: JSON.stringify({
-                                        sheetUrl: googleSheetFormData.sheetUrl,
-                                        sheetName: name,
-                                      }),
-                                    });
-                                    const data = await res.json();
-                                    if (!res.ok) throw new Error(data.error || 'Erreur');
-                                    setGsRawRows(data.rawRows || []);
-                                    setGsSelectedHeaderRow(0);
-                                    setGsPreviewStep('header');
-                                  } catch (err: unknown) {
-                                    setGoogleSheetError(
-                                      err instanceof Error ? err.message : 'Erreur',
-                                    );
-                                  } finally {
-                                    setGsLoadingPreview(false);
-                                  }
-                                }}
-                                className={cn(
-                                  'flex w-full items-center gap-3 rounded-lg border-2 px-4 py-3 text-left text-sm font-medium transition-colors disabled:opacity-50',
-                                  googleSheetFormData.sheetName === name
-                                    ? 'border-blue-500 bg-blue-50 text-blue-700'
-                                    : 'border-gray-200 text-gray-700 hover:border-gray-300 hover:bg-gray-50',
-                                )}
-                              >
-                                <span
-                                  className={cn(
-                                    'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold',
-                                    googleSheetFormData.sheetName === name
-                                      ? 'bg-blue-100 text-blue-700'
-                                      : 'bg-gray-100 text-gray-500',
+                              {googleCalendarAccount?.connected && (
+                                <div className="border-t border-gray-100 pt-4">
+                                  {gCalDetails?.needsGoogleReconnect && (
+                                    <p className="mb-3 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-900">
+                                      Reconnectez votre compte avec le bouton « Déconnecter » puis «
+                                      Connecter » pour autoriser la liste de vos calendriers (y compris
+                                      partagés).
+                                    </p>
                                   )}
-                                >
-                                  {idx + 1}
-                                </span>
-                                {name}
-                              </button>
-                            ))}
-                          </div>
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Sous-etape En-tete */}
-                    {gsPreviewStep === 'header' && (
-                      <div className="space-y-6">
-                        <div className="rounded-lg border border-gray-200 p-4">
-                          <div className="flex items-center justify-between">
-                            <div>
-                              <p className="text-sm font-medium text-gray-900">
-                                {googleSheetFormData.sheetUrl.length > 50
-                                  ? googleSheetFormData.sheetUrl.slice(0, 50) + '...'
-                                  : googleSheetFormData.sheetUrl}
-                                {googleSheetFormData.sheetName && (
-                                  <span className="ml-2 text-xs text-gray-500">
-                                    — {googleSheetFormData.sheetName}
-                                  </span>
-                                )}
-                              </p>
-                            </div>
-                            <button
-                              type="button"
-                              onClick={() =>
-                                setGsPreviewStep(gsAvailableSheets.length > 1 ? 'sheet' : 'url')
-                              }
-                              className="cursor-pointer rounded-lg p-1 text-gray-400 transition-colors hover:text-gray-600"
-                            >
-                              <svg
-                                className="h-4 w-4"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  strokeWidth={2}
-                                  d="M6 18L18 6M6 6l12 12"
-                                />
-                              </svg>
-                            </button>
-                          </div>
-                        </div>
-                        <div>
-                          <h3 className="mb-2 text-base font-semibold text-gray-900">
-                            Sélectionner la ligne d&apos;en-tête
-                          </h3>
-                          <p className="mb-4 text-sm text-gray-600">
-                            Cliquez sur la ligne qui contient les noms de colonnes (en-têtes). Les
-                            lignes au-dessus seront ignorées.
-                          </p>
-                          {gsRawRows.length > 0 ? (
-                            <div className="overflow-x-auto rounded-lg border border-gray-200">
-                              <table className="min-w-full divide-y divide-gray-200">
-                                <thead className="bg-gray-50">
-                                  <tr>
-                                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                                      #
-                                    </th>
-                                    {gsRawRows[0]?.map((_, colIdx) => (
-                                      <th
-                                        key={colIdx}
-                                        className="px-3 py-2 text-left text-xs font-medium text-gray-500"
+                                  {gCalDetails?.error && !gCalDetails?.calendars?.length && (
+                                    <p className="mb-3 text-xs text-red-600">{gCalDetails.error}</p>
+                                  )}
+                                  {writableGoogleCalendars.length > 0 && (
+                                    <div className="space-y-2">
+                                      <label
+                                        htmlFor="settings-gcal-default"
+                                        className="block text-sm font-medium text-gray-700"
                                       >
-                                        Col {colIdx + 1}
-                                      </th>
-                                    ))}
-                                  </tr>
-                                </thead>
-                                <tbody className="divide-y divide-gray-100 bg-white">
-                                  {gsRawRows.map((row, rowIdx) => (
-                                    <tr
-                                      key={rowIdx}
-                                      onClick={() => {
-                                        setGsSelectedHeaderRow(rowIdx);
-                                        setGoogleSheetFormData((prev) => ({
-                                          ...prev,
-                                          headerRow: String(rowIdx + 1),
-                                        }));
-                                      }}
-                                      className={cn(
-                                        'cursor-pointer transition-colors',
-                                        gsSelectedHeaderRow === rowIdx
-                                          ? 'bg-blue-50 ring-2 ring-blue-500 ring-inset'
-                                          : rowIdx < gsSelectedHeaderRow
-                                            ? 'bg-gray-50 text-gray-400'
-                                            : 'hover:bg-gray-50',
-                                      )}
+                                        Calendrier par défaut pour les nouveaux événements
+                                      </label>
+                                      <select
+                                        id="settings-gcal-default"
+                                        value={gCalDefaultId || 'primary'}
+                                        onChange={(e) => setGCalDefaultId(e.target.value)}
+                                        className="block w-full max-w-md rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900"
+                                      >
+                                        {writableGoogleCalendars.map((c) => (
+                                          <option key={c.id} value={c.id}>
+                                            {c.summary}
+                                            {c.primary ? ' (principal)' : ''}
+                                          </option>
+                                        ))}
+                                      </select>
+                                    </div>
+                                  )}
+                                  {(gCalDetails?.calendars?.length ?? 0) > 0 && (
+                                    <div className="mt-4">
+                                      <p className="text-sm font-medium text-gray-700">
+                                        Afficher dans l&apos;agenda du CRM
+                                      </p>
+                                      <p className="mt-1 text-xs text-gray-500">
+                                        Cochez les calendriers dont les événements apparaissent en plus
+                                        des tâches du CRM (événements en lecture seule, lien vers Google).
+                                      </p>
+                                      <ul className="mt-2 max-h-48 space-y-2 overflow-y-auto rounded-lg border border-gray-100 p-2">
+                                        {(gCalDetails?.calendars ?? []).map((c) => (
+                                          <li key={c.id}>
+                                            <label className="flex cursor-pointer items-center gap-2 text-sm text-gray-800">
+                                              <input
+                                                type="checkbox"
+                                                className="rounded border-gray-300"
+                                                checked={gCalVisibleIds.includes(c.id)}
+                                                onChange={(e) => {
+                                                  setGCalVisibleIds((prev) =>
+                                                    e.target.checked
+                                                      ? [...prev, c.id]
+                                                      : prev.filter((id) => id !== c.id),
+                                                  );
+                                                }}
+                                              />
+                                              <span className="truncate">{c.summary}</span>
+                                              {c.primary && (
+                                                <span className="text-xs text-gray-400">(principal)</span>
+                                              )}
+                                            </label>
+                                          </li>
+                                        ))}
+                                      </ul>
+                                    </div>
+                                  )}
+                                  {googleCalendarAccount.connected && (
+                                    <div className="mt-4">
+                                      <label
+                                        htmlFor="settings-gcal-agenda-color"
+                                        className="block text-sm font-medium text-gray-700"
+                                      >
+                                        Couleur des événements Google dans l&apos;agenda
+                                      </label>
+                                      <p className="mt-1 text-xs text-gray-500">
+                                        Pastilles et cartes des événements importés (vues mois, semaine et
+                                        jour).
+                                      </p>
+                                      <div className="mt-2 flex flex-wrap items-center gap-3">
+                                        <input
+                                          id="settings-gcal-agenda-color"
+                                          type="color"
+                                          value={gCalEventColor}
+                                          onChange={(e) => setGCalEventColor(e.target.value)}
+                                          className="h-9 w-14 cursor-pointer rounded border border-gray-300 bg-white p-0.5"
+                                          title="Choisir une couleur"
+                                        />
+                                        <div className="flex flex-wrap gap-1.5">
+                                          {GOOGLE_AGENDA_COLOR_PRESETS.map((hex) => (
+                                            <button
+                                              key={hex}
+                                              type="button"
+                                              title={hex}
+                                              aria-label={`Couleur ${hex}`}
+                                              onClick={() => setGCalEventColor(hex)}
+                                              className={cn(
+                                                'h-7 w-7 rounded-full border-2 border-white shadow-sm ring-1 ring-gray-200 transition-transform hover:scale-110',
+                                                gCalEventColor.toLowerCase() === hex.toLowerCase() &&
+                                                  'ring-2 ring-gray-900 ring-offset-1',
+                                              )}
+                                              style={{ backgroundColor: hex }}
+                                            />
+                                          ))}
+                                        </div>
+                                      </div>
+                                    </div>
+                                  )}
+                                  {googleCalendarAccount.connected && (
+                                    <button
+                                      type="button"
+                                      onClick={handleSaveGoogleCalendarPrefs}
+                                      disabled={gCalPrefsSaving}
+                                      className="mt-4 cursor-pointer rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800 disabled:opacity-50"
                                     >
-                                      <td className="px-3 py-2 text-xs font-medium text-gray-400">
-                                        {rowIdx + 1}
-                                      </td>
-                                      {row.map((cell, colIdx) => (
-                                        <td
-                                          key={colIdx}
-                                          className={cn(
-                                            'max-w-[200px] truncate px-3 py-2 text-xs',
-                                            gsSelectedHeaderRow === rowIdx
-                                              ? 'font-semibold text-blue-700'
-                                              : 'text-gray-900',
-                                          )}
-                                        >
-                                          {cell || <span className="text-gray-300">—</span>}
-                                        </td>
-                                      ))}
-                                    </tr>
-                                  ))}
-                                </tbody>
-                              </table>
+                                      {gCalPrefsSaving ? 'Enregistrement...' : 'Enregistrer les préférences'}
+                                    </button>
+                                  )}
+                                </div>
+                              )}
                             </div>
-                          ) : (
-                            <p className="text-sm text-gray-500">
-                              Aucune donnée disponible dans cette feuille.
-                            </p>
                           )}
                         </div>
                       </div>
-                    )}
-                  </>
-                )}
-
-                {/* Étape 2 : mapping manuel des colonnes + valeurs par défaut */}
-                {googleSheetStep === 2 && (
-                  <>
-                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700">
-                          Utilisateur assigné par défaut (optionnel)
-                        </label>
-                        <select
-                          value={googleSheetFormData.defaultAssignedUserId || ''}
-                          onChange={(e) =>
-                            setGoogleSheetFormData((prev) => ({
-                              ...prev,
-                              defaultAssignedUserId: e.target.value || null,
-                            }))
-                          }
-                          className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                        >
-                          <option value="">Aucun utilisateur par défaut</option>
-                          {metaLeadUsers.map((user) => (
-                            <option key={user.id} value={user.id}>
-                              {user.name} ({user.email})
-                            </option>
-                          ))}
-                        </select>
-                      </div>
-
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700">
-                          Statut par défaut
-                        </label>
-                        <select
-                          value={googleSheetFormData.defaultStatusId || ''}
-                          onChange={(e) =>
-                            setGoogleSheetFormData((prev) => ({
-                              ...prev,
-                              defaultStatusId: e.target.value || null,
-                            }))
-                          }
-                          className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                        >
-                          <option value="">Aucun statut par défaut</option>
-                          {statuses.map((status) => (
-                            <option key={status.id} value={status.id}>
-                              {status.name}
-                            </option>
-                          ))}
-                        </select>
-                      </div>
-                    </div>
-
-                    <div className="flex items-center justify-between">
-                      <h3 className="text-base font-semibold text-gray-900">
-                        Correspondance des champs
-                      </h3>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setGoogleSheetMappings((prev) => [
-                            ...prev,
-                            {
-                              id: `mapping-${Date.now()}-${Math.random()}`,
-                              columnName: '',
-                              action: 'ignore',
-                            },
-                          ]);
-                        }}
-                        className="flex cursor-pointer items-center gap-1 rounded-lg border border-blue-600 bg-white px-3 py-1.5 text-sm font-medium text-blue-600 transition-colors hover:bg-blue-50"
-                      >
-                        <Plus className="h-4 w-4" />
-                        Ajouter un champ
-                      </button>
                     </div>
 
-                    <div className="mt-4 space-y-3">
-                      {googleSheetMappings.map((mapping) => (
-                        <div
-                          key={mapping.id}
-                          className="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 p-3"
-                        >
-                          <div className="flex-1">
-                            <input
-                              type="text"
-                              value={mapping.columnName}
-                              onChange={(e) => {
-                                setGoogleSheetMappings((prev) =>
-                                  prev.map((m) =>
-                                    m.id === mapping.id ? { ...m, columnName: e.target.value } : m,
-                                  ),
-                                );
-                              }}
-                              placeholder="Nom de la colonne dans Google Sheets"
-                              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                            />
-                          </div>
-
-                          <div className="flex items-center">
-                            <ArrowRight className="h-5 w-5 text-gray-400" />
-                          </div>
-
-                          <div className="flex-1">
-                            <select
-                              value={mapping.action}
-                              onChange={(e) => {
-                                const newAction = e.target.value as 'map' | 'note' | 'ignore';
-                                setGoogleSheetMappings((prev) =>
-                                  prev.map((m) =>
-                                    m.id === mapping.id
-                                      ? {
-                                          ...m,
-                                          action: newAction,
-                                          crmField:
-                                            newAction === 'map' && m.crmField
-                                              ? m.crmField
-                                              : newAction === 'map'
-                                                ? 'firstName'
-                                                : undefined,
-                                        }
-                                      : m,
-                                  ),
-                                );
-                              }}
-                              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                            >
-                              <option value="map">Mapper vers un champ</option>
-                              <option value="note">Ajouter comme note</option>
-                              <option value="ignore">-- Ne pas importer --</option>
-                            </select>
-                          </div>
-
-                          {mapping.action === 'map' && (
-                            <>
-                              <div className="flex items-center">
-                                <ArrowRight className="h-5 w-5 text-gray-400" />
-                              </div>
-                              <div className="flex-1">
-                                <select
-                                  value={mapping.crmField || ''}
-                                  onChange={(e) => {
-                                    setGoogleSheetMappings((prev) =>
-                                      prev.map((m) =>
-                                        m.id === mapping.id
-                                          ? { ...m, crmField: e.target.value }
-                                          : m,
-                                      ),
-                                    );
-                                  }}
-                                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                                >
-                                  <option value="">Sélectionnez un champ</option>
-                                  <option value="phone">Téléphone *</option>
-                                  <option value="firstName">Prénom</option>
-                                  <option value="lastName">Nom</option>
-                                  <option value="email">Email</option>
-                                  <option value="civility">Civilité</option>
-                                  <option value="secondaryPhone">Téléphone secondaire</option>
-                                  <option value="address">Adresse</option>
-                                  <option value="city">Ville</option>
-                                  <option value="postalCode">Code postal</option>
-                                  <option value="origin">Origine</option>
-                                </select>
+                    {isAdmin && (
+                      <>
+                        <GoogleSheetIntegration
+                          statuses={statuses}
+                          users={integrationUsers}
+                        />
+                        <MetaLeadIntegration
+                          statuses={statuses}
+                          users={integrationUsers}
+                          onOpenLogs={handleOpenLogs('meta_lead')}
+                        />
+                        <GoogleAdsIntegration
+                          statuses={statuses}
+                          users={integrationUsers}
+                          onOpenLogs={handleOpenLogs('google_ads')}
+                        />
+                  </>
+                )}
                               </div>
                             </>
                           )}
-
-                          <button
-                            type="button"
-                            onClick={() => {
-                              setGoogleSheetMappings((prev) =>
-                                prev.filter((m) => m.id !== mapping.id),
-                              );
-                            }}
-                            className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-200 hover:text-blue-600"
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </button>
                         </div>
-                      ))}
                     </div>
-
-                    <div className="mt-6 rounded-lg border border-gray-200 bg-gray-50 p-4">
-                      <ul className="space-y-2 text-xs text-gray-600">
-                        <li>
-                          • Le champ &quot;Téléphone&quot; est obligatoire pour l&#39;import.
-                          Configurez également les autres champs que vous souhaitez importer.
-                        </li>
-                        <li>
-                          • Les colonnes sans correspondance de champ sélectionnée (-- Ne pas
-                          importer --) seront ignorées lors de l&apos;import
-                        </li>
-                        <li>
-                          • Laissez vide le nom de colonne Google Sheets pour ignorer ce mapping
-                        </li>
-                        <li>
-                          • Pour &quot;Origine&quot;, utilisez le nom de la plateforme (ex:
-                          Facebook, Instagram, Google, LinkedIn, Site Web)
-                        </li>
-                        <li>
-                          • Les colonnes marquées &quot;Ajouter comme note&quot; seront regroupées
-                          dans une seule note avec le format &quot;Question : Réponse&quot;
-                        </li>
-                      </ul>
                     </div>
 
-                    {googleSheetPreview.length > 0 && googleSheetHeaders.length > 0 && (
-                      <div>
-                        <h3 className="mb-3 text-sm font-semibold text-gray-900">
-                          Aperçu (5 premières lignes)
-                        </h3>
-                        <div className="overflow-x-auto rounded-lg border border-gray-200">
-                          <table className="min-w-full divide-y divide-gray-200">
-                            <thead className="bg-gray-50">
-                              <tr>
-                                {googleSheetHeaders.map((header) => (
-                                  <th
-                                    key={header}
-                                    className="px-4 py-2 text-left text-xs font-medium text-gray-700"
-                                  >
-                                    {header}
-                                  </th>
-                                ))}
-                              </tr>
-                            </thead>
-                            <tbody className="divide-y divide-gray-200 bg-white">
-                              {googleSheetPreview.map((row, idx) => (
-                                <tr key={idx}>
-                                  {googleSheetHeaders.map((header) => (
-                                    <td
-                                      key={header}
-                                      className="px-4 py-2 text-xs whitespace-nowrap text-gray-900"
-                                    >
-                                      {row[header] || '-'}
-                                    </td>
-                                  ))}
-                                </tr>
-                              ))}
-                            </tbody>
-                          </table>
                         </div>
-                      </div>
-                    )}
-                  </>
-                )}
-
-              </form>
-
-              {/* Pied de modal fixe */}
-              <div className="shrink-0 border-t border-gray-100 pt-4">
-                <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowGoogleSheetModal(false);
-                      setEditingGoogleSheetConfig(null);
-                      setGoogleSheetStep(1);
-                      setGoogleSheetFormData({
-                        name: '',
-                        active: true,
-                        sheetUrl: '',
-                        sheetName: '',
-                        headerRow: '1',
-                        defaultStatusId: null,
-                        defaultAssignedUserId: null,
-                      });
-                      setGoogleSheetMappings([]);
-                      setGoogleSheetError('');
-                      setGoogleSheetPreview([]);
-                      setGoogleSheetHeaders([]);
-                      setGsPreviewStep('url');
-                      setGsAvailableSheets([]);
-                      setGsRawRows([]);
-                      setGsSelectedHeaderRow(0);
-                    }}
-                    className="w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
-                  >
-                    Annuler
-                  </button>
-
-                  {googleSheetStep === 1 && gsPreviewStep === 'url' ? (
-                    <button
-                      type="button"
-                      disabled={gsLoadingPreview || !googleSheetFormData.sheetUrl}
-                      onClick={async () => {
-                        setGsLoadingPreview(true);
-                        setGoogleSheetError('');
-                        try {
-                          const res = await fetch('/api/settings/google-sheet/preview', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ sheetUrl: googleSheetFormData.sheetUrl }),
-                          });
-                          const data = await res.json();
-                          if (!res.ok) throw new Error(data.error || 'Erreur');
-                          setGsAvailableSheets(data.sheetNames || []);
-                          setGsRawRows(data.rawRows || []);
-                          if (data.sheetNames?.length > 1) {
-                            setGsPreviewStep('sheet');
-                          } else {
-                            const sheet = data.sheetNames?.[0] || '';
-                            setGoogleSheetFormData((prev) => ({ ...prev, sheetName: sheet }));
-                            setGsPreviewStep('header');
-                          }
-                        } catch (err: unknown) {
-                          setGoogleSheetError(err instanceof Error ? err.message : 'Erreur');
-                        } finally {
-                          setGsLoadingPreview(false);
-                        }
-                      }}
-                      className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
-                    >
-                      {gsLoadingPreview ? 'Chargement...' : 'Charger les feuilles'}
-                    </button>
-                  ) : googleSheetStep === 1 ? (
-                    <button
-                      type="button"
-                      disabled={
-                        googleSheetSaving || gsPreviewStep !== 'header' || gsRawRows.length === 0
-                      }
-                      onClick={async () => {
-                        const ok = await handleGoogleSheetAutoMap();
-                        if (ok) {
-                          setGoogleSheetStep(2);
-                        }
-                      }}
-                      className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
-                    >
-                      Étape suivante
-                    </button>
-                  ) : (
-                    <button
-                      type="submit"
-                      form="google-sheet-form"
-                      disabled={googleSheetSaving}
-                      className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
-                    >
-                      {googleSheetSaving ? 'Enregistrement...' : 'Enregistrer'}
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {showMetaLeadModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
-            <div className="flex max-h-[90vh] w-full max-w-2xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
-              <div className="shrink-0 border-b border-gray-100 pb-4">
-                <div className="flex items-center justify-between">
-                  <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">
-                    {editingMetaLeadConfig ? 'Modifier' : 'Ajouter'} une configuration Meta Lead Ads
-                  </h2>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowMetaLeadModal(false);
-                      setEditingMetaLeadConfig(null);
-                      setMetaLeadFormData({
-                        name: '',
-                        active: true,
-                        pageId: '',
-                        accessToken: '',
-                        verifyToken: '',
-                        defaultStatusId: null,
-                        defaultAssignedUserId: null,
-                      });
-                      setMetaLeadError('');
-                      setMetaLeadSuccess('');
-                    }}
-                    className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
-                  >
-                    <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M6 18L18 6M6 6l12 12"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-
-              <form
-                id="meta-lead-form"
-                onSubmit={handleMetaLeadSubmit}
-                className="flex-1 space-y-4 overflow-y-auto pt-4"
-              >
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Nom de la configuration *
-                  </label>
-                  <input
-                    type="text"
-                    required
-                    value={metaLeadFormData.name}
-                    onChange={(e) =>
-                      setMetaLeadFormData((prev) => ({ ...prev, name: e.target.value }))
-                    }
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    placeholder="Ex: Facebook Lead Ads"
-                  />
-                </div>
-
-                <div className="flex items-center">
-                  <input
-                    id="meta-lead-active"
-                    type="checkbox"
-                    checked={metaLeadFormData.active}
-                    onChange={(e) =>
-                      setMetaLeadFormData((prev) => ({ ...prev, active: e.target.checked }))
-                    }
-                    className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-gray-400/30"
-                  />
-                  <label
-                    htmlFor="meta-lead-active"
-                    className="ml-2 text-sm font-medium text-gray-700"
-                  >
-                    Activer l&apos;intégration Meta Lead Ads
-                  </label>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">Page ID *</label>
-                  <input
-                    type="text"
-                    required
-                    value={metaLeadFormData.pageId}
-                    onChange={(e) =>
-                      setMetaLeadFormData((prev) => ({ ...prev, pageId: e.target.value }))
-                    }
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    placeholder="Page ID Facebook"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">Access Token *</label>
-                  <input
-                    type="text"
-                    required
-                    value={metaLeadFormData.accessToken}
-                    onChange={(e) =>
-                      setMetaLeadFormData((prev) => ({ ...prev, accessToken: e.target.value }))
-                    }
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    placeholder="Access Token"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">Verify Token *</label>
-                  <input
-                    type="text"
-                    required
-                    value={metaLeadFormData.verifyToken}
-                    onChange={(e) =>
-                      setMetaLeadFormData((prev) => ({ ...prev, verifyToken: e.target.value }))
-                    }
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    placeholder="Verify Token"
-                  />
-                </div>
-
-                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700">
-                      Utilisateur assigné par défaut (optionnel)
-                    </label>
-                    <select
-                      value={metaLeadFormData.defaultAssignedUserId || ''}
-                      onChange={(e) =>
-                        setMetaLeadFormData((prev) => ({
-                          ...prev,
-                          defaultAssignedUserId: e.target.value || null,
-                        }))
-                      }
-                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    >
-                      <option value="">Aucun utilisateur par défaut</option>
-                      {metaLeadUsers.map((user) => (
-                        <option key={user.id} value={user.id}>
-                          {user.name} ({user.email})
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700">
-                      Statut par défaut
-                    </label>
-                    <select
-                      value={metaLeadFormData.defaultStatusId || ''}
-                      onChange={(e) =>
-                        setMetaLeadFormData((prev) => ({
-                          ...prev,
-                          defaultStatusId: e.target.value || null,
-                        }))
-                      }
-                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    >
-                      <option value="">Aucun statut par défaut</option>
-                      {statuses.map((status) => (
-                        <option key={status.id} value={status.id}>
-                          {status.name}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-
-              </form>
-
-              <div className="shrink-0 border-t border-gray-100 pt-4">
-                <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowMetaLeadModal(false);
-                      setEditingMetaLeadConfig(null);
-                      setMetaLeadFormData({
-                        name: '',
-                        active: true,
-                        pageId: '',
-                        accessToken: '',
-                        verifyToken: '',
-                        defaultStatusId: null,
-                        defaultAssignedUserId: null,
-                      });
-                      setMetaLeadError('');
-                      setMetaLeadSuccess('');
-                    }}
-                    className="w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
-                  >
-                    Annuler
-                  </button>
-                  <button
-                    type="submit"
-                    form="meta-lead-form"
-                    disabled={metaLeadSaving}
-                    className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
-                  >
-                    {metaLeadSaving ? 'Enregistrement...' : 'Enregistrer'}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {showGoogleAdsModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
-            <div className="flex max-h-[90vh] w-full max-w-2xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
-              <div className="shrink-0 border-b border-gray-100 pb-4">
-                <div className="flex items-center justify-between">
-                  <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">
-                    {editingGoogleAdsConfig ? 'Modifier' : 'Ajouter'} une configuration Google Ads
-                  </h2>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowGoogleAdsModal(false);
-                      setEditingGoogleAdsConfig(null);
-                      setGoogleAdsFormData({
-                        name: '',
-                        active: true,
-                        webhookKey: '',
-                        defaultStatusId: null,
-                        defaultAssignedUserId: null,
-                      });
-                      setGoogleAdsError('');
-                      setGoogleAdsSuccess('');
-                    }}
-                    className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
-                  >
-                    <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M6 18L18 6M6 6l12 12"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-
-              <form
-                id="google-ads-form"
-                onSubmit={handleGoogleAdsSubmit}
-                className="flex-1 space-y-4 overflow-y-auto pt-4"
-              >
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Nom de la configuration *
-                  </label>
-                  <input
-                    type="text"
-                    required
-                    value={googleAdsFormData.name}
-                    onChange={(e) =>
-                      setGoogleAdsFormData((prev) => ({ ...prev, name: e.target.value }))
-                    }
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    placeholder="Ex: Google Ads Lead Forms"
-                  />
-                </div>
-
-                <div className="flex items-center">
-                  <input
-                    id="google-ads-active"
-                    type="checkbox"
-                    checked={googleAdsFormData.active}
-                    onChange={(e) =>
-                      setGoogleAdsFormData((prev) => ({ ...prev, active: e.target.checked }))
-                    }
-                    className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-gray-400/30"
-                  />
-                  <label
-                    htmlFor="google-ads-active"
-                    className="ml-2 text-sm font-medium text-gray-700"
-                  >
-                    Activer l&apos;intégration Google Ads
-                  </label>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">Webhook Key *</label>
-                  <input
-                    type="text"
-                    required
-                    value={googleAdsFormData.webhookKey}
-                    onChange={(e) =>
-                      setGoogleAdsFormData((prev) => ({ ...prev, webhookKey: e.target.value }))
-                    }
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    placeholder="Webhook Key"
-                  />
-                </div>
-
-                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700">
-                      Utilisateur assigné par défaut (optionnel)
-                    </label>
-                    <select
-                      value={googleAdsFormData.defaultAssignedUserId || ''}
-                      onChange={(e) =>
-                        setGoogleAdsFormData((prev) => ({
-                          ...prev,
-                          defaultAssignedUserId: e.target.value || null,
-                        }))
-                      }
-                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    >
-                      <option value="">Aucun utilisateur par défaut</option>
-                      {metaLeadUsers.map((user) => (
-                        <option key={user.id} value={user.id}>
-                          {user.name} ({user.email})
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700">
-                      Statut par défaut
-                    </label>
-                    <select
-                      value={googleAdsFormData.defaultStatusId || ''}
-                      onChange={(e) =>
-                        setGoogleAdsFormData((prev) => ({
-                          ...prev,
-                          defaultStatusId: e.target.value || null,
-                        }))
-                      }
-                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    >
-                      <option value="">Aucun statut par défaut</option>
-                      {statuses.map((status) => (
-                        <option key={status.id} value={status.id}>
-                          {status.name}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-
-              </form>
-
-              <div className="shrink-0 border-t border-gray-100 pt-4">
-                <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowGoogleAdsModal(false);
-                      setEditingGoogleAdsConfig(null);
-                      setGoogleAdsFormData({
-                        name: '',
-                        active: true,
-                        webhookKey: '',
-                        defaultStatusId: null,
-                        defaultAssignedUserId: null,
-                      });
-                      setGoogleAdsError('');
-                      setGoogleAdsSuccess('');
-                    }}
-                    className="w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
-                  >
-                    Annuler
-                  </button>
-                  <button
-                    type="submit"
-                    form="google-ads-form"
-                    disabled={googleAdsSaving}
-                    className="w-full cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
-                  >
-                    {googleAdsSaving ? 'Enregistrement...' : 'Enregistrer'}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
+      <IntegrationLogPanel
+        open={showLogPanel}
+        onClose={() => {
+          setShowLogPanel(false);
+          setLogPanelConfigId(undefined);
+          setLogPanelConfigName(undefined);
+        }}
+        integrationType={logPanelType}
+        configId={logPanelConfigId}
+        configName={logPanelConfigName}
+      />
       <ConfirmDialog />
     </ProtectedPage>
   );