fix: thumbnails manquants dans les résultats de recherche

- meili.rs: corrige la désérialisation de la réponse paginée de
  Meilisearch (attendait Vec<Value>, l'API retourne {results:[...]}) —
  la suppression des documents obsolètes ne s'exécutait jamais, laissant
  d'anciens UUIDs qui généraient des 404 sur les thumbnails
- books.rs: fallback sur render_book_page_1 si le fichier thumbnail
  n'est plus accessible sur le disque (au lieu de 500)
- pages.rs: retourne 404 au lieu de 500 quand le fichier CBZ est absent
- search.rs + api.ts + BookCard: ajout série hits, statut lecture,
  pagination OFFSET, filtre reading_status, et placeholder onError

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/backoffice/app/books/page.tsx

@@ -1,7 +1,8 @@
-import { fetchBooks, searchBooks, fetchLibraries, BookDto, LibraryDto, getBookCoverUrl } from "../../lib/api";
+import { fetchBooks, searchBooks, fetchLibraries, BookDto, LibraryDto, SeriesHitDto, getBookCoverUrl } from "../../lib/api";
 import { BooksGrid, EmptyState } from "../components/BookCard";
 import { Card, CardContent, Button, FormField, FormInput, FormSelect, FormRow, OffsetPagination } from "../components/ui";
 import Link from "next/link";
+import Image from "next/image";
 
 export const dynamic = "force-dynamic";
 
@@ -23,11 +24,13 @@ export default async function BooksPage({
   let books: BookDto[] = [];
   let total = 0;
   let searchResults: BookDto[] | null = null;
+  let seriesHits: SeriesHitDto[] = [];
   let totalHits: number | null = null;
 
   if (searchQuery) {
     const searchResponse = await searchBooks(searchQuery, libraryId, limit).catch(() => null);
     if (searchResponse) {
+      seriesHits = searchResponse.series_hits ?? [];
       searchResults = searchResponse.hits.map(hit => ({
         id: hit.id,
         library_id: hit.library_id,
@@ -139,9 +142,46 @@ export default async function BooksPage({
         </p>
       )}
 
+      {/* Séries matchantes */}
+      {seriesHits.length > 0 && (
+        <div className="mb-8">
+          <h2 className="text-lg font-semibold text-foreground mb-3">Series</h2>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            {seriesHits.map((s) => (
+              <Link
+                key={`${s.library_id}-${s.name}`}
+                href={`/libraries/${s.library_id}/books?series=${encodeURIComponent(s.name)}`}
+                className="group"
+              >
+                <div className="bg-card rounded-xl shadow-sm border border-border/60 overflow-hidden hover:shadow-md transition-shadow duration-200">
+                  <div className="aspect-[2/3] relative bg-muted/50">
+                    <Image
+                      src={getBookCoverUrl(s.first_book_id)}
+                      alt={`Cover of ${s.name}`}
+                      fill
+                      className="object-cover"
+                      unoptimized
+                    />
+                  </div>
+                  <div className="p-2">
+                    <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
+                      {s.name === "unclassified" ? "Unclassified" : s.name}
+                    </h3>
+                    <p className="text-xs text-muted-foreground mt-0.5">
+                      {s.book_count} book{s.book_count !== 1 ? 's' : ''}
+                    </p>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* Grille de livres */}
       {displayBooks.length > 0 ? (
         <>
+          {searchQuery && <h2 className="text-lg font-semibold text-foreground mb-3">Books</h2>}
           <BooksGrid books={displayBooks} />
           
           {!searchQuery && (

apps/backoffice/app/components/BookCard.tsx

@@ -18,16 +18,27 @@ interface BookCardProps {
 
 function BookImage({ src, alt }: { src: string; alt: string }) {
   const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+
+  if (hasError) {
+    return (
+      <div className="relative aspect-[2/3] overflow-hidden bg-muted flex items-center justify-center">
+        <svg className="w-10 h-10 text-muted-foreground/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+        </svg>
+      </div>
+    );
+  }
 
   return (
     <div className="relative aspect-[2/3] overflow-hidden bg-muted">
       {/* Skeleton */}
-      <div 
+      <div
         className={`absolute inset-0 bg-muted/50 animate-pulse transition-opacity duration-300 ${
           isLoaded ? 'opacity-0 pointer-events-none' : 'opacity-100'
         }`}
       />
-      
+
       {/* Image */}
       <Image
         src={src}
@@ -38,6 +49,7 @@ function BookImage({ src, alt }: { src: string; alt: string }) {
         }`}
         sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
         onLoad={() => setIsLoaded(true)}
+        onError={() => setHasError(true)}
         unoptimized
       />
     </div>