From aa365dbb6316cb0d4091555672319521c0e05869 Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Sat, 25 Jul 2026 19:49:43 +0200
Subject: [PATCH] refactor(ui): passe les pages en pleine largeur
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Chaque page plafonnait sa largeur differemment (max-w-4xl pour Config,
5xl pour IA, 6xl pour l'accueil et les documents, 7xl pour les revenus
et les depenses) : sur un ecran large, les donnees se tassaient au
centre. Les pages n'ont plus de plafond, le contenu occupe l'ecran avec
une marge laterale fixe.

Pour tirer parti de la place gagnee : Config affiche ses deux sections
cote a cote, et le split apercu PDF / donnees passe de 50-50 a 40-60 en
faveur des donnees.

Pendant le tagging, le bouton « Annuler » de l'en-tete d'edition est
masque : il faisait doublon avec celui du bandeau de tagging, qui a un
sens different (retour a l'edition, et non abandon). La sortie vers la
liste reste le fil d'Ariane.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 frontend/src/pages/AnalyticsPage.vue    |  12 +-
 frontend/src/pages/ConfigPage.vue       | 218 +++++++++++++-----------
 frontend/src/pages/DocumentsPage.vue    |  65 +++----
 frontend/src/pages/EditDocumentPage.vue |  36 ++--
 frontend/src/pages/ExtractPage.vue      |  38 ++---
 frontend/src/pages/HomePage.vue         |  22 +--
 frontend/src/pages/IAPage.vue           |  92 +++++-----
 frontend/src/pages/RevenusPage.vue      |  16 +-
 8 files changed, 257 insertions(+), 242 deletions(-)

diff --git a/frontend/src/pages/AnalyticsPage.vue b/frontend/src/pages/AnalyticsPage.vue
index 3eaf7ef..8686cc8 100644
--- a/frontend/src/pages/AnalyticsPage.vue
+++ b/frontend/src/pages/AnalyticsPage.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="flex-1 overflow-auto p-6 bg-gray-800">
-    <div class="max-w-7xl mx-auto space-y-6">
-      
+  <div class="page">
+    <div class="page-content">
+
       <!-- Header -->
-      <div class="flex items-center justify-between">
+      <div class="page-header">
         <div>
-          <h1 class="text-xl font-semibold text-white">Analyse des depenses</h1>
-          <p class="text-sm text-gray-400 mt-1">
+          <h1 class="page-title">Analyse des depenses</h1>
+          <p class="page-subtitle">
             Visualisez et filtrez les depenses de vos immeubles
           </p>
         </div>
diff --git a/frontend/src/pages/ConfigPage.vue b/frontend/src/pages/ConfigPage.vue
index 80bdd51..2f03e4a 100644
--- a/frontend/src/pages/ConfigPage.vue
+++ b/frontend/src/pages/ConfigPage.vue
@@ -1,114 +1,128 @@
 <template>
-  <div class="flex-1 overflow-y-auto p-6">
-    <div class="max-w-4xl mx-auto space-y-6">
+  <div class="page">
+    <div class="page-content">
       <!-- Header -->
-      <div>
-        <h1 class="text-2xl font-bold text-white">Configuration</h1>
-        <p class="text-gray-400 text-sm mt-1">Paramètres LLM et gestion des tags</p>
+      <div class="page-header">
+        <div>
+          <h1 class="page-title">Configuration</h1>
+          <p class="page-subtitle">Paramètres LLM et gestion des tags</p>
+        </div>
       </div>
 
-      <!-- Section LLM -->
-      <div class="bg-gray-800 rounded-lg border border-gray-700 p-6">
-        <h2 class="text-lg font-semibold text-white mb-4">Configuration LLM (Ollama)</h2>
+      <!-- Les deux sections cote a cote des que la largeur le permet -->
+      <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 items-start">
 
-        <div class="space-y-4">
-          <div v-for="field in settingsFields" :key="field.key" class="flex items-end gap-3">
-            <div class="flex-1">
-              <div class="flex items-center gap-2 mb-1">
-                <label class="text-sm font-medium text-gray-300">{{ field.label }}</label>
-                <span
-                  class="text-xs px-1.5 py-0.5 rounded"
-                  :class="sourceBadgeClass(settingsSources[field.key])"
-                >{{ settingsSources[field.key] || 'default' }}</span>
+        <!-- Section LLM -->
+        <div class="card">
+          <div class="card-header">
+            <h2 class="card-title">Configuration LLM (Ollama)</h2>
+          </div>
+          <div class="card-body space-y-4">
+            <div v-for="field in settingsFields" :key="field.key" class="flex items-end gap-3">
+              <div class="flex-1">
+                <div class="flex items-center gap-2 mb-1">
+                  <label class="form-label mb-0">{{ field.label }}</label>
+                  <span class="badge" :class="sourceBadgeClass(settingsSources[field.key])">
+                    {{ settingsSources[field.key] || 'default' }}
+                  </span>
+                </div>
+                <input
+                  v-model="settingsForm[field.key]"
+                  :type="field.type || 'text'"
+                  :placeholder="field.placeholder"
+                  class="input"
+                />
               </div>
-              <input
-                v-model="settingsForm[field.key]"
-                :type="field.type || 'text'"
-                :placeholder="field.placeholder"
-                class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 transition-colors"
-              />
+              <button
+                @click="resetSetting(field.key)"
+                class="btn btn-secondary"
+                title="Reset au défaut"
+              >Reset</button>
+            </div>
+
+            <div class="flex items-center gap-3 pt-2">
+              <button
+                @click="saveSettings"
+                :disabled="savingSettings"
+                class="btn btn-primary"
+              >{{ savingSettings ? 'Enregistrement...' : 'Enregistrer' }}</button>
+              <span v-if="settingsMessage" class="text-sm" :class="settingsMessageError ? 'text-red-400' : 'text-green-400'">{{ settingsMessage }}</span>
             </div>
-            <button
-              @click="resetSetting(field.key)"
-              class="px-3 py-2 text-sm text-gray-400 border border-gray-600 rounded-lg hover:text-white hover:border-gray-500 transition-colors"
-              title="Reset au défaut"
-            >Reset</button>
           </div>
         </div>
 
-        <div class="mt-4 flex items-center gap-3">
-          <button
-            @click="saveSettings"
-            :disabled="savingSettings"
-            class="px-5 py-2 bg-blue-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50 hover:bg-blue-700"
-          >{{ savingSettings ? 'Enregistrement...' : 'Enregistrer' }}</button>
-          <span v-if="settingsMessage" class="text-sm" :class="settingsMessageError ? 'text-red-400' : 'text-green-400'">{{ settingsMessage }}</span>
+        <!-- Section Tags -->
+        <div class="card">
+          <div class="card-header">
+            <h2 class="card-title">Gestion des tags</h2>
+            <span class="text-xs text-gray-500">{{ tags.length }} tags</span>
+          </div>
+
+          <div class="table-wrap">
+            <table class="table">
+              <thead>
+                <tr>
+                  <th class="w-16">ID</th>
+                  <th>Nom</th>
+                  <th class="text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="tag in tags" :key="tag.id">
+                  <td class="text-gray-500">{{ tag.id }}</td>
+                  <td>
+                    <input
+                      v-if="editingTagId === tag.id"
+                      v-model="editingTagNom"
+                      class="input py-1"
+                      @keydown.enter="confirmRenameTag(tag.id)"
+                      @keydown.escape="cancelEditTag"
+                      ref="editInput"
+                    />
+                    <span v-else class="text-white">{{ tag.nom }}</span>
+                  </td>
+                  <td class="text-right whitespace-nowrap">
+                    <template v-if="editingTagId === tag.id">
+                      <button
+                        @click="confirmRenameTag(tag.id)"
+                        class="text-green-400 hover:text-green-300 text-sm mr-2"
+                      >Valider</button>
+                      <button
+                        @click="cancelEditTag"
+                        class="text-gray-400 hover:text-white text-sm"
+                      >Annuler</button>
+                    </template>
+                    <button
+                      v-else
+                      @click="startEditTag(tag)"
+                      class="text-blue-400 hover:text-blue-300 text-sm"
+                    >Renommer</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- Ajout d'un nouveau tag -->
+          <div class="card-body border-t border-gray-700">
+            <div class="flex gap-3">
+              <input
+                v-model="newTagNom"
+                type="text"
+                placeholder="Nouveau tag..."
+                class="input"
+                @keydown.enter="createTag"
+              />
+              <button
+                @click="createTag"
+                :disabled="!newTagNom.trim()"
+                class="btn btn-primary whitespace-nowrap"
+              >Ajouter</button>
+            </div>
+            <p v-if="tagMessage" class="mt-2 text-sm" :class="tagMessageError ? 'text-red-400' : 'text-green-400'">{{ tagMessage }}</p>
+          </div>
         </div>
-      </div>
 
-      <!-- Section Tags -->
-      <div class="bg-gray-800 rounded-lg border border-gray-700 p-6">
-        <h2 class="text-lg font-semibold text-white mb-4">Gestion des tags</h2>
-
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-gray-700">
-              <th class="text-left py-2 text-gray-400 font-medium">ID</th>
-              <th class="text-left py-2 text-gray-400 font-medium">Nom</th>
-              <th class="text-right py-2 text-gray-400 font-medium">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="tag in tags" :key="tag.id" class="border-b border-gray-700/50">
-              <td class="py-2 text-gray-500">{{ tag.id }}</td>
-              <td class="py-2">
-                <input
-                  v-if="editingTagId === tag.id"
-                  v-model="editingTagNom"
-                  class="bg-gray-900 border border-blue-500 rounded px-2 py-1 text-white text-sm focus:outline-none"
-                  @keydown.enter="confirmRenameTag(tag.id)"
-                  @keydown.escape="cancelEditTag"
-                  ref="editInput"
-                />
-                <span v-else class="text-white">{{ tag.nom }}</span>
-              </td>
-              <td class="py-2 text-right">
-                <template v-if="editingTagId === tag.id">
-                  <button
-                    @click="confirmRenameTag(tag.id)"
-                    class="text-green-400 hover:text-green-300 text-sm mr-2"
-                  >Valider</button>
-                  <button
-                    @click="cancelEditTag"
-                    class="text-gray-400 hover:text-gray-300 text-sm"
-                  >Annuler</button>
-                </template>
-                <button
-                  v-else
-                  @click="startEditTag(tag)"
-                  class="text-blue-400 hover:text-blue-300 text-sm"
-                >Renommer</button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <!-- Ajout d'un nouveau tag -->
-        <div class="mt-4 flex gap-3">
-          <input
-            v-model="newTagNom"
-            type="text"
-            placeholder="Nouveau tag..."
-            class="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 transition-colors text-sm"
-            @keydown.enter="createTag"
-          />
-          <button
-            @click="createTag"
-            :disabled="!newTagNom.trim()"
-            class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50 hover:bg-green-700"
-          >Ajouter</button>
-        </div>
-        <p v-if="tagMessage" class="mt-2 text-sm" :class="tagMessageError ? 'text-red-400' : 'text-green-400'">{{ tagMessage }}</p>
       </div>
     </div>
   </div>
@@ -187,9 +201,9 @@ async function resetSetting(key) {
 }
 
 function sourceBadgeClass(source) {
-  if (source === 'database') return 'bg-blue-600/30 text-blue-400'
-  if (source === 'env') return 'bg-yellow-600/30 text-yellow-400'
-  return 'bg-gray-600/30 text-gray-400'
+  if (source === 'database') return 'badge-info'
+  if (source === 'env') return 'badge-warning'
+  return 'badge-neutral'
 }
 
 // ============================================================
diff --git a/frontend/src/pages/DocumentsPage.vue b/frontend/src/pages/DocumentsPage.vue
index 937aed6..b81a8f2 100644
--- a/frontend/src/pages/DocumentsPage.vue
+++ b/frontend/src/pages/DocumentsPage.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="flex-1 overflow-auto p-6 bg-gray-800">
-    <div class="max-w-6xl mx-auto space-y-6">
-      
+  <div class="page">
+    <div class="page-content">
+
       <!-- Header -->
-      <div class="flex items-center justify-between">
+      <div class="page-header">
         <div>
-          <h1 class="text-xl font-semibold text-white">Documents importes</h1>
-          <p class="text-sm text-gray-400 mt-1">
+          <h1 class="page-title">Documents importes</h1>
+          <p class="page-subtitle">
             {{ documents.length }} document{{ documents.length > 1 ? 's' : '' }} en base
           </p>
         </div>
-        
+
         <!-- Import button -->
-        <label class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors cursor-pointer flex items-center gap-2">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <label class="btn btn-primary cursor-pointer">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
           </svg>
           Importer un PDF
@@ -27,13 +27,13 @@
       </div>
 
       <!-- Loading state -->
-      <div v-if="isLoading" class="bg-gray-900 rounded-lg p-12 text-center">
-        <div class="inline-block animate-spin rounded-full h-8 w-8 border-2 border-gray-600 border-t-blue-400"></div>
+      <div v-if="isLoading" class="card empty-state">
+        <div class="spinner h-8 w-8"></div>
         <p class="text-gray-400 mt-4">Chargement des documents...</p>
       </div>
 
       <!-- Empty state -->
-      <div v-else-if="documents.length === 0" class="bg-gray-900 rounded-lg p-12 text-center">
+      <div v-else-if="documents.length === 0" class="card empty-state">
         <svg class="mx-auto h-16 w-16 text-gray-600 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
@@ -42,26 +42,26 @@
       </div>
 
       <!-- Documents table -->
-      <div v-else class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700">
-        <table class="w-full">
-          <thead class="bg-gray-800 border-b border-gray-700">
+      <div v-else class="card">
+        <div class="table-wrap">
+        <table class="table">
+          <thead>
             <tr>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Document</th>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Immeuble</th>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date</th>
-              <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Solde</th>
-              <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">Fichiers</th>
-              <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
+              <th>Document</th>
+              <th>Immeuble</th>
+              <th>Date</th>
+              <th class="text-right">Solde</th>
+              <th class="text-center">Fichiers</th>
+              <th class="text-right">Actions</th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-800">
-            <tr 
-              v-for="doc in documents" 
+          <tbody>
+            <tr
+              v-for="doc in documents"
               :key="doc.id"
-              class="hover:bg-gray-800/50 transition-colors"
             >
               <!-- Document info -->
-              <td class="px-4 py-4">
+              <td>
                 <div class="flex items-center gap-3">
                   <div class="flex-shrink-0 w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
                     <svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 24 24">
@@ -77,19 +77,19 @@
               </td>
 
               <!-- Immeuble -->
-              <td class="px-4 py-4">
+              <td>
                 <div class="text-sm text-white">{{ doc.immeuble_adresse || '-' }}</div>
                 <div class="text-xs text-gray-500 font-mono">{{ doc.immeuble_code }}</div>
               </td>
 
               <!-- Date -->
-              <td class="px-4 py-4">
+              <td>
                 <div class="text-sm text-white">{{ formatDate(doc.date) }}</div>
                 <div class="text-xs text-gray-500">Importe le {{ formatDateTime(doc.created_at) }}</div>
               </td>
 
               <!-- Solde -->
-              <td class="px-4 py-4 text-right">
+              <td class="text-right">
                 <span 
                   :class="[
                     'text-sm font-medium',
@@ -102,7 +102,7 @@
               </td>
 
               <!-- Files status -->
-              <td class="px-4 py-4">
+              <td>
                 <div class="flex items-center justify-center gap-2">
                   <!-- PDF download -->
                   <a 
@@ -143,12 +143,12 @@
               </td>
 
               <!-- Actions -->
-              <td class="px-4 py-4 text-right">
+              <td class="text-right">
                 <div class="flex items-center justify-end gap-2">
                   <!-- Edit & reimport button -->
                   <button
                     @click="router.push(`/documents/${doc.id}/edit`)"
-                    class="px-3 py-1.5 text-xs rounded bg-blue-600/20 text-blue-400 hover:bg-blue-600 hover:text-white transition-colors flex items-center gap-1"
+                    class="btn btn-sm btn-secondary"
                     title="Editer et reimporter"
                   >
                     <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -161,6 +161,7 @@
             </tr>
           </tbody>
         </table>
+        </div>
       </div>
 
     </div>
diff --git a/frontend/src/pages/EditDocumentPage.vue b/frontend/src/pages/EditDocumentPage.vue
index 230e2ca..f7667b2 100644
--- a/frontend/src/pages/EditDocumentPage.vue
+++ b/frontend/src/pages/EditDocumentPage.vue
@@ -1,27 +1,29 @@
 <template>
-  <div class="flex-1 flex flex-col overflow-hidden">
+  <div class="page-fixed">
     <!-- Header avec breadcrumb et actions -->
-    <div class="flex-shrink-0 px-6 py-4 bg-gray-800 border-b border-gray-700">
-      <div class="flex items-center justify-between">
+    <div class="flex-shrink-0 px-6 py-4 bg-gray-900 border-b border-gray-700">
+      <div class="page-header">
         <div>
           <div class="flex items-center gap-2 text-sm text-gray-400 mb-1">
             <router-link to="/documents" class="hover:text-white transition-colors">Documents</router-link>
             <span>›</span>
             <span class="text-white">{{ documentData?.reference || 'Chargement...' }}</span>
           </div>
-          <h1 class="text-xl font-semibold text-white">
+          <h1 class="page-title">
             Édition du document {{ documentData?.reference }}
           </h1>
-          <p v-if="documentData" class="text-sm text-gray-400 mt-1">
+          <p v-if="documentData" class="page-subtitle">
             {{ documentData.immeuble?.adresse || '-' }} - {{ formatDate(documentData.date) }}
           </p>
         </div>
-        
+
         <div class="flex items-center gap-3">
+          <!-- Masque pendant le tagging : celui du bandeau de tagging fait foi. -->
           <button
+            v-if="!showTagging"
             @click="cancel"
             :disabled="isSaving"
-            class="px-4 py-2 text-sm text-gray-400 hover:text-white transition-colors disabled:opacity-50"
+            class="btn btn-ghost"
           >
             Annuler
           </button>
@@ -30,7 +32,7 @@
             @click="reExtract"
             :disabled="isSaving || isReExtracting || !documentData?.has_pdf"
             :title="documentData?.has_pdf ? 'Relancer l\'extraction depuis le PDF stocké' : 'PDF non disponible pour ce document'"
-            class="px-4 py-2 text-sm bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors disabled:opacity-50 flex items-center gap-2"
+            class="btn btn-warning"
           >
             <svg
               class="w-4 h-4"
@@ -46,7 +48,7 @@
             v-if="!showTagging && extractedData"
             @click="goToTagging"
             :disabled="isSaving"
-            class="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center gap-2"
+            class="btn btn-primary"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
@@ -58,9 +60,9 @@
     </div>
 
     <!-- Loading state -->
-    <div v-if="isLoading" class="flex-1 flex items-center justify-center bg-gray-800">
+    <div v-if="isLoading" class="flex-1 flex items-center justify-center bg-gray-950">
       <div class="text-center">
-        <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-gray-600 border-t-blue-400 mb-4"></div>
+        <div class="spinner h-12 w-12 mb-4"></div>
         <p class="text-gray-400">Chargement du document...</p>
       </div>
     </div>
@@ -68,9 +70,9 @@
     <!-- Corps : Split view PDF + Données -->
     <div v-else class="flex-1 flex overflow-hidden">
       <!-- Gauche : PDF Preview -->
-      <div class="w-1/2 border-r border-gray-700 flex flex-col">
-        <div class="flex-shrink-0 px-4 py-2 bg-gray-700/50 border-b border-gray-700">
-          <span class="text-sm text-gray-300">Aperçu PDF</span>
+      <div class="w-2/5 border-r border-gray-700 flex flex-col">
+        <div class="flex-shrink-0 px-4 py-2 bg-gray-900 border-b border-gray-700">
+          <span class="card-title">Aperçu PDF</span>
         </div>
         <div class="flex-1 overflow-hidden">
           <PdfPreview
@@ -79,7 +81,7 @@
             :file-name="documentData?.source_file || 'document.pdf'"
             class="h-full"
           />
-          <div v-else class="h-full flex items-center justify-center bg-gray-800 text-gray-500">
+          <div v-else class="h-full flex items-center justify-center bg-gray-950 text-gray-500">
             <div class="text-center">
               <svg class="mx-auto h-16 w-16 text-gray-600 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
@@ -92,9 +94,9 @@
       </div>
 
       <!-- Droite : Édition ou Tagging -->
-      <div class="w-1/2 flex flex-col bg-gray-50">
+      <div class="w-3/5 flex flex-col bg-gray-950">
         <!-- Bandeau erreur de re-extraction -->
-        <div v-if="reExtractError" class="flex-shrink-0 px-4 py-2 bg-red-500/10 border-b border-red-500/30 text-sm text-red-600">
+        <div v-if="reExtractError" class="flex-shrink-0 px-4 py-2 bg-red-500/10 border-b border-red-500/30 text-sm text-red-400">
           {{ reExtractError }}
         </div>
 
diff --git a/frontend/src/pages/ExtractPage.vue b/frontend/src/pages/ExtractPage.vue
index 0464811..d14c348 100644
--- a/frontend/src/pages/ExtractPage.vue
+++ b/frontend/src/pages/ExtractPage.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="flex-1 flex overflow-hidden">
     <!-- Left panel: Upload or PDF Preview -->
-    <div class="w-1/2 flex flex-col border-r border-gray-700">
+    <div class="w-2/5 flex flex-col border-r border-gray-700">
       <!-- Upload zone when no file -->
-      <div v-if="!pdfFile" class="flex-1 flex items-center justify-center p-8 bg-gray-800">
+      <div v-if="!pdfFile" class="flex-1 flex items-center justify-center p-8 bg-gray-950">
         <div class="max-w-md w-full">
-          <div 
-            class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center hover:border-blue-500 transition-colors cursor-pointer bg-gray-900/50"
+          <div
+            class="border-2 border-dashed border-gray-700 rounded-lg p-8 text-center hover:border-blue-500 transition-colors cursor-pointer bg-gray-900/50"
             @click="triggerFileInput"
             @dragover.prevent="isDragging = true"
             @dragleave.prevent="isDragging = false"
@@ -39,22 +39,22 @@
     </div>
 
     <!-- Right panel: JSON Viewer or Tagging Step -->
-    <div class="w-1/2 flex flex-col bg-gray-50">
+    <div class="w-3/5 flex flex-col bg-gray-950">
       <!-- Extract button bar -->
-      <div v-if="pdfFile && !extractedData && !isExtracting && !showTagging" class="flex-shrink-0 p-4 bg-white border-b border-gray-200">
+      <div v-if="pdfFile && !extractedData && !isExtracting && !showTagging" class="flex-shrink-0 p-4 bg-gray-900 border-b border-gray-700">
         <button
           @click="extractCurrentFile"
-          class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+          class="btn btn-primary w-full py-2.5"
         >
           Extraire les donnees du PDF
         </button>
       </div>
-      
+
       <!-- Continue to tagging button (when data is extracted) -->
-      <div v-if="extractedData && !isExtracting && !showTagging" class="flex-shrink-0 p-4 bg-white border-b border-gray-200">
+      <div v-if="extractedData && !isExtracting && !showTagging" class="flex-shrink-0 p-4 bg-gray-900 border-b border-gray-700">
         <!-- Duplicate warning -->
         <div v-if="saveMessage && saveMessage.type === 'duplicate'" class="mb-3">
-          <div class="px-4 py-3 rounded-lg text-sm bg-yellow-100 text-yellow-800 border border-yellow-200">
+          <div class="px-4 py-3 rounded-lg text-sm bg-amber-500/10 text-amber-400 border border-amber-500/30">
             <div class="font-medium flex items-center gap-2">
               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
@@ -64,10 +64,10 @@
             <div v-if="saveMessage.details" class="mt-1 text-xs opacity-90">{{ saveMessage.details }}</div>
           </div>
         </div>
-        
+
         <button
           @click="goToTagging"
-          class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+          class="btn btn-primary w-full py-2.5"
         >
           Continuer vers le tagging
         </button>
@@ -84,13 +84,13 @@
       />
       
       <!-- Save feedback message -->
-      <div v-if="saveMessage && showTagging" class="flex-shrink-0 p-4 bg-white border-t border-gray-200">
-        <div 
+      <div v-if="saveMessage && showTagging" class="flex-shrink-0 p-4 bg-gray-900 border-t border-gray-700">
+        <div
           :class="[
-            'px-4 py-3 rounded-lg text-sm',
-            saveMessage.type === 'success' ? 'bg-green-100 text-green-800 border border-green-200' : '',
-            saveMessage.type === 'duplicate' ? 'bg-yellow-100 text-yellow-800 border border-yellow-200' : '',
-            saveMessage.type === 'error' ? 'bg-red-100 text-red-800 border border-red-200' : ''
+            'px-4 py-3 rounded-lg text-sm border',
+            saveMessage.type === 'success' ? 'bg-green-500/10 text-green-400 border-green-500/30' : '',
+            saveMessage.type === 'duplicate' ? 'bg-amber-500/10 text-amber-400 border-amber-500/30' : '',
+            saveMessage.type === 'error' ? 'bg-red-500/10 text-red-400 border-red-500/30' : ''
           ]"
         >
           <div class="font-medium">{{ saveMessage.title }}</div>
