src/components/auth/LocalLoginForm.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Button } from '@/components/ui/Button';
+import { Input } from '../ui/Input';
 
 interface LocalLoginFormProps {
   onSubmit: (email: string, pass: string) => void;
@@ -20,10 +21,9 @@ export const LocalLoginForm: React.FC<LocalLoginFormProps> = ({ onSubmit, isLoad
       <div>
         <label htmlFor="email" className="block text-sm font-medium text-slate-700">Identifiant institutionnel</label>
         <div className="mt-1">
-          <input 
+          <Input 
             id="email" type="email" required placeholder="direction@client.com"
             value={email} onChange={(e) => setEmail(e.target.value)}
-            className="block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-900 focus:ring-blue-900 sm:text-sm" 
           />
         </div>
       </div>
@@ -31,10 +31,9 @@ export const LocalLoginForm: React.FC<LocalLoginFormProps> = ({ onSubmit, isLoad
       <div>
         <label htmlFor="password" className="block text-sm font-medium text-slate-700">Mot de passe</label>
         <div className="mt-1">
-          <input 
+          <Input 
             id="password" type="password" required placeholder="••••••••••••"
-            value={password} onChange={(e) => setPassword(e.target.value)}
+            value={password} onChange={(e) => setPassword(e.target.value)} 
-            className="block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-900 focus:ring-blue-900 sm:text-sm" 
           />
         </div>
       </div>

src/components/ui/Badge.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { cn } from '@/utils/utils';
+
+interface BadgeProps {
+    className?: string;
+    name: string
+}
+
+export const StatusBadge: React.FC<BadgeProps> = ({ className, name }) => {
+
+    return (
+        <div
+            className={cn(
+                "px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors min-w-fit max-h-fit",
+                className
+            )}
+        >
+            {name}
+        </div>
+    );
+};
+
+export default StatusBadge;

src/components/ui/Card.tsx

@@ -43,7 +43,7 @@ export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<
       ref={ref}
       className={cn(
         // Séparation discrète (bordure fine plutôt qu'ombre inset, pour rester léger)
-        "px-6 py-5 flex flex-col space-y-1.5 border-b border-black/5 dark:border-white/5",
+        "px-6 py-5 flex flex-col space-y-1.5 border-b border-black/5 dark:border-white/5 transition-all duration-300 ease-in-out",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("p-6 flex-1", className)}
+      className={cn("p-6 flex-1 transition-all duration-300 ease-in-out", className)}
       {...props}
     />
   )

src/components/ui/LogoGise.tsx

@@ -0,0 +1,20 @@
+export function LogoGise(){
+    return(
+        <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="flex justify-center">
+          <div className="h-12 w-12 bg-blue-900 rounded-lg flex items-center justify-center shadow-sm border border-blue-800">
+            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+          </div>
+        </div>
+        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-slate-900">
+          AEGIS <span className="font-light text-slate-500">by GISE</span>
+        </h2>
+        <p className="mt-2 text-center text-sm text-slate-500 uppercase tracking-widest font-semibold">
+          Accès restreint
+        </p>
+      </div>
+    );
+};
+export default LogoGise;

src/components/ui/StatusBadge.tsx

@@ -1,5 +1,3 @@
-// Fichier : src/components/ui/StatusBadge.tsx
-
 import React from 'react';
 import { cn } from '@/utils/utils';
 import type { AegisStatus } from '@/types/Status';

src/components/widgets/AccessWidget.tsx

@@ -0,0 +1,43 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import { Lock } from "lucide-react";
+
+export function AccessWidget() {
+
+    return (
+        <Card>
+            <CardHeader className="p-6 border-slate-100">
+                <h2 className="text-lg font-semibold text-slate-900 border-slate-100 flex items-center"><Lock className="w-5 h-5 mr-2 text-slate-400"></Lock>Sécurité de l'accès</h2>
+            </CardHeader>
+
+            <CardContent className="space-y-6">
+                {/* MFA Status */}
+                <div className="flex items-center justify-between">
+                    <div>
+                        <p className="text-sm font-medium text-slate-900">Authentification à double facteur (MFA)</p>
+                        <p className="text-xs text-slate-500 mt-1">Exigée par les politiques de sécurité GISE</p>
+                    </div>
+                    <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
+                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5"></span>
+                        Actif
+                    </span>
+                </div>
+
+                <div className="pt-4 border-t border-slate-100">
+                    <button className="text-sm font-medium text-blue-900 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition-colors duration-200 border border-blue-100">
+                        Générer de nouveaux codes de secours
+                    </button>
+                </div>
+
+                {/* Mot de passe */}
+                <div className="pt-4 border-t border-slate-100">
+                    <p className="text-sm font-medium text-slate-900 mb-2">Mot de passe institutionnel</p>
+                    <p className="text-xs text-slate-500 mb-4">Dernière modification : Il y a 43 jours</p>
+                    <button className="text-sm font-medium text-slate-700 hover:text-slate-900 bg-white hover:bg-slate-50 border border-slate-300 px-4 py-2 rounded-lg transition-colors duration-200 shadow-sm">
+                        Modifier le mot de passe
+                    </button>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
+export default AccessWidget;

src/components/widgets/InformationWidget.tsx

@@ -0,0 +1,37 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import { Building } from "lucide-react";
+
+export function InformationWidget() {
+    return (
+        <Card>
+            <CardHeader className="p-6 border-slate-100">
+                <h2 className="text-lg font-semibold text-slate-900 border-slate-100 flex items-center">
+                    <Building className="w-5 h-5 mr-2 text-slate-400" />
+                    Profil de l'Organisation
+                </h2>
+            </CardHeader>
+
+            <CardContent>
+                <dl className="space-y-4 text-sm">
+                    <div>
+                        <dt className="text-slate-500 font-medium">Entité Légale</dt>
+                        <dd className="mt-1 font-semibold text-slate-900">Cabinet Juridique Example & Associés</dd>
+                    </div>
+                    <div>
+                        <dt className="text-slate-500 font-medium">Administrateur du compte</dt>
+                        <dd className="mt-1 text-slate-900">Direction Générale (direction@example.com)</dd>
+                    </div>
+                    <div>
+                        <dt className="text-slate-500 font-medium">Niveau d'Infogérance (SLA)</dt>
+                        <dd className="mt-1 flex items-center">
+                            <span className="px-2 py-1 bg-blue-900 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">VIP PLATINUM</span>
+                            <span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
+                        </dd>
+                    </div>
+                </dl>
+            </CardContent>
+        </Card>
+    );
+}
+
+export default InformationWidget;

src/pages/AccountSettings.tsx

@@ -1,88 +1,26 @@
+import PageHeader from "@/components/ui/PageHeader";
+import AccessWidget from "@/components/widgets/AccessWidget";
+import InformationWidget from "@/components/widgets/InformationWidget";
+
 export default function AccountSettings() {
   return (
-    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-900 selection:text-white">
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
-      
+
-      {/* Header */}
-      <header className="bg-white border-b border-slate-200 px-8 py-6">
-        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Paramètres du compte</h1>
-            <p className="text-sm text-slate-500 mt-1">Gestion de la sécurité et informations contractuelles</p>
-          </div>
-        </div>
-      </header>
 
       {/* Contenu Principal */}
-      <main className="max-w-7xl mx-auto px-8 py-8 space-y-8">
+      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
-        
+        {/* Header */}
+        <PageHeader
+          title="Paramètres du compte"
+          description="Gestion de la sécurité et informations contractuelles" />
+
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          
+
           {/* Colonne 1 : Sécurité */}
-          <div className="space-y-8">
+          <AccessWidget/>
-            <section className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
-              <h2 className="text-lg font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2 flex items-center">
-                <svg className="w-5 h-5 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
-                Sécurité de l'accès
-              </h2>
-              
-              <div className="space-y-6">
-                {/* MFA Status */}
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm font-medium text-slate-900">Authentification à double facteur (MFA)</p>
-                    <p className="text-xs text-slate-500 mt-1">Exigée par les politiques de sécurité GISE</p>
-                  </div>
-                  <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
-                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5"></span>
-                    Actif
-                  </span>
-                </div>
-
-                <div className="pt-4 border-t border-slate-100">
-                  <button className="text-sm font-medium text-blue-900 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition-colors duration-200 border border-blue-100">
-                    Générer de nouveaux codes de secours
-                  </button>
-                </div>
-
-                {/* Mot de passe */}
-                <div className="pt-4 border-t border-slate-100">
-                  <p className="text-sm font-medium text-slate-900 mb-2">Mot de passe institutionnel</p>
-                  <p className="text-xs text-slate-500 mb-4">Dernière modification : Il y a 43 jours</p>
-                  <button className="text-sm font-medium text-slate-700 hover:text-slate-900 bg-white hover:bg-slate-50 border border-slate-300 px-4 py-2 rounded-lg transition-colors duration-200 shadow-sm">
-                    Modifier le mot de passe
-                  </button>
-                </div>
-              </div>
-            </section>
-          </div>
 
           {/* Colonne 2 : Organisation & Contrat */}
-          <div className="space-y-8">
+          <InformationWidget/>
-            <section className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
-              <h2 className="text-lg font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2 flex items-center">
-                <svg className="w-5 h-5 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
-                Profil de l'Organisation
-              </h2>
-              
-              <dl className="space-y-4 text-sm">
-                <div>
-                  <dt className="text-slate-500 font-medium">Entité Légale</dt>
-                  <dd className="mt-1 font-semibold text-slate-900">Cabinet Juridique Example & Associés</dd>
-                </div>
-                <div>
-                  <dt className="text-slate-500 font-medium">Administrateur du compte</dt>
-                  <dd className="mt-1 text-slate-900">Direction Générale (direction@example.com)</dd>
-                </div>
-                <div>
-                  <dt className="text-slate-500 font-medium">Niveau d'Infogérance (SLA)</dt>
-                  <dd className="mt-1 flex items-center">
-                    <span className="px-2 py-1 bg-blue-900 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">VIP PLATINUM</span>
-                    <span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
-                  </dd>
-                </div>
-              </dl>
-            </section>
-          </div>
 
         </div>
 

src/pages/DocumentVault.tsx

@@ -17,21 +17,12 @@ export default function DocumentVault() {
         </PageHeader>
 
         {/* Barre de recherche (Visuelle) */}
-        <div className="mb-6 flex">
+        <Input
-          <div className="relative flex-1 max-w-lg">
+          type="text"
-            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+          placeholder="Rechercher un document, une facture..."
-              <svg className="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          value={searchTerm}
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          onChange={(e) => setSearchTerm(e.target.value)}
-              </svg>
+        />
-            </div>
-            <Input
-              type="text"
-              placeholder="Rechercher un document, une facture..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-          </div>
-        </div>
 
         {/* Liste des Documents (La Carte) */}
         <DocumentsWidget></DocumentsWidget>

src/pages/Login.tsx

@@ -2,42 +2,32 @@ import { useLoginFlow } from '@/hooks/useLoginFlow';
 import { LocalLoginForm } from '@/components/auth/LocalLoginForm';
 import { MfaForm } from '@/components/auth/MfaForm';
 import { Card, CardContent } from '@/components/ui/Card';
+import LogoGise from '@/components/ui/LogoGise';
+import { Button } from '@/components/ui/Button';
+import { GlobeLock } from 'lucide-react';
+import Badge from '@/components/ui/Badge';
 
 interface LoginProps {
   onLoginSuccess: () => void;
 }
 
 export default function Login({ onLoginSuccess }: LoginProps) {
-  const { 
+  const {
-    step, isLoading, error, mfaConfig, 
+    step, isLoading, error, mfaConfig,
-    loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa 
+    loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa
   } = useLoginFlow(onLoginSuccess);
 
   return (
-    <div className="min-h-screen bg-slate-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans selection:bg-blue-900 selection:text-white">
+    <div className="min-h-screen bg-[#e8e8e8] dark:bg-[#1e293b] flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans selection:bg-blue-900 selection:text-white">
-      
+
       {/* HEADER LOGO */}
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+      <LogoGise />
-        <div className="flex justify-center">
-          <div className="h-12 w-12 bg-blue-900 rounded-lg flex items-center justify-center shadow-sm border border-blue-800">
-            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-            </svg>
-          </div>
-        </div>
-        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-slate-900">
-          AEGIS <span className="font-light text-slate-500">by GISE</span>
-        </h2>
-        <p className="mt-2 text-center text-sm text-slate-500 uppercase tracking-widest font-semibold">
-          Accès restreint
-        </p>
-      </div>
 
       {/* BOÎTE CENTRALE DÉCLINÉE AVEC NOTRE OBJET CARD */}
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md justify-center flex">
-        <Card className="shadow-sm border-slate-200">
+        <Card>
           <CardContent className="p-6 sm:p-10">
-            
+
             {/* AFFICHAGE DES ERREURS GLOBALES */}
             {error && (
               <div className="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
@@ -47,32 +37,28 @@ export default function Login({ onLoginSuccess }: LoginProps) {
 
             {/* ROUTAGE INTERNE DES ÉTAPES */}
             {step === 1 ? (
-              <div className="space-y-6">
+              <div className="space-y-6 items-center">
-                <button
+                <Button
                   type="button"
                   onClick={loginWithZitadel}
                   disabled={isLoading}
-                  className="flex w-full justify-center items-center rounded-md border border-slate-300 bg-white py-2.5 px-4 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none transition-colors disabled:opacity-70 cursor-pointer"
+                  leftIcon={<GlobeLock className="w-5 h-5 mr-2 text-blue-900" />}>
-                >
-                  <svg className="w-5 h-5 mr-2 text-blue-900" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
-                  </svg>
                   {isLoading ? 'Connexion en cours...' : 'Connexion via GISE Identity'}
-                </button>
+                </Button>
 
                 <div className="relative">
                   <div className="absolute inset-0 flex items-center">
                     <div className="w-full border-t border-slate-200" />
                   </div>
                   <div className="relative flex justify-center text-sm">
-                    <span className="bg-white px-2 text-slate-400">Ou via vos identifiants locaux</span>
+                    <Badge name="Ou via authentification classique"></Badge>
                   </div>
                 </div>
 
                 <LocalLoginForm onSubmit={loginWithLocal} isLoading={isLoading} />
               </div>
             ) : (
-              <MfaForm 
+              <MfaForm
                 isFirstSetup={mfaConfig?.isFirstSetup || false}
                 qrUrl={mfaConfig?.qrUrl || ''}
                 isLoading={isLoading}