Merge pull request 'Test' (#33) from test into acc

Reviewed-on: maximus/aegis#33

.env.example

@@ -0,0 +1 @@
+VITE_PB_URL=

.gitea/workflows/deploy-environments.yml

@@ -0,0 +1,88 @@
+name: Déploiement AEGIS Portal
+
+on:
+  push:
+    branches:
+      - dev
+      - test
+      - acc
+      - master
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    env:
+      GIT_SSL_NO_VERIFY: "true"
+      NODE_TLS_REJECT_UNAUTHORIZED: "0"
+
+    steps:
+      - name: Patch DNS local pour Gitea Runner
+        run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
+
+      - name: Configuration de Git pour SSL
+        run: git config --global http.sslVerify false
+
+      - name: Récupération du code
+        uses: actions/checkout@v4
+      
+      - name: Configuration de Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      
+      - name: Activation de pnpm
+        run: corepack enable pnpm
+      
+      - name: Installation des dépendances
+        run: pnpm install --frozen-lockfile
+      
+      - name: Compilation de la Build
+        env:
+          VITE_APP_ENV: ${{ github.ref_name }}
+          VITE_PB_URL: ${{ secrets.PB_URL }}
+        run: pnpm run build
+      
+      - name: Installation de lftp
+        run: sudo apt-get update && sudo apt-get install -y lftp
+      
+      - name: Routage et Déploiement FTP
+        env: # 1. On charge tous les secrets de manière sécurisée
+          SERVER: ${{ secrets.FTP_SERVER }}
+          DEV_U: ${{ secrets.DEV_FTP_USER }}
+          DEV_P: ${{ secrets.DEV_FTP_PASSWORD }}
+          TEST_U: ${{ secrets.TEST_FTP_USER }}
+          TEST_P: ${{ secrets.TEST_FTP_PASSWORD }}
+          ACC_U: ${{ secrets.ACC_FTP_USER }}
+          ACC_P: ${{ secrets.ACC_FTP_PASSWORD }}
+          PROD_U: ${{ secrets.PROD_FTP_USER }}
+          PROD_P: ${{ secrets.PROD_FTP_PASSWORD }}
+          BRANCH: ${{ github.ref_name }}
+        run: |
+          # 2. On attribue les bons identifiants selon la branche
+          if [ "$BRANCH" == "master" ]; then
+            TARGET_USER=$PROD_U; TARGET_PASS=$PROD_P;
+          elif [ "$BRANCH" == "acc" ]; then
+            TARGET_USER=$ACC_U; TARGET_PASS=$ACC_P;
+          elif [ "$BRANCH" == "test" ]; then
+            TARGET_USER=$TEST_U; TARGET_PASS=$TEST_P;
+          else
+            TARGET_USER=$DEV_U; TARGET_PASS=$DEV_P;
+          fi
+          
+          echo "Déploiement de la branche [$BRANCH]"
+          
+          # 3. Exécution du script FTP
+          cat << EOF > script.lftp
+          set ftp:passive-mode true
+          set ftp:ssl-allow no
+          set ssl:verify-certificate no
+          set net:timeout 5
+          set net:max-retries 2
+          set dns:fatal-timeout 2
+          open -u "${TARGET_USER}","${TARGET_PASS}" "${SERVER}"
+          cd home/${TARGET_USER}
+          mirror -R --delete --verbose dist/ ./
+          quit
+          EOF
+          
+          lftp -f script.lftp

.gitea/workflows/deploy.yml

@@ -1,61 +0,0 @@
-name: Deploy Aegis Portal
-
-on:
-  push:
-    branches:
-      - master # Branche principale confirmée
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    
-    # 1. On désactive la vérification SSL pour tout le conteneur du job (Node.js et Git)
-    env:
-      GIT_SSL_NO_VERIFY: "true"
-      NODE_TLS_REJECT_UNAUTHORIZED: "0"
-
-    steps:
-      - name: Patch DNS local pour Gitea Runner
-        run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
-
-      # 2. On force l'exécutable Git interne à ignorer la vérification de l'autorité locale
-      - name: Configuration de Git pour SSL
-        run: git config --global http.sslVerify false
-
-      - name: Récupération du code
-        uses: actions/checkout@v4
-      
-      - name: Configuration de Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-      
-      - name: Installation des dépendances (React/Vite)
-        run: npm ci
-      
-      - name: Compilation de la Build (Aegis)
-        run: npm run build
-      
-      - name: Installation de lftp
-        run: sudo apt-get update && sudo apt-get install -y lftp
-      
-      - name: Déploiement FTP (10.10.40.12)
-        env:
-          FTP_USER: ${{ secrets.FTP_USER }}        # Le compte FTP enfermé dans aegis.gise.be
-          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
-          FTP_SERVER: ${{ secrets.FTP_SERVER }}    # Doit contenir : 10.10.40.12
-        run: |
-          cat << EOF > script.lftp
-          set ftp:passive-mode true
-          set ftp:ssl-allow no
-          set ssl:verify-certificate no
-          set net:timeout 5
-          set net:max-retries 2
-          set dns:fatal-timeout 2
-          open -u "${FTP_USER}","${FTP_PASSWORD}" "${FTP_SERVER}"
-          cd home/${FTP_USER}
-          mirror -R --delete --verbose dist/ ./
-          quit
-          EOF
-          
-          lftp -f script.lftp

.gitea/workflows/enforce-git-flow.yml

@@ -0,0 +1,40 @@
+name: Sécurité - Architecture Git-Flow
+
+on:
+  pull_request:
+    branches:
+      - dev
+      - test
+      - acc
+      - master
+
+jobs:
+  validate-flow:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Vérification du flux de promotion
+        run: |
+          TARGET_BRANCH="${{ github.base_ref }}"
+          SOURCE_BRANCH="${{ github.head_ref }}"
+          
+          echo "Tentative de promotion : $SOURCE_BRANCH ➔ $TARGET_BRANCH"
+          
+          # Règle 1 : Vers TEST (Doit venir de DEV)
+          if [ "$TARGET_BRANCH" == "test" ] && [ "$SOURCE_BRANCH" != "dev" ]; then
+            echo "ERREUR : L'environnement TEST ne peut recevoir que du code de DEV."
+            exit 1
+          fi
+          
+          # Règle 2 : Vers ACC (Doit venir de TEST)
+          if [ "$TARGET_BRANCH" == "acc" ] && [ "$SOURCE_BRANCH" != "test" ]; then
+            echo "ERREUR : L'environnement d'ACCEPTATION ne peut recevoir que du code de TEST."
+            exit 1
+          fi
+          
+          # Règle 3 : Vers PROD (Doit venir de ACC)
+          if [ "$TARGET_BRANCH" == "master" ] && [ "$SOURCE_BRANCH" != "acc" ]; then
+            echo "ERREUR : La PRODUCTION ne peut recevoir que du code validé en ACCEPTATION (acc)."
+            exit 1
+          fi
+          
+          echo "Flux réglementaire respecté ! Promotion autorisée."

.gitea/workflows/quality-checks.yml

@@ -0,0 +1,59 @@
+name: Contrôle Qualité & Sécurité (QA)
+
+on:
+  pull_request:
+    branches:
+      - dev
+      - test
+      - acc
+      - master
+
+jobs:
+  quality-gate:
+    name: qa-s-check
+    runs-on: ubuntu-latest
+    
+    env:
+      GIT_SSL_NO_VERIFY: "true"
+      NODE_TLS_REJECT_UNAUTHORIZED: "0"
+
+    steps:
+      - name: Patch DNS local pour Gitea Runner
+        run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
+
+      - name: Configuration de Git pour SSL
+        run: git config --global http.sslVerify false
+
+      - name: Récupération du code source
+        uses: actions/checkout@v4
+
+      - name: Configuration de Node.js (v22)
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Activation de pnpm
+        run: corepack enable pnpm
+
+      - name: Installation des dépendances
+        run: pnpm install --frozen-lockfile
+
+      # Étape 1 : ESLint (Syntaxe et conventions)
+      - name: Analyse Linter (ESLint)
+        run: pnpm run lint
+
+      # Étape 2 : Verification stricte des types TypeScript (sans émettre de fichiers)
+      - name: Verification des Types TypeScript
+        run: pnpm exec tsc --noEmit
+
+      # Étape 3 : Exécution des tests unitaires
+      - name: Tests Unitaires (Vitest)
+        run: pnpm run test -- --run
+
+      # Étape 4 : Audit des vulnérabilités npm (Niveau High/Critical)
+      - name: Audit de Sécurité des Dépendances
+        run: pnpm audit --audit-level=high
+
+      # Étape 5 : Validation de la compilation ViteJS
+      - name: Validation du Build de Production
+        run: pnpm run build

App.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('AEGIS Initial Test', () => {
+  it('devrait valider que 1 + 1 font 2', () => {
+    expect(1 + 1).toBe(2);
+  });
+});

package.json

@@ -7,34 +7,37 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.3.3",
     "@zitadel/react-auth": "^1.2.1",
     "clsx": "^2.1.1",
+    "lucide-react": "^1.28.0",
     "oidc-client-ts": "^3.5.0",
     "otpauth": "^9.5.1",
-    "pocketbase": "^0.27.0",
+    "pocketbase": "^0.27.1",
     "qrcode.react": "^4.2.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-router-dom": "^7.18.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.2",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@types/node": "^24.13.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
-    "eslint": "^10.6.0",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "eslint": "^10.8.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^17.7.0",
-    "typescript": "~6.0.2",
-    "typescript-eslint": "^8.62.0",
-    "vite": "^8.1.1"
+    "globals": "^17.9.0",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10"
   }
-}
+}

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+overrides:
+  react-router: "^6.30.4"
+  react-router-dom: "^6.30.4"

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

@@ -9,9 +9,11 @@ import TrustCenter from '@/pages/TrustCenter';
 import ServiceDesk from '@/pages/ServiceDesk';
 import DocumentVault from '@/pages/DocumentVault';
 import AccountSettings from '@/pages/AccountSettings';
-import { InfrastructureEvolution } from '@/pages/InfrastructureEvolution';
-import Analytics from '@/pages/Analytics';
-import Backups from '@/pages/Backups';
+import { InfrastructureEvolution } from '@/pages/trustcenter/InfrastructureEvolution';
+import Analytics from '@/pages/trustcenter/Analytics';
+import Backups from '@/pages/trustcenter/Backups';
+import NewTicket from '@/pages/servicedesk/NewTicket';
+import TicketDetail from '@/pages/servicedesk/TicketDetail';
 
 function App() {
   const [isAuthenticated, setIsAuthenticated] = useState(pb.authStore.isValid);
@@ -59,6 +61,8 @@ function App() {
         <Route path="/evolution-infrastructure" element={<InfrastructureEvolution />} />
         <Route path="/analytics" element={<Analytics />} />
         <Route path="/backups" element={<Backups />} />
+        <Route path="/support/new" element={<NewTicket />} />
+        <Route path="/support/tickets/:ticketId" element={<TicketDetail />} />
 
         {/* Sécurité : Si l'URL n'existe pas, on redirige vers le dashboard */}
         <Route path="*" element={<Navigate to="/dashboard" replace />} />

src/components/auth/LocalLoginForm.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '../ui/Input';
+
+interface LocalLoginFormProps {
+  onSubmit: (email: string, pass: string) => void;
+  isLoading: boolean;
+}
+
+export const LocalLoginForm: React.FC<LocalLoginFormProps> = ({ onSubmit, isLoading }) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(email, password);
+  };
+
+  return (
+    <form className="space-y-6" onSubmit={handleSubmit}>
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium text-slate-700">Identifiant institutionnel</label>
+        <div className="mt-1">
+          <Input 
+            id="email" type="email" required placeholder="direction@client.com"
+            value={email} onChange={(e) => setEmail(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="password" className="block text-sm font-medium text-slate-700">Mot de passe</label>
+        <div className="mt-1">
+          <Input 
+            id="password" type="password" required placeholder="••••••••••••"
+            value={password} onChange={(e) => setPassword(e.target.value)} 
+          />
+        </div>
+      </div>
+
+      <Button type="submit" isLoading={isLoading} className="w-full">
+        Authentification classique
+      </Button>
+    </form>
+  );
+};

src/components/auth/MfaForm.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { Button } from '@/components/ui/Button';
+
+interface MfaFormProps {
+  isFirstSetup: boolean;
+  qrUrl: string;
+  isLoading: boolean;
+  onVerify: (code: string) => void;
+  onCancel: () => void;
+}
+
+export const MfaForm: React.FC<MfaFormProps> = ({ isFirstSetup, qrUrl, isLoading, onVerify, onCancel }) => {
+  const [code, setCode] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onVerify(code);
+  };
+
+  return (
+    <form className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" onSubmit={handleSubmit}>
+      {isFirstSetup ? (
+        <div className="text-center mb-6">
+          <p className="text-sm font-medium text-slate-900">Configuration de la sécurité</p>
+          <p className="text-xs text-slate-500 mt-2 mb-4">Scannez ce QR Code avec Google Authenticator ou Authy.</p>
+          <div className="flex justify-center p-4 bg-white border border-slate-200 rounded-lg shadow-sm">
+            <QRCodeSVG value={qrUrl} size={150} />
+          </div>
+        </div>
+      ) : (
+        <div className="text-center mb-6">
+          <p className="text-sm font-medium text-slate-900">Validation à double facteur</p>
+          <p className="text-xs text-slate-500 mt-1">Saisissez le code généré par votre application d'authentification.</p>
+        </div>
+      )}
+      
+      <div>
+        <input 
+          type="text" required maxLength={6} placeholder="000000"
+          value={code} onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))} // Force les chiffres
+          className="block w-full rounded-md border border-slate-300 py-3 text-center text-2xl tracking-[0.5em] text-slate-900 font-mono shadow-sm focus:border-blue-900 focus:ring-blue-900" 
+        />
+      </div>
+      
+      <div className="flex space-x-3">
+        <Button type="button" variant="outline" onClick={onCancel} disabled={isLoading} className="w-1/3">
+          Annuler
+        </Button>
+        <Button type="submit" isLoading={isLoading} disabled={code.length !== 6} className="w-2/3 bg-emerald-600 hover:bg-emerald-700">
+          Déverrouiller
+        </Button>
+      </div>
+    </form>
+  );
+};

