From 9f9b67918e6517f42d40cf891958a214e5c36191 Mon Sep 17 00:00:00 2001
From: MiloKow <miloperso.kowalska@gmail.com>
Date: Tue, 16 Sep 2025 14:15:27 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20[ADD]=20Adding=20the?=
 =?UTF-8?q?=20front=20of=20the=20autowallet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AutoWallet.vue             |  318 +++--
 .../src/components/FullPipelineDashboard.vue  |  665 ++++++-----
 .../src/components/NewsAlertsDashboard.vue    | 1047 ++++-------------
 .../pipeline_agent/components/AutoWallet.vue  |  197 +++-
 .../components/TradingPipeline.vue            |  425 ++++---
 5 files changed, 1150 insertions(+), 1502 deletions(-)

diff --git a/crypto-pilot-builder/src/components/AutoWallet.vue b/crypto-pilot-builder/src/components/AutoWallet.vue
index 50b6e16..6b4f080 100644
--- a/crypto-pilot-builder/src/components/AutoWallet.vue
+++ b/crypto-pilot-builder/src/components/AutoWallet.vue
@@ -1,12 +1,22 @@
 <template>
   <div class="autowallet-container">
     <div class="header">
-      <h1>🤖 CryptoPilot AutoWallet</h1>
-      <p class="subtitle">IA d'investissement automatique basée sur l'analyse des news crypto</p>
-      <div class="header-actions">
-        <router-link to="/pipeline-test" class="btn btn-outline">
-          🧪 Tester la Pipeline
-        </router-link>
+      <div class="title-row">
+        <div class="title-chip">🤖</div>
+        <div class="title-text">
+          <h1>CryptoPilot AutoWallet</h1>
+          <p class="subtitle">IA d'investissement automatique basée sur l'analyse des news crypto</p>
+        </div>
+        <div class="header-kpis" v-if="autowalletConfig">
+          <div class="kpi">
+            <span class="kpi-label">Trades</span>
+            <span class="kpi-value">{{ autowalletConfig.total_trades }}</span>
+          </div>
+          <div class="kpi">
+            <span class="kpi-label">Aujourd'hui</span>
+            <span class="kpi-value">{{ autowalletConfig.today_trades }}/{{ autowalletConfig.max_daily_trades }}</span>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -15,7 +25,7 @@
       <div class="card">
         <h2>🚀 Configuration initiale</h2>
         <p>Configurez votre autowallet pour commencer l'investissement automatique</p>
-        
+
         <!-- Bouton de configuration rapide -->
         <div class="quick-setup">
           <button @click="createDefaultConfig" class="btn btn-success" :disabled="isLoading">
@@ -23,17 +33,17 @@
           </button>
           <p class="quick-hint">Utilise les paramètres par défaut optimisés pour commencer rapidement</p>
         </div>
-        
+
         <div class="separator">
           <span>ou</span>
         </div>
-        
+
         <form @submit.prevent="createAutowallet" class="config-form">
           <div class="form-group">
             <label>Activer l'autowallet</label>
             <input type="checkbox" v-model="newConfig.is_active" />
           </div>
-          
+
           <div class="form-group">
             <label>Intervalle d'analyse (minutes)</label>
             <select v-model="newConfig.analysis_interval">
@@ -43,12 +53,12 @@
               <option value="60">1 heure</option>
             </select>
           </div>
-          
+
           <div class="form-group">
             <label>Montant maximum par trade (USD)</label>
             <input type="number" v-model="newConfig.max_investment_per_trade" min="10" step="10" />
           </div>
-          
+
           <div class="form-group">
             <label>Tolérance au risque</label>
             <select v-model="newConfig.risk_tolerance">
@@ -57,7 +67,7 @@
               <option value="high">Élevée</option>
             </select>
           </div>
-          
+
           <div class="form-group">
             <label>Stratégie d'investissement</label>
             <select v-model="newConfig.investment_strategy">
@@ -66,12 +76,12 @@
               <option value="aggressive">Agressive</option>
             </select>
           </div>
-          
+
           <div class="form-group">
             <label>Seuil de confiance minimum (%)</label>
             <input type="number" v-model="newConfig.min_confidence_threshold" min="50" max="95" step="5" />
           </div>
-          
+
           <div class="form-group">
             <label>Cryptomonnaies autorisées</label>
             <div class="crypto-list">
@@ -81,7 +91,7 @@
               </label>
             </div>
           </div>
-          
+
           <button type="submit" class="btn btn-primary" :disabled="isLoading">
             {{ isLoading ? 'Création...' : 'Créer l\'autowallet' }}
           </button>
@@ -96,13 +106,13 @@
         <div class="status-grid">
           <div class="status-item">
             <span class="label">Statut:</span>
-            <span :class="['status', autowalletConfig.is_active ? 'active' : 'inactive']">
+            <span :class="['status-pill', autowalletConfig.is_active ? 'on' : 'off']">
               {{ autowalletConfig.is_active ? 'Actif' : 'Inactif' }}
             </span>
           </div>
           <div class="status-item">
             <span class="label">Monitoring:</span>
-            <span :class="['status', autowalletConfig.is_monitoring ? 'active' : 'inactive']">
+            <span :class="['status-pill', autowalletConfig.is_monitoring ? 'on' : 'off']">
               {{ autowalletConfig.is_monitoring ? 'En cours' : 'Arrêté' }}
             </span>
           </div>
@@ -115,21 +125,21 @@
             <span class="value">{{ autowalletConfig.total_trades }}</span>
           </div>
         </div>
-        
+
         <div class="actions">
-          <button 
-            @click="startMonitoring" 
-            class="btn btn-success" 
+          <button
+            @click="startMonitoring"
+            class="btn btn-success"
             :disabled="autowalletConfig.is_monitoring || !autowalletConfig.is_active"
           >
-            Démarrer le monitoring
+            ▶️ Démarrer
           </button>
-          <button 
-            @click="stopMonitoring" 
-            class="btn btn-warning" 
+          <button
+            @click="stopMonitoring"
+            class="btn btn-warning"
             :disabled="!autowalletConfig.is_monitoring"
           >
-            Arrêter le monitoring
+            ⏸️ Arrêter
           </button>
         </div>
       </div>
@@ -138,9 +148,9 @@
       <div class="main-navigation card">
         <h3>🎛️ Navigation du Dashboard</h3>
         <p class="nav-description">Sélectionnez la section que vous souhaitez consulter</p>
-        
+
         <div class="nav-buttons">
-          <button 
+          <button
             @click="currentPage = 'overview'"
             class="nav-btn"
             :class="{ active: currentPage === 'overview' }"
@@ -148,8 +158,8 @@
             <span class="nav-icon">📊</span>
             <span class="nav-label">Vue d'ensemble</span>
           </button>
-          
-          <button 
+
+          <button
             @click="currentPage = 'news-alerts'"
             class="nav-btn"
             :class="{ active: currentPage === 'news-alerts' }"
@@ -157,8 +167,8 @@
             <span class="nav-icon">📰🚨</span>
             <span class="nav-label">News + Alertes</span>
           </button>
-          
-          <button 
+
+          <button
             @click="currentPage = 'pipeline'"
             class="nav-btn"
             :class="{ active: currentPage === 'pipeline' }"
@@ -171,7 +181,7 @@
 
       <!-- Contenu des sous-pages -->
       <div class="page-content">
-        
+
         <!-- Vue d'ensemble -->
         <div v-if="currentPage === 'overview'" class="overview-page">
       <!-- Configuration actuelle -->
@@ -199,23 +209,25 @@
             <span class="value">{{ autowalletConfig.min_confidence_threshold }}%</span>
           </div>
         </div>
-        
-        <button @click="showEditConfig = true" class="btn btn-secondary">
-          Modifier la configuration
-        </button>
+
+        <div class="overview-actions">
+          <button @click="showEditConfig = true" class="btn btn-secondary">
+            ✏️ Modifier la configuration
+          </button>
+        </div>
           </div>
         </div>
-        
+
         <!-- Sous-page 1: News + Alertes -->
         <div v-if="currentPage === 'news-alerts'" class="news-alerts-page">
           <NewsAlertsDashboard />
         </div>
-        
+
         <!-- Sous-page 2: Pipeline d'exécution -->
         <div v-if="currentPage === 'pipeline'" class="pipeline-page">
           <FullPipelineDashboard />
         </div>
-        
+
       </div>
 
 
@@ -225,10 +237,10 @@
     <Modal v-if="showEditConfig" @close="showEditConfig = false">
       <template #header>Modifier la configuration</template>
       <template #body>
-        <EditConfigForm 
-          :config="autowalletConfig" 
-          @save="updateConfig" 
-          @cancel="showEditConfig = false" 
+        <EditConfigForm
+          :config="autowalletConfig"
+          @save="updateConfig"
+          @cancel="showEditConfig = false"
         />
       </template>
     </Modal>
@@ -269,7 +281,7 @@ export default {
     const isLoading = ref(false)
     const showEditConfig = ref(false)
     const showAddChannel = ref(false)
-    
+
     // Variables pour la pipeline de trading
     const pipelineStatus = ref({})
     const pipelineMarketData = ref({})
@@ -282,8 +294,10 @@ export default {
       max_investment_per_trade: 100,
       risk_tolerance: 'medium',
       investment_strategy: 'balanced',
-      min_confidence_threshold: 30,  // 30% au lieu de 70%
-      crypto_whitelist: ['BTC', 'ETH', 'ADA', 'DOT', 'SOL']
+      min_confidence_threshold: 0.3,  // Utiliser le nom attendu par le backend
+      max_daily_trades: 10,
+      stop_loss_percentage: 5.0,
+      take_profit_percentage: 15.0
     })
 
     const availableCryptos = [
@@ -314,7 +328,7 @@ export default {
           await createDefaultConfig()
         }
       }
-      
+
       // Toujours charger les alertes, même si la config n'existe pas
       await loadRecentAlerts()
       await loadPipelineStatus()
@@ -334,12 +348,12 @@ export default {
           stop_loss_percentage: 5.0,
           take_profit_percentage: 15.0
         }
-        
+
         const response = await apiService.request('/api/autowallet/config', {
           method: 'POST',
           body: defaultConfig
         })
-        
+
         if (response.success) {
           console.log('Configuration par défaut créée avec succès')
           autowalletConfig.value = defaultConfig
@@ -347,7 +361,7 @@ export default {
           await loadRecentNews()
           await loadTradeHistory()
           await loadRecentAlerts()
-          
+
           // Démarrer l'analyse automatique
           await startAutoAnalysis()
         }
@@ -422,7 +436,7 @@ export default {
           method: 'POST',
           body: newConfig.value
         })
-        
+
         if (response.success) {
           await loadAutowalletConfig()
         }