@@ -99,7 +99,7 @@
       </div>
       
       <!-- Placeholder when no file -->
-      <div v-if="!pdfFile && !showTagging" class="flex-1 flex items-center justify-center text-gray-400">
+      <div v-if="!pdfFile && !showTagging" class="flex-1 flex items-center justify-center text-gray-500">
         <p>Selectionnez un PDF pour commencer</p>
       </div>
       
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index 60f48dd..83e473c 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex-1 overflow-auto p-6 bg-gray-800">
-    <div class="max-w-6xl mx-auto space-y-6">
-      
+  <div class="page">
+    <div class="page-content">
+
       <!-- Zone d'upload PDF visible -->
-      <div 
-        class="border-2 border-dashed border-gray-600 rounded-lg p-6 text-center hover:border-blue-500 transition-colors cursor-pointer bg-gray-900/50"
+      <div
+        class="border-2 border-dashed border-gray-700 rounded-lg p-6 text-center hover:border-blue-500 transition-colors cursor-pointer bg-gray-900/50"
         @click="triggerFileInput"
         @dragover.prevent="isDragging = true"
         @dragleave.prevent="isDragging = false"
@@ -54,16 +54,16 @@
           />
 
           <!-- Derniers documents -->
-          <div id="recent-documents" class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700">
-            <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
-              <h2 class="text-sm font-medium text-gray-300">Derniers documents importes</h2>
+          <div id="recent-documents" class="card">
+            <div class="card-header">
+              <h2 class="card-title">Derniers documents importes</h2>
               <span class="text-xs text-gray-500">{{ documents.length }} documents</span>
             </div>
