create-crm-tmp 1.1.2 → 2.0.0

package/template/src/components/meet-cancellation-email-template.tsx

@@ -1,3 +1,5 @@
+import DOMPurify from 'isomorphic-dompurify';
+
 interface MeetCancellationEmailTemplateProps {
   contactName: string;
   title: string;
@@ -50,7 +52,13 @@ export function MeetCancellationEmailTemplate({
   };
 
   return (
-    <div style={{ fontFamily: 'Arial, sans-serif', lineHeight: '1.6', color: '#333' }}>
+    <div
+      style={{
+        fontFamily: '"Segoe UI", "Helvetica Neue", sans-serif',
+        lineHeight: '1.6',
+        color: '#333',
+      }}
+    >
       <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
         <h1 style={{ color: '#EF4444', fontSize: '24px', marginBottom: '20px' }}>
           Annulation de rendez-vous
@@ -93,7 +101,7 @@ export function MeetCancellationEmailTemplate({
               <strong>Description :</strong>
               <div
                 style={{ marginTop: '10px' }}
-                dangerouslySetInnerHTML={{ __html: description }}
+                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(description) }}
               />
             </div>
           )}
@@ -111,7 +119,7 @@ export function MeetCancellationEmailTemplate({
               borderTop: '1px solid #ddd',
               fontSize: '14px',
             }}
-            dangerouslySetInnerHTML={{ __html: signature }}
+            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
           />
         )}
       </div>

package/template/src/components/meet-confirmation-email-template.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import DOMPurify from 'isomorphic-dompurify';
 
 interface MeetConfirmationEmailTemplateProps {
   contactName: string;
@@ -52,7 +53,13 @@ export function MeetConfirmationEmailTemplate({
   };
 
   return (
-    <div style={{ fontFamily: 'Arial, sans-serif', lineHeight: '1.6', color: '#333' }}>
+    <div
+      style={{
+        fontFamily: '"Segoe UI", "Helvetica Neue", sans-serif',
+        lineHeight: '1.6',
+        color: '#333',
+      }}
+    >
       <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
         <h1 style={{ color: '#1a1a1a', fontSize: '24px', marginBottom: '20px' }}>
           Confirmation de rendez-vous
@@ -94,7 +101,7 @@ export function MeetConfirmationEmailTemplate({
               <strong>Description :</strong>
               <div
                 style={{ marginTop: '10px' }}
-                dangerouslySetInnerHTML={{ __html: description }}
+                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(description) }}
               />
             </div>
           )}
@@ -147,7 +154,7 @@ export function MeetConfirmationEmailTemplate({
               borderTop: '1px solid #ddd',
               fontSize: '14px',
             }}
-            dangerouslySetInnerHTML={{ __html: signature }}
+            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
           />
         )}
       </div>

package/template/src/components/meet-update-email-template.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import DOMPurify from 'isomorphic-dompurify';
 
 interface MeetUpdateEmailTemplateProps {
   contactName: string;
@@ -62,7 +63,13 @@ export function MeetUpdateEmailTemplate({
   const isGoogleMeet = !!meetLink;
 
   return (
-    <div style={{ fontFamily: 'Arial, sans-serif', lineHeight: '1.6', color: '#333' }}>
+    <div
+      style={{
+        fontFamily: '"Segoe UI", "Helvetica Neue", sans-serif',
+        lineHeight: '1.6',
+        color: '#333',
+      }}
+    >
       <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
         <h1 style={{ color: '#1a1a1a', fontSize: '24px', marginBottom: '20px' }}>
           Modification de rendez-vous
@@ -154,7 +161,7 @@ export function MeetUpdateEmailTemplate({
               <strong>Description :</strong>
               <div
                 style={{ marginTop: '10px' }}
-                dangerouslySetInnerHTML={{ __html: description }}
+                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(description) }}
               />
             </div>
           )}
@@ -200,7 +207,7 @@ export function MeetUpdateEmailTemplate({
               borderTop: '1px solid #ddd',
               fontSize: '14px',
             }}
-            dangerouslySetInnerHTML={{ __html: signature }}
+            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
           />
         )}
       </div>

