little changes to the ui

Reviewed-on: maximus/aegis#5

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+

src/App.css

@@ -1,184 +0,0 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}

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)} 
-            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/layout/Sidebar.tsx

@@ -4,6 +4,8 @@ import { Shield, ShieldCheck, HelpCircle, Lock, Settings, LogOut } from 'lucide-
 import { cn } from '@/utils/utils';
 import { Card } from '@/components/ui/Card';
 import { NEUMORPHISM } from '@/styles/Neumorphism';
+import { useTheme } from '@/hooks/useTheme';
+import { ThemeToggle } from '@ui/ThemeToggle';
 
 interface SidebarProps {
   onLogout: () => void;
@@ -21,20 +23,21 @@ const NAVIGATION_ITEMS = [
 
 
 export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
+  const { isDark, toggleTheme } = useTheme();
   return (
     <Card className={cn("w-60 flex flex-col p-6 shrink-0", className)}>
       {/* 1. EN-TÊTE / LOGO */}
       <div className="flex items-center gap-4 mb-10 px-2">
         {/* Petit badge logo avec effet creusé */}
         <div className={cn(
-          "w-12 h-12 rounded-2xl flex items-center justify-center bg-[#e8e8e8] dark:bg-[#1e293b]",
+          "w-12 h-12 rounded-2xl flex items-center justify-center bg-[#e8e8e8] dark:bg-[#1e293b] transition-all duration-300 ease-in-out",
           "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]"
         )}>
-          <Shield className="w-6 h-6 text-blue-600 dark:text-blue-500" />
+          <Shield className="w-6 h-6 text-blue-600 dark:text-blue-500 transition-all duration-300 ease-in-out" />
         </div>
         <div>
-          <h1 className="text-2xl font-black tracking-widest text-slate-800 dark:text-white leading-none">AEGIS</h1>
+          <h1 className="text-2xl font-black tracking-widest text-slate-800 dark:text-white leading-none transition-all duration-300 ease-in-out">AEGIS</h1>
-          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">by GISE</span>
+          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all duration-300 ease-in-out">by GISE</span>
         </div>
       </div>
 
@@ -52,7 +55,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
                   "w-full flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-300 ease-in-out cursor-pointer",
                   "bg-[#e8e8e8] dark:bg-[#1e293b]",
                   isActive
-                    ? cn(NEUMORPHISM.insetLight, NEUMORPHISM.insetDark, "!text-blue-600 dark:!text-blue-400 font-black")
+                    ? cn(NEUMORPHISM.insetLight, NEUMORPHISM.insetDark, "text-blue-600! dark:text-blue-400! font-black")
                     : cn(NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow, "text-slate-500 dark:text-slate-400 font-bold hover:text-slate-700 dark:hover:text-slate-200")
                 )
               }
@@ -74,6 +77,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
         })}
       </nav>
 
+      <ThemeToggle isDark={isDark} toggleTheme={toggleTheme} />
       {/* 3. ZONE DE DÉCONNEXION */}
       <div className="pt-6 mt-6 border-t border-white/40 dark:border-slate-800/50">
         <button

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

@@ -12,7 +12,7 @@ import { NEUMORPHISM } from '@/styles/Neumorphism';
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   // 'raised'  : relief neumorphique complet — dashboards, widgets isolés, peu nombreux à l'écran.
   // 'flat'    : bordure fine, sans ombre — listes/tables denses (perf + lisibilité).
-  variant?: 'raised' | 'flat'|'digged';
+  variant?: 'raised' | 'flat'|'digged'|'prophunt';
 }
 
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(
@@ -21,11 +21,12 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
       ref={ref}
       className={cn(
         // Style de base
-        "rounded-3xl border-none transition-[background-color,box-shadow] duration-300 ease-in-out flex flex-col overflow-hidden",
+        "rounded-3xl border-none transition-all duration-300 ease-in-out flex flex-col",
         "bg-[#e8e8e8] dark:bg-[#1e293b]",
         // Relief neumorphique (par défaut)
         variant === 'raised' && [NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow],
         variant === 'digged' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight],
+        variant === 'prophunt' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight,NEUMORPHISM.lightShadowHover,NEUMORPHISM.darkShadowHover],
         // Variante plate : pas d'ombre, juste une bordure discrète — pour tables/listes denses
         variant === 'flat' && "border border-black/5 dark:border-white/10",
         className
@@ -42,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-black/5 dark:border-white/5 transition-all duration-300",
         className
       )}
       {...props}