-            
+
             <div v-if="isLoadingDocs" class="p-8 text-center text-gray-500">
-              <div class="inline-block animate-spin rounded-full h-6 w-6 border-2 border-gray-600 border-t-blue-400"></div>
+              <div class="spinner h-6 w-6"></div>
             </div>
-            
+
             <div v-else-if="documents.length === 0" class="p-8 text-center text-gray-500">
               <svg class="mx-auto h-12 w-12 mb-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
diff --git a/frontend/src/pages/IAPage.vue b/frontend/src/pages/IAPage.vue
index 70b3f7f..c134680 100644
--- a/frontend/src/pages/IAPage.vue
+++ b/frontend/src/pages/IAPage.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="flex-1 overflow-y-auto p-6">
-    <div class="max-w-5xl mx-auto space-y-6">
+  <div class="page">
+    <div class="page-content">
       <!-- Header -->
-      <div class="flex items-center justify-between">
+      <div class="page-header">
         <div>
-          <h1 class="text-2xl font-bold text-white">Assistant IA</h1>
-          <p class="text-gray-400 text-sm mt-1">Posez des questions sur vos données en langage naturel</p>
+          <h1 class="page-title">Assistant IA</h1>
+          <p class="page-subtitle">Posez des questions sur vos données en langage naturel</p>
         </div>
         <div class="flex items-center gap-2">
           <span