src/components/layout/Sidebar.tsx

@@ -1,56 +1,101 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { Shield, ShieldCheck, HelpCircle, Lock, Settings, LogOut } from 'lucide-react';
 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;
+  className?: string;
 }
 
+// Liste de tes liens réels avec leurs icônes associées
 const NAVIGATION_ITEMS = [
-  { name: 'Trust Center', path: '/dashboard' },
-  { name: 'Service Desk', path: '/support' },
-  { name: 'Coffre-fort', path: '/vault' },
-  { name: 'Paramètres', path: '/account' },
+  { name: 'Trust Center', path: '/dashboard', icon: ShieldCheck },
+  { name: 'Service Desk', path: '/support', icon: HelpCircle },
+  { name: 'Coffre-fort', path: '/vault', icon: Lock },
+  { name: 'Paramètres', path: '/account', icon: Settings },
 ];
 
-export const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
+
+
+export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
+  const { isDark, toggleTheme } = useTheme();
   return (
-    <aside className="w-64 bg-slate-900 flex flex-col shrink-0">
-      {/* En-tête / Logo */}
-      <div className="h-16 flex items-center px-6 border-b border-slate-800">
-        <span className="text-xl font-bold text-white tracking-widest">Aegis<span className="text-blue-500">.</span></span>
+    <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] 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 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 transition-all duration-300 ease-in-out">AEGIS</h1>
+          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all duration-300 ease-in-out">by GISE</span>
+        </div>
       </div>
 
-      {/* Menu de navigation URL-based */}
-      <nav className="flex-1 px-4 py-6 space-y-2">
-        {NAVIGATION_ITEMS.map((item) => (
-          <NavLink
-            key={item.path}
-            to={item.path}
-            className={({ isActive }) =>
-              cn(
-                "flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors duration-200",
-                isActive 
-                  ? "bg-blue-900/50 text-white border border-blue-800/50" 
-                  : "text-slate-400 hover:bg-slate-800 hover:text-slate-200 border border-transparent"
-              )
-            }
-          >
-            {item.name}
-          </NavLink>
-        ))}
+      {/* 2. NAVIGATION PRINCIPALE (Basée sur l'URL) */}
+      <nav className="flex flex-col gap-4 flex-1">
+        {NAVIGATION_ITEMS.map((item) => {
+          const Icon = item.icon;
+
+          return (
+            <NavLink
+              key={item.path}
+              to={item.path}
+              className={({ isActive }) =>
+                cn(
+                  "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.lightShadow, NEUMORPHISM.darkShadow, "text-slate-500 dark:text-slate-400 font-bold hover:text-slate-700 dark:hover:text-slate-200")
+                )
+              }
+            >
+              {({ isActive }) => (
+                <>
+                  <Icon
+                    className={cn(
+                      "w-5 h-5 transition-transform duration-300 ease-in-out shrink-0",
+                      isActive ? "scale-110" : "scale-100"
+                    )}
+                    strokeWidth={isActive ? 2.5 : 2}
+                  />
+                  <span className="text-sm">{item.name}</span>
+                </>
+              )}
+            </NavLink>
+          );
+        })}
       </nav>
 
-      {/* Zone de déconnexion */}
-      <div className="p-4 border-t border-slate-800">
+      <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
           onClick={onLogout}
-          className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-slate-400 hover:text-red-400 hover:bg-slate-800 rounded-lg transition-all cursor-pointer"
+          className={cn(
+            "w-full flex items-center justify-start gap-4 px-5 py-4 rounded-2xl cursor-pointer transition-all duration-300 ease-in-out",
+            "bg-[#e8e8e8] dark:bg-[#1e293b]",
+            NEUMORPHISM.lightShadow,
+            NEUMORPHISM.darkShadow,
+            "active:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:active:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+            "text-rose-500 dark:text-rose-400 font-bold"
+          )}
         >
-          Déconnexion
+          <LogOut className="w-5 h-5" />
+          <span className="text-sm font-bold">Déconnexion</span>
         </button>
       </div>
-    </aside>
+    </Card>
   );
 };
 

src/components/ui/BackButton.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, type ButtonProps } from '@/components/ui/Button';
+import { cn } from '@/utils/utils';
+
+export interface BackButtonProps extends Omit<ButtonProps, 'onClick'> {
+  /** Route explicite (ex: "/support"). Si omis, fait un retour arrière dans l'historique (-1) */
+  to?: string;
+  /** Texte par défaut du bouton */
+  label?: string;
+  /** Fonction personnalisée au clic */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const BackButton: React.FC<BackButtonProps> = ({
+  to,
+  label = "Retour",
+  onClick,
+  variant = "ghost", // Style par défaut : ultra discret sur la surface Neumorphic
+  size = "sm",
+  children,
+  className,
+  ...props
+}) => {
+  const navigate = useNavigate();
+
+  // Logique du clic (priorité : onClick perso > destination 'to' > retour historique)
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      onClick(e);
+    } else if (to) {
+      navigate(to);
+    } else {
+      navigate(-1);
+    }
+  };
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={handleClick}
+      leftIcon={
+        <svg 
+          className="w-4 h-4 transition-transform duration-200 group-hover:-translate-x-1" 
+          fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      }
+      className={cn("group", className)}
+      {...props}
+    >
+      {children || label}
+    </Button>
+  );
+};
+
+export default BackButton;

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

@@ -1,37 +1,89 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { cn } from '@/utils/utils';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'outline' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
+// Couleurs de texte pour chaque variante
+const variantStyles = {
+  primary: "text-[#090909] dark:text-white font-bold",
+  secondary: "text-slate-500 dark:text-slate-400 font-bold",
+  danger: "text-rose-600 dark:text-rose-400 font-bold",
+  success: "text-emerald-600 dark:text-emerald-400 font-bold",
+  outline: "text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700",
+  ghost: "text-slate-600 dark:text-slate-400 border-transparent shadow-none dark:shadow-none",
+};
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: keyof typeof variantStyles;
+  size?: keyof typeof NEUMORPHISM.sizeStyles;
   isLoading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
 }
 
-export const Button: React.FC<ButtonProps> = ({
-  children, variant = 'primary', size = 'md', isLoading, className, disabled, ...props
-}) => {
-  const baseStyles = "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
-  
-  const variants = {
-    primary: "bg-blue-900 text-white hover:bg-blue-800 focus:ring-blue-900 shadow-sm",
-    outline: "border border-slate-200 text-slate-900 hover:border-blue-900 hover:bg-blue-50 focus:ring-blue-900",
-    ghost: "text-slate-600 hover:text-slate-900 hover:bg-slate-100 focus:ring-slate-500",
-  };
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { 
+      className, 
+      variant = 'primary', 
+      size = 'md', 
+      isLoading = false, 
+      leftIcon, 
+      rightIcon, 
+      children, 
+      disabled, 
+      type = "button",
+      ...props 
+    }, 
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled || isLoading}
+        className={cn(
+          // Style de base & Neumorphism
+          "inline-flex items-center justify-center cursor-pointer outline-none transition-all duration-300 ease-in-out",
+          "bg-[#e8e8e8] dark:bg-[#1e293b]",
+          "border border-[#e8e8e8] dark:border-[#1e293b]",
+          "hover:border-white dark:hover:border-[#2a3850]",
+          NEUMORPHISM.lightShadow,
+          NEUMORPHISM.lightActive,
+          NEUMORPHISM.darkShadow,
+          NEUMORPHISM.darkActive,
+          "disabled:opacity-50 disabled:pointer-events-none",
+          
+          // Variantes & Tailles
+          variantStyles[variant],
+          NEUMORPHISM.sizeStyles[size],
+          className
+        )}
+        {...props}
+      >
+        {/* Spinner SVG si en chargement */}
+        {isLoading && (
+          <svg 
+            className="animate-spin -ml-1 mr-2 h-5 w-5 text-current" 
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none" 
+            viewBox="0 0 24 24"
+          >
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        )}
+        
+        {/* Icône de gauche (masquée si chargement) */}
+        {!isLoading && leftIcon && <span className="mr-2 shrink-0">{leftIcon}</span>}
+        
+        {/* Texte du bouton */}
+        <span className="truncate">{children}</span>
 
-  const sizes = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2 text-base",
-    lg: "w-full py-3 text-base",
-  };
+        {/* Icône de droite */}
+        {rightIcon && <span className="ml-2 shrink-0">{rightIcon}</span>}
+      </button>
+    );
+  }
+);
 
-  return (
-    <button
-      disabled={disabled || isLoading}
-      className={cn(baseStyles, variants[variant], sizes[size], (disabled || isLoading) && "opacity-50 cursor-not-allowed", className)}
-      {...props}
-    >
-      {isLoading && <span className="mr-2 w-4 h-4 rounded-full border-2 border-current border-b-transparent animate-spin" />}
-      {children}
-    </button>
-  );
-};
+Button.displayName = "Button";

src/components/ui/Card.tsx

@@ -1,11 +1,36 @@
 import React from 'react';
 import { cn } from '@/utils/utils';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
 
-export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+
+// IMPORTANT — contraste texte :
+// Le fond clair (#e8e8e8) est assez lumineux. Dans le contenu de la Card,
+// évite text-slate-400/500 en light mode (ratio WCAG insuffisant sur ce fond) :
+// utilise plutôt text-slate-600 (ou plus foncé) pour le texte secondaire en light mode.
+// Ex: className="text-slate-600 dark:text-slate-400"
+
+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'|'prophunt';
+}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = 'raised', ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden", className)}
+      className={cn(
+        // Style de base
+        "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
+      )}
       {...props}
     />
   )
@@ -16,7 +41,11 @@ export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("px-6 py-5 border-b border-slate-100 flex flex-col space-y-1.5", className)}
+      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 transition-all duration-300 ease-in-out",
+        className
+      )}
       {...props}
     />
   )
@@ -25,7 +54,11 @@ CardHeader.displayName = "CardHeader";
 
 export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 flex-1", className)} {...props} />
+    <div
+      ref={ref}
+      className={cn("p-6 flex-1 transition-all duration-300 ease-in-out", className)}
+      {...props}
+    />
   )
 );
 CardContent.displayName = "CardContent";

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

