Je veux que le tableau soit un plus moderne

index.html

@@ -32,11 +32,10 @@
                     <i data-feather="plus"></i> Nouveau Projet
                 </button>
             </div>
-
-            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
+            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8 border border-gray-100">
                 <div class="overflow-x-auto">
-                    <table class="w-full">
-                        <thead class="bg-primary text-white">
+                    <table class="w-full min-w-max">
+<thead class="bg-primary text-white">
                             <tr>
                                 <th class="px-6 py-4 text-left">PS</th>
                                 <th class="px-6 py-4 text-left">Numéro d'affaire</th>

script.js

@@ -23,25 +23,41 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         }
     });
-
-    // Add hover effects and click events for rows
+    // Modern hover effects and click events for rows
     document.querySelectorAll('tbody tr').forEach(row => {
         row.style.cursor = 'pointer';
         
+        row.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-2px)';
+            this.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.1)';
+        });
+        
+        row.addEventListener('mouseleave', function() {
+            this.style.transform = '';
+            this.style.boxShadow = '';
+        });
+        
         row.addEventListener('click', function() {
             const projectId = this.querySelector('td:first-child').textContent;
-            // Here you would typically navigate to a project detail page
             console.log('Navigating to project detail:', projectId);
             
-            // Temporary visual feedback
-            this.style.boxShadow = '0 0 0 2px #3b82f6';
+            // Modern visual feedback
+            this.style.transform = 'scale(0.99)';
+            this.style.boxShadow = '0 0 0 2px rgba(59, 130, 246, 0.3)';
             setTimeout(() => {
-                this.style.boxShadow = 'none';
-            }, 300);
+                this.style.transform = '';
+                this.style.boxShadow = '';
+            }, 200);
         });
     });
 
-    // Initialize Feather icons
+    // Add subtle animation to table headers
+    document.querySelectorAll('thead th').forEach((th, index) => {
+        th.style.opacity = '0';
+        th.style.transform = 'translateY(-10px)';
+        th.style.animation = `fadeInUp 0.4s ease-out ${index * 0.05}s forwards`;
+    });
+// Initialize Feather icons
     if (feather) {
         feather.replace();
     }

style.css

@@ -23,41 +23,79 @@ body {
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
-/* Table styles */
+/* Modern table styles */
 table {
     border-collapse: separate;
     border-spacing: 0;
-    margin-top: 0.5rem;
+    margin-top: 1rem;
+    width: 100%;
+    --table-radius: 12px;
+    --table-padding: 16px;
+    --table-border: 1px solid rgba(0, 0, 0, 0.05);
+    --hover-bg: rgba(59, 130, 246, 0.05);
 }
-thead th {
+
+thead {
     position: sticky;
     top: 0;
-    background-color: #1e40af !important;
+    z-index: 10;
+}
+
+thead th {
+    background-color: #3B82F6;
     color: white;
-    font-weight: 600;
-    padding: 8px 12px;
-    border-bottom: 1px solid #93c5fd;
+    font-weight: 500;
+    padding: var(--table-padding);
     font-size: 0.875rem;
+    position: relative;
+    white-space: nowrap;
+}
+
+thead th:first-child {
+    border-top-left-radius: var(--table-radius);
 }
+
+thead th:last-child {
+    border-top-right-radius: var(--table-radius);
+}
+
 tbody tr {
     animation: fadeIn 0.3s ease-out forwards;
-    transition: all 0.2s ease;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+}
+
+tbody tr:last-child td:first-child {
+    border-bottom-left-radius: var(--table-radius);
+}
+
+tbody tr:last-child td:last-child {
+    border-bottom-right-radius: var(--table-radius);
 }
 
 tbody tr:hover {
-    background-color: #f0f9ff !important;
-    transform: translateX(2px);
+    background-color: var(--hover-bg) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
 }
+
 tbody td {
-    padding: 8px 12px;
-    border-bottom: 1px solid #e5e7eb;
-    border-right: 1px solid #e5e7eb;
+    padding: var(--table-padding);
+    border-bottom: var(--table-border);
     font-size: 0.875rem;
-}
-tbody td:last-child {
-    border-right: none;
+    transition: all 0.2s ease;
+    position: relative;
 }
 
+tbody tr:not(:last-child) td::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: calc(100% - 32px);
+    height: 1px;
+    background-color: rgba(0, 0, 0, 0.05);
+}
 /* Status badges */
 .status-badge {
     display: inline-block;
@@ -127,11 +165,84 @@ tbody tr:nth-child(3) { animation-delay: 0.3s; }
     color: #dc2626;
     font-weight: 600;
 }
-
-/* Zebra striping */
-tbody tr:nth-child(odd) {
-    background-color: #f9fafb;
+/* Modern zebra striping */
+tbody tr:nth-child(even) {
+    background-color: rgba(243, 244, 246, 0.3);
 }
+
 tbody tr {
-    height: 40px;
+    height: 56px;
+}
+
+/* Modern progress bars */
+.progress-container {
+    width: 100%;
+    height: 6px;
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    border-radius: 3px;
+    background: linear-gradient(90deg, #3B82F6, #60A5FA);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: width 0.6s ease;
+}
+
+/* Modern status badges */
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 12px;
+    border-radius: 16px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.status-badge::before {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin-right: 6px;
+    background: currentColor;
+}
+
+.status-en-cours {
+    background-color: rgba(59, 130, 246, 0.1);
+    color: #3B82F6;
+}
+
+.status-planifie {
+    background-color: rgba(16, 185, 129, 0.1);
+    color: #10B981;
+}
+
+.status-termine {
+    background-color: rgba(5, 150, 105, 0.1);
+    color: #059669;
+}
+
+/* Modern cell colors */
+.cell-positive {
+    background-color: rgba(16, 185, 129, 0.1) !important;
+    color: #10B981;
+    font-weight: 500;
+}
+
+.cell-warning {
+    background-color: rgba(245, 158, 11, 0.1) !important;
+    color: #F59E0B;
+    font-weight: 500;
+}
+
+.cell-danger {
+    background-color: rgba(239, 68, 68, 0.1) !important;
+    color: #EF4444;
+    font-weight: 500;
 }