@@ -19,19 +19,19 @@
       </div>
 
       <!-- Formulaire -->
-      <div class="bg-gray-800 rounded-lg border border-gray-700 p-4">
+      <div class="card card-body">
         <div class="flex gap-3">
           <input
             v-model="question"
             type="text"
             placeholder="Posez votre question..."
-            class="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 transition-colors"
+            class="input"
             @keydown.enter="askQuestion"
             :disabled="loading"
           />
           <select
             v-model="chartType"
-            class="bg-gray-900 border border-gray-700 rounded-lg px-3 py-2.5 text-white focus:outline-none focus:border-blue-500 transition-colors"
+            class="input w-auto"
             :disabled="loading"
           >
             <option value="auto">Auto</option>
@@ -43,7 +43,7 @@
           <button
             @click="askQuestion"
             :disabled="!question.trim() || loading"
-            class="px-5 py-2.5 bg-blue-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-700"
+            class="btn btn-primary whitespace-nowrap"
           >
             {{ loading ? 'Analyse...' : 'Demander' }}
           </button>
@@ -51,14 +51,14 @@
       </div>
 
       <!-- Exemples de questions -->
-      <div v-if="!result && !loading && !error" class="bg-gray-800 rounded-lg border border-gray-700 p-4">
+      <div v-if="!result && !loading && !error" class="card card-body">
         <p class="text-gray-400 text-sm mb-3">Exemples de questions :</p>
         <div class="flex flex-wrap gap-2">
           <button
             v-for="example in examples"
             :key="example"
             @click="question = example; askQuestion()"
