From afa7e59c34b63d6a97418dfd128675920c6c47dc Mon Sep 17 00:00:00 2001
From: Michael <michael@collectflow.local>
Date: Sun, 22 Feb 2026 14:32:42 +0100
Subject: [PATCH] feat: Implement Apple-inspired design system with global
 dark/light mode styles and utility classes.

---
 src/app/(dashboard)/settings/page.tsx         |  37 ++--
 src/app/globals.css                           |  19 +-
 .../shared/change-password-modal.tsx          | 203 ++++++++++++++++++
 .../admin/components/user-management.tsx      |  77 ++++---
 src/features/auth/components/login-form.tsx   |  33 +--
 5 files changed, 294 insertions(+), 75 deletions(-)
 create mode 100644 src/components/shared/change-password-modal.tsx

diff --git a/src/app/(dashboard)/settings/page.tsx b/src/app/(dashboard)/settings/page.tsx
index 7756641..1677677 100644
--- a/src/app/(dashboard)/settings/page.tsx
+++ b/src/app/(dashboard)/settings/page.tsx
@@ -14,15 +14,12 @@ interface OpenRouterModel { id: string; name: string; free: boolean; }
 
 function Section({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
     return (
-        <section
-            className="rounded-[14px] overflow-hidden"
-            style={{ border: "1px solid var(--border)", boxShadow: "var(--shadow-sm)" }}
-        >
-            <div className="px-5 py-4" style={{ borderBottom: "1px solid var(--border)", background: "var(--bg-elevated)" }}>
-                <h2 className="text-[13px] font-semibold" style={{ color: "var(--text-primary)" }}>{title}</h2>
-                {subtitle && <p className="text-[12px] mt-0.5" style={{ color: "var(--text-secondary)" }}>{subtitle}</p>}
+        <section className="apple-card">
+            <div className="apple-card-header">
+                <h2 className="text-[13px] font-semibold text-[var(--text-primary)]">{title}</h2>
+                {subtitle && <p className="text-[12px] mt-0.5 text-[var(--text-secondary)]">{subtitle}</p>}
             </div>
-            <div className="px-5 py-5 space-y-4" style={{ background: "var(--bg-surface)" }}>
+            <div className="apple-card-content space-y-4">
                 {children}
             </div>
         </section>
@@ -32,9 +29,9 @@ function Section({ title, subtitle, children }: { title: string; subtitle?: stri
 function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
     return (
         <div className="space-y-1.5">
-            <label className="text-[12px] font-medium" style={{ color: "var(--text-secondary)" }}>{label}</label>
+            <label className="text-[12px] font-medium text-[var(--text-secondary)]">{label}</label>
             {children}
-            {hint && <p className="text-[11px]" style={{ color: "var(--text-muted)" }}>{hint}</p>}
+            {hint && <p className="text-[11px] text-[var(--text-muted)]">{hint}</p>}
         </div>
     );
 }
@@ -151,8 +148,8 @@ export default function SettingsPage() {
     return (
         <div className="space-y-6 max-w-xl">
             <div>
-                <h1 className="text-[22px] font-bold tracking-[-0.4px]" style={{ color: "var(--text-primary)" }}>Paramètres</h1>
-                <p className="text-[13px] mt-1" style={{ color: "var(--text-secondary)" }}>Configuration de la connexion et des services.</p>
+                <h1 className="text-[22px] font-bold tracking-[-0.4px] text-[var(--text-primary)]">Paramètres</h1>
+                <p className="text-[13px] mt-1 text-[var(--text-secondary)]">Configuration de la connexion et des services.</p>
             </div>
 
             {/* PostgreSQL */}
@@ -214,7 +211,7 @@ export default function SettingsPage() {
                         onChange={(e) => setSsl(e.target.checked)}
                         className="w-3.5 h-3.5 rounded accent-teal-500 cursor-pointer"
                     />
-                    <label htmlFor="ssl" className="text-[12px] cursor-pointer" style={{ color: "var(--text-secondary)" }}>Connexion SSL</label>
+                    <label htmlFor="ssl" className="text-[12px] cursor-pointer text-[var(--text-secondary)]">Connexion SSL</label>
                 </div>
                 <div className="flex items-center gap-3">
                     <button onClick={testDb} disabled={dbStatus === "testing"} className="apple-btn-secondary">
@@ -236,8 +233,7 @@ export default function SettingsPage() {
                 <div className="pt-2">
                     <button
                         onClick={reloadFromServer}
-                        className="flex items-center gap-2 text-[12px] font-medium transition-colors hover:text-emerald-500"
-                        style={{ color: "var(--text-secondary)" }}
+                        className="flex items-center gap-2 text-[12px] font-medium transition-colors hover:text-[var(--accent)] text-[var(--text-secondary)]"
                     >
                         <RotateCcw className="w-3.5 h-3.5" />
                         Recharger la configuration enregistrée sur le serveur
@@ -301,8 +297,8 @@ export default function SettingsPage() {
             <Section title="Apparence">
                 <div className="flex items-center justify-between">
                     <div>
-                        <p className="text-[13px] font-medium" style={{ color: "var(--text-primary)" }}>Thème</p>
-                        <p className="text-[12px]" style={{ color: "var(--text-secondary)" }}>Interface claire ou sombre</p>
+                        <p className="text-[13px] font-medium text-[var(--text-primary)]">Thème</p>
+                        <p className="text-[12px] text-[var(--text-secondary)]">Interface claire ou sombre</p>
                     </div>
                     {/* Segment control */}
                     <div className="segment-control">
@@ -317,8 +313,8 @@ export default function SettingsPage() {
 
                 <div className="flex items-center justify-between">
                     <div>
-                        <p className="text-[13px] font-medium" style={{ color: "var(--text-primary)" }}>Densité de la grille</p>
-                        <p className="text-[12px]" style={{ color: "var(--text-secondary)" }}>Hauteur de ligne par défaut</p>
+                        <p className="text-[13px] font-medium text-[var(--text-primary)]">Densité de la grille</p>
+                        <p className="text-[12px] text-[var(--text-secondary)]">Hauteur de ligne par défaut</p>
                     </div>
                     <select
                         className="apple-input w-auto"
@@ -394,8 +390,7 @@ export default function SettingsPage() {
                 <div className="pt-2">
                     <button
                         onClick={resetScoreDefaults}
-                        className="flex items-center gap-2 text-[12px] font-medium transition-colors hover:text-emerald-500"
-                        style={{ color: "var(--text-secondary)" }}
+                        className="flex items-center gap-2 text-[12px] font-medium transition-colors hover:text-[var(--accent)] text-[var(--text-secondary)]"
                     >
                         <RotateCcw className="w-3.5 h-3.5" />
                         Rétablir les valeurs par défaut
diff --git a/src/app/globals.css b/src/app/globals.css
index 5e82af8..3e5528a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -126,13 +126,26 @@
   color: var(--text-muted);
 }
 
-/* ── Surfaces ── */
-.surface {
+/* ── Surfaces & containers ── */
+.surface { background: var(--bg-surface); }
+.elevated { background: var(--bg-elevated); }
+
+.apple-card {
   background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
 }
 
-.elevated {
+.apple-card-header {
+  padding: 16px 20px;
   background: var(--bg-elevated);
+  border-bottom: 1px solid var(--border);
+}
+
+.apple-card-content {
+  padding: 20px;
 }
 
 /* ── Glass panels (sidebar, header) ── */
diff --git a/src/components/shared/change-password-modal.tsx b/src/components/shared/change-password-modal.tsx
new file mode 100644
index 0000000..d71defe
--- /dev/null
+++ b/src/components/shared/change-password-modal.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { X, KeyRound, Eye, EyeOff, Loader2, ShieldCheck } from "lucide-react";
+
+interface ChangePasswordModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: (newPassword: string) => Promise<void>;
+    username: string;
+}
+
+export function ChangePasswordModal({
+    isOpen,
+    onClose,
+    onConfirm,
+    username,
+}: ChangePasswordModalProps) {
+    const [password, setPassword] = useState("");
+    const [confirm, setConfirm] = useState("");
+    const [showPassword, setShowPassword] = useState(false);
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [isVisible, setIsVisible] = useState(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (isOpen) {
+            setIsVisible(true);
+            setPassword("");
+            setConfirm("");
+            setError(null);
+            setTimeout(() => inputRef.current?.focus(), 50);
+        } else {
+            setIsVisible(false);
+        }
+    }, [isOpen]);
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Escape") handleClose();
+    };
+
+    const handleClose = () => {
+        setIsVisible(false);
+        setTimeout(onClose, 250);
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError(null);
+
+        if (password.length < 4) {
+            setError("Le mot de passe doit faire au moins 4 caractères.");
+            return;
+        }
+        if (password !== confirm) {
+            setError("Les mots de passe ne correspondent pas.");
+            return;
+        }
+
+        setIsLoading(true);
+        try {
+            await onConfirm(password);
+            handleClose();
+        } catch (err: any) {
+            setError(err?.message ?? "Une erreur est survenue.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    if (!isOpen && !isVisible) return null;
+
+    return (
+        <div
+            className={`fixed inset-0 z-[100] flex items-center justify-center p-4 transition-all duration-250 ${isVisible ? "opacity-100 backdrop-blur-sm" : "opacity-0"}`}
+            onKeyDown={handleKeyDown}
+        >
+            {/* Backdrop */}
+            <div
+                className="fixed inset-0"
+                style={{ background: "rgba(0,0,0,0.55)" }}
+                onClick={handleClose}
+            />
+
+            {/* Panel */}
+            <div
+                className={`relative w-full max-w-sm rounded-2xl overflow-hidden shadow-2xl transition-all duration-250 ${isVisible ? "scale-100 translate-y-0" : "scale-95 translate-y-4"}`}
+                style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }}
+            >
+                {/* Accent bar */}
+                <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-teal-400 to-emerald-400" />
+
+                {/* Close button */}
+                <button
+                    onClick={handleClose}
+                    className="absolute top-4 right-4 p-1.5 rounded-lg hover:bg-[var(--bg-elevated)] text-[var(--text-muted)] transition-colors"
+                >
+                    <X className="w-4 h-4" />
+                </button>
+
+                <div className="p-7">
+                    {/* Header */}
+                    <div className="flex items-center gap-4 mb-7">
+                        <div className="w-11 h-11 rounded-xl bg-[var(--accent-bg)] border border-[var(--accent-border)] flex items-center justify-center shrink-0">
+                            <KeyRound className="w-5 h-5 text-[var(--accent)]" />
+                        </div>
+                        <div>
+                            <h3 className="text-base font-bold text-[var(--text-primary)]">Changer le mot de passe</h3>
+                            <p className="text-xs text-[var(--text-muted)]">Compte : <span className="font-semibold text-[var(--text-secondary)]">{username}</span></p>
+                        </div>
+                    </div>
+
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        {/* New password */}
+                        <div className="space-y-1.5">
+                            <label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)]">
+                                Nouveau mot de passe
+                            </label>
+                            <div className="relative">
+                                <input
+                                    ref={inputRef}
+                                    type={showPassword ? "text" : "password"}
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    placeholder="Min. 4 caractères"
+                                    className="apple-input pr-10"
+                                    required
+                                />
+                                <button
+                                    type="button"
+                                    onClick={() => setShowPassword(v => !v)}
+                                    className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
+                                >
+                                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Confirm */}
+                        <div className="space-y-1.5">
+                            <label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)]">
+                                Confirmer le mot de passe
+                            </label>
+                            <div className="relative">
+                                <input
+                                    type={showConfirm ? "text" : "password"}
+                                    value={confirm}
+                                    onChange={(e) => setConfirm(e.target.value)}
+                                    placeholder="Répétez le mot de passe"
+                                    className="apple-input pr-10"
+                                    required
+                                />
+                                <button
+                                    type="button"
+                                    onClick={() => setShowConfirm(v => !v)}
+                                    className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors"
+                                >
+                                    {showConfirm ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Password match indicator */}
+                        {confirm.length > 0 && (
+                            <div className={`flex items-center gap-2 text-xs font-semibold ${password === confirm ? "text-[var(--accent-success)]" : "text-[var(--accent-error)]"}`}>
+                                <ShieldCheck className="w-3.5 h-3.5" />
+                                {password === confirm ? "Les mots de passe correspondent" : "Les mots de passe ne correspondent pas"}
+                            </div>
+                        )}
+
+                        {/* Error */}
+                        {error && (
+                            <div className="px-3 py-2.5 rounded-lg bg-[var(--accent-error-bg)] border border-[var(--accent-error)] text-[var(--accent-error)] text-xs font-semibold">
+                                {error}
+                            </div>
+                        )}
+
+                        {/* Actions */}
+                        <div className="flex gap-3 pt-2">
+                            <button
+                                type="button"
+                                onClick={handleClose}
+                                className="apple-btn-secondary flex-1 justify-center"
+                            >
+                                Annuler
+                            </button>
+                            <button
+                                type="submit"
+                                disabled={isLoading || password !== confirm || password.length < 4}
+                                className="apple-btn-primary flex-1 justify-center disabled:opacity-40"
+                            >
+                                {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <KeyRound className="w-4 h-4" />}
+                                {isLoading ? "Mise à jour..." : "Valider"}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/features/admin/components/user-management.tsx b/src/features/admin/components/user-management.tsx
index 15bd7b9..04fa663 100644
--- a/src/features/admin/components/user-management.tsx
+++ b/src/features/admin/components/user-management.tsx
@@ -12,6 +12,7 @@ import {
     Key,
 } from "lucide-react";
 import { SuccessModal } from "@/components/shared/success-modal";
+import { ChangePasswordModal } from "@/components/shared/change-password-modal";
 
 export function UserManagement() {
     const [users, setUsers] = useState<any[]>([]);
@@ -21,6 +22,9 @@ export function UserManagement() {
     const [newPassword, setNewPassword] = useState("");
     const [newRole, setNewRole] = useState<"admin" | "user">("user");
     const [modal, setModal] = useState({ isOpen: false, title: "", message: "" });
+    const [pwdModal, setPwdModal] = useState<{ isOpen: boolean; userId: number; username: string }>({
+        isOpen: false, userId: 0, username: ""
+    });
 
     const fetchUsers = async () => {
         setLoading(true);
@@ -57,24 +61,20 @@ export function UserManagement() {
         setIsCreating(false);
     };
 
-    const handleUpdatePassword = async (id: number, username: string) => {
-        const pass = window.prompt(`Nouveau mot de passe pour ${username} :`);
-        if (!pass) return;
+    const handleUpdatePassword = (id: number, username: string) => {
+        setPwdModal({ isOpen: true, userId: id, username });
+    };
 
-        if (pass.length < 4) {
-            alert("Le mot de passe doit faire au moins 4 caractères.");
-            return;
-        }
-
-        const res = await updatePassword(id, pass);
+    const handleConfirmPassword = async (newPassword: string) => {
+        const res = await updatePassword(pwdModal.userId, newPassword);
         if (res.success) {
             setModal({
                 isOpen: true,
                 title: "Mot de passe mis à jour",
-                message: `Le mot de passe de ${username} a été modifié avec succès.`
+                message: `Le mot de passe de ${pwdModal.username} a été modifié avec succès.`
             });
         } else {
-            alert(res.error);
+            throw new Error(res.error ?? "Erreur lors de la mise à jour.");
         }
     };
 
@@ -91,8 +91,8 @@ export function UserManagement() {
     if (loading) {
         return (
             <div className="flex flex-col items-center justify-center p-12 space-y-4">
-                <Loader2 className="w-8 h-8 text-indigo-500 animate-spin" />
-                <p className="text-slate-400 text-sm">Chargement des utilisateurs...</p>
+                <Loader2 className="w-8 h-8 text-[var(--accent)] animate-spin" />
+                <p className="text-[var(--text-muted)] text-sm">Chargement des utilisateurs...</p>
             </div>
         );
     }
@@ -100,45 +100,45 @@ export function UserManagement() {
     return (
         <div className="space-y-8">
             {/* Formulaire de création */}
-            <div className="bg-slate-800/30 border border-slate-700/50 rounded-3xl p-8">
+            <div className="bg-[var(--bg-elevated)] border border-[var(--border)] rounded-2xl p-6">
                 <div className="flex items-center gap-4 mb-8">
-                    <div className="w-12 h-12 rounded-2xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
-                        <UserPlus className="w-6 h-6 text-indigo-400" />
+                    <div className="w-12 h-12 rounded-2xl bg-[var(--accent-bg)] border border-[var(--accent-border)] flex items-center justify-center">
+                        <UserPlus className="w-6 h-6 text-[var(--accent)]" />
                     </div>
                     <div>
-                        <h2 className="text-xl font-black text-slate-100 italic">Nouvel Utilisateur</h2>
-                        <p className="text-slate-500 text-sm">Ajoutez un collaborateur à la plateforme.</p>
+                        <h2 className="text-lg font-bold text-[var(--text-primary)]">Nouvel Utilisateur</h2>
+                        <p className="text-[var(--text-secondary)] text-xs">Ajoutez un collaborateur à la plateforme.</p>
                     </div>
                 </div>
 
                 <form onSubmit={handleCreate} className="grid grid-cols-1 md:grid-cols-4 gap-6 items-end">
                     <div className="space-y-2">
-                        <label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Utilisateur</label>
+                        <label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Utilisateur</label>
                         <input
                             required
                             value={newUsername}
                             onChange={(e) => setNewUsername(e.target.value)}
-                            className="w-full bg-slate-900/50 border border-slate-700/50 rounded-xl px-4 py-3 text-sm text-slate-100 outline-none focus:border-indigo-500 transition-colors"
+                            className="apple-input"
                             placeholder="ex: jean.dupont"
                         />
                     </div>
                     <div className="space-y-2">
-                        <label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Mot de passe</label>
+                        <label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Mot de passe</label>
                         <input
                             required
                             type="password"
                             value={newPassword}
                             onChange={(e) => setNewPassword(e.target.value)}
-                            className="w-full bg-slate-900/50 border border-slate-700/50 rounded-xl px-4 py-3 text-sm text-slate-100 outline-none focus:border-indigo-500 transition-colors"
+                            className="apple-input"
                             placeholder="••••••••"
                         />
                     </div>
                     <div className="space-y-2">
-                        <label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Rôle</label>
+                        <label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">Rôle</label>
                         <select
                             value={newRole}
                             onChange={(e) => setNewRole(e.target.value as any)}
-                            className="w-full bg-slate-900/50 border border-slate-700/50 rounded-xl px-4 py-3 text-sm text-slate-100 outline-none focus:border-indigo-500 transition-colors appearance-none"
+                            className="apple-input"
                         >
                             <option value="user">Utilisateur</option>
                             <option value="admin">Administrateur</option>
@@ -147,7 +147,7 @@ export function UserManagement() {
                     <button
                         type="submit"
                         disabled={isCreating}
-                        className="h-12 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm font-black rounded-xl transition-all active:scale-95 flex items-center justify-center gap-2 shadow-lg shadow-indigo-900/20"
+                        className="apple-btn-primary w-full justify-center"
                     >
                         {isCreating ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
                         Créer le compte
@@ -156,30 +156,30 @@ export function UserManagement() {
             </div>
 
             {/* Liste des utilisateurs */}
-            <div className="grid gap-4">
-                <h3 className="text-xs font-black uppercase tracking-widest text-slate-500 ml-1 mb-2 italic">Liste des comptes</h3>
+            <div className="grid gap-3">
+                <h3 className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1 mb-1">Liste des comptes</h3>
                 {users.map((u) => (
-                    <div key={u.id} className="flex items-center gap-6 p-4 rounded-2xl bg-slate-800/40 border border-slate-700/50 hover:border-slate-600 transition-all group">
-                        <div className="w-10 h-10 rounded-xl bg-slate-700/50 flex items-center justify-center shrink-0">
-                            {u.role === "admin" ? <Shield className="w-5 h-5 text-amber-400" /> : <User className="w-5 h-5 text-slate-400" />}
+                    <div key={u.id} className="flex items-center gap-5 p-4 rounded-xl bg-[var(--bg-surface)] border border-[var(--border)] hover:border-[var(--text-muted)] transition-all group">
+                        <div className="w-10 h-10 rounded-xl bg-[var(--bg-elevated)] flex items-center justify-center shrink-0 border border-[var(--border)]">
+                            {u.role === "admin" ? <Shield className="w-5 h-5 text-amber-500" /> : <User className="w-5 h-5 text-[var(--text-muted)]" />}
                         </div>
                         <div className="flex-1">
-                            <h4 className="text-sm font-bold text-slate-100">{u.username}</h4>
-                            <span className="text-[10px] uppercase font-black text-slate-500 tracking-wider">
+                            <h4 className="text-sm font-bold text-[var(--text-primary)]">{u.username}</h4>
+                            <span className="text-[10px] uppercase font-black text-[var(--text-muted)] tracking-wider">
                                 {u.role === "admin" ? "Administrateur" : "Utilisateur Standard"}
                             </span>
                         </div>
-                        <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <div className="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
                             <button
                                 onClick={() => handleUpdatePassword(u.id, u.username)}
-                                className="p-2.5 rounded-xl hover:bg-indigo-500/10 text-slate-500 hover:text-indigo-400 transition-colors"
+                                className="p-2.5 rounded-lg hover:bg-[var(--accent-bg)] text-[var(--text-muted)] hover:text-[var(--accent)] transition-colors"
                                 title="Changer le mot de passe"
                             >
                                 <Key className="w-4 h-4" />
                             </button>
                             <button
                                 onClick={() => handleDelete(u.id, u.username)}
-                                className="p-2.5 rounded-xl hover:bg-rose-500/10 text-slate-500 hover:text-rose-500 transition-colors"
+                                className="p-2.5 rounded-lg hover:bg-[var(--accent-error-bg)] text-[var(--text-muted)] hover:text-[var(--accent-error)] transition-colors"
                                 title="Supprimer"
                             >
                                 <Trash2 className="w-4 h-4" />
@@ -195,6 +195,13 @@ export function UserManagement() {
                 title={modal.title}
                 message={modal.message}
             />
+
+            <ChangePasswordModal
+                isOpen={pwdModal.isOpen}
+                onClose={() => setPwdModal({ ...pwdModal, isOpen: false })}
+                onConfirm={handleConfirmPassword}
+                username={pwdModal.username}
+            />
         </div>
     );
 }
diff --git a/src/features/auth/components/login-form.tsx b/src/features/auth/components/login-form.tsx
index 55d3aa8..bd12fe1 100644
--- a/src/features/auth/components/login-form.tsx
+++ b/src/features/auth/components/login-form.tsx
@@ -8,55 +8,55 @@ export function LoginForm() {
     const [error, action, isPending] = useActionState(loginAction, undefined);
 
     return (
-        <div className="w-full max-w-md p-8 rounded-[2.5rem] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-2xl shadow-slate-200/10 dark:shadow-none">
+        <div className="w-full max-w-md p-8 rounded-[2rem] bg-[var(--bg-surface)] border border-[var(--border)] shadow-lg" style={{ boxShadow: "var(--shadow-md)" }}>
             <div className="flex flex-col items-center mb-10 text-center">
-                <div className="w-16 h-16 rounded-2xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center mb-6">
-                    <ShieldCheck className="w-8 h-8 text-indigo-500" />
+                <div className="w-16 h-16 rounded-2xl bg-[var(--accent-bg)] border border-[var(--accent-border)] flex items-center justify-center mb-6">
+                    <ShieldCheck className="w-8 h-8 text-[var(--accent)]" />
                 </div>
-                <h1 className="text-3xl font-black text-slate-900 dark:text-white tracking-tight mb-2">
+                <h1 className="text-3xl font-black text-[var(--text-primary)] tracking-tight mb-2">
                     CollectFlow
                 </h1>
-                <p className="text-slate-500 dark:text-slate-400 text-sm font-medium">
+                <p className="text-[var(--text-secondary)] text-sm font-medium">
                     Connectez-vous pour accéder à votre espace d&apos;arbitrage.
                 </p>
             </div>
 
             <form action={action} className="space-y-6">
                 <div className="space-y-2">
-                    <label className="text-xs font-black uppercase tracking-widest text-slate-400 ml-1">
+                    <label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">
                         Utilisateur
                     </label>
                     <div className="relative group">
-                        <User className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-indigo-500 transition-colors" />
+                        <User className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-muted)] group-focus-within:text-[var(--accent)] transition-colors" />
                         <input
                             name="username"
                             type="text"
                             required
                             placeholder="admin"
-                            className="w-full pl-12 pr-4 py-4 rounded-2xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-800 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all text-slate-900 dark:text-white font-medium"
+                            className="w-full pl-12 pr-4 py-4 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)] focus:border-[var(--accent)] outline-none transition-all text-[var(--text-primary)] font-medium"
                         />
                     </div>
                 </div>
 
                 <div className="space-y-2">
-                    <label className="text-xs font-black uppercase tracking-widest text-slate-400 ml-1">
+                    <label className="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] ml-1">
                         Mot de passe
                     </label>
                     <div className="relative group">
-                        <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-indigo-500 transition-colors" />
+                        <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-muted)] group-focus-within:text-[var(--accent)] transition-colors" />
                         <input
                             name="password"
                             type="password"
                             required
                             placeholder="••••••••"
-                            className="w-full pl-12 pr-4 py-4 rounded-2xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-800 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all text-slate-900 dark:text-white font-medium"
+                            className="w-full pl-12 pr-4 py-4 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)] focus:border-[var(--accent)] outline-none transition-all text-[var(--text-primary)] font-medium"
                         />
                     </div>
                 </div>
 
                 {error && (
-                    <div className="p-4 rounded-2xl bg-rose-500/10 border border-rose-500/20 text-rose-500 text-xs font-bold flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
-                        <div className="w-1.5 h-1.5 rounded-full bg-rose-500 shrink-0" />
+                    <div className="p-4 rounded-xl bg-[var(--accent-error-bg)] border border-[var(--accent-error)] text-[var(--accent-error)] text-xs font-bold flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
+                        <div className="w-1.5 h-1.5 rounded-full bg-[var(--accent-error)] shrink-0" />
                         {error}
                     </div>
                 )}
@@ -64,7 +64,8 @@ export function LoginForm() {
                 <button
                     type="submit"
                     disabled={isPending}
-                    className="w-full py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-black transition-all active:scale-[0.98] shadow-lg shadow-indigo-600/20 flex items-center justify-center gap-2 group"
+                    className="w-full py-4 rounded-xl bg-[var(--accent)] hover:opacity-90 disabled:opacity-50 text-white font-black transition-all active:scale-[0.98] shadow-lg flex items-center justify-center gap-2 group"
+                    style={{ background: "var(--accent)" }}
                 >
                     {isPending ? (
                         <>
@@ -77,8 +78,8 @@ export function LoginForm() {
                 </button>
             </form>
 
-            <div className="mt-8 text-center border-t border-slate-100 dark:border-slate-800 pt-8">
-                <p className="text-[10px] text-slate-400 uppercase font-black tracking-widest leading-relaxed">
+            <div className="mt-8 text-center border-t border-[var(--border)] pt-8">
+                <p className="text-[10px] text-[var(--text-muted)] uppercase font-black tracking-widest leading-relaxed">
                     Plateforme d&apos;Arbitrage Magasin<br />
                     Propulsée par l&apos;Intelligence Artificielle
                 </p>