add useDocuments and load saved documents in DocumentsVault

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/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/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

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useDocuments } from '@/hooks/useDocuments';
+import { Button } from '../ui/Button';
+
+interface DocumentsWidgetProps {
+    onSelectDocument: (id: string) => void;
+}
+
+export function DocumentsWidget(){
+    const { documents } = useDocuments();
+
+    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="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+            <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">
+                    {documents.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="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.file.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.created.split(" ")[0]+" "+doc.created.split(" ")[1].split(":")[0]+":"+doc.created.split(" ")[1].split(":")[1]}
+                            </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>
+    );
+};
+
+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/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/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/DocumentVault.tsx

@@ -1,3 +1,6 @@
+import { Card } from '@/components/ui/Card';
+import PageHeader from '@/components/ui/PageHeader';
+import DocumentsWidget from '@/components/widgets/DocumentsWidget';
 import { useState } from 'react';
 
 // Données fictives pour le maquettage visuel
@@ -20,25 +23,14 @@ export default function DocumentVault() {
   };
 
   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">
@@ -59,61 +51,9 @@ export default function DocumentVault() {
         </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="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/ServiceDesk.tsx

@@ -7,8 +7,8 @@ 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 

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;

src/types/Document.ts

@@ -0,0 +1,7 @@
+export interface Document {
+  id: string;
+  title: string;
+  category: string;
+  file: File;
+  created: string;
+}