fix: improve watchlist styling consistency with main page

static/css/style.css

@@ -1530,6 +1530,89 @@
 }
 
 .watchlist-item {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 20px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s;
+    margin-bottom: 15px;
+}
+
+.watchlist-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(0, 217, 255, 0.3);
+    transform: translateY(-2px);
+}
+
+.watchlist-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 15px;
+    margin-bottom: 30px;
+}
+
+.stat-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 20px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    text-align: center;
+}
+
+.stat-card.total { background: rgba(0, 217, 255, 0.1); border-color: rgba(0, 217, 255, 0.3); }
+.stat-card.active { background: rgba(76, 175, 80, 0.1); border-color: rgba(76, 175, 80, 0.3); }
+.stat-card.paused { background: rgba(255, 152, 0, 0.1); border-color: rgba(255, 152, 0, 0.3); }
+.stat-card.completed { background: rgba(158, 158, 158, 0.1); border-color: rgba(158, 158, 158, 0.3); }
+
+.stat-value {
+    font-size: 32px;
+    font-weight: bold;
+    color: #fff;
+}
+
+.stat-card.total .stat-value { color: #00d9ff; }
+.stat-card.active .stat-value { color: #4caf50; }
+.stat-card.paused .stat-value { color: #ff9800; }
+.stat-card.completed .stat-value { color: #9e9e9e; }
+
+.stat-label {
+    font-size: 12px;
+    color: #999;
+    text-transform: uppercase;
+    margin-top: 5px;
+}
+
+.empty-watchlist {
+    text-align: center;
+    padding: 60px 20px;
+}
+
+.empty-watchlist svg {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 20px;
+    opacity: 0.3;
+}
+
+.empty-watchlist h3 {
+    color: #fff;
+    margin-bottom: 10px;
+}
+
+.empty-watchlist p {
+    color: #999;
+}
+
+.error-message {
+    text-align: center;
+    padding: 40px;
+    color: #f44;
+    background: rgba(244, 68, 68, 0.1);
+    border-radius: 12px;
+    border: 1px solid rgba(244, 68, 68, 0.3);
+}
     transition: all 0.3s ease;
 }
 

templates/components/watchlist_section.html

@@ -16,16 +16,16 @@
                     <div id="nextRunInfo" class="next-run-info">Chargement...</div>
                 </div>
                 <div class="scheduler-controls">
-                    <button id="startSchedulerBtn" class="btn-primary btn-small" onclick="handleStartScheduler()" style="display:none;">
+                    <button id="startSchedulerBtn" class="btn-primary btn-small watchlist-btn-small" onclick="handleStartScheduler()" style="display:none;">
                         ▶️ Démarrer
                     </button>
-                    <button id="stopSchedulerBtn" class="btn-secondary btn-small" onclick="handleStopScheduler()" style="display:none;">
+                    <button id="stopSchedulerBtn" class="btn-secondary btn-small watchlist-btn-small" onclick="handleStopScheduler()" style="display:none;">
                         ⏸️ Arrêter
                     </button>
-                    <button class="btn-secondary btn-small" onclick="handleCheckAll()">
+                    <button class="btn-secondary btn-small watchlist-btn-small" onclick="handleCheckAll()">
                         🔍 Vérifier tout
                     </button>
-                    <button class="btn-secondary btn-small" onclick="handleOpenSettings()">
+                    <button class="btn-secondary btn-small watchlist-btn-small" onclick="handleOpenSettings()">
                         ⚙️ Paramètres
                     </button>
                 </div>