Improve theme toggle indicator

Add visual indicator (sun/moon) of current mode in ThemeToggle component and ensure proper hydration handling; display appropriate icon based on active theme.

X-Lovable-Edit-ID: edt-9edc75b2-2f2f-4691-aeaf-73cd1dba9a5c

src/components/ThemeToggle.tsx

@@ -14,8 +14,9 @@ const ThemeToggle = () => {
 
   if (!mounted) {
     return (
-      <Button variant="ghost" size="sm" disabled>
+      <Button variant="ghost" size="sm" disabled className="gap-2">
         <Sun className="h-4 w-4" />
+        <span className="text-xs">Clair</span>
       </Button>
     );
   }
@@ -24,18 +25,35 @@ const ThemeToggle = () => {
     setTheme(theme === 'dark' ? 'light' : 'dark');
   };
 
+  const isDark = theme === 'dark';
+
   return (
     <Button 
       variant="ghost" 
       size="sm" 
       onClick={toggleTheme}
-      aria-label={theme === 'dark' ? 'Activer le mode clair' : 'Activer le mode sombre'}
+      aria-label={isDark ? 'Activer le mode clair' : 'Activer le mode sombre'}
+      className="gap-2 transition-all duration-300"
     >
-      {theme === 'dark' ? (
-        <Sun className="h-4 w-4" />
-      ) : (
-        <Moon className="h-4 w-4" />
-      )}
+      <div className="relative w-4 h-4">
+        <Sun 
+          className={`h-4 w-4 absolute inset-0 transition-all duration-300 ${
+            isDark 
+              ? 'rotate-0 scale-100 opacity-100 text-yellow-400' 
+              : 'rotate-90 scale-0 opacity-0'
+          }`} 
+        />
+        <Moon 
+          className={`h-4 w-4 absolute inset-0 transition-all duration-300 ${
+            isDark 
+              ? '-rotate-90 scale-0 opacity-0' 
+              : 'rotate-0 scale-100 opacity-100 text-slate-600 dark:text-slate-400'
+          }`} 
+        />
+      </div>
+      <span className="text-xs font-medium hidden sm:inline">
+        {isDark ? 'Sombre' : 'Clair'}
+      </span>
     </Button>
   );
 };