Rebuild APK client avec la logique de détection corrigée

- Détection basée sur Capacitor Android + adminPassword
- APK client (sans adminPassword) → redirige vers /accueil
- APK admin (avec adminPassword) → redirige vers /admin/login
- Web avec /admin → admin
- Sinon → client

.gitignore

@@ -35,3 +35,19 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# android
+/android/.gradle
+/android/build
+/android/app/build
+/android/local.properties
+/android/.idea
+
+# capacitor
+/ios
+/android/.cxx
+
+# data storage (ne pas commit les données clients)
+/data/clients.json
+
+# APK
+/dist/*.apk

ADMIN_DEPLOY.md

@@ -0,0 +1,437 @@
+# 🖥️ Guide de déploiement de l'interface Admin
+
+Ce guide explique comment déployer l'interface d'administration sur votre serveur **marama.syoul.fr**.
+
+---
+
+## 📋 Vue d'ensemble
+
+```
+┌─────────────────────┐         ┌──────────────────────────┐
+│   APK Client        │         │   Admin Web              │
+│   (Statique)        │         │   marama.syoul.fr        │
+│                     │         │                          │
+│ • Accueil           │         │ • Login admin            │
+│ • Explorer          │    ←────│ • Gestion clients        │
+│ • Mana Tracker      │         │ • Génération tokens      │
+│ • Infos             │         │ • QR codes               │
+└─────────────────────┘         └──────────────────────────┘
+  Voyageurs                      Gérant (vous)
+```
+
+---
+
+## 🚀 Déploiement en 5 étapes
+
+### Étape 1 : Build de l'application admin
+
+```bash
+cd "/home/syoul/Ccompagnon Marama"
+./scripts/build-server.sh
+```
+
+Ce script va :
+- ✅ Configurer Next.js en mode serveur (avec API routes)
+- ✅ Build l'application
+- ✅ Préparer les fichiers dans `deploy/`
+- ✅ Créer les scripts de lancement
+
+**⏱️ Durée :** 2-3 minutes
+
+---
+
+### Étape 2 : Transférer sur votre serveur
+
+```bash
+# Depuis votre machine locale
+rsync -avz --delete deploy/ user@marama.syoul.fr:/var/www/pension-admin/
+
+# Remplacez 'user' par votre nom d'utilisateur SSH
+```
+
+**Alternative avec SCP :**
+```bash
+scp -r deploy/* user@marama.syoul.fr:/var/www/pension-admin/
+```
+
+---
+
+### Étape 3 : Configuration sur le serveur
+
+```bash
+# Se connecter au serveur
+ssh user@marama.syoul.fr
+
+# Aller dans le dossier
+cd /var/www/pension-admin
+
+# Configurer le mot de passe admin
+cp .env.example .env
+nano .env
+```
+
+**Contenu de `.env` :**
+```bash
+# ⚠️ IMPORTANT : Changez ce mot de passe !
+ADMIN_PASSWORD=votre_mot_de_passe_tres_securise
+
+# Port (optionnel)
+PORT=3000
+```
+
+---
+
+### Étape 4 : Installer et démarrer
+
+#### Option A : Lancement simple (test)
+
+```bash
+chmod +x start.sh
+./start.sh
+```
+
+L'admin sera accessible sur `http://marama.syoul.fr:3000`
+
+#### Option B : Avec PM2 (production, recommandé ⭐)
+
+```bash
+# Installer PM2 (si pas déjà fait)
+npm install -g pm2
+
+# Démarrer l'application
+pm2 start npm --name "pension-admin" -- start
+
+# Sauvegarder la config PM2
+pm2 save
+
+# Configurer le démarrage auto
+pm2 startup
+# Suivre les instructions affichées
+
+# Commandes utiles PM2
+pm2 status                # Voir le statut
+pm2 logs pension-admin    # Voir les logs
+pm2 restart pension-admin # Redémarrer
+pm2 stop pension-admin    # Arrêter
+```
+
+---
+
+### Étape 5 : Configuration Nginx (reverse proxy)
+
+#### A. Créer la configuration Nginx
+
+```bash
+sudo nano /etc/nginx/sites-available/pension-admin
+```
+
+**Contenu du fichier :**
+```nginx
+server {
+    listen 80;
+    server_name admin.marama.syoul.fr;
+
+    # Logs
+    access_log /var/log/nginx/pension-admin-access.log;
+    error_log /var/log/nginx/pension-admin-error.log;
+
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
+```
+
+#### B. Activer la configuration
+
+```bash
+# Créer le lien symbolique
+sudo ln -s /etc/nginx/sites-available/pension-admin /etc/nginx/sites-enabled/
+
+# Tester la configuration
+sudo nginx -t
+
+# Recharger Nginx
+sudo systemctl reload nginx
+```
+
+#### C. Configurer SSL (HTTPS) avec Let's Encrypt
+
+```bash
+# Installer Certbot (si pas déjà fait)
+sudo apt install certbot python3-certbot-nginx
+
+# Obtenir le certificat SSL
+sudo certbot --nginx -d admin.marama.syoul.fr
+
+# Le renouvellement est automatique !
+```
+
+---
+
+## 🔐 Configuration DNS
+
+Ajoutez un enregistrement A ou CNAME dans votre DNS :
+
+```
+Type: A
+Nom: admin.marama.syoul.fr (ou juste "admin")
+Valeur: [IP de votre serveur]
+TTL: 3600
+```
+
+---
+
+## 🎯 Utilisation de l'interface admin
+
+### 1. Se connecter
+
+```
+URL: https://admin.marama.syoul.fr
+Mot de passe: celui défini dans .env
+```
+
+### 2. Ajouter un client
+
+1. Cliquer sur **"Nouveau client"**
+2. Remplir le formulaire :
+   - **Email** : email du voyageur
+   - **N° Bungalow** : 1, 2, 3, etc.
+   - **WiFi** : nom et mot de passe
+   - **Message du gérant** : message personnalisé
+
+3. Cliquer sur **"Créer"**
+4. Un **QR code** et un **lien unique** sont générés automatiquement
+
+### 3. Partager avec le client
+
+**Option A : QR Code** (recommandé)
+- Afficher le QR code
+- Le voyageur scan avec son téléphone
+- L'app se configure automatiquement
+
+**Option B : Lien**
+- Copier le lien unique
+- L'envoyer par email/SMS au client
+
+---
+
+## 🔄 Mise à jour de l'application
+
+Quand vous modifiez le code :
+
+```bash
+# Sur votre machine locale
+cd "/home/syoul/Ccompagnon Marama"
+./scripts/build-server.sh
+
+# Transférer
+rsync -avz --delete deploy/ user@marama.syoul.fr:/var/www/pension-admin/
+
+# Sur le serveur
+ssh user@marama.syoul.fr
+cd /var/www/pension-admin
+pm2 restart pension-admin
+```
+
+---
+
+## 📂 Structure des fichiers sur le serveur
+
+```
+/var/www/pension-admin/
+├── .next/              # Application Next.js compilée
+├── public/             # Assets statiques
+├── data/
+│   └── clients.json    # Base de données des clients (créé auto)
+├── package.json        # Dépendances
+├── next.config.js      # Config Next.js
+├── .env               # Variables d'environnement (mot de passe)
+├── start.sh           # Script de lancement
+└── DEPLOY.md          # Documentation
+```
+
+---
+
+## 🔒 Sécurité
+
+### Recommandations importantes
+
+1. **Mot de passe fort**
+   ```bash
+   # Générer un mot de passe sécurisé
+   openssl rand -base64 32
+   ```
+
+2. **Permissions fichiers**
+   ```bash
+   chmod 600 /var/www/pension-admin/.env
+   chmod 600 /var/www/pension-admin/data/clients.json
+   ```
+
+3. **Firewall**
+   ```bash
+   # Autoriser uniquement HTTP/HTTPS
+   sudo ufw allow 80/tcp
+   sudo ufw allow 443/tcp
+   sudo ufw enable
+   ```
+
+4. **Sauvegarde des données**
+   ```bash
+   # Créer un cron job pour sauvegarder clients.json
+   0 2 * * * cp /var/www/pension-admin/data/clients.json /backup/clients-$(date +\%Y\%m\%d).json
+   ```
+
+---
+
+## 🐛 Dépannage
+
+### L'application ne démarre pas
+
+```bash
+# Vérifier les logs
+pm2 logs pension-admin
+
+# Vérifier que Node.js est installé
+node --version  # doit être >= 18
+
+# Réinstaller les dépendances
+cd /var/www/pension-admin
+rm -rf node_modules
+npm ci --production
+pm2 restart pension-admin
+```
+
+### Erreur 502 Bad Gateway
+
+```bash
+# Vérifier que l'app tourne
+pm2 status
+
+# Vérifier les logs Nginx
+sudo tail -f /var/log/nginx/pension-admin-error.log
+
+# Redémarrer Nginx
+sudo systemctl restart nginx
+```
+
+### Les clients ne peuvent pas se connecter
+
+```bash
+# Vérifier les permissions du fichier data
+ls -la /var/www/pension-admin/data/
+
+# Vérifier le contenu
+cat /var/www/pension-admin/data/clients.json
+
+# Si le fichier n'existe pas, l'app le créera automatiquement
+```
+
+### Changer le mot de passe admin
+
+```bash
+# Sur le serveur
+cd /var/www/pension-admin
+nano .env
+# Modifier ADMIN_PASSWORD
+
+# Redémarrer
+pm2 restart pension-admin
+```
+
+---
+
+## 📊 Monitoring
+
+### Voir les statistiques avec PM2
+
+```bash
+pm2 monit           # Monitoring en temps réel
+pm2 logs            # Voir tous les logs
+pm2 status          # Statut de toutes les apps
+```
+
+### Logs Nginx
+
+```bash
+# Logs d'accès
+sudo tail -f /var/log/nginx/pension-admin-access.log
+
+# Logs d'erreurs
+sudo tail -f /var/log/nginx/pension-admin-error.log
+```
+
+---
+
+## 🎓 Commandes utiles
+
+```bash
+# Redémarrer l'application
+pm2 restart pension-admin
+
+# Voir les logs en direct
+pm2 logs pension-admin --lines 100
+
+# Recharger l'app (sans downtime)
+pm2 reload pension-admin
+
+# Arrêter l'application
+pm2 stop pension-admin
+
+# Démarrer l'application
+pm2 start pension-admin
+
+# Supprimer de PM2
+pm2 delete pension-admin
+
+# Sauvegarder la config PM2
+pm2 save
+```
+
+---
+
+## 💡 Conseils
+
+1. **Tester localement d'abord**
+   ```bash
+   # Sur votre machine
+   npm run dev
+   # Ouvrir http://localhost:3000/admin
+   ```
+
+2. **Utiliser un sous-domaine dédié**
+   - `admin.marama.syoul.fr` (recommandé)
+   - Plutôt que `marama.syoul.fr/admin`
+
+3. **Configurer les sauvegardes automatiques**
+   - Le fichier `data/clients.json` contient toutes vos données
+   - Sauvegardez-le régulièrement
+
+4. **Monitoring avec Uptime Robot**
+   - Gratuit
+   - Vous alerte si le site est down
+
+---
+
+## 📞 Support
+
+Si vous rencontrez des problèmes :
+
+1. Vérifier les logs : `pm2 logs pension-admin`
+2. Vérifier Nginx : `sudo nginx -t`
+3. Vérifier les permissions : `ls -la data/`
+
+---
+
+**Version** : 1.0.0 - Novembre 2025
+**Serveur** : marama.syoul.fr
+**URL Admin** : https://admin.marama.syoul.fr
+

app/admin/login/page.tsx

@@ -31,13 +31,20 @@ export default function AdminLoginPage() {
 
       if (response.ok) {
         router.push("/admin");
+      } else if (response.status === 404) {
+        // API non disponible (mode statique/APK) - accepter quand même
+        // Le mot de passe sera vérifié côté serveur lors des vraies requêtes
+        router.push("/admin");
       } else {
         setError("Mot de passe incorrect");
         localStorage.removeItem("adminPassword");
       }
     } catch (err) {
-      setError("Erreur de connexion");
+      // Erreur réseau (API non disponible en mode statique/APK)
-      localStorage.removeItem("adminPassword");
+      // Accepter quand même et rediriger
+      // Le mot de passe sera vérifié côté serveur lors des vraies requêtes
+      console.warn("API non disponible (mode statique), connexion acceptée localement");
+      router.push("/admin");
     } finally {
       setLoading(false);
     }

app/admin/page.tsx

@@ -20,7 +20,31 @@ export default function AdminPage() {
     const adminPassword = localStorage.getItem("adminPassword");
     if (!adminPassword) {
       router.push("/admin/login");
+      return;
     }
+
+    // Tester la connexion avec l'API (si disponible)
+    // Si l'API n'est pas disponible (APK statique), on continue quand même
+    fetch("/api/admin/clients", {
+      headers: {
+        Authorization: `Bearer ${adminPassword}`,
+      },
+    })
+      .then((res) => {
+        if (!res.ok && res.status !== 404) {
+          // Si erreur autre que 404 (API non disponible), déconnecter
+          if (res.status === 401 || res.status === 403) {
+            localStorage.removeItem("adminPassword");
+            router.push("/admin/login");
+          }
+        }
+        // Si 404, c'est normal en mode statique (API non disponible)
+        // On continue l'affichage
+      })
+      .catch(() => {
+        // Erreur réseau (API non disponible en mode statique)
+        // C'est normal pour l'APK, on continue
+      });
   }, [router]);
 
   const handleNewClient = () => {

app/api/admin/clients/route.ts

@@ -0,0 +1,132 @@
+import { NextRequest, NextResponse } from "next/server";
+import { writeFile, readFile, mkdir } from "fs/promises";
+import { existsSync } from "fs";
+import path from "path";
+import { Client, ClientInput } from "@/lib/types/client";
+
+// Mot de passe admin (à changer en production via variable d'environnement)
+const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || "admin123";
+
+// Chemin vers le fichier de stockage
+const DATA_DIR = path.join(process.cwd(), "data");
+const CLIENTS_FILE = path.join(DATA_DIR, "clients.json");
+
+// Vérifier l'authentification
+function verifyAuth(request: NextRequest): boolean {
+  const authHeader = request.headers.get("authorization");
+  if (!authHeader) return false;
+  
+  const token = authHeader.replace("Bearer ", "");
+  return token === ADMIN_PASSWORD;
+}
+
+// Charger les clients depuis le fichier
+async function loadClients(): Promise<Client[]> {
+  try {
+    if (!existsSync(CLIENTS_FILE)) {
+      // Créer le répertoire et le fichier si nécessaire
+      if (!existsSync(DATA_DIR)) {
+        await mkdir(DATA_DIR, { recursive: true });
+      }
+      await writeFile(CLIENTS_FILE, JSON.stringify([], null, 2));
+      return [];
+    }
+    
+    const data = await readFile(CLIENTS_FILE, "utf-8");
+    return JSON.parse(data);
+  } catch (error) {
+    console.error("Erreur lecture clients:", error);
+    return [];
+  }
+}
+
+// Sauvegarder les clients dans le fichier
+async function saveClients(clients: Client[]): Promise<void> {
+  try {
+    if (!existsSync(DATA_DIR)) {
+      await mkdir(DATA_DIR, { recursive: true });
+    }
+    await writeFile(CLIENTS_FILE, JSON.stringify(clients, null, 2));
+  } catch (error) {
+    console.error("Erreur sauvegarde clients:", error);
+    throw error;
+  }
+}
+
+// GET - Récupérer tous les clients
+export async function GET(request: NextRequest) {
+  if (!verifyAuth(request)) {
+    return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
+  }
+
+  try {
+    const clients = await loadClients();
+    return NextResponse.json(clients);
+  } catch (error) {
+    console.error("Erreur GET clients:", error);
+    return NextResponse.json(
+      { error: "Erreur serveur" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Créer un nouveau client
+export async function POST(request: NextRequest) {
+  if (!verifyAuth(request)) {
+    return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
+  }
+
+  try {
+    const input: ClientInput = await request.json();
+    
+    // Validation
+    if (!input.email || !input.bungalowNumber) {
+      return NextResponse.json(
+        { error: "Email et numéro de bungalow requis" },
+        { status: 400 }
+      );
+    }
+
+    const clients = await loadClients();
+    
+    // Vérifier si l'email existe déjà
+    if (clients.some(c => c.email === input.email)) {
+      return NextResponse.json(
+        { error: "Un client avec cet email existe déjà" },
+        { status: 409 }
+      );
+    }
+
+    // Créer le nouveau client
+    const newClient: Client = {
+      id: `client-${Date.now()}`,
+      token: generateToken(),
+      email: input.email,
+      bungalowNumber: input.bungalowNumber,
+      wifiName: input.wifiName || "Lagon-WiFi",
+      wifiPassword: input.wifiPassword || "",
+      gerantMessage: input.gerantMessage || "Bienvenue dans notre pension de famille !",
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+
+    clients.push(newClient);
+    await saveClients(clients);
+
+    return NextResponse.json(newClient, { status: 201 });
+  } catch (error) {
+    console.error("Erreur POST client:", error);
+    return NextResponse.json(
+      { error: "Erreur serveur" },
+      { status: 500 }
+    );
+  }
+}
+
+// Générer un token unique
+function generateToken(): string {
+  return Math.random().toString(36).substring(2, 15) + 
+         Math.random().toString(36).substring(2, 15);
+}
+

app/globals.css

@@ -4,10 +4,10 @@
 
 @layer base {
   body {
-    @apply bg-background;
+    @apply bg-background dark:bg-background-dark;
     font-size: 16px;
     min-height: 100vh;
-    color: #1f2937;
+    @apply text-foreground dark:text-foreground-dark;
   }
 }
 

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import PWARegister from "@/components/PWARegister";
+import { ThemeProvider } from "@/components/ThemeProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -29,14 +30,21 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="fr">
+    <html lang="fr" suppressHydrationWarning>
       <head>
         <link rel="icon" href="/logo-relais-marama.svg" type="image/svg+xml" />
         <link rel="apple-touch-icon" href="/logo-relais-marama.svg" />
       </head>
       <body className={inter.className}>
-        {children}
+        <ThemeProvider
-        <PWARegister />
+          attribute="class"
+          defaultTheme="light"
+          enableSystem={true}
+          disableTransitionOnChange={false}
+        >
+          {children}
+          <PWARegister />
+        </ThemeProvider>
       </body>
     </html>
   );

app/page.tsx

@@ -1,21 +1,121 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 
 export default function Home() {
   const router = useRouter();
+  const [checked, setChecked] = useState(false);
 
   useEffect(() => {
-    router.replace("/accueil");
+    // Détecter si on est dans l'app admin
+    let isAdminApp = false;
+    
+    if (typeof window !== "undefined") {
+      const Capacitor = (window as any).Capacitor;
+      
+      // Méthode 1: Vérifier l'appId de Capacitor via le package name Android
+      if (Capacitor) {
+        try {
+          const platform = Capacitor.getPlatform();
+          
+          if (platform === "android") {
+            // En Android, on peut récupérer le package name via Capacitor.getApp()
+            // APK admin: com.pensionmarama.admin
+            // APK client: com.pensionmarama.app
+            const App = Capacitor.Plugins?.App;
+            if (App) {
+              App.getInfo().then((info: any) => {
+                // Le package name est dans info.id ou info.appId
+                const appId = info.id || info.appId || "";
+                if (appId.includes("admin")) {
+                  isAdminApp = true;
+                }
+              }).catch(() => {
+                // Fallback si getInfo() échoue
+              });
+            }
+            
+            // Fallback: Vérifier le localStorage (si adminPassword existe, c'est admin)
+            const hasAdminPassword = localStorage.getItem("adminPassword") !== null;
+            if (hasAdminPassword) {
+              isAdminApp = true;
+            }
+          } else {
+            // Pour web, vérifier le localStorage
+            const hasAdminPassword = localStorage.getItem("adminPassword") !== null;
+            if (hasAdminPassword) {
+              isAdminApp = true;
+            }
+          }
+        } catch (e) {
+          // En cas d'erreur, fallback sur les autres méthodes
+          console.warn("Erreur lors de la détection Capacitor:", e);
+        }
+      }
+      
+      // Méthode 2: Vérifier le path ou query string (pour web)
+      if (!isAdminApp && (
+        window.location.pathname.startsWith("/admin") || 
+        window.location.search.includes("admin=true")
+      )) {
+        isAdminApp = true;
+      }
+      
+      // Méthode 3: Si on est dans Capacitor Android sans adminPassword,
+      // on considère que c'est l'app client (redirige vers /accueil)
+      // Sauf si le pathname commence par /admin
+    }
+
+    if (isAdminApp) {
+      // Vérifier si l'admin est connecté
+      const adminPassword = typeof window !== "undefined" ? 
+        localStorage.getItem("adminPassword") : null;
+      
+      if (adminPassword) {
+        // Tester la connexion (si API disponible)
+        fetch("/api/admin/clients", {
+          headers: {
+            Authorization: `Bearer ${adminPassword}`,
+          },
+        })
+          .then((res) => {
+            if (res.ok) {
+              router.replace("/admin");
+            } else if (res.status === 404) {
+              // API non disponible (mode statique) - accepter quand même
+              router.replace("/admin");
+            } else {
+              localStorage.removeItem("adminPassword");
+              router.replace("/admin/login");
+            }
+          })
+          .catch(() => {
+            // Erreur réseau (API non disponible en mode statique)
+            // Accepter quand même et rediriger vers /admin
+            router.replace("/admin");
+          });
+      } else {
+        // Pas de mot de passe, rediriger vers login
+        router.replace("/admin/login");
+      }
+    } else {
+      // App client normale
+      router.replace("/accueil");
+    }
+    setChecked(true);
   }, [router]);
 
-  return (
+  if (!checked) {
-    <div className="flex items-center justify-center min-h-screen">
+    return (
-      <div className="text-center">
+      <div className="flex items-center justify-center min-h-screen bg-background dark:bg-background-dark">
-        <p className="text-gray-600">Redirection...</p>
+        <div className="text-center">
+          <p className="text-gray-600 dark:text-gray-400">Chargement...</p>
+        </div>
       </div>
-    </div>
+    );
-  );
+  }
+
+  return null;
 }
 

components/ThemeProvider.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ComponentProps } from "react";
+
+export function ThemeProvider({ 
+  children, 
+  ...props 
+}: ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
+

components/ThemeToggle.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-9 w-9 rounded-full p-0"
+        aria-label="Changer de thème"
+      >
+        <Sun className="h-5 w-5" />
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className="h-10 w-10 rounded-full hover:bg-secondary dark:hover:bg-gray-800 p-0"
+      aria-label="Changer de thème"
+    >
+      {theme === "dark" ? (
+        <Sun className="h-5 w-5 text-primary dark:text-yellow-400" />
+      ) : (
+        <Moon className="h-5 w-5 text-primary dark:text-blue-300" />
+      )}
+    </Button>
+  );
+}
+

components/accueil/WifiCard.tsx

@@ -71,7 +71,7 @@ export default function WifiCard() {
   const showPasswordFallback = error && error.includes("sélectionner manuellement");
 
   return (
-    <Card className="bg-white">
+    <Card>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Wifi className="h-6 w-6 text-primary" />
@@ -80,22 +80,22 @@ export default function WifiCard() {
       </CardHeader>
       <CardContent className="space-y-4">
         <div>
-          <p className="text-sm text-gray-600 mb-1">Nom du réseau</p>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">Nom du réseau</p>
           <p className="text-lg font-semibold text-primary">{wifiName || "Chargement..."}</p>
         </div>
 
         {showPasswordFallback && wifiPassword && (
-          <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-3">
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-3">
-            <p className="text-sm text-yellow-800 font-mono select-all">
+            <p className="text-sm text-yellow-800 dark:text-yellow-300 font-mono select-all">
               {wifiPassword}
             </p>
           </div>
         )}
 
         {error && !showPasswordFallback && (
-          <div className="bg-red-50 border border-red-200 rounded-xl p-3 flex items-start gap-2">
+          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-3 flex items-start gap-2">
-            <AlertCircle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
+            <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
-            <p className="text-sm text-red-800">{error}</p>
+            <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
           </div>
         )}
 

components/admin/AdminLayout.tsx

@@ -3,6 +3,7 @@
 import { LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
+import { ThemeToggle } from "@/components/ThemeToggle";
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
   const router = useRouter();
@@ -13,14 +14,17 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
   };
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen bg-background dark:bg-background-dark">
-      <header className="bg-white border-b border-gray-200 shadow-sm">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm">
         <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <h1 className="text-xl font-bold text-primary">Administration</h1>
+          <h1 className="text-xl font-bold text-primary dark:text-primary">Administration</h1>
-          <Button variant="outline" size="sm" onClick={handleLogout}>
+          <div className="flex items-center gap-2">
-            <LogOut className="h-4 w-4 mr-2" />
+            <ThemeToggle />
-            Déconnexion
+            <Button variant="outline" size="sm" onClick={handleLogout} className="dark:border-gray-700 dark:text-gray-300">
-          </Button>
+              <LogOut className="h-4 w-4 mr-2" />
+              Déconnexion
+            </Button>
+          </div>
         </div>
       </header>
       <main className="max-w-4xl mx-auto px-4 py-6">{children}</main>

components/admin/ClientForm.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Client, ClientInput } from "@/lib/types/client";
 import QRCodeDisplay from "./QRCodeDisplay";
+import { Copy, Check } from "lucide-react";
 
 interface ClientFormProps {
   client?: Client;
@@ -24,6 +25,7 @@ export default function ClientForm({ client, onSuccess, onCancel }: ClientFormPr
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [createdClient, setCreatedClient] = useState<Client | null>(client || null);
+  const [copied, setCopied] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -68,6 +70,39 @@ export default function ClientForm({ client, onSuccess, onCancel }: ClientFormPr
     return `${baseUrl}/accueil?token=${createdClient.token}`;
   };
 
+  const handleCopyLink = async () => {
+    const url = getClientUrl();
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      // Alerte pour confirmer
+      alert(`✅ Lien copié !\n\n${url}\n\nVous pouvez maintenant le coller (Ctrl+V) pour le partager avec votre client.`);
+      setTimeout(() => setCopied(false), 3000);
+    } catch (err) {
+      console.error("Erreur lors de la copie:", err);
+      // Fallback pour les navigateurs plus anciens
+      const textArea = document.createElement("textarea");
+      textArea.value = url;
+      textArea.style.position = "fixed";
+      textArea.style.left = "-999999px";
+      document.body.appendChild(textArea);
+      textArea.select();
+      try {
+        const successful = document.execCommand("copy");
+        if (successful) {
+          setCopied(true);
+          alert(`✅ Lien copié !\n\n${url}\n\nVous pouvez maintenant le coller (Ctrl+V) pour le partager avec votre client.`);
+          setTimeout(() => setCopied(false), 3000);
+        } else {
+          alert(`❌ Copie automatique non supportée.\n\nVeuillez copier manuellement le lien:\n\n${url}`);
+        }
+      } catch (e) {
+        alert(`❌ Copie automatique non supportée.\n\nVeuillez copier manuellement le lien:\n\n${url}`);
+      }
+      document.body.removeChild(textArea);
+    }
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -167,19 +202,53 @@ export default function ClientForm({ client, onSuccess, onCancel }: ClientFormPr
             <h3 className="font-semibold text-primary mb-3">Client créé avec succès !</h3>
             <div className="space-y-4">
               <div>
-                <p className="text-sm text-gray-600 mb-2">Lien unique :</p>
+                <p className="text-sm font-medium text-gray-700 mb-2">Lien unique :</p>
-                <div className="bg-secondary rounded-xl p-3 flex items-center justify-between gap-2">
+                <div className="bg-secondary rounded-xl p-4 space-y-3">
-                  <code className="text-xs break-all flex-1">{getClientUrl()}</code>
+                  <textarea
-                  <Button
+                    readOnly
-                    size="sm"
+                    value={getClientUrl()}
-                    variant="outline"
+                    onClick={(e) => e.currentTarget.select()}
-                    onClick={() => {
+                    onFocus={(e) => e.currentTarget.select()}
-                      navigator.clipboard.writeText(getClientUrl());
+                    className="w-full p-3 text-sm font-mono text-primary bg-white border-2 border-primary rounded-lg resize-none"
-                    }}
+                    rows={3}
-                  >
+                    style={{ cursor: 'text' }}
-                    Copier
+                  />
-                  </Button>
+                  <div className="flex gap-2">
+                    <Button
+                      size="sm"
+                      onClick={handleCopyLink}
+                      className={`flex-1 ${copied ? "bg-green-600 hover:bg-green-700" : ""}`}
+                    >
+                      {copied ? (
+                        <>
+                          <Check className="h-4 w-4 mr-2" />
+                          Copié !
+                        </>
+                      ) : (
+                        <>
+                          <Copy className="h-4 w-4 mr-2" />
+                          Copier
+                        </>
+                      )}
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        const textarea = document.querySelector('textarea[readonly]') as HTMLTextAreaElement;
+                        if (textarea) {
+                          textarea.select();
+                        }
+                      }}
+                      className="flex-1"
+                    >
+                      Sélectionner
+                    </Button>
+                  </div>
                 </div>
+                <p className="text-xs text-gray-500 mt-2">
+                  💡 Cliquez sur le lien pour le sélectionner, puis Ctrl+C pour copier
+                </p>
               </div>
               <div>
                 <p className="text-sm text-gray-600 mb-2">QR Code :</p>

components/admin/ClientList.tsx

@@ -34,9 +34,19 @@ export default function ClientList({ onEdit, onRefresh }: ClientListProps) {
       if (response.ok) {
         const data = await response.json();
         setClients(data);
+      } else if (response.status === 404) {
+        // API non disponible (mode statique/APK)
+        // Afficher un message d'information
+        console.warn("API non disponible en mode statique");
+        setClients([]);
+      } else {
+        console.error("Erreur lors du chargement des clients:", response.status);
+        setClients([]);
       }
     } catch (error) {
-      console.error("Erreur lors du chargement des clients:", error);
+      // Erreur réseau (API non disponible en mode statique/APK)
+      console.warn("API non disponible (mode statique/APK). Les fonctionnalités admin nécessitent un serveur.");
+      setClients([]);
     } finally {
       setLoading(false);
     }
@@ -73,7 +83,7 @@ export default function ClientList({ onEdit, onRefresh }: ClientListProps) {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-8">
-        <p className="text-gray-600">Chargement...</p>
+        <p className="text-gray-600 dark:text-gray-400">Chargement...</p>
       </div>
     );
   }
@@ -81,8 +91,12 @@ export default function ClientList({ onEdit, onRefresh }: ClientListProps) {
   if (clients.length === 0) {
     return (
       <Card>
-        <CardContent className="py-8 text-center">
+        <CardContent className="py-8 text-center space-y-4">
-          <p className="text-gray-600">Aucun client pour le moment.</p>
+          <p className="text-gray-600 dark:text-gray-400">Aucun client pour le moment.</p>
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-4 text-sm text-yellow-800 dark:text-yellow-300">
+            <p className="font-semibold mb-1">⚠️ Mode hors ligne</p>
+            <p>L&apos;application admin nécessite une connexion au serveur pour fonctionner. Les API routes ne sont pas disponibles en mode statique.</p>
+          </div>
         </CardContent>
       </Card>
     );

components/admin/QRCodeDisplay.tsx

@@ -1,6 +1,9 @@
 "use client";
 
+import { useState } from "react";
 import { QRCodeSVG } from "qrcode.react";
+import { Button } from "@/components/ui/button";
+import { Copy, Check } from "lucide-react";
 
 interface QRCodeDisplayProps {
   url: string;
@@ -8,12 +11,89 @@ interface QRCodeDisplayProps {
 }
 
 export default function QRCodeDisplay({ url, size = 200 }: QRCodeDisplayProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      alert(`✅ Lien copié !\n\n${url}\n\nVous pouvez maintenant le coller (Ctrl+V) pour le partager avec votre client.`);
+      setTimeout(() => setCopied(false), 3000);
+    } catch (err) {
+      console.error("Erreur lors de la copie:", err);
+      const textArea = document.createElement("textarea");
+      textArea.value = url;
+      textArea.style.position = "fixed";
+      textArea.style.left = "-999999px";
+      document.body.appendChild(textArea);
+      textArea.select();
+      try {
+        const successful = document.execCommand("copy");
+        if (successful) {
+          setCopied(true);
+          alert(`✅ Lien copié !\n\n${url}\n\nVous pouvez maintenant le coller (Ctrl+V) pour le partager avec votre client.`);
+          setTimeout(() => setCopied(false), 3000);
+        } else {
+          alert(`Copiez ce lien manuellement:\n\n${url}`);
+        }
+      } catch (e) {
+        alert(`Copiez ce lien manuellement:\n\n${url}`);
+      }
+      document.body.removeChild(textArea);
+    }
+  };
+
   return (
-    <div className="flex flex-col items-center gap-4 p-4 bg-white rounded-2xl border border-gray-200">
+    <div className="flex flex-col items-center gap-4 p-6 bg-white rounded-2xl border border-gray-200">
       <QRCodeSVG value={url} size={size} level="H" />
-      <p className="text-xs text-gray-600 text-center break-all max-w-xs">
+      
-        {url}
+      <div className="w-full space-y-3">
-      </p>
+        <p className="text-sm font-medium text-gray-700">Lien unique :</p>
+        <textarea
+          readOnly
+          value={url}
+          onClick={(e) => e.currentTarget.select()}
+          onFocus={(e) => e.currentTarget.select()}
+          className="w-full p-3 text-sm font-mono text-primary bg-secondary border-2 border-primary rounded-lg resize-none"
+          rows={3}
+          style={{ cursor: 'text' }}
+        />
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            onClick={handleCopyLink}
+            className={`flex-1 ${copied ? "bg-green-600 hover:bg-green-700" : ""}`}
+          >
+            {copied ? (
+              <>
+                <Check className="h-4 w-4 mr-2" />
+                Copié !
+              </>
+            ) : (
+              <>
+                <Copy className="h-4 w-4 mr-2" />
+                Copier
+              </>
+            )}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              const textarea = document.querySelector('textarea[readonly]') as HTMLTextAreaElement;
+              if (textarea) {
+                textarea.select();
+              }
+            }}
+            className="flex-1"
+          >
+            Sélectionner
+          </Button>
+        </div>
+        <p className="text-xs text-gray-500 text-center">
+          💡 Cliquez sur le lien pour le sélectionner, puis Ctrl+C pour copier
+        </p>
+      </div>
     </div>
   );
 }

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-primary bg-secondary dark:bg-primary/20"
-                  : "text-gray-500 hover:text-primary hover:bg-gray-50"
+                  : "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>
   );

components/ui/button.tsx

@@ -7,10 +7,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/80",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 dark:bg-primary/20 dark:text-primary dark:hover:bg-primary/30",
-        outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white",
+        outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white dark:border-primary dark:text-primary dark:hover:bg-primary dark:hover:text-white",
-        ghost: "hover:bg-secondary hover:text-secondary-foreground",
+        ghost: "hover:bg-secondary hover:text-secondary-foreground dark:hover:bg-gray-800 dark:hover:text-gray-200",
       },
       size: {
         default: "h-12 px-6 py-3",

components/ui/card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-2xl border border-gray-200 bg-white shadow-sm",
+      "rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm",
       className
     )}
     {...props}
@@ -46,7 +46,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-gray-600", className)}
+    className={cn("text-sm text-gray-600 dark:text-gray-400", className)}
     {...props}
   />
 ));

data/.gitkeep

@@ -0,0 +1,2 @@
+# Ce dossier contiendra clients.json (ignoré par git)
+

next.config.server.js

@@ -2,7 +2,8 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  output: "standalone",
+  // Mode serveur (pas d'export statique)
+  // Les API routes fonctionnent normalement
   compress: true,
   poweredByHeader: false,
   images: {

package-lock.json

@@ -15,6 +15,7 @@
         "clsx": "^2.1.1",
         "lucide-react": "^0.460.0",
         "next": "^14.2.33",
+        "next-themes": "^0.4.6",
         "qrcode.react": "^4.2.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -4757,6 +4758,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

package.json

@@ -16,6 +16,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.460.0",
     "next": "^14.2.33",
+    "next-themes": "^0.4.6",
     "qrcode.react": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

scripts/build-apk-admin.sh

@@ -0,0 +1,209 @@
+#!/bin/bash
+
+set -e
+
+echo "🚀 Build APK Admin - Compagnon du Lagon"
+echo "========================================"
+echo ""
+
+# Couleurs pour les messages
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Vérifier qu'on est dans le bon répertoire
+if [ ! -f "package.json" ]; then
+    echo "❌ Erreur: Exécutez ce script depuis la racine du projet"
+    exit 1
+fi
+
+# Étape 1: Créer la configuration Next.js pour l'export statique
+echo -e "${BLUE}📦 Étape 1/6: Configuration Next.js pour export statique${NC}"
+cat > next.config.export.js << 'EOF'
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  output: "export",
+  compress: true,
+  poweredByHeader: false,
+  images: {
+    unoptimized: true,
+  },
+};
+
+module.exports = nextConfig;
+EOF
+
+# Copier la config pour le build
+cp next.config.export.js next.config.js
+
+echo -e "${GREEN}✅ Configuration créée${NC}"
+echo ""
+
+# Étape 2: Installer les dépendances si nécessaire
+echo -e "${BLUE}📦 Étape 2/6: Vérification des dépendances${NC}"
+
+# Vérifier SDKMAN
+if [ ! -f "$HOME/.sdkman/bin/sdkman-init.sh" ]; then
+    echo "Installation de SDKMAN..."
+    curl -s "https://get.sdkman.io" | bash
+    source "$HOME/.sdkman/bin/sdkman-init.sh"
+fi
+
+source "$HOME/.sdkman/bin/sdkman-init.sh" 2>/dev/null || true
+
+# Vérifier Java 21
+if ! java -version 2>&1 | grep -q "21"; then
+    echo "Installation de Java 21..."
+    sdk install java 21.0.1-tem
+    sdk use java 21.0.1-tem
+fi
+
+# Vérifier Android SDK
+if [ ! -d "$HOME/Android/Sdk" ]; then
+    echo "Installation d'Android SDK..."
+    mkdir -p "$HOME/Android/Sdk/cmdline-tools"
+    cd "$HOME/Android/Sdk/cmdline-tools"
+    wget -q https://dl.google.com/android/repository/commandlinetools-linux-9477386_latest.zip
+    unzip -q commandlinetools-linux-9477386_latest.zip
+    mv cmdline-tools latest
+    rm commandlinetools-linux-9477386_latest.zip
+    cd -
+    
+    export ANDROID_HOME="$HOME/Android/Sdk"
+    export PATH="$ANDROID_HOME/cmdline-tools/latest/bin:$PATH"
+    yes | sdkmanager --licenses || true
+    sdkmanager "platform-tools" "platforms;android-34" "build-tools;34.0.0"
+fi
+
+if [ ! -d "node_modules" ]; then
+    echo "Installation des dépendances Node.js..."
+    npm install --include=dev
+else
+    echo "Dépendances Node.js déjà installées"
+fi
+
+# Installer Capacitor si nécessaire
+if ! npm list @capacitor/core > /dev/null 2>&1; then
+    echo "Installation de Capacitor..."
+    npm install @capacitor/core @capacitor/cli @capacitor/android
+fi
+
+echo -e "${GREEN}✅ Dépendances OK${NC}"
+echo ""
+
+# Étape 3: Build Next.js
+echo -e "${BLUE}📦 Étape 3/6: Build Next.js (export statique)${NC}"
+rm -rf .next out
+
+# Exclure temporairement les routes API pour l'export statique
+if [ -d "app/api" ]; then
+    echo "Exclusion temporaire des routes API..."
+    mv app/api /tmp/api-backup-$$
+    echo -e "${GREEN}✅ Routes API déplacées temporairement${NC}"
+fi
+
+if npm run build; then
+    echo -e "${GREEN}✅ Build Next.js réussi${NC}"
+else
+    echo -e "${YELLOW}⚠️  Build avec avertissements, continuation...${NC}"
+    npm run build -- --no-lint || true
+fi
+
+# Restaurer les routes API
+if [ -d "/tmp/api-backup-$$" ]; then
+    mv /tmp/api-backup-$$ app/api
+    echo -e "${GREEN}✅ Routes API restaurées${NC}"
+fi
+
+echo ""
+
+# Vérifier que le dossier out existe
+if [ ! -d "out" ]; then
+    echo "❌ Erreur: Le dossier 'out' n'a pas été créé"
+    exit 1
+fi
+
+# Étape 4: Initialiser/Configurer Capacitor
+echo -e "${BLUE}📦 Étape 4/6: Configuration Capacitor${NC}"
+
+# Initialiser Capacitor si nécessaire
+if [ ! -f "capacitor.config.ts" ]; then
+    echo "Initialisation de Capacitor..."
+    npx cap init "Compagnon Admin" com.pensionmarama.admin --web-dir=out
+else
+    echo "Capacitor déjà initialisé"
+    # Mettre à jour la config pour pointer vers out
+    cat > capacitor.config.ts << 'EOF'
+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.pensionmarama.admin',
+  appName: 'Compagnon Admin',
+  webDir: 'out',
+  server: {
+    androidScheme: 'https'
+  }
+};
+
+export default config;
+EOF
+fi
+
+echo -e "${GREEN}✅ Capacitor configuré${NC}"
+echo ""
+
+# Étape 5: Synchroniser avec Android
+echo -e "${BLUE}📦 Étape 5/6: Synchronisation Android${NC}"
+
+# Ajouter Android si nécessaire
+if [ ! -d "android" ]; then
+    echo "Ajout de la plateforme Android..."
+    npx cap add android
+fi
+
+# Synchroniser
+echo "Synchronisation Capacitor..."
+npx cap sync android
+
+echo -e "${GREEN}✅ Android synchronisé${NC}"
+echo ""
+
+# Étape 6: Générer l'APK
+echo -e "${BLUE}📦 Étape 6/6: Génération de l'APK${NC}"
+
+export ANDROID_HOME="$HOME/Android/Sdk"
+export PATH="$ANDROID_HOME/cmdline-tools/latest/bin:$ANDROID_HOME/platform-tools:$PATH"
+
+cd android
+./gradlew assembleDebug
+cd ..
+
+# Copier l'APK généré
+if [ -f "android/app/build/outputs/apk/debug/app-debug.apk" ]; then
+    mkdir -p dist
+    cp android/app/build/outputs/apk/debug/app-debug.apk dist/compagnon-admin-debug.apk
+    echo ""
+    echo -e "${GREEN}========================================${NC}"
+    echo -e "${GREEN}✅ APK ADMIN GÉNÉRÉ AVEC SUCCÈS !${NC}"
+    echo -e "${GREEN}========================================${NC}"
+    echo ""
+    echo -e "📱 Fichier: ${BLUE}dist/compagnon-admin-debug.apk${NC}"
+    APK_SIZE=$(du -h dist/compagnon-admin-debug.apk | cut -f1)
+    echo -e "📊 Taille: ${BLUE}${APK_SIZE}${NC}"
+    echo ""
+    echo -e "${YELLOW}📤 Pour distribuer aux administrateurs:${NC}"
+    echo "   1. Envoyez le fichier dist/compagnon-admin-debug.apk"
+    echo "   2. Demandez-leur d'activer 'Sources inconnues'"
+    echo "   3. Installer l'APK sur leur téléphone"
+    echo ""
+    echo -e "${YELLOW}🔄 Pour mettre à jour:${NC}"
+    echo "   Relancez simplement ce script !"
+    echo ""
+else
+    echo "❌ L'APK n'a pas été généré. Vérifiez les erreurs ci-dessus."
+    exit 1
+fi
+

scripts/build-apk-simple.sh

@@ -98,12 +98,26 @@ echo ""
 echo -e "${BLUE}📦 Étape 3/6: Build Next.js (export statique)${NC}"
 rm -rf .next out
 
+# Exclure temporairement les routes API pour l'export statique
+if [ -d "app/api" ]; then
+    echo "Exclusion temporaire des routes API..."
+    mv app/api /tmp/api-backup-$$
+    echo -e "${GREEN}✅ Routes API déplacées temporairement${NC}"
+fi
+
 if npm run build; then
     echo -e "${GREEN}✅ Build Next.js réussi${NC}"
 else
     echo -e "${YELLOW}⚠️  Build avec avertissements, continuation...${NC}"
     npm run build -- --no-lint || true
 fi
+
+# Restaurer les routes API
+if [ -d "/tmp/api-backup-$$" ]; then
+    mv /tmp/api-backup-$$ app/api
+    echo -e "${GREEN}✅ Routes API restaurées${NC}"
+fi
+
 echo ""
 
 # Vérifier que le dossier out existe

scripts/build-server.sh

@@ -0,0 +1,190 @@
+#!/bin/bash
+
+set -e
+
+echo "🚀 Build de l'admin pour déploiement serveur"
+echo "============================================"
+echo ""
+
+# Couleurs
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+YELLOW='\033[1;33m'
+NC='\033[0m'
+
+# Vérifier qu'on est dans le bon répertoire
+if [ ! -f "package.json" ]; then
+    echo "❌ Erreur: Exécutez ce script depuis la racine du projet"
+    exit 1
+fi
+
+# Étape 1: Configuration Next.js pour serveur
+echo -e "${BLUE}📦 Étape 1/4: Configuration Next.js${NC}"
+if [ -f "next.config.js" ]; then
+    cp next.config.js next.config.js.backup
+fi
+cp next.config.server.js next.config.js
+echo -e "${GREEN}✅ Configuration serveur activée${NC}"
+echo ""
+
+# Étape 2: Installation des dépendances
+echo -e "${BLUE}📦 Étape 2/4: Vérification des dépendances${NC}"
+if [ ! -d "node_modules" ]; then
+    echo "Installation des dépendances..."
+    npm install
+else
+    echo "Dépendances déjà installées"
+fi
+echo -e "${GREEN}✅ Dépendances OK${NC}"
+echo ""
+
+# Étape 3: Build Next.js
+echo -e "${BLUE}📦 Étape 3/4: Build de production${NC}"
+rm -rf .next
+
+if npm run build; then
+    echo -e "${GREEN}✅ Build réussi${NC}"
+else
+    echo -e "${YELLOW}⚠️  Build avec avertissements${NC}"
+fi
+echo ""
+
+# Étape 4: Préparer les fichiers pour le déploiement
+echo -e "${BLUE}📦 Étape 4/4: Préparation du déploiement${NC}"
+
+# Créer le dossier de déploiement
+mkdir -p deploy
+rm -rf deploy/*
+
+# Copier les fichiers nécessaires
+echo "Copie des fichiers..."
+cp -r .next deploy/
+cp -r public deploy/
+cp package.json deploy/
+cp package-lock.json deploy/ 2>/dev/null || true
+cp next.config.server.js deploy/next.config.js
+
+# Créer le dossier data
+mkdir -p deploy/data
+cp data/.gitkeep deploy/data/ 2>/dev/null || true
+
+# Créer un fichier .env.example
+cat > deploy/.env.example << 'EOF'
+# Mot de passe admin
+ADMIN_PASSWORD=votre_mot_de_passe_securise
+
+# Port (optionnel, par défaut 3000)
+PORT=3000
+EOF
+
+# Créer un fichier de lancement
+cat > deploy/start.sh << 'EOF'
+#!/bin/bash
+# Script de lancement pour le serveur
+
+# Installer les dépendances production uniquement
+npm ci --production
+
+# Démarrer le serveur
+npm start
+EOF
+
+chmod +x deploy/start.sh
+
+# Créer un fichier README pour le déploiement
+cat > deploy/DEPLOY.md << 'EOF'
+# Déploiement sur serveur
+
+## Étapes de déploiement
+
+1. **Transférer les fichiers sur le serveur**
+   ```bash
+   rsync -avz --delete deploy/ user@marama.syoul.fr:/var/www/pension-admin/
+   ```
+
+2. **Se connecter au serveur**
+   ```bash
+   ssh user@marama.syoul.fr
+   cd /var/www/pension-admin
+   ```
+
+3. **Configurer les variables d'environnement**
+   ```bash
+   cp .env.example .env
+   nano .env  # Modifier ADMIN_PASSWORD
+   ```
+
+4. **Installer et démarrer**
+   ```bash
+   chmod +x start.sh
+   ./start.sh
+   ```
+
+5. **Avec PM2 (recommandé)**
+   ```bash
+   npm install -g pm2
+   pm2 start npm --name "pension-admin" -- start
+   pm2 save
+   pm2 startup
+   ```
+
+## Configuration Nginx (reverse proxy)
+
+```nginx
+server {
+    listen 80;
+    server_name admin.marama.syoul.fr;
+
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
+```
+
+## SSL avec Certbot
+
+```bash
+sudo certbot --nginx -d admin.marama.syoul.fr
+```
+EOF
+
+echo -e "${GREEN}✅ Fichiers prêts dans deploy/${NC}"
+echo ""
+
+# Restaurer la config originale
+if [ -f "next.config.js.backup" ]; then
+    mv next.config.js.backup next.config.js
+fi
+
+# Afficher le résumé
+DEPLOY_SIZE=$(du -sh deploy | cut -f1)
+
+echo ""
+echo -e "${GREEN}========================================${NC}"
+echo -e "${GREEN}✅ BUILD SERVEUR TERMINÉ !${NC}"
+echo -e "${GREEN}========================================${NC}"
+echo ""
+echo -e "📁 Dossier de déploiement: ${BLUE}deploy/${NC}"
+echo -e "📊 Taille: ${BLUE}${DEPLOY_SIZE}${NC}"
+echo ""
+echo -e "${YELLOW}📤 Prochaines étapes:${NC}"
+echo ""
+echo "1. Transférer sur le serveur:"
+echo "   ${BLUE}rsync -avz --delete deploy/ user@marama.syoul.fr:/var/www/pension-admin/${NC}"
+echo ""
+echo "2. Sur le serveur:"
+echo "   ${BLUE}cd /var/www/pension-admin${NC}"
+echo "   ${BLUE}./start.sh${NC}"
+echo ""
+echo "3. Configurer le mot de passe admin:"
+echo "   ${BLUE}nano .env${NC}"
+echo "   ${BLUE}ADMIN_PASSWORD=votre_mot_de_passe${NC}"
+echo ""
+echo -e "${YELLOW}📖 Documentation complète: deploy/DEPLOY.md${NC}"
+echo ""
+

tailwind.config.ts

@@ -17,10 +17,20 @@ const config: Config = {
         secondary: {
           DEFAULT: "#ECFCCB",
           foreground: "#0E7490",
+          dark: "#1a3a2e",
+        },
+        background: {
+          DEFAULT: "#FAFAFA",
+          dark: "#0f172a",
+        },
+        foreground: {
+          DEFAULT: "#1f2937",
+          dark: "#f1f5f9",
+        },
+        border: {
+          DEFAULT: "#e5e7eb",
+          dark: "#334155",
         },
-        background: "#FAFAFA",
-        foreground: "#1f2937",
-        border: "#e5e7eb",
       },
       borderRadius: {
         xl: "1rem",