@@ -55,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/DocumentObject.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Download } from 'lucide-react';
+import { cn } from '@/utils/utils';
+import type { Document } from '@/types/Document';
+import { Button } from './Button';
+import { useDocumentDownload } from '@/hooks/useDocumentDownload';
+
+interface DocumentObjectProps {
+    doc: Document;
+}
+
+export const DocumentObject: React.FC<DocumentObjectProps> = ({ doc }) => {
+    // 2. On initialise le Hook pour ce document spécifique
+    const { downloadFile, isDownloading } = useDocumentDownload();
+
+    const getCategoryBadge = (category: string) => {
+        switch (category) {
+            case 'Audit': return 'bg-purple-50 text-purple-700 border-purple-200';
+            case 'Facture': return 'bg-slate-100 text-slate-700 border-slate-200';
+            case 'Rapport de conformité': return 'bg-emerald-50 text-emerald-700 border-emerald-200';
+            default: return 'bg-blue-50 text-blue-700 border-blue-200';
+        }
+    };
+
+    return (
+        <tr key={doc.id} className={cn('hover:bg-amber-50 hover:dark:bg-slate-600 cursor-default transition-all duration-300')}>
+            <td className="px-6 py-4 whitespace-nowrap">
+                <div className="flex items-center">
+                    <svg className="shrink-0 h-6 w-6 text-slate-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                    <div>
+                        <div className="text-sm font-medium text-slate-900 dark:text-slate-100">{doc.title}</div>
+                        <div className="text-xs text-slate-500 dark:text-slate-400">{doc.file} • PDF</div>
+                    </div>
+                </div>
+            </td>
+            <td className="px-6 py-4 whitespace-nowrap">
+                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getCategoryBadge(doc.category)}`}>
+                    {doc.category}
+                </span>
+            </td>
+            <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500 dark:text-slate-400">
+                {/* Petit conseil d'optimisation : utiliser une fonction date pour éviter les crashs si doc.created est mal formaté */}
+                {doc.created ? `${doc.created.split(" ")[0]} ${doc.created.split(" ")[1]?.substring(0,5)}` : 'N/A'}
+            </td>
+            <td className="px-6 py-4 items-center">
+                {/* 3. On relie le bouton à l'état et à la fonction du Hook */}
+                <Button 
+                    className="text-blue-900 dark:text-blue-400 hover:text-blue-700 px-3 py-1.5 flex ml-auto" 
+                    size='sm'
+                    leftIcon={<Download className="w-4 h-4" />}
+                    onClick={() => downloadFile(doc)}
+                    isLoading={isDownloading} // Si votre composant Button supporte cette prop !
+                    disabled={isDownloading}
+                > 
+                    {isDownloading ? 'Téléchargement...' : 'Télécharger'}
+                </Button>
+            </td>
+        </tr>
+    );
+};

src/components/ui/Input.tsx

@@ -57,7 +57,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
               "bg-[#e8e8e8] dark:bg-[#1e293b]",
               "text-slate-800 dark:text-slate-100 font-medium placeholder:text-slate-400 dark:placeholder:text-slate-500",
               
-              // 🎯 Utilisation directe de tes constantes Neumorphic creusées
+              // Utilisation directe de tes constantes Neumorphic creusées
               NEUMORPHISM.insetLight,
               NEUMORPHISM.insetDark,
 

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/ServiceObject.tsx

@@ -9,7 +9,7 @@ interface ServiceObjectProps {
 
 export const ServiceObject: React.FC<ServiceObjectProps> = ({ contract }) => {
   return (
-    <Card variant= 'digged' className="p-4 rounded-lg border border-slate-100 flex flex-col">
+    <Card variant= 'prophunt' className="p-4 flex flex-col cursor-pointer">
       <div className='flex flex-row justify-between'>
         <h3 className="text-sm font-medium text-slate-900">{contract.service_name}</h3>
         {/* Fonctionne instantanément avec 'Actif', 'En déploiement', 'Suspendu' */}

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/ui/ThemeToggle.tsx

@@ -0,0 +1,52 @@
+import { Sun, Moon } from "lucide-react";
+import { cn } from "@utils/utils";
+
+interface ThemeToggleProps {
+  isDark: boolean;
+  toggleTheme: () => void;
+}
+
+export function ThemeToggle({ isDark, toggleTheme }: ThemeToggleProps) {
+  
+  const lightInset = "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]";
+  const darkInset = "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]";
+  
+  const lightExtrude = "shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff]";
+  const darkExtrude = "dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]";
+
+  return (
+    <button 
+      onClick={toggleTheme}
+      // 1. On ajoute la transition globale sur le fond du bouton principal
+      className="group relative flex items-center w-20 h-10 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] outline-none cursor-pointer shrink-0 transition-all duration-300 ease-in-out"
+      aria-label="Basculer le thème"
+    >
+      {/* 2. Le Rail : On s'assure qu'il est bien à 300ms ease-in-out */}
+      <div className={cn(
+        "absolute inset-0 rounded-full transition-all duration-300 ease-in-out",
+        lightInset, darkInset
+      )}></div>
+
+      {/* 3. La Bille : On remplace 'transition-transform duration-500' par la transition globale */}
+      <div className={cn(
+        "absolute left-1 w-8 h-8 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] z-10 flex items-center justify-center",
+        "transition-all duration-300 ease-in-out", // <-- LA CORRECTION EST ICI
+        lightExtrude, darkExtrude,
+        isDark ? "translate-x-10" : "translate-x-0"
+      )}>
+        
+        {/* 4. Les icônes : On les passe aussi à 300ms pour que la rotation suive le mouvement */}
+        <Sun className={cn(
+          "absolute w-4 h-4 text-amber-500 transition-all duration-300 ease-in-out",
+          isDark ? "opacity-0 rotate-90 scale-50" : "opacity-100 rotate-0 scale-100"
+        )} strokeWidth={2.5} />
+        
+        <Moon className={cn(
+          "absolute w-4 h-4 text-indigo-400 transition-all duration-300 ease-in-out",
+          isDark ? "opacity-100 rotate-0 scale-100" : "opacity-0 -rotate-90 scale-50"
+        )} strokeWidth={2.5} />
+        
+      </div>
+    </button>
+  );
+}

src/components/ui/TicketRow.tsx

@@ -11,7 +11,7 @@ export const TicketRow: React.FC<TicketRowProps> = ({ ticket, onClick }) => {
   return (
     <div 
       onClick={() => onClick(ticket.id)}
-      className="p-6 flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer group"
+      className="p-6 flex items-center justify-between hover:bg-amber-50 transition-colors"
     >
       <div className="space-y-1">
         <div className="flex items-center space-x-3">

src/components/ui/UptimeObject.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { InfrastructureNode } from '@/types/InfrastructureNode';
 import { StatusBadge } from '@ui/StatusBadge';
+import { cn } from '@/utils/utils';
 
 interface UptimeObjectProps {
   node: InfrastructureNode;
@@ -9,24 +10,25 @@ interface UptimeObjectProps {
 export const UptimeObject: React.FC<UptimeObjectProps> = ({ node }) => {
   return (
     // La "key" a été retirée d'ici, elle sera gérée par le parent
-    <div className="py-4 flex items-center justify-between first:pt-0 last:pb-0">
+    <tr className={cn(
+      "hover:bg-amber-50 dark:hover:bg-slate-900 cursor-pointer transition-all duration-300 ease-in-out",
+    )}>
 
       {/* Infos Serveur */}
-      <div>
+      <td className='p-2'>
-        <p className="font-medium text-slate-900">{node.label}</p>
+        <p className="font-medium text-slate-900 dark:text-slate-400 transition-all duration-300 ease-in-out">{node.label}</p>
         <p className="text-xs text-slate-500 mt-0.5">{node.type}</p>
-      </div>
+      </td>
 
       {/* Métriques & Badge */}
-      <div className="flex items-center space-x-6">
+      <td className='p-2'>
-        <div className="text-right">
         <p className="text-xs text-slate-500">SLA</p>
-          <p className="text-sm font-semibold text-slate-900">{node.uptime_sla}</p>
+        <p className="text-sm font-semibold text-slate-900 dark:text-slate-400 transition-all duration-300 ease-in-out">{node.uptime_sla}</p>
-        </div>
+      </td>
-        
+      <td className='text-right p-2'>
         <StatusBadge status={node.status} />
-      </div>
+      </td>
 
-    </div>
+    </tr>
   );
 };

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/BackupWidget.tsx

@@ -1,4 +1,6 @@
-import { Card, CardContent } from '@/components/ui/Card';
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import { Check } from 'lucide-react';
+import Badge from '@ui/Badge';
 
 interface BackupWidgetProps {
   onClick?: () => void;
@@ -8,25 +10,20 @@ export default function BackupWidget({ onClick }: BackupWidgetProps) {
   return (
     <Card
       onClick={onClick}
-      className="cursor-pointer hover:border-blue-300 hover:shadow-md transition-all group"
+      className="cursor-pointer transition-all duration-300 ease-in-out"
     >
-      <CardContent className="p-6">
+      <CardHeader>
-        <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold">Sauvegardes</h2>
-          <h2 className="text-lg font-semibold text-slate-900 group-hover:text-blue-900 transition-colors">Sauvegardes</h2>
+        <Badge className="max-w-fit min-w-fit" name="PRA Immuable">
-          <span className="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded font-medium border border-slate-200">
+        </Badge>
-            PRA Immuable
+      </CardHeader>
-          </span>
+      <CardContent className="p-6 flex flex-col h-full">
-        </div>
+        <Card variant="flat" className="rounded-lg p-4 border border-slate-100 mb-4">
-        
-        <div className="bg-slate-50 rounded-lg p-4 border border-slate-100 mb-4 group-hover:bg-blue-50/50 transition-colors">
           <p className="text-sm text-slate-500 mb-1">Dernier snapshot système</p>
           <p className="text-slate-900 font-medium">Aujourd'hui à 03:00 AM</p>
-        </div>
+        </Card>
-
         <div className="flex items-center text-emerald-600 text-sm font-medium">
-          <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <Check></Check>
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-          </svg>
           Intégrité validée avec succès
         </div>
       </CardContent>

src/components/widgets/DocumentsWidget.tsx

@@ -0,0 +1,36 @@
+import { useDocuments } from '@/hooks/useDocuments';
+import {DocumentObject} from '@ui/DocumentObject'
+import { Card } from '../ui/Card';
+
+export function DocumentsWidget(){
+    const { documents } = useDocuments();
+    return (
+        <Card className='pb-7'>
+            <table className="min-w-full divide-y divide-slate-200">
+                <thead>
+                    <tr>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Nom du fichier
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Catégorie
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Ajouté le
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Action
+                        </th>
+                    </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-200">
+                    {documents.map((doc) => (
+                        <DocumentObject doc={doc}></DocumentObject>
+                    ))}
+                </tbody>
+            </table>
+        </Card>
+    );
+};
+
+export default DocumentsWidget;

src/components/widgets/EvolutionOptionCard.tsx

@@ -19,7 +19,7 @@ export const EvolutionOptionCard: React.FC<EvolutionOptionCardProps> = ({
   return (
     <div
       className={cn(
-        "group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-200 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
+        "group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-300 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
         isSubmitting ? "border-blue-900 bg-blue-50/30" : "border-slate-200"
       )}
     >

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/components/widgets/NewTicketWidget.tsx

@@ -5,7 +5,6 @@ import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Select } from '@/components/ui/Select';
 import { Textarea } from '@/components/ui/Textarea';
-import { cn } from '@/utils/utils';
 
 interface NewTicketWidgetProps {
   onCancel: () => void;
@@ -22,6 +21,7 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
   const [affectedAsset, setAffectedAsset] = useState('');
   const [incidentTime, setIncidentTime] = useState('');
   const [description, setDescription] = useState('');
+  const [buttonVariant, setButtonVariant]=useState('primary');
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -39,7 +39,7 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
 
   return (
     <Card>
-      <CardHeader className="bg-slate-50 border-b border-slate-100">
+      <CardHeader>
         <h1 className="text-xl font-bold text-slate-900 tracking-tight">Ouvrir un nouveau ticket</h1>
         <p className="text-sm text-slate-500 mt-0.5">Qualification de votre requête ITSM</p>
       </CardHeader>
@@ -62,7 +62,7 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
               <Select
                 label="Type de demande"
                 value={category}
-                onChange={(e) => setCategory(e.target.value as any)}
+                onChange={(e) => {setCategory(e.target.value as any); setButtonVariant(e.target.value==="Incident Critique"?"danger":"primary")}}
                 options={[
                   { value: 'Incident Critique', label: 'Incident Critique (Panne, Dégradation)' },
                   { value: 'Évolution', label: 'Évolution (Ajout de ressources, Modification)' },
@@ -143,11 +143,7 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
             <Button
               type="submit"
               isLoading={isSubmitting}
-              className={cn(
+              variant={buttonVariant}
-                category === 'Incident Critique'
-                  ? "bg-red-600 hover:bg-red-700 focus:ring-red-600"
-                  : ""
-              )}
             >
               Soumettre le ticket
             </Button>

src/components/widgets/SecurityWidget.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent } from '@/components/ui/Card';
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
 
 interface SecurityWidgetProps {
   onClick?: () => void;
@@ -8,16 +8,16 @@ export default function SecurityWidget({ onClick }: SecurityWidgetProps) {
   return (
     <Card
       onClick={onClick}
-      className="cursor-pointer hover:border-blue-300 hover:shadow-md transition-all group"
+      className="cursor-pointer hover:border-blue-300 transition-all duration-300 ease-in-out"
     >
+      <CardHeader>
+        <h2 className="text-lg font-semibold transition-colors">Posture de Sécurité</h2>
+      </CardHeader>
       <CardContent className="p-6">
-        <h2 className="text-lg font-semibold text-slate-900 mb-4 group-hover:text-blue-900 transition-colors">Posture de Sécurité</h2>
-        
         <div className="flex items-baseline space-x-2 mb-4">
           <span className="text-3xl font-bold text-slate-900">1,432</span>
           <span className="text-sm text-slate-500">menaces bloquées (30j)</span>
         </div>
-
         <div className="space-y-3">
           <div className="flex justify-between items-center text-sm">
             <span className="text-slate-600">Bouclier Cloudflare WAF</span>

src/components/widgets/ServicesWidget.tsx

@@ -30,8 +30,8 @@ export default function ServicesWidget() {
           ))}
         </div>
 
-        <Button size="lg" onClick={() => navigate('/evolution-infrastructure')}>
+        <Button className ="text-green-600" size="lg" onClick={() => navigate('/evolution-infrastructure')}>
-          Demander une évolution du parc
+          Mise à niveau du Parc
         </Button>
  
       </CardContent>

src/components/widgets/SupportCtaWidget.tsx

@@ -8,14 +8,14 @@ export const SupportCtaWidget: React.FC = () => {
 
   return (
     <Card>
-      <CardContent className="p-6">
+      <CardContent className="p-6 rounded-xl">
         <h3 className="text-lg font-semibold mb-2">Centre de Support</h3>
-        <p className="text-blue-900 text-sm mb-4 leading-relaxed">
+        <p className="text-sm mb-4 leading-relaxed">
           Déclarez un incident critique ou demandez une évolution de votre infrastructure.
         </p>
         <Button
           onClick={() => navigate('/support')}
-          className="w-full text-blue-900"
+          className= "text-rose-500 w-full"
         >
           Ouvrir un ticket sécurisé
         </Button>

src/components/widgets/SupportFooterWidget.tsx

@@ -16,7 +16,7 @@ export const SupportFooterWidget: React.FC<SupportFooterWidgetProps> = ({
   const navigate = useNavigate();
 
   return (
-    <div className="mt-12 bg-slate-900 text-slate-300 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-sm">
+    <div className="mt-12 bg-slate-500 text-slate-300 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-sm">
       <div>
         <h4 className="text-sm font-bold text-white">{title}</h4>
         <p className="text-xs text-slate-400 mt-0.5">

src/components/widgets/TicketChatWidget.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import type { TicketMessage } from '@/types/Message';
-import { Card } from '@/components/ui/Card';
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { EmptyState } from '@/components/ui/EmptyState';
@@ -34,13 +34,13 @@ export const TicketChatWidget: React.FC<TicketChatWidgetProps> = ({
   };
 
   return (
-    <Card className="flex flex-col h-[500px] overflow-hidden shadow-sm">
+    <Card className="h-125">
-      <div className="p-4 border-b border-slate-100 bg-slate-50">
+      <CardHeader>
-        <h2 className="text-sm font-semibold text-slate-800">Échanges chiffrés avec l'ingénierie</h2>
+        <h2 className="text-sm font-semibold text-slate-800">Échanges chiffrés</h2>
-      </div>
+      </CardHeader>
 
       {/* Zone des messages */}
-      <div className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-hide bg-white">
+      <CardContent className="flex-1 overflow-y-auto p-6 space-y-6">
         {messages.length === 0 ? (
           <EmptyState message="Aucun message pour l'instant. Démarrez la conversation ci-dessous." />
         ) : (
@@ -48,10 +48,10 @@ export const TicketChatWidget: React.FC<TicketChatWidgetProps> = ({
             <MessageBubble key={msg.id} message={msg} currentUserId={currentUserId} />
           ))
         )}
-      </div>
+      </CardContent>
 
       {/* Zone de saisie avec notre composant UI */}
-      <form onSubmit={handleSubmit} className="p-4 border-t border-slate-100 bg-slate-50 flex items-start space-x-3">
+      <form onSubmit={handleSubmit} className="p-4 flex items-start space-x-3">
         <div className="flex-1">
           <Input
             value={newMessage}

src/components/widgets/TicketInfoWidget.tsx

@@ -10,7 +10,7 @@ interface TicketInfoWidgetProps {
 export const TicketInfoWidget: React.FC<TicketInfoWidgetProps> = ({ ticket }) => {
   return (
     <Card>
-      <CardHeader className="bg-slate-50 border-b border-slate-100 flex flex-col sm:flex-row sm:items-start justify-between gap-4">
+      <CardHeader>
         <div className="space-y-2">
           <div className="flex items-center space-x-3">
             <span className="text-xs font-bold uppercase tracking-wider px-2.5 py-1 bg-slate-200 text-slate-700 rounded-md">
@@ -24,10 +24,10 @@ export const TicketInfoWidget: React.FC<TicketInfoWidgetProps> = ({ ticket }) =>
           </p>
         </div>
         
-        <StatusBadge status={ticket.status} className="shrink-0" />
+        <StatusBadge status={ticket.status} className="shrink-0 max-w-fit" />
       </CardHeader>
       
-      <CardContent className="p-6 bg-white">
+      <CardContent>
         <p className="text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">
           Description du besoin :
         </p>

src/components/widgets/TicketsWidget.tsx

@@ -13,7 +13,7 @@ export const TicketsWidget: React.FC<TicketsWidgetProps> = ({ onSelectTicket })
   const { tickets, isLoading, error } = useTickets();
 
   return (
-    <Card>
+    <Card className='pb-7'>
       <CardContent className="p-0">
         {/* En-tête du Widget */}
         <div className="p-6 border-b border-slate-100">

src/components/widgets/UptimeWidget.tsx

@@ -10,7 +10,7 @@ export default function UptimeWidget() {
   return (
     <Card>
       <CardContent className="p-6 flex flex-col h-full">
-        <h2 className="text-lg font-semibold text-slate-900 mb-4">État des Services & SLA</h2>
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-400 mb-4 transition-all duration-300 ease-in-out">État des Services & SLA</h2>
 
         {/* 1. Gestion de l'erreur */}
         {error && (
@@ -26,13 +26,15 @@ export default function UptimeWidget() {
         )}
 
         {/* 4. Affichage des données */}
+        <table className="divide-y divide-slate-100 table-auto">
         {!isLoading && !error && nodes.length > 0 && (
-          <div className="divide-y divide-slate-100 flex-1">
+            <tbody className=''>
               {nodes.map((node) => (
                 <UptimeObject key={node.id} node={node} />
               ))}
-          </div>
+            </tbody>
         )}
+        </table>
       </CardContent>
     </Card>
   );

src/hooks/useDocumentDownload.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+// Importez votre instance PocketBase
+import {pb} from '@/services/pocketbase'; 
+import type { Document } from '@/types/Document';
+
+export function useDocumentDownload() {
+    const [isDownloading, setIsDownloading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const downloadFile = async (doc: Document) => {
+        try {
+            setIsDownloading(true);
+            setError(null);
+
+            // 1. Demander un jeton éphémère de téléchargement (Sécurité Max)
+            // Ce jeton autorise le navigateur à télécharger un fichier protégé sans exposer votre session
+            const fileToken = await pb.files.getToken();
+
+            // 2. Générer l'URL du fichier
+            // ATTENTION : Pour que getUrl fonctionne, 'doc' DOIT contenir doc.id ET doc.collectionId (ou doc.collectionName)
+            const fileUrl = pb.files.getUrl(doc, doc.file);
+            
+            // 3. Ajouter le jeton sécurisé et forcer le téléchargement (?download=1)
+            const downloadUrl = `${fileUrl}?token=${fileToken}&download=1`;
+
+            // 4. Créer un lien invisible pour forcer le navigateur à télécharger
+            const link = document.createElement("a");
+            link.href = downloadUrl;
+            // On s'assure d'avoir un nom de fichier par défaut si doc.title est vide
+            link.setAttribute("download", doc.title || "document_aegis.pdf"); 
+            
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+
+        } catch (err) {
+            console.error("Erreur lors du téléchargement sécurisé :", err);
+            setError("Accès refusé au coffre-fort documentaire.");
+        } finally {
+            setIsDownloading(false);
+        }
+    };
+
+    return { downloadFile, isDownloading, error };
+}

src/hooks/useDocuments.ts

@@ -0,0 +1,31 @@
+import { useState, useEffect, useCallback } from 'react';
+import { pb } from '@/services/pocketbase';
+import type { Document } from '@/types/Document';
+
+export const useDocuments = () => {
+  const [documents, setDocuments] = useState<Document[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchDocuments = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const records = await pb.collection('aegis_documents_vault').getFullList<Document>({
+        sort: '-created', // Du plus récent au plus ancien
+      });
+      setDocuments(records);
+    } catch (err) {
+      console.error("Erreur lors de la récupération des documents :", err);
+      setError("Impossible de charger les documents.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchDocuments();
+  }, [fetchDocuments]);
+
+  return { documents, isLoading, error, refetch: fetchDocuments };
+};

src/hooks/useTheme.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+export function useTheme() {
+  // Initialisation de l'état avec une fonction pour ne lire le localStorage qu'une seule fois
+  const [theme, setTheme] = useState<Theme>(() => {
+    // 1. On vérifie si un choix a déjà été sauvegardé
+    const storedTheme = localStorage.getItem('theme');
+    if (storedTheme === 'dark' || storedTheme === 'light') {
+      return storedTheme;
+    }
+    
+    // 2. Sinon, on vérifie la préférence système de l'utilisateur
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    
+    // 3. Par défaut, mode clair
+    return 'light';
+  });
+
+  // À chaque fois que 'theme' change, on met à jour le HTML et on sauvegarde
+  useEffect(() => {
+    const root = window.document.documentElement;
+    
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  // Fonction utilitaire pour basculer facilement
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
+  };
+
+  return { theme, isDark: theme === 'dark', toggleTheme, setTheme };
+}

src/index.css

@@ -4,6 +4,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* --- VOS UTILITAIRES PERSONNALISÉS --- */
 @layer utilities {
   .scrollbar-hide {

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

@@ -1,119 +1,32 @@
+import { Input } from '@/components/ui/Input';
+import PageHeader from '@/components/ui/PageHeader';
+import DocumentsWidget from '@/components/widgets/DocumentsWidget';
 import { useState } from 'react';
 
-// Données fictives pour le maquettage visuel
-const mockDocuments = [
-  { id: 'DOC-102', title: 'Rapport d\'Audit de Vulnérabilité Q2', category: 'Audit', date: '12 Juil. 2026', size: '2.4 MB', encrypted: true },
-  { id: 'DOC-101', title: 'Facture Infogérance - Juin 2026', category: 'Facture', date: '01 Juil. 2026', size: '1.1 MB', encrypted: true },
-  { id: 'DOC-095', title: 'Certificat de Conformité ISO 27001', category: 'Rapport de conformité', date: '15 Jan. 2026', size: '4.8 MB', encrypted: true }
-];
-
 export default function DocumentVault() {
   const [searchTerm, setSearchTerm] = useState('');
 
-  const getCategoryBadge = (category: string) => {
-    switch (category) {
-      case 'Audit': return 'bg-purple-50 text-purple-700 border-purple-200';
-      case 'Facture': return 'bg-slate-100 text-slate-700 border-slate-200';
-      case 'Rapport de conformité': return 'bg-emerald-50 text-emerald-700 border-emerald-200';
-      default: return 'bg-blue-50 text-blue-700 border-blue-200';
-    }
-  };
-
   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 du Coffre-Fort */}
-      <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">Coffre-Fort Documentaire</h1>
-            <p className="text-sm text-slate-500 mt-1 flex items-center">
-              <svg className="w-4 h-4 mr-1.5 text-emerald-500" 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>
-              Espace de stockage chiffré de bout en bout
-            </p>
-          </div>
-        </div>
-      </header>
 
       {/* Contenu Principal */}
-      <main className="max-w-7xl mx-auto px-8 py-8">
+      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
+        <PageHeader
+          title='Coffre-Fort Documentaire'
+          description='Espace de stockage chiffré de bout en bout'>
+        </PageHeader>
 
         {/* Barre de recherche (Visuelle) */}
-        <div className="mb-6 flex">
+        <Input
-          <div className="relative flex-1 max-w-lg">
-            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg className="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-              </svg>
-            </div>
-            <input
           type="text"
           placeholder="Rechercher un document, une facture..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
-              className="block w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 sm:text-sm shadow-sm"
         />
-          </div>
-        </div>
 
         {/* Liste des Documents (La Carte) */}
-        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+        <DocumentsWidget></DocumentsWidget>
-          <table className="min-w-full divide-y divide-slate-200">
-            <thead className="bg-slate-50">
-              <tr>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Nom du fichier
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Catégorie
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Ajouté le
-                </th>
-                <th scope="col" className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Action
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white divide-y divide-slate-200">
-              {mockDocuments.map((doc) => (
-                <tr key={doc.id} className="hover:bg-slate-50 transition-colors">
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <div className="flex items-center">
-                      <svg className="flex-shrink-0 h-6 w-6 text-slate-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                      </svg>
-                      <div>
-                        <div className="text-sm font-medium text-slate-900">{doc.title}</div>
-                        <div className="text-xs text-slate-500">{doc.size} • PDF</div>
-                      </div>
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getCategoryBadge(doc.category)}`}>
-                      {doc.category}
-                    </span>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                    {doc.date}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                    <button className="text-blue-900 hover:text-blue-700 bg-blue-50 hover:bg-blue-100 px-3 py-1.5 rounded flex items-center justify-end ml-auto transition-colors">
-                      <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                      </svg>
-                      Télécharger
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-
       </main>