-            class="px-3 py-1.5 text-sm bg-gray-900 border border-gray-700 rounded-lg text-gray-300 hover:border-blue-500 hover:text-white transition-colors"
+            class="btn btn-secondary"
           >
             {{ example }}
           </button>
@@ -66,8 +66,8 @@
       </div>
 
       <!-- Spinner -->
-      <div v-if="loading" class="bg-gray-800 rounded-lg border border-gray-700 p-8 text-center">
-        <div class="inline-block w-8 h-8 border-2 border-gray-600 border-t-blue-500 rounded-full animate-spin mb-3"></div>
+      <div v-if="loading" class="card empty-state">
+        <div class="spinner w-8 h-8 mb-3"></div>
         <p class="text-gray-400">{{ loadingMessage }}</p>
       </div>
 
@@ -77,23 +77,33 @@
       </div>
 
       <!-- Résultat -->
-      <div v-if="result" class="space-y-4">
+      <div v-if="result" class="space-y-6">
         <!-- Réponse texte -->
-        <div class="bg-gray-800 rounded-lg border border-gray-700 p-4">
-          <h2 class="text-sm font-medium text-gray-400 mb-2">Réponse</h2>
-          <p class="text-white whitespace-pre-wrap">{{ result.answer }}</p>
+        <div class="card">
+          <div class="card-header">
+            <h2 class="card-title">Réponse</h2>
+          </div>
+          <div class="card-body">
+            <p class="text-white whitespace-pre-wrap">{{ result.answer }}</p>
+          </div>
         </div>
 
         <!-- Requête SQL -->
