Ajout du mode clair/sombre (dark mode)

- Installation de next-themes
- Création du composant ThemeToggle avec icônes soleil/lune
- Intégration du ThemeProvider dans le layout
- Ajout du toggle dans la navigation mobile et le header admin
- Adaptation des couleurs pour le dark mode (tropical chic)
- Mise à jour des composants UI (Card, Button) pour le dark mode
- Adaptation des composants principaux (Layout, WifiCard, etc.)

components/layout/Layout.tsx

@@ -2,7 +2,7 @@ import TabNavigation from "./TabNavigation";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-screen bg-background pb-16">
+    <div className="min-h-screen bg-background dark:bg-background-dark pb-16">
       {children}
       <TabNavigation />
     </div>

components/layout/TabNavigation.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Home, MapPin, Info, Waves } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { ThemeToggle } from "@/components/ThemeToggle";
 
 const tabs = [
   {
@@ -32,7 +33,7 @@ export default function TabNavigation() {
   const pathname = usePathname();
 
   return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-lg">
+    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 shadow-lg">
       <div className="flex items-center justify-around h-16 px-2">
         {tabs.map((tab) => {
           const Icon = tab.icon;
@@ -44,8 +45,8 @@ export default function TabNavigation() {
               className={cn(
                 "flex flex-col items-center justify-center gap-1 flex-1 h-full rounded-xl transition-colors",
                 isActive
-                  ? "text-primary bg-secondary"
-                  : "text-gray-500 hover:text-primary hover:bg-gray-50"
+                  ? "text-primary bg-secondary dark:bg-primary/20"
+                  : "text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary hover:bg-gray-50 dark:hover:bg-gray-800"
               )}
             >
               <Icon className="h-6 w-6" />
@@ -53,6 +54,9 @@ export default function TabNavigation() {
             </Link>
           );
         })}
+        <div className="flex items-center justify-center h-full px-2">
+          <ThemeToggle />
+        </div>
       </div>
     </nav>
   );