@@ -0,0 +1,98 @@
+import React, { forwardRef, useId } from 'react';
+import { cn } from '@/utils/utils';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label?: string;
+  error?: string;
+  size?: keyof typeof NEUMORPHISM.sizeStyles;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ 
+    className, 
+    label, 
+    error, 
+    id, 
+    size = 'md', 
+    leftIcon, 
+    rightIcon, 
+    required,
+    disabled,
+    ...props 
+  }, ref) => {
+    const autoId = useId();
+    const inputId = id || autoId;
+
+    return (
+      <div className="w-full flex flex-col gap-1.5">
+        {/* Label */}
+        {label && (
+          <label 
+            htmlFor={inputId} 
+            className="block text-sm font-bold text-slate-700 dark:text-slate-300"
+          >
+            {label} {required && <span className="text-rose-500 font-bold">*</span>}
+          </label>
+        )}
+        
+        <div className="relative flex items-center w-full">
+          {/* Icône à gauche */}
+          {leftIcon && (
+            <span className="absolute left-4 text-slate-400 dark:text-slate-500 pointer-events-none flex items-center justify-center">
+              {leftIcon}
+            </span>
+          )}
+
+          {/* Champ HTML avec les ombres creusées centralisées */}
+          <input
+            id={inputId}
+            ref={ref}
+            disabled={disabled}
+            className={cn(
+              // Base & Couleurs de fond
+              "w-full transition-all duration-300 ease-in-out outline-none border border-transparent",
+              "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
+              NEUMORPHISM.insetLight,
+              NEUMORPHISM.insetDark,
+
+              // Focus & État désactivé
+              "focus:border-blue-500/40 dark:focus:border-blue-400/40",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+
+              // Tailles & Marges d'icônes
+              NEUMORPHISM.sizeStyles[size],
+              leftIcon && "pl-11",
+              rightIcon && "pr-11",
+
+              // Style en cas d'erreur
+              error && "border-rose-500 focus:border-rose-500 text-rose-600 dark:text-rose-400",
+              
+              className
+            )}
+            {...props}
+          />
+
+          {/* Icône à droite */}
+          {rightIcon && (
+            <span className="absolute right-4 text-slate-400 dark:text-slate-500 pointer-events-none flex items-center justify-center">
+              {rightIcon}
+            </span>
+          )}
+        </div>
+
+        {/* Message d'erreur */}
+        {error && (
+          <p className="text-xs font-semibold text-rose-500 dark:text-rose-400">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { cn } from '@/utils/utils';
+import type { TicketMessage } from '@/types/Message';
+
+interface MessageBubbleProps {
+  message: TicketMessage;
+  currentUserId?: string;
+}
+
+export const MessageBubble: React.FC<MessageBubbleProps> = ({ message, currentUserId }) => {
+  const isMyMessage = message.expand?.author?.id === currentUserId;
+  const authorName = message.expand?.author?.name || message.expand?.author?.email || 'Expert GISE';
+  const time = new Date(message.created).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+
+  return (
+    <div className={cn("flex flex-col", isMyMessage ? "items-end" : "items-start")}>
+      <div className="flex items-center space-x-2 mb-1 px-1">
+        <span className="text-xs font-medium text-slate-600">{authorName}</span>
+        <span className="text-[10px] text-slate-400">{time}</span>
+      </div>
+      
+      <div 
+        className={cn(
+          "max-w-[85%] rounded-2xl px-4 py-3 text-sm shadow-sm",
+          isMyMessage 
+            ? "bg-blue-900 text-white rounded-br-none" 
+            : "bg-slate-100 text-slate-800 rounded-bl-none border border-slate-200/60"
+        )}
+      >
+        {message.content}
+      </div>
+    </div>
+  );
+};

src/components/ui/PageHeader.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Card, CardContent } from '@/components/ui/Card';
+
+interface PageHeaderProps {
+  title: string;
+  description: string;
+  /** Le contenu optionnel à afficher sur la droite (Bouton, Badge, etc.) */
+  children?: React.ReactNode; 
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({ title, description, children }) => {
+  return (
+    <Card>
+      <CardContent className="p-6 sm:px-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 tracking-tight">
+            {title}
+          </h1>
+          <p className="text-sm text-slate-500 mt-1">
+            {description}
+          </p>
+        </div>
+        
+        {/* S'il y a des actions passées en "children", on les affiche ici */}
+        {children && (
+          <div className="shrink-0">
+            {children}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default PageHeader;

src/components/ui/Select.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef, useId } from 'react';
+import { cn } from '@/utils/utils';
+
+export interface SelectOption {
+  value: string | number;
+  label: string;
+}
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+  options: SelectOption[];
+  placeholder?: string; // Optionnel : ajoute un choix vide par défaut
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, label, error, id, options, placeholder, ...props }, ref) => {
+    const autoId = useId();
+    const selectId = id || autoId;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={selectId} className="block text-sm font-medium text-slate-700 mb-1.5">
+            {label} {props.required && <span className="text-blue-900 font-bold">*</span>}
+          </label>
+        )}
+        <select
+          id={selectId}
+          ref={ref}
+          className={cn(
+            "flex w-full rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500 shadow-sm transition-colors cursor-pointer",
+            error && "border-red-500 focus:ring-red-500 focus:border-red-500",
+            className
+          )}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled hidden>
+              {placeholder}
+            </option>
+          )}
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";

src/components/ui/ServiceObject.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ManagedContract } from '@/types/ManagedContract';
 import { StatusBadge } from '@/components/ui/StatusBadge';
+import { Card } from './Card';
 
 interface ServiceObjectProps {
   contract: ManagedContract;
@@ -8,16 +9,15 @@ interface ServiceObjectProps {
 
 export const ServiceObject: React.FC<ServiceObjectProps> = ({ contract }) => {
   return (
-    <div className="p-4 bg-slate-50 rounded-lg border border-slate-100 flex justify-between items-center">
-      <div>
+    <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>
-        {contract.description && (
-          <p className="text-xs text-slate-500 mt-1">{contract.description}</p>
-        )}
+        {/* Fonctionne instantanément avec 'Actif', 'En déploiement', 'Suspendu' */}
+        <StatusBadge status={contract.status} />
       </div>
-      
-      {/* Fonctionne instantanément avec 'Actif', 'En déploiement', 'Suspendu' */}
-      <StatusBadge status={contract.status} />
-    </div>
+      {contract.description && (
+        <p className="text-xs text-slate-500 mt-1">{contract.description}</p>
+      )}
+    </Card>
   );
 };

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';
@@ -20,26 +18,29 @@ const STATUS_CONFIG: Record<AegisStatus, { bg: string; dot: string }> = {
     bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60',
     dot: 'bg-emerald-500',
   },
+  'Ouvert': { bg: 'bg-blue-50 text-blue-700 border-blue-200/60', dot: 'bg-blue-500' },
 
   // Statuts Intermédiaires / En cours
   'Dégradé': {
     bg: 'bg-amber-50 text-amber-700 border-amber-200/60',
     dot: 'bg-amber-500',
   },
-  'En déploiement': {
+  'En Déploiement': {
     bg: 'bg-blue-50 text-blue-700 border-blue-200/60',
     dot: 'bg-blue-500',
   },
+  'En Analyse': { bg: 'bg-amber-50 text-amber-700 border-amber-200/60', dot: 'bg-amber-500' },
 
   // Statuts Alertes / Inactifs
   'Hors Ligne': {
     bg: 'bg-red-50 text-red-700 border-red-200/60',
     dot: 'bg-red-500',
   },
-  'Suspendu': {
+  'Annulé': {
     bg: 'bg-slate-100 text-slate-700 border-slate-200',
     dot: 'bg-slate-400',
   },
+  'Résolu': { bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60', dot: 'bg-emerald-500' },
 };
 
 export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className }) => {
@@ -52,7 +53,7 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className }) =
   return (
     <div
       className={cn(
-        "px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors",
+        "px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors min-w-fit max-h-fit",
         config.bg,
         className
       )}

src/components/ui/Textarea.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef, useId } from 'react';
+import { cn } from '@/utils/utils';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, label, error, id, rows = 4, ...props }, ref) => {
+    const autoId = useId();
+    const textareaId = id || autoId;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={textareaId} className="block text-sm font-medium text-slate-700 mb-1.5">
+            {label} {props.required && <span className="text-blue-900 font-bold">*</span>}
+          </label>
+        )}
+        <textarea
+          id={textareaId}
+          ref={ref}
+          rows={rows}
+          className={cn(
+            "flex w-full rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500 shadow-sm transition-colors resize-y",
+            error && "border-red-500 focus:ring-red-500 focus:border-red-500",
+            className
+          )}
+          {...props}
+        />
+        {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Ticket } from '@/types/Ticket';
+import { StatusBadge } from '@/components/ui/StatusBadge';
+
+interface TicketRowProps {
+  ticket: Ticket;
+  onClick: (id: string) => void;
+}
+
+export const TicketRow: React.FC<TicketRowProps> = ({ ticket, onClick }) => {
+  return (
+    <div 
+      onClick={() => onClick(ticket.id)}
+      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">
+          <span className="text-xs font-semibold px-2 py-0.5 bg-slate-100 text-slate-700 rounded border border-slate-200">
+            {ticket.category}
+          </span>
+          <span className="text-xs text-slate-400">
+            Ouvert le {new Date(ticket.created).toLocaleDateString('fr-FR')}
+          </span>
+        </div>
+        <h3 className="text-sm font-semibold text-slate-900 group-hover:text-blue-900 transition-colors">
+          {ticket.subject}
+        </h3>
+      </div>
+      
+      <div>
+        <StatusBadge status={ticket.status} />
+      </div>
+    </div>
+  );
+};

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">
-      
-      {/* Infos Serveur */}
-      <div>
-        <p className="font-medium text-slate-900">{node.label}</p>
-        <p className="text-xs text-slate-500 mt-0.5">{node.type}</p>
-      </div>
-      
-      {/* Métriques & Badge */}
-      <div className="flex items-center space-x-6">
-        <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>
-        </div>
-        
-        <StatusBadge status={node.status} />
-      </div>
+    <tr className={cn(
+      "hover:bg-amber-50 dark:hover:bg-slate-900 cursor-pointer transition-all duration-300 ease-in-out",
+    )}>
 