-        <div v-if="result.sql_query" class="bg-gray-800 rounded-lg border border-gray-700 p-4">
-          <h2 class="text-sm font-medium text-gray-400 mb-2">Requête SQL exécutée</h2>
-          <pre class="text-xs text-gray-300 font-mono bg-gray-900 rounded p-3 overflow-x-auto">{{ result.sql_query }}</pre>
+        <div v-if="result.sql_query" class="card">
+          <div class="card-header">
+            <h2 class="card-title">Requête SQL exécutée</h2>
+          </div>
+          <div class="card-body">
+            <pre class="text-xs text-gray-300 font-mono bg-gray-950 border border-gray-700 rounded p-3 overflow-x-auto">{{ result.sql_query }}</pre>
+          </div>
         </div>
 
         <!-- Graphique -->
-        <div v-if="result.chart_config && chartComponent" class="bg-gray-800 rounded-lg border border-gray-700 p-4">
-          <h2 class="text-sm font-medium text-gray-400 mb-3">Graphique</h2>
-          <div class="bg-gray-900 rounded-lg p-4">
+        <div v-if="result.chart_config && chartComponent" class="card">
+          <div class="card-header">
+            <h2 class="card-title">Graphique</h2>
+          </div>
+          <div class="card-body">
             <component
               :is="chartComponent"
               :data="result.chart_config.data"