-    </div>
+    </div >
   );
 }

src/pages/Login.tsx

@@ -2,6 +2,10 @@ 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;
@@ -14,28 +18,14 @@ export default function Login({ onLoginSuccess }: LoginProps) {
   } = 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 */}
@@ -47,25 +37,21 @@ 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>
 

src/pages/ServiceDesk.tsx

@@ -7,15 +7,15 @@ export default function ServiceDesk() {
   const navigate = useNavigate();
 
   return (
-    <div className="bg-slate-50 font-sans text-slate-900 relative min-h-[calc(100vh-4rem)]">
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
-      <main className="max-w-7xl mx-auto px-4 sm:px-8 py-8 space-y-6">
+      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
 
         {/* HEADER EXTRAIT */}
         <PageHeader 
           title="Centre de Support (Service Desk)"
           description="Canal de communication sécurisé avec vos experts GISE."
         >
-          <Button onClick={() => navigate('/support/new')}>
+          <Button className= "text-rose-500" onClick={() => navigate('/support/new')}>
             Ouvrir un ticket sécurisé
           </Button>
         </PageHeader>

src/styles/Neumorphism.ts

@@ -6,10 +6,20 @@ export const NEUMORPHISM = {
   lightShadow: "shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
   darkShadow: "dark:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
 
+  lightShadowHover: "hover:shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
+  darkShadowHover: "dark:hover:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
+
   // Ombres Neumorphic quand on clique (enfoncé)
   lightActive: "active:shadow-[4px_4px_12px_#c5c5c5,-4px_-4px_12px_#ffffff]",
   darkActive: "dark:active:shadow-[4px_4px_12px_#121926,-4px_-4px_12px_#2a3850]",
 
+
+  insetLightActive: "active:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
+  insetDarkActive: "dark:active:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+
+  insetLightHover: "hover:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
+  insetDarkHover: "dark:hover:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+
   sizeStyles: {
     sm: "px-5 py-2 text-sm rounded-md",
     md: "px-[1.7em] py-[0.7em] text-[18px] rounded-[0.5em]",
@@ -17,7 +27,7 @@ export const NEUMORPHISM = {
     icon: "p-3 rounded-lg",
   },
   // Ombres du bouton ACTIF (effet enfoncé/creusé "inset")
-    insetLight: "!shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
+  insetLight: "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
-    insetDark: "dark:!shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+  insetDark: "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
 
-  } as const;
+} as const;

src/types/Document.ts

@@ -0,0 +1,11 @@
+export interface Document {
+    id: string;
+    collectionId: string; // <-- OBLIGATOIRE pour pb.files.getUrl()
+    collectionName: string; // (ex: 'aegis_documents_vault')
+    created: string;
+    updated: string;
+    title: string;
+    file: string; // Le nom du fichier généré par PocketBase (ex: 'rapport_7b3a.pdf')
+    category: string;
+    company?: string; // L'ID du client (Relation)
+}