@@ -439,7 +453,7 @@ export default {
         const response = await apiService.request('/api/autowallet/start', {
           method: 'POST'
         })
-        
+
         if (response.success) {
           await loadAutowalletConfig()
         }
@@ -454,7 +468,7 @@ export default {
         const response = await apiService.request('/api/autowallet/stop', {
           method: 'POST'
         })
-        
+
         if (response.success) {
           await loadAutowalletConfig()
         }
@@ -469,7 +483,7 @@ export default {
         const response = await apiService.request('/api/autowallet/start', {
           method: 'POST'
         })
-        
+
         if (response.success) {
           console.log('✅ Analyse automatique démarrée')
           await loadAutowalletConfig()
@@ -483,19 +497,19 @@ export default {
     const analyzeNews = async (newsIds) => {
       try {
         console.log('🔍 Analyse des news:', newsIds)
-        
+
         const response = await apiService.request('/api/autowallet/analyze', {
           method: 'POST',
           body: { news_ids: newsIds }
         })
-        
+
         if (response.success) {
           console.log('✅ Alertes générées:', response.alerts)
           console.log(`📊 ${response.count} alertes créées`)
-          
+
           // Recharger les alertes récentes
           await loadRecentAlerts()
-          
+
           // Afficher un message de succès à l'utilisateur
           if (response.count > 0) {
             alert(`✅ ${response.count} alerte(s) générée(s) avec succès !`)
@@ -505,10 +519,10 @@ export default {
         }
       } catch (error) {
         console.error('❌ Erreur lors de l\'analyse:', error)
-        
+
         // Afficher un message d'erreur à l'utilisateur
         let errorMessage = 'Erreur lors de l\'analyse des news'
-        
+
         if (error.message.includes('401')) {
           errorMessage = 'Erreur d\'authentification. Veuillez vous reconnecter.'
         } else if (error.message.includes('404')) {
@@ -518,7 +532,7 @@ export default {
         } else if (error.message.includes('500')) {
           errorMessage = 'Erreur serveur. Veuillez réessayer plus tard.'
         }
-        
+
         alert(`❌ ${errorMessage}`)
       }
     }
@@ -529,7 +543,7 @@ export default {
     }
 
     // ===== MÉTHODES DE LA PIPELINE DE TRADING =====
-    
+
     // Charger le statut de la pipeline
     const loadPipelineStatus = async () => {
       try {
@@ -601,7 +615,7 @@ export default {
         const response = await apiService.request('/api/trading-pipeline/start', {
           method: 'POST'
         })
-        
+
         if (response.success) {
           await loadPipelineStatus()
         }
@@ -619,7 +633,7 @@ export default {
         const response = await apiService.request('/api/trading-pipeline/stop', {
           method: 'POST'
         })
-        
+
         if (response.success) {
           await loadPipelineStatus()
         }
@@ -695,7 +709,7 @@ export default {
           method: 'POST',
           body: channelData
         })
-        
+
         if (response.success) {
           await loadAlertChannels()
           showAddChannel.value = false
@@ -711,7 +725,7 @@ export default {
         const response = await apiService.request(`/api/autowallet/alerts/channels/${channelId}`, {
           method: 'DELETE'
         })
-        
+
         if (response.success) {
           await loadAlertChannels()
         }
@@ -728,7 +742,7 @@ export default {
           method: 'PUT',
           body: { is_active: !channel.is_active }
         })
-        
+
         if (response.success) {
           await loadAlertChannels()
         }
@@ -744,7 +758,7 @@ export default {
           method: 'PUT',
           body: updatedConfig
         })
-        
+
         if (response.success) {
           await loadAutowalletConfig()
           showEditConfig.value = false
@@ -866,6 +880,46 @@ export default {
   margin-bottom: 30px;
 }
 
+.title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.title-chip {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  background: var(--primary-gradient);
+  box-shadow: var(--card-shadow);
+  font-size: 28px;
+}
+
+.title-text h1 {
+  margin: 0 0 4px 0;
+}
+
+.header-kpis {
+  display: flex;
+  gap: 12px;
+}
+
+.kpi {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  padding: 10px 14px;
+  text-align: left;
+  min-width: 120px;
+}
+
+.kpi-label { color: var(--text-secondary); font-size: 12px; display: block; }
+.kpi-value { font-weight: 700; font-size: 18px; }
+
 .header h1 {
   color: var(--text-primary);
   margin-bottom: 10px;
@@ -1124,36 +1178,35 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px;
-  background: #f8f9fa;
-  border-radius: 8px;
+  padding: 12px 14px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  box-shadow: var(--card-shadow);
 }
 
 .label {
-  font-weight: 600;
-  color: #34495e;
+  font-weight: 700;
+  color: var(--text-secondary);
 }
 
 .value {
-  color: #2c3e50;
-}
-
-.status {
-  padding: 4px 12px;
-  border-radius: 20px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.status.active {
-  background: #d4edda;
-  color: #155724;
+  color: #f8fafc;
+  background: rgba(255, 255, 255, 0.15);
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-weight: 700;
 }
 
-.status.inactive {
-  background: #f8d7da;
-  color: #721c24;
+.status-pill {
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: .2px;
 }
+.status-pill.on { background: #16a34a1a; color: #22c55e; border: 1px solid #16a34a66; }
+.status-pill.off { background: #ef44441a; color: #f87171; border: 1px solid #ef444466; }
 
 .actions {
   display: flex;
@@ -1771,20 +1824,25 @@ export default {
     color: #7f8c8d;
   }
 
+  .overview-actions {
+    display: flex;
+    justify-content: flex-start;
+  }
+
 @media (max-width: 768px) {
   .autowallet-container {
     padding: 16px;
   }
-  
+
   .card {
     padding: 16px;
   }
-  
+
   .status-grid,
   .config-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .news-analysis {
     flex-direction: column;
     gap: 8px;
@@ -1801,13 +1859,13 @@ export default {
   .pipeline-status-grid {
     grid-template-columns: repeat(2, 1fr);
   }
-  
+
   .trade-item {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
   }
-  
+
   .trade-details {
     flex-direction: column;
     gap: 8px;
@@ -1817,8 +1875,9 @@ export default {
 /* Styles pour la navigation principale */
 .main-navigation {
   margin-bottom: 30px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, rgba(102,126,234,.25) 0%, rgba(118,75,162,.25) 100%);
   color: white;
+  border: 1px solid var(--glass-border);
 }
 
 .main-navigation h3 {
@@ -1843,42 +1902,44 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 20px 25px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 15px;
+  gap: 10px;
+  padding: 18px 24px;
+  border: 1px solid var(--glass-border);
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
   cursor: pointer;
   transition: all 0.3s ease;
-  font-weight: 500;
+  font-weight: 600;
   color: white;
-  min-width: 150px;
-  backdrop-filter: blur(10px);
+  min-width: 170px;
+  backdrop-filter: blur(12px);
+  box-shadow: var(--card-shadow);
 }
 
 .nav-btn:hover {
-  border-color: rgba(255, 255, 255, 0.6);
-  background: rgba(255, 255, 255, 0.2);
-  transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+  border-color: rgba(255, 255, 255, 0.35);
+  background: rgba(255, 255, 255, 0.16);
+  transform: translateY(-4px);
+  box-shadow: var(--card-shadow-hover);
 }
 
 .nav-btn.active {
-  background: rgba(255, 255, 255, 0.9);
-  border-color: white;
-  color: #2c3e50;
-  transform: translateY(-3px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-color: transparent;
+  color: #ffffff;
+  transform: translateY(-4px);
+  box-shadow: var(--card-shadow-hover);
 }
 
 .nav-icon {
-  font-size: 2rem;
+  font-size: 2.1rem;
 }
 
 .nav-label {
-  font-size: 0.9rem;
-  font-weight: 600;
+  font-size: 0.95rem;
+  font-weight: 700;
   text-align: center;
+  letter-spacing: .2px;
 }
 
 /* ===== VARIABLES CSS COHÉRENTES AVEC FULLPIPELINEDASHBOARD ===== */
@@ -1971,7 +2032,10 @@ export default {
 
 /* Amélioration des cartes */
 .card {
-  background: white;
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
   box-shadow: var(--card-shadow);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   border-radius: 1rem;
@@ -2054,28 +2118,28 @@ export default {
 }
 
 @keyframes pulse-green {
-  0%, 100% { 
+  0%, 100% {
     box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
   }
-  50% { 
+  50% {
     box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
   }
 }
 
 @keyframes pulse-yellow {
-  0%, 100% { 
+  0%, 100% {
     box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
   }
-  50% { 
+  50% {
     box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
   }
 }
 
 @keyframes pulse-red {
-  0%, 100% { 
+  0%, 100% {
     box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
   }
-  50% { 
+  50% {
     box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
   }
 }
@@ -2104,7 +2168,7 @@ export default {
     flex-direction: column;
     gap: 15px;
   }
-  
+
   .nav-btn {
     min-width: auto;
     width: 100%;
@@ -2112,11 +2176,11 @@ export default {
     justify-content: center;
     padding: 15px 20px;
   }
-  
+
   .nav-icon {
     font-size: 1.5rem;
   }
-  
+
   .nav-label {
     font-size: 1rem;
   }
diff --git a/crypto-pilot-builder/src/components/FullPipelineDashboard.vue b/crypto-pilot-builder/src/components/FullPipelineDashboard.vue
index 9768e0a..f29f771 100644
--- a/crypto-pilot-builder/src/components/FullPipelineDashboard.vue
+++ b/crypto-pilot-builder/src/components/FullPipelineDashboard.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="pipeline-dashboard">
+    <div class="page-container">
     <!-- Header -->
     <header class="gradient-bg text-white shadow-lg rounded-lg mb-8">
       <div class="px-6 py-4">
@@ -10,7 +11,7 @@
           </div>
           <div class="flex items-center space-x-4">
             <div class="flex items-center space-x-2">
-              <div 
+              <div
                 :class="[
                   'status-indicator',
                   pipelineStatus.is_running ? 'running' : 'stopped'
@@ -29,76 +30,76 @@
     </header>
 
     <!-- Pipeline Control -->
-    <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
+    <div class="card-dark rounded-xl p-8 mb-8">
       <div class="text-center mb-8">
-        <h2 class="text-3xl font-bold text-gradient mb-2">🎮 Contrôle du Pipeline</h2>
-        <p class="text-gray-600">Lancez le pipeline complet ou exécutez les agents individuellement</p>
+        <h2 class="text-3xl font-bold section-title mb-2 ">🎮 Contrôle du Pipeline</h2>
+        <p class="lede">Lancez le pipeline complet ou exécutez les agents individuellement</p>
       </div>
-      
+
       <div class="flex justify-center space-x-6 mb-8">
-        <button 
+        <button
           @click="startPipeline"
           :disabled="isLoading || pipelineStatus.is_running"
-          class="px-8 py-4 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-xl font-bold text-lg hover:from-green-600 hover:to-emerald-600 transition-all transform hover:scale-105 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+          class="cta-btn cta-start"
         >
           <span v-if="isLoading">🚀 Démarrage...</span>
           <span v-else-if="pipelineStatus.is_running">✅ Pipeline Actif</span>
           <span v-else>🚀 Lancer Pipeline</span>
         </button>
-        <button 
+        <button
           @click="stopPipeline"
           :disabled="isLoading || !pipelineStatus.is_running"
-          class="px-8 py-4 bg-gradient-to-r from-red-500 to-rose-500 text-white rounded-xl font-bold text-lg hover:from-red-600 hover:to-rose-600 transition-all transform hover:scale-105 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+          class="cta-btn cta-stop"
         >
           <span v-if="isLoading">🛑 Arrêt...</span>
           <span v-else>🛑 Arrêter Pipeline</span>
         </button>
       </div>
-      
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <button 
+
+      <div class="agent-controls-grid">
+        <button
           @click="executeSingleAgent('data_collector')"
           :disabled="isLoading"
           class="agent-control-btn bg-blue-500 hover:bg-blue-600 disabled:opacity-50"
         >
           📊 DataCollector
         </button>
-        <button 
+        <button
           @click="executeSingleAgent('news_collector')"
           :disabled="isLoading"
           class="agent-control-btn bg-cyan-500 hover:bg-cyan-600 disabled:opacity-50"
         >
           📰 NewsCollector
         </button>
-        <button 
+        <button
           @click="executeSingleAgent('data_aggregator')"
           :disabled="isLoading"
           class="agent-control-btn bg-indigo-500 hover:bg-indigo-600 disabled:opacity-50"
         >
           🔄 DataAggregator
         </button>
-        <button 
+        <button
           @click="executeSingleAgent('predictor')"
           :disabled="isLoading"
           class="agent-control-btn bg-purple-500 hover:bg-purple-600 disabled:opacity-50"
         >
           🔮 Predictor
         </button>
-        <button 
+        <button
           @click="executeSingleAgent('strategy')"
           :disabled="isLoading"
           class="agent-control-btn bg-emerald-500 hover:bg-emerald-600 disabled:opacity-50"
         >
           📈 Strategy
         </button>
-        <button 
+        <button
           @click="executeSingleAgent('trader')"
           :disabled="isLoading"
           class="agent-control-btn bg-amber-500 hover:bg-amber-600 disabled:opacity-50"
         >
           💰 Trader
         </button>
-        <button 
+        <button
           @click="executeSingleAgent('logger')"
           :disabled="isLoading"
           class="agent-control-btn bg-gray-500 hover:bg-gray-600 disabled:opacity-50"
@@ -109,10 +110,10 @@
     </div>
 
     <!-- Pipeline Flow Visualization -->
-    <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
-      <h3 class="text-2xl font-bold text-gradient-secondary mb-6 text-center">🔄 Flux du Pipeline</h3>
+    <div class="card-dark rounded-xl p-8 mb-8">
+      <h3 class="text-2xl font-bold section-title mb-6 text-center">🔄 Flux du Pipeline</h3>
       <div class="flex items-center justify-center space-x-4 mb-8 overflow-x-auto">
-        <div 
+        <div
           v-for="agent in agentFlow"
           :key="agent.name"
           :class="[
@@ -121,63 +122,61 @@
           ]"
         >
           <div class="text-2xl mb-2">{{ agent.icon }}</div>
-          <div class="font-semibold">{{ agent.displayName }}</div>
-          <div class="text-sm text-gray-600">{{ agent.description }}</div>
+          <div class="font-semibold text-slate-100">{{ agent.displayName }}</div>
+          <div class="text-sm text-slate-300">{{ agent.description }}</div>
           <div class="text-xs mt-1">
-            {{ getAgentExecutionCount(agent.name) }} exécutions
+            <span class="px-2 py-0.5 rounded-full bg-slate-800/60 border border-slate-700 text-slate-200">{{ getAgentExecutionCount(agent.name) }} exécutions</span>
           </div>
         </div>
       </div>
     </div>
 
     <!-- Real-time Data -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+    <div class="two-col-grid mb-8">
       <!-- Historique des Prix -->
-      <div class="bg-white rounded-xl shadow-lg p-6">
-        <h3 class="text-xl font-bold text-gray-900 mb-4">📊 Historique des Prix Bitcoin</h3>
-        <div class="space-y-2 max-h-64 overflow-y-auto">
-          <div 
+      <div class="card-dark rounded-xl p-6">
+        <h3 class="card-title mb-4">📊 Historique des Prix Bitcoin</h3>
+        <div class="history-list text-slate-200">
+          <div
             v-for="(price, index) in priceHistory"
             :key="index"
-            class="flex items-center justify-between p-3 bg-gray-50 rounded-lg mb-2"
+            class="history-row"
           >
-            <div class="flex items-center space-x-3">
-              <div class="text-sm text-gray-500">{{ formatTime(price.timestamp) }}</div>
-              <div class="font-medium">${{ price.price?.toLocaleString() }}</div>
+            <div class="history-left">
+              <div class="time">{{ formatTime(price.timestamp) }}</div>
+              <div class="price">${{ price.price?.toLocaleString() }}</div>
             </div>
-            <div class="text-right">
-              <div v-if="price.prediction" class="text-sm" :class="getPredictionClass(price.prediction.direction)">
-                {{ price.prediction.direction }} ({{ Math.round(price.prediction.confidence * 100) }}%)
-              </div>
-              <div v-if="price.strategy_signal" class="text-xs" :class="getSignalClass(price.strategy_signal.action)">
+            <div class="history-right">
+              <span v-if="price.prediction" :class="getPredictionClass(price.prediction.direction)">
+                {{ price.prediction.direction }} {{ Math.round(price.prediction.confidence * 100) }}%
+              </span>
+              <span v-if="price.strategy_signal" :class="getSignalClass(price.strategy_signal.action)">
                 {{ price.strategy_signal.action }}
-              </div>
+              </span>
             </div>
           </div>
-          <div v-if="priceHistory.length === 0" class="text-gray-500 text-center py-8">
+          <div v-if="priceHistory.length === 0" class="text-slate-400 text-center py-8">
             Chargement des données...
           </div>
         </div>
       </div>
 
       <!-- Agent Status -->
-      <div class="bg-white rounded-xl shadow-lg p-6">
-        <h3 class="text-xl font-bold text-gray-900 mb-4">🤖 Statut des Agents</h3>
-        <div class="space-y-3">
-          <div 
+      <div class="card-dark rounded-xl p-6">
+        <h3 class="card-title mb-4">🤖 Statut des Agents</h3>
+        <div class="agent-list">
+          <div
             v-for="(agent, name) in pipelineStatus.agents"
             :key="name"
-            class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+            class="stat-row"
           >
-            <div class="flex items-center">
+            <div class="stat-left">
               <div :class="['status-indicator', agent.status]"></div>
-              <span class="font-medium capitalize">{{ formatAgentName(name) }}</span>
+              <span class="name">{{ formatAgentName(name) }}</span>
             </div>
-            <div class="text-right">
-              <div class="text-sm font-medium">{{ agent.execution_count }} exécutions</div>
-              <div class="text-xs text-gray-500">
-                {{ formatTime(agent.last_execution) }}
-              </div>
+            <div class="stat-right">
+              <span class="badge">{{ agent.execution_count }} exec</span>
+              <span class="meta">{{ formatTime(agent.last_execution) }}</span>
             </div>
           </div>
         </div>
@@ -185,27 +184,27 @@
     </div>
 
     <!-- Market Data -->
-    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
-      <h3 class="text-xl font-bold text-gray-900 mb-4">💹 Données de Marché</h3>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div class="text-center p-4 bg-gray-50 rounded-lg">
+    <div class="card-dark rounded-xl p-6 mb-8">
+      <h3 class="card-title mb-4">💹 Données de Marché</h3>
+      <div class="metrics-grid">
+        <div class="text-center p-4 bg-slate-800/40 border border-slate-700 rounded-lg">
           <div class="text-2xl mb-2">₿</div>
-          <div class="text-sm text-gray-600">Bitcoin</div>
-          <div class="text-xl font-bold text-gray-900">
+          <div class="text-sm text-slate-300">Bitcoin</div>
+          <div class="text-xl font-bold text-slate-100">
             ${{ getLatestPrice()?.toLocaleString() || '--' }}
           </div>
         </div>
-        <div class="text-center p-4 bg-gray-50 rounded-lg">
+        <div class="text-center p-4 bg-slate-800/40 border border-slate-700 rounded-lg">
           <div class="text-2xl mb-2">📈</div>
-          <div class="text-sm text-gray-600">Volume 24h</div>
-          <div class="text-xl font-bold text-gray-900">
+          <div class="text-sm text-slate-300">Volume 24h</div>
+          <div class="text-xl font-bold text-slate-100">
             {{ getLatestVolume() ? (getLatestVolume() / 1000000).toFixed(1) + 'M' : '--' }}
           </div>
         </div>
-        <div class="text-center p-4 bg-gray-50 rounded-lg">
+        <div class="text-center p-4 bg-slate-800/40 border border-slate-700 rounded-lg">
           <div class="text-2xl mb-2">🔄</div>
-          <div class="text-sm text-gray-600">Dernière Mise à jour</div>
-          <div class="text-sm font-medium text-gray-600">
+          <div class="text-sm text-slate-300">Dernière Mise à jour</div>
+          <div class="text-sm font-medium text-slate-300">
             {{ formatTime(pipelineStatus.last_execution) }}
           </div>
         </div>
@@ -213,250 +212,237 @@
     </div>
 
     <!-- Pipeline Logs -->
-    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
-      <h3 class="text-xl font-bold text-gray-900 mb-4">📝 Logs du Pipeline</h3>
-      <div class="space-y-2 max-h-64 overflow-y-auto bg-gray-50 p-4 rounded-lg">
-        <div 
+    <div class="card-dark rounded-xl p-6 mb-8">
+      <h3 class="card-title mb-4">📝 Logs du Pipeline</h3>
+      <div class="log-list">
+        <div
           v-for="(log, index) in pipelineLogs"
           :key="index"
-          class="flex items-center space-x-3 p-2 bg-white rounded border-l-4 border-blue-500"
+          class="log-row"
         >
-          <div class="text-xs text-gray-500">{{ formatTime(log.timestamp) }}</div>
-          <div class="flex-1">
-            <div class="text-sm font-medium">{{ log.symbol }}</div>
-            <div class="text-xs text-gray-600">
-              Prix: ${{ log.price?.toLocaleString() || 'N/A' }} | 
-              Signal: {{ log.strategy_signal?.action || 'N/A' }}
-            </div>
-          </div>
-        </div>
-        <div v-if="pipelineLogs.length === 0" class="text-gray-500 text-center py-8">
-          Aucun log disponible
+          <span class="time">{{ formatTime(log.timestamp) }}</span>
+          <span class="symbol-chip">{{ log.symbol || '—' }}</span>
+          <span class="price">${{ log.price?.toLocaleString() || 'N/A' }}</span>
+          <span
+            class="signal-badge"
+            :class="(log.strategy_signal?.action || 'hold').toLowerCase()"
+          >
+            {{ log.strategy_signal?.action || 'HOLD' }}
+          </span>
         </div>
+        <div v-if="pipelineLogs.length === 0" class="empty">Aucun log disponible</div>
       </div>
     </div>
 
     <!-- Logger Agent - Monitoring du Pipeline -->
-    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
-      <h3 class="text-xl font-bold text-gray-900 mb-4">🔍 Logger Agent - Monitoring du Pipeline</h3>
-      
+    <div class="card-dark rounded-xl p-6 mb-8">
+      <h3 class="card-title mb-4">🔍 Logger Agent - Monitoring du Pipeline</h3>
+
       <!-- Boutons d'action -->
-      <div class="flex flex-wrap gap-4 mb-6">
-        <button 
-          @click="callLoggerAgent"
-          :disabled="isLoading"
-          class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center disabled:opacity-50"
-        >
-          <span class="mr-2">🧪</span>
-          Tester le Logger Agent
+      <div class="logger-actions">
+        <button @click="callLoggerAgent" :disabled="isLoading" class="chip-btn chip-success">
+          🧪 Tester le Logger Agent
         </button>
-        <button 
-          @click="clearLoggerData"
-          class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center"
-        >
-          <span class="mr-2">🗑️</span>
-          Effacer les Données
+        <button @click="clearLoggerData" class="chip-btn chip-slate">
+          🗑️ Effacer les Données
         </button>
       </div>
 
-      <!-- Statut du pipeline -->
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
-        <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
-          <h4 class="font-semibold text-blue-800 text-sm mb-2">Statut du Pipeline</h4>
-          <p class="text-blue-600 font-medium">
-            {{ pipelineStatus.is_running ? 'Actif' : 'Arrêté' }}
-          </p>
+      <!-- Statut du pipeline - KPIs -->
+      <div class="kpi-grid mb-6">
+        <div class="kpi-card">
+          <div class="kpi-icon">🟢</div>
+          <div class="kpi-content">
+            <div class="kpi-value" :class="pipelineStatus.is_running ? 'text-emerald' : 'text-rose'">
+              {{ pipelineStatus.is_running ? 'Actif' : 'Arrêté' }}
+            </div>
+            <div class="kpi-label">Statut du Pipeline</div>
+          </div>
         </div>
-        <div class="bg-green-50 p-4 rounded-lg border border-green-200">
-          <h4 class="font-semibold text-green-800 text-sm mb-2">Agents Actifs</h4>
-          <p class="text-green-600 font-medium">
-            {{ getActiveAgentsCount() }}/{{ Object.keys(pipelineStatus.agents || {}).length }}
-          </p>
+        <div class="kpi-card">
+          <div class="kpi-icon">👥</div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ getActiveAgentsCount() }}</div>
+            <div class="kpi-label">Agents Actifs</div>
+          </div>
         </div>
-        <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
-          <h4 class="font-semibold text-purple-800 text-sm mb-2">Exécutions Totales</h4>
-          <p class="text-purple-600 font-medium">
-            {{ getTotalExecutions() }}
-          </p>
+        <div class="kpi-card">
+          <div class="kpi-icon">⚙️</div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ getTotalExecutions() }}</div>
+            <div class="kpi-label">Exécutions Totales</div>
+          </div>
+        </div>
+        <div class="kpi-card">
+          <div class="kpi-icon">🔮</div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ pipelineStatus.predictions_count || 0 }}</div>
+            <div class="kpi-label">Prédictions</div>
+          </div>
+        </div>
+        <div class="kpi-card">
+          <div class="kpi-icon">📈</div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ pipelineStatus.signals_count || 0 }}</div>
+            <div class="kpi-label">Signaux</div>
+          </div>
         </div>
       </div>
 
       <!-- Métriques détaillées -->
-      <div class="bg-gray-50 p-4 rounded-lg mb-6 border border-gray-200">
-        <h4 class="font-semibold text-gray-800 mb-3">📈 Métriques du Pipeline</h4>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div>
-            <span class="text-sm text-gray-600">Exécutions Totales:</span>
-            <p class="font-semibold text-lg">{{ getTotalExecutions() }}</p>
+      <div class="bg-slate-800/40 p-4 rounded-lg mb-6 border border-slate-700">
+        <h4 class="font-semibold text-slate-200 mb-3">📈 Métriques du Pipeline</h4>
+        <div class="stat-list">
+          <div class="stat-line">
+            <span class="label">Exécutions Totales</span>
+            <span class="badge">{{ getTotalExecutions() }}</span>
           </div>
-          <div>
-            <span class="text-sm text-gray-600">Taux de Succès:</span>
-            <p class="font-semibold text-lg">{{ getSuccessRate() }}%</p>
+          <div class="stat-line">
+            <span class="label">Taux de Succès</span>
+            <span class="badge">{{ getSuccessRate() }}%</span>
           </div>
-          <div>
-            <span class="text-sm text-gray-600">Prédictions:</span>
-            <p class="font-semibold text-lg">{{ pipelineStatus.predictions_count || 0 }}</p>
+          <div class="stat-line">
+            <span class="label">Prédictions</span>
+            <span class="badge">{{ pipelineStatus.predictions_count || 0 }}</span>
           </div>
-          <div>
-            <span class="text-sm text-gray-600">Signaux:</span>
-            <p class="font-semibold text-lg">{{ pipelineStatus.signals_count || 0 }}</p>
+          <div class="stat-line">
+            <span class="label">Signaux</span>
+            <span class="badge">{{ pipelineStatus.signals_count || 0 }}</span>
           </div>
         </div>
       </div>
 
       <!-- Résultats du Logger Agent -->
-      <div class="bg-gray-50 p-4 rounded-lg mb-6 border border-gray-200">
-        <h4 class="font-semibold text-gray-800 mb-3">🧪 Résultats du Logger Agent</h4>
+      <div class="bg-slate-800/40 p-4 rounded-lg mb-6 border border-slate-700">
+        <h4 class="font-semibold text-slate-200 mb-3">🧪 Résultats du Logger Agent</h4>
         <div v-if="loggerResponse" class="space-y-4">
           <!-- Rapport du Pipeline -->
-          <div class="bg-white p-4 rounded-lg border border-gray-200">
-            <h5 class="font-semibold text-gray-800 mb-3">📊 Rapport du Pipeline</h5>
-            <div class="grid grid-cols-2 gap-4 text-sm">
-              <div>
-                <span class="text-gray-600">Données collectées:</span>
-                <p class="font-semibold">{{ loggerResponse.result?.pipeline_data_count || 0 }}</p>
+          <div class="bg-slate-900/40 p-4 rounded-lg border border-slate-700">
+            <h5 class="font-semibold text-slate-200 mb-3">📊 Rapport du Pipeline</h5>
+            <div class="stat-list">
+              <div class="stat-line">
+                <span class="label">Données collectées</span>
+                <span class="badge">{{ loggerResponse.result?.pipeline_data_count || 0 }}</span>
               </div>
-              <div>
-                <span class="text-gray-600">Dernière exécution:</span>
-                <p class="font-semibold">{{ formatTime(loggerResponse.result?.report?.pipeline_info?.last_execution) }}</p>
+              <div class="stat-line">
+                <span class="label">Dernière exécution</span>
+                <span class="badge badge-neutral">{{ formatTime(loggerResponse.result?.report?.pipeline_info?.last_execution) }}</span>
               </div>
             </div>
-            
+
             <div v-if="loggerResponse.result?.report?.summary" class="mt-4">
-              <h6 class="font-semibold text-gray-800 mb-2">📈 Résumé</h6>
-              <div class="grid grid-cols-3 gap-4 text-sm">
-                <div>
-                  <span class="text-gray-600">Exécutions réussies:</span>
-                  <p class="font-semibold text-green-600">{{ loggerResponse.result.report.summary.successful_executions }}</p>
+              <h6 class="font-semibold text-slate-200 mb-2">📈 Résumé</h6>
+              <div class="stat-list">
+                <div class="stat-line">
+                  <span class="label">Exécutions réussies</span>
+                  <span class="badge badge-success">{{ loggerResponse.result.report.summary.successful_executions }}</span>
                 </div>
-                <div>
-                  <span class="text-gray-600">Exécutions échouées:</span>
-                  <p class="font-semibold text-red-600">{{ loggerResponse.result.report.summary.failed_executions }}</p>
+                <div class="stat-line">
+                  <span class="label">Exécutions échouées</span>
+                  <span class="badge badge-danger">{{ loggerResponse.result.report.summary.failed_executions }}</span>
                 </div>
-                <div>
-                  <span class="text-gray-600">Total:</span>
-                  <p class="font-semibold">{{ loggerResponse.result.report.summary.total_executions }}</p>
+                <div class="stat-line">
+                  <span class="label">Total</span>
+                  <span class="badge">{{ loggerResponse.result.report.summary.total_executions }}</span>
                 </div>
               </div>
             </div>
           </div>
 
           <!-- Recommandation de Trading -->
-          <div v-if="loggerResponse.result?.report?.summary?.recommendation" class="bg-white p-4 rounded-lg border border-gray-200">
-            <h5 class="font-semibold text-gray-800 mb-3">🎯 Recommandation de Trading</h5>
+          <div v-if="loggerResponse.result?.report?.summary?.recommendation" class="bg-slate-900/40 p-4 rounded-lg border border-slate-700">
+            <h5 class="font-semibold text-slate-200 mb-3">🎯 Recommandation de Trading</h5>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div class="text-center p-3 rounded-lg" :class="getRecommendationClass(loggerResponse.result.report.summary.recommendation.action)">
-                <div class="text-2xl mb-2">{{ getRecommendationIcon(loggerResponse.result.report.summary.recommendation.action) }}</div>
-                <div class="font-bold text-lg">{{ loggerResponse.result.report.summary.recommendation.action }}</div>
-                <div class="text-sm opacity-75">Confiance: {{ (loggerResponse.result.report.summary.recommendation.confidence * 100).toFixed(0) }}%</div>
+              <div class="rec-card">
+                <div class="rec-icon">{{ getRecommendationIcon(loggerResponse.result.report.summary.recommendation.action) }}</div>
+                <div class="rec-badge" :class="(loggerResponse.result.report.summary.recommendation.action || 'HOLD').toLowerCase()">
+                  {{ loggerResponse.result.report.summary.recommendation.action }}
+                </div>
+                <div class="rec-meta">Confiance: {{ (loggerResponse.result.report.summary.recommendation.confidence * 100).toFixed(0) }}%</div>
               </div>
-              <div class="space-y-2">
-                <div>
-                  <span class="text-gray-600 text-sm">Raison:</span>
-                  <p class="text-sm font-medium">{{ loggerResponse.result.report.summary.recommendation.reason }}</p>
+              <div class="stat-list">
+                <div class="stat-line">
+                  <span class="label">Raison</span>
+                  <span class="badge badge-neutral">{{ loggerResponse.result.report.summary.recommendation.reason || '—' }}</span>
                 </div>
-                <div>
-                  <span class="text-gray-600 text-sm">Niveau de risque:</span>
-                  <p class="text-sm font-medium" :class="getRiskClass(loggerResponse.result.report.summary.recommendation.risk_level)">
-                    {{ loggerResponse.result.report.summary.recommendation.risk_level }}
-                  </p>
+                <div class="stat-line">
+                  <span class="label">Niveau de risque</span>
+                  <span class="badge" :class="{
+                    'badge-success': loggerResponse.result.report.summary.recommendation.risk_level === 'LOW',
+                    'badge-danger': loggerResponse.result.report.summary.recommendation.risk_level === 'HIGH'
+                  }">{{ loggerResponse.result.report.summary.recommendation.risk_level }}</span>
                 </div>
-                <div>
-                  <span class="text-gray-600 text-sm">Sentiment du marché:</span>
-                  <p class="text-sm font-medium" :class="getSentimentClass(loggerResponse.result.report.summary.recommendation.market_sentiment)">
-                    {{ loggerResponse.result.report.summary.recommendation.market_sentiment }}
-                  </p>
+                <div class="stat-line">
+                  <span class="label">Sentiment du marché</span>
+                  <span class="badge" :class="{
+                    'badge-success': loggerResponse.result.report.summary.recommendation.market_sentiment === 'BULLISH',
+                    'badge-danger': loggerResponse.result.report.summary.recommendation.market_sentiment === 'BEARISH',
+                    'badge-neutral': loggerResponse.result.report.summary.recommendation.market_sentiment === 'NEUTRAL'
+                  }">{{ loggerResponse.result.report.summary.recommendation.market_sentiment }}</span>
                 </div>
               </div>
             </div>
           </div>
 
           <!-- Analyse de Trading -->
-          <div v-if="loggerResponse.result?.report?.trading_analysis" class="bg-white p-4 rounded-lg border border-gray-200">
-            <h5 class="font-semibold text-gray-800 mb-3">📊 Analyse de Trading</h5>
+          <div v-if="loggerResponse.result?.report?.trading_analysis" class="bg-slate-900/40 p-4 rounded-lg border border-slate-700">
+            <h5 class="font-semibold text-slate-200 mb-3">📊 Analyse de Trading</h5>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
               <!-- Signaux -->
-              <div class="bg-blue-50 p-3 rounded-lg">
-                <h6 class="font-semibold text-blue-800 mb-2">📈 Signaux</h6>
-                <div class="space-y-1 text-sm">
-                  <div class="flex justify-between">
-                    <span class="text-green-600">Achat:</span>
-                    <span class="font-semibold">{{ loggerResponse.result.report.trading_analysis.signals.buy_signals }}</span>
-                  </div>
-                  <div class="flex justify-between">
-                    <span class="text-red-600">Vente:</span>
-                    <span class="font-semibold">{{ loggerResponse.result.report.trading_analysis.signals.sell_signals }}</span>
-                  </div>
-                  <div class="flex justify-between">
-                    <span class="text-yellow-600">Maintien:</span>
-                    <span class="font-semibold">{{ loggerResponse.result.report.trading_analysis.signals.hold_signals }}</span>
-                  </div>
+              <div class="bg-slate-800/40 p-3 rounded-lg border border-slate-700">
+                <h6 class="font-semibold text-slate-200 mb-2">📈 Signaux</h6>
+                <div class="stat-list">
+                  <div class="stat-line"><span class="label">Achat</span><span class="badge badge-success">{{ loggerResponse.result.report.trading_analysis.signals.buy_signals }}</span></div>
+                  <div class="stat-line"><span class="label">Vente</span><span class="badge badge-danger">{{ loggerResponse.result.report.trading_analysis.signals.sell_signals }}</span></div>
+                  <div class="stat-line"><span class="label">Maintien</span><span class="badge badge-neutral">{{ loggerResponse.result.report.trading_analysis.signals.hold_signals }}</span></div>
                 </div>
               </div>
 
               <!-- Prédictions -->
-              <div class="bg-purple-50 p-3 rounded-lg">
-                <h6 class="font-semibold text-purple-800 mb-2">🔮 Prédictions</h6>
-                <div class="space-y-1 text-sm">
-                  <div class="flex justify-between">
-                    <span class="text-green-600">Haussier:</span>
-                    <span class="font-semibold">{{ loggerResponse.result.report.trading_analysis.predictions.up_predictions }}</span>
-                  </div>
-                  <div class="flex justify-between">
-                    <span class="text-red-600">Baissier:</span>
-                    <span class="font-semibold">{{ loggerResponse.result.report.trading_analysis.predictions.down_predictions }}</span>
-                  </div>
-                  <div class="flex justify-between">
-                    <span class="text-gray-600">Total:</span>
-                    <span class="font-semibold">{{ loggerResponse.result.report.trading_analysis.predictions.total_predictions }}</span>
-                  </div>
+              <div class="bg-slate-800/40 p-3 rounded-lg border border-slate-700">
+                <h6 class="font-semibold text-slate-200 mb-2">🔮 Prédictions</h6>
+                <div class="stat-list">
+                  <div class="stat-line"><span class="label">Haussier</span><span class="badge badge-success">{{ loggerResponse.result.report.trading_analysis.predictions.up_predictions }}</span></div>
+                  <div class="stat-line"><span class="label">Baissier</span><span class="badge badge-danger">{{ loggerResponse.result.report.trading_analysis.predictions.down_predictions }}</span></div>
+                  <div class="stat-line"><span class="label">Total</span><span class="badge">{{ loggerResponse.result.report.trading_analysis.predictions.total_predictions }}</span></div>
                 </div>
               </div>
 
               <!-- Trades -->
-              <div class="bg-green-50 p-3 rounded-lg">
-                <h6 class="font-semibold text-green-800 mb-2">💰 Trades</h6>
-                <div class="space-y-1 text-sm">
-                  <div class="flex justify-between">
-                    <span class="text-green-600">Exécutés:</span>
-                    <span class="font-semibold">{{ loggerResponse.result.report.trading_analysis.trades.filled_trades }}</span>
-                  </div>
-                  <div class="flex justify-between">
-                    <span class="text-yellow-600">En attente:</span>
-                    <span class="font-semibold">{{ loggerResponse.result.report.trading_analysis.trades.pending_trades }}</span>
-                  </div>
-                  <div class="flex justify-between">
-                    <span class="text-gray-600">Total:</span>
-                    <span class="font-semibold">{{ loggerResponse.result.report.trading_analysis.trades.total_trades }}</span>
-                  </div>
+              <div class="bg-slate-800/40 p-3 rounded-lg border border-slate-700">
+                <h6 class="font-semibold text-slate-200 mb-2">💰 Trades</h6>
+                <div class="stat-list">
+                  <div class="stat-line"><span class="label">Exécutés</span><span class="badge badge-success">{{ loggerResponse.result.report.trading_analysis.trades.filled_trades }}</span></div>
+                  <div class="stat-line"><span class="label">En attente</span><span class="badge badge-neutral">{{ loggerResponse.result.report.trading_analysis.trades.pending_trades }}</span></div>
+                  <div class="stat-line"><span class="label">Total</span><span class="badge">{{ loggerResponse.result.report.trading_analysis.trades.total_trades }}</span></div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div v-else class="text-gray-500">
+        <div v-else class="text-slate-400">
           Aucun test exécuté
         </div>
       </div>
 
       <!-- Logs en temps réel -->
-      <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
-        <h4 class="font-semibold text-gray-800 mb-3">📝 Logs en Temps Réel</h4>
+      <div class="bg-slate-800/40 p-4 rounded-lg border border-slate-700">
+        <h4 class="font-semibold text-slate-200 mb-3">📝 Logs en Temps Réel</h4>
         <div class="max-h-64 overflow-y-auto space-y-2 text-sm">
-          <div 
+          <div
             v-for="(log, index) in realTimeLogs"
             :key="index"
             :class="[
               'p-2 rounded-lg',
-              log.type === 'success' ? 'bg-green-100 text-green-800' :
-              log.type === 'error' ? 'bg-red-100 text-red-800' :
-              log.type === 'warning' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800'
+              log.type === 'success' ? 'bg-green-900/30 text-green-300' :
+              log.type === 'error' ? 'bg-red-900/30 text-red-300' :
+              log.type === 'warning' ? 'bg-yellow-900/30 text-yellow-300' : 'bg-blue-900/30 text-blue-300'
             ]"
           >
-            <span class="font-mono text-xs text-gray-500">{{ formatTime(log.timestamp) }}</span>
+            <span class="font-mono text-xs text-slate-400">{{ formatTime(log.timestamp) }}</span>
             <span class="ml-2">{{ log.message }}</span>
           </div>
-          <div v-if="realTimeLogs.length === 0" class="text-gray-500">
+          <div v-if="realTimeLogs.length === 0" class="text-slate-400">
             En attente des logs...
           </div>
         </div>
@@ -465,7 +451,7 @@
 
     <!-- Toast Notifications -->
     <div v-if="toastMessage" class="fixed top-4 right-4 z-50">
-      <div 
+      <div
         :class="[
           'px-4 py-2 rounded-lg text-white font-medium transform transition-all duration-300',
           toastType === 'success' ? 'bg-green-500' :
@@ -476,6 +462,7 @@
         {{ toastMessage }}
       </div>
     </div>
+    </div>
   </div>
 </template>
 
@@ -545,7 +532,7 @@ export default {
     const getAgentStatusClass = (agentName) => {
       const agent = pipelineStatus.value.agents?.[agentName]
       if (!agent) return ''
-      
+
       switch (agent.status) {
         case 'running': return 'active'
         case 'processing': return 'processing'
@@ -632,12 +619,12 @@ export default {
           if (response.metrics) {
             pipelineStatus.value.predictions_count = response.metrics.predictions_count || 0
             pipelineStatus.value.signals_count = response.metrics.signals_count || 0
-            
+
             // Mettre à jour les comptes d'exécution des agents
             const totalExecutions = response.metrics.total_executions || 0
             const agentNames = ['data_collector', 'news_collector', 'data_aggregator', 'predictor', 'strategy', 'trader', 'logger']
             const executionsPerAgent = Math.floor(totalExecutions / agentNames.length)
-            
+
             agentNames.forEach(agentName => {
               if (pipelineStatus.value.agents[agentName]) {
                 pipelineStatus.value.agents[agentName].execution_count = executionsPerAgent
@@ -645,10 +632,10 @@ export default {
               }
             })
           }
-          
+
           // Mettre à jour les données du pipeline
           pipelineData.value = response.pipeline_data || []
-          
+
           // Ajouter des logs en temps réel
           if (response.pipeline_data && response.pipeline_data.length > 0) {
             const latestData = response.pipeline_data[0]
@@ -732,7 +719,7 @@ export default {
           // Créer une structure de réponse similaire à celle attendue
           const metricsData = response.metrics || {}
           const pipelineDataArray = response.pipeline_data || []
-          
+
           loggerResponse.value = {
             status: 'success',
             result: {
@@ -773,7 +760,7 @@ export default {
               }
             }
           }
-          
+
           showToast('Logger Agent appelé avec succès! ✅', 'success')
           addLog('🧪 Logger Agent appelé avec succès', 'success')
         } else {
@@ -811,7 +798,7 @@ export default {
         message,
         type
       })
-      
+
       // Limiter le nombre de logs
       if (realTimeLogs.value.length > 50) {
         realTimeLogs.value = realTimeLogs.value.slice(0, 50)
@@ -885,11 +872,11 @@ export default {
       toastMessage,
       toastType,
       agentFlow,
-      
+
       // Computed
       priceHistory,
       pipelineLogs,
-      
+
       // Méthodes
       formatTime,
       formatAgentName,
@@ -937,7 +924,7 @@ export default {
 .pipeline-dashboard {
   background: linear-gradient(135deg, #111421 0%, #111421 100%);
   min-height: 100vh;
-  padding: 50px;
+  padding: 50px 0;
   font-family: "Roboto", sans-serif;
   display: flex;
   flex-direction: column;
@@ -945,6 +932,12 @@ export default {
   overflow-y: auto;
 }
 
+.page-container {
+  width: 100%;
+  max-width: 1200px;
+  padding: 0 24px;
+}
+
 /* ===== HEADER COHÉRENT AVEC ACCUEIL.VUE ===== */
 .gradient-bg {
   background: var(--glass-bg);
@@ -1025,49 +1018,49 @@ export default {
   transition: all 0.3s ease;
 }
 
-.status-indicator.running { 
+.status-indicator.running {
   background: var(--success-gradient);
   animation: pulse-green 2s infinite;
 }
 
-.status-indicator.stopped { 
+.status-indicator.stopped {
   background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
 }
 
-.status-indicator.processing { 
+.status-indicator.processing {
   background: var(--warning-gradient);
   animation: pulse-yellow 1s infinite;
 }
 
-.status-indicator.error { 
+.status-indicator.error {
   background: var(--error-gradient);
   animation: pulse-red 1s infinite;
 }
 
 /* Animations pour les indicateurs */
 @keyframes pulse-green {
-  0%, 100% { 
+  0%, 100% {
     box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
   }
-  50% { 
+  50% {
     box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
   }
 }
 
 @keyframes pulse-yellow {
-  0%, 100% { 
+  0%, 100% {
     box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
   }
-  50% { 
+  50% {
     box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
   }
 }
 
 @keyframes pulse-red {
-  0%, 100% { 
+  0%, 100% {
     box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
   }
-  50% { 
+  50% {
     box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
   }
 }
@@ -1272,11 +1265,11 @@ export default {
 
 /* Animations */
 @keyframes pulse-card {
-  0%, 100% { 
+  0%, 100% {
     transform: scale(1);
     box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
   }
-  50% { 
+  50% {
     transform: scale(1.05);
     box-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
   }
@@ -1295,6 +1288,15 @@ export default {
   box-shadow: var(--card-shadow);
 }
 
+/* Variantes sombres pour éviter texte noir/fonds clairs */
+.card-dark {
+  background: rgba(15, 23, 42, 0.65);
+  border: 1px solid rgba(100, 116, 139, 0.35);
+  box-shadow: var(--card-shadow);
+  color: #e5e7eb;
+}
+.card-title { color: #e5e7eb; font-weight: 700; font-size: 1.25rem; }
+
 .bg-white::before {
   content: "";
   position: absolute;
@@ -1451,8 +1453,18 @@ button[class*="from-red-500"]:hover {
 }
 
 /* Grilles responsives */
-.grid {
-  gap: 1.5rem;
+.grid { gap: 1.5rem; }
+
+/* Nouvelle grille pour les boutons agents (sans Tailwind) */
+.agent-controls-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(220px, 1fr));
+  gap: 1rem;
+  max-width: 900px;
+  margin: 0 auto;
+}
+@media (min-width: 1200px) {
+  .agent-controls-grid { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
 }
 
 /* ===== CARTES D'AGENTS COHÉRENTES AVEC ACCUEIL.VUE ===== */
@@ -1497,6 +1509,89 @@ button[class*="from-red-500"]:hover {
   opacity: 1;
 }
 
+/* ==== NOUVELLES MISES EN PAGE DE DONNÉES ==== */
+.two-col-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
+@media (min-width: 1024px) { .two-col-grid { grid-template-columns: 1fr 1fr; } }
+
+.history-list { max-height: 18rem; overflow-y: auto; }
+.history-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: rgba(15, 23, 42, 0.55);
+  border: 1px solid rgba(100, 116, 139, 0.35);
+  border-radius: 12px;
+  margin-bottom: 10px;
+}
+.history-left { display: flex; align-items: center; gap: 10px; }
+.history-left .time { color: #94a3b8; font-size: 12px; }
+.history-left .price { color: #e2e8f0; font-weight: 600; }
+.history-right { display: flex; gap: 8px; align-items: center; }
+
+.agent-list { display: flex; flex-direction: column; gap: 10px; }
+.stat-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(100,116,139,.35); border-radius: 12px; }
+.stat-left { display: flex; align-items: center; gap: 10px; }
+.stat-left .name { color: #e5e7eb; font-weight: 600; text-transform: capitalize; }
+.stat-right { display: flex; align-items: center; gap: 8px; }
+.stat-right .badge { background: rgba(99, 102, 241, 0.25); border: 1px solid rgba(99, 102, 241, 0.45); color: #c7d2fe; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
+.stat-right .meta { color: #94a3b8; font-size: 12px; }
+
+.metrics-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
+@media (min-width: 768px) { .metrics-grid { grid-template-columns: repeat(3, 1fr); } }
+
+/* Texte aéré */
+.lede { color: #cbd5e1; line-height: 1.8; letter-spacing: 0.2px; margin-top: 6px; }
+.card-dark p { line-height: 1.7; }
+
+/* ==== LISTE DE LOGS LISIBLES ==== */
+.log-list { max-height: 18rem; overflow-y: auto; background: rgba(15,23,42,.5); border: 1px solid rgba(100,116,139,.35); border-radius: 12px; padding: 10px; }
+.log-row { display: grid; grid-template-columns: 120px 1fr 140px 110px; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px dashed rgba(100,116,139,.3); }
+.log-row:last-child { border-bottom: none; }
+.log-row .time { color: #94a3b8; font-size: 12px; }
+.log-row .symbol-chip { color: #e5e7eb; font-weight: 600; background: rgba(99,102,241,.18); border: 1px solid rgba(99,102,241,.35); padding: 4px 10px; border-radius: 999px; width: max-content; }
+.log-row .price { color: #cbd5e1; font-weight: 600; }
+.signal-badge { padding: 4px 10px; border-radius: 999px; font-weight: 800; letter-spacing: .3px; color: #fff; text-align: center; }
+.signal-badge.buy { background: #22c55e; }
+.signal-badge.sell { background: #ef4444; }
+.signal-badge.hold { background: #f59e0b; }
+.empty { color: #94a3b8; text-align: center; padding: 20px 0; }
+
+/* ==== LOGGER ACTIONS ==== */
+.logger-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
+.chip-btn { border: 1px solid var(--glass-border); padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-weight: 700; }
+.chip-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
+.chip-slate { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
+
+/* ==== KPI GRID ==== */
+.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
+.kpi-card { display: flex; align-items: center; gap: 12px; background: rgba(15,23,42,.55); border: 1px solid rgba(100,116,139,.35); border-radius: 14px; padding: 12px 14px; }
+.kpi-icon { font-size: 20px; }
+.kpi-content { display: flex; flex-direction: column; }
+.kpi-value { color: #e5e7eb; font-weight: 800; font-size: 20px; line-height: 1; }
+.kpi-label { color: #94a3b8; font-size: 12px; }
+.text-emerald { color: #34d399; }
+.text-rose { color: #f87171; }
+
+/* ==== STAT LINES ==== */
+.stat-list { display: flex; flex-direction: column; gap: 8px; }
+.stat-line { display: grid; grid-template-columns: 1fr auto; align-items: center; background: rgba(15,23,42,.55); border: 1px solid rgba(100,116,139,.35); border-radius: 12px; padding: 10px 12px; }
+.stat-line .label { color: #cbd5e1; font-weight: 600; }
+.badge { background: rgba(99,102,241,.18); border: 1px solid rgba(99,102,241,.35); color: #e5e7eb; padding: 4px 10px; border-radius: 999px; font-weight: 800; letter-spacing: .2px; }
+.badge-success { background: rgba(16,185,129,.25); border-color: rgba(16,185,129,.4); color: #d1fae5; }
+.badge-danger { background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.4); color: #fee2e2; }
+.badge-neutral { background: rgba(148,163,184,.18); border-color: rgba(148,163,184,.35); color: #e2e8f0; }
+
+/* Carte recommandation */
+.rec-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; border-radius: 14px; background: rgba(15,23,42,.55); border: 1px solid rgba(100,116,139,.35); }
+.rec-icon { font-size: 28px; }
+.rec-badge { padding: 6px 14px; border-radius: 999px; font-weight: 800; color: #fff; }
+.rec-badge.buy { background: #22c55e; }
+.rec-badge.sell { background: #ef4444; }
+.rec-badge.hold { background: #f59e0b; }
+.rec-meta { color: #cbd5e1; font-size: 12px; }
+
 /* ===== SCROLLBARS COHÉRENTES AVEC ACCUEIL.VUE ===== */
 .overflow-y-auto::-webkit-scrollbar {
   width: 8px;
@@ -1548,6 +1643,9 @@ button[class*="from-red-500"]:hover {
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
+/* Titres de section lisibles sur fond sombre */
+.section-title { color: #e5e7eb !important; text-shadow: 0 2px 4px rgba(0,0,0,.35); }
+
 /* Titres cohérents */
 h1, h2, h3, h4, h5, h6 {
   color: var(--text-primary);
@@ -1692,16 +1790,16 @@ h1, h2, h3, h4, h5, h6 {
   .pipeline-dashboard {
     padding: 0.5rem;
   }
-  
+
   .agent-flow-card {
     min-width: 100px;
     padding: 1rem 0.5rem;
   }
-  
+
   .flow-arrow {
     font-size: 1rem;
   }
-  
+
   .agent-control-btn {
     padding: 0.5rem 1rem;
     font-size: 0.75rem;
@@ -1746,7 +1844,7 @@ button:focus,
 
 /* Effets de néon pour les éléments actifs */
 .neon-effect {
-  box-shadow: 
+  box-shadow:
     0 0 5px currentColor,
     0 0 10px currentColor,
     0 0 15px currentColor,
@@ -1777,31 +1875,62 @@ button:focus,
   transition: all 0.3s ease;
 }
 
+/* ==== CTA BOUTONS START/STOP ==== */
+.cta-btn {
+  position: relative;
+  padding: 14px 28px;
+  border-radius: 14px;
+  font-weight: 800;
+  font-size: 18px;
+  color: #fff;
+  border: 1px solid rgba(255,255,255,0.18);
+  background: rgba(15, 23, 42, 0.55);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.06);
+  backdrop-filter: blur(12px);
+}
+.cta-btn::before {
+  content: '';
+  position: absolute; inset: 0; border-radius: 14px;
+  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0));
+  pointer-events: none;
+}
+.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
+.cta-btn:active { transform: translateY(0); }
+.cta-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
+
+.cta-start { background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(6,95,70,.15)); border-color: rgba(16,185,129,.35); }
+.cta-start { box-shadow: 0 12px 32px rgba(16,185,129,.25); }
+.cta-start:hover { background: linear-gradient(135deg, rgba(16,185,129,.25), rgba(6,95,70,.25)); box-shadow: 0 18px 44px rgba(16,185,129,.35); }
+
+.cta-stop { background: linear-gradient(135deg, rgba(239,68,68,.15), rgba(153,27,27,.15)); border-color: rgba(239,68,68,.35); }
+.cta-stop { box-shadow: 0 12px 32px rgba(239,68,68,.25); }
+.cta-stop:hover { background: linear-gradient(135deg, rgba(239,68,68,.25), rgba(153,27,27,.25)); box-shadow: 0 18px 44px rgba(239,68,68,.35); }
+
 /* ===== RESPONSIVE DESIGN COHÉRENT AVEC ACCUEIL.VUE ===== */
 @media (max-width: 768px) {
   .pipeline-dashboard {
     padding: 20px 16px;
   }
-  
+
   .bg-white {
     padding: 16px;
     border-radius: 16px;
   }
-  
+
   .agent-card {
     padding: 12px;
     border-radius: 16px;
   }
-  
+
   button[class*="bg-gradient-to-r"] {
     padding: 12px 16px;
     font-size: 14px;
   }
-  
+
   .grid {
     gap: 12px;
   }
-  
+
   h1, h2, h3 {
     font-size: 1.5rem;
   }
@@ -1811,26 +1940,26 @@ button:focus,
   .pipeline-dashboard {
     padding: 16px 12px;
   }
-  
+
   .bg-white {
     padding: 12px;
     border-radius: 12px;
   }
-  
+
   .agent-card {
     padding: 8px;
     border-radius: 12px;
   }
-  
+
   button[class*="bg-gradient-to-r"] {
     padding: 10px 12px;
     font-size: 12px;
   }
-  
+
   .grid {
     gap: 8px;
   }
-  
+
   h1, h2, h3 {
     font-size: 1.25rem;
   }
diff --git a/crypto-pilot-builder/src/components/NewsAlertsDashboard.vue b/crypto-pilot-builder/src/components/NewsAlertsDashboard.vue
index 293661d..cf6b6a8 100644
--- a/crypto-pilot-builder/src/components/NewsAlertsDashboard.vue
+++ b/crypto-pilot-builder/src/components/NewsAlertsDashboard.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="news-alerts-dashboard"> 
+  <div class="news-alerts-dashboard">
 
-    <!-- Recent News Section -->
-    <div class="news-section">
+    <div class="content-grid">
+    <!-- Investment Alerts Section (first) -->
+    <div class="alerts-section section-card">
       <div class="news-section-header" @click="toggleNewsAccordion">
         <h3>📰 News Récentes</h3>
         <div class="news-count" v-if="filteredNews.length > 0">
@@ -12,10 +13,10 @@
           <span class="toggle-icon" :class="{ 'expanded': isNewsAccordionOpen }">▼</span>
         </div>
       </div>
-      
+
       <div class="news-filters" v-if="isNewsAccordionOpen">
-        <button 
-          v-for="filter in newsFilters" 
+        <button
+          v-for="filter in newsFilters"
           :key="filter.value"
           @click="selectedNewsFilter = filter.value"
           class="filter-btn"
@@ -24,12 +25,12 @@
           {{ filter.label }}
         </button>
       </div>
-      
+
       <div class="news-accordion-content" v-if="isNewsAccordionOpen" :style="{ height: accordionHeight + 'px' }">
         <div class="news-list" v-if="filteredNews.length > 0">
-          <div 
-            v-for="news in filteredNews" 
-            :key="news.id" 
+          <div
+            v-for="news in filteredNews"
+            :key="news.id"
             class="news-item"
             :class="getNewsImpactClass(news.impact_level)"
           >
@@ -40,9 +41,9 @@
                 <span class="news-time">{{ formatTime(news.published_at) }}</span>
               </div>
             </div>
-            
+
             <p class="news-content">{{ news.content }}</p>
-            
+
             <div class="news-analysis">
               <div class="analysis-item">
                 <span class="label">Sentiment:</span>
@@ -63,9 +64,9 @@
               <div class="analysis-item" v-if="news.crypto_mentions && news.crypto_mentions.length > 0">
                 <span class="label">Cryptos:</span>
                 <span class="crypto-mentions">
-                  <span 
-                    v-for="crypto in news.crypto_mentions" 
-                    :key="crypto" 
+                  <span
+                    v-for="crypto in news.crypto_mentions"
+                    :key="crypto"
                     class="crypto-tag"
                   >
                     {{ crypto }}
@@ -73,13 +74,13 @@
                 </span>
               </div>
             </div>
-            
+
             <div class="news-actions">
               <a :href="news.url" target="_blank" class="btn btn-sm btn-outline">
                 Lire l'article
               </a>
-              <button 
-                @click="analyzeNews(news.id)" 
+              <button
+                @click="analyzeNews(news.id)"
                 class="btn btn-sm btn-primary"
                 :disabled="isAnalyzing"
               >
@@ -88,14 +89,14 @@
             </div>
           </div>
         </div>
-        
+
         <div v-else class="no-news">
           <p>📰 Aucune news récente</p>
           <p class="no-news-hint">Les news crypto apparaîtront ici une fois récupérées</p>
         </div>
-        
+
         <!-- Poignée de redimensionnement -->
-        <div 
+        <div
           class="resize-handle"
           @mousedown="startResize"
           @touchstart="startResize"
@@ -109,63 +110,66 @@
       </div>
     </div>
 
-    <!-- Investment Alerts Section -->
-    <div class="alerts-section">
+    <!-- Recent News Section (second) -->
+    <div class="news-section section-card">
       <div class="alerts-header">
         <h3>🚨 Alertes d'investissement</h3>
         <button @click="refreshData" class="btn btn-sm btn-secondary">
           🔄 Actualiser
         </button>
       </div>
-      
+
       <div class="alerts-info">
         <p class="info-text">
-          <strong>Que sont les alertes ?</strong> Ce sont des recommandations d'investissement générées par l'IA 
+          <strong>Que sont les alertes ?</strong> Ce sont des recommandations d'investissement générées par l'IA
           basées sur l'analyse des news crypto. Elles vous indiquent quand acheter, vendre ou attendre.
         </p>
         <div class="alert-types">
           <div class="alert-type">
-            <span class="type-badge buy">BUY</span>
+            <span class="type-badge buy">📈 BUY</span>
             <span>Recommandation d'achat</span>
           </div>
           <div class="alert-type">
-            <span class="type-badge sell">SELL</span>
+            <span class="type-badge sell">📉 SELL</span>
             <span>Recommandation de vente</span>
           </div>
           <div class="alert-type">
-            <span class="type-badge hold">HOLD</span>
+            <span class="type-badge hold">⏸️ HOLD</span>
             <span>Attendre et observer</span>
           </div>
         </div>
       </div>
-      
+
       <div class="recent-alerts" v-if="recentAlerts && recentAlerts.length > 0">
         <h4>Alertes récentes</h4>
         <div class="alert-list">
           <div v-for="alert in recentAlerts" :key="alert.id" class="alert-item" :class="alert.alert_type.toLowerCase()">
             <div class="alert-header">
-              <span class="alert-type" :class="alert.alert_type.toLowerCase()">
-                {{ alert.alert_type.toUpperCase() }}
-              </span>
-              <span class="crypto-symbol">{{ alert.crypto_symbol }}</span>
-              <span class="confidence">{{ Math.round(alert.confidence_score * 100) }}%</span>
+              <div class="alert-left">
+                <span class="alert-type" :class="alert.alert_type.toLowerCase()">{{ alert.alert_type.toUpperCase() }}</span>
+                <span class="crypto-symbol">{{ alert.crypto_symbol }}</span>
+              </div>
+              <div class="alert-right">
+                <span class="confidence-badge">{{ Math.round(alert.confidence_score * 100) }}%</span>
+              </div>
+            </div>
+            <div class="alert-reasoning" v-if="alert.reasoning">
+              <p>{{ alert.reasoning }}</p>
             </div>
             <div class="alert-meta">
               <span class="time">{{ formatTime(alert.created_at) }}</span>
               <span class="alert-id">ID: {{ alert.id.slice(0, 8) }}...</span>
             </div>
-            <div class="alert-reasoning" v-if="alert.reasoning">
-              <p>{{ alert.reasoning }}</p>
-            </div>
           </div>
         </div>
       </div>
-      
+
       <div v-else class="no-alerts">
         <p>Aucune alerte générée pour le moment</p>
         <p class="hint">Les alertes apparaîtront automatiquement lors de l'analyse des news</p>
       </div>
     </div>
+    </div>
 
     <!-- Loading States -->
     <div v-if="isLoading" class="loading-overlay">
@@ -214,23 +218,23 @@ export default {
     const loadData = async () => {
       try {
         isLoading.value = true
-        
+
         // Load news and alerts in parallel
         const [newsResponse, alertsResponse] = await Promise.all([
           apiService.getAutowalletNews(),
           apiService.getAutowalletAlerts()
         ])
-        
+
         if (newsResponse && newsResponse.news) {
           recentNews.value = newsResponse.news
         }
-        
+
         if (alertsResponse && alertsResponse.alerts) {
           recentAlerts.value = alertsResponse.alerts
         }
-        
+
         lastUpdated.value = new Date()
-        
+
       } catch (error) {
         console.error('Erreur lors du chargement des données:', error)
       } finally {
@@ -258,7 +262,7 @@ export default {
       isResizing.value = true
       startY.value = e.clientY || e.touches[0].clientY
       startHeight.value = accordionHeight.value
-      
+
       document.addEventListener('mousemove', handleResize)
       document.addEventListener('mouseup', stopResize)
       document.addEventListener('touchmove', handleResize)
@@ -267,12 +271,12 @@ export default {
 
     const handleResize = (e) => {
       if (!isResizing.value) return
-      
+
       e.preventDefault()
       const currentY = e.clientY || e.touches[0].clientY
       const deltaY = currentY - startY.value
       const newHeight = startHeight.value + deltaY
-      
+
       // Limiter la hauteur entre 200px et 800px
       accordionHeight.value = Math.max(200, Math.min(800, newHeight))
     }
@@ -288,14 +292,14 @@ export default {
     const analyzeNews = async (newsId) => {
       try {
         isAnalyzing.value = true
-        
+
         const response = await apiService.analyzeNews([newsId], 'individual')
-        
+
         if (response && response.alerts) {
           // Add new alerts to the list
           recentAlerts.value = [...response.alerts, ...recentAlerts.value]
         }
-        
+
       } catch (error) {
         console.error('Erreur lors de l\'analyse:', error)
       } finally {
@@ -411,11 +415,23 @@ export default {
 </script>
 
 <style scoped>
-.news-alerts-dashboard {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
+:root {
+  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --secondary-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
+  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  --error-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  --glass-bg: rgba(255, 255, 255, 0.08);
+  --glass-border: rgba(255, 255, 255, 0.12);
+  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --card-shadow-hover: 0 10px 30px rgba(118, 75, 162, 0.4);
+  --text-primary: #f3e8ff;
+  --text-secondary: rgba(255, 255, 255, 0.8);
+}
+
+.news-alerts-dashboard { padding: 20px; max-width: 1200px; margin: 0 auto; color: var(--text-primary); }
+.content-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 32px; align-items: start; }
+.section-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: var(--card-shadow); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
 
 .dashboard-header {
   display: flex;
@@ -423,795 +439,164 @@ export default {
   align-items: center;
   margin-bottom: 30px;
   padding-bottom: 20px;
-  border-bottom: 2px solid #e0e0e0;
+  border-bottom: 2px solid var(--glass-border);
 }
 
 .dashboard-header h2 {
   margin: 0;
-  color: #2c3e50;
+  color: var(--text-primary);
   font-size: 1.8rem;
+  text-shadow: 0 2px 4px rgba(0,0,0,.3);
 }
 
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
+.header-actions { display: flex; align-items: center; gap: 20px; }
 
 .refresh-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 8px;
-  background: #3498db;
-  color: white;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.refresh-btn:hover:not(:disabled) {
-  background: #2980b9;
-  transform: translateY(-2px);
-}
-
-.refresh-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.last-updated {
-  color: #7f8c8d;
-  font-size: 0.9rem;
-}
-
-.alerts-explanation {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  margin-bottom: 30px;
-}
-
-.alerts-explanation h3 {
-  margin-top: 0;
-  color: white;
-}
-
-.alerts-section, .news-section {
-  margin-bottom: 40px;
-}
-
-.alerts-section h3, .news-section h3 {
-  color: #2c3e50;
-  margin-bottom: 20px;
-  font-size: 1.4rem;
-}
-
-.news-section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  padding: 15px 20px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  border: 1px solid #e9ecef;
-  transition: all 0.3s ease;
-  margin-bottom: 0;
-}
-
-.news-section-header:hover {
-  background: #e9ecef;
-  border-color: #dee2e6;
-}
-
-.news-section-header h3 {
-  margin: 0;
-  color: #2c3e50;
-  font-size: 1.4rem;
-}
-
-.news-count {
-  background: #3498db;
-  color: white;
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 0.8rem;
-  font-weight: bold;
-  margin-left: 10px;
-}
-
-.accordion-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  background: #3498db;
-  color: white;
-  transition: all 0.3s ease;
-}
-
-.accordion-toggle:hover {
-  background: #2980b9;
-  transform: scale(1.1);
-}
-
-.toggle-icon {
-  font-size: 12px;
-  transition: transform 0.3s ease;
-}
-
-.toggle-icon.expanded {
-  transform: rotate(180deg);
-}
-
-.news-accordion-content {
-  margin-top: 15px;
-  animation: slideDown 0.3s ease-out;
-  position: relative;
-  border: 1px solid #e9ecef;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.resize-handle {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 12px;
-  background: #f8f9fa;
-  border-top: 1px solid #dee2e6;
-  cursor: ns-resize;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s ease;
-  z-index: 10;
-}
-
-.resize-handle:hover {
-  background: #e9ecef;
-}
-
-.resize-grip {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  opacity: 0.6;
-  transition: opacity 0.2s ease;
-}
-
-.resize-handle:hover .resize-grip {
-  opacity: 1;
-}
-
-.grip-line {
-  width: 30px;
-  height: 2px;
-  background: #6c757d;
-  border-radius: 1px;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    max-height: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    max-height: 1000px;
-    transform: translateY(0);
-  }
-}
-
-.alerts-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.alert-card {
-  background: white;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border-left: 4px solid #3498db;
-  transition: transform 0.3s ease;
-}
-
-.alert-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-}
-
-.alert-card.alert-buy {
-  border-left-color: #27ae60;
-}
-
-.alert-card.alert-sell {
-  border-left-color: #e74c3c;
-}
-
-.alert-card.alert-hold {
-  border-left-color: #f39c12;
-}
-
-.alert-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
-.alert-type {
-  font-weight: bold;
-  font-size: 1.1rem;
-  padding: 4px 12px;
-  border-radius: 20px;
-  color: white;
-}
-
-.alert-buy .alert-type {
-  background: #27ae60;
-}
-
-.alert-sell .alert-type {
-  background: #e74c3c;
-}
-
-.alert-hold .alert-type {
-  background: #f39c12;
-}
-
-.alert-crypto {
-  font-weight: bold;
-  color: #2c3e50;
-  font-size: 1.1rem;
-}
-
-.alert-confidence {
-  background: #ecf0f1;
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-.alert-reasoning {
-  margin-bottom: 15px;
-  line-height: 1.6;
-  color: #34495e;
-}
-
-.alert-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.alert-priority {
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 0.8rem;
-  font-weight: bold;
-}
-
-.priority-urgent {
-  background: #e74c3c;
-  color: white;
-}
-
-.priority-high {
-  background: #f39c12;
-  color: white;
-}
-
-.priority-medium {
-  background: #3498db;
-  color: white;
-}
-
-.priority-low {
-  background: #95a5a6;
-  color: white;
-}
-
-.alert-time {
-  color: #7f8c8d;
-  font-size: 0.9rem;
-}
-
-.no-alerts, .no-news {
-  text-align: center;
-  padding: 40px;
-  color: #7f8c8d;
-}
-
-.no-alerts-hint, .no-news-hint {
-  font-size: 0.9rem;
-  margin-top: 10px;
-}
-
-.news-filters {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
-}
-
-.filter-btn {
-  padding: 8px 16px;
-  border: 2px solid #bdc3c7;
-  background: white;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  color: #7f8c8d;
-}
-
-.filter-btn.active {
-  background: #3498db;
-  border-color: #3498db;
-  color: white;
-}
-
-.filter-btn:hover {
-  border-color: #3498db;
-  color: #3498db;
-}
-
-.news-list {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  overflow-y: auto;
-  padding: 20px;
-  padding-bottom: 32px; /* Espace pour la poignée de redimensionnement */
-  height: 100%;
-  scrollbar-width: thin;
-  scrollbar-color: #3498db #f1f1f1;
-}
-
-.news-list::-webkit-scrollbar {
-  width: 8px;
-}
-
-.news-list::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
-}
-
-.news-list::-webkit-scrollbar-thumb {
-  background: #3498db;
-  border-radius: 4px;
-}
-
-.news-list::-webkit-scrollbar-thumb:hover {
-  background: #2980b9;
-}
-
-.news-item {
-  background: white;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  border-left: 4px solid #bdc3c7;
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 20px; border: none; border-radius: 10px;
+  background: var(--primary-gradient); color: white; cursor: pointer;
   transition: all 0.3s ease;
 }
-
-.news-item:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
-
-.news-item.news-impact-critical {
-  border-left-color: #e74c3c;
-}
-
-.news-item.news-impact-high {
-  border-left-color: #f39c12;
-}
-
-.news-item.news-impact-medium {
-  border-left-color: #3498db;
-}
-
-.news-item.news-impact-low {
-  border-left-color: #95a5a6;
-}
-
-.news-header {
-  margin-bottom: 15px;
-}
-
-.news-title {
-  margin: 0 0 10px 0;
-  color: #2c3e50;
-  font-size: 1.2rem;
-  line-height: 1.4;
-}
-
-.news-meta {
-  display: flex;
-  gap: 15px;
-  color: #7f8c8d;
-  font-size: 0.9rem;
-}
-
-.news-content {
-  margin-bottom: 20px;
-  line-height: 1.6;
-  color: #34495e;
-}
-
-.news-analysis {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 15px;
-  margin-bottom: 20px;
-  padding: 15px;
-  background: #f8f9fa;
-  border-radius: 8px;
-}
-
-.analysis-item {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.analysis-item .label {
-  font-weight: bold;
-  color: #2c3e50;
-  font-size: 0.9rem;
-}
-
-.sentiment.positive {
-  color: #27ae60;
-  font-weight: bold;
-}
-
-.sentiment.negative {
-  color: #e74c3c;
-  font-weight: bold;
-}
-
-.sentiment.neutral {
-  color: #7f8c8d;
-  font-weight: bold;
-}
-
-.impact-critical {
-  color: #e74c3c;
-  font-weight: bold;
-}
-
-.impact-high {
-  color: #f39c12;
-  font-weight: bold;
-}
-
-.impact-medium {
-  color: #3498db;
-  font-weight: bold;
-}
-
-.impact-low {
-  color: #95a5a6;
-  font-weight: bold;
-}
-
-.crypto-mentions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-}
-
-.crypto-tag {
-  background: #3498db;
-  color: white;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 0.8rem;
-  font-weight: bold;
-}
-
-.news-actions {
-  display: flex;
-  gap: 10px;
-}
-
-.btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  text-decoration: none;
-  display: inline-block;
-  transition: all 0.3s ease;
-  font-size: 0.9rem;
-}
-
-.btn-primary {
-  background: #3498db;
-  color: white;
-}
-
-.btn-primary:hover {
-  background: #2980b9;
-}
-
-.btn-outline {
-  background: transparent;
-  color: #3498db;
-  border: 2px solid #3498db;
-}
-
-.btn-outline:hover {
-  background: #3498db;
-  color: white;
-}
-
-.btn-sm {
-  padding: 6px 12px;
-  font-size: 0.8rem;
-}
-
-.loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.9);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.loading-spinner {
-  font-size: 2rem;
-  animation: spin 1s linear infinite;
-  margin-bottom: 20px;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.card {
-  background: white;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
-}
-
-/* Styles pour la section des alertes d'investissement */
-.alerts-section {
-  margin-top: 30px;
-  padding: 20px;
-  background: #f8f9fa;
-  border-radius: 12px;
-  border: 1px solid #e9ecef;
-}
-
-.alerts-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.alerts-header h3 {
-  margin: 0;
-  color: #2c3e50;
-}
-
-.alerts-info {
-  margin-bottom: 25px;
-}
-
-.info-text {
-  margin-bottom: 15px;
-  color: #5a6c7d;
-  line-height: 1.5;
+.refresh-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
+.refresh-btn:disabled { opacity: .6; cursor: not-allowed; }
+
+.last-updated { color: var(--text-secondary); font-size: .9rem; }
+
+.alerts-explanation { background: var(--primary-gradient); color: white; margin-bottom: 30px; }
+.alerts-explanation h3 { margin-top: 0; color: white; }
+
+.alerts-section, .news-section { margin-bottom: 0; }
+.alerts-section h3, .news-section h3 { color: var(--text-primary); margin-bottom: 20px; font-size: 1.4rem; }
+
+.news-section-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 14px 16px; background: rgba(255,255,255,.06); border-radius: 12px; border: 1px solid var(--glass-border); transition: all .3s ease; margin-bottom: 0; }
+.news-section-header:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); transform: translateY(-1px); }
+.news-section-header h3 { margin: 0; color: var(--text-primary); font-size: 1.4rem; }
+
+.news-count { background: #3498db; color: white; padding: 4px 8px; border-radius: 12px; font-size: .8rem; font-weight: bold; margin-left: 10px; }
+
+.accordion-toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #3498db; color: white; transition: all .3s ease; }
+.accordion-toggle:hover { background: #2980b9; transform: scale(1.1); }
+.toggle-icon { font-size: 12px; transition: transform .3s ease; }
+.toggle-icon.expanded { transform: rotate(180deg); }
+
+.news-accordion-content { margin-top: 14px; animation: slideDown .3s ease-out; position: relative; border: 1px solid var(--glass-border); border-radius: 14px; overflow: hidden; background: var(--glass-bg); padding-bottom: 12px; }
+
+.resize-handle { position: absolute; bottom: 0; left: 0; right: 0; height: 14px; background: rgba(255,255,255,.06); border-top: 1px solid var(--glass-border); cursor: ns-resize; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease; z-index: 10; }
+.resize-handle:hover { background: rgba(255,255,255,.12); }
+.resize-grip { display: flex; flex-direction: column; gap: 2px; opacity: .8; transition: opacity .2s ease; }
+.resize-handle:hover .resize-grip { opacity: 1; }
+.grip-line { width: 30px; height: 2px; background: #cbd5e1; border-radius: 1px; }
+
+@keyframes slideDown { from { opacity: 0; max-height: 0; transform: translateY(-10px); } to { opacity: 1; max-height: 1000px; transform: translateY(0); } }
+
+.alerts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin-bottom: 20px; }
+
+.alert-card { background: var(--glass-bg); border-radius: 14px; padding: 18px; border: 1px solid var(--glass-border); box-shadow: var(--card-shadow); transition: transform .3s ease; }
+.alert-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
+.alert-card.alert-buy { border-left: 4px solid #27ae60; }
+.alert-card.alert-sell { border-left: 4px solid #e74c3c; }
+.alert-card.alert-hold { border-left: 4px solid #f39c12; }
+
+.alert-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+.alert-left { display: flex; align-items: center; gap: 10px; }
+.alert-right { display: flex; align-items: center; }
+.alert-type { font-weight: 800; font-size: .9rem; padding: 4px 10px; border-radius: 999px; color: white; letter-spacing: .3px; }
+.alert-buy .alert-type { background: #27ae60; }
+.alert-sell .alert-type { background: #e74c3c; }
+.alert-hold .alert-type { background: #f39c12; }
+.alert-crypto { font-weight: bold; color: var(--text-primary); font-size: 1.05rem; }
+.confidence-badge { background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 999px; font-weight: 800; color: #e2e8f0; font-size: .85rem; }
+.alert-reasoning { margin-bottom: 15px; line-height: 1.6; color: #cbd5e1; }
+.alert-meta { display: flex; justify-content: space-between; align-items: center; color: #94a3b8; font-size: .9rem; }
+.alert-priority { padding: 4px 8px; border-radius: 12px; font-size: .8rem; font-weight: bold; }
+.priority-urgent { background: #e74c3c; color: white; }
+.priority-high { background: #f39c12; color: white; }
+.priority-medium { background: #3498db; color: white; }
+.priority-low { background: #6b7280; color: white; }
+.alert-time { color: #94a3b8; font-size: .9rem; }
+
+.no-alerts, .no-news { text-align: center; padding: 40px; color: #94a3b8; }
+.no-alerts-hint, .no-news-hint { font-size: .9rem; margin-top: 10px; }
+
+.news-filters { display: flex; gap: 10px; margin-bottom: 20px; }
+.filter-btn { padding: 8px 16px; border: 2px solid #94a3b8; background: transparent; border-radius: 20px; cursor: pointer; transition: all .3s ease; color: #cbd5e1; }
+.filter-btn.active { background: var(--primary-gradient); border-color: transparent; color: white; }
+.filter-btn:hover { border-color: #667eea; color: #ffffff; }
+
+.news-list { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding: 16px 16px 36px; height: 100%; scrollbar-width: thin; scrollbar-color: #667eea transparent; }
+.news-list::-webkit-scrollbar { width: 8px; }
+.news-list::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 4px; }
+.news-list::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 4px; }
+.news-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #5a67d8, #6b46c1); }
+
+.news-item { background: var(--glass-bg); border-radius: 16px; padding: 18px; box-shadow: var(--card-shadow); border-left: 4px solid #bdc3c7; transition: all .3s ease; }
+.news-item + .news-item { margin-top: 2px; }
+.news-item:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
+.news-item.news-impact-critical { border-left-color: #e74c3c; }
+.news-item.news-impact-high { border-left-color: #f39c12; }
+.news-item.news-impact-medium { border-left-color: #3498db; }
+.news-item.news-impact-low { border-left-color: #95a5a6; }
+
+.news-header { margin-bottom: 15px; }
+.news-title { margin: 0 0 8px 0; color: var(--text-primary); font-size: 1.1rem; line-height: 1.45; }
+.news-meta { display: flex; gap: 15px; color: #94a3b8; font-size: .9rem; }
+.news-content { margin: 10px 0 16px; line-height: 1.65; color: #cbd5e1; }
+
+.news-analysis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 10px; margin-bottom: 6px; padding: 12px; background: rgba(255,255,255,.08); border-radius: 12px; }
+.analysis-item { display: flex; flex-direction: column; gap: 5px; }
+.analysis-item .label { font-weight: bold; color: var(--text-primary); font-size: .9rem; }
+.sentiment.positive { color: #27ae60; font-weight: bold; }
+.sentiment.negative { color: #e74c3c; font-weight: bold; }
+.sentiment.neutral { color: #fbbf24; font-weight: bold; }
+.impact-critical { color: #e74c3c; font-weight: bold; }
+.impact-high { color: #f39c12; font-weight: bold; }
+.impact-medium { color: #3498db; font-weight: bold; }
+.impact-low { color: #95a5a6; font-weight: bold; }
+
+.crypto-mentions { display: flex; flex-wrap: wrap; gap: 5px; }
+.crypto-tag { background: #3498db; color: white; padding: 2px 8px; border-radius: 12px; font-size: .8rem; font-weight: bold; }
+
+.news-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
+
+.btn { padding: 8px 16px; border: none; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-block; transition: all .3s ease; font-size: .9rem; color: white; position: relative; overflow: hidden; }
+.btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 80%); transition: left .5s; }
+.btn:hover::before { left: 100%; }
+
+.btn-primary { background: var(--primary-gradient); }
+.btn-outline { background: transparent; color: #cbd5e1; border: 2px solid #667eea; }
+.btn-outline:hover { background: #667eea; color: white; }
+.btn-sm { padding: 6px 12px; font-size: .8rem; }
+.btn-secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); color: white; }
+.btn-secondary:hover { filter: brightness(1.05); }
+
+.loading-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; color: var(--text-primary); }
+.loading-spinner { font-size: 2rem; animation: spin 1s linear infinite; margin-bottom: 20px; }
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+.card { background: var(--glass-bg); border-radius: 12px; padding: 20px; box-shadow: var(--card-shadow); border: 1px solid var(--glass-border); margin-bottom: 20px; }
+
+/* alert list items */
+.alert-item { padding: 16px; background: rgba(255,255,255,.06); border-radius: 16px; border-left: 6px solid #3498db; box-shadow: var(--card-shadow); position: relative; overflow: hidden; }
+.alert-item.buy { border-left-color: #22c55e; }
+.alert-item.sell { border-left-color: #ef4444; }
+.alert-item.hold { border-left-color: #f59e0b; }
+.alert-item + .alert-item { margin-top: 12px; }
+.crypto-symbol { font-weight: 800; color: var(--text-primary); font-size: 1.05rem; letter-spacing: .2px; }
+.confidence { background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 999px; font-size: .85rem; font-weight: 800; color: #e2e8f0; }
+.alert-reasoning { font-size: .9rem; color: #cbd5e1; font-style: italic; margin-top: 8px; }
+
+@media (max-width: 1024px) {
+  .content-grid { grid-template-columns: 1fr; }
 }
-
-.alert-types {
-  display: flex;
-  justify-content: space-around;
-  margin-top: 15px;
-  padding: 10px 0;
-  border-top: 1px solid #e1e8ed;
-  border-bottom: 1px solid #e1e8ed;
-}
-
-.alert-type {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: #34495e;
-}
-
-.type-badge {
-  padding: 4px 10px;
-  border-radius: 15px;
-  font-weight: 600;
-  color: white;
-}
-
-.type-badge.buy {
-  background-color: #27ae60;
-}
-
-.type-badge.sell {
-  background-color: #e74c3c;
-}
-
-.type-badge.hold {
-  background-color: #f39c12;
-}
-
-.recent-alerts h4 {
-  margin-bottom: 15px;
-  color: #2c3e50;
-  font-size: 1.2rem;
-}
-
-.alert-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.alert-item {
-  padding: 16px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  border-left: 4px solid #3498db; /* Default color */
-}
-
-.alert-item.buy {
-  border-left-color: #27ae60; /* Green for BUY */
-}
-
-.alert-item.sell {
-  border-left-color: #e74c3c; /* Red for SELL */
-}
-
-.alert-item.hold {
-  border-left-color: #f39c12; /* Orange for HOLD */
-}
-
-.alert-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.alert-type {
-  padding: 4px 12px;
-  border-radius: 20px;
-  font-size: 14px;
-  font-weight: 600;
-  color: white;
-}
-
-.alert-type.buy {
-  background-color: #27ae60;
-}
-
-.alert-type.sell {
-  background-color: #e74c3c;
-}
-
-.alert-type.hold {
-  background-color: #f39c12;
-}
-
-.crypto-symbol {
-  font-weight: 600;
-  color: #2c3e50;
-}
-
-.confidence {
-  background: #e9ecef;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  font-weight: bold;
-}
-
-.alert-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 0.8rem;
-  color: #6c757d;
-  margin-bottom: 8px;
-}
-
-.alert-reasoning {
-  font-size: 0.9rem;
-  color: #495057;
-  font-style: italic;
-  margin-top: 8px;
-}
-
-.no-alerts {
-  text-align: center;
-  padding: 30px 20px;
-  color: #6c757d;
-}
-
-.no-alerts .hint {
-  font-size: 0.9rem;
-  margin-top: 10px;
-  color: #adb5bd;
-}
-
-.btn-secondary {
-  background: #6c757d;
-  color: white;
-}
-
-.btn-secondary:hover {
-  background: #5a6268;
-}
-
 @media (max-width: 768px) {
-  .dashboard-header {
-    flex-direction: column;
-    gap: 15px;
-    align-items: flex-start;
-  }
-  
-  .header-actions {
-    width: 100%;
-    justify-content: space-between;
-  }
-  
-  .alerts-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .news-analysis {
-    grid-template-columns: 1fr;
-  }
-  
-  .alert-types {
-    flex-direction: column;
-    gap: 10px;
-  }
-  
-  .alert-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-  
-  .alert-meta {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 4px;
-  }
-  
-  .resize-handle {
-    height: 16px; /* Plus facile à utiliser sur mobile */
-  }
-  
-  .grip-line {
-    width: 40px; /* Plus visible sur mobile */
-  }
+  .dashboard-header { flex-direction: column; gap: 15px; align-items: flex-start; }
+  .header-actions { width: 100%; justify-content: space-between; }
+  .alerts-grid { grid-template-columns: 1fr; }
+  .news-analysis { grid-template-columns: 1fr; }
+  .alert-types { flex-direction: column; gap: 10px; }
+  .alert-header { flex-direction: column; align-items: flex-start; gap: 8px; }
+  .alert-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
+  .resize-handle { height: 16px; }
+  .grip-line { width: 40px; }
 }
 </style>
diff --git a/crypto-pilot-builder/src/pipeline_agent/components/AutoWallet.vue b/crypto-pilot-builder/src/pipeline_agent/components/AutoWallet.vue
index 804db88..00fda8d 100644
--- a/crypto-pilot-builder/src/pipeline_agent/components/AutoWallet.vue
+++ b/crypto-pilot-builder/src/pipeline_agent/components/AutoWallet.vue
@@ -10,7 +10,7 @@
       <div class="card">
         <h2>🚀 Configuration initiale</h2>
         <p>Configurez votre autowallet pour commencer l'investissement automatique</p>
-        
+
         <!-- Bouton de configuration rapide -->
         <div class="quick-setup">
           <button @click="createDefaultConfig" class="btn btn-success" :disabled="isLoading">
@@ -18,17 +18,17 @@
           </button>
           <p class="quick-hint">Utilise les paramètres par défaut optimisés pour commencer rapidement</p>
         </div>
-        
+
         <div class="separator">
           <span>ou</span>
         </div>
-        
+
         <form @submit.prevent="createAutowallet" class="config-form">
           <div class="form-group">
             <label>Activer l'autowallet</label>
             <input type="checkbox" v-model="newConfig.is_active" />
           </div>
-          
+
           <div class="form-group">
             <label>Intervalle d'analyse (minutes)</label>
             <select v-model="newConfig.analysis_interval">
@@ -38,12 +38,12 @@
               <option value="60">1 heure</option>
             </select>
           </div>
-          
+
           <div class="form-group">
             <label>Montant maximum par trade (USD)</label>
             <input type="number" v-model="newConfig.max_investment_per_trade" min="10" step="10" />
           </div>
-          
+
           <div class="form-group">
             <label>Tolérance au risque</label>
             <select v-model="newConfig.risk_tolerance">
@@ -52,7 +52,7 @@
               <option value="high">Élevée</option>
             </select>
           </div>
-          
+
           <div class="form-group">
             <label>Stratégie d'investissement</label>
             <select v-model="newConfig.investment_strategy">
@@ -61,12 +61,12 @@
               <option value="aggressive">Agressive</option>
             </select>
           </div>
-          
+
           <div class="form-group">
             <label>Seuil de confiance minimum (%)</label>
             <input type="number" v-model="newConfig.min_confidence_threshold" min="50" max="95" step="5" />
           </div>
-          
+
           <div class="form-group">
             <label>Cryptomonnaies autorisées</label>
             <div class="crypto-list">
@@ -76,7 +76,7 @@
               </label>
             </div>
           </div>
-          
+
           <button type="submit" class="btn btn-primary" :disabled="isLoading">
             {{ isLoading ? 'Création...' : 'Créer l\'autowallet' }}
           </button>
@@ -110,18 +110,18 @@
             <span class="value">{{ autowalletConfig.total_trades }}</span>
           </div>
         </div>
-        
+
         <div class="actions">
-          <button 
-            @click="startMonitoring" 
-            class="btn btn-success" 
+          <button
+            @click="startMonitoring"
+            class="btn btn-success"
             :disabled="autowalletConfig.is_monitoring || !autowalletConfig.is_active"
           >
             Démarrer le monitoring
           </button>
-          <button 
-            @click="stopMonitoring" 
-            class="btn btn-warning" 
+          <button
+            @click="stopMonitoring"
+            class="btn btn-warning"
             :disabled="!autowalletConfig.is_monitoring"
           >
             Arrêter le monitoring
@@ -154,7 +154,7 @@
             <span class="value">{{ autowalletConfig.min_confidence_threshold }}%</span>
           </div>
         </div>
-        
+
         <button @click="showEditConfig = true" class="btn btn-secondary">
           Modifier la configuration
         </button>
@@ -163,7 +163,7 @@
       <!-- News récentes -->
       <div class="news-card card">
         <h3>📰 News récentes</h3>
-        
+
         <!-- Statut de l'analyse automatique -->
         <div class="auto-analysis-status" v-if="autowalletConfig">
           <div class="status-indicator">
@@ -177,7 +177,7 @@
             <span>News analysées: {{ autowalletConfig.total_trades || 0 }}</span>
           </div>
         </div>
-        
+
         <div class="news-list" v-if="recentNews.length > 0">
           <div v-for="news in recentNews" :key="news.id" class="news-item">
             <div class="news-header">
@@ -209,11 +209,11 @@
             </div>
           </div>
         </div>
-        
+
         <div v-else class="loading">
           <p>Chargement des news...</p>
         </div>
-        
+
         <button @click="refreshNews" class="btn btn-secondary">
           Actualiser les news
         </button>
@@ -221,14 +221,14 @@
 
           <!-- Onglets de navigation -->
     <div class="tabs-navigation">
-      <button 
-        @click="activeTab = 'autowallet'" 
+      <button
+        @click="activeTab = 'autowallet'"
         :class="['tab-button', { active: activeTab === 'autowallet' }]"
       >
         🤖 AutoWallet
       </button>
-      <button 
-        @click="activeTab = 'pipeline'" 
+      <button
+        @click="activeTab = 'pipeline'"
         :class="['tab-button', { active: activeTab === 'pipeline' }]"
       >
         🚀 Pipeline de Trading
@@ -249,7 +249,7 @@
           </div>
           <div class="alerts-info">
             <p class="info-text">
-              <strong>Que sont les alertes ?</strong> Ce sont des recommandations d'investissement générées par l'IA 
+              <strong>Que sont les alertes ?</strong> Ce sont des recommandations d'investissement générées par l'IA
               basées sur l'analyse des news crypto. Elles vous indiquent quand acheter, vendre ou attendre.
             </p>
             <div class="alert-types">
@@ -267,7 +267,7 @@
               </div>
             </div>
           </div>
-          
+
           <div class="recent-alerts" v-if="recentAlerts && recentAlerts.length > 0">
             <!-- Debug info -->
             <div style="background: #f0f0f0; padding: 10px; margin-bottom: 15px; border-radius: 5px; font-size: 12px;">
@@ -290,7 +290,7 @@
               </div>
             </div>
           </div>
-          
+
           <div v-else class="no-alerts">
             <!-- Debug info -->
             <div style="background: #f0f0f0; padding: 10px; margin-bottom: 15px; border-radius: 5px; font-size: 12px;">
@@ -306,11 +306,11 @@
           <h3>💼 Historique des trades</h3>
           <div class="trades-info">
             <p class="info-text">
-              <strong>Que sont les trades ?</strong> Ce sont les actions d'investissement exécutées automatiquement 
+              <strong>Que sont les trades ?</strong> Ce sont les actions d'investissement exécutées automatiquement
               par l'IA basées sur les alertes générées. Chaque trade représente un achat ou une vente de cryptomonnaie.
             </p>
           </div>
-          
+
           <div class="trades-list" v-if="tradeHistory && tradeHistory.length > 0">
             <div v-for="trade in tradeHistory" :key="trade.id" class="trade-item">
               <div class="trade-header">
@@ -328,7 +328,7 @@
               </div>
             </div>
           </div>
-          
+
           <div v-else class="no-trades">
             <p>Aucun trade effectué pour le moment</p>
             <p class="hint">Les trades seront exécutés automatiquement lors de la génération d'alertes BUY/SELL</p>
@@ -347,10 +347,10 @@
     <Modal v-if="showEditConfig" @close="showEditConfig = false">
       <template #header>Modifier la configuration</template>
       <template #body>
-        <EditConfigForm 
-          :config="autowalletConfig" 
-          @save="updateConfig" 
-          @cancel="showEditConfig = false" 
+        <EditConfigForm
+          :config="autowalletConfig"
+          @save="updateConfig"
+          @cancel="showEditConfig = false"
         />
       </template>
     </Modal>
@@ -425,7 +425,7 @@ export default {
           await createDefaultConfig()
         }
       }
-      
+
       // Toujours charger les alertes, même si la config n'existe pas
       await loadRecentAlerts()
     }
@@ -444,12 +444,12 @@ export default {
           stop_loss_percentage: 5.0,
           take_profit_percentage: 15.0
         }
-        
+
         const response = await apiService.request('/api/autowallet/config', {
           method: 'POST',
           body: defaultConfig
         })
-        
+
         if (response.success) {
           console.log('Configuration par défaut créée avec succès')
           autowalletConfig.value = defaultConfig
@@ -457,7 +457,7 @@ export default {
           await loadRecentNews()
           await loadTradeHistory()
           await loadRecentAlerts()
-          
+
           // Démarrer l'analyse automatique
           await startAutoAnalysis()
         }
@@ -532,7 +532,7 @@ export default {
           method: 'POST',
           body: newConfig.value
         })
-        
+
         if (response.success) {
           await loadAutowalletConfig()
         }
@@ -549,7 +549,7 @@ export default {
         const response = await apiService.request('/api/autowallet/start', {
           method: 'POST'
         })
-        
+
         if (response.success) {
           await loadAutowalletConfig()
         }
@@ -564,7 +564,7 @@ export default {
         const response = await apiService.request('/api/autowallet/stop', {
           method: 'POST'
         })
-        
+
         if (response.success) {
           await loadAutowalletConfig()
         }
@@ -579,7 +579,7 @@ export default {
         const response = await apiService.request('/api/autowallet/start', {
           method: 'POST'
         })
-        
+
         if (response.success) {
           console.log('✅ Analyse automatique démarrée')
           await loadAutowalletConfig()
@@ -593,19 +593,19 @@ export default {
     const analyzeNews = async (newsIds) => {
       try {
         console.log('🔍 Analyse des news:', newsIds)
-        
+
         const response = await apiService.request('/api/autowallet/analyze', {
           method: 'POST',
           body: { news_ids: newsIds }
         })
-        
+
         if (response.success) {
           console.log('✅ Alertes générées:', response.alerts)
           console.log(`📊 ${response.count} alertes créées`)
-          
+
           // Recharger les alertes récentes
           await loadRecentAlerts()
-          
+
           // Afficher un message de succès à l'utilisateur
           if (response.count > 0) {
             alert(`✅ ${response.count} alerte(s) générée(s) avec succès !`)
@@ -615,10 +615,10 @@ export default {
         }
       } catch (error) {
         console.error('❌ Erreur lors de l\'analyse:', error)
-        
+
         // Afficher un message d'erreur à l'utilisateur
         let errorMessage = 'Erreur lors de l\'analyse des news'
-        
+
         if (error.message.includes('401')) {
           errorMessage = 'Erreur d\'authentification. Veuillez vous reconnecter.'
         } else if (error.message.includes('404')) {
@@ -628,7 +628,7 @@ export default {
         } else if (error.message.includes('500')) {
           errorMessage = 'Erreur serveur. Veuillez réessayer plus tard.'
         }
-        
+
         alert(`❌ ${errorMessage}`)
       }
     }
@@ -645,7 +645,7 @@ export default {
           method: 'POST',
           body: channelData
         })
-        
+
         if (response.success) {
           await loadAlertChannels()
           showAddChannel.value = false
@@ -661,7 +661,7 @@ export default {
         const response = await apiService.request(`/api/autowallet/alerts/channels/${channelId}`, {
           method: 'DELETE'
         })
-        
+
         if (response.success) {
           await loadAlertChannels()
         }
@@ -678,7 +678,7 @@ export default {
           method: 'PUT',
           body: { is_active: !channel.is_active }
         })
-        
+
         if (response.success) {
           await loadAlertChannels()
         }
@@ -694,7 +694,7 @@ export default {
           method: 'PUT',
           body: updatedConfig
         })
-        
+
         if (response.success) {
           await loadAutowalletConfig()
           showEditConfig.value = false
@@ -1504,30 +1504,107 @@ export default {
   .autowallet-container {
     padding: 16px;
   }
-  
+
   .card {
     padding: 16px;
   }
-  
+
   .status-grid,
   .config-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .news-analysis {
     flex-direction: column;
     gap: 8px;
   }
-  
+
   .trade-item {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
   }
-  
+
   .trade-details {
     flex-direction: column;
     gap: 8px;
   }
 }
+
+/* === Harmonisation avec l'AutoWallet principal (thème sombre + glass) === */
+:root {
+  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --secondary-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
+  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  --error-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  --glass-bg: rgba(255, 255, 255, 0.08);
+  --glass-border: rgba(255, 255, 255, 0.12);
+  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --card-shadow-hover: 0 10px 30px rgba(118, 75, 162, 0.4);
+  --main-bg: linear-gradient(135deg, #111421 0%, #111421 100%);
+  --text-primary: #f3e8ff;
+  --text-secondary: rgba(255, 255, 255, 0.8);
+}
+
+.autowallet-container {
+  background: var(--main-bg);
+  min-height: 100vh;
+  width: 100vw;
+  max-width: 100vw;
+  color: var(--text-primary);
+}
+
+.header h1 { color: var(--text-primary); text-shadow: 0 2px 4px rgba(0,0,0,.3); }
+.subtitle { color: var(--text-secondary); }
+
+.card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  border-radius: 20px;
+  box-shadow: var(--card-shadow);
+}
+
+.card h2, .card h3 { color: var(--text-primary); text-shadow: 0 2px 4px rgba(0,0,0,.3); }
+
+.btn {
+  border-radius: 10px;
+  font-weight: 700;
+  color: #fff;
+  transition: all .3s ease;
+  position: relative;
+  overflow: hidden;
+}
+.btn::before {
+  content: "";
+  position: absolute;
+  top: 0; left: -100%; width: 100%; height: 100%;
+  background: linear-gradient(120deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 80%);
+  transition: left .5s ease; z-index: -1;
+}
+.btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(125,82,204,.4); }
+.btn:hover::before { left: 100%; }
+
+.btn-primary { background: var(--primary-gradient); }
+.btn-secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }
+.btn-success { background: var(--success-gradient); }
+.btn-warning { background: var(--warning-gradient); }
+.btn-danger { background: var(--error-gradient); }
+
+.status-item, .config-item, .channel-item, .news-item, .trade-item, .alert-item {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+}
+
+.label { color: #e2e8f0; }
+.value, .crypto-symbol, .news-header h4 { color: #f8fafc; }
+.news-content, .alert-reasoning { color: #cbd5e1; }
+.alert-meta, .time { color: #94a3b8; }
+
+.tabs-navigation { border-bottom: 2px solid rgba(255,255,255,.12); }
+.tab-button { color: #cbd5e1; }
+.tab-button:hover { color: #ffffff; }
+.tab-button.active { color: #ffffff; border-bottom-color: #ffffff; }
 </style>
diff --git a/crypto-pilot-builder/src/pipeline_agent/components/TradingPipeline.vue b/crypto-pilot-builder/src/pipeline_agent/components/TradingPipeline.vue
index 016b0be..801e0a1 100644
--- a/crypto-pilot-builder/src/pipeline_agent/components/TradingPipeline.vue
+++ b/crypto-pilot-builder/src/pipeline_agent/components/TradingPipeline.vue
@@ -1,8 +1,66 @@
 <template>
   <div class="trading-pipeline-container">
-    <div class="header">
-      <h2>🚀 Pipeline de Trading Unifiée</h2>
-      <p class="subtitle">Pipeline d'agents intégrée avec l'autowallet existant</p>
+    <div class="header hero">
+      <div class="hero-left">
+        <div class="hero-icon">🚀</div>
+        <div class="hero-title">
+          <h2>Trading Pipeline</h2>
+          <p class="subtitle">Exécutez, suivez et inspectez chaque agent en temps réel</p>
+        </div>
+      </div>
+      <div class="hero-actions">
+        <button @click="startPipeline" class="btn btn-success" :disabled="pipelineStatus.is_running || isLoading">Lancer</button>
+        <button @click="stopPipeline" class="btn btn-warning" :disabled="!pipelineStatus.is_running || isLoading">Arrêter</button>
+      </div>
+    </div>
+
+    <!-- Tableau des agents (exécution rapide) -->
+    <div class="agents-board card">
+      <h3>🧩 Agents</h3>
+      <div class="agents-grid">
+        <div class="agent-tile">
+          <div class="agent-header">
+            <span class="agent-icon">📊</span>
+            <span class="agent-name">DataCollector</span>
+          </div>
+          <button class="tile-btn" @click="forceDataCollection" :disabled="isLoading">Exécuter</button>
+        </div>
+        <div class="agent-tile">
+          <div class="agent-header">
+            <span class="agent-icon">📰</span>
+            <span class="agent-name">NewsCollector</span>
+          </div>
+          <button class="tile-btn" @click="forceDataCollection" :disabled="isLoading">Exécuter</button>
+        </div>
+        <div class="agent-tile">
+          <div class="agent-header">
+            <span class="agent-icon">🔄</span>
+            <span class="agent-name">DataAggregator</span>
+          </div>
+          <button class="tile-btn" @click="forceDataCollection" :disabled="isLoading">Exécuter</button>
+        </div>
+        <div class="agent-tile">
+          <div class="agent-header">
+            <span class="agent-icon">🔮</span>
+            <span class="agent-name">Predictor</span>
+          </div>
+          <button class="tile-btn" @click="forcePredictionGeneration" :disabled="isLoading">Exécuter</button>
+        </div>
+        <div class="agent-tile">
+          <div class="agent-header">
+            <span class="agent-icon">📈</span>
+            <span class="agent-name">Strategy</span>
+          </div>
+          <button class="tile-btn" @click="forceSignalGeneration" :disabled="isLoading">Exécuter</button>
+        </div>
+        <div class="agent-tile">
+          <div class="agent-header">
+            <span class="agent-icon">💼</span>
+            <span class="agent-name">Trader</span>
+          </div>
+          <button class="tile-btn" @click="forceTradeExecution" :disabled="isLoading">Exécuter</button>
+        </div>
+      </div>
     </div>
 
     <!-- Statut de la pipeline -->
@@ -36,18 +94,18 @@
           <span class="value">{{ formatTime(pipelineStatus.last_update) }}</span>
         </div>
       </div>
-      
+
       <div class="actions">
-        <button 
-          @click="startPipeline" 
-          class="btn btn-success" 
+        <button
+          @click="startPipeline"
+          class="btn btn-success"
           :disabled="pipelineStatus.is_running || isLoading"
         >
           🚀 Démarrer la Pipeline
         </button>
-        <button 
-          @click="stopPipeline" 
-          class="btn btn-warning" 
+        <button
+          @click="stopPipeline"
+          class="btn btn-warning"
           :disabled="!pipelineStatus.is_running || isLoading"
         >
           ⏹️ Arrêter la Pipeline
@@ -84,7 +142,7 @@
           <span class="value">{{ Math.round(pipelineConfig.min_confidence_threshold * 100) }}%</span>
         </div>
       </div>
-      
+
       <div class="risk-management">
         <h4>🎯 Gestion des Risques</h4>
         <div class="risk-grid">
@@ -111,26 +169,12 @@
     <!-- Actions manuelles -->
     <div class="actions-card card">
       <h3>🔧 Actions Manuelles</h3>
-      <p class="info-text">
-        Ces actions permettent de forcer l'exécution des étapes de la pipeline pour des tests ou des ajustements.
-      </p>
-      
-      <div class="actions-grid">
-        <button @click="forceDataCollection" class="btn btn-secondary" :disabled="isLoading">
-          📊 Collecter les Données
-        </button>
-        <button @click="forcePredictionGeneration" class="btn btn-secondary" :disabled="isLoading">
-          🔮 Générer Prédictions
-        </button>
-        <button @click="forceSignalGeneration" class="btn btn-secondary" :disabled="isLoading">
-          📈 Générer Signaux
-        </button>
-        <button @click="forceTradeExecution" class="btn btn-secondary" :disabled="isLoading">
-          💼 Exécuter Trades
-        </button>
-        <button @click="clearPipelineCache" class="btn btn-warning" :disabled="isLoading">
-          🗑️ Vider le Cache
-        </button>
+      <div class="agent-actions">
+        <button @click="forceDataCollection" class="chip chip-blue" :disabled="isLoading">📊 DataCollector</button>
+        <button @click="forcePredictionGeneration" class="chip chip-purple" :disabled="isLoading">🔮 Predictor</button>
+        <button @click="forceSignalGeneration" class="chip chip-green" :disabled="isLoading">📈 Strategy</button>
+        <button @click="forceTradeExecution" class="chip chip-amber" :disabled="isLoading">💼 Trader</button>
+        <button @click="clearPipelineCache" class="chip chip-slate" :disabled="isLoading">🗑️ Clear Cache</button>
       </div>
     </div>
 
@@ -349,7 +393,7 @@ export default {
         const response = await apiService.request('/api/trading-pipeline/start', {
           method: 'POST'
         })
-        
+
         if (response.success) {
           await loadPipelineStatus()
         }
@@ -367,7 +411,7 @@ export default {
         const response = await apiService.request('/api/trading-pipeline/stop', {
           method: 'POST'
         })
-        
+
         if (response.success) {
           await loadPipelineStatus()
         }
@@ -499,7 +543,7 @@ export default {
     // Charger les données au montage
     onMounted(async () => {
       await loadAllData()
-      
+
       // Actualiser les données toutes les 30 secondes
       setInterval(loadAllData, 30000)
     })
@@ -533,10 +577,28 @@ export default {
 </script>
 
 <style scoped>
+:root {
+  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --secondary-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
+  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  --error-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  --glass-bg: rgba(255, 255, 255, 0.08);
+  --glass-border: rgba(255, 255, 255, 0.12);
+  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --card-shadow-hover: 0 10px 30px rgba(118, 75, 162, 0.4);
+  --main-bg: linear-gradient(135deg, #111421 0%, #111421 100%);
+  --text-primary: #f3e8ff;
+  --text-secondary: rgba(255, 255, 255, 0.8);
+}
+
 .trading-pipeline-container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 20px;
+  background: var(--main-bg);
+  min-height: 100vh;
+  color: var(--text-primary);
 }
 
 .header {
@@ -544,28 +606,42 @@ export default {
   margin-bottom: 30px;
 }
 
+.hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.hero-left { display: flex; align-items: center; gap: 14px; }
+.hero-icon { font-size: 28px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid var(--glass-border); }
+.hero-title h2 { margin: 0 0 6px 0; }
+.hero-actions { display: flex; gap: 10px; }
+
 .header h2 {
-  color: #2c3e50;
+  color: var(--text-primary);
   margin-bottom: 10px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .subtitle {
-  color: #7f8c8d;
+  color: var(--text-secondary);
   font-size: 1.1em;
 }
 
 .card {
-  background: white;
-  border-radius: 12px;
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
   padding: 24px;
   margin-bottom: 24px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border: 1px solid #e1e8ed;
+  box-shadow: var(--card-shadow);
 }
 
 .card h3, .card h4 {
-  color: #2c3e50;
+  color: var(--text-primary);
   margin-bottom: 16px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 .status-grid,
@@ -586,18 +662,12 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 12px;
-  background: #f8f9fa;
-  border-radius: 8px;
-}
-
-.label {
-  font-weight: 600;
-  color: #34495e;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
 }
 
-.value {
-  color: #2c3e50;
-}
+.label { font-weight: 600; color: #e2e8f0; }
+.value { color: #f8fafc; }
 
 .status {
   padding: 4px 12px;
@@ -605,16 +675,8 @@ export default {
   font-size: 14px;
   font-weight: 600;
 }
-
-.status.active {
-  background: #d4edda;
-  color: #155724;
-}
-
-.status.inactive {
-  background: #f8d7da;
-  color: #721c24;
-}
+.status.active { background: #d4edda; color: #155724; }
+.status.inactive { background: #f8d7da; color: #721c24; }
 
 .actions {
   display: flex;
@@ -625,58 +687,33 @@ export default {
 .btn {
   padding: 12px 24px;
   border: none;
-  border-radius: 8px;
+  border-radius: 12px;
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-primary {
-  background: #3498db;
-  color: white;
+  transition: all 0.3s ease;
+  color: #fff;
+  position: relative;
+  overflow: hidden;
 }
-
-.btn-primary:hover {
-  background: #2980b9;
+.btn::before {
+  content: "";
+  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
+  background: linear-gradient(120deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 80%);
+  transition: left .5s ease; z-index: -1;
 }
+.btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(125,82,204,.4); }
+.btn:hover::before { left: 100%; }
 
-.btn-secondary {
-  background: #95a5a6;
-  color: white;
-}
-
-.btn-secondary:hover {
-  background: #7f8c8d;
-}
-
-.btn-success {
-  background: #27ae60;
-  color: white;
-}
-
-.btn-success:hover {
-  background: #229954;
-}
-
-.btn-warning {
-  background: #f39c12;
-  color: white;
-}
-
-.btn-warning:hover {
-  background: #e67e22;
-}
-
-.btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
+.btn-primary { background: var(--primary-gradient); }
+.btn-secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }
+.btn-success { background: var(--success-gradient); }
+.btn-warning { background: var(--warning-gradient); }
 
 .risk-management {
   margin-top: 20px;
   padding-top: 20px;
-  border-top: 1px solid #e1e8ed;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 
 .actions-grid {
@@ -685,32 +722,59 @@ export default {
   gap: 12px;
 }
 
-.info-text {
-  color: #7f8c8d;
-  margin-bottom: 20px;
-  line-height: 1.6;
-}
+.agent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
+.chip { border: 1px solid var(--glass-border); padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-weight: 700; }
+.chip-blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
+.chip-purple { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
+.chip-green { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
+.chip-amber { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
+.chip-slate { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
+
+.info-text { color: #94a3b8; margin-bottom: 20px; line-height: 1.6; }
 
 .data-section {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-bottom: 24px;
 }
 
-.data-card {
-  min-height: 300px;
+.agents-board h3 { margin-bottom: 12px; }
+.agents-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(220px, 1fr));
+  gap: 16px;
+}
+.agent-tile {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: var(--card-shadow);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
+.agent-header { display: flex; align-items: center; gap: 10px; }
+.agent-icon { font-size: 20px; padding: 6px; background: rgba(255,255,255,.1); border: 1px solid var(--glass-border); border-radius: 10px; }
+.agent-name { font-weight: 700; }
+.tile-btn { border: 1px solid var(--glass-border); padding: 8px 12px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-weight: 700; }
 
-.data-list {
-  max-height: 400px;
-  overflow-y: auto;
+@media (max-width: 1200px) {
+  .agents-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
+}
+@media (max-width: 768px) {
+  .agents-grid { grid-template-columns: 1fr; }
 }
 
+.data-card { min-height: 300px; }
+
+.data-list { max-height: 400px; overflow-y: auto; }
+
 .data-item {
   padding: 16px;
-  background: #f8f9fa;
-  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
   margin-bottom: 12px;
   border-left: 4px solid #3498db;
 }
@@ -722,15 +786,8 @@ export default {
   margin-bottom: 8px;
 }
 
-.symbol {
-  font-weight: 600;
-  color: #2c3e50;
-}
-
-.price {
-  font-weight: 600;
-  color: #27ae60;
-}
+.symbol { font-weight: 600; color: #e2e8f0; }
+.price { font-weight: 600; color: #27ae60; }
 
 .direction,
 .signal-type,
@@ -741,24 +798,15 @@ export default {
   font-weight: 600;
   color: white;
 }
-
 .direction.bullish,
 .signal-type.buy,
-.trade-type.buy {
-  background: #27ae60;
-}
-
+.trade-type.buy { background: #27ae60; }
 .direction.bearish,
 .signal-type.sell,
-.trade-type.sell {
-  background: #e74c3c;
-}
-
+.trade-type.sell { background: #e74c3c; }
 .direction.neutral,
 .signal-type.hold,
-.trade-type.hold {
-  background: #f39c12;
-}
+.trade-type.hold { background: #f39c12; }
 
 .data-details {
   display: flex;
@@ -778,108 +826,53 @@ export default {
 .status {
   padding: 2px 8px;
   border-radius: 12px;
-  background: #e1e8ed;
-  color: #34495e;
-}
-
-.sentiment.positive {
-  background: #d4edda;
-  color: #155724;
+  background: rgba(255, 255, 255, 0.15);
+  color: #e2e8f0;
 }
 
-.sentiment.negative {
-  background: #f8d7da;
-  color: #721c24;
-}
+.sentiment.positive { background: #d4edda; color: #155724; }
+.sentiment.negative { background: #f8d7da; color: #721c24; }
+.sentiment.neutral { background: #fff3cd; color: #856404; }
 
-.sentiment.neutral {
-  background: #fff3cd;
-  color: #856404;
-}
-
-.status.executed {
-  background: #d4edda;
-  color: #155724;
-}
-
-.status.pending {
-  background: #fff3cd;
-  color: #856404;
-}
-
-.status.failed {
-  background: #f8d7da;
-  color: #721c24;
-}
+.status.executed { background: #d4edda; color: #155724; }
+.status.pending { background: #fff3cd; color: #856404; }
+.status.failed { background: #f8d7da; color: #721c24; }
 
 .signal-reasoning,
 .trade-reasoning {
   margin-top: 8px;
   padding-top: 8px;
-  border-top: 1px solid #e1e8ed;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 
 .signal-reasoning p,
 .trade-reasoning p {
   margin: 0;
   font-size: 14px;
-  color: #34495e;
+  color: #cbd5e1;
   line-height: 1.4;
 }
 
-.trade-pnl {
-  margin-top: 8px;
-}
+.trade-pnl { margin-top: 8px; }
 
-.pnl {
-  font-weight: 600;
-  padding: 4px 8px;
-  border-radius: 12px;
-}
+.pnl { font-weight: 600; padding: 4px 8px; border-radius: 12px; }
+.pnl.positive { background: #d4edda; color: #155724; }
+.pnl.negative { background: #f8d7da; color: #721c24; }
 
-.pnl.positive {
-  background: #d4edda;
-  color: #155724;
-}
+.no-data { text-align: center; padding: 40px; color: #94a3b8; }
 
-.pnl.negative {
-  background: #f8d7da;
-  color: #721c24;
-}
-
-.no-data {
-  text-align: center;
-  padding: 40px;
-  color: #7f8c8d;
+@media (max-width: 1200px) {
+  .data-section { grid-template-columns: repeat(2, 1fr); }
 }
-
 @media (max-width: 768px) {
-  .trading-pipeline-container {
-    padding: 16px;
-  }
-  
-  .card {
-    padding: 16px;
-  }
-  
+  .trading-pipeline-container { padding: 16px; }
+  .card { padding: 16px; }
   .status-grid,
   .config-grid,
   .risk-grid,
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .data-section {
-    grid-template-columns: 1fr;
-  }
-  
-  .actions-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .data-details {
-    flex-direction: column;
-    gap: 8px;
-  }
+  .stats-grid { grid-template-columns: 1fr; }
+  .data-section { grid-template-columns: 1fr; }
+  .actions-grid { grid-template-columns: 1fr; }
+  .data-details { flex-direction: column; gap: 8px; }
 }
 </style>

From 74079cf092e87441bb421737b36c53c6baf1834b Mon Sep 17 00:00:00 2001
From: MiloKow <miloperso.kowalska@gmail.com>
Date: Wed, 17 Sep 2025 10:34:01 +0200
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=9A=91=EF=B8=8F=20[FIX]=20Fixing=20fr?=
 =?UTF-8?q?ont?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FullPipelineDashboard.vue  | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/crypto-pilot-builder/src/components/FullPipelineDashboard.vue b/crypto-pilot-builder/src/components/FullPipelineDashboard.vue
index f29f771..e82e726 100644
--- a/crypto-pilot-builder/src/components/FullPipelineDashboard.vue
+++ b/crypto-pilot-builder/src/components/FullPipelineDashboard.vue
@@ -109,27 +109,7 @@
       </div>
     </div>
 
-    <!-- Pipeline Flow Visualization -->
-    <div class="card-dark rounded-xl p-8 mb-8">
-      <h3 class="text-2xl font-bold section-title mb-6 text-center">🔄 Flux du Pipeline</h3>
-      <div class="flex items-center justify-center space-x-4 mb-8 overflow-x-auto">
-        <div
-          v-for="agent in agentFlow"
-          :key="agent.name"
-          :class="[
-            'agent-card',
-            getAgentStatusClass(agent.name)
-          ]"
-        >
-          <div class="text-2xl mb-2">{{ agent.icon }}</div>
-          <div class="font-semibold text-slate-100">{{ agent.displayName }}</div>
-          <div class="text-sm text-slate-300">{{ agent.description }}</div>
-          <div class="text-xs mt-1">
-            <span class="px-2 py-0.5 rounded-full bg-slate-800/60 border border-slate-700 text-slate-200">{{ getAgentExecutionCount(agent.name) }} exécutions</span>
-          </div>
-        </div>
-      </div>
-    </div>
+
 
     <!-- Real-time Data -->
     <div class="two-col-grid mb-8">