@@ -103,34 +113,22 @@
         </div>
 
         <!-- Tableau de données -->
-        <div v-if="result.data && result.data.columns && result.data.rows && result.data.rows.length > 0" class="bg-gray-800 rounded-lg border border-gray-700 p-4">
-          <h2 class="text-sm font-medium text-gray-400 mb-3">
-            Données ({{ result.data.row_count }} ligne{{ result.data.row_count > 1 ? 's' : '' }})
-          </h2>
-          <div class="overflow-x-auto">
-            <table class="w-full text-sm">
+        <div v-if="result.data && result.data.columns && result.data.rows && result.data.rows.length > 0" class="card">
+          <div class="card-header">
+            <h2 class="card-title">
+              Données ({{ result.data.row_count }} ligne{{ result.data.row_count > 1 ? 's' : '' }})
+            </h2>
+          </div>
+          <div class="table-wrap">
+            <table class="table">
               <thead>
-                <tr class="border-b border-gray-700">
-                  <th
-                    v-for="col in result.data.columns"
-                    :key="col"
-                    class="text-left px-3 py-2 text-gray-400 font-medium"
-                  >
-                    {{ col }}
-                  </th>
+                <tr>
+                  <th v-for="col in result.data.columns" :key="col">{{ col }}</th>
                 </tr>
               </thead>
               <tbody>