package/template/src/components/page-header.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 interface PageHeaderProps {
   title: string;
   description?: string;
@@ -6,22 +8,24 @@ interface PageHeaderProps {
 
 export function PageHeader({ title, description, action }: Readonly<PageHeaderProps>) {
   return (
-    <div className="border-b border-gray-200 bg-white px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
-      <div>
-        {action ? (
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-            <div className="min-w-0 flex-1">
-              <h1 className="text-xl font-bold text-gray-900 sm:text-2xl">{title}</h1>
-              {description && <p className="mt-1 text-sm text-gray-600">{description}</p>}
+    <div className="border-b border-border bg-background/95 px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8 lg:py-6">
+      <div className="flex items-start gap-3">
+        <div className="min-w-0 flex-1">
+          {action ? (
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <div className="min-w-0 flex-1">
+                <h1 className="text-xl font-bold text-foreground sm:text-2xl">{title}</h1>
+                {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+              </div>
+              <div className="shrink-0">{action}</div>
             </div>
-            <div className="shrink-0">{action}</div>
-          </div>
-        ) : (
-          <>
-            <h1 className="text-xl font-bold text-gray-900 sm:text-2xl">{title}</h1>
-            {description && <p className="mt-1 text-sm text-gray-600">{description}</p>}
-          </>
-        )}
+          ) : (
+            <>
+              <h1 className="text-xl font-bold text-foreground sm:text-2xl">{title}</h1>
+              {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+            </>
+          )}
+        </div>
       </div>
     </div>
   );

package/template/src/components/protected-page.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useSession } from '@/lib/auth-client';
+import { useUserRole } from '@/hooks/use-user-role';
+import { PageLoader } from '@/components/skeleton';
+
+const FALLBACK_ROUTES: { permission: string | string[]; href: string }[] = [
+  { permission: 'dashboard.view', href: '/dashboard' },
+  { permission: 'contacts.view_own', href: '/contacts' },
+  { permission: 'contacts.view_all', href: '/contacts' },
+  { permission: ['tasks.view_all', 'tasks.view_own'], href: '/agenda' },
+];
+
+function getFirstAccessibleRoute(hasPermission: (p: string) => boolean): string {
+  for (const route of FALLBACK_ROUTES) {
+    const perms = Array.isArray(route.permission) ? route.permission : [route.permission];
+    if (perms.some((p) => hasPermission(p))) {
+      return route.href;
+    }
+  }
+  return '/contacts';
+}
+
+interface ProtectedPageProps {
+  children: React.ReactNode;
+  requiredPermission?: string | string[];
+  requireAll?: boolean;
+  redirectTo?: string;
+  fallback?: React.ReactNode;
+}
+
+export function ProtectedPage({
+  children,
+  requiredPermission,
+  requireAll = false,
+  redirectTo,
+  fallback,
+}: ProtectedPageProps) {
+  const router = useRouter();
+  const { data: session, isPending: isSessionPending } = useSession();
+  const { hasPermission, isLoading } = useUserRole();
+
+  const checkAccess = (perms: string[]) => {
+    if (requireAll) return perms.every((p) => hasPermission(p));
+    return perms.some((p) => hasPermission(p));
+  };
+
+  useEffect(() => {
+    // Sans session (déconnecté), rediriger vers la page de connexion pour éviter la boucle
+    if (!isSessionPending && !session?.user) {
+      const signinUrl = `/signin?callbackUrl=${encodeURIComponent(typeof globalThis.window !== 'undefined' ? globalThis.window.location.pathname : '/')}`;
+      router.push(signinUrl);
+      return;
+    }
+    if (isLoading || !requiredPermission) return;
+
+    const permissions = Array.isArray(requiredPermission)
+      ? requiredPermission
+      : [requiredPermission];
+
+    if (!checkAccess(permissions)) {
+      router.push(redirectTo ?? getFirstAccessibleRoute(hasPermission));
+    }
+  }, [
+    requiredPermission,
+    requireAll,
+    redirectTo,
+    hasPermission,
+    isLoading,
+    isSessionPending,
+    session?.user,
+    router,
+  ]);
+
+  if (isSessionPending || !session?.user || isLoading) {
+    return (
+      fallback || <PageLoader text="Vérification des permissions..." className="min-h-screen" />
+    );
+  }
+
+  if (!requiredPermission) {
+    return <>{children}</>;
+  }
+
+  const permissions = Array.isArray(requiredPermission) ? requiredPermission : [requiredPermission];
+
+  if (!checkAccess(permissions)) {
+    return null;
+  }
+
+  return <>{children}</>;
+}

package/template/src/components/reset-password-email-template.tsx

@@ -1,3 +1,5 @@
+import DOMPurify from 'isomorphic-dompurify';
+
 interface ResetPasswordEmailProps {
   code: string;
   signature?: string | null;
@@ -7,7 +9,7 @@ export function ResetPasswordEmailTemplate({ code, signature }: ResetPasswordEma
   return (
     <div
       style={{
-        fontFamily: 'Arial, sans-serif',
+        fontFamily: '"Segoe UI", "Helvetica Neue", sans-serif',
         padding: '20px',
         maxWidth: '600px',
         margin: '0 auto',
@@ -71,7 +73,7 @@ export function ResetPasswordEmailTemplate({ code, signature }: ResetPasswordEma
             fontSize: '14px',
             lineHeight: '1.6',
           }}
-          dangerouslySetInnerHTML={{ __html: signature }}
+          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
         />
       )}
     </div>

package/template/src/components/sidebar.tsx

@@ -9,29 +9,22 @@ import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
 import { useSidebarContext } from '@/contexts/sidebar-context';
 import { useViewAs } from '@/contexts/view-as-context';
 import { ViewAsModal } from '@/components/view-as-modal';
-import {
-  LayoutDashboard,
-  Users,
-  UserCog,
-  Settings,
-  Calendar as CalendarIcon,
-  FileText,
-  Eye,
-  Zap,
-  Columns3,
-  X,
-} from 'lucide-react';
+import { Eye, X, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { NAV_PAGES } from '@/config/nav-pages';
 
 export function Sidebar() {
   const pathname = usePathname();
   const { data: session } = useSession();
   const router = useRouter();
   const { isOpen: isMobileMenuOpen, setIsOpen: setIsMobileMenuOpen } = useMobileMenuContext();
-  const { isCollapsed, isPinned, setIsCollapsed } = useSidebarContext();
+  const { isPinned, togglePin } = useSidebarContext();
   const { viewAsUser, isViewingAsOther } = useViewAs();
   const [showViewAsModal, setShowViewAsModal] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
+  /** Ouvert au survol uniquement (desktop, sans modifier le pin) */
+  const [expandedByHover, setExpandedByHover] = useState(false);
+  const isSidebarExpanded = isPinned || expandedByHover;
 
   // Éviter l'erreur d'hydratation
   useEffect(() => {
@@ -39,36 +32,15 @@ export function Sidebar() {
   }, []);
 
   // Obtenir le rôle de l'utilisateur via le hook personnalisé
-  const { isAdmin, isRealAdmin } = useUserRole();
+  const { isRealAdmin, hasPermission } = useUserRole();
 
-  // Navigation principale (Dashboard section)
-  const dashboardNav = useMemo(() => {
-    const baseNav = [
-      { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
-      { name: 'Contacts', href: '/contacts', icon: Users },
-      { name: 'Agenda', href: '/agenda', icon: CalendarIcon },
-      { name: 'Closing', href: '/closing', icon: Columns3 },
-      { name: 'Automatisations', href: '/automatisation', icon: Zap },
-      { name: 'Templates', href: '/templates', icon: FileText },
-    ];
-
-    // Ajouter la gestion des droits d'accès seulement pour les admins
-    if (isAdmin) {
-      baseNav.push({
-        name: "Droits d'accès",
-        href: '/users',
-        icon: UserCog,
-      });
-    }
-
-    baseNav.push({
-      name: 'Paramètres',
-      href: '/settings',
-      icon: Settings,
-    });
-
-    return baseNav;
-  }, [isAdmin]);
+  const dashboardNav = useMemo(
+    () =>
+      NAV_PAGES.filter(
+        (page) => !page.parentLabel && page.permissions.some((p) => hasPermission(p)),
+      ),
+    [hasPermission],
+  );
 
   const handleSignOut = async () => {
     await signOut();
@@ -84,7 +56,7 @@ export function Sidebar() {
       {/* Overlay for mobile */}
       {isMobileMenuOpen && (
         <div
-          className="fixed inset-0 z-40 bg-gray-500/20 backdrop-blur-sm lg:hidden"
+          className="fixed inset-0 z-40 bg-foreground/10 backdrop-blur-sm lg:hidden"
           onClick={() => setIsMobileMenuOpen(false)}
         />
       )}
@@ -92,49 +64,39 @@ export function Sidebar() {
       {/* Sidebar */}
       <div
         className={cn(
-          'fixed top-0 left-0 z-40 flex h-screen flex-col border-r border-gray-200 bg-white transition-all duration-300 ease-in-out lg:relative lg:translate-x-0',
+          'group fixed top-0 left-0 z-40 flex h-screen flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-(--shadow-card) transition-all duration-300 ease-(--ease-standard) lg:relative lg:translate-x-0',
           isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
-          isCollapsed && !isPinned ? 'w-64 lg:w-16' : 'w-64 lg:w-64',
+          !isSidebarExpanded ? 'w-64 lg:w-16' : 'w-64 lg:w-64',
         )}
         onMouseEnter={() => {
-          if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
-            if (!isPinned && isCollapsed) {
-              setIsCollapsed(false);
-            }
+          if (typeof globalThis.window !== 'undefined' && globalThis.window.innerWidth >= 1024 && !isPinned) {
+            setExpandedByHover(true);
           }
         }}
         onMouseLeave={() => {
-          if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
-            if (!isPinned && !isCollapsed) {
-              setIsCollapsed(true);
-            }
+          if (typeof globalThis.window !== 'undefined' && globalThis.window.innerWidth >= 1024) {
+            setExpandedByHover(false);
           }
         }}
       >
-        {/* Bouton fermer - Mobile seulement */}
-        <div className="flex h-16 items-center justify-end border-b border-gray-200 px-4 lg:hidden">
-          <button
-            onClick={() => setIsMobileMenuOpen(false)}
-            className="cursor-pointer rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100"
-            aria-label="Close menu"
-          >
-            <X className="h-5 w-5" />
-          </button>
-        </div>
-
         {/* Navigation principale */}
         <nav className="flex-1 space-y-6 overflow-y-auto py-4">
           {/* Section Dashboard */}
-          <div className={cn('px-3', isCollapsed && !isPinned && 'lg:px-2')}>
-            {(!isCollapsed || isPinned) && (
-              <h2 className="mb-2 px-3 text-xs font-semibold tracking-wider text-nowrap text-gray-500 uppercase">
-                CRM Template
-              </h2>
-            )}
+          <div className={cn('px-3', !isSidebarExpanded && 'lg:px-2')}>
+            <div className="flex items-center justify-end">
+              <button
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="cursor-pointer rounded-lg p-2 text-sidebar-foreground/70 transition-colors duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground lg:hidden"
+                aria-label="Close menu"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
             <div className="space-y-1">
               {dashboardNav.map((item) => {
                 const isActive = pathname === item.href;
                 const Icon = item.icon;
+                const displayName = item.name;
                 return (
                   <Link
                     key={item.name}
@@ -142,16 +104,16 @@ export function Sidebar() {
                     onClick={handleLinkClick}
                     className={cn(
                       'flex items-center gap-3 rounded-lg py-2 text-sm font-medium transition-colors',
-                      isCollapsed && !isPinned ? 'px-3 lg:justify-center lg:px-2' : 'px-3',
+                      !isSidebarExpanded ? 'px-3 lg:justify-center lg:px-2' : 'px-3',
                       isActive
-                        ? 'bg-indigo-50 text-indigo-600'
-                        : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900',
+                        ? 'bg-sidebar-primary text-sidebar-primary-foreground shadow-sm'
+                        : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
                     )}
-                    title={isCollapsed && !isPinned ? item.name : undefined}
+                    title={!isSidebarExpanded ? displayName : undefined}
                   >
                     <Icon className="h-5 w-5 shrink-0" />
-                    {(!isCollapsed || isPinned) && (
-                      <span className="whitespace-nowrap">{item.name}</span>
+                    {isSidebarExpanded && (
+                      <span className="whitespace-nowrap">{displayName}</span>
                     )}
                   </Link>
                 );
@@ -164,18 +126,18 @@ export function Sidebar() {
         {isRealAdmin && (
           <div
             className={cn(
-              'border-t border-gray-200 transition-all duration-300',
-              isCollapsed && !isPinned ? 'p-3 lg:p-2' : 'p-3',
+              'border-t border-sidebar-border transition-all duration-300',
+              !isSidebarExpanded ? 'p-3 lg:p-2' : 'p-3',
             )}
           >
-            {!isCollapsed || isPinned ? (
+            {isSidebarExpanded ? (
               <button
                 onClick={() => setShowViewAsModal(true)}
                 className={cn(
                   'w-full cursor-pointer rounded-lg border-2 p-3 text-left transition-all',
                   isViewingAsOther
-                    ? 'border-indigo-600 bg-indigo-600 text-white hover:border-indigo-700 hover:bg-indigo-700'
-                    : 'border-gray-300 bg-white text-gray-900 hover:border-indigo-300 hover:bg-indigo-50',
+                    ? 'border-sidebar-primary bg-sidebar-primary text-sidebar-primary-foreground hover:opacity-95'
+                    : 'border-sidebar-border bg-sidebar text-sidebar-foreground hover:border-sidebar-ring hover:bg-sidebar-accent',
                 )}
                 aria-label="Changer de vue"
               >
@@ -183,7 +145,9 @@ export function Sidebar() {
                   <div
                     className={cn(
                       'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
-                      isViewingAsOther ? 'bg-white/20 text-white' : 'bg-indigo-100 text-indigo-600',
+                      isViewingAsOther
+                        ? 'bg-sidebar-primary-foreground/20 text-sidebar-primary-foreground'
+                        : 'bg-sidebar-accent text-sidebar-accent-foreground',
                     )}
                   >
                     {!isMounted
@@ -196,7 +160,9 @@ export function Sidebar() {
                     <p
                       className={cn(
                         'text-xs font-medium',
-                        isViewingAsOther ? 'text-white/80' : 'text-gray-500',
+                        isViewingAsOther
+                          ? 'text-sidebar-primary-foreground/80'
+                          : 'text-sidebar-foreground/70',
                       )}
                     >
                       {isViewingAsOther ? 'Vue:' : 'Ma vue'}
@@ -218,8 +184,8 @@ export function Sidebar() {
                 className={cn(
                   'w-full cursor-pointer rounded-lg p-2 transition-colors',
                   isViewingAsOther
-                    ? 'bg-indigo-600 text-white hover:bg-indigo-700'
-                    : 'text-gray-500 hover:bg-gray-100',
+                    ? 'bg-sidebar-primary text-sidebar-primary-foreground hover:opacity-95'
+                    : 'text-sidebar-foreground/70 hover:bg-sidebar-accent',
                 )}
                 title="Changer de vue"
                 aria-label="Changer de vue"
@@ -232,43 +198,75 @@ export function Sidebar() {
           </div>
         )}
 
+        {/* Bouton Réduire / Développer la navigation (desktop uniquement) */}
+        <div
+          className={cn(
+            'hidden border-t border-sidebar-border lg:block',
+            !isSidebarExpanded ? 'p-3 lg:p-2' : 'p-3',
+          )}
+        >
+          <button
+            onClick={togglePin}
+            className={cn(
+              'flex w-full cursor-pointer items-center gap-3 rounded-lg py-2 text-sm font-medium text-sidebar-foreground/70 transition-colors duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+              !isSidebarExpanded ? 'justify-center px-2' : 'px-3',
+            )}
+            title={isPinned ? 'Réduire la navigation' : 'Développer la navigation'}
+            aria-label={isPinned ? 'Réduire la navigation' : 'Développer la navigation'}
+          >
+            {isPinned ? (
+              <>
+                <PanelLeftClose className="h-5 w-5 shrink-0" />
+                <span className="whitespace-nowrap">Réduire la navigation</span>
+              </>
+            ) : (
+              <div className="flex gap-2">
+                <PanelLeftOpen className="h-5 w-5 shrink-0" />
+                <span className="hidden whitespace-nowrap group-hover:block">
+                  Développer la navigation
+                </span>
+              </div>
+            )}
+          </button>
+        </div>
+
         {/* User Profile */}
         <div
           className={cn(
-            'border-t border-gray-200 transition-all duration-300',
-            isCollapsed && !isPinned ? 'p-4 lg:p-2' : 'p-4',
+            'border-t border-sidebar-border transition-all duration-300',
+            !isSidebarExpanded ? 'p-4 lg:p-2' : 'p-4',
           )}
         >
-          {!isCollapsed || isPinned ? (
+          {isSidebarExpanded ? (
             <>
               <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600">
+                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sidebar-accent text-sidebar-accent-foreground">
                   {!isMounted ? 'U' : session?.user?.name?.[0]?.toUpperCase() || 'U'}
                 </div>
                 <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-medium text-gray-900">
+                  <p className="truncate text-sm font-medium text-sidebar-foreground">
                     {!isMounted ? 'Utilisateur' : session?.user?.name || 'Utilisateur'}
                   </p>
-                  <p className="truncate text-xs text-gray-500">
+                  <p className="truncate text-xs text-sidebar-foreground/70">
                     {!isMounted ? '' : session?.user?.email}
                   </p>
                 </div>
               </div>
               <button
                 onClick={handleSignOut}
-                className="mt-3 w-full cursor-pointer rounded-lg bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200"
+                className="mt-3 w-full cursor-pointer rounded-lg bg-sidebar-accent px-3 py-2 text-sm font-medium text-sidebar-accent-foreground transition-colors duration-200 hover:bg-sidebar-primary hover:text-sidebar-primary-foreground"
               >
                 Déconnexion
               </button>
             </>
           ) : (
             <div className="flex flex-col items-center gap-2">
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sidebar-accent text-sidebar-accent-foreground">
                 {!isMounted ? 'U' : session?.user?.name?.[0]?.toUpperCase() || 'U'}
               </div>
               <button
                 onClick={handleSignOut}
-                className="cursor-pointer rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100"
+                className="cursor-pointer rounded-lg p-2 text-sidebar-foreground/70 transition-colors duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                 title="Déconnexion"
                 aria-label="Déconnexion"
               >