-    </div>
+      {/* Infos Serveur */}
+      <td className='p-2'>
+        <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>
+      </td>
+
+      {/* Métriques & Badge */}
+      <td className='p-2'>
+        <p className="text-xs text-slate-500">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>
+      </td>
+      <td className='text-right p-2'>
+        <StatusBadge status={node.status} />
+      </td>
+
+    </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;
@@ -6,27 +8,22 @@ interface BackupWidgetProps {
 
 export default function BackupWidget({ onClick }: BackupWidgetProps) {
   return (
-    <Card 
+    <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"
     >
+      <CardHeader>
+        <h2 className="text-lg font-semibold">Sauvegardes</h2>
+        <Badge className="max-w-fit min-w-fit" name="PRA Immuable">
+        </Badge>
+      </CardHeader>
       <CardContent className="p-6">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold text-slate-900 group-hover:text-blue-900 transition-colors">Sauvegardes</h2>
-          <span className="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded font-medium border border-slate-200">
-            PRA Immuable
-          </span>
-        </div>
-        
-        <div className="bg-slate-50 rounded-lg p-4 border border-slate-100 mb-4 group-hover:bg-blue-50/50 transition-colors">
+        <Card variant='digged' className="bg-slate-50 rounded-lg p-4 border border-slate-100 mb-4">
           <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">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-          </svg>
+          <Check></Check>
           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/EvolutionFilterBar.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { EVOLUTION_CATEGORIES } from '@/data/evolutionOptions';
+
+// Importation de nos atomes UI
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+
+interface EvolutionFilterBarProps {
+  selectedCategory: string;
+  onSelectCategory: (categoryId: string) => void;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+}
+
+export const EvolutionFilterBar: React.FC<EvolutionFilterBarProps> = ({
+  selectedCategory,
+  onSelectCategory,
+  searchQuery,
+  onSearchChange,
+}) => {
+  return (
+    <div className="space-y-4 mb-8">
+      <div className="flex flex-col sm:flex-row gap-4 justify-between items-stretch sm:items-center">
+
+        {/* ONGLETS DE CATÉGORIES */}
+        <div className="flex items-center gap-2 overflow-x-auto pb-2 sm:pb-0 scrollbar-hide">
+          {EVOLUTION_CATEGORIES.map((cat) => (
+            <Button
+              key={cat.id}
+              size="sm"
+              // Magie du Design System : on bascule simplement entre la variante sombre et claire
+              variant={selectedCategory === cat.id ? 'secondary' : 'outline'}
+              onClick={() => onSelectCategory(cat.id)}
+              className="whitespace-nowrap"
+            >
+              {cat.label}
+            </Button>
+          ))}
+        </div>
+
+        {/* CHAMP DE RECHERCHE */}
+        <div className="relative min-w-60">
+          <Input
+            type="text"
+             // Format compact pour la barre de recherche
+            placeholder="Rechercher une initiative..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            leftIcon={
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <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>
+
+      </div>
+    </div>
+  );
+};
+
+export default EvolutionFilterBar;

src/components/widgets/EvolutionOptionCard.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/utils/utils';
+import type { EvolutionOption } from '@/data/evolutionOptions';
+
+interface EvolutionOptionCardProps {
+  option: EvolutionOption;
+  isSubmitting: boolean;
+  isDisabled: boolean;
+  onSelect: (option: EvolutionOption) => void;
+}
+
+export const EvolutionOptionCard: React.FC<EvolutionOptionCardProps> = ({
+  option,
+  isSubmitting,
+  isDisabled,
+  onSelect
+}) => {
+  return (
+    <div
+      className={cn(
+        "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"
+      )}
+    >
+      <div>
+        {/* En-tête de la carte */}
+        <div className="flex items-center justify-between gap-2 mb-3">
+          <span className="text-[11px] font-mono font-bold tracking-wider uppercase px-2 py-0.5 rounded bg-slate-100 text-slate-600">
+            {option.categoryLabel}
+          </span>
+          {option.badgeText && (
+            <span className="text-[10px] font-semibold tracking-wide uppercase px-2 py-0.5 rounded-full bg-blue-50 text-blue-800 border border-blue-100">
+              {option.badgeText}
+            </span>
+          )}
+        </div>
+
+        {/* Titre & Description */}
+        <h3 className="text-base font-bold text-slate-900 group-hover:text-blue-900 transition-colors">
+          {option.title}
+        </h3>
+        <p className="text-xs text-slate-600 mt-2 leading-relaxed">
+          {option.description}
+        </p>
+      </div>
+
+      {/* Bouton d'action */}
+      <div className="mt-6 pt-4 border-t border-slate-100 flex justify-end">
+        <Button
+          size="sm"
+          isLoading={isSubmitting}
+          disabled={isDisabled}
+          onClick={() => onSelect(option)}
+          className="w-full sm:w-auto text-xs"
+        >
+          Engager cette initiative →
+        </Button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import { useCreateTicket } from '@/hooks/useCreateTicket';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+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 type { TicketCategory } from '@/types/Category';
+import type { ButtonVariantStyle } from '@/styles/VariantStyle';
+
+interface NewTicketWidgetProps {
+  onCancel: () => void;
+  onSuccess: (ticketId: string) => void;
+}
+
+export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSuccess }) => {
+  const { createTicket, isSubmitting, error } = useCreateTicket();
+
+  // États locaux isolés dans le widget
+  const [category, setCategory] = useState<TicketCategory>('Incident Critique');
+  const [ci, setCi] = useState('general');
+  const [subject, setSubject] = useState('');
+  const [affectedAsset, setAffectedAsset] = useState('');
+  const [incidentTime, setIncidentTime] = useState('');
+  const [description, setDescription] = useState('');
+  const [buttonVariant, setButtonVariant]=useState<ButtonVariantStyle>('primary');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Le hook gère la logique de création
+    const newTicketId = await createTicket({
+      category, ci, subject, affectedAsset, incidentTime, description
+    });
+
+    // On délègue la navigation (ou l'action post-création) au composant parent
+    if (newTicketId) {
+      onSuccess(newTicketId);
+    }
+  };
+
+  return (
+    <Card>
+      <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>
+
+      <CardContent className="p-6 sm:p-8">
+        <form onSubmit={handleSubmit} className="space-y-8">
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium">
+              {error}
+            </div>
+          )}
+
+          {/* SECTION 1 : QUALIFICATION */}
+          <div>
+            <h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">
+              1. Qualification de la demande
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <Select
+                label="Type de demande"
+                value={category}
+                onChange={(e) => {setCategory(e.target.value as TicketCategory); 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)' },
+                  { value: 'Administratif', label: 'Administratif (Facturation, Contrat)' },
+                ]}
+              />
+
+              <Select
+                label="Infrastructure concernée (CI)"
+                value={ci}
+                onChange={(e) => setCi(e.target.value)}
+                options={[
+                  { value: 'general', label: 'Général / Non spécifique' },
+                  { value: 'px1', label: 'Serveur Proxmox Principal (Hyperviseur)' },
+                  { value: 'fw1', label: 'Pare-feu Périphérique (WAN)' },
+                  { value: 'db1', label: 'Base de données MariaDB' },
+                ]}
+              />
+            </div>
+          </div>
+
+          {/* SECTION 2 : DÉTAILS */}
+          <div>
+            <h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">
+              2. Détails techniques
+            </h2>
+            <div className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <Input
+                  label="Sujet de l'intervention"
+                  required
+                  value={subject}
+                  onChange={(e) => setSubject(e.target.value)}
+                  placeholder="Ex: Perte de paquets sur le lien WAN principal"
+                />
+
+                <Input
+                  label="Équipement ou Produit concerné (Optionnel)"
+                  value={affectedAsset}
+                  onChange={(e) => setAffectedAsset(e.target.value)}
+                  placeholder="Ex: Ordinateur Direction, Imprimante X, etc."
+                />
+              </div>
+
+              {category === 'Incident Critique' && (
+                <div className="animate-in fade-in slide-in-from-top-2 duration-300 max-w-sm">
+                  <Input
+                    type="datetime-local"
+                    label="Heure exacte du début de l'incident"
+                    required
+                    value={incidentTime}
+                    onChange={(e) => setIncidentTime(e.target.value)}
+                    className="bg-red-50/30 border-red-300 focus:border-red-500 focus:ring-red-500"
+                  />
+                </div>
+              )}
+
+              <Textarea
+                label="Description détaillée"
+                required
+                rows={6}
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Décrivez précisément votre besoin ou les symptômes observés..."
+              />
+            </div>
+          </div>
+
+          {/* ACTIONS */}
+          <div className="pt-6 flex justify-end gap-3 border-t border-slate-100">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel} // Utilisation de la prop
+            >
+              Annuler
+            </Button>
+            <Button
+              type="submit"
+              isLoading={isSubmitting}
+              variant={buttonVariant}
+            >
+              Soumettre le ticket
+            </Button>
+          </div>
+
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default NewTicketWidget;

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;
@@ -6,18 +6,18 @@ interface SecurityWidgetProps {
 
 export default function SecurityWidget({ onClick }: SecurityWidgetProps) {
   return (
-    <Card 
+    <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

@@ -19,7 +19,7 @@ export default function ServicesWidget() {
           <p className="text-sm text-slate-500">Catalogue des contrats d'infogérance actifs</p>
         </div>
 
-        <div className="flex-1 overflow-y-auto mb-6 space-y-3">
+        <div className="flex-1 mb-6 space-y-3">
           {error && <EmptyState message={error} className="text-red-500" />}
           {isLoading && !error && <Loader />}
           {!isLoading && !error && contracts.length === 0 && (

src/components/widgets/SupportCtaWidget.tsx

@@ -7,15 +7,15 @@ export const SupportCtaWidget: React.FC = () => {
   const navigate = useNavigate();
 
   return (
-    <Card className="bg-blue-900 border-blue-800 text-white shadow-sm">
+    <Card>
       <CardContent className="p-6">
         <h3 className="text-lg font-semibold mb-2">Centre de Support</h3>
-        <p className="text-blue-200 text-sm mb-4 leading-relaxed">
+        <p className="text-blue-900 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 bg-white text-blue-900 hover:bg-slate-50 font-medium py-2.5 px-4 rounded-lg transition-colors shadow-sm"
+          className="w-full text-blue-900"
         >
           Ouvrir un ticket sécurisé
         </Button>

src/components/widgets/SupportFooterWidget.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/Button';
+
+interface SupportFooterWidgetProps {
+  title?: string;
+  description?: string;
+  buttonText?: string;
+}
+
+export const SupportFooterWidget: React.FC<SupportFooterWidgetProps> = ({
+  title = "Besoin d'un cadrage sur-mesure ?",
+  description = "Nos ingénieurs restent joignables pour les demandes complexes.",
+  buttonText = "Consulter le Service Desk"
+}) => {
+  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>
+        <h4 className="text-sm font-bold text-white">{title}</h4>
+        <p className="text-xs text-slate-400 mt-0.5">
+          {description}
+        </p>
+      </div>
+      <Button
+        variant="ghost" // On utilise ghost pour ne pas avoir le fond blanc par défaut
+        size="sm"
+        onClick={() => navigate('/support')}
+        // On surcharge les couleurs pour l'adapter au fond sombre
+        className="border border-slate-700 text-slate-200 hover:bg-slate-800 hover:text-white hover:border-slate-600 text-xs whitespace-nowrap"
+      >
+        {buttonText}
+      </Button>
+    </div>
+  );
+};
+
+export default SupportFooterWidget;

src/components/widgets/TicketChatWidget.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import type { TicketMessage } from '@/types/Message';
+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';
+import { MessageBubble } from '@/components/ui/MessageBubble';
+
+interface TicketChatWidgetProps {
+  messages: TicketMessage[];
+  currentUserId?: string;
+  isSending: boolean;
+  onSendMessage: (content: string) => Promise<void>;
+}
+
+export const TicketChatWidget: React.FC<TicketChatWidgetProps> = ({ 
+  messages, 
+  currentUserId, 
+  isSending, 
+  onSendMessage 
+}) => {
+  const [newMessage, setNewMessage] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newMessage.trim()) return;
+
+    try {
+      await onSendMessage(newMessage);
+      setNewMessage(''); // Vide l'input uniquement si l'envoi réussit
+    } catch {
+      alert("Erreur lors de l'envoi.");
+    }
+  };
+
+  return (
+    <Card className="h-125">
+      <CardHeader>
+        <h2 className="text-sm font-semibold text-slate-800">Échanges chiffrés</h2>
+      </CardHeader>
+
+      {/* Zone des messages */}
+      <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." />
+        ) : (
+          messages.map((msg) => (
+            <MessageBubble key={msg.id} message={msg} currentUserId={currentUserId} />
+          ))
+        )}
+      </CardContent>
+
+      {/* Zone de saisie avec notre composant UI */}
+      <form onSubmit={handleSubmit} className="p-4 flex items-start space-x-3">
+        <div className="flex-1">
+          <Input
+            value={newMessage}
+            onChange={(e) => setNewMessage(e.target.value)}
+            placeholder="Écrivez votre message..."
+          />
+        </div>
+        <Button
+          type="submit"
+          isLoading={isSending}
+          disabled={isSending || !newMessage.trim()}
+          className="px-6"
+        >
+          Envoyer
+        </Button>
+      </form>
+    </Card>
+  );
+};

src/components/widgets/TicketInfoWidget.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { Ticket } from '@/types/Ticket';
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import { StatusBadge } from '@/components/ui/StatusBadge';
+
+interface TicketInfoWidgetProps {
+  ticket: Ticket;
+}
+
+export const TicketInfoWidget: React.FC<TicketInfoWidgetProps> = ({ ticket }) => {
+  return (
+    <Card>
+      <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">
+              {ticket.category}
+            </span>
+            <span className="text-xs font-mono text-slate-400">ID: {ticket.id}</span>
+          </div>
+          <h1 className="text-xl font-bold text-slate-900 leading-snug">{ticket.subject}</h1>
+          <p className="text-xs text-slate-500 font-medium">
+            Créé le {new Date(ticket.created).toLocaleString('fr-FR')}
+          </p>
+        </div>
+        
+        <StatusBadge status={ticket.status} className="shrink-0 max-w-fit" />
+      </CardHeader>
+      
+      <CardContent>
+        <p className="text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">
+          Description du besoin :
+        </p>
+        <div className="text-sm text-slate-700 whitespace-pre-wrap leading-relaxed">
+          {ticket.description}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

src/components/widgets/TicketsWidget.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTickets } from '@/hooks/useTickets';
+import { TicketRow } from '@/components/ui/TicketRow';
+import { Card, CardContent } from '@/components/ui/Card';
+import { Loader } from '@/components/ui/Loader';
+import { EmptyState } from '@/components/ui/EmptyState';
+
+interface TicketsWidgetProps {
+  onSelectTicket: (id: string) => void;
+}
+
+export const TicketsWidget: React.FC<TicketsWidgetProps> = ({ onSelectTicket }) => {
+  const { tickets, isLoading, error } = useTickets();
+
+  return (
+    <Card className='pb-7'>
+      <CardContent className="p-0">
+        {/* En-tête du Widget */}
+        <div className="p-6 border-b border-slate-100">
+          <h2 className="text-lg font-semibold text-slate-900">Requêtes en cours et historiques</h2>
+        </div>
+
+        {/* Liste des tickets et états de chargement */}
+        <div className="divide-y divide-slate-100">
+          {error && (
+            <div className="p-6">
+              <EmptyState message={error} className="text-red-500 font-medium not-italic" />
+            </div>
+          )}
+          
+          {isLoading && !error && (
+            <Loader />
+          )}
+          
+          {!isLoading && !error && tickets.length === 0 && (
+            <div className="p-6">
+              <EmptyState message="Aucun ticket enregistré pour le moment." />
+            </div>
+          )}
+          
+          {!isLoading && !error && tickets.map((ticket) => (
+            <TicketRow 
+              key={ticket.id} 
+              ticket={ticket} 
+              onClick={onSelectTicket} 
+            />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TicketsWidget;

src/components/widgets/UptimeWidget.tsx

@@ -10,8 +10,8 @@ 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 && (
           <EmptyState message={error} className="text-red-500 not-italic font-medium" />
@@ -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">
-            {nodes.map((node) => (
-              <UptimeObject key={node.id} node={node} />
-            ))}
-          </div>
+            <tbody className=''>
+              {nodes.map((node) => (
+                <UptimeObject key={node.id} node={node} />
+              ))}
+            </tbody>
         )}
+        </table>
       </CardContent>
     </Card>
   );

src/hooks/useCreateTicket.ts

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { pb } from '@/services/pocketbase';
+
+interface TicketPayload {
+  category: string;
+  ci: string;
+  subject: string;
+  affectedAsset: string;
+  incidentTime: string;
+  description: string;
+}
+
+export const useCreateTicket = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const createTicket = async (payload: TicketPayload): Promise<string | null> => {
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      const currentUser = pb.authStore.record || pb.authStore.model;
+      if (!currentUser) throw new Error("Utilisateur non authentifié");
+
+      // Construction de la description enrichie avec les métadonnées techniques
+      let fullDescription = payload.description;
+      
+      if (payload.affectedAsset.trim()) {
+        fullDescription = `[Équipement concerné: ${payload.affectedAsset}]\n` + fullDescription;
+      }
+      if (payload.category === 'Incident Critique' && payload.incidentTime) {
+        fullDescription = `[Heure de l'incident: ${new Date(payload.incidentTime).toLocaleString('fr-FR')}]\n` + fullDescription;
+      }
+      if (payload.ci !== 'general') {
+        fullDescription = `[CI: ${payload.ci}]\n` + fullDescription;
+      }
+
+      // Enregistrement dans PocketBase
+      const record = await pb.collection('aegis_tickets').create({
+        author: currentUser.id,
+        company: currentUser.company,
+        category: payload.category,
+        subject: payload.subject,
+        description: fullDescription,
+        status: 'Ouvert',
+      });
+
+      return record.id; // On retourne l'ID pour la redirection
+    } catch (err) {
+      console.error("Erreur lors de la création du ticket :", err);
+      setError("Impossible d'enregistrer le ticket sur le serveur sécurisé.");
+      return null;
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return { createTicket, isSubmitting, error };
+};

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,32 @@
+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(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    fetchDocuments();
+  }, [fetchDocuments]);
+
+  return { documents, isLoading, error, refetch: fetchDocuments };
+};

src/hooks/useInfrastructureNodes.ts

@@ -15,7 +15,7 @@ export const useInfrastructureNodes = () => {
           sort: 'created',
         });
         setNodes(records);
-      } catch (err) {
+      } catch {
         setError("Impossible de charger l'infrastructure.");
       } finally {
         setIsLoading(false);

src/hooks/useLoginFlow.ts

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { pb } from '@/services/pocketbase';
+import * as OTPAuth from 'otpauth';
+
+interface MfaConfig {
+  userId: string;
+  totpSecret: string;
+  qrUrl: string;
+  isFirstSetup: boolean;
+  email: string;
+}
+
+export const useLoginFlow = (onLoginSuccess: () => void) => {
+  const [step, setStep] = useState<1 | 2>(1);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [mfaConfig, setMfaConfig] = useState<MfaConfig | null>(null);
+
+  // --- SSO ZITADEL ---
+  const loginWithZitadel = async () => {
+    setError('');
+    setIsLoading(true);
+    try {
+      const authData = await pb.collection('aegis_users').authWithOAuth2({ provider: 'oidc' });
+      if (authData) onLoginSuccess();
+    } catch {
+      setError("Échec de la connexion via GISE Identity.");
+      pb.authStore.clear();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- LOCAL LOGIN (Étape 1) ---
+  const loginWithLocal = async (email: string, pass: string) => {
+    setError('');
+    setIsLoading(true);
+    try {
+      const authData = await pb.collection('aegis_users').authWithPassword(email, pass);
+
+      if (authData.record.mfa_enabled) {
+        let secret = authData.record.totp_secret;
+        let qrUrl = '';
+        let isFirstSetup = false;
+
+        // Génération d'un nouveau secret si première fois
+        if (!secret) {
+          const totp = new OTPAuth.TOTP({
+            issuer: 'AEGIS by GISE',
+            label: email,
+            algorithm: 'SHA1',
+            digits: 6,
+            period: 30,
+            secret: new OTPAuth.Secret({ size: 20 })
+          });
+          secret = totp.secret.base32;
+          qrUrl = totp.toString();
+          isFirstSetup = true;
+        }
+
+        setMfaConfig({ userId: authData.record.id, totpSecret: secret, qrUrl, isFirstSetup, email });
+        setStep(2);
+      } else {
+        onLoginSuccess();
+      }
+    } catch {
+      setError("Identifiants incorrects ou accès révoqué.");
+      pb.authStore.clear();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- VALIDATION MFA (Étape 2) ---
+  const verifyMfa = async (mfaCode: string) => {
+    if (!mfaConfig) return;
+    setError('');
+    setIsLoading(true);
+
+    try {
+      const totp = new OTPAuth.TOTP({
+        issuer: 'AEGIS by GISE',
+        label: mfaConfig.email,
+        algorithm: 'SHA1',
+        digits: 6,
+        period: 30,
+        secret: OTPAuth.Secret.fromBase32(mfaConfig.totpSecret)
+      });
+
+      const isValid = totp.validate({ token: mfaCode, window: 1 }) !== null;
+
+      if (isValid) {
+        if (mfaConfig.isFirstSetup) {
+          await pb.collection('aegis_users').update(mfaConfig.userId, { totp_secret: mfaConfig.totpSecret });
+        }
+        onLoginSuccess();
+      } else {
+        setError("Code de sécurité invalide ou expiré.");
+      }
+    } catch {
+      setError("Erreur critique lors de la vérification.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const cancelMfa = () => {
+    pb.authStore.clear();
+    setStep(1);
+    setMfaConfig(null);
+    setError('');
+  };
+
+  return { step, isLoading, error, mfaConfig, loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa };
+};

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/hooks/useTicketDetail.ts

@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback } from 'react';
+import { pb } from '@/services/pocketbase';
+import type { Ticket } from '@/types/Ticket';
+import type { TicketMessage } from '@/types/Message';
+
+export const useTicketDetail = (ticketId?: string) => {
+  const [ticket, setTicket] = useState<Ticket | null>(null);
+  const [messages, setMessages] = useState<TicketMessage[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSending, setIsSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const currentUser = pb.authStore.record; // ou .model selon votre version PocketBase
+
+  const fetchTicketData = useCallback(async () => {
+    if (!ticketId) return;
+    setError(null);
+
+    try {
+      // 1. Récupération du ticket
+      const ticketData = await pb.collection('aegis_tickets').getOne<Ticket>(ticketId);
+      setTicket(ticketData);
+
+      // 2. Récupération des messages associés
+      const messageRecords = await pb.collection('aegis_ticket_messages').getFullList<TicketMessage>({
+        filter: `ticket = "${ticketId}"`,
+        expand: 'author',
+        sort: 'created',
+      });
+      setMessages(messageRecords);
+    } catch (err) {
+      console.error("Erreur lors du chargement de la discussion :", err);
+      setError("Ticket introuvable ou accès non autorisé.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [ticketId]);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    fetchTicketData();
+  }, [fetchTicketData]);
+
+  const sendMessage = async (content: string) => {
+    if (!content.trim() || !currentUser || !ticketId) return;
+
+    setIsSending(true);
+    try {
+      await pb.collection('aegis_ticket_messages').create({
+        ticket: ticketId,
+        author: currentUser.id,
+        content: content.trim(),
+      });
+      await fetchTicketData(); // On recharge les messages après l'envoi
+    } catch (error) {
+      throw new Error("Impossible de charger le ticket", { cause: error });
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return { ticket, messages, isLoading, error, isSending, sendMessage, currentUser };
+};

src/hooks/useTickets.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect, useCallback } from 'react';
+import { pb } from '@/services/pocketbase';
+import type { Ticket } from '@/types/Ticket';
+
+export const useTickets = () => {
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchTickets = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const records = await pb.collection('aegis_tickets').getFullList<Ticket>({
+        sort: '-created', // Du plus récent au plus ancien
+      });
+      setTickets(records);
+    } catch (err) {
+      console.error("Erreur lors de la récupération des tickets :", err);
+      setError("Impossible de charger l'historique de vos requêtes.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    fetchTickets();
+  }, [fetchTickets]);
+
+  return { tickets, isLoading, error, refetch: fetchTickets };
+};

src/index.css

@@ -2,4 +2,20 @@
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* --- VOS UTILITAIRES PERSONNALISÉS --- */
+@layer utilities {
+  .scrollbar-hide {
+    /* Masquer pour IE, Edge et Firefox */
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  
+  /* Masquer pour Chrome, Safari et Opera */
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}

src/layouts/DashboardLayout.tsx

@@ -8,16 +8,16 @@ interface DashboardLayoutProps {
 
 export default function DashboardLayout({ children, onLogout }: DashboardLayoutProps) {
   return (
-    <div className="flex h-screen bg-slate-50 overflow-hidden">
+    <div className="h-screen w-full flex bg-[#e8e8e8] dark:bg-[#1e293b] text-slate-800 dark:text-slate-100 font-sans transition-all duration-300 ease-in-out">
       {/* Intégration de la navbar extraite */}
-      <Sidebar onLogout={onLogout} />
+      <Sidebar onLogout={onLogout} className='my-4 ml-4'/>
 
       {/* CONTENU PRINCIPAL */}
-      <main className="flex-1 overflow-y-auto">
-        <div className="p-8">
+      <main className="flex-1 overflow-y-auto scrollbar-hide">
+        <div>
           {children}
         </div>
       </main>
     </div>
   );
-}
+} 

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">
-      
-      {/* 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>
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
+
 
       {/* 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">
-            <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>
+          <AccessWidget/>
 
           {/* Colonne 2 : Organisation & Contrat */}
-          <div className="space-y-8">
-            <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>
+          <InformationWidget/>
 
         </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">
-      
-      {/* 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>
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
 
       {/* 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">
-          <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>
+        <Input
+          type="text"
+          placeholder="Rechercher un document, une facture..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
 
         {/* Liste des Documents (La Carte) */}
-        <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">
-              {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>
-
+        <DocumentsWidget></DocumentsWidget>
       </main>
-    </div>
+    </div >
   );
 }

src/pages/InfrastructureEvolution.tsx

@@ -1,215 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useEvolutionRequest } from '@/hooks/useEvolutionRequest';
-import { Button } from '@/components/ui/Button';
-import { EmptyState } from '@/components/ui/EmptyState';
-import { cn } from '@/utils/utils';
-import { 
-  EVOLUTION_OPTIONS, 
-  EVOLUTION_CATEGORIES, 
-  type EvolutionOption 
-} from '@/data/evolutionOptions';
-
-export const InfrastructureEvolution: React.FC = () => {
-  const navigate = useNavigate();
-  const { submitRequest, isSubmitting, submitSuccess, error } = useEvolutionRequest();
-  
-  const [selectedCategory, setSelectedCategory] = useState<string>('all');
-  const [searchQuery, setSearchQuery] = useState<string>('');
-  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);
-
-  // Redirection automatique vers le Dashboard après confirmation de la demande
-  useEffect(() => {
-    if (submitSuccess) {
-      const timer = setTimeout(() => {
-        navigate('/dashboard');
-      }, 3000);
-      return () => clearTimeout(timer);
-    }
-  }, [submitSuccess, navigate]);
-
-  // Filtrage combiné par onglet et recherche textuelle
-  const filteredOptions = EVOLUTION_OPTIONS.filter((opt) => {
-    const matchesCategory = selectedCategory === 'all' || opt.category === selectedCategory;
-    const matchesSearch = opt.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
-                          opt.description.toLowerCase().includes(searchQuery.toLowerCase());
-    return matchesCategory && matchesSearch;
-  });
-
-  const handleSelectOption = (option: EvolutionOption) => {
-    setSelectedOptionId(option.id);
-    submitRequest(option.subject, option.payloadDescription);
-  };
-
-  return (
-    <div className="max-w-5xl mx-auto py-8 px-4 sm:px-6">
-      
-      {/* EN-TÊTE DE LA PAGE */}
-      <div className="mb-8">
-        <div className="flex items-center justify-between mb-2">
-          <button 
-            onClick={() => navigate('/dashboard')}
-            className="text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1"
-          >
-            ← Retour au tableau de bord
-          </button>
-          <span className="text-xs font-mono font-bold tracking-widest text-slate-400 uppercase">
-            AEGIS • Catalogue Projets
-          </span>
-        </div>
-        <h1 className="text-3xl font-extrabold text-slate-900 tracking-tight">
-          Évolution & Extension de l'Infrastructure
-        </h1>
-        <p className="text-slate-600 mt-2 text-base">
-          Sélectionnez une initiative stratégique. Votre demande ouvrira immédiatement un ticket projet sécurisé auprès de votre référent technique GISE.
-        </p>
-      </div>
-
-      {/* ÉTAT DE CONFIRMATION AVEC SUCCÈS */}
-      {submitSuccess ? (
-        <div className="bg-white rounded-xl border border-emerald-200 shadow-sm p-12 text-center max-w-xl mx-auto my-12 animate-in fade-in zoom-in-95 duration-200">
-          <div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
-            <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
-            </svg>
-          </div>
-          <h2 className="text-2xl font-bold text-slate-900 mb-2">
-            Demande d'évolution enregistrée
-          </h2>
-          <p className="text-slate-600 text-sm mb-6 leading-relaxed">
-            Votre ticket projet a été chiffré et transmis à notre équipe d'ingénierie. Un expert GISE analyse vos prérequis et reprendra contact avec vous sous 24h ouvrées.
-          </p>
-          <p className="text-xs text-slate-400 font-mono">
-            Redirection automatique vers le Trust Center...
-          </p>
-        </div>
-      ) : (
-        <>
-          {/* BARRE DE RECHERCHE ET ONGLETS DE FILTRAGE */}
-          <div className="space-y-4 mb-8">
-            <div className="flex flex-col sm:flex-row gap-4 justify-between items-stretch sm:items-center">
-              
-              {/* Onglets de catégories */}
-              <div className="flex items-center gap-1 overflow-x-auto pb-2 sm:pb-0 scrollbar-none">
-                {EVOLUTION_CATEGORIES.map((cat) => (
-                  <button
-                    key={cat.id}
-                    onClick={() => setSelectedCategory(cat.id)}
-                    className={cn(
-                      "px-3.5 py-2 text-xs font-semibold rounded-lg whitespace-nowrap transition-all duration-150",
-                      selectedCategory === cat.id
-                        ? "bg-slate-900 text-white shadow-sm"
-                        : "bg-white text-slate-600 hover:bg-slate-100 border border-slate-200"
-                    )}
-                  >
-                    {cat.label}
-                  </button>
-                ))}
-              </div>
-
-              {/* Champ de recherche */}
-              <div className="relative min-w-60">
-                <input
-                  type="text"
-                  placeholder="Rechercher une initiative..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-9 pr-4 py-2 text-xs bg-white border border-slate-200 rounded-lg text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-900 focus:border-transparent"
-                />
-                <svg className="w-4 h-4 text-slate-400 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <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>
-
-            </div>
-          </div>
-
-          {/* AFFICHAGE DES ERREURS D'ENVOI */}
-          {error && (
-            <div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm flex items-center justify-between">
-              <span>{error}</span>
-            </div>
-          )}
-
-          {/* GRILLE DES OPTIONS */}
-          {filteredOptions.length === 0 ? (
-            <div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
-              <EmptyState message="Aucune initiative ne correspond à votre recherche." />
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-              {filteredOptions.map((option) => {
-                const isThisSubmitting = isSubmitting && selectedOptionId === option.id;
-
-                return (
-                  <div
-                    key={option.id}
-                    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",
-                      isThisSubmitting ? "border-blue-900 bg-blue-50/30" : "border-slate-200"
-                    )}
-                  >
-                    <div>
-                      {/* En-tête de la carte */}
-                      <div className="flex items-center justify-between gap-2 mb-3">
-                        <span className="text-[11px] font-mono font-bold tracking-wider uppercase px-2 py-0.5 rounded bg-slate-100 text-slate-600">
-                          {option.categoryLabel}
-                        </span>
-                        {option.badgeText && (
-                          <span className="text-[10px] font-semibold tracking-wide uppercase px-2 py-0.5 rounded-full bg-blue-50 text-blue-800 border border-blue-100">
-                            {option.badgeText}
-                          </span>
-                        )}
-                      </div>
-
-                      {/* Titre & Description */}
-                      <h3 className="text-base font-bold text-slate-900 group-hover:text-blue-900 transition-colors">
-                        {option.title}
-                      </h3>
-                      <p className="text-xs text-slate-600 mt-2 leading-relaxed">
-                        {option.description}
-                      </p>
-                    </div>
-
-                    {/* Bouton d'action */}
-                    <div className="mt-6 pt-4 border-t border-slate-100 flex justify-end">
-                      <Button
-                        size="sm"
-                        isLoading={isThisSubmitting}
-                        disabled={isSubmitting}
-                        onClick={() => handleSelectOption(option)}
-                        className="w-full sm:w-auto text-xs"
-                      >
-                        Engager cette initiative →
-                      </Button>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-
-          {/* PIED DE PAGE D'ASSISTANCE */}
-          <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">
-            <div>
-              <h4 className="text-sm font-bold text-white">Besoin d'un cadrage sur-mesure ?</h4>
-              <p className="text-xs text-slate-400 mt-0.5">
-                Nos ingénieurs restent joignables par téléphone pour les demandes urgentes ou complexes.
-              </p>
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => navigate('/support')}
-              className="border-slate-700 text-slate-200 hover:bg-slate-800 hover:border-slate-600 text-xs whitespace-nowrap"
-            >
-              Consulter le Service Desk
-            </Button>
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default InfrastructureEvolution;

src/pages/Login.tsx

@@ -1,261 +1,76 @@
-import React, { useState } from 'react';
-import { pb } from '@services/pocketbase';
-import * as OTPAuth from 'otpauth';
-import { QRCodeSVG } from 'qrcode.react';
+import { useLoginFlow } from '@/hooks/useLoginFlow';
+import { LocalLoginForm } from '@/components/auth/LocalLoginForm';
+import { MfaForm } from '@/components/auth/MfaForm';
+import { Card, CardContent } from '@/components/ui/Card';
+import LogoGise from '@/components/ui/LogoGise';
+import { Button } from '@/components/ui/Button';
+import { GlobeLock } from 'lucide-react';
+import Badge from '@/components/ui/Badge';
 
 interface LoginProps {
   onLoginSuccess: () => void;
 }
 
 export default function Login({ onLoginSuccess }: LoginProps) {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [mfaCode, setMfaCode] = useState('');
-  const [error, setError] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [step, setStep] = useState<1 | 2>(1);
-
-  // États pour la cryptographie TOTP (Flux Local)
-  const [userId, setUserId] = useState('');
-  const [totpSecret, setTotpSecret] = useState('');
-  const [qrUrl, setQrUrl] = useState('');
-  const [isFirstSetup, setIsFirstSetup] = useState(false);
-
-  // --------------------------------------------------------
-  // 1 Connexion Zitadel (SSO)
-  // --------------------------------------------------------
-  const handleZitadelLogin = async () => {
-    setError('');
-    setIsLoading(true);
-    try {
-      // PocketBase gère automatiquement la popup vers Zitadel et le retour du token
-      const authData = await pb.collection('aegis_users').authWithOAuth2({ provider: 'oidc' });
-      console.log("Données d'authentification SSO :", authData);
-      
-      if (authData) {
-        // Zitadel a déjà géré la sécurité et le MFA de son côté.
-        // On ouvre directement le coffre-fort.
-        onLoginSuccess();
-      }
-    } catch (err: any) {
-      console.error("Erreur d'authentification SSO :", err);
-      setError("Échec de la connexion sécurisée via GISE Identity.");
-      pb.authStore.clear();
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // --------------------------------------------------------
-  // 2 Connexion Email - Mot de passe
-  // --------------------------------------------------------
-  const handleLocalLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setIsLoading(true);
-
-    try {
-      const authData = await pb.collection('aegis_users').authWithPassword(email, password);
-
-      if (authData.record.mfa_enabled) {
-        setUserId(authData.record.id);
-
-        if (!authData.record.totp_secret) {
-          const totp = new OTPAuth.TOTP({
-            issuer: 'AEGIS by GISE',
-            label: email,
-            algorithm: 'SHA1',
-            digits: 6,
-            period: 30,
-            secret: new OTPAuth.Secret({ size: 20 })
-          });
-
-          setTotpSecret(totp.secret.base32);
-          setQrUrl(totp.toString());
-          setIsFirstSetup(true);
-        } else {
-          setTotpSecret(authData.record.totp_secret);
-          setIsFirstSetup(false);
-        }
-        setStep(2); // On passe à l'étape MFA locale
-      } else {
-        onLoginSuccess();
-      }
-    } catch (err: any) {
-      setError("Identifiants institutionnels incorrects ou accès révoqué.");
-      pb.authStore.clear();
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleFinalStep = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setIsLoading(true);
-
-    try {
-      const totp = new OTPAuth.TOTP({
-        issuer: 'AEGIS by GISE',
-        label: email,
-        algorithm: 'SHA1',
-        digits: 6,
-        period: 30,
-        secret: OTPAuth.Secret.fromBase32(totpSecret)
-      });
-
-      const isValid = totp.validate({ token: mfaCode, window: 1 }) !== null;
-
-      if (isValid) {
-        if (isFirstSetup) {
-          await pb.collection('aegis_users').update(userId, { totp_secret: totpSecret });
-        }
-        onLoginSuccess();
-      } else {
-        setError("Code de sécurité invalide ou expiré.");
-        setMfaCode('');
-      }
-    } catch (err) {
-      setError("Une erreur critique est survenue lors de la vérification.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCancelMFA = () => {
-    pb.authStore.clear();
-    setStep(1);
-    setPassword('');
-    setMfaCode('');
-    setError('');
-    setIsFirstSetup(false);
-  };
+  const {
+    step, isLoading, error, mfaConfig,
+    loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa
+  } = useLoginFlow(onLoginSuccess);
 
   return (
-    <div className="min-h-screen bg-slate-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans selection:bg-blue-900 selection:text-white">
-      
-      <div className="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>
+    <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">
 
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-white py-8 px-4 shadow-sm border border-slate-200 rounded-xl sm:px-10">
-          
-          {step === 1 ? (
-            <div className="space-y-6">
-              {error && (
-                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
-                  {error}
-                </div>
-              )}
+      {/* HEADER LOGO */}
+      <LogoGise />
 
-              {/* BOUTON SSO ZITADEL */}
-              <div>
-                <button
+      {/* BOÎTE CENTRALE DÉCLINÉE AVEC NOTRE OBJET CARD */}
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md justify-center flex">
+        <Card>
+          <CardContent className="p-6 sm:p-10">
+
+            {/* AFFICHAGE DES ERREURS GLOBALES */}
+            {error && (
+              <div className="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
+                {error}
+              </div>
+            )}
+
+            {/* ROUTAGE INTERNE DES ÉTAPES */}
+            {step === 1 ? (
+              <div className="space-y-6 items-center">
+                <Button
                   type="button"
-                  onClick={handleZitadelLogin}
+                  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"
-                >
-                  <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>
+                  leftIcon={<GlobeLock className="w-5 h-5 mr-2 text-blue-900" />}>
                   {isLoading ? 'Connexion en cours...' : 'Connexion via GISE Identity'}
-                </button>
-              </div>
+                </Button>
 
-              {/* SÉPARATEUR VISUEL */}
-              <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>
-                </div>
-              </div>
-
-              {/* FORMULAIRE CLASSIQUE */}
-              <form className="space-y-6" onSubmit={handleLocalLogin}>
-                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-slate-700">Identifiant institutionnel</label>
-                  <div className="mt-1">
-                    <input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-2 placeholder-slate-400 shadow-sm focus:border-blue-900 focus:outline-none focus:ring-blue-900 sm:text-sm" placeholder="direction@client.com" />
+                <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">
+                    <Badge name="Ou via authentification classique"></Badge>
                   </div>
                 </div>
 
-                <div>
-                  <label htmlFor="password" className="block text-sm font-medium text-slate-700">Mot de passe</label>
-                  <div className="mt-1">
-                    <input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-2 placeholder-slate-400 shadow-sm focus:border-blue-900 focus:outline-none focus:ring-blue-900 sm:text-sm" placeholder="••••••••••••" />
-                  </div>
-                </div>
+                <LocalLoginForm onSubmit={loginWithLocal} isLoading={isLoading} />
+              </div>
+            ) : (
+              <MfaForm
+                isFirstSetup={mfaConfig?.isFirstSetup || false}
+                qrUrl={mfaConfig?.qrUrl || ''}
+                isLoading={isLoading}
+                onVerify={verifyMfa}
+                onCancel={cancelMfa}
+              />
+            )}
 
-                <div>
-                  <button type="submit" disabled={isLoading} className="flex w-full justify-center rounded-md border border-transparent bg-blue-900 py-2.5 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none transition-colors disabled:opacity-70">
-                    {isLoading ? 'Chiffrement en cours...' : 'Authentification classique'}
-                  </button>
-                </div>
-              </form>
-            </div>
-          ) : (
-             <form className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" onSubmit={handleFinalStep}>
-               {error && (
-                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
-                  {error}
-                </div>
-               )}
-               
-               {isFirstSetup ? (
-                 <div className="text-center mb-6">
-                   <p className="text-sm font-medium text-slate-900">Configuration de la sécurité</p>
-                   <p className="text-xs text-slate-500 mt-2 mb-4">Scannez ce QR Code avec Google Authenticator ou Authy pour lier votre appareil.</p>
-                   <div className="flex justify-center p-4 bg-white border border-slate-200 rounded-lg shadow-sm">
-                     <QRCodeSVG value={qrUrl} size={150} />
-                   </div>
-                 </div>
-               ) : (
-                 <div className="text-center mb-6">
-                   <p className="text-sm font-medium text-slate-900">Validation à double facteur</p>
-                   <p className="text-xs text-slate-500 mt-1">Saisissez le code généré par votre application d'authentification.</p>
-                 </div>
-               )}
-               
-               <div>
-                 <input 
-                   type="text" 
-                   value={mfaCode}
-                   onChange={(e) => setMfaCode(e.target.value)}
-                   required 
-                   maxLength={6} 
-                   className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-3 text-center text-2xl tracking-[0.5em] text-slate-900 placeholder-slate-300 shadow-sm focus:border-blue-900 focus:outline-none font-mono" 
-                   placeholder="000000" 
-                 />
-               </div>
-               
-               <div className="flex space-x-3">
-                 <button type="button" onClick={handleCancelMFA} disabled={isLoading} className="flex w-1/3 justify-center rounded-md border border-slate-300 bg-white py-2.5 px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors disabled:opacity-70">
-                   Annuler
-                 </button>
-                 <button type="submit" disabled={isLoading || mfaCode.length !== 6} className="flex w-2/3 justify-center rounded-md border border-transparent bg-emerald-600 py-2.5 px-4 text-sm font-medium text-white shadow-sm hover:bg-emerald-700 transition-colors disabled:opacity-70">
-                   {isLoading ? 'Vérification...' : 'Déverrouiller'}
-                 </button>
-               </div>
-             </form>
-          )}
-        </div>
+          </CardContent>
+        </Card>
       </div>
+
     </div>
   );
 }

src/pages/NewTicket.tsx

@@ -1,216 +0,0 @@
-import React, { useState } from 'react';
-import { pb } from '@services/pocketbase';
-
-interface NewTicketProps {
-  onCancel: () => void;
-  onTicketCreated: () => void; // Rappel pour recharger la liste et revenir en arrière
-}
-
-export default function NewTicket({ onCancel, onTicketCreated }: NewTicketProps) {
-  const [category, setCategory] = useState<'Incident Critique' | 'Évolution' | 'Administratif'>('Incident Critique');
-  const [ci, Ci] = useState('general');
-  const [subject, setSubject] = useState('');
-  const [affectedAsset, setAffectedAsset] = useState('');
-  const [incidentTime, setIncidentTime] = useState('');
-  const [description, setDescription] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState('');
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setIsSubmitting(true);
-
-    try {
-      const currentUser = pb.authStore.record;
-      if (!currentUser) throw new Error("Utilisateur non authentifié");
-
-      // Construction de la description enrichie avec les métadonnées techniques
-      let fullDescription = description;
-      if (affectedAsset.trim()) {
-        fullDescription = `[Équipement concerné: ${affectedAsset}]\n` + fullDescription;
-      }
-      if (category === 'Incident Critique' && incidentTime) {
-        fullDescription = `[Heure de l'incident: ${new Date(incidentTime).toLocaleString('fr-FR')}]\n` + fullDescription;
-      }
-
-      // Enregistrement dans PocketBase
-      await pb.collection('aegis_tickets').create({
-        author: currentUser.id,
-        company: currentUser.company,
-        category,
-        subject,
-        description: fullDescription,
-        status: 'Ouvert',
-      });
-
-      onTicketCreated(); // Retourne à la liste et rafraîchit
-    } catch (err) {
-      console.error("Erreur lors de la création du ticket :", err);
-      setError("Impossible d'enregistrer le ticket sur le serveur sécurisé.");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 pb-12">
-      
-      {/* Header */}
-      <header className="bg-white border-b border-slate-200 px-8 py-4 sticky top-0 z-10 shadow-sm">
-        <div className="max-w-7xl mx-auto flex items-center">
-          <button 
-            type="button"
-            onClick={onCancel}
-            className="mr-4 p-2 text-slate-400 hover:text-slate-900 hover:bg-slate-50 rounded-full transition-colors"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-            </svg>
-          </button>
-          <div>
-            <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>
-          </div>
-        </div>
-      </header>
-
-      {/* Formulaire Principal */}
-      <main className="max-w-4xl mx-auto px-8 pt-8">
-        <form onSubmit={handleSubmit} className="space-y-8 bg-white rounded-xl shadow-sm border border-slate-200 p-8">
-          
-          {error && (
-            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium">
-              {error}
-            </div>
-          )}
-
-          {/* Section 1 : Qualification */}
-          <div>
-            <h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">1. Qualification de la demande</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              
-              <div>
-                <label htmlFor="category" className="block text-sm font-medium text-slate-700 mb-1">Type de demande</label>
-                <select
-                  id="category"
-                  value={category}
-                  onChange={(e) => setCategory(e.target.value as any)}
-                  className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 bg-white"
-                >
-                  <option value="Incident Critique">Incident Critique (Panne, Dégradation)</option>
-                  <option value="Évolution">Évolution (Ajout de ressources, Modification)</option>
-                  <option value="Administratif">Administratif (Facturation, Contrat)</option>
-                </select>
-              </div>
-
-              <div>
-                <label htmlFor="ci" className="block text-sm font-medium text-slate-700 mb-1">Infrastructure concernée (CI)</label>
-                <select
-                  id="ci"
-                  value={ci}
-                  onChange={(e) => Ci(e.target.value)}
-                  className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 bg-white"
-                >
-                  <option value="general">Général / Non spécifique</option>
-                  <option value="px1">Serveur Proxmox Principal (Hyperviseur)</option>
-                  <option value="fw1">Pare-feu Périphérique (WAN)</option>
-                  <option value="db1">Base de données MariaDB</option>
-                </select>
-              </div>
-
-            </div>
-          </div>
-
-          {/* Section 2 : Détails techniques & Actifs */}
-          <div>
-            <h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">2. Détails techniques</h2>
-            <div className="space-y-6">
-              
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div>
-                  <label htmlFor="subject" className="block text-sm font-medium text-slate-700 mb-1">Sujet de l'intervention <span className="text-blue-900 font-bold">*</span></label>
-                  <input
-                    type="text"
-                    id="subject"
-                    required
-                    value={subject}
-                    onChange={(e) => setSubject(e.target.value)}
-                    placeholder="Ex: Perte de paquets sur le lien WAN principal"
-                    className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900"
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="affectedAsset" className="block text-sm font-medium text-slate-700 mb-1">
-                    Équipement ou Produit concerné <span className="text-slate-400 font-normal">(Optionnel)</span>
-                  </label>
-                  <input
-                    type="text"
-                    id="affectedAsset"
-                    value={affectedAsset}
-                    onChange={(e) => setAffectedAsset(e.target.value)}
-                    placeholder="Ex: Ordinateur Direction, Imprimante X, etc."
-                    className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900"
-                  />
-                </div>
-              </div>
-
-              {category === 'Incident Critique' && (
-                <div>
-                  <label htmlFor="incidentTime" className="block text-sm font-medium text-slate-700 mb-1">
-                    Heure exacte du début de l'incident <span className="text-red-500 font-bold">*</span>
-                  </label>
-                  <input
-                    type="datetime-local"
-                    id="incidentTime"
-                    required
-                    value={incidentTime}
-                    onChange={(e) => setIncidentTime(e.target.value)}
-                    className="block w-full max-w-md rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 bg-white"
-                  />
-                </div>
-              )}
-
-              <div>
-                <label htmlFor="description" className="block text-sm font-medium text-slate-700 mb-1">
-                  Description détaillée <span className="text-blue-900 font-bold">*</span>
-                </label>
-                <textarea
-                  id="description"
-                  required
-                  rows={6}
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  placeholder="Décrivez précisément votre besoin ou les symptômes observés..."
-                  className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 resize-y"
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Actions */}
-          <div className="pt-4 flex justify-end space-x-3 border-t border-slate-100">
-            <button
-              type="button"
-              onClick={onCancel}
-              className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors"
-            >
-              Annuler
-            </button>
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              className={`px-6 py-2 text-sm font-medium text-white rounded-lg transition-colors shadow-sm ${
-                category === 'Incident Critique' ? 'bg-red-600 hover:bg-red-700 focus:ring-red-600' : 'bg-blue-900 hover:bg-blue-800 focus:ring-blue-900'
-              } focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50`}
-            >
-              {isSubmitting ? 'Transmission en cours...' : 'Soumettre le ticket'}
-            </button>
-          </div>
-
-        </form>
-      </main>
-    </div>
-  );
-}

src/pages/ServiceDesk.tsx

@@ -1,153 +1,30 @@
-import { useState, useEffect } from 'react';
-import { pb } from '@services/pocketbase';
-import NewTicket from './NewTicket';
-import TicketDetail from './TicketDetail';
-
-interface Ticket {
-  id: string;
-  subject: string;
-  category: string;
-  status: 'Ouvert' | 'En analyse' | 'Résolu';
-  created: string;
-}
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/Button';
+import { PageHeader } from '@/components/ui/PageHeader';
+import { TicketsWidget } from '@/components/widgets/TicketsWidget';
 
 export default function ServiceDesk() {
-  const [tickets, setTickets] = useState<Ticket[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  
-  // États de navigation interne au module Service Desk
-  const [currentView, setCurrentView] = useState<'list' | 'new' | 'detail'>('list');
-  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
+  const navigate = useNavigate();
 
-  // Récupération des tickets de l'entreprise connectée
-  const fetchTickets = async () => {
-    try {
-      const records = await pb.collection('aegis_tickets').getFullList<Ticket>({
-        sort: '-created', // Du plus récent au plus ancien
-      });
-      setTickets(records);
-    } catch (error) {
-      console.error("Erreur lors de la récupération des tickets :", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchTickets();
-  }, []);
-
-  // Gestion du clic sur un ticket pour ouvrir la discussion
-  const handleSelectTicket = (id: string) => {
-    setSelectedTicketId(id);
-    setCurrentView('detail');
-  };
-
-  // Styles visuels pour les statuts
-  const getStatusStyle = (status: Ticket['status']) => {
-    switch (status) {
-      case 'Ouvert': return 'bg-blue-50 text-blue-700 border-blue-100';
-      case 'En analyse': return 'bg-amber-50 text-amber-700 border-amber-100';
-      case 'Résolu': return 'bg-emerald-50 text-emerald-700 border-emerald-100';
-      default: return 'bg-slate-50 text-slate-700 border-slate-100';
-    }
-  };
-
-  // Rendu conditionnel selon la vue active
-  if (currentView === 'new') {
-    return (
-      <NewTicket 
-        onCancel={() => setCurrentView('list')} 
-        onTicketCreated={() => {
-          setCurrentView('list');
-          fetchTickets(); // On recharge la liste pour afficher le nouveau ticket
-        }} 
-      />
-    );
-  }
-
-  if (currentView === 'detail' && selectedTicketId) {
-    return (
-      <TicketDetail 
-        ticketId={selectedTicketId} 
-        onBack={() => {
-          setCurrentView('list');
-          setSelectedTicketId(null);
-          fetchTickets();
-        }} 
-      />
-    );
-  }
-
-  // Vue par défaut : La liste des tickets
   return (
-    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 relative">
-      
-      {/* Header */}
-      <header className="bg-white border-b border-slate-200 px-8 py-6">
-        <div className="max-w-7xl mx-auto flex justify-between items-center">
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Centre de Support (Service Desk)</h1>
-            <p className="text-sm text-slate-500 mt-1">Canal de communication sécurisé avec vos experts GISE.</p>
-          </div>
-          <div className="flex items-center space-x-3">
-            <button
-          onClick={() => setCurrentView('new')}
-          className="bg-blue-900 hover:bg-blue-800 text-white px-4 py-2.5 rounded-lg text-sm font-medium transition-colors shadow-sm"
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
+      <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."
         >
-          Ouvrir un ticket sécurisé
-        </button>
-          </div>
-        </div>
-      </header>
+          <Button onClick={() => navigate('/support/new')}>
+            Ouvrir un ticket sécurisé
+          </Button>
+        </PageHeader>
 
-      <main className="max-w-7xl mx-auto px-8 py-8">
+        {/* WIDGET DES TICKETS */}
+        <TicketsWidget 
+          onSelectTicket={(ticketId) => navigate(`/support/tickets/${ticketId}`)} 
+        />
 
-      {/* Liste des tickets */}
-      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-        <div className="p-6 border-b border-slate-100">
-          <h2 className="text-lg font-semibold text-slate-900">Requêtes en cours et historiques</h2>
-        </div>
-
-        {isLoading ? (
-          <div className="flex justify-center items-center py-12">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-900"></div>
-          </div>
-        ) : tickets.length === 0 ? (
-          <div className="text-center py-12 text-sm text-slate-500 italic">
-            Aucun ticket enregistré pour le moment.
-          </div>
-        ) : (
-          <div className="divide-y divide-slate-100">
-            {tickets.map((ticket) => (
-              <div 
-                key={ticket.id} 
-                onClick={() => handleSelectTicket(ticket.id)}
-                className="p-6 flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer group"
-              >
-                <div className="space-y-1">
-                  <div className="flex items-center space-x-3">
-                    <span className="text-xs font-semibold px-2 py-0.5 bg-slate-100 text-slate-700 rounded border border-slate-200">
-                      {ticket.category}
-                    </span>
-                    <span className="text-xs text-slate-400">
-                      Ouvert le {new Date(ticket.created).toLocaleDateString('fr-FR')}
-                    </span>
-                  </div>
-                  <h3 className="text-sm font-semibold text-slate-900 group-hover:text-blue-900 transition-colors">
-                    {ticket.subject}
-                  </h3>
-                </div>
-                <div>
-                  <span className={`px-3 py-1 rounded-full text-xs font-medium border ${getStatusStyle(ticket.status)}`}>
-                    {ticket.status}
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
       </main>
     </div>
   );

src/pages/TicketDetail.tsx

@@ -1,201 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { pb } from '@services/pocketbase';
-
-interface Ticket {
-  id: string;
-  subject: string;
-  description: string;
-  category: string;
-  status: 'Ouvert' | 'En analyse' | 'Résolu';
-  created: string;
-}
-
-interface Message {
-  id: string;
-  content: string;
-  created: string;
-  expand?: {
-    author?: {
-      id?: string;
-      name?: string;
-      email?: string;
-      avatar?: string;
-    };
-  };
-}
-
-interface TicketDetailProps {
-  ticketId: string;
-  onBack: () => void;
-}
-
-export default function TicketDetail({ ticketId, onBack }: TicketDetailProps) {
-  const [ticket, setTicket] = useState<Ticket | null>(null);
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [newMessage, setNewMessage] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSending, setIsSending] = useState(false);
-
-  const currentUser = pb.authStore.record;
-
-  // Récupération du ticket et de ses messages associés
-  const fetchTicketData = async () => {
-    try {
-      const ticketData = await pb.collection('aegis_tickets').getOne<Ticket>(ticketId);
-      setTicket(ticketData);
-
-      const messageRecords = await pb.collection('aegis_ticket_messages').getFullList<Message>({
-        filter: `ticket = "${ticketId}"`,
-        expand: 'author',
-        sort: 'created',
-      });
-      setMessages(messageRecords);
-    } catch (error) {
-      console.error("Erreur lors du chargement de la discussion :", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchTicketData();
-  }, [ticketId]);
-
-  // Envoi d'un nouveau message dans la discussion
-  const handleSendMessage = async (e: React.SubmitEvent) => {
-    e.preventDefault();
-    if (!newMessage.trim() || !currentUser) return;
-
-    setIsSending(true);
-    try {
-      await pb.collection('aegis_ticket_messages').create({
-        ticket: ticketId,
-        author: currentUser.id,
-        content: newMessage.trim(),
-      });
-
-      setNewMessage('');
-      await fetchTicketData(); // Recharger les messages
-    } catch (error) {
-      console.error("Erreur lors de l'envoi du message :", error);
-      alert("Impossible d'envoyer le message.");
-    } finally {
-      setIsSending(false);
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex justify-center items-center py-20">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-900"></div>
-      </div>
-    );
-  }
-
-  if (!ticket) {
-    return (
-      <div className="bg-white rounded-xl p-6 text-center border border-slate-200">
-        <p className="text-sm text-slate-500 mb-4">Ticket introuvable ou accès non autorisé.</p>
-        <button onClick={onBack} className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium">
-          Retour aux tickets
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6 max-w-4xl mx-auto">
-      {/* Barre de navigation / Retour */}
-      <div className="flex items-center justify-between bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
-        <button
-          onClick={onBack}
-          className="flex items-center space-x-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors"
-        >
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
-          </svg>
-          <span>Retour au Centre de Support</span>
-        </button>
-        <div className="flex items-center space-x-3">
-          <span className="text-xs font-semibold px-2.5 py-1 bg-slate-100 text-slate-700 rounded border border-slate-200 uppercase">
-            {ticket.category}
-          </span>
-          <span className={`px-3 py-1 rounded-full text-xs font-medium border ${
-            ticket.status === 'Résolu' ? 'bg-emerald-50 text-emerald-700 border-emerald-100' : 'bg-blue-50 text-blue-700 border-blue-100'
-          }`}>
-            {ticket.status}
-          </span>
-        </div>
-      </div>
-
-      {/* En-tête du ticket & Description initiale */}
-      <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
-        <h1 className="text-xl font-bold text-slate-900">{ticket.subject}</h1>
-        <div className="bg-slate-50 p-4 rounded-lg border border-slate-100 text-sm text-slate-700 whitespace-pre-wrap">
-          <p className="text-xs font-semibold text-slate-400 mb-1">Description initiale :</p>
-          {ticket.description}
-        </div>
-        <p className="text-xs text-slate-400">
-          Créé le {new Date(ticket.created).toLocaleString('fr-FR')}
-        </p>
-      </div>
-
-      {/* Fil de discussion / Messages */}
-      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-[500px]">
-        <div className="p-4 border-b border-slate-100 bg-slate-50/50">
-          <h2 className="text-sm font-semibold text-slate-800">Échanges avec l'équipe GISE</h2>
-        </div>
-
-        {/* Liste des messages */}
-        <div className="flex-1 overflow-y-auto p-6 space-y-4">
-          {messages.length === 0 ? (
-            <div className="text-center py-12 text-sm text-slate-400 italic">
-              Aucun message pour l'instant. Démarrez la conversation ci-dessous.
-            </div>
-          ) : (
-            messages.map((msg) => {
-              const isMyMessage = msg.expand?.author?.id === currentUser?.id;
-              const authorName = msg.expand?.author?.name || msg.expand?.author?.email || 'Expert GISE';
-
-              return (
-                <div key={msg.id} className={`flex flex-col ${isMyMessage ? 'items-end' : 'items-start'}`}>
-                  <div className="flex items-center space-x-2 mb-1">
-                    <span className="text-xs font-medium text-slate-600">{authorName}</span>
-                    <span className="text-[10px] text-slate-400">
-                      {new Date(msg.created).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                    </span>
-                  </div>
-                  <div className={`max-w-[80%] rounded-2xl px-4 py-3 text-sm shadow-sm ${
-                    isMyMessage 
-                      ? 'bg-blue-900 text-white rounded-br-none' 
-                      : 'bg-slate-100 text-slate-800 rounded-bl-none border border-slate-200/60'
-                  }`}>
-                    {msg.content}
-                  </div>
-                </div>
-              );
-            })
-          )}
-        </div>
-
-        {/* Formulaire de réponse */}
-        <form onSubmit={handleSendMessage} className="p-4 border-t border-slate-100 bg-white flex items-center space-x-3">
-          <input
-            type="text"
-            value={newMessage}
-            onChange={(e) => setNewMessage(e.target.value)}
-            placeholder="Écrivez votre message ou complément d'information..."
-            className="flex-1 rounded-lg border border-slate-300 px-4 py-2.5 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900"
-          />
-          <button
-            type="submit"
-            disabled={isSending || !newMessage.trim()}
-            className="bg-blue-900 hover:bg-blue-800 text-white px-5 py-2.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 shadow-sm"
-          >
-            {isSending ? 'Envoi...' : 'Envoyer'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}

src/pages/TrustCenter.tsx

@@ -4,47 +4,48 @@ import BackupWidget from '@/components/widgets/BackupWidget';
 import SecurityWidget from '@/components/widgets/SecurityWidget';
 import ServicesWidget from '@/components/widgets/ServicesWidget';
 import SupportCtaWidget from '@/components/widgets/SupportCtaWidget';
+import { PageHeader } from '@/components/ui/PageHeader';
 
 export default function TrustCenter() {
   const navigate = useNavigate();
 
   return (
-    <div className="bg-slate-50 font-sans text-slate-900 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 justify-between items-center">
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Tableau de bord de l'infrastructure</h1>
-            <p className="text-sm text-slate-500 mt-1">Espace sécurisé AEGIS • Synchronisation en temps réel</p>
-          </div>
-          <div className="flex items-center space-x-3">
-            <span className="flex h-3 w-3 relative">
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
+      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
+        
+        {/* HEADER EXTRAIT */}
+        <PageHeader
+          title="Tableau de bord de l'infrastructure"
+          description="Espace sécurisé AEGIS • Synchronisation en temps réel"
+        >
+          {/* L'indicateur de connexion devient le "children" du header */}
+          <div className="flex items-center space-x-3 bg-slate-50 px-3 py-1.5 rounded-md border border-slate-100">
+            <span className="flex h-2.5 w-2.5 relative">
               <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
+              <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
+            </span>
+            <span className="text-xs font-semibold uppercase tracking-wide text-slate-600">
+              Connexion chiffrée
             </span>
-            <span className="text-sm font-medium text-slate-700">Connexion chiffrée</span>
           </div>
-        </div>
-      </header>
+        </PageHeader>
 
-      {/* Main Grid */}
-      <main className="max-w-7xl mx-auto px-8 py-8">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <div className="lg:col-span-2 space-y-6">
+        {/* GRILLE DES WIDGETS */}
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+          <div className="lg:col-span-3 space-y-6">
             <UptimeWidget />
-            
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               <BackupWidget onClick={() => navigate('/backups')} />
               <SecurityWidget onClick={() => navigate('/analytics')} />
             </div>
           </div>
 
-          <div className="space-y-6">
+          <div className="space-y-6 lg:col-span-2">
             <ServicesWidget />
             <SupportCtaWidget />
           </div>
         </div>
+        
       </main>
     </div>
   );

src/pages/servicedesk/NewTicket.tsx

@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router-dom';
+import { NewTicketWidget } from '@/components/widgets/NewTicketWidget';
+import { BackButton } from '@/components/ui/BackButton'; // Importation de notre nouvel Atome
+
+export default function NewTicket() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="max-w-4xl mx-auto py-8 px-4 space-y-6">
+
+      {/* BOUTON DE RETOUR EXTRAIT */}
+      <BackButton to="/support" label="Annuler et retourner au Service Desk" />
+
+      {/* WIDGET DU FORMULAIRE */}
+      <NewTicketWidget
+        onCancel={() => navigate('/support')}
+        onSuccess={(ticketId) => navigate(`/support/tickets/${ticketId}`)}
+      />
+    </div>
+  );
+}

src/pages/servicedesk/TicketDetail.tsx

@@ -0,0 +1,55 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { useTicketDetail } from '@/hooks/useTicketDetail';
+
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Loader } from '@/components/ui/Loader';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { BackButton } from '@/components/ui/BackButton'; // Importation
+
+import { TicketInfoWidget } from '@/components/widgets/TicketInfoWidget';
+import { TicketChatWidget } from '@/components/widgets/TicketChatWidget';
+
+export default function TicketDetail() {
+  const { ticketId } = useParams<{ ticketId: string }>();
+  const navigate = useNavigate();
+
+  const { 
+    ticket, messages, isLoading, error, isSending, 
+    sendMessage, currentUser 
+  } = useTicketDetail(ticketId);
+
+  if (isLoading) return <div className="py-20"><Loader /></div>;
+  
+  if (error || !ticket) {
+    return (
+      <div className="max-w-4xl mx-auto py-12 px-4">
+        <Card className="text-center py-12">
+          <EmptyState message={error || "Ticket introuvable."} className="text-red-500 mb-6 not-italic font-medium" />
+          <Button onClick={() => navigate('/support')} variant="outline">
+            Retour au Centre de Support
+          </Button>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto py-8 px-4 space-y-6">
+      
+      {/* BOUTON DE RETOUR EXTRAIT */}
+      <BackButton to="/support" label="Retour au Centre de Support" />
+
+      {/* WIDGETS */}
+      <TicketInfoWidget ticket={ticket} />
+
+      <TicketChatWidget 
+        messages={messages}
+        currentUserId={currentUser?.id}
+        isSending={isSending}
+        onSendMessage={sendMessage}
+      />
+
+    </div>
+  );
+}

src/pages/trustcenter/Analytics.tsx

@@ -1,18 +1,12 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import BackButton from '@/components/ui/BackButton';
 
 export const Analytics: React.FC = () => {
-  const navigate = useNavigate();
 
   return (
     <div className="max-w-5xl mx-auto py-8 px-8">
-      <button 
-        onClick={() => navigate('/dashboard')}
-        className="text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 mb-6"
-      >
-        ← Retour au tableau de bord
-      </button>
+      <BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />
 
       <Card>
         <CardHeader className="bg-slate-50">

src/pages/trustcenter/Backups.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import BackButton from '@/components/ui/BackButton';
 
 // On pourrait extraire ces données dans un Custom Hook plus tard
 const BACKUP_HISTORY = [
@@ -11,16 +11,10 @@ const BACKUP_HISTORY = [
 ];
 
 export const Backups: React.FC = () => {
-  const navigate = useNavigate();
 
   return (
     <div className="max-w-5xl mx-auto py-8 px-8">
-      <button 
-        onClick={() => navigate('/dashboard')}
-        className="text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 mb-6"
-      >
-        ← Retour au tableau de bord
-      </button>
+      <BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />
 
       <Card>
         <CardHeader className="bg-slate-50">

src/pages/trustcenter/InfrastructureEvolution.tsx

@@ -0,0 +1,123 @@
+// Fichier : src/pages/InfrastructureEvolution.tsx
+
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useEvolutionRequest } from '@/hooks/useEvolutionRequest';
+
+import { BackButton } from '@/components/ui/BackButton';
+import { EmptyState } from '@/components/ui/EmptyState';
+
+// Nos nouveaux composants
+import { EvolutionOptionCard } from '@/components/widgets/EvolutionOptionCard';
+import { EvolutionFilterBar } from '@/components/widgets/EvolutionFilterBar';
+
+import { EVOLUTION_OPTIONS, type EvolutionOption } from '@/data/evolutionOptions';
+import SupportFooterWidget from '@/components/widgets/SupportFooterWidget';
+
+export const InfrastructureEvolution: React.FC = () => {
+  const navigate = useNavigate();
+  const { submitRequest, isSubmitting, submitSuccess, error } = useEvolutionRequest();
+  
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);
+
+  // Redirection automatique
+  useEffect(() => {
+    if (submitSuccess) {
+      const timer = setTimeout(() => navigate('/dashboard'), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [submitSuccess, navigate]);
+
+  // Logique de filtrage
+  const filteredOptions = EVOLUTION_OPTIONS.filter((opt) => {
+    const matchesCategory = selectedCategory === 'all' || opt.category === selectedCategory;
+    const matchesSearch = opt.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                          opt.description.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCategory && matchesSearch;
+  });
+
+  const handleSelectOption = (option: EvolutionOption) => {
+    setSelectedOptionId(option.id);
+    submitRequest(option.subject, option.payloadDescription);
+  };
+
+  return (
+    <div className="max-w-5xl mx-auto py-8 px-4 sm:px-6">
+      
+      {/* EN-TÊTE DE LA PAGE */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-2">
+          <BackButton to="/dashboard" label="Retour au tableau de bord" />
+          <span className="text-xs font-mono font-bold tracking-widest text-slate-400 uppercase">
+            AEGIS • Catalogue Projets
+          </span>
+        </div>
+        <h1 className="text-3xl font-extrabold text-slate-900 tracking-tight">
+          Évolution & Extension de l'Infrastructure
+        </h1>
+        <p className="text-slate-600 mt-2 text-base">
+          Sélectionnez une initiative stratégique. Votre demande ouvrira immédiatement un ticket projet sécurisé auprès de votre référent technique GISE.
+        </p>
+      </div>
+
+      {/* ÉTAT DE SUCCÈS */}
+      {submitSuccess ? (
+        <div className="bg-white rounded-xl border border-emerald-200 shadow-sm p-12 text-center max-w-xl mx-auto my-12 animate-in fade-in zoom-in-95 duration-200">
+          <div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
+            <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h2 className="text-2xl font-bold text-slate-900 mb-2">Demande d'évolution enregistrée</h2>
+          <p className="text-slate-600 text-sm mb-6 leading-relaxed">
+            Votre ticket projet a été chiffré et transmis à notre équipe d'ingénierie. Un expert GISE analyse vos prérequis et reprendra contact avec vous sous 24h ouvrées.
+          </p>
+          <p className="text-xs text-slate-400 font-mono">Redirection automatique vers le Trust Center...</p>
+        </div>
+      ) : (
+        <>
+          {/* BARRE DE RECHERCHE ET FILTRES */}
+          <EvolutionFilterBar 
+            selectedCategory={selectedCategory}
+            onSelectCategory={setSelectedCategory}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+          />
+
+          {/* AFFICHAGE DES ERREURS */}
+          {error && (
+            <div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm font-medium">
+              {error}
+            </div>
+          )}
+
+          {/* GRILLE DES OPTIONS */}
+          {filteredOptions.length === 0 ? (
+            <div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
+              <EmptyState message="Aucune initiative ne correspond à votre recherche." />
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+              {filteredOptions.map((option) => (
+                <EvolutionOptionCard
+                  key={option.id}
+                  option={option}
+                  isSubmitting={isSubmitting && selectedOptionId === option.id}
+                  isDisabled={isSubmitting} // On bloque toutes les cartes pendant un envoi
+                  onSelect={handleSelectOption}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* PIED DE PAGE D'ASSISTANCE */}
+          <SupportFooterWidget />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default InfrastructureEvolution;

src/styles/Neumorphism.ts

@@ -0,0 +1,33 @@
+// Styles neumorphiques réutilisables.
+
+export const NEUMORPHISM = {
+
+  // Reliefs au repos
+  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]",
+    lg: "px-10 py-4 text-xl rounded-xl",
+    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]",
+  insetDark: "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+
+} as const;

src/styles/VariantStyle.ts

@@ -0,0 +1 @@
+export type ButtonVariantStyle = "primary" | "danger" | "secondary" | "success" | "outline" | "ghost";

src/types/Category.ts

@@ -0,0 +1 @@
+export type TicketCategory = "Incident Critique" | "Évolution" | "Administratif";

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)
+}

src/types/Message.ts

@@ -0,0 +1,13 @@
+export interface TicketMessage {
+  id: string;
+  content: string;
+  created: string;
+  expand?: {
+    author?: {
+      id?: string;
+      name?: string;
+      email?: string;
+      avatar?: string;
+    };
+  };
+}

src/types/Status.ts

@@ -2,7 +2,10 @@
 export type NodeStatus = 'Opérationnel' | 'Dégradé' | 'Hors Ligne';
 
 // Statuts relatifs aux contrats d'infogérance
-export type ContractStatus = 'Actif' | 'En déploiement' | 'Suspendu';
+export type ContractStatus = 'Actif' | 'En Déploiement' | 'Annulé';
+
+// Status relatifs aux tickets du service desk
+export type TicketStatus = 'Ouvert' | 'En Analyse' | 'Résolu';
 
 // Type unifié regroupant tous les statuts possibles sur la plateforme AEGIS
-export type AegisStatus = NodeStatus | ContractStatus;
+export type AegisStatus = NodeStatus | ContractStatus | TicketStatus;

src/types/Ticket.ts

@@ -0,0 +1,10 @@
+import type { TicketStatus } from '@/types/Status';
+
+export interface Ticket {
+  id: string;
+  subject: string;
+  description: string;
+  category: string;
+  status: TicketStatus;
+  created: string;
+}

tsconfig.app.json

@@ -22,6 +22,7 @@
       "@assets/*": ["./src/assets/*"],
       "@types/*": ["./src/types/*"],
       "@widgets/*": ["./src/components/widgets/*"],
+      "@styles/*": ["./src/styles/*"],
     },
 
     /* Bundler mode */

vite.config.ts

@@ -24,6 +24,7 @@ export default defineConfig({
       '@assets': path.resolve(__dirname, './src/assets'),
       '@data': path.resolve(__dirname, './src/data'),
       '@widgets': path.resolve(__dirname, './src/components/widgets'),
+      '@styles': path.resolve(__dirname, './src/styles'),
     }
   }
 })