-                <tr
-                  v-for="(row, idx) in result.data.rows"
-                  :key="idx"
-                  class="border-b border-gray-700/50 hover:bg-gray-700/30"
-                >
-                  <td
-                    v-for="(cell, cidx) in row"
-                    :key="cidx"
-                    class="px-3 py-2 text-gray-300"
-                  >
+                <tr v-for="(row, idx) in result.data.rows" :key="idx">
+                  <td v-for="(cell, cidx) in row" :key="cidx">
                     {{ formatCell(cell) }}
                   </td>
                 </tr>
diff --git a/frontend/src/pages/RevenusPage.vue b/frontend/src/pages/RevenusPage.vue
index 497ab73..3902aee 100644
--- a/frontend/src/pages/RevenusPage.vue
+++ b/frontend/src/pages/RevenusPage.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="flex-1 overflow-auto p-6 bg-gray-800">
-    <div class="max-w-7xl mx-auto space-y-6">
-      
+  <div class="page">
+    <div class="page-content">
+
       <!-- Header -->
-      <div class="flex items-center justify-between">
+      <div class="page-header">
         <div>
-          <h1 class="text-xl font-semibold text-white">Dashboard Revenus Locatifs</h1>
-          <p class="text-sm text-gray-400 mt-1">
+          <h1 class="page-title">Dashboard Revenus Locatifs</h1>
+          <p class="page-subtitle">
             Suivi et analyse des loyers, reglements et impayes
           </p>
         </div>
@@ -14,10 +14,10 @@
           <div v-if="lastUpdate" class="text-xs text-gray-500">
             Derniere mise a jour: {{ lastUpdate }}
           </div>
-          <button 
+          <button
             @click="loadData"
             :disabled="isLoading"
-            class="px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50"
+            class="btn btn-primary"
           >
             <span v-if="isLoading">Chargement...</span>
             <span v-else>Actualiser</span>