feat(ui): Lazy loading images + dark mode job highlight

- Ajout loading='lazy' sur les couvertures de livres (BookCard + detail)
- Correction couleur job-highlighted en dark mode (fond bleu foncé)
- Animation pulse adaptée pour le dark mode

apps/backoffice/app/books/[id]/page.tsx

@@ -45,6 +45,7 @@ export default async function BookDetailPage({
             height={440}
             className="detail-cover-image"
             unoptimized
+            loading="lazy"
           />
         </div>
 

apps/backoffice/app/components/BookCard.tsx

@@ -18,6 +18,7 @@ export function BookCard({ book, getBookCoverUrl }: BookCardProps) {
           height={220}
           className="cover-image"
           unoptimized
+          loading="lazy"
         />
       </div>
       <div className="book-info">

apps/backoffice/app/globals.css

@@ -234,10 +234,10 @@ button:hover {
   border-color: hsl(280 60% 45% / 0.5);
 }
 
-.status-pending { color: hsl(45 93% 47%); }
+.status-pending { color: hsl(45 93% 35%); }
-.status-running { color: hsl(192 85% 55%); }
+.status-running { color: hsl(198 78% 37%); font-weight: 700; }
-.status-completed { color: hsl(142 60% 45%); }
+.status-completed { color: hsl(142 60% 35%); }
-.status-failed { color: hsl(2 72% 48%); }
+.status-failed { color: hsl(2 72% 45%); }
 .status-cancelled { color: hsl(220 13% 40%); }
 
 .error-hint {
@@ -1111,6 +1111,32 @@ button:hover {
   color: hsl(198 78% 75%);
 }
 
+/* Dark mode status colors for job list - couleurs plus soutenues */
+.dark .status-running {
+  color: hsl(192 85% 55%);
+  font-weight: 700;
+  text-shadow: 0 0 10px hsl(192 85% 55% / 0.3);
+}
+
+.dark .status-pending {
+  color: hsl(45 100% 55%);
+  font-weight: 600;
+}
+
+.dark .status-completed {
+  color: hsl(142 70% 55%);
+  font-weight: 600;
+}
+
+.dark .status-failed {
+  color: hsl(2 80% 60%);
+  font-weight: 600;
+}
+
+.dark .status-cancelled {
+  color: hsl(220 20% 65%);
+}
+
 /* Progress bar visibility fix */
 .job-progress {
   background: var(--card);
@@ -1172,6 +1198,21 @@ tr.job-highlighted td {
   50% { box-shadow: inset 0 0 0 2px hsl(198 78% 37% / 0.6); }
 }
 
+/* Dark mode for highlighted job row */
+.dark tr.job-highlighted {
+  background: hsl(198 52% 20%);
+  box-shadow: inset 0 0 0 2px hsl(198 78% 50%);
+}
+
+.dark tr.job-highlighted td {
+  animation: pulse-border-dark 2s ease-in-out infinite;
+}
+
+@keyframes pulse-border-dark {
+  0%, 100% { box-shadow: inset 0 0 0 1px hsl(198 78% 50% / 0.3); }
+  50% { box-shadow: inset 0 0 0 2px hsl(198 78% 50% / 0.6); }
+}
+
 /* Monitoring styles */
 .monitoring-cell {
   display: flex;