feat: add i18n support (FR/EN) to backoffice with English as default

Implement full internationalization for the Next.js backoffice:
- i18n infrastructure: type-safe dictionaries (fr.ts/en.ts), cookie-based locale detection, React Context for client components, server-side translation helper
- Language selector in Settings page (General tab) with cookie + DB persistence
- All ~35 pages and components translated via t() / useTranslation()
- Default locale set to English, French available via settings

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

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

@@ -4,16 +4,17 @@ import { ConvertButton } from "../../components/ConvertButton";
 import { MarkBookReadButton } from "../../components/MarkBookReadButton";
 import { EditBookForm } from "../../components/EditBookForm";
 import { SafeHtml } from "../../components/SafeHtml";
+import { getServerTranslations } from "../../../lib/i18n/server";
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
 export const dynamic = "force-dynamic";
 
-const readingStatusConfig: Record<ReadingStatus, { label: string; className: string }> = {
-  unread: { label: "Non lu", className: "bg-muted/60 text-muted-foreground border border-border" },
-  reading: { label: "En cours", className: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/30" },
-  read: { label: "Lu", className: "bg-green-500/15 text-green-600 dark:text-green-400 border border-green-500/30" },
+const readingStatusClassNames: Record<ReadingStatus, string> = {
+  unread: "bg-muted/60 text-muted-foreground border border-border",
+  reading: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/30",
+  read: "bg-green-500/15 text-green-600 dark:text-green-400 border border-green-500/30",
 };
 
 async function fetchBook(bookId: string): Promise<BookDto | null> {
@@ -39,6 +40,8 @@ export default async function BookDetailPage({
     notFound();
   }
 
+  const { t, locale } = await getServerTranslations();
+
   const library = libraries.find(l => l.id === book.library_id);
   const formatBadge = (book.format ?? book.kind).toUpperCase();
   const formatColor =
@@ -46,14 +49,15 @@ export default async function BookDetailPage({
     formatBadge === "CBR" ? "bg-warning/10 text-warning border-warning/30" :
     formatBadge === "PDF" ? "bg-destructive/10 text-destructive border-destructive/30" :
     "bg-muted/50 text-muted-foreground border-border";
-  const { label: statusLabel, className: statusClassName } = readingStatusConfig[book.reading_status];
+  const statusLabel = t(`status.${book.reading_status}` as "status.unread" | "status.reading" | "status.read");
+  const statusClassName = readingStatusClassNames[book.reading_status];
 
   return (
     <div className="space-y-6">
       {/* Breadcrumb */}
       <div className="flex items-center gap-2 text-sm">
         <Link href="/libraries" className="text-muted-foreground hover:text-primary transition-colors">
-          Bibliothèques
+          {t("bookDetail.libraries")}
         </Link>
         <span className="text-muted-foreground">/</span>
         {library && (
@@ -88,7 +92,7 @@ export default async function BookDetailPage({
           <div className="w-48 aspect-[2/3] relative rounded-xl overflow-hidden shadow-card border border-border">
             <Image
               src={getBookCoverUrl(book.id)}
-              alt={`Couverture de ${book.title}`}
+              alt={t("bookDetail.coverOf", { title: book.title })}
               fill
               className="object-cover"
               unoptimized
@@ -134,7 +138,7 @@ export default async function BookDetailPage({
             </span>
             {book.reading_last_read_at && (
               <span className="text-xs text-muted-foreground">
-                {new Date(book.reading_last_read_at).toLocaleDateString()}
+                {new Date(book.reading_last_read_at).toLocaleDateString(locale)}
               </span>
             )}
             <MarkBookReadButton bookId={book.id} currentStatus={book.reading_status} />
@@ -148,7 +152,7 @@ export default async function BookDetailPage({
             </span>
             {book.page_count && (
               <span className="inline-flex px-2.5 py-1 rounded-full text-xs font-medium bg-muted/50 text-muted-foreground border border-border">
-                {book.page_count} pages
+                {book.page_count} {t("dashboard.pages").toLowerCase()}
               </span>
             )}
             {book.language && (
@@ -181,24 +185,24 @@ export default async function BookDetailPage({
           <svg className="w-3.5 h-3.5 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
           </svg>
-          Informations techniques
+          {t("bookDetail.technicalInfo")}
         </summary>
         <div className="mt-3 p-4 rounded-lg bg-muted/30 border border-border/50 space-y-2 text-xs">
           {book.file_path && (
             <div className="flex flex-col gap-0.5">
-              <span className="text-muted-foreground">Fichier</span>
+              <span className="text-muted-foreground">{t("bookDetail.file")}</span>
               <code className="font-mono text-foreground break-all">{book.file_path}</code>
             </div>
           )}
           {book.file_format && (
             <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">Format fichier</span>
+              <span className="text-muted-foreground">{t("bookDetail.fileFormat")}</span>
               <span className="text-foreground">{book.file_format.toUpperCase()}</span>
             </div>
           )}
           {book.file_parse_status && (
             <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">Parsing</span>
+              <span className="text-muted-foreground">{t("bookDetail.parsing")}</span>
               <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${
                 book.file_parse_status === "success" ? "bg-success/10 text-success" :
                 book.file_parse_status === "failed" ? "bg-destructive/10 text-destructive" :
@@ -218,8 +222,8 @@ export default async function BookDetailPage({
           </div>
           {book.updated_at && (
             <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">Mis à jour</span>
-              <span className="text-foreground">{new Date(book.updated_at).toLocaleString()}</span>
+              <span className="text-muted-foreground">{t("bookDetail.updatedAt")}</span>
+              <span className="text-foreground">{new Date(book.updated_at).toLocaleString(locale)}</span>
             </div>
           )}
         </div>

apps/backoffice/app/books/page.tsx

@@ -4,6 +4,7 @@ import { LiveSearchForm } from "../components/LiveSearchForm";
 import { Card, CardContent, OffsetPagination } from "../components/ui";
 import Link from "next/link";
 import Image from "next/image";
+import { getServerTranslations } from "../../lib/i18n/server";
 
 export const dynamic = "force-dynamic";
 
@@ -12,6 +13,7 @@ export default async function BooksPage({
 }: {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
+  const { t } = await getServerTranslations();
   const searchParamsAwaited = await searchParams;
   const libraryId = typeof searchParamsAwaited.library === "string" ? searchParamsAwaited.library : undefined;
   const searchQuery = typeof searchParamsAwaited.q === "string" ? searchParamsAwaited.q : "";
@@ -78,20 +80,20 @@ export default async function BooksPage({
   const totalPages = Math.ceil(total / limit);
 
   const libraryOptions = [
-    { value: "", label: "Toutes les bibliothèques" },
+    { value: "", label: t("books.allLibraries") },
     ...libraries.map((lib) => ({ value: lib.id, label: lib.name })),
   ];
 
   const statusOptions = [
-    { value: "", label: "Tous" },
-    { value: "unread", label: "Non lu" },
-    { value: "reading", label: "En cours" },
-    { value: "read", label: "Lu" },
+    { value: "", label: t("common.all") },
+    { value: "unread", label: t("status.unread") },
+    { value: "reading", label: t("status.reading") },
+    { value: "read", label: t("status.read") },
   ];
 
   const sortOptions = [
-    { value: "", label: "Titre" },
-    { value: "latest", label: "Ajout récent" },
+    { value: "", label: t("books.sortTitle") },
+    { value: "latest", label: t("books.sortLatest") },
   ];
 
   const hasFilters = searchQuery || libraryId || readingStatus || sort;
@@ -103,7 +105,7 @@ export default async function BooksPage({
           <svg className="w-8 h-8 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
-          Livres
+          {t("books.title")}
         </h1>
       </div>
 
@@ -112,10 +114,10 @@ export default async function BooksPage({
           <LiveSearchForm
             basePath="/books"
             fields={[
-              { name: "q", type: "text", label: "Rechercher", placeholder: "Rechercher par titre, auteur, série...", className: "flex-1 w-full" },
-              { name: "library", type: "select", label: "Bibliothèque", options: libraryOptions, className: "w-full sm:w-48" },
-              { name: "status", type: "select", label: "Statut", options: statusOptions, className: "w-full sm:w-40" },
-              { name: "sort", type: "select", label: "Tri", options: sortOptions, className: "w-full sm:w-40" },
+              { name: "q", type: "text", label: t("common.search"), placeholder: t("books.searchPlaceholder"), className: "flex-1 w-full" },
+              { name: "library", type: "select", label: t("books.library"), options: libraryOptions, className: "w-full sm:w-48" },
+              { name: "status", type: "select", label: t("books.status"), options: statusOptions, className: "w-full sm:w-40" },
+              { name: "sort", type: "select", label: t("books.sort"), options: sortOptions, className: "w-full sm:w-40" },
             ]}
           />
         </CardContent>
@@ -124,18 +126,18 @@ export default async function BooksPage({
       {/* Résultats */}
       {searchQuery && totalHits !== null ? (
         <p className="text-sm text-muted-foreground mb-4">
-          {totalHits} résultat{totalHits !== 1 ? 's' : ''} pour &laquo; {searchQuery} &raquo;
+          {t("books.resultCountFor", { count: String(totalHits), plural: totalHits !== 1 ? "s" : "", query: searchQuery })}
         </p>
       ) : !searchQuery && (
         <p className="text-sm text-muted-foreground mb-4">
-          {total} livre{total !== 1 ? 's' : ''}
+          {t("books.resultCount", { count: String(total), plural: total !== 1 ? "s" : "" })}
         </p>
       )}
 
       {/* Séries matchantes */}
       {seriesHits.length > 0 && (
         <div className="mb-8">
-          <h2 className="text-lg font-semibold text-foreground mb-3">Séries</h2>
+          <h2 className="text-lg font-semibold text-foreground mb-3">{t("books.seriesHeading")}</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
@@ -147,7 +149,7 @@ export default async function BooksPage({
                   <div className="aspect-[2/3] relative bg-muted/50">
                     <Image
                       src={getBookCoverUrl(s.first_book_id)}
-                      alt={`Couverture de ${s.name}`}
+                      alt={t("books.coverOf", { name: s.name })}
                       fill
                       className="object-cover"
                       unoptimized
@@ -155,10 +157,10 @@ export default async function BooksPage({
                   </div>
                   <div className="p-2">
                     <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
-                      {s.name === "unclassified" ? "Non classé" : s.name}
+                      {s.name === "unclassified" ? t("books.unclassified") : s.name}
                     </h3>
                     <p className="text-xs text-muted-foreground mt-0.5">
-                      {s.book_count} livre{s.book_count !== 1 ? 's' : ''}
+                      {t("books.bookCount", { count: String(s.book_count), plural: s.book_count !== 1 ? "s" : "" })}
                     </p>
                   </div>
                 </div>
@@ -171,7 +173,7 @@ export default async function BooksPage({
       {/* Grille de livres */}
       {displayBooks.length > 0 ? (
         <>
-          {searchQuery && <h2 className="text-lg font-semibold text-foreground mb-3">Livres</h2>}
+          {searchQuery && <h2 className="text-lg font-semibold text-foreground mb-3">{t("books.title")}</h2>}
           <BooksGrid books={displayBooks} />
 
           {!searchQuery && (
@@ -184,7 +186,7 @@ export default async function BooksPage({
           )}
         </>
       ) : (
-        <EmptyState message={searchQuery ? `Aucun livre trouvé pour "${searchQuery}"` : "Aucun livre disponible"} />
+        <EmptyState message={searchQuery ? t("books.noResults", { query: searchQuery }) : t("books.noBooks")} />
       )}
     </>
   );

apps/backoffice/app/components/BookCard.tsx

@@ -4,11 +4,12 @@ import { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { BookDto, ReadingStatus } from "../../lib/api";
+import { useTranslation } from "../../lib/i18n/context";
 
-const readingStatusOverlay: Record<ReadingStatus, { label: string; className: string } | null> = {
+const readingStatusOverlayClasses: Record<ReadingStatus, string | null> = {
   unread: null,
-  reading: { label: "En cours", className: "bg-amber-500/90 text-white" },
-  read: { label: "Lu", className: "bg-green-600/90 text-white" },
+  reading: "bg-amber-500/90 text-white",
+  read: "bg-green-600/90 text-white",
 };
 
 interface BookCardProps {
@@ -57,9 +58,15 @@ function BookImage({ src, alt }: { src: string; alt: string }) {
 }
 
 export function BookCard({ book, readingStatus }: BookCardProps) {
+  const { t } = useTranslation();
   const coverUrl = book.coverUrl || `/api/books/${book.id}/thumbnail`;
   const status = readingStatus ?? book.reading_status;
-  const overlay = status ? readingStatusOverlay[status] : null;
+  const overlayClass = status ? readingStatusOverlayClasses[status] : null;
+  const statusLabels: Record<ReadingStatus, string> = {
+    unread: t("status.unread"),
+    reading: t("status.reading"),
+    read: t("status.read"),
+  };
 
   const isRead = status === "read";
 
@@ -71,11 +78,11 @@ export function BookCard({ book, readingStatus }: BookCardProps) {
       <div className="relative">
         <BookImage
           src={coverUrl}
-          alt={`Couverture de ${book.title}`}
+          alt={t("books.coverOf", { name: book.title })}
         />
-        {overlay && (
-          <span className={`absolute bottom-2 left-2 px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wide ${overlay.className}`}>
-            {overlay.label}
+        {overlayClass && status && (
+          <span className={`absolute bottom-2 left-2 px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wide ${overlayClass}`}>
+            {statusLabels[status]}
           </span>
         )}
       </div>

apps/backoffice/app/components/BookPreview.tsx

@@ -2,10 +2,12 @@
 
 import { useState } from "react";
 import Image from "next/image";
+import { useTranslation } from "../../lib/i18n/context";
 
 const PAGE_SIZE = 5;
 
 export function BookPreview({ bookId, pageCount }: { bookId: string; pageCount: number }) {
+  const { t } = useTranslation();
   const [offset, setOffset] = useState(0);
 
   const pages = Array.from({ length: PAGE_SIZE }, (_, i) => offset + i + 1).filter(
@@ -16,9 +18,9 @@ export function BookPreview({ bookId, pageCount }: { bookId: string; pageCount:
     <div className="bg-card rounded-xl border border-border p-6">
       <div className="flex items-center justify-between mb-4">
         <h2 className="text-lg font-semibold text-foreground">
-          Aperçu
+          {t("bookPreview.preview")}
           <span className="ml-2 text-sm font-normal text-muted-foreground">
-            pages {offset + 1}–{Math.min(offset + PAGE_SIZE, pageCount)} / {pageCount}
+            {t("bookPreview.pages", { start: offset + 1, end: Math.min(offset + PAGE_SIZE, pageCount), total: pageCount })}
           </span>
         </h2>
         <div className="flex gap-2">
@@ -27,14 +29,14 @@ export function BookPreview({ bookId, pageCount }: { bookId: string; pageCount:
             disabled={offset === 0}
             className="px-3 py-1.5 text-sm rounded-lg border border-border bg-muted/50 text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
           >
-            ← Préc.
+            {t("bookPreview.prev")}
           </button>
           <button
             onClick={() => setOffset((o) => Math.min(o + PAGE_SIZE, pageCount - 1))}
             disabled={offset + PAGE_SIZE >= pageCount}
             className="px-3 py-1.5 text-sm rounded-lg border border-border bg-muted/50 text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
           >
-            Suiv. →
+            {t("bookPreview.next")}
           </button>
         </div>
       </div>

apps/backoffice/app/components/ConvertButton.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import Link from "next/link";
 import { Button } from "./ui";
+import { useTranslation } from "../../lib/i18n/context";
 
 interface ConvertButtonProps {
   bookId: string;
@@ -15,6 +16,7 @@ type ConvertState =
   | { type: "error"; message: string };
 
 export function ConvertButton({ bookId }: ConvertButtonProps) {
+  const { t } = useTranslation();
   const [state, setState] = useState<ConvertState>({ type: "idle" });
 
   const handleConvert = async () => {
@@ -23,22 +25,22 @@ export function ConvertButton({ bookId }: ConvertButtonProps) {
       const res = await fetch(`/api/books/${bookId}/convert`, { method: "POST" });
       if (!res.ok) {
         const body = await res.json().catch(() => ({ error: res.statusText }));
-        setState({ type: "error", message: body.error || "Échec de la conversion" });
+        setState({ type: "error", message: body.error || t("convert.failed") });
         return;
       }
       const job = await res.json();
       setState({ type: "success", jobId: job.id });
     } catch (err) {
-      setState({ type: "error", message: err instanceof Error ? err.message : "Erreur inconnue" });
+      setState({ type: "error", message: err instanceof Error ? err.message : t("convert.unknownError") });
     }
   };
 
   if (state.type === "success") {
     return (
       <div className="flex items-center gap-2 text-sm text-success">
-        <span>Conversion lancée.</span>
+        <span>{t("convert.started")}</span>
         <Link href={`/jobs/${state.jobId}`} className="text-primary hover:underline font-medium">
-          Voir la tâche →
+          {t("convert.viewJob")}
         </Link>
       </div>
     );
@@ -52,7 +54,7 @@ export function ConvertButton({ bookId }: ConvertButtonProps) {
           className="text-xs text-muted-foreground hover:underline text-left"
           onClick={() => setState({ type: "idle" })}
         >
-          Fermer
+          {t("common.close")}
         </button>
       </div>
     );
@@ -65,7 +67,7 @@ export function ConvertButton({ bookId }: ConvertButtonProps) {
       onClick={handleConvert}
       disabled={state.type === "loading"}
     >
-      {state.type === "loading" ? "Conversion…" : "Convertir en CBZ"}
+      {state.type === "loading" ? t("convert.converting") : t("convert.convertToCbz")}
     </Button>
   );
 }

apps/backoffice/app/components/EditBookForm.tsx

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { useRouter } from "next/navigation";
 import { BookDto } from "@/lib/api";
 import { FormField, FormLabel, FormInput } from "./ui/Form";
+import { useTranslation } from "../../lib/i18n/context";
 
 function LockButton({
   locked,
@@ -15,6 +16,7 @@ function LockButton({
   onToggle: () => void;
   disabled?: boolean;
 }) {
+  const { t } = useTranslation();
   return (
     <button
       type="button"
@@ -25,7 +27,7 @@ function LockButton({
           ? "text-amber-500 hover:text-amber-600"
           : "text-muted-foreground/40 hover:text-muted-foreground"
       }`}
-      title={locked ? "Champ verrouillé (protégé des synchros)" : "Cliquer pour verrouiller ce champ"}
+      title={locked ? t("editBook.lockedField") : t("editBook.clickToLock")}
     >
       {locked ? (
         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -45,6 +47,7 @@ interface EditBookFormProps {
 }
 
 export function EditBookForm({ book }: EditBookFormProps) {
+  const { t } = useTranslation();
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const [isOpen, setIsOpen] = useState(false);
@@ -139,13 +142,13 @@ export function EditBookForm({ book }: EditBookFormProps) {
         });
         if (!res.ok) {
           const data = await res.json();
-          setError(data.error ?? "Erreur lors de la sauvegarde");
+          setError(data.error ?? t("editBook.saveError"));
           return;
         }
         setIsOpen(false);
         router.refresh();
       } catch {
-        setError("Erreur réseau");
+        setError(t("common.networkError"));
       }
     });
   };
@@ -163,7 +166,7 @@ export function EditBookForm({ book }: EditBookFormProps) {
         <div className="bg-card border border-border/50 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto animate-in fade-in zoom-in-95 duration-200">
           {/* Header */}
           <div className="flex items-center justify-between px-5 py-4 border-b border-border/50 bg-muted/30 sticky top-0 z-10">
-            <h3 className="font-semibold text-foreground">Modifier les métadonnées</h3>
+            <h3 className="font-semibold text-foreground">{t("editBook.editMetadata")}</h3>
             <button
               type="button"
               onClick={handleClose}
@@ -181,21 +184,21 @@ export function EditBookForm({ book }: EditBookFormProps) {
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               <FormField className="sm:col-span-2">
                 <div className="flex items-center gap-1">
-                  <FormLabel required>Titre</FormLabel>
+                  <FormLabel required>{t("editBook.title")}</FormLabel>
                   <LockButton locked={!!lockedFields.title} onToggle={() => toggleLock("title")} disabled={isPending} />
                 </div>
                 <FormInput
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
                   disabled={isPending}
-                  placeholder="Titre du livre"
+                  placeholder={t("editBook.titlePlaceholder")}
                 />
               </FormField>
 
               {/* Auteurs — multi-valeur */}
               <FormField className="sm:col-span-2">
                 <div className="flex items-center gap-1">
-                  <FormLabel>Auteur(s)</FormLabel>
+                  <FormLabel>{t("editBook.authors")}</FormLabel>
                   <LockButton locked={!!lockedFields.authors} onToggle={() => toggleLock("authors")} disabled={isPending} />
                 </div>
                 <div className="space-y-2">
@@ -212,7 +215,7 @@ export function EditBookForm({ book }: EditBookFormProps) {
                             onClick={() => removeAuthor(i)}
                             disabled={isPending}
                             className="hover:text-destructive transition-colors ml-0.5"
-                            aria-label={`Supprimer ${a}`}
+                            aria-label={t("editBook.removeAuthor", { name: a })}
                           >
                             ×
                           </button>
@@ -227,7 +230,7 @@ export function EditBookForm({ book }: EditBookFormProps) {
                       onChange={(e) => setAuthorInput(e.target.value)}
                       onKeyDown={handleAuthorKeyDown}
                       disabled={isPending}
-                      placeholder="Ajouter un auteur (Entrée pour valider)"
+                      placeholder={t("editBook.addAuthor")}
                       className="flex h-10 flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     />
                     <button
@@ -244,33 +247,33 @@ export function EditBookForm({ book }: EditBookFormProps) {
 
               <FormField>
                 <div className="flex items-center gap-1">
-                  <FormLabel>Langue</FormLabel>
+                  <FormLabel>{t("editBook.language")}</FormLabel>
                   <LockButton locked={!!lockedFields.language} onToggle={() => toggleLock("language")} disabled={isPending} />
                 </div>
                 <FormInput
                   value={language}
                   onChange={(e) => setLanguage(e.target.value)}
                   disabled={isPending}
-                  placeholder="ex : fr, en, jp"
+                  placeholder={t("editBook.languagePlaceholder")}
                 />
               </FormField>
 
               <FormField>
                 <div className="flex items-center gap-1">
-                  <FormLabel>Série</FormLabel>
+                  <FormLabel>{t("editBook.series")}</FormLabel>
                   <LockButton locked={!!lockedFields.series} onToggle={() => toggleLock("series")} disabled={isPending} />
                 </div>
                 <FormInput
                   value={series}
                   onChange={(e) => setSeries(e.target.value)}
                   disabled={isPending}
-                  placeholder="Nom de la série"
+                  placeholder={t("editBook.seriesPlaceholder")}
                 />
               </FormField>
 
               <FormField>
                 <div className="flex items-center gap-1">
-                  <FormLabel>Volume</FormLabel>
+                  <FormLabel>{t("editBook.volume")}</FormLabel>
                   <LockButton locked={!!lockedFields.volume} onToggle={() => toggleLock("volume")} disabled={isPending} />
                 </div>
                 <FormInput
@@ -279,13 +282,13 @@ export function EditBookForm({ book }: EditBookFormProps) {
                   value={volume}
                   onChange={(e) => setVolume(e.target.value)}
                   disabled={isPending}
-                  placeholder="Numéro de volume"
+                  placeholder={t("editBook.volumePlaceholder")}
                 />
               </FormField>
 
               <FormField>
                 <div className="flex items-center gap-1">
-                  <FormLabel>ISBN</FormLabel>
+                  <FormLabel>{t("editBook.isbn")}</FormLabel>
                   <LockButton locked={!!lockedFields.isbn} onToggle={() => toggleLock("isbn")} disabled={isPending} />
                 </div>
                 <FormInput
@@ -298,27 +301,27 @@ export function EditBookForm({ book }: EditBookFormProps) {
 
               <FormField>
                 <div className="flex items-center gap-1">
-                  <FormLabel>Date de publication</FormLabel>
+                  <FormLabel>{t("editBook.publishDate")}</FormLabel>
                   <LockButton locked={!!lockedFields.publish_date} onToggle={() => toggleLock("publish_date")} disabled={isPending} />
                 </div>
                 <FormInput
                   value={publishDate}
                   onChange={(e) => setPublishDate(e.target.value)}
                   disabled={isPending}
-                  placeholder="ex : 2023-01-15"
+                  placeholder={t("editBook.publishDatePlaceholder")}
                 />
               </FormField>
 
               <FormField className="sm:col-span-2">
                 <div className="flex items-center gap-1">
-                  <FormLabel>Description</FormLabel>
+                  <FormLabel>{t("editBook.description")}</FormLabel>
                   <LockButton locked={!!lockedFields.summary} onToggle={() => toggleLock("summary")} disabled={isPending} />
                 </div>
                 <textarea
                   value={summary}
                   onChange={(e) => setSummary(e.target.value)}
                   disabled={isPending}
-                  placeholder="Résumé / description du livre"
+                  placeholder={t("editBook.descriptionPlaceholder")}
                   rows={4}
                   className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y"
                 />
@@ -331,7 +334,7 @@ export function EditBookForm({ book }: EditBookFormProps) {
                 <svg className="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                 </svg>
-                Les champs verrouillés ne seront pas écrasés par les synchros de métadonnées externes.
+                {t("editBook.lockedFieldsNote")}
               </p>
             )}
 
@@ -347,14 +350,14 @@ export function EditBookForm({ book }: EditBookFormProps) {
                 disabled={isPending}
                 className="px-4 py-1.5 rounded-lg border border-border bg-card text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
               >
-                Annuler
+                {t("common.cancel")}
               </button>
               <button
                 type="submit"
                 disabled={isPending || !title.trim()}
                 className="px-4 py-1.5 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
               >
-                {isPending ? "Sauvegarde…" : "Sauvegarder"}
+                {isPending ? t("editBook.savingLabel") : t("editBook.saveLabel")}
               </button>
             </div>
           </form>
@@ -370,7 +373,7 @@ export function EditBookForm({ book }: EditBookFormProps) {
         onClick={() => setIsOpen(true)}
         className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-card text-sm font-medium text-muted-foreground hover:text-foreground hover:border-primary transition-colors"
       >
-        <span>✏️</span> Modifier
+        <span>✏️</span> {t("editBook.editMetadata")}
       </button>
       {modal}
     </>

apps/backoffice/app/components/EditSeriesForm.tsx

@@ -4,6 +4,7 @@ import { useState, useTransition, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { useRouter } from "next/navigation";
 import { FormField, FormLabel, FormInput } from "./ui/Form";
+import { useTranslation } from "../../lib/i18n/context";
 
 function LockButton({
   locked,
@@ -14,6 +15,7 @@ function LockButton({
   onToggle: () => void;
   disabled?: boolean;
 }) {
+  const { t } = useTranslation();
   return (
     <button
       type="button"
@@ -24,7 +26,7 @@ function LockButton({
           ? "text-amber-500 hover:text-amber-600"
           : "text-muted-foreground/40 hover:text-muted-foreground"
       }`}
-      title={locked ? "Champ verrouillé (protégé des synchros)" : "Cliquer pour verrouiller ce champ"}
+      title={locked ? t("editBook.lockedField") : t("editBook.clickToLock")}
     >
       {locked ? (
         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -39,14 +41,7 @@ function LockButton({
   );
 }
 
-const SERIES_STATUSES = [
-  { value: "", label: "Non défini" },
-  { value: "ongoing", label: "En cours" },
-  { value: "ended", label: "Terminée" },
-  { value: "hiatus", label: "Hiatus" },
-  { value: "cancelled", label: "Annulée" },
-  { value: "upcoming", label: "À paraître" },
-] as const;
+const SERIES_STATUS_VALUES = ["", "ongoing", "ended", "hiatus", "cancelled", "upcoming"] as const;
 
 interface EditSeriesFormProps {
   libraryId: string;
@@ -75,6 +70,7 @@ export function EditSeriesForm({
   currentStatus,
   currentLockedFields,
 }: EditSeriesFormProps) {
+  const { t } = useTranslation();
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const [isOpen, setIsOpen] = useState(false);
@@ -213,7 +209,7 @@ export function EditSeriesForm({
         );
         if (!res.ok) {
           const data = await res.json();
-          setError(data.error ?? "Erreur lors de la sauvegarde");
+          setError(data.error ?? t("editBook.saveError"));
           return;
         }
         setIsOpen(false);
@@ -224,7 +220,7 @@ export function EditSeriesForm({
           router.refresh();
         }
       } catch {
-        setError("Erreur réseau");
+        setError(t("common.networkError"));
       }
     });
   };
@@ -242,7 +238,7 @@ export function EditSeriesForm({
         <div className="bg-card border border-border/50 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto animate-in fade-in zoom-in-95 duration-200">
           {/* Header */}
           <div className="flex items-center justify-between px-5 py-4 border-b border-border/50 bg-muted/30 sticky top-0 z-10">
-            <h3 className="font-semibold text-foreground">Modifier la série</h3>
+            <h3 className="font-semibold text-foreground">{t("editSeries.title")}</h3>
             <button
               type="button"
               onClick={handleClose}
@@ -259,18 +255,18 @@ export function EditSeriesForm({
           <form onSubmit={handleSubmit} className="p-5 space-y-5">
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               <FormField>
-                <FormLabel required>Nom</FormLabel>
+                <FormLabel required>{t("editSeries.name")}</FormLabel>
                 <FormInput
                   value={newName}
                   onChange={(e) => setNewName(e.target.value)}
                   disabled={isPending}
-                  placeholder="Nom de la série"
+                  placeholder={t("editSeries.namePlaceholder")}
                 />
               </FormField>
 
               <FormField>
                 <div className="flex items-center gap-1">
-                  <FormLabel>Année de début</FormLabel>
+                  <FormLabel>{t("editSeries.startYear")}</FormLabel>
                   <LockButton locked={!!lockedFields.start_year} onToggle={() => toggleLock("start_year")} disabled={isPending} />
                 </div>
                 <FormInput
@@ -280,13 +276,13 @@ export function EditSeriesForm({
                   value={startYear}
                   onChange={(e) => setStartYear(e.target.value)}
                   disabled={isPending}
-                  placeholder="ex : 1990"
+                  placeholder={t("editSeries.startYearPlaceholder")}
                 />
               </FormField>
 
               <FormField>
                 <div className="flex items-center gap-1">
-                  <FormLabel>Nombre de volumes</FormLabel>
+                  <FormLabel>{t("editSeries.totalVolumes")}</FormLabel>
                   <LockButton locked={!!lockedFields.total_volumes} onToggle={() => toggleLock("total_volumes")} disabled={isPending} />
                 </div>
                 <FormInput
@@ -295,13 +291,13 @@ export function EditSeriesForm({
                   value={totalVolumes}
                   onChange={(e) => setTotalVolumes(e.target.value)}
                   disabled={isPending}
-                  placeholder="ex : 12"
+                  placeholder="12"
                 />
               </FormField>
 
               <FormField>
                 <div className="flex items-center gap-1">
-                  <FormLabel>Statut</FormLabel>
+                  <FormLabel>{t("editSeries.status")}</FormLabel>
                   <LockButton locked={!!lockedFields.status} onToggle={() => toggleLock("status")} disabled={isPending} />
                 </div>
                 <select
@@ -310,8 +306,10 @@ export function EditSeriesForm({
                   disabled={isPending}
                   className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/40"
                 >
-                  {SERIES_STATUSES.map((s) => (
-                    <option key={s.value} value={s.value}>{s.label}</option>
+                  {SERIES_STATUS_VALUES.map((v) => (
+                    <option key={v} value={v}>
+                      {v === "" ? t("seriesStatus.notDefined") : t(`seriesStatus.${v}` as any)}
+                    </option>
                   ))}
                 </select>
               </FormField>
@@ -319,7 +317,7 @@ export function EditSeriesForm({
               {/* Auteurs — multi-valeur */}
               <FormField className="sm:col-span-2">
                 <div className="flex items-center gap-1">
-                  <FormLabel>Auteur(s)</FormLabel>
+                  <FormLabel>{t("editSeries.authors")}</FormLabel>
                   <LockButton locked={!!lockedFields.authors} onToggle={() => toggleLock("authors")} disabled={isPending} />
                 </div>
                 <div className="space-y-2">
@@ -336,7 +334,7 @@ export function EditSeriesForm({
                             onClick={() => removeAuthor(i)}
                             disabled={isPending}
                             className="hover:text-destructive transition-colors ml-0.5"
-                            aria-label={`Supprimer ${a}`}
+                            aria-label={t("editBook.removeAuthor", { name: a })}
                           >
                             ×
                           </button>
@@ -351,7 +349,7 @@ export function EditSeriesForm({
                       onChange={(e) => setAuthorInput(e.target.value)}
                       onKeyDown={handleAuthorKeyDown}
                       disabled={isPending}
-                      placeholder="Ajouter un auteur (Entrée pour valider)"
+                      placeholder={t("editBook.addAuthor")}
                       className="flex h-10 flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     />
                     <button
@@ -371,9 +369,9 @@ export function EditSeriesForm({
                           ? "border-primary bg-primary/10 text-primary"
                           : "border-border bg-card text-muted-foreground hover:text-foreground"
                       }`}
-                      title="Appliquer auteur et langue à tous les livres de la série"
+                      title={t("editSeries.applyToBooksTitle")}
                     >
-                      → livres
+                      {t("editSeries.applyToBooks")}
                     </button>
                   </div>
                 </div>
@@ -382,21 +380,21 @@ export function EditSeriesForm({
               {showApplyToBooks && (
                 <div className="sm:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-3 pl-4 border-l-2 border-primary/30">
                   <FormField>
-                    <FormLabel>Auteur (livres)</FormLabel>
+                    <FormLabel>{t("editSeries.bookAuthor")}</FormLabel>
                     <FormInput
                       value={bookAuthor}
                       onChange={(e) => setBookAuthor(e.target.value)}
                       disabled={isPending}
-                      placeholder="Écrase le champ auteur de chaque livre"
+                      placeholder={t("editSeries.bookAuthorPlaceholder")}
                     />
                   </FormField>
                   <FormField>
-                    <FormLabel>Langue (livres)</FormLabel>
+                    <FormLabel>{t("editSeries.bookLanguage")}</FormLabel>
                     <FormInput
                       value={bookLanguage}
                       onChange={(e) => setBookLanguage(e.target.value)}
                       disabled={isPending}
-                      placeholder="ex : fr, en, jp"
+                      placeholder={t("editBook.languagePlaceholder")}
                     />
                   </FormField>
                 </div>
@@ -405,7 +403,7 @@ export function EditSeriesForm({
               {/* Éditeurs — multi-valeur */}
               <FormField className="sm:col-span-2">
                 <div className="flex items-center gap-1">
-                  <FormLabel>Éditeur(s)</FormLabel>
+                  <FormLabel>{t("editSeries.publishers")}</FormLabel>
                   <LockButton locked={!!lockedFields.publishers} onToggle={() => toggleLock("publishers")} disabled={isPending} />
                 </div>
                 <div className="space-y-2">
@@ -422,7 +420,7 @@ export function EditSeriesForm({
                             onClick={() => removePublisher(i)}
                             disabled={isPending}
                             className="hover:text-destructive transition-colors ml-0.5"
-                            aria-label={`Supprimer ${p}`}
+                            aria-label={t("editBook.removeAuthor", { name: p })}
                           >
                             ×
                           </button>
@@ -437,7 +435,7 @@ export function EditSeriesForm({
                       onChange={(e) => setPublisherInput(e.target.value)}
                       onKeyDown={handlePublisherKeyDown}
                       disabled={isPending}
-                      placeholder="Ajouter un éditeur (Entrée pour valider)"
+                      placeholder={t("editSeries.addPublisher")}
                       className="flex h-10 flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     />
                     <button
@@ -454,7 +452,7 @@ export function EditSeriesForm({
 
               <FormField className="sm:col-span-2">
                 <div className="flex items-center gap-1">
-                  <FormLabel>Description</FormLabel>
+                  <FormLabel>{t("editBook.description")}</FormLabel>
                   <LockButton locked={!!lockedFields.description} onToggle={() => toggleLock("description")} disabled={isPending} />
                 </div>
                 <textarea
@@ -462,7 +460,7 @@ export function EditSeriesForm({
                   onChange={(e) => setDescription(e.target.value)}
                   disabled={isPending}
                   rows={3}
-                  placeholder="Synopsis ou description de la série…"
+                  placeholder={t("editSeries.descriptionPlaceholder")}
                   className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none"
                 />
               </FormField>
@@ -474,7 +472,7 @@ export function EditSeriesForm({
                 <svg className="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                 </svg>
-                Les champs verrouillés ne seront pas écrasés par les synchros de métadonnées externes.
+                {t("editBook.lockedFieldsNote")}
               </p>
             )}
 
@@ -488,14 +486,14 @@ export function EditSeriesForm({
                 disabled={isPending}
                 className="px-4 py-1.5 rounded-lg border border-border bg-card text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
               >
-                Annuler
+                {t("common.cancel")}
               </button>
               <button
                 type="submit"
                 disabled={isPending || (!newName.trim() && seriesName !== "unclassified")}
                 className="px-4 py-1.5 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
               >
-                {isPending ? "Sauvegarde…" : "Sauvegarder"}
+                {isPending ? t("common.saving") : t("common.save")}
               </button>
             </div>
           </form>
@@ -511,7 +509,7 @@ export function EditSeriesForm({
         onClick={() => setIsOpen(true)}
         className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-card text-sm font-medium text-muted-foreground hover:text-foreground hover:border-primary transition-colors"
       >
-        <span>✏️</span> Modifier la série
+        <span>✏️</span> {t("editSeries.title")}
       </button>
       {modal}
     </>

apps/backoffice/app/components/FolderBrowser.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useCallback } from "react";
 import { FolderItem } from "../../lib/api";
+import { useTranslation } from "../../lib/i18n/context";
 
 interface TreeNode extends FolderItem {
   children?: TreeNode[];
@@ -15,6 +16,7 @@ interface FolderBrowserProps {
 }
 
 export function FolderBrowser({ initialFolders, selectedPath, onSelect }: FolderBrowserProps) {
+  const { t } = useTranslation();
   // Convert initial folders to tree structure
   const [tree, setTree] = useState<TreeNode[]>(
     initialFolders.map(f => ({ ...f, children: f.has_children ? [] : undefined }))
@@ -173,7 +175,7 @@ export function FolderBrowser({ initialFolders, selectedPath, onSelect }: Folder
       <div className="max-h-80 overflow-y-auto">
         {tree.length === 0 ? (
           <div className="px-3 py-8 text-sm text-muted-foreground text-center">
-            Aucun dossier trouvé
+            {t("folder.noFolders")}
           </div>
         ) : (
           tree.map(node => renderNode(node))

apps/backoffice/app/components/FolderPicker.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { FolderBrowser } from "./FolderBrowser";
 import { FolderItem } from "../../lib/api";
 import { Button } from "./ui";
+import { useTranslation } from "../../lib/i18n/context";
 
 interface FolderPickerProps {
   initialFolders: FolderItem[];
@@ -13,6 +14,7 @@ interface FolderPickerProps {
 
 export function FolderPicker({ initialFolders, selectedPath, onSelect }: FolderPickerProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const { t } = useTranslation();
 
   const handleSelect = (path: string) => {
     onSelect(path);
@@ -27,7 +29,7 @@ export function FolderPicker({ initialFolders, selectedPath, onSelect }: FolderP
           <input
             type="text"
             readOnly
-            value={selectedPath || "Sélectionner un dossier..."}
+            value={selectedPath || t("folder.selectFolder")}
             className={`
               w-full px-3 py-2 rounded-lg border bg-card
               text-sm font-mono
@@ -57,7 +59,7 @@ export function FolderPicker({ initialFolders, selectedPath, onSelect }: FolderP
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
           </svg>
-          Parcourir
+          {t("common.browse")}
         </Button>
       </div>
 
@@ -79,7 +81,7 @@ export function FolderPicker({ initialFolders, selectedPath, onSelect }: FolderP
                   <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                   </svg>
-                  <span className="font-medium">Sélectionner le dossier</span>
+                  <span className="font-medium">{t("folder.selectFolderTitle")}</span>
                 </div>
                 <button
                   type="button"
@@ -104,7 +106,7 @@ export function FolderPicker({ initialFolders, selectedPath, onSelect }: FolderP
               {/* Footer */}
               <div className="flex items-center justify-between px-4 py-3 border-t border-border/50 bg-muted/30">
                 <span className="text-xs text-muted-foreground">
-                  Cliquez sur un dossier pour le sélectionner
+                  {t("folder.clickToSelect")}
                 </span>
                 <div className="flex gap-2">
                   <Button
@@ -113,7 +115,7 @@ export function FolderPicker({ initialFolders, selectedPath, onSelect }: FolderP
                     size="sm"
                     onClick={() => setIsOpen(false)}
                   >
-                    Annuler
+                    {t("common.cancel")}
                   </Button>
                 </div>
               </div>

apps/backoffice/app/components/JobProgress.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useTranslation } from "../../lib/i18n/context";
 import { StatusBadge, Badge, ProgressBar } from "./ui";
 
 interface ProgressEvent {
@@ -24,6 +25,7 @@ interface JobProgressProps {
 }
 
 export function JobProgress({ jobId, onComplete }: JobProgressProps) {
+  const { t } = useTranslation();
   const [progress, setProgress] = useState<ProgressEvent | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [isComplete, setIsComplete] = useState(false);
@@ -53,25 +55,25 @@ export function JobProgress({ jobId, onComplete }: JobProgressProps) {
           onComplete?.();
         }
       } catch (err) {
-        setError("Échec de l'analyse des données SSE");
+        setError(t("jobProgress.sseError"));
       }
     };
     
     eventSource.onerror = (err) => {
       console.error("SSE error:", err);
       eventSource.close();
-      setError("Connexion perdue");
+      setError(t("jobProgress.connectionLost"));
     };
 
     return () => {
       eventSource.close();
     };
-  }, [jobId, onComplete]);
+  }, [jobId, onComplete, t]);
 
   if (error) {
     return (
       <div className="p-4 bg-destructive/10 text-error rounded-lg text-sm">
-        Erreur : {error}
+        {t("jobProgress.error", { message: error })}
       </div>
     );
   }
@@ -79,7 +81,7 @@ export function JobProgress({ jobId, onComplete }: JobProgressProps) {
   if (!progress) {
     return (
       <div className="p-4 text-muted-foreground text-sm">
-        Chargement de la progression...
+        {t("jobProgress.loadingProgress")}
       </div>
     );
   }
@@ -88,14 +90,14 @@ export function JobProgress({ jobId, onComplete }: JobProgressProps) {
   const processed = progress.processed_files ?? 0;
   const total = progress.total_files ?? 0;
   const isPhase2 = progress.status === "extracting_pages" || progress.status === "generating_thumbnails";
-  const unitLabel = progress.status === "extracting_pages" ? "pages" : progress.status === "generating_thumbnails" ? "miniatures" : "fichiers";
+  const unitLabel = progress.status === "extracting_pages" ? t("jobProgress.pages") : progress.status === "generating_thumbnails" ? t("jobProgress.thumbnails") : t("jobProgress.filesUnit");
 
   return (
     <div className="p-4 bg-card rounded-lg border border-border">
       <div className="flex items-center justify-between mb-3">
         <StatusBadge status={progress.status} />
         {isComplete && (
-          <Badge variant="success">Terminé</Badge>
+          <Badge variant="success">{t("jobProgress.done")}</Badge>
         )}
       </div>
 
@@ -105,20 +107,20 @@ export function JobProgress({ jobId, onComplete }: JobProgressProps) {
         <span>{processed} / {total} {unitLabel}</span>
         {progress.current_file && (
           <span className="truncate max-w-md" title={progress.current_file}>
-            En cours : {progress.current_file.length > 40
-              ? progress.current_file.substring(0, 40) + "..." 
-              : progress.current_file}
+            {t("jobProgress.currentFile", { file: progress.current_file.length > 40
+              ? progress.current_file.substring(0, 40) + "..."
+              : progress.current_file })}
           </span>
         )}
       </div>
 
       {progress.stats_json && !isPhase2 && (
         <div className="flex flex-wrap gap-3 text-xs">
-          <Badge variant="primary">Analysés : {progress.stats_json.scanned_files}</Badge>
-          <Badge variant="success">Indexés : {progress.stats_json.indexed_files}</Badge>
-          <Badge variant="warning">Supprimés : {progress.stats_json.removed_files}</Badge>
+          <Badge variant="primary">{t("jobProgress.scanned", { count: progress.stats_json.scanned_files })}</Badge>
+          <Badge variant="success">{t("jobProgress.indexed", { count: progress.stats_json.indexed_files })}</Badge>
+          <Badge variant="warning">{t("jobProgress.removed", { count: progress.stats_json.removed_files })}</Badge>
           {progress.stats_json.errors > 0 && (
-            <Badge variant="error">Erreurs : {progress.stats_json.errors}</Badge>
+            <Badge variant="error">{t("jobProgress.errors", { count: progress.stats_json.errors })}</Badge>
           )}
         </div>
       )}

apps/backoffice/app/components/JobRow.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import { useTranslation } from "../../lib/i18n/context";
 import { JobProgress } from "./JobProgress";
 import { StatusBadge, JobTypeBadge, Button, MiniProgressBar } from "./ui";
 
@@ -33,6 +34,7 @@ interface JobRowProps {
 }
 
 export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, formatDuration }: JobRowProps) {
+  const { t } = useTranslation();
   const isActive = job.status === "running" || job.status === "pending" || job.status === "extracting_pages" || job.status === "generating_thumbnails";
   const [showProgress, setShowProgress] = useState(highlighted || isActive);
 
@@ -63,12 +65,12 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
       ? job.total_files != null
         ? `${job.processed_files ?? 0}/${job.total_files}`
         : scanned > 0
-          ? `${scanned} analysés`
+          ? t("jobRow.scanned", { count: scanned })
           : "-"
       : job.status === "success" && (indexed > 0 || removed > 0 || errors > 0)
         ? null // rendered below as ✓ / − / ⚠
         : scanned > 0
-          ? `${scanned} analysés`
+          ? t("jobRow.scanned", { count: scanned })
           : "—";
 
   // Thumbnails column (Phase 2: extracting_pages + generating_thumbnails)
@@ -113,7 +115,7 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
                 className="text-xs text-primary hover:text-primary/80 hover:underline"
                 onClick={() => setShowProgress(!showProgress)}
               >
-                {showProgress ? "Masquer" : "Afficher"} la progression
+                {showProgress ? t("jobRow.hideProgress") : t("jobRow.showProgress")}
               </button>
             )}
           </div>
@@ -154,7 +156,7 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
               href={`/jobs/${job.id}`}
               className="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors"
             >
-              Voir
+              {t("jobRow.view")}
             </Link>
             {(job.status === "pending" || job.status === "running" || job.status === "extracting_pages" || job.status === "generating_thumbnails") && (
               <Button 
@@ -162,7 +164,7 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
                 size="sm"
                 onClick={() => onCancel(job.id)}
               >
-                Annuler
+                {t("common.cancel")}
               </Button>
             )}
           </div>

apps/backoffice/app/components/JobsIndicator.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState, useRef, useCallback } from "react";
 import { createPortal } from "react-dom";
 import Link from "next/link";
+import { useTranslation } from "../../lib/i18n/context";
 import { Badge } from "./ui/Badge";
 import { ProgressBar } from "./ui/ProgressBar";
 
@@ -45,6 +46,7 @@ const ChevronIcon = ({ className }: { className?: string }) => (
 );
 
 export function JobsIndicator() {
+  const { t } = useTranslation();
   const [activeJobs, setActiveJobs] = useState<Job[]>([]);
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -152,7 +154,7 @@ export function JobsIndicator() {
           hover:bg-accent
           transition-colors duration-200
         "
-        title="Voir toutes les tâches"
+        title={t("jobsIndicator.viewAll")}
       >
         <JobsIcon className="w-[18px] h-[18px]" />
       </Link>
@@ -187,11 +189,11 @@ export function JobsIndicator() {
           <div className="flex items-center gap-3">
             <span className="text-xl">📊</span>
             <div>
-              <h3 className="font-semibold text-foreground">Tâches actives</h3>
+              <h3 className="font-semibold text-foreground">{t("jobsIndicator.activeTasks")}</h3>
               <p className="text-xs text-muted-foreground">
                 {runningJobs.length > 0
-                  ? `${runningJobs.length} en cours, ${pendingJobs.length} en attente`
-                  : `${pendingJobs.length} tâche${pendingJobs.length !== 1 ? 's' : ''} en attente`
+                  ? t("jobsIndicator.runningAndPending", { running: runningJobs.length, pending: pendingJobs.length })
+                  : t("jobsIndicator.pendingTasks", { count: pendingJobs.length, plural: pendingJobs.length !== 1 ? "s" : "" })
                 }
               </p>
             </div>
@@ -201,7 +203,7 @@ export function JobsIndicator() {
             className="text-sm font-medium text-primary hover:text-primary/80 transition-colors"
             onClick={() => setIsOpen(false)}
           >
-            Tout voir →
+            {t("jobsIndicator.viewAllLink")}
           </Link>
         </div>
 
@@ -209,7 +211,7 @@ export function JobsIndicator() {
         {runningJobs.length > 0 && (
           <div className="px-4 py-3 border-b border-border/60">
             <div className="flex items-center justify-between text-sm mb-2">
-              <span className="text-muted-foreground">Progression globale</span>
+              <span className="text-muted-foreground">{t("jobsIndicator.overallProgress")}</span>
               <span className="font-semibold text-foreground">{Math.round(totalProgress)}%</span>
             </div>
             <ProgressBar value={totalProgress} size="sm" variant="success" />
@@ -221,7 +223,7 @@ export function JobsIndicator() {
           {activeJobs.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
               <span className="text-4xl mb-2">✅</span>
-              <p>Aucune tâche active</p>
+              <p>{t("jobsIndicator.noActiveTasks")}</p>
             </div>
           ) : (
             <ul className="divide-y divide-border/60">
@@ -242,7 +244,7 @@ export function JobsIndicator() {
                         <div className="flex items-center gap-2 mb-1">
                           <code className="text-xs px-1.5 py-0.5 bg-muted rounded font-mono">{job.id.slice(0, 8)}</code>
                           <Badge variant={job.type === 'rebuild' ? 'primary' : job.type === 'thumbnail_regenerate' ? 'warning' : 'secondary'} className="text-[10px]">
-                            {job.type === 'thumbnail_rebuild' ? 'Miniatures' : job.type === 'thumbnail_regenerate' ? 'Regénération' : job.type}
+                            {t(`jobType.${job.type}` as any) !== `jobType.${job.type}` ? t(`jobType.${job.type}` as any) : job.type}
                           </Badge>
                         </div>
 
@@ -281,7 +283,7 @@ export function JobsIndicator() {
 
         {/* Footer */}
         <div className="px-4 py-2 border-t border-border/60 bg-muted/50">
-          <p className="text-xs text-muted-foreground text-center">Actualisation automatique toutes les 2s</p>
+          <p className="text-xs text-muted-foreground text-center">{t("jobsIndicator.autoRefresh")}</p>
         </div>
       </div>
     </>
@@ -304,7 +306,7 @@ export function JobsIndicator() {
           ${isOpen ? 'ring-2 ring-ring ring-offset-2 ring-offset-background' : ''}
         `}
         onClick={() => setIsOpen(!isOpen)}
-        title={`${totalCount} tâche${totalCount !== 1 ? 's' : ''} active${totalCount !== 1 ? 's' : ''}`}
+        title={t("jobsIndicator.taskCount", { count: totalCount, plural: totalCount !== 1 ? "s" : "" })}
       >
         {/* Animated spinner for running jobs */}
         {runningJobs.length > 0 && (

apps/backoffice/app/components/JobsList.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { useTranslation } from "../../lib/i18n/context";
 import { JobRow } from "./JobRow";
 
 interface Job {
@@ -39,26 +40,36 @@ function formatDuration(start: string, end: string | null): string {
   return `${Math.floor(diff / 3600000)}h ${Math.floor((diff % 3600000) / 60000)}m`;
 }
 
-function formatDate(dateStr: string): string {
+function getDateParts(dateStr: string): { mins: number; hours: number; useDate: boolean; date: Date } {
   const date = new Date(dateStr);
   const now = new Date();
   const diff = now.getTime() - date.getTime();
-  
+
   if (diff < 3600000) {
     const mins = Math.floor(diff / 60000);
-    if (mins < 1) return "À l'instant";
-    return `il y a ${mins}m`;
+    return { mins, hours: 0, useDate: false, date };
   }
   if (diff < 86400000) {
     const hours = Math.floor(diff / 3600000);
-    return `il y a ${hours}h`;
+    return { mins: 0, hours, useDate: false, date };
   }
-  return date.toLocaleDateString();
+  return { mins: 0, hours: 0, useDate: true, date };
 }
 
 export function JobsList({ initialJobs, libraries, highlightJobId }: JobsListProps) {
+  const { t } = useTranslation();
   const [jobs, setJobs] = useState(initialJobs);
 
+  const formatDate = (dateStr: string): string => {
+    const parts = getDateParts(dateStr);
+    if (parts.useDate) {
+      return parts.date.toLocaleDateString();
+    }
+    if (parts.mins < 1) return t("time.justNow");
+    if (parts.hours > 0) return t("time.hoursAgo", { count: parts.hours });
+    return t("time.minutesAgo", { count: parts.mins });
+  };
+
   // Refresh jobs list via SSE
   useEffect(() => {
     const eventSource = new EventSource("/api/jobs/stream");
@@ -102,15 +113,15 @@ export function JobsList({ initialJobs, libraries, highlightJobId }: JobsListPro
         <table className="w-full">
           <thead>
             <tr className="border-b border-border/60 bg-muted/50">
-              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">ID</th>
-              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Bibliothèque</th>
-              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Type</th>
-              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Statut</th>
-              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Fichiers</th>
-              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Miniatures</th>
-              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Durée</th>
-              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Créé</th>
-              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Actions</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("jobsList.id")}</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("jobsList.library")}</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("jobsList.type")}</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("jobsList.status")}</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("jobsList.files")}</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("jobsList.thumbnails")}</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("jobsList.duration")}</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("jobsList.created")}</th>
+              <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("jobsList.actions")}</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-border/60">

apps/backoffice/app/components/LibraryActions.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, useEffect, useTransition } from "react";
 import { Button } from "../components/ui";
 import { ProviderIcon } from "../components/ProviderIcon";
+import { useTranslation } from "../../lib/i18n/context";
 
 interface LibraryActionsProps {
   libraryId: string;
@@ -23,6 +24,7 @@ export function LibraryActions({
   fallbackMetadataProvider,
   onUpdate
 }: LibraryActionsProps) {
+  const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [isPending, startTransition] = useTransition();
   const [saveError, setSaveError] = useState<string | null>(null);
@@ -109,7 +111,7 @@ export function LibraryActions({
                     defaultChecked={monitorEnabled}
                     className="w-4 h-4 rounded border-border text-primary focus:ring-ring"
                   />
-                  Scan auto
+                  {t("libraryActions.autoScan")}
                 </label>
               </div>
 
@@ -122,36 +124,36 @@ export function LibraryActions({
                     defaultChecked={watcherEnabled}
                     className="w-4 h-4 rounded border-border text-primary focus:ring-ring"
                   />
-                  Surveillance fichiers ⚡
+                  {t("libraryActions.fileWatch")}
                 </label>
               </div>
 
               <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-foreground">📅 Planification</label>
+                <label className="text-sm font-medium text-foreground">{t("libraryActions.schedule")}</label>
                 <select 
                   name="scan_mode" 
                   defaultValue={scanMode}
                   className="text-sm border border-border rounded-lg px-2 py-1 bg-background"
                 >
-                  <option value="manual">Manuel</option>
-                  <option value="hourly">Toutes les heures</option>
-                  <option value="daily">Quotidien</option>
-                  <option value="weekly">Hebdomadaire</option>
+                  <option value="manual">{t("monitoring.manual")}</option>
+                  <option value="hourly">{t("monitoring.hourly")}</option>
+                  <option value="daily">{t("monitoring.daily")}</option>
+                  <option value="weekly">{t("monitoring.weekly")}</option>
                 </select>
               </div>
 
               <div className="flex items-center justify-between">
                 <label className="text-sm font-medium text-foreground flex items-center gap-1.5">
                   {metadataProvider && <ProviderIcon provider={metadataProvider} size={16} />}
-                  Fournisseur
+                  {t("libraryActions.provider")}
                 </label>
                 <select
                   name="metadata_provider"
                   defaultValue={metadataProvider || ""}
                   className="text-sm border border-border rounded-lg px-2 py-1 bg-background"
                 >
-                  <option value="">Par défaut</option>
-                  <option value="none">Aucun</option>
+                  <option value="">{t("libraryActions.default")}</option>
+                  <option value="none">{t("libraryActions.none")}</option>
                   <option value="google_books">Google Books</option>
                   <option value="comicvine">ComicVine</option>
                   <option value="open_library">Open Library</option>
@@ -163,14 +165,14 @@ export function LibraryActions({
               <div className="flex items-center justify-between">
                 <label className="text-sm font-medium text-foreground flex items-center gap-1.5">
                   {fallbackMetadataProvider && fallbackMetadataProvider !== "none" && <ProviderIcon provider={fallbackMetadataProvider} size={16} />}
-                  Secours
+                  {t("libraryActions.fallback")}
                 </label>
                 <select
                   name="fallback_metadata_provider"
                   defaultValue={fallbackMetadataProvider || ""}
                   className="text-sm border border-border rounded-lg px-2 py-1 bg-background"
                 >
-                  <option value="">Aucun</option>
+                  <option value="">{t("libraryActions.none")}</option>
                   <option value="google_books">Google Books</option>
                   <option value="comicvine">ComicVine</option>
                   <option value="open_library">Open Library</option>
@@ -191,7 +193,7 @@ export function LibraryActions({
                 className="w-full"
                 disabled={isPending}
               >
-                {isPending ? "Enregistrement..." : "Enregistrer"}
+                {isPending ? t("libraryActions.saving") : t("common.save")}
               </Button>
             </div>
           </form>

apps/backoffice/app/components/LibraryForm.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { FolderPicker } from "./FolderPicker";
 import { FolderItem } from "../../lib/api";
 import { Button, FormField, FormInput, FormRow } from "./ui";
+import { useTranslation } from "../../lib/i18n/context";
 
 interface LibraryFormProps {
   initialFolders: FolderItem[];
@@ -11,13 +12,14 @@ interface LibraryFormProps {
 }
 
 export function LibraryForm({ initialFolders, action }: LibraryFormProps) {
+  const { t } = useTranslation();
   const [selectedPath, setSelectedPath] = useState<string>("");
 
   return (
     <form action={action}>
       <FormRow>
         <FormField className="flex-1 min-w-48">
-          <FormInput name="name" placeholder="Nom de la bibliothèque" required />
+          <FormInput name="name" placeholder={t("libraries.libraryName")} required />
         </FormField>
         <FormField className="flex-1 min-w-64">
           <input type="hidden" name="root_path" value={selectedPath} />
@@ -30,7 +32,7 @@ export function LibraryForm({ initialFolders, action }: LibraryFormProps) {
       </FormRow>
       <div className="mt-4 flex justify-end">
         <Button type="submit" disabled={!selectedPath}>
-          Ajouter une bibliothèque
+          {t("libraries.addButton")}
         </Button>
       </div>
     </form>

apps/backoffice/app/components/LibrarySubPageHeader.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Card, Badge } from "./ui";
+import { getServerTranslations } from "../../lib/i18n/server";
 
 interface LibrarySubPageHeaderProps {
   library: {
@@ -19,13 +20,14 @@ interface LibrarySubPageHeaderProps {
   };
 }
 
-export function LibrarySubPageHeader({ 
-  library, 
-  title, 
-  icon, 
+export async function LibrarySubPageHeader({
+  library,
+  title,
+  icon,
   iconColor = "text-primary",
-  filterInfo 
+  filterInfo
 }: LibrarySubPageHeaderProps) {
+  const { t } = await getServerTranslations();
   return (
     <div className="space-y-6">
       {/* Header avec breadcrumb intégré */}
@@ -38,7 +40,7 @@ export function LibrarySubPageHeader({
             <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
             </svg>
-            Bibliothèques
+            {t("libraryHeader.libraries")}
           </Link>
           <span className="text-muted-foreground">/</span>
           <span className="text-sm text-foreground font-medium">{library.name}</span>
@@ -73,8 +75,7 @@ export function LibrarySubPageHeader({
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
               <span className="text-foreground">
-                <span className="font-semibold">{library.book_count}</span>
-                <span className="text-muted-foreground ml-1">livre{library.book_count !== 1 ? 's' : ''}</span>
+                <span className="text-muted-foreground ml-1">{t("libraryHeader.bookCount", { count: library.book_count, plural: library.book_count !== 1 ? "s" : "" })}</span>
               </span>
             </div>
             
@@ -86,7 +87,7 @@ export function LibrarySubPageHeader({
               variant={library.enabled ? "success" : "muted"}
               className="text-xs"
             >
-              {library.enabled ? "Activée" : "Désactivée"}
+              {library.enabled ? t("libraryHeader.enabled") : t("libraries.disabled")}
             </Badge>
           </div>
         </div>

apps/backoffice/app/components/LiveSearchForm.tsx

@@ -2,6 +2,7 @@
 
 import { useRef, useCallback, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
+import { useTranslation } from "../../lib/i18n/context";
 
 interface FieldDef {
   name: string;
@@ -21,6 +22,7 @@ interface LiveSearchFormProps {
 export function LiveSearchForm({ fields, basePath, debounceMs = 300 }: LiveSearchFormProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { t } = useTranslation();
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const formRef = useRef<HTMLFormElement>(null);
 
@@ -120,7 +122,7 @@ export function LiveSearchForm({ fields, basePath, debounceMs = 300 }: LiveSearc
             w-full sm:w-auto
           "
         >
-          Effacer
+          {t("common.clear")}
         </button>
       )}
     </form>

apps/backoffice/app/components/MarkBookReadButton.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { Button } from "./ui";
+import { useTranslation } from "../../lib/i18n/context";
 
 interface MarkBookReadButtonProps {
   bookId: string;
@@ -10,12 +11,13 @@ interface MarkBookReadButtonProps {
 }
 
 export function MarkBookReadButton({ bookId, currentStatus }: MarkBookReadButtonProps) {
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
   const isRead = currentStatus === "read";
   const targetStatus = isRead ? "unread" : "read";
-  const label = isRead ? "Marquer non lu" : "Marquer comme lu";
+  const label = isRead ? t("markRead.markUnread") : t("markRead.markAsRead");
 
   const handleClick = async () => {
     setLoading(true);

apps/backoffice/app/components/MarkSeriesReadButton.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useTranslation } from "../../lib/i18n/context";
 
 interface MarkSeriesReadButtonProps {
   seriesName: string;
@@ -10,12 +11,13 @@ interface MarkSeriesReadButtonProps {
 }
 
 export function MarkSeriesReadButton({ seriesName, bookCount, booksReadCount }: MarkSeriesReadButtonProps) {
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
   const allRead = booksReadCount >= bookCount;
   const targetStatus = allRead ? "unread" : "read";
-  const label = allRead ? "Marquer non lu" : "Tout marquer lu";
+  const label = allRead ? t("markRead.markUnread") : t("markRead.markAllRead");
 
   const handleClick = async (e: React.MouseEvent) => {
     e.preventDefault();

apps/backoffice/app/components/MetadataSearchModal.tsx

@@ -6,23 +6,12 @@ import { useRouter } from "next/navigation";
 import { Icon } from "./ui";
 import { ProviderIcon, PROVIDERS, providerLabel } from "./ProviderIcon";
 import type { ExternalMetadataLinkDto, SeriesCandidateDto, MissingBooksDto, SyncReport } from "../../lib/api";
+import { useTranslation } from "../../lib/i18n/context";
 
-const FIELD_LABELS: Record<string, string> = {
-  description: "Description",
-  authors: "Auteurs",
-  publishers: "Éditeurs",
-  start_year: "Année",
-  total_volumes: "Nb volumes",
-  status: "Statut",
-  summary: "Résumé",
-  isbn: "ISBN",
-  publish_date: "Date de publication",
-  language: "Langue",
-};
-
-function fieldLabel(field: string): string {
-  return FIELD_LABELS[field] ?? field;
-}
+const FIELD_KEYS: string[] = [
+  "description", "authors", "publishers", "start_year",
+  "total_volumes", "status", "summary", "isbn", "publish_date", "language",
+];
 
 function formatValue(value: unknown): string {
   if (value == null) return "—";
@@ -48,7 +37,15 @@ export function MetadataSearchModal({
   existingLink,
   initialMissing,
 }: MetadataSearchModalProps) {
+  const { t } = useTranslation();
   const router = useRouter();
+
+  const fieldLabel = (field: string): string => {
+    if (FIELD_KEYS.includes(field)) {
+      return t(`field.${field}` as any);
+    }
+    return field;
+  };
   const [isOpen, setIsOpen] = useState(false);
   const [step, setStep] = useState<ModalStep>("idle");
   const [candidates, setCandidates] = useState<SeriesCandidateDto[]>([]);
@@ -126,7 +123,7 @@ export function MetadataSearchModal({
       });
       const data = await resp.json();
       if (!resp.ok) {
-        setError(data.error || "Échec de la recherche");
+        setError(data.error || t("metadata.searchFailed"));
         setStep("results");
         return;
       }
@@ -138,7 +135,7 @@ export function MetadataSearchModal({
       }
       setStep("results");
     } catch {
-      setError("Erreur réseau");
+      setError(t("common.networkError"));
       setStep("results");
     }
   }
@@ -177,7 +174,7 @@ export function MetadataSearchModal({
       });
       const matchData = await matchResp.json();
       if (!matchResp.ok) {
-        setError(matchData.error || "Échec de la création du lien");
+        setError(matchData.error || t("metadata.linkFailed"));
         setStep("results");
         return;
       }
@@ -196,7 +193,7 @@ export function MetadataSearchModal({
       });
       const approveData = await approveResp.json();
       if (!approveResp.ok) {
-        setError(approveData.error || "Échec de l'approbation");
+        setError(approveData.error || t("metadata.approveFailed"));
         setStep("results");
         return;
       }
@@ -218,7 +215,7 @@ export function MetadataSearchModal({
 
       setStep("done");
     } catch {
-      setError("Erreur réseau");
+      setError(t("common.networkError"));
       setStep("results");
     }
   }
@@ -262,7 +259,7 @@ export function MetadataSearchModal({
               {/* Header */}
               <div className="flex items-center justify-between px-5 py-4 border-b border-border/50 bg-muted/30 sticky top-0 z-10">
                 <h3 className="font-semibold text-foreground">
-                  {step === "linked" ? "Lien métadonnées" : "Rechercher les métadonnées externes"}
+                  {step === "linked" ? t("metadata.metadataLink") : t("metadata.searchExternal")}
                 </h3>
                 <button type="button" onClick={handleClose}>
                   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="text-muted-foreground hover:text-foreground">
@@ -275,7 +272,7 @@ export function MetadataSearchModal({
                 {/* Provider selector — visible during searching & results */}
                 {(step === "searching" || step === "results") && (
                   <div className="flex items-center gap-2">
-                    <label className="text-sm text-muted-foreground whitespace-nowrap">Fournisseur :</label>
+                    <label className="text-sm text-muted-foreground whitespace-nowrap">{t("metadata.provider")}</label>
                     <div className="flex gap-1 flex-wrap">
                       {visibleProviders.map((p) => (
                         <button
@@ -304,7 +301,7 @@ export function MetadataSearchModal({
                 {step === "searching" && (
                   <div className="flex items-center justify-center py-12">
                     <Icon name="spinner" size="lg" className="animate-spin text-primary" />
-                    <span className="ml-3 text-muted-foreground">Recherche de &quot;{seriesName}&quot;...</span>
+                    <span className="ml-3 text-muted-foreground">{t("metadata.searching", { name: seriesName })}</span>
                   </div>
                 )}
 
@@ -319,13 +316,13 @@ export function MetadataSearchModal({
                 {step === "results" && (
                   <>
                     {candidates.length === 0 && !error ? (
-                      <p className="text-muted-foreground text-center py-8">Aucun résultat trouvé.</p>
+                      <p className="text-muted-foreground text-center py-8">{t("metadata.noResults")}</p>
                     ) : (
                       <div className="space-y-2">
                         <p className="text-sm text-muted-foreground mb-2">
-                          {candidates.length} résultat{candidates.length !== 1 ? "s" : ""} trouvé{candidates.length !== 1 ? "s" : ""}
+                          {t("metadata.resultCount", { count: candidates.length, plural: candidates.length !== 1 ? "s" : "" })}
                           {activeProvider && (
-                            <span className="ml-1 text-xs inline-flex items-center gap-1">via <ProviderIcon provider={activeProvider} size={12} /> <span className="font-medium">{providerLabel(activeProvider)}</span></span>
+                            <span className="ml-1 text-xs inline-flex items-center gap-1">{t("common.via")} <ProviderIcon provider={activeProvider} size={12} /> <span className="font-medium">{providerLabel(activeProvider)}</span></span>
                           )}
                         </p>
                         {candidates.map((c, i) => (
@@ -362,7 +359,7 @@ export function MetadataSearchModal({
                                     </span>
                                   )}
                                   {c.metadata_json?.status === "RELEASING" && (
-                                    <span className="italic text-amber-500">en cours</span>
+                                    <span className="italic text-amber-500">{t("metadata.inProgress")}</span>
                                   )}
                                 </div>
                               </div>
@@ -393,18 +390,18 @@ export function MetadataSearchModal({
                           )}
                           {selectedCandidate.total_volumes != null && (
                             <p className="text-sm text-muted-foreground">
-                              {selectedCandidate.total_volumes} {selectedCandidate.metadata_json?.volume_source === "chapters" ? "chapitres" : "volumes"}
-                              {selectedCandidate.metadata_json?.status === "RELEASING" && <span className="italic text-amber-500 ml-1">(en cours)</span>}
+                              {selectedCandidate.total_volumes} {selectedCandidate.metadata_json?.volume_source === "chapters" ? t("metadata.chapters") : t("metadata.volumes")}
+                              {selectedCandidate.metadata_json?.status === "RELEASING" && <span className="italic text-amber-500 ml-1">({t("metadata.inProgress")})</span>}
                             </p>
                           )}
                           <p className="text-xs text-muted-foreground mt-1 inline-flex items-center gap-1">
-                            via <ProviderIcon provider={selectedCandidate.provider} size={12} /> <span className="font-medium">{providerLabel(selectedCandidate.provider)}</span>
+                            {t("common.via")} <ProviderIcon provider={selectedCandidate.provider} size={12} /> <span className="font-medium">{providerLabel(selectedCandidate.provider)}</span>
                           </p>
                         </div>
                       </div>
                     </div>
 
-                    <p className="text-sm text-foreground font-medium">Comment souhaitez-vous synchroniser ?</p>
+                    <p className="text-sm text-foreground font-medium">{t("metadata.howToSync")}</p>
 
                     <div className="flex flex-col gap-2">
                       <button
@@ -412,16 +409,16 @@ export function MetadataSearchModal({
                         onClick={() => handleApprove(true, false)}
                         className="w-full p-3 rounded-lg border border-border bg-card text-left hover:bg-muted/40 hover:border-primary/50 transition-colors"
                       >
-                        <p className="font-medium text-sm text-foreground">Synchroniser la série uniquement</p>
-                        <p className="text-xs text-muted-foreground">Mettre à jour la description, les auteurs, les éditeurs et l'année</p>
+                        <p className="font-medium text-sm text-foreground">{t("metadata.syncSeriesOnly")}</p>
+                        <p className="text-xs text-muted-foreground">{t("metadata.syncSeriesOnlyDesc")}</p>
                       </button>
                       <button
                         type="button"
                         onClick={() => handleApprove(true, true)}
                         className="w-full p-3 rounded-lg border border-primary/50 bg-primary/5 text-left hover:bg-primary/10 transition-colors"
                       >
-                        <p className="font-medium text-sm text-foreground">Synchroniser la série + les livres</p>
-                        <p className="text-xs text-muted-foreground">Récupérer aussi la liste des livres et afficher les tomes manquants</p>
+                        <p className="font-medium text-sm text-foreground">{t("metadata.syncSeriesAndBooks")}</p>
+                        <p className="text-xs text-muted-foreground">{t("metadata.syncSeriesAndBooksDesc")}</p>
                       </button>
                     </div>
 
@@ -430,7 +427,7 @@ export function MetadataSearchModal({
                       onClick={() => { setSelectedCandidate(null); setStep("results"); }}
                       className="text-sm text-muted-foreground hover:text-foreground"
                     >
-                      Retour aux résultats
+                      {t("metadata.backToResults")}
                     </button>
                   </div>
                 )}
@@ -439,7 +436,7 @@ export function MetadataSearchModal({
                 {step === "syncing" && (
                   <div className="flex items-center justify-center py-12">
                     <Icon name="spinner" size="lg" className="animate-spin text-primary" />
-                    <span className="ml-3 text-muted-foreground">Synchronisation des métadonnées...</span>
+                    <span className="ml-3 text-muted-foreground">{t("metadata.syncingMetadata")}</span>
                   </div>
                 )}
 
@@ -447,7 +444,7 @@ export function MetadataSearchModal({
                 {step === "done" && (
                   <div className="space-y-4">
                     <div className="p-4 rounded-lg bg-green-500/10 border border-green-500/30">
-                      <p className="font-medium text-green-600">Métadonnées synchronisées avec succès !</p>
+                      <p className="font-medium text-green-600">{t("metadata.syncSuccess")}</p>
                     </div>
 
                     {/* Sync Report */}
@@ -456,7 +453,7 @@ export function MetadataSearchModal({
                         {/* Series report */}
                         {syncReport.series && (syncReport.series.fields_updated.length > 0 || syncReport.series.fields_skipped.length > 0) && (
                           <div className="p-3 rounded-lg bg-muted/30 border border-border/50">
-                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">Série</p>
+                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">{t("metadata.seriesLabel")}</p>
                             {syncReport.series.fields_updated.length > 0 && (
                               <div className="space-y-1">
                                 {syncReport.series.fields_updated.map((f, i) => (
@@ -478,7 +475,7 @@ export function MetadataSearchModal({
                                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                     </svg>
                                     <span className="font-medium">{fieldLabel(f.field)}</span>
-                                    <span className="text-muted-foreground">verrouillé</span>
+                                    <span className="text-muted-foreground">{t("metadata.locked")}</span>
                                   </div>
                                 ))}
                               </div>
@@ -497,7 +494,7 @@ export function MetadataSearchModal({
                         {!syncReport.books_message && (syncReport.books.length > 0 || syncReport.books_unmatched > 0) && (
                           <div className="p-3 rounded-lg bg-muted/30 border border-border/50">
                             <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
-                              Livres — {syncReport.books_matched} associé{syncReport.books_matched !== 1 ? "s" : ""}{syncReport.books_unmatched > 0 && `, ${syncReport.books_unmatched} non associé${syncReport.books_unmatched !== 1 ? "s" : ""}`}
+                              {t("metadata.booksLabel")} — {t("metadata.booksMatched", { matched: syncReport.books_matched, plural: syncReport.books_matched !== 1 ? "s" : "" })}{syncReport.books_unmatched > 0 && `, ${t("metadata.booksUnmatched", { count: syncReport.books_unmatched, plural: syncReport.books_unmatched !== 1 ? "s" : "" })}`}
                             </p>
                             {syncReport.books.length > 0 && (
                               <div className="space-y-2 max-h-48 overflow-y-auto">
@@ -520,7 +517,7 @@ export function MetadataSearchModal({
                                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                           </svg>
                                           <span className="font-medium">{fieldLabel(f.field)}</span>
-                                          <span className="text-muted-foreground">verrouillé</span>
+                                          <span className="text-muted-foreground">{t("metadata.locked")}</span>
                                         </p>
                                       ))}
                                     </div>
@@ -538,15 +535,15 @@ export function MetadataSearchModal({
                       <div className="space-y-3">
                         <div className="grid grid-cols-3 gap-4 p-4 bg-muted/30 rounded-lg">
                           <div>
-                            <p className="text-sm text-muted-foreground">Externe</p>
+                            <p className="text-sm text-muted-foreground">{t("metadata.external")}</p>
                             <p className="text-2xl font-semibold">{missing.total_external}</p>
                           </div>
                           <div>
-                            <p className="text-sm text-muted-foreground">Locaux</p>
+                            <p className="text-sm text-muted-foreground">{t("metadata.local")}</p>
                             <p className="text-2xl font-semibold">{missing.total_local}</p>
                           </div>
                           <div>
-                            <p className="text-sm text-muted-foreground">Manquants</p>
+                            <p className="text-sm text-muted-foreground">{t("metadata.missingLabel")}</p>
                             <p className="text-2xl font-semibold text-warning">{missing.missing_count}</p>
                           </div>
                         </div>
@@ -559,14 +556,14 @@ export function MetadataSearchModal({
                               className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1"
                             >
                               <Icon name={showMissingList ? "chevronDown" : "chevronRight"} size="sm" />
-                              {missing.missing_count} livre{missing.missing_count !== 1 ? "s" : ""} manquant{missing.missing_count !== 1 ? "s" : ""}
+                              {t("metadata.missingBooks", { count: missing.missing_count, plural: missing.missing_count !== 1 ? "s" : "" })}
                             </button>
                             {showMissingList && (
                               <div className="mt-2 max-h-40 overflow-y-auto p-3 bg-muted/20 rounded-lg text-sm space-y-1">
                                 {missing.missing_books.map((b, i) => (
                                   <p key={i} className="text-muted-foreground truncate">
                                     {b.volume_number != null && <span className="font-mono mr-2">#{b.volume_number}</span>}
-                                    {b.title || "Inconnu"}
+                                    {b.title || t("metadata.unknown")}
                                   </p>
                                 ))}
                               </div>
@@ -581,7 +578,7 @@ export function MetadataSearchModal({
                       onClick={() => { handleClose(); router.refresh(); }}
                       className="w-full p-2.5 rounded-lg bg-primary text-primary-foreground font-medium text-sm hover:bg-primary/90 transition-colors"
                     >
-                      Fermer
+                      {t("common.close")}
                     </button>
                   </div>
                 )}
@@ -593,7 +590,7 @@ export function MetadataSearchModal({
                       <div className="flex items-center justify-between">
                         <div>
                           <p className="font-medium text-foreground inline-flex items-center gap-1.5">
-                            Lié à <ProviderIcon provider={existingLink.provider} size={16} /> {providerLabel(existingLink.provider)}
+                            {t("metadata.linkedTo")} <ProviderIcon provider={existingLink.provider} size={16} /> {providerLabel(existingLink.provider)}
                           </p>
                           {existingLink.external_url && (
                             <a
@@ -602,7 +599,7 @@ export function MetadataSearchModal({
                               rel="noopener noreferrer"
                               className="block mt-1 text-xs text-primary hover:underline"
                             >
-                              Voir sur la source externe
+                              {t("metadata.viewExternal")}
                             </a>
                           )}
                         </div>
@@ -613,15 +610,15 @@ export function MetadataSearchModal({
                     {initialMissing && (
                       <div className="grid grid-cols-3 gap-4 p-4 bg-muted/30 rounded-lg">
                         <div>
-                          <p className="text-sm text-muted-foreground">External</p>
+                          <p className="text-sm text-muted-foreground">{t("metadata.external")}</p>
                           <p className="text-2xl font-semibold">{initialMissing.total_external}</p>
                         </div>
                         <div>
-                          <p className="text-sm text-muted-foreground">Local</p>
+                          <p className="text-sm text-muted-foreground">{t("metadata.local")}</p>
                           <p className="text-2xl font-semibold">{initialMissing.total_local}</p>
                         </div>
                         <div>
-                          <p className="text-sm text-muted-foreground">Missing</p>
+                          <p className="text-sm text-muted-foreground">{t("metadata.missingLabel")}</p>
                           <p className="text-2xl font-semibold text-warning">{initialMissing.missing_count}</p>
                         </div>
                       </div>
@@ -635,14 +632,14 @@ export function MetadataSearchModal({
                           className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1"
                         >
                           <Icon name={showMissingList ? "chevronDown" : "chevronRight"} size="sm" />
-                          {initialMissing.missing_count} livre{initialMissing.missing_count !== 1 ? "s" : ""} manquant{initialMissing.missing_count !== 1 ? "s" : ""}
+                          {t("metadata.missingBooks", { count: initialMissing.missing_count, plural: initialMissing.missing_count !== 1 ? "s" : "" })}
                         </button>
                         {showMissingList && (
                           <div className="mt-2 max-h-40 overflow-y-auto p-3 bg-muted/20 rounded-lg text-sm space-y-1">
                             {initialMissing.missing_books.map((b, i) => (
                               <p key={i} className="text-muted-foreground truncate">
                                 {b.volume_number != null && <span className="font-mono mr-2">#{b.volume_number}</span>}
-                                {b.title || "Inconnu"}
+                                {b.title || t("metadata.unknown")}
                               </p>
                             ))}
                           </div>
@@ -656,14 +653,14 @@ export function MetadataSearchModal({
                         onClick={() => { doSearch(""); }}
                         className="flex-1 p-2.5 rounded-lg border border-border bg-card text-sm font-medium text-muted-foreground hover:text-foreground hover:border-primary transition-colors"
                       >
-                        Rechercher à nouveau
+                        {t("metadata.searchAgain")}
                       </button>
                       <button
                         type="button"
                         onClick={handleUnlink}
                         className="p-2.5 rounded-lg border border-destructive/30 bg-destructive/5 text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors"
                       >
-                        Dissocier
+                        {t("metadata.unlink")}
                       </button>
                     </div>
                   </div>
@@ -683,13 +680,13 @@ export function MetadataSearchModal({
         className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-card text-sm font-medium text-muted-foreground hover:text-foreground hover:border-primary transition-colors"
       >
         <Icon name="search" size="sm" />
-        {existingLink && existingLink.status === "approved" ? "Métadonnées" : "Rechercher les métadonnées"}
+        {existingLink && existingLink.status === "approved" ? t("metadata.metadataButton") : t("metadata.searchButton")}
       </button>
 
       {/* Inline badge when linked */}
       {existingLink && existingLink.status === "approved" && initialMissing && initialMissing.missing_count > 0 && (
         <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-yellow-500/10 text-yellow-600 text-xs border border-yellow-500/30">
-          {initialMissing.missing_count} manquant{initialMissing.missing_count !== 1 ? "s" : ""}
+          {t("series.missingCount", { count: initialMissing.missing_count, plural: initialMissing.missing_count !== 1 ? "s" : "" })}
         </span>
       )}
 

apps/backoffice/app/components/MobileNav.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import Link from "next/link";
 import { NavIcon } from "./ui";
+import { useTranslation } from "../../lib/i18n/context";
 
 type NavItem = {
   href: "/" | "/books" | "/series" | "/libraries" | "/jobs" | "/tokens" | "/settings";
@@ -24,6 +25,7 @@ const XIcon = () => (
 );
 
 export function MobileNav({ navItems }: { navItems: NavItem[] }) {
+  const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
 
@@ -53,7 +55,7 @@ export function MobileNav({ navItems }: { navItems: NavItem[] }) {
         `}
       >
         <div className="h-16 border-b border-border/40 flex items-center px-4">
-          <span className="text-sm font-semibold text-muted-foreground tracking-wide uppercase">Navigation</span>
+          <span className="text-sm font-semibold text-muted-foreground tracking-wide uppercase">{t("nav.navigation")}</span>
         </div>
 
         <nav className="flex flex-col gap-1 p-3 flex-1">
@@ -76,7 +78,7 @@ export function MobileNav({ navItems }: { navItems: NavItem[] }) {
               onClick={() => setIsOpen(false)}
             >
               <NavIcon name="settings" />
-              <span className="font-medium">Paramètres</span>
+              <span className="font-medium">{t("nav.settings")}</span>
             </Link>
           </div>
         </nav>
@@ -90,7 +92,7 @@ export function MobileNav({ navItems }: { navItems: NavItem[] }) {
       <button
         className="md:hidden p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
         onClick={() => setIsOpen(!isOpen)}
-        aria-label={isOpen ? "Fermer le menu" : "Ouvrir le menu"}
+        aria-label={isOpen ? t("nav.closeMenu") : t("nav.openMenu")}
         aria-expanded={isOpen}
       >
         {isOpen ? <XIcon /> : <HamburgerIcon />}

apps/backoffice/app/components/MonitoringForm.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useTransition } from "react";
+import { useTranslation } from "../../lib/i18n/context";
 
 interface MonitoringFormProps {
   libraryId: string;
@@ -10,6 +11,7 @@ interface MonitoringFormProps {
 }
 
 export function MonitoringForm({ libraryId, monitorEnabled, scanMode, watcherEnabled }: MonitoringFormProps) {
+  const { t } = useTranslation();
   const [isPending, startTransition] = useTransition();
 
   const handleSubmit = (formData: FormData) => {
@@ -51,7 +53,7 @@ export function MonitoringForm({ libraryId, monitorEnabled, scanMode, watcherEna
             disabled={isPending}
             className="w-3.5 h-3.5 rounded border-border text-primary focus:ring-primary"
           />
-          <span>Auto</span>
+          <span>{t("monitoring.auto")}</span>
         </label>
         
         <label className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-sm font-medium transition-all cursor-pointer select-none ${
@@ -67,7 +69,7 @@ export function MonitoringForm({ libraryId, monitorEnabled, scanMode, watcherEna
             disabled={isPending}
             className="w-3.5 h-3.5 rounded border-border text-warning focus:ring-warning"
           />
-          <span title="Surveillance des fichiers en temps réel">⚡</span>
+          <span title={t("monitoring.fileWatch")}>⚡</span>
         </label>
         
         <select
@@ -76,10 +78,10 @@ export function MonitoringForm({ libraryId, monitorEnabled, scanMode, watcherEna
           disabled={isPending}
           className="px-3 py-1.5 text-sm rounded-lg border border-border bg-card text-foreground focus:ring-2 focus:ring-primary focus:border-primary disabled:opacity-50"
         >
-          <option value="manual">Manuel</option>
-          <option value="hourly">Toutes les heures</option>
-          <option value="daily">Quotidien</option>
-          <option value="weekly">Hebdomadaire</option>
+          <option value="manual">{t("monitoring.manual")}</option>
+          <option value="hourly">{t("monitoring.hourly")}</option>
+          <option value="daily">{t("monitoring.daily")}</option>
+          <option value="weekly">{t("monitoring.weekly")}</option>
         </select>
         
         <button 

apps/backoffice/app/components/SeriesFilters.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback } from "react";
+import { useTranslation } from "../../lib/i18n/context";
 
 interface SeriesFiltersProps {
   basePath: string;
@@ -13,6 +14,7 @@ interface SeriesFiltersProps {
 export function SeriesFilters({ basePath, currentSeriesStatus, currentHasMissing, seriesStatusOptions }: SeriesFiltersProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { t } = useTranslation();
 
   const updateFilter = useCallback((key: string, value: string) => {
     const params = new URLSearchParams(searchParams.toString());
@@ -43,8 +45,8 @@ export function SeriesFilters({ basePath, currentSeriesStatus, currentHasMissing
         onChange={(e) => updateFilter("has_missing", e.target.value)}
         className="px-3 py-2 rounded-lg border border-border bg-card text-foreground text-sm"
       >
-        <option value="">Tous</option>
-        <option value="true">Livres manquants</option>
+        <option value="">{t("seriesFilters.all")}</option>
+        <option value="true">{t("seriesFilters.missingBooks")}</option>
       </select>
     </div>
   );

apps/backoffice/app/components/ui/Badge.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import { ReactNode } from "react";
+import { useTranslation } from "../../../lib/i18n/context";
 
 type BadgeVariant = 
   | "default" 
@@ -70,19 +73,19 @@ const statusVariants: Record<string, BadgeVariant> = {
   unread: "unread",
 };
 
-const statusLabels: Record<string, string> = {
-  extracting_pages: "Extraction des pages",
-  generating_thumbnails: "Miniatures",
-};
-
 interface StatusBadgeProps {
   status: string;
   className?: string;
 }
 
 export function StatusBadge({ status, className = "" }: StatusBadgeProps) {
+  const { t } = useTranslation();
   const key = status.toLowerCase();
   const variant = statusVariants[key] || "default";
+  const statusLabels: Record<string, string> = {
+    extracting_pages: t("statusBadge.extracting_pages"),
+    generating_thumbnails: t("statusBadge.generating_thumbnails"),
+  };
   const label = statusLabels[key] ?? status;
   return <Badge variant={variant} className={className}>{label}</Badge>;
 }
@@ -95,22 +98,23 @@ const jobTypeVariants: Record<string, BadgeVariant> = {
   thumbnail_regenerate: "warning",
 };
 
-const jobTypeLabels: Record<string, string> = {
-  rebuild: "Indexation",
-  full_rebuild: "Indexation complète",
-  thumbnail_rebuild: "Miniatures",
-  thumbnail_regenerate: "Régén. miniatures",
-  cbr_to_cbz: "CBR → CBZ",
-};
-
 interface JobTypeBadgeProps {
   type: string;
   className?: string;
 }
 
 export function JobTypeBadge({ type, className = "" }: JobTypeBadgeProps) {
+  const { t } = useTranslation();
   const key = type.toLowerCase();
   const variant = jobTypeVariants[key] || "default";
+  const jobTypeLabels: Record<string, string> = {
+    rebuild: t("jobType.rebuild"),
+    full_rebuild: t("jobType.full_rebuild"),
+    thumbnail_rebuild: t("jobType.thumbnail_rebuild"),
+    thumbnail_regenerate: t("jobType.thumbnail_regenerate"),
+    cbr_to_cbz: t("jobType.cbr_to_cbz"),
+    metadata_batch: t("jobType.metadata_batch"),
+  };
   const label = jobTypeLabels[key] ?? type;
   return <Badge variant={variant} className={className}>{label}</Badge>;
 }

apps/backoffice/app/components/ui/Pagination.tsx

@@ -3,6 +3,7 @@
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "./Button";
 import { IconButton } from "./Button";
+import { useTranslation } from "../../../lib/i18n/context";
 
 interface CursorPaginationProps {
   hasNextPage: boolean;
@@ -23,6 +24,7 @@ export function CursorPagination({
 }: CursorPaginationProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { t } = useTranslation();
 
   const goToNext = () => {
     if (!nextCursor) return;
@@ -48,7 +50,7 @@ export function CursorPagination({
     <div className="flex flex-col sm:flex-row items-center justify-between gap-6 mt-8 pt-8 border-t border-border/60">
       {/* Page size selector */}
       <div className="flex items-center gap-3">
-        <span className="text-sm text-muted-foreground">Afficher</span>
+        <span className="text-sm text-muted-foreground">{t("pagination.show")}</span>
         <select
           value={pageSize.toString()}
           onChange={(e) => changePageSize(Number(e.target.value))}
@@ -60,12 +62,12 @@ export function CursorPagination({
             </option>
           ))}
         </select>
-        <span className="text-sm text-muted-foreground">par page</span>
+        <span className="text-sm text-muted-foreground">{t("common.perPage")}</span>
       </div>
 
       {/* Count info */}
       <div className="text-sm text-muted-foreground">
-        Affichage de {currentCount} éléments
+        {t("pagination.displaying", { count: currentCount.toString() })}
       </div>
 
       {/* Navigation */}
@@ -79,7 +81,7 @@ export function CursorPagination({
           <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
           </svg>
-          Premier
+          {t("common.first")}
         </Button>
 
         <Button
@@ -88,7 +90,7 @@ export function CursorPagination({
           onClick={goToNext}
           disabled={!hasNextPage}
         >
-          Suivant
+          {t("common.next")}
           <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
           </svg>
@@ -115,6 +117,7 @@ export function OffsetPagination({
 }: OffsetPaginationProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { t } = useTranslation();
 
   const goToPage = (page: number) => {
     const params = new URLSearchParams(searchParams);
@@ -170,7 +173,7 @@ export function OffsetPagination({
     <div className="flex flex-col sm:flex-row items-center justify-between gap-6 mt-8 pt-8 border-t border-border/60">
       {/* Page size selector */}
       <div className="flex items-center gap-3">
-        <span className="text-sm text-muted-foreground">Afficher</span>
+        <span className="text-sm text-muted-foreground">{t("pagination.show")}</span>
         <select
           value={pageSize.toString()}
           onChange={(e) => changePageSize(Number(e.target.value))}
@@ -182,12 +185,12 @@ export function OffsetPagination({
             </option>
           ))}
         </select>
-        <span className="text-sm text-muted-foreground">par page</span>
+        <span className="text-sm text-muted-foreground">{t("common.perPage")}</span>
       </div>
 
       {/* Page info */}
       <div className="text-sm text-muted-foreground">
-        {startItem}-{endItem} sur {totalItems}
+        {t("pagination.range", { start: startItem.toString(), end: endItem.toString(), total: totalItems.toString() })}
       </div>
 
       {/* Page navigation */}
@@ -196,7 +199,7 @@ export function OffsetPagination({
           size="sm"
           onClick={() => goToPage(currentPage - 1)}
           disabled={currentPage <= 1}
-          title="Page précédente"
+          title={t("common.previousPage")}
         >
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
@@ -224,7 +227,7 @@ export function OffsetPagination({
           size="sm"
           onClick={() => goToPage(currentPage + 1)}
           disabled={currentPage >= totalPages}
-          title="Page suivante"
+          title={t("common.nextPage")}
         >
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />

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

@@ -5,6 +5,7 @@ import {
   Card, CardHeader, CardTitle, CardDescription, CardContent,
   StatusBadge, JobTypeBadge, StatBox, ProgressBar
 } from "../../components/ui";
+import { getServerTranslations } from "../../../lib/i18n/server";
 
 interface JobDetailPageProps {
   params: Promise<{ id: string }>;
@@ -42,38 +43,6 @@ interface JobError {
   created_at: string;
 }
 
-const JOB_TYPE_INFO: Record<string, { label: string; description: string; isThumbnailOnly: boolean }> = {
-  rebuild: {
-    label: "Indexation incrémentale",
-    description: "Scanne les fichiers nouveaux/modifiés, les analyse et génère les miniatures manquantes.",
-    isThumbnailOnly: false,
-  },
-  full_rebuild: {
-    label: "Réindexation complète",
-    description: "Supprime toutes les données existantes puis effectue un scan complet, une ré-analyse et la génération des miniatures.",
-    isThumbnailOnly: false,
-  },
-  thumbnail_rebuild: {
-    label: "Reconstruction des miniatures",
-    description: "Génère les miniatures uniquement pour les livres qui n'en ont pas. Les miniatures existantes sont conservées.",
-    isThumbnailOnly: true,
-  },
-  thumbnail_regenerate: {
-    label: "Regénération des miniatures",
-    description: "Regénère toutes les miniatures depuis zéro, en remplaçant les existantes.",
-    isThumbnailOnly: true,
-  },
-  cbr_to_cbz: {
-    label: "Conversion CBR → CBZ",
-    description: "Convertit une archive CBR au format ouvert CBZ.",
-    isThumbnailOnly: false,
-  },
-  metadata_batch: {
-    label: "Métadonnées en lot",
-    description: "Recherche les métadonnées auprès des fournisseurs externes pour toutes les séries de la bibliothèque et applique automatiquement les correspondances à 100% de confiance.",
-    isThumbnailOnly: false,
-  },
-};
 
 async function getJobDetails(jobId: string): Promise<JobDetails | null> {
   try {
@@ -117,6 +86,41 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
     notFound();
   }
 
+  const { t, locale } = await getServerTranslations();
+
+  const JOB_TYPE_INFO: Record<string, { label: string; description: string; isThumbnailOnly: boolean }> = {
+    rebuild: {
+      label: t("jobType.rebuildLabel"),
+      description: t("jobType.rebuildDesc"),
+      isThumbnailOnly: false,
+    },
+    full_rebuild: {
+      label: t("jobType.full_rebuildLabel"),
+      description: t("jobType.full_rebuildDesc"),
+      isThumbnailOnly: false,
+    },
+    thumbnail_rebuild: {
+      label: t("jobType.thumbnail_rebuildLabel"),
+      description: t("jobType.thumbnail_rebuildDesc"),
+      isThumbnailOnly: true,
+    },
+    thumbnail_regenerate: {
+      label: t("jobType.thumbnail_regenerateLabel"),
+      description: t("jobType.thumbnail_regenerateDesc"),
+      isThumbnailOnly: true,
+    },
+    cbr_to_cbz: {
+      label: t("jobType.cbr_to_cbzLabel"),
+      description: t("jobType.cbr_to_cbzDesc"),
+      isThumbnailOnly: false,
+    },
+    metadata_batch: {
+      label: t("jobType.metadata_batchLabel"),
+      description: t("jobType.metadata_batchDesc"),
+      isThumbnailOnly: false,
+    },
+  };
+
   const isMetadataBatch = job.type === "metadata_batch";
 
   // Fetch batch report & results for metadata_batch jobs
@@ -149,24 +153,24 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
 
   // Which label to use for the progress card
   const progressTitle = isMetadataBatch
-    ? "Recherche de métadonnées"
+    ? t("jobDetail.metadataSearch")
     : isThumbnailOnly
-      ? "Miniatures"
+      ? t("jobType.thumbnail_rebuild")
       : isExtractingPages
-        ? "Phase 2 — Extraction des pages"
+        ? t("jobDetail.phase2a")
         : isThumbnailPhase
-          ? "Phase 2 — Miniatures"
-          : "Phase 1 — Découverte";
+          ? t("jobDetail.phase2b")
+          : t("jobDetail.phase1");
 
   const progressDescription = isMetadataBatch
-    ? "Recherche auprès des fournisseurs externes pour chaque série"
+    ? t("jobDetail.metadataSearchDesc")
     : isThumbnailOnly
       ? undefined
       : isExtractingPages
-        ? "Extraction de la première page de chaque archive (nombre de pages + image brute)"
+        ? t("jobDetail.phase2aDesc")
         : isThumbnailPhase
-          ? "Génération des miniatures pour les livres analysés"
-          : "Scan et indexation des fichiers de la bibliothèque";
+          ? t("jobDetail.phase2bDesc")
+          : t("jobDetail.phase1Desc");
 
   // Speed metric: thumbnail count for thumbnail jobs, scanned files for index jobs
   const speedCount = isThumbnailOnly
@@ -187,9 +191,9 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
           <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
           </svg>
-          Retour aux tâches
+          {t("jobDetail.backToJobs")}
         </Link>
-        <h1 className="text-3xl font-bold text-foreground mt-2">Détails de la tâche</h1>
+        <h1 className="text-3xl font-bold text-foreground mt-2">{t("jobDetail.title")}</h1>
       </div>
 
       {/* Summary banner — completed */}
@@ -199,24 +203,24 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
           <div className="text-sm text-success">
-            <span className="font-semibold">Terminé en {formatDuration(job.started_at, job.finished_at)}</span>
+            <span className="font-semibold">{t("jobDetail.completedIn", { duration: formatDuration(job.started_at, job.finished_at) })}</span>
             {isMetadataBatch && batchReport && (
               <span className="ml-2 text-success/80">
-                — {batchReport.auto_matched} auto-associées, {batchReport.already_linked} déjà liées, {batchReport.no_results} aucun résultat, {batchReport.errors} erreurs
+                — {batchReport.auto_matched} {t("jobDetail.autoMatched").toLowerCase()}, {batchReport.already_linked} {t("jobDetail.alreadyLinked").toLowerCase()}, {batchReport.no_results} {t("jobDetail.noResults").toLowerCase()}, {batchReport.errors} {t("jobDetail.errors").toLowerCase()}
               </span>
             )}
             {!isMetadataBatch && job.stats_json && (
               <span className="ml-2 text-success/80">
-                — {job.stats_json.scanned_files} scannés, {job.stats_json.indexed_files} indexés
-                {job.stats_json.removed_files > 0 && `, ${job.stats_json.removed_files} supprimés`}
-                {(job.stats_json.warnings ?? 0) > 0 && `, ${job.stats_json.warnings} avertissements`}
-                {job.stats_json.errors > 0 && `, ${job.stats_json.errors} erreurs`}
-                {job.total_files != null && job.total_files > 0 && `, ${job.total_files} miniatures`}
+                — {job.stats_json.scanned_files} {t("jobDetail.scanned").toLowerCase()}, {job.stats_json.indexed_files} {t("jobDetail.indexed").toLowerCase()}
+                {job.stats_json.removed_files > 0 && `, ${job.stats_json.removed_files} ${t("jobDetail.removed").toLowerCase()}`}
+                {(job.stats_json.warnings ?? 0) > 0 && `, ${job.stats_json.warnings} ${t("jobDetail.warnings").toLowerCase()}`}
+                {job.stats_json.errors > 0 && `, ${job.stats_json.errors} ${t("jobDetail.errors").toLowerCase()}`}
+                {job.total_files != null && job.total_files > 0 && `, ${job.total_files} ${t("jobType.thumbnail_rebuild").toLowerCase()}`}
               </span>
             )}
             {!isMetadataBatch && !job.stats_json && isThumbnailOnly && job.total_files != null && (
               <span className="ml-2 text-success/80">
-                — {job.processed_files ?? job.total_files} miniatures générées
+                — {job.processed_files ?? job.total_files} {t("jobDetail.generated").toLowerCase()}
               </span>
             )}
           </div>
@@ -230,9 +234,9 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
           <div className="text-sm text-destructive">
-            <span className="font-semibold">Tâche échouée</span>
+            <span className="font-semibold">{t("jobDetail.jobFailed")}</span>
             {job.started_at && (
-              <span className="ml-2 text-destructive/80">après {formatDuration(job.started_at, job.finished_at)}</span>
+              <span className="ml-2 text-destructive/80">{t("jobDetail.failedAfter", { duration: formatDuration(job.started_at, job.finished_at) })}</span>
             )}
             {job.error_opt && (
               <p className="mt-1 text-destructive/70 font-mono text-xs break-all">{job.error_opt}</p>
@@ -248,9 +252,9 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
           </svg>
           <span className="text-sm text-muted-foreground">
-            <span className="font-semibold">Annulé</span>
+            <span className="font-semibold">{t("jobDetail.cancelled")}</span>
             {job.started_at && (
-              <span className="ml-2">après {formatDuration(job.started_at, job.finished_at)}</span>
+              <span className="ml-2">{t("jobDetail.failedAfter", { duration: formatDuration(job.started_at, job.finished_at) })}</span>
             )}
           </span>
         </div>
@@ -260,7 +264,7 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
         {/* Overview Card */}
         <Card>
           <CardHeader>
-            <CardTitle>Aperçu</CardTitle>
+            <CardTitle>{t("jobDetail.overview")}</CardTitle>
             {typeInfo.description && (
               <CardDescription>{typeInfo.description}</CardDescription>
             )}
@@ -271,23 +275,23 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
               <code className="px-2 py-1 bg-muted rounded font-mono text-sm text-foreground">{job.id}</code>
             </div>
             <div className="flex items-center justify-between py-2 border-b border-border/60">
-              <span className="text-sm text-muted-foreground">Type</span>
+              <span className="text-sm text-muted-foreground">{t("jobsList.type")}</span>
               <div className="flex items-center gap-2">
                 <JobTypeBadge type={job.type} />
                 <span className="text-sm text-muted-foreground">{typeInfo.label}</span>
               </div>
             </div>
             <div className="flex items-center justify-between py-2 border-b border-border/60">
-              <span className="text-sm text-muted-foreground">Statut</span>
+              <span className="text-sm text-muted-foreground">{t("jobsList.status")}</span>
               <StatusBadge status={job.status} />
             </div>
             <div className={`flex items-center justify-between py-2 ${(job.book_id || job.started_at) ? "border-b border-border/60" : ""}`}>
-              <span className="text-sm text-muted-foreground">Bibliothèque</span>
-              <span className="text-sm text-foreground">{job.library_id || "Toutes les bibliothèques"}</span>
+              <span className="text-sm text-muted-foreground">{t("jobDetail.library")}</span>
+              <span className="text-sm text-foreground">{job.library_id || t("jobDetail.allLibraries")}</span>
             </div>
             {job.book_id && (
               <div className={`flex items-center justify-between py-2 ${job.started_at ? "border-b border-border/60" : ""}`}>
-                <span className="text-sm text-muted-foreground">Livre</span>
+                <span className="text-sm text-muted-foreground">{t("jobDetail.book")}</span>
                 <Link
                   href={`/books/${job.book_id}`}
                   className="text-sm text-primary hover:text-primary/80 font-mono hover:underline"
@@ -298,7 +302,7 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
             )}
             {job.started_at && (
               <div className="flex items-center justify-between py-2">
-                <span className="text-sm text-muted-foreground">Durée</span>
+                <span className="text-sm text-muted-foreground">{t("jobsList.duration")}</span>
                 <span className="text-sm font-semibold text-foreground">
                   {formatDuration(job.started_at, job.finished_at)}
                 </span>
@@ -310,7 +314,7 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
         {/* Timeline Card */}
         <Card>
           <CardHeader>
-            <CardTitle>Chronologie</CardTitle>
+            <CardTitle>{t("jobDetail.timeline")}</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="relative">
@@ -322,8 +326,8 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
                 <div className="flex items-start gap-4">
                   <div className="w-3.5 h-3.5 rounded-full mt-0.5 bg-muted border-2 border-border shrink-0 z-10" />
                   <div className="flex-1 min-w-0">
-                    <span className="text-sm font-medium text-foreground">Créé</span>
-                    <p className="text-xs text-muted-foreground">{new Date(job.created_at).toLocaleString()}</p>
+                    <span className="text-sm font-medium text-foreground">{t("jobDetail.created")}</span>
+                    <p className="text-xs text-muted-foreground">{new Date(job.created_at).toLocaleString(locale)}</p>
                   </div>
                 </div>
 
@@ -332,15 +336,15 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
                   <div className="flex items-start gap-4">
                     <div className="w-3.5 h-3.5 rounded-full mt-0.5 bg-primary shrink-0 z-10" />
                     <div className="flex-1 min-w-0">
-                      <span className="text-sm font-medium text-foreground">Phase 1 — Découverte</span>
-                      <p className="text-xs text-muted-foreground">{new Date(job.started_at).toLocaleString()}</p>
+                      <span className="text-sm font-medium text-foreground">{t("jobDetail.phase1")}</span>
+                      <p className="text-xs text-muted-foreground">{new Date(job.started_at).toLocaleString(locale)}</p>
                       <p className="text-xs text-primary/80 font-medium mt-0.5">
-                        Durée : {formatDuration(job.started_at, job.phase2_started_at)}
+                        {t("jobDetail.duration", { duration: formatDuration(job.started_at, job.phase2_started_at) })}
                         {job.stats_json && (
                           <span className="text-muted-foreground font-normal ml-1">
-                            · {job.stats_json.scanned_files} scannés, {job.stats_json.indexed_files} indexés
-                            {job.stats_json.removed_files > 0 && `, ${job.stats_json.removed_files} supprimés`}
-                            {(job.stats_json.warnings ?? 0) > 0 && `, ${job.stats_json.warnings} avert.`}
+                            · {job.stats_json.scanned_files} {t("jobDetail.scanned").toLowerCase()}, {job.stats_json.indexed_files} {t("jobDetail.indexed").toLowerCase()}
+                            {job.stats_json.removed_files > 0 && `, ${job.stats_json.removed_files} ${t("jobDetail.removed").toLowerCase()}`}
+                            {(job.stats_json.warnings ?? 0) > 0 && `, ${job.stats_json.warnings} ${t("jobDetail.warnings").toLowerCase()}`}
                           </span>
                         )}
                       </p>
@@ -355,12 +359,12 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
                       job.generating_thumbnails_started_at || job.finished_at ? "bg-primary" : "bg-primary animate-pulse"
                     }`} />
                     <div className="flex-1 min-w-0">
-                      <span className="text-sm font-medium text-foreground">Phase 2a — Extraction des pages</span>
-                      <p className="text-xs text-muted-foreground">{new Date(job.phase2_started_at).toLocaleString()}</p>
+                      <span className="text-sm font-medium text-foreground">{t("jobDetail.phase2a")}</span>
+                      <p className="text-xs text-muted-foreground">{new Date(job.phase2_started_at).toLocaleString(locale)}</p>
                       <p className="text-xs text-primary/80 font-medium mt-0.5">
-                        Durée : {formatDuration(job.phase2_started_at, job.generating_thumbnails_started_at ?? job.finished_at ?? null)}
+                        {t("jobDetail.duration", { duration: formatDuration(job.phase2_started_at, job.generating_thumbnails_started_at ?? job.finished_at ?? null) })}
                         {!job.generating_thumbnails_started_at && !job.finished_at && isExtractingPages && (
-                          <span className="text-muted-foreground font-normal ml-1">· en cours</span>
+                          <span className="text-muted-foreground font-normal ml-1">· {t("jobDetail.inProgress")}</span>
                         )}
                       </p>
                     </div>
@@ -375,26 +379,26 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
                     }`} />
                     <div className="flex-1 min-w-0">
                       <span className="text-sm font-medium text-foreground">
-                        {isThumbnailOnly ? "Miniatures" : "Phase 2b — Génération des miniatures"}
+                        {isThumbnailOnly ? t("jobType.thumbnail_rebuild") : t("jobDetail.phase2b")}
                       </span>
                       <p className="text-xs text-muted-foreground">
-                        {(job.generating_thumbnails_started_at ? new Date(job.generating_thumbnails_started_at) : job.phase2_started_at ? new Date(job.phase2_started_at) : null)?.toLocaleString()}
+                        {(job.generating_thumbnails_started_at ? new Date(job.generating_thumbnails_started_at) : job.phase2_started_at ? new Date(job.phase2_started_at) : null)?.toLocaleString(locale)}
                       </p>
                       {(job.generating_thumbnails_started_at || job.finished_at) && (
                         <p className="text-xs text-primary/80 font-medium mt-0.5">
-                          Durée : {formatDuration(
+                          {t("jobDetail.duration", { duration: formatDuration(
                             job.generating_thumbnails_started_at ?? job.phase2_started_at!,
                             job.finished_at ?? null
-                          )}
+                          ) })}
                           {job.total_files != null && job.total_files > 0 && (
                             <span className="text-muted-foreground font-normal ml-1">
-                              · {job.processed_files ?? job.total_files} miniatures
+                              · {job.processed_files ?? job.total_files} {t("jobType.thumbnail_rebuild").toLowerCase()}
                             </span>
                           )}
                         </p>
                       )}
                       {!job.finished_at && isThumbnailPhase && (
-                        <span className="text-xs text-muted-foreground">en cours</span>
+                        <span className="text-xs text-muted-foreground">{t("jobDetail.inProgress")}</span>
                       )}
                     </div>
                   </div>
@@ -407,8 +411,8 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
                       job.finished_at ? "bg-primary" : "bg-primary animate-pulse"
                     }`} />
                     <div className="flex-1 min-w-0">
-                      <span className="text-sm font-medium text-foreground">Démarré</span>
-                      <p className="text-xs text-muted-foreground">{new Date(job.started_at).toLocaleString()}</p>
+                      <span className="text-sm font-medium text-foreground">{t("jobDetail.started")}</span>
+                      <p className="text-xs text-muted-foreground">{new Date(job.started_at).toLocaleString(locale)}</p>
                     </div>
                   </div>
                 )}
@@ -418,7 +422,7 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
                   <div className="flex items-start gap-4">
                     <div className="w-3.5 h-3.5 rounded-full mt-0.5 bg-warning shrink-0 z-10" />
                     <div className="flex-1 min-w-0">
-                      <span className="text-sm font-medium text-foreground">En attente de démarrage…</span>
+                      <span className="text-sm font-medium text-foreground">{t("jobDetail.pendingStart")}</span>
                     </div>
                   </div>
                 )}
@@ -431,9 +435,9 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
                     }`} />
                     <div className="flex-1 min-w-0">
                       <span className="text-sm font-medium text-foreground">
-                        {isCompleted ? "Terminé" : isFailed ? "Échoué" : "Annulé"}
+                        {isCompleted ? t("jobDetail.finished") : isFailed ? t("jobDetail.failed") : t("jobDetail.cancelled")}
                       </span>
-                      <p className="text-xs text-muted-foreground">{new Date(job.finished_at).toLocaleString()}</p>
+                      <p className="text-xs text-muted-foreground">{new Date(job.finished_at).toLocaleString(locale)}</p>
                     </div>
                   </div>
                 )}
@@ -456,13 +460,13 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
                   <div className="grid grid-cols-3 gap-4">
                     <StatBox
                       value={job.processed_files ?? 0}
-                      label={isThumbnailOnly || isPhase2 ? "Générés" : "Traités"}
+                      label={isThumbnailOnly || isPhase2 ? t("jobDetail.generated") : t("jobDetail.processed")}
                       variant="primary"
                     />
-                    <StatBox value={job.total_files} label="Total" />
+                    <StatBox value={job.total_files} label={t("jobDetail.total")} />
                     <StatBox
                       value={Math.max(0, job.total_files - (job.processed_files ?? 0))}
-                      label="Restants"
+                      label={t("jobDetail.remaining")}
                       variant={isCompleted ? "default" : "warning"}
                     />
                   </div>
@@ -470,7 +474,7 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
               )}
               {job.current_file && (
                 <div className="mt-4 p-3 bg-muted/50 rounded-lg">
-                  <span className="text-xs text-muted-foreground uppercase tracking-wide">Fichier en cours</span>
+                  <span className="text-xs text-muted-foreground uppercase tracking-wide">{t("jobDetail.currentFile")}</span>
                   <code className="block mt-1 text-xs font-mono text-foreground break-all">{job.current_file}</code>
                 </div>
               )}
@@ -482,7 +486,7 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
         {job.stats_json && !isThumbnailOnly && !isMetadataBatch && (
           <Card>
             <CardHeader>
-              <CardTitle>Statistiques d&apos;indexation</CardTitle>
+              <CardTitle>{t("jobDetail.indexStats")}</CardTitle>
               {job.started_at && (
                 <CardDescription>
                   {formatDuration(job.started_at, job.finished_at)}
@@ -492,11 +496,11 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
             </CardHeader>
             <CardContent>
               <div className="grid grid-cols-2 sm:grid-cols-5 gap-4">
-                <StatBox value={job.stats_json.scanned_files} label="Scannés" variant="success" />
-                <StatBox value={job.stats_json.indexed_files} label="Indexés" variant="primary" />
-                <StatBox value={job.stats_json.removed_files} label="Supprimés" variant="warning" />
-                <StatBox value={job.stats_json.warnings ?? 0} label="Avertissements" variant={(job.stats_json.warnings ?? 0) > 0 ? "warning" : "default"} />
-                <StatBox value={job.stats_json.errors} label="Erreurs" variant={job.stats_json.errors > 0 ? "error" : "default"} />
+                <StatBox value={job.stats_json.scanned_files} label={t("jobDetail.scanned")} variant="success" />
+                <StatBox value={job.stats_json.indexed_files} label={t("jobDetail.indexed")} variant="primary" />
+                <StatBox value={job.stats_json.removed_files} label={t("jobDetail.removed")} variant="warning" />
+                <StatBox value={job.stats_json.warnings ?? 0} label={t("jobDetail.warnings")} variant={(job.stats_json.warnings ?? 0) > 0 ? "warning" : "default"} />
+                <StatBox value={job.stats_json.errors} label={t("jobDetail.errors")} variant={job.stats_json.errors > 0 ? "error" : "default"} />
               </div>
             </CardContent>
           </Card>
@@ -506,7 +510,7 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
         {isThumbnailOnly && isCompleted && job.total_files != null && (
           <Card>
             <CardHeader>
-              <CardTitle>Statistiques des miniatures</CardTitle>
+              <CardTitle>{t("jobDetail.thumbnailStats")}</CardTitle>
               {job.started_at && (
                 <CardDescription>
                   {formatDuration(job.started_at, job.finished_at)}
@@ -516,8 +520,8 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
             </CardHeader>
             <CardContent>
               <div className="grid grid-cols-2 gap-4">
-                <StatBox value={job.processed_files ?? job.total_files} label="Générés" variant="success" />
-                <StatBox value={job.total_files} label="Total" />
+                <StatBox value={job.processed_files ?? job.total_files} label={t("jobDetail.generated")} variant="success" />
+                <StatBox value={job.total_files} label={t("jobDetail.total")} />
               </div>
             </CardContent>
           </Card>
@@ -527,17 +531,17 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
         {isMetadataBatch && batchReport && (
           <Card>
             <CardHeader>
-              <CardTitle>Rapport du lot</CardTitle>
-              <CardDescription>{batchReport.total_series} séries analysées</CardDescription>
+              <CardTitle>{t("jobDetail.batchReport")}</CardTitle>
+              <CardDescription>{t("jobDetail.seriesAnalyzed", { count: String(batchReport.total_series) })}</CardDescription>
             </CardHeader>
             <CardContent>
               <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
-                <StatBox value={batchReport.auto_matched} label="Auto-associé" variant="success" />
-                <StatBox value={batchReport.already_linked} label="Déjà lié" variant="primary" />
-                <StatBox value={batchReport.no_results} label="Aucun résultat" />
-                <StatBox value={batchReport.too_many_results} label="Trop de résultats" variant="warning" />
-                <StatBox value={batchReport.low_confidence} label="Confiance faible" variant="warning" />
-                <StatBox value={batchReport.errors} label="Erreurs" variant={batchReport.errors > 0 ? "error" : "default"} />
+                <StatBox value={batchReport.auto_matched} label={t("jobDetail.autoMatched")} variant="success" />
+                <StatBox value={batchReport.already_linked} label={t("jobDetail.alreadyLinked")} variant="primary" />
+                <StatBox value={batchReport.no_results} label={t("jobDetail.noResults")} />
+                <StatBox value={batchReport.too_many_results} label={t("jobDetail.tooManyResults")} variant="warning" />
+                <StatBox value={batchReport.low_confidence} label={t("jobDetail.lowConfidence")} variant="warning" />
+                <StatBox value={batchReport.errors} label={t("jobDetail.errors")} variant={batchReport.errors > 0 ? "error" : "default"} />
               </div>
             </CardContent>
           </Card>
@@ -547,8 +551,8 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
         {isMetadataBatch && batchResults.length > 0 && (
           <Card className="lg:col-span-2">
             <CardHeader>
-              <CardTitle>Résultats par série</CardTitle>
-              <CardDescription>{batchResults.length} séries traitées</CardDescription>
+              <CardTitle>{t("jobDetail.resultsBySeries")}</CardTitle>
+              <CardDescription>{t("jobDetail.seriesProcessed", { count: String(batchResults.length) })}</CardDescription>
             </CardHeader>
             <CardContent className="space-y-2 max-h-[600px] overflow-y-auto">
               {batchResults.map((r) => (
@@ -572,29 +576,29 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
                       r.status === "error" ? "bg-destructive/20 text-destructive" :
                       "bg-muted text-muted-foreground"
                     }`}>
-                      {r.status === "auto_matched" ? "Auto-associé" :
-                       r.status === "already_linked" ? "Déjà lié" :
-                       r.status === "no_results" ? "Aucun résultat" :
-                       r.status === "too_many_results" ? "Trop de résultats" :
-                       r.status === "low_confidence" ? "Confiance faible" :
-                       r.status === "error" ? "Erreur" :
+                      {r.status === "auto_matched" ? t("jobDetail.autoMatched") :
+                       r.status === "already_linked" ? t("jobDetail.alreadyLinked") :
+                       r.status === "no_results" ? t("jobDetail.noResults") :
+                       r.status === "too_many_results" ? t("jobDetail.tooManyResults") :
+                       r.status === "low_confidence" ? t("jobDetail.lowConfidence") :
+                       r.status === "error" ? t("common.error") :
                        r.status}
                     </span>
                   </div>
                   <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
                     {r.provider_used && (
-                      <span>{r.provider_used}{r.fallback_used ? " (secours)" : ""}</span>
+                      <span>{r.provider_used}{r.fallback_used ? ` ${t("metadata.fallbackUsed")}` : ""}</span>
                     )}
                     {r.candidates_count > 0 && (
-                      <span>{r.candidates_count} candidat{r.candidates_count > 1 ? "s" : ""}</span>
+                      <span>{r.candidates_count} {t("jobDetail.candidates", { plural: r.candidates_count > 1 ? "s" : "" })}</span>
                     )}
                     {r.best_confidence != null && (
-                      <span>{Math.round(r.best_confidence * 100)}% confiance</span>
+                      <span>{Math.round(r.best_confidence * 100)}% {t("jobDetail.confidence")}</span>
                     )}
                   </div>
                   {r.best_candidate_json && (
                     <p className="text-xs text-muted-foreground mt-1">
-                      Correspondance : {(r.best_candidate_json as { title?: string }).title || r.best_candidate_json.toString()}
+                      {t("jobDetail.match", { title: (r.best_candidate_json as { title?: string }).title || r.best_candidate_json.toString() })}
                     </p>
                   )}
                   {r.error_message && (
@@ -610,15 +614,15 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
         {errors.length > 0 && (
           <Card className="lg:col-span-2">
             <CardHeader>
-              <CardTitle>Erreurs de fichiers ({errors.length})</CardTitle>
-              <CardDescription>Erreurs rencontrées lors du traitement des fichiers</CardDescription>
+              <CardTitle>{t("jobDetail.fileErrors", { count: String(errors.length) })}</CardTitle>
+              <CardDescription>{t("jobDetail.fileErrorsDesc")}</CardDescription>
             </CardHeader>
             <CardContent className="space-y-2 max-h-80 overflow-y-auto">
               {errors.map((error) => (
                 <div key={error.id} className="p-3 bg-destructive/10 rounded-lg border border-destructive/20">
                   <code className="block text-sm font-mono text-destructive mb-1">{error.file_path}</code>
                   <p className="text-sm text-destructive/80">{error.error_message}</p>
-                  <span className="text-xs text-muted-foreground">{new Date(error.created_at).toLocaleString()}</span>
+                  <span className="text-xs text-muted-foreground">{new Date(error.created_at).toLocaleString(locale)}</span>
                 </div>
               ))}
             </CardContent>

apps/backoffice/app/jobs/page.tsx

@@ -3,11 +3,13 @@ import { redirect } from "next/navigation";
 import { listJobs, fetchLibraries, rebuildIndex, rebuildThumbnails, regenerateThumbnails, startMetadataBatch, IndexJobDto, LibraryDto } from "../../lib/api";
 import { JobsList } from "../components/JobsList";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button, FormField, FormSelect, FormRow } from "../components/ui";
+import { getServerTranslations } from "../../lib/i18n/server";
 
 export const dynamic = "force-dynamic";
 
 export default async function JobsPage({ searchParams }: { searchParams: Promise<{ highlight?: string }> }) {
   const { highlight } = await searchParams;
+  const { t } = await getServerTranslations();
   const [jobs, libraries] = await Promise.all([
     listJobs().catch(() => [] as IndexJobDto[]),
     fetchLibraries().catch(() => [] as LibraryDto[])
@@ -63,21 +65,21 @@ export default async function JobsPage({ searchParams }: { searchParams: Promise
           <svg className="w-8 h-8 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
           </svg>
-          Tâches d&apos;indexation
+          {t("jobs.title")}
         </h1>
       </div>
 
       <Card className="mb-6">
         <CardHeader>
-          <CardTitle>Lancer une tâche</CardTitle>
-          <CardDescription>Sélectionnez une bibliothèque (ou toutes) et choisissez l&apos;action à effectuer.</CardDescription>
+          <CardTitle>{t("jobs.startJob")}</CardTitle>
+          <CardDescription>{t("jobs.startJobDescription")}</CardDescription>
         </CardHeader>
         <CardContent>
           <form>
             <FormRow>
               <FormField className="flex-1 max-w-xs">
                 <FormSelect name="library_id" defaultValue="">
-                  <option value="">Toutes les bibliothèques</option>
+                  <option value="">{t("jobs.allLibraries")}</option>
                   {libraries.map((lib) => (
                     <option key={lib.id} value={lib.id}>{lib.name}</option>
                   ))}
@@ -88,31 +90,31 @@ export default async function JobsPage({ searchParams }: { searchParams: Promise
                   <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                   </svg>
-                  Reconstruction
+                  {t("jobs.rebuild")}
                 </Button>
                 <Button type="submit" formAction={triggerFullRebuild} variant="warning">
                   <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                   </svg>
-                  Reconstruction complète
+                  {t("jobs.fullRebuild")}
                 </Button>
                 <Button type="submit" formAction={triggerThumbnailsRebuild} variant="secondary">
                   <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                   </svg>
-                  Générer les miniatures
+                  {t("jobs.generateThumbnails")}
                 </Button>
                 <Button type="submit" formAction={triggerThumbnailsRegenerate} variant="warning">
                   <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                   </svg>
-                  Regénérer les miniatures
+                  {t("jobs.regenerateThumbnails")}
                 </Button>
                 <Button type="submit" formAction={triggerMetadataBatch} variant="secondary">
                   <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                   </svg>
-                  Métadonnées en lot
+                  {t("jobs.batchMetadata")}
                 </Button>
               </div>
             </FormRow>
@@ -123,7 +125,7 @@ export default async function JobsPage({ searchParams }: { searchParams: Promise
       {/* Job types legend */}
       <Card className="mb-6">
         <CardHeader>
-          <CardTitle className="text-base">Référence des types de tâches</CardTitle>
+          <CardTitle className="text-base">{t("jobs.referenceTitle")}</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
@@ -134,10 +136,8 @@ export default async function JobsPage({ searchParams }: { searchParams: Promise
                 </svg>
               </div>
               <div>
-                <span className="font-medium text-foreground">Reconstruction</span>
-                <p className="text-muted-foreground text-xs mt-0.5">
-                  Scan incr&eacute;mental : d&eacute;tecte les fichiers ajout&eacute;s, modifi&eacute;s ou supprim&eacute;s depuis le dernier scan, les indexe et g&eacute;n&egrave;re les miniatures manquantes. Les donn&eacute;es existantes non modifi&eacute;es sont conserv&eacute;es. C&rsquo;est l&rsquo;action la plus courante et la plus rapide.
-                </p>
+                <span className="font-medium text-foreground">{t("jobs.rebuild")}</span>
+                <p className="text-muted-foreground text-xs mt-0.5" dangerouslySetInnerHTML={{ __html: t("jobs.rebuildDescription") }} />
               </div>
             </div>
             <div className="flex gap-3">
@@ -147,10 +147,8 @@ export default async function JobsPage({ searchParams }: { searchParams: Promise
                 </svg>
               </div>
               <div>
-                <span className="font-medium text-foreground">Reconstruction complète</span>
-                <p className="text-muted-foreground text-xs mt-0.5">
-                  Supprime toutes les donn&eacute;es index&eacute;es (livres, s&eacute;ries, miniatures) puis effectue un scan complet depuis z&eacute;ro. Utile si la base de donn&eacute;es est d&eacute;synchronis&eacute;e ou corrompue. Op&eacute;ration longue et destructive : les statuts de lecture et les m&eacute;tadonn&eacute;es manuelles seront perdus.
-                </p>
+                <span className="font-medium text-foreground">{t("jobs.fullRebuild")}</span>
+                <p className="text-muted-foreground text-xs mt-0.5" dangerouslySetInnerHTML={{ __html: t("jobs.fullRebuildDescription") }} />
               </div>
             </div>
             <div className="flex gap-3">
@@ -160,10 +158,8 @@ export default async function JobsPage({ searchParams }: { searchParams: Promise
                 </svg>
               </div>
               <div>
-                <span className="font-medium text-foreground">Générer les miniatures</span>
-                <p className="text-muted-foreground text-xs mt-0.5">
-                  G&eacute;n&egrave;re les miniatures uniquement pour les livres qui n&rsquo;en ont pas encore. Les miniatures existantes ne sont pas touch&eacute;es. Utile apr&egrave;s un import ou si certaines miniatures sont manquantes.
-                </p>
+                <span className="font-medium text-foreground">{t("jobs.generateThumbnails")}</span>
+                <p className="text-muted-foreground text-xs mt-0.5" dangerouslySetInnerHTML={{ __html: t("jobs.generateThumbnailsDescription") }} />
               </div>
             </div>
             <div className="flex gap-3">
@@ -173,10 +169,8 @@ export default async function JobsPage({ searchParams }: { searchParams: Promise
                 </svg>
               </div>
               <div>
-                <span className="font-medium text-foreground">Regénérer les miniatures</span>
-                <p className="text-muted-foreground text-xs mt-0.5">
-                  Reg&eacute;n&egrave;re toutes les miniatures depuis z&eacute;ro, en rempla&ccedil;ant les existantes. Utile si la qualit&eacute; ou la taille des miniatures a chang&eacute; dans la configuration, ou si des miniatures sont corrompues.
-                </p>
+                <span className="font-medium text-foreground">{t("jobs.regenerateThumbnails")}</span>
+                <p className="text-muted-foreground text-xs mt-0.5" dangerouslySetInnerHTML={{ __html: t("jobs.regenerateThumbnailsDescription") }} />
               </div>
             </div>
             <div className="flex gap-3">
@@ -186,10 +180,8 @@ export default async function JobsPage({ searchParams }: { searchParams: Promise
                 </svg>
               </div>
               <div>
-                <span className="font-medium text-foreground">Métadonnées en lot</span>
-                <p className="text-muted-foreground text-xs mt-0.5">
-                  Recherche automatiquement les m&eacute;tadonn&eacute;es de chaque s&eacute;rie de la biblioth&egrave;que aupr&egrave;s du provider configur&eacute; (avec fallback si configur&eacute;). Seuls les r&eacute;sultats avec un match unique &agrave; 100% de confiance sont appliqu&eacute;s automatiquement. Les s&eacute;ries d&eacute;j&agrave; li&eacute;es sont ignor&eacute;es. Un rapport d&eacute;taill&eacute; par s&eacute;rie est disponible &agrave; la fin du job. <strong>Requiert une biblioth&egrave;que sp&eacute;cifique</strong> (ne fonctionne pas sur &laquo; Toutes les bibliothèques &raquo;).
-                </p>
+                <span className="font-medium text-foreground">{t("jobs.batchMetadata")}</span>
+                <p className="text-muted-foreground text-xs mt-0.5" dangerouslySetInnerHTML={{ __html: t("jobs.batchMetadataDescription") }} />
               </div>
             </div>
           </div>

apps/backoffice/app/layout.tsx

@@ -8,6 +8,9 @@ import { ThemeToggle } from "./theme-toggle";
 import { JobsIndicator } from "./components/JobsIndicator";
 import { NavIcon, Icon } from "./components/ui";
 import { MobileNav } from "./components/MobileNav";
+import { LocaleProvider } from "../lib/i18n/context";
+import { getServerLocale, getServerTranslations } from "../lib/i18n/server";
+import type { TranslationKey } from "../lib/i18n/fr";
 
 export const metadata: Metadata = {
   title: "StripStream Backoffice",
@@ -16,37 +19,41 @@ export const metadata: Metadata = {
 
 type NavItem = {
   href: "/" | "/books" | "/series" | "/libraries" | "/jobs" | "/tokens" | "/settings";
-  label: string;
+  labelKey: TranslationKey;
   icon: "dashboard" | "books" | "series" | "libraries" | "jobs" | "tokens" | "settings";
 };
 
 const navItems: NavItem[] = [
-  { href: "/", label: "Tableau de bord", icon: "dashboard" },
-  { href: "/books", label: "Livres", icon: "books" },
-  { href: "/series", label: "Séries", icon: "series" },
-  { href: "/libraries", label: "Bibliothèques", icon: "libraries" },
-  { href: "/jobs", label: "Tâches", icon: "jobs" },
-  { href: "/tokens", label: "Jetons", icon: "tokens" },
+  { href: "/", labelKey: "nav.dashboard", icon: "dashboard" },
+  { href: "/books", labelKey: "nav.books", icon: "books" },
+  { href: "/series", labelKey: "nav.series", icon: "series" },
+  { href: "/libraries", labelKey: "nav.libraries", icon: "libraries" },
+  { href: "/jobs", labelKey: "nav.jobs", icon: "jobs" },
+  { href: "/tokens", labelKey: "nav.tokens", icon: "tokens" },
 ];
 
-export default function RootLayout({ children }: { children: ReactNode }) {
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  const locale = await getServerLocale();
+  const { t } = await getServerTranslations();
+
   return (
-    <html lang="fr" suppressHydrationWarning>
+    <html lang={locale} suppressHydrationWarning>
       <body className="min-h-screen bg-background text-foreground font-sans antialiased bg-grain">
         <ThemeProvider>
+          <LocaleProvider initialLocale={locale}>
           {/* Header avec effet glassmorphism */}
           <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/70 backdrop-blur-xl backdrop-saturate-150 supports-[backdrop-filter]:bg-background/60">
             <nav className="container mx-auto flex h-16 items-center justify-between px-4">
               {/* Brand */}
-              <Link 
-                href="/" 
+              <Link
+                href="/"
                 className="flex items-center gap-3 hover:opacity-80 transition-opacity duration-200"
               >
-                <Image 
-                  src="/logo.png" 
-                  alt="StripStream" 
-                  width={36} 
-                  height={36} 
+                <Image
+                  src="/logo.png"
+                  alt="StripStream"
+                  width={36}
+                  height={36}
                   className="rounded-lg"
                 />
                 <div className="flex items-baseline gap-2">
@@ -54,7 +61,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
                     StripStream
                   </span>
                   <span className="text-sm text-muted-foreground font-medium hidden md:inline">
-                    backoffice
+                    {t("common.backoffice")}
                   </span>
                 </div>
               </Link>
@@ -63,9 +70,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
               <div className="flex items-center gap-2">
                 <div className="hidden md:flex items-center gap-1">
                   {navItems.map((item) => (
-                    <NavLink key={item.href} href={item.href} title={item.label}>
+                    <NavLink key={item.href} href={item.href} title={t(item.labelKey)}>
                       <NavIcon name={item.icon} />
-                      <span className="ml-2 hidden lg:inline">{item.label}</span>
+                      <span className="ml-2 hidden lg:inline">{t(item.labelKey)}</span>
                     </NavLink>
                   ))}
                 </div>
@@ -76,12 +83,12 @@ export default function RootLayout({ children }: { children: ReactNode }) {
                   <Link
                     href="/settings"
                     className="hidden md:flex p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
-                    title="Paramètres"
+                    title={t("nav.settings")}
                   >
                     <Icon name="settings" size="md" />
                   </Link>
                   <ThemeToggle />
-                  <MobileNav navItems={navItems} />
+                  <MobileNav navItems={navItems.map(item => ({ ...item, label: t(item.labelKey) }))} />
                 </div>
               </div>
             </nav>
@@ -91,6 +98,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 pb-16">
             {children}
           </main>
+          </LocaleProvider>
         </ThemeProvider>
       </body>
     </html>

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

@@ -3,6 +3,7 @@ import { BooksGrid, EmptyState } from "../../../components/BookCard";
 import { LibrarySubPageHeader } from "../../../components/LibrarySubPageHeader";
 import { OffsetPagination } from "../../../components/ui";
 import { notFound } from "next/navigation";
+import { getServerTranslations } from "../../../../lib/i18n/server";
 
 export const dynamic = "force-dynamic";
 
@@ -14,6 +15,7 @@ export default async function LibraryBooksPage({
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   const { id } = await params;
+  const { t } = await getServerTranslations();
   const searchParamsAwaited = await searchParams;
   const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
   const series = typeof searchParamsAwaited.series === "string" ? searchParamsAwaited.series : undefined;
@@ -38,14 +40,14 @@ export default async function LibraryBooksPage({
     coverUrl: getBookCoverUrl(book.id)
   }));
 
-  const seriesDisplayName = series === "unclassified" ? "Non classé" : series;
+  const seriesDisplayName = series === "unclassified" ? t("books.unclassified") : (series ?? "");
   const totalPages = Math.ceil(booksPage.total / limit);
 
   return (
     <div className="space-y-6">
       <LibrarySubPageHeader
         library={library}
-        title={series ? `Livres de "${seriesDisplayName}"` : "Tous les livres"}
+        title={series ? t("libraryBooks.booksOfSeries", { series: seriesDisplayName }) : t("libraryBooks.allBooks")}
         icon={
           <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" />
@@ -53,9 +55,9 @@ export default async function LibraryBooksPage({
         }
         iconColor="text-success"
         filterInfo={series ? {
-          label: `Livres de la série "${seriesDisplayName}"`,
+          label: t("libraryBooks.filterLabel", { series: seriesDisplayName }),
           clearHref: `/libraries/${id}/books`,
-          clearLabel: "Voir tous les livres"
+          clearLabel: t("libraryBooks.viewAll")
         } : undefined}
       />
 
@@ -71,7 +73,7 @@ export default async function LibraryBooksPage({
           />
         </>
       ) : (
-        <EmptyState message={series ? `Aucun livre dans la série "${seriesDisplayName}"` : "Aucun livre dans cette bibliothèque"} />
+        <EmptyState message={series ? t("libraryBooks.noBooksInSeries", { series: seriesDisplayName }) : t("libraryBooks.noBooks")} />
       )}
     </div>
   );

apps/backoffice/app/libraries/[id]/series/[name]/page.tsx

@@ -9,6 +9,7 @@ import { SafeHtml } from "../../../../components/SafeHtml";
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import { getServerTranslations } from "../../../../../lib/i18n/server";
 
 export const dynamic = "force-dynamic";
 
@@ -20,6 +21,7 @@ export default async function SeriesDetailPage({
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   const { id, name } = await params;
+  const { t } = await getServerTranslations();
   const searchParamsAwaited = await searchParams;
   const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
   const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 50;
@@ -55,7 +57,7 @@ export default async function SeriesDetailPage({
 
   const totalPages = Math.ceil(booksPage.total / limit);
   const booksReadCount = booksPage.items.filter((b) => b.reading_status === "read").length;
-  const displayName = seriesName === "unclassified" ? "Non classé" : seriesName;
+  const displayName = seriesName === "unclassified" ? t("books.unclassified") : seriesName;
 
   // Use first book cover as series cover
   const coverBookId = booksPage.items[0]?.id;
@@ -68,7 +70,7 @@ export default async function SeriesDetailPage({
           href="/libraries"
           className="text-muted-foreground hover:text-primary transition-colors"
         >
-          Bibliothèques
+          {t("nav.libraries")}
         </Link>
         <span className="text-muted-foreground">/</span>
         <Link
@@ -88,7 +90,7 @@ export default async function SeriesDetailPage({
             <div className="w-40 aspect-[2/3] relative rounded-xl overflow-hidden shadow-card border border-border">
               <Image
                 src={getBookCoverUrl(coverBookId)}
-                alt={`Couverture de ${displayName}`}
+                alt={t("books.coverOf", { name: displayName })}
                 fill
                 className="object-cover"
                 unoptimized
@@ -112,12 +114,7 @@ export default async function SeriesDetailPage({
                 seriesMeta.status === "cancelled" ? "bg-red-500/15 text-red-600" :
                 "bg-muted text-muted-foreground"
               }`}>
-                {seriesMeta.status === "ongoing" ? "En cours" :
-                 seriesMeta.status === "ended" ? "Terminée" :
-                 seriesMeta.status === "hiatus" ? "Hiatus" :
-                 seriesMeta.status === "cancelled" ? "Annulée" :
-                 seriesMeta.status === "upcoming" ? "À paraître" :
-                 seriesMeta.status}
+                {t(`seriesStatus.${seriesMeta.status}` as any) || seriesMeta.status}
               </span>
             )}
           </div>
@@ -137,11 +134,11 @@ export default async function SeriesDetailPage({
             )}
             {((seriesMeta && seriesMeta.publishers.length > 0) || seriesMeta?.start_year) && <span className="w-px h-4 bg-border" />}
             <span className="text-muted-foreground">
-              <span className="font-semibold text-foreground">{booksPage.total}</span> livre{booksPage.total !== 1 ? "s" : ""}
+              <span className="font-semibold text-foreground">{booksPage.total}</span> {t("dashboard.books").toLowerCase()}
             </span>
             <span className="w-px h-4 bg-border" />
             <span className="text-muted-foreground">
-              <span className="font-semibold text-foreground">{booksReadCount}</span>/{booksPage.total} lu{booksPage.total !== 1 ? "s" : ""}
+              {t("series.readCount", { read: String(booksReadCount), total: String(booksPage.total) })}
             </span>
 
             {/* Progress bar */}
@@ -196,7 +193,7 @@ export default async function SeriesDetailPage({
           />
         </>
       ) : (
-        <EmptyState message="Aucun livre dans cette série" />
+        <EmptyState message={t("librarySeries.noBooksInSeries")} />
       )}
     </div>
   );

apps/backoffice/app/libraries/[id]/series/page.tsx

@@ -6,6 +6,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { LibrarySubPageHeader } from "../../../components/LibrarySubPageHeader";
+import { getServerTranslations } from "../../../../lib/i18n/server";
 
 export const dynamic = "force-dynamic";
 
@@ -17,6 +18,7 @@ export default async function LibrarySeriesPage({
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   const { id } = await params;
+  const { t } = await getServerTranslations();
   const searchParamsAwaited = await searchParams;
   const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
   const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
@@ -37,14 +39,14 @@ export default async function LibrarySeriesPage({
   const totalPages = Math.ceil(seriesPage.total / limit);
 
   const KNOWN_STATUSES: Record<string, string> = {
-    ongoing: "En cours",
-    ended: "Terminée",
-    hiatus: "Hiatus",
-    cancelled: "Annulée",
-    upcoming: "À paraître",
+    ongoing: t("seriesStatus.ongoing"),
+    ended: t("seriesStatus.ended"),
+    hiatus: t("seriesStatus.hiatus"),
+    cancelled: t("seriesStatus.cancelled"),
+    upcoming: t("seriesStatus.upcoming"),
   };
   const seriesStatusOptions = [
-    { value: "", label: "Tous les statuts" },
+    { value: "", label: t("seriesStatus.allStatuses") },
     ...dbStatuses.map((s) => ({ value: s, label: KNOWN_STATUSES[s] || s })),
   ];
 
@@ -52,7 +54,7 @@ export default async function LibrarySeriesPage({
     <div className="space-y-6">
       <LibrarySubPageHeader
         library={library}
-        title="Séries"
+        title={t("series.title")}
         icon={
           <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
@@ -81,7 +83,7 @@ export default async function LibrarySeriesPage({
                   <div className="aspect-[2/3] relative bg-muted/50">
                     <Image
                       src={getBookCoverUrl(s.first_book_id)}
-                      alt={`Couverture de ${s.name}`}
+                      alt={t("books.coverOf", { name: s.name })}
                       fill
                       className="object-cover"
                       unoptimized
@@ -89,11 +91,11 @@ export default async function LibrarySeriesPage({
                   </div>
                   <div className="p-3">
                     <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
-                      {s.name === "unclassified" ? "Non classé" : s.name}
+                      {s.name === "unclassified" ? t("books.unclassified") : s.name}
                     </h3>
                     <div className="flex items-center justify-between mt-1">
                       <p className="text-xs text-muted-foreground">
-                        {s.books_read_count}/{s.book_count} lu{s.book_count !== 1 ? 's' : ''}
+                        {t("series.readCount", { read: String(s.books_read_count), total: String(s.book_count) })}
                       </p>
                       <MarkSeriesReadButton
                         seriesName={s.name}
@@ -110,17 +112,12 @@ export default async function LibrarySeriesPage({
                           s.series_status === "cancelled" ? "bg-red-500/15 text-red-600" :
                           "bg-muted text-muted-foreground"
                         }`}>
-                          {s.series_status === "ongoing" ? "En cours" :
-                           s.series_status === "ended" ? "Terminée" :
-                           s.series_status === "hiatus" ? "Hiatus" :
-                           s.series_status === "cancelled" ? "Annulée" :
-                           s.series_status === "upcoming" ? "À paraître" :
-                           s.series_status}
+                          {KNOWN_STATUSES[s.series_status] || s.series_status}
                         </span>
                       )}
                       {s.missing_count != null && s.missing_count > 0 && (
                         <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-yellow-500/15 text-yellow-600">
-                          {s.missing_count} manquant{s.missing_count > 1 ? "s" : ""}
+                          {t("series.missingCount", { count: String(s.missing_count) })}
                         </span>
                       )}
                     </div>
@@ -139,7 +136,7 @@ export default async function LibrarySeriesPage({
         </>
       ) : (
         <div className="text-center py-12 text-muted-foreground">
-          <p>Aucune série trouvée dans cette bibliothèque</p>
+          <p>{t("librarySeries.noSeries")}</p>
         </div>
       )}
     </div>

apps/backoffice/app/libraries/page.tsx

@@ -1,22 +1,23 @@
 import { revalidatePath } from "next/cache";
 import Link from "next/link";
 import { listFolders, createLibrary, deleteLibrary, fetchLibraries, fetchSeries, scanLibrary, startMetadataBatch, LibraryDto, FolderItem } from "../../lib/api";
+import { getServerTranslations } from "../../lib/i18n/server";
 import { LibraryActions } from "../components/LibraryActions";
 import { LibraryForm } from "../components/LibraryForm";
-import { 
+import {
   Card, CardHeader, CardTitle, CardDescription, CardContent,
   Button, Badge
 } from "../components/ui";
 
 export const dynamic = "force-dynamic";
 
-function formatNextScan(nextScanAt: string | null): string {
+function formatNextScan(nextScanAt: string | null, imminentLabel: string): string {
   if (!nextScanAt) return "-";
   const date = new Date(nextScanAt);
   const now = new Date();
   const diff = date.getTime() - now.getTime();
-  
-  if (diff < 0) return "Imminent";
+
+  if (diff < 0) return imminentLabel;
   if (diff < 60000) return "< 1 min";
   if (diff < 3600000) return `${Math.floor(diff / 60000)}m`;
   if (diff < 86400000) return `${Math.floor(diff / 3600000)}h`;
@@ -24,6 +25,7 @@ function formatNextScan(nextScanAt: string | null): string {
 }
 
 export default async function LibrariesPage() {
+  const { t } = await getServerTranslations();
   const [libraries, folders] = await Promise.all([
     fetchLibraries().catch(() => [] as LibraryDto[]),
     listFolders().catch(() => [] as FolderItem[])
@@ -90,15 +92,15 @@ export default async function LibrariesPage() {
           <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
           </svg>
-          Bibliothèques
+          {t("libraries.title")}
         </h1>
       </div>
       
       {/* Add Library Form */}
       <Card className="mb-6">
         <CardHeader>
-          <CardTitle>Ajouter une bibliothèque</CardTitle>
-          <CardDescription>Créer une nouvelle bibliothèque à partir d'un dossier existant</CardDescription>
+          <CardTitle>{t("libraries.addLibrary")}</CardTitle>
+          <CardDescription>{t("libraries.addLibraryDescription")}</CardDescription>
         </CardHeader>
         <CardContent>
           <LibraryForm initialFolders={folders} action={addLibrary} />
@@ -115,7 +117,7 @@ export default async function LibrariesPage() {
                 <div className="flex items-start justify-between">
                   <div>
                     <CardTitle className="text-lg">{lib.name}</CardTitle>
-                    {!lib.enabled && <Badge variant="muted" className="mt-1">Désactivée</Badge>}
+                    {!lib.enabled && <Badge variant="muted" className="mt-1">{t("libraries.disabled")}</Badge>}
                   </div>
                   <LibraryActions
                     libraryId={lib.id}
@@ -138,28 +140,28 @@ export default async function LibrariesPage() {
                     className="text-center p-3 bg-muted/50 rounded-lg hover:bg-accent transition-colors duration-200"
                   >
                     <span className="block text-2xl font-bold text-primary">{lib.book_count}</span>
-                    <span className="text-xs text-muted-foreground">Livres</span>
+                    <span className="text-xs text-muted-foreground">{t("libraries.books")}</span>
                   </Link>
                   <Link 
                     href={`/libraries/${lib.id}/series`} 
                     className="text-center p-3 bg-muted/50 rounded-lg hover:bg-accent transition-colors duration-200"
                   >
                     <span className="block text-2xl font-bold text-foreground">{seriesCount}</span>
-                    <span className="text-xs text-muted-foreground">Séries</span>
+                    <span className="text-xs text-muted-foreground">{t("libraries.series")}</span>
                   </Link>
                 </div>
 
                 {/* Status */}
                 <div className="flex items-center gap-3 mb-4 text-sm">
                   <span className={`flex items-center gap-1 ${lib.monitor_enabled ? 'text-success' : 'text-muted-foreground'}`}>
-                    {lib.monitor_enabled ? '●' : '○'} {lib.monitor_enabled ? 'Auto' : 'Manuel'}
+                    {lib.monitor_enabled ? '●' : '○'} {lib.monitor_enabled ? t("libraries.auto") : t("libraries.manual")}
                   </span>
                   {lib.watcher_enabled && (
                     <span className="text-warning" title="Surveillance de fichiers active">⚡</span>
                   )}
                   {lib.monitor_enabled && lib.next_scan_at && (
                     <span className="text-xs text-muted-foreground ml-auto">
-                      Prochain : {formatNextScan(lib.next_scan_at)}
+                      {t("libraries.nextScan", { time: formatNextScan(lib.next_scan_at, t("libraries.imminent")) })}
                     </span>
                   )}
                 </div>
@@ -172,7 +174,7 @@ export default async function LibrariesPage() {
                       <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                       </svg>
-                      Indexer
+                      {t("libraries.index")}
                     </Button>
                   </form>
                   <form className="flex-1">
@@ -181,13 +183,13 @@ export default async function LibrariesPage() {
                       <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                       </svg>
-                      Complet
+                      {t("libraries.fullIndex")}
                     </Button>
                   </form>
                   {lib.metadata_provider !== "none" && (
                     <form>
                       <input type="hidden" name="id" value={lib.id} />
-                      <Button type="submit" variant="secondary" size="sm" formAction={batchMetadataAction} title="Métadonnées en lot">
+                      <Button type="submit" variant="secondary" size="sm" formAction={batchMetadataAction} title={t("libraries.batchMetadata")}>
                         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                         </svg>

apps/backoffice/app/page.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { fetchStats, StatsResponse } from "../lib/api";
 import { Card, CardContent, CardHeader, CardTitle } from "./components/ui";
 import Link from "next/link";
+import { getServerTranslations } from "../lib/i18n/server";
+import type { TranslateFunction } from "../lib/i18n/dictionaries";
 
 export const dynamic = "force-dynamic";
 
@@ -13,14 +15,14 @@ function formatBytes(bytes: number): string {
   return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
 }
 
-function formatNumber(n: number): string {
-  return n.toLocaleString("fr-FR");
+function formatNumber(n: number, locale: string): string {
+  return n.toLocaleString(locale === "fr" ? "fr-FR" : "en-US");
 }
 
 // Donut chart via SVG
-function DonutChart({ data, colors }: { data: { label: string; value: number; color: string }[]; colors?: string[] }) {
+function DonutChart({ data, colors, noDataLabel, locale = "fr" }: { data: { label: string; value: number; color: string }[]; colors?: string[]; noDataLabel?: string; locale?: string }) {
   const total = data.reduce((sum, d) => sum + d.value, 0);
-  if (total === 0) return <p className="text-muted-foreground text-sm text-center py-8">Aucune donnée</p>;
+  if (total === 0) return <p className="text-muted-foreground text-sm text-center py-8">{noDataLabel}</p>;
 
   const radius = 40;
   const circumference = 2 * Math.PI * radius;
@@ -51,7 +53,7 @@ function DonutChart({ data, colors }: { data: { label: string; value: number; co
           );
         })}
         <text x="50" y="50" textAnchor="middle" dominantBaseline="central" className="fill-foreground text-[10px] font-bold">
-          {formatNumber(total)}
+          {formatNumber(total, locale)}
         </text>
       </svg>
       <div className="flex flex-col gap-1.5 min-w-0">
@@ -68,9 +70,9 @@ function DonutChart({ data, colors }: { data: { label: string; value: number; co
 }
 
 // Bar chart via pure CSS
-function BarChart({ data, color = "var(--color-primary)" }: { data: { label: string; value: number }[]; color?: string }) {
+function BarChart({ data, color = "var(--color-primary)", noDataLabel }: { data: { label: string; value: number }[]; color?: string; noDataLabel?: string }) {
   const max = Math.max(...data.map((d) => d.value), 1);
-  if (data.length === 0) return <p className="text-muted-foreground text-sm text-center py-8">Aucune donnée</p>;
+  if (data.length === 0) return <p className="text-muted-foreground text-sm text-center py-8">{noDataLabel}</p>;
 
   return (
     <div className="flex items-end gap-1.5 h-40">
@@ -101,7 +103,7 @@ function HorizontalBar({ label, value, max, subLabel, color = "var(--color-prima
     <div className="space-y-1">
       <div className="flex justify-between text-sm">
         <span className="font-medium text-foreground truncate">{label}</span>
-        <span className="text-muted-foreground shrink-0 ml-2">{subLabel || formatNumber(value)}</span>
+        <span className="text-muted-foreground shrink-0 ml-2">{subLabel || value}</span>
       </div>
       <div className="h-2 bg-muted rounded-full overflow-hidden">
         <div
@@ -114,6 +116,8 @@ function HorizontalBar({ label, value, max, subLabel, color = "var(--color-prima
 }
 
 export default async function DashboardPage() {
+  const { t, locale } = await getServerTranslations();
+
   let stats: StatsResponse | null = null;
   try {
     stats = await fetchStats();
@@ -126,9 +130,9 @@ export default async function DashboardPage() {
       <div className="max-w-5xl mx-auto">
         <div className="text-center mb-12">
           <h1 className="text-4xl font-bold tracking-tight mb-4 text-foreground">StripStream Backoffice</h1>
-          <p className="text-lg text-muted-foreground">Impossible de charger les statistiques. Vérifiez que l'API est en cours d'exécution.</p>
+          <p className="text-lg text-muted-foreground">{t("dashboard.loadError")}</p>
         </div>
-        <QuickLinks />
+        <QuickLinks t={t} />
       </div>
     );
   }
@@ -143,6 +147,7 @@ export default async function DashboardPage() {
   ];
 
   const maxLibBooks = Math.max(...by_library.map((l) => l.book_count), 1);
+  const noDataLabel = t("common.noData");
 
   return (
     <div className="max-w-7xl mx-auto space-y-6">
@@ -152,21 +157,21 @@ export default async function DashboardPage() {
           <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
           </svg>
-          Tableau de bord
+          {t("dashboard.title")}
         </h1>
         <p className="text-muted-foreground mt-2 max-w-2xl">
-          Aperçu de votre collection de bandes dessinées. Gérez vos bibliothèques, suivez votre progression de lecture et explorez vos livres et séries.
+          {t("dashboard.subtitle")}
         </p>
       </div>
 
       {/* Overview stat cards */}
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-        <StatCard icon="book" label="Livres" value={formatNumber(overview.total_books)} color="success" />
-        <StatCard icon="series" label="Séries" value={formatNumber(overview.total_series)} color="primary" />
-        <StatCard icon="library" label="Bibliothèques" value={formatNumber(overview.total_libraries)} color="warning" />
-        <StatCard icon="pages" label="Pages" value={formatNumber(overview.total_pages)} color="primary" />
-        <StatCard icon="author" label="Auteurs" value={formatNumber(overview.total_authors)} color="success" />
-        <StatCard icon="size" label="Taille totale" value={formatBytes(overview.total_size_bytes)} color="warning" />
+        <StatCard icon="book" label={t("dashboard.books")} value={formatNumber(overview.total_books, locale)} color="success" />
+        <StatCard icon="series" label={t("dashboard.series")} value={formatNumber(overview.total_series, locale)} color="primary" />
+        <StatCard icon="library" label={t("dashboard.libraries")} value={formatNumber(overview.total_libraries, locale)} color="warning" />
+        <StatCard icon="pages" label={t("dashboard.pages")} value={formatNumber(overview.total_pages, locale)} color="primary" />
+        <StatCard icon="author" label={t("dashboard.authors")} value={formatNumber(overview.total_authors, locale)} color="success" />
+        <StatCard icon="size" label={t("dashboard.totalSize")} value={formatBytes(overview.total_size_bytes)} color="warning" />
       </div>
 
       {/* Charts row */}
@@ -174,14 +179,16 @@ export default async function DashboardPage() {
         {/* Reading status donut */}
         <Card hover={false}>
           <CardHeader>
-            <CardTitle className="text-base">Statut de lecture</CardTitle>
+            <CardTitle className="text-base">{t("dashboard.readingStatus")}</CardTitle>
           </CardHeader>
           <CardContent>
             <DonutChart
+              locale={locale}
+              noDataLabel={noDataLabel}
               data={[
-                { label: "Non lu", value: reading_status.unread, color: readingColors[0] },
-                { label: "En cours", value: reading_status.reading, color: readingColors[1] },
-                { label: "Lu", value: reading_status.read, color: readingColors[2] },
+                { label: t("status.unread"), value: reading_status.unread, color: readingColors[0] },
+                { label: t("status.reading"), value: reading_status.reading, color: readingColors[1] },
+                { label: t("status.read"), value: reading_status.read, color: readingColors[2] },
               ]}
             />
           </CardContent>
@@ -190,12 +197,14 @@ export default async function DashboardPage() {
         {/* By format donut */}
         <Card hover={false}>
           <CardHeader>
-            <CardTitle className="text-base">Par format</CardTitle>
+            <CardTitle className="text-base">{t("dashboard.byFormat")}</CardTitle>
           </CardHeader>
           <CardContent>
             <DonutChart
+              locale={locale}
+              noDataLabel={noDataLabel}
               data={by_format.slice(0, 6).map((f, i) => ({
-                label: (f.format || "Inconnu").toUpperCase(),
+                label: (f.format || t("dashboard.unknown")).toUpperCase(),
                 value: f.count,
                 color: formatColors[i % formatColors.length],
               }))}
@@ -206,10 +215,12 @@ export default async function DashboardPage() {
         {/* By library donut */}
         <Card hover={false}>
           <CardHeader>
-            <CardTitle className="text-base">Par bibliothèque</CardTitle>
+            <CardTitle className="text-base">{t("dashboard.byLibrary")}</CardTitle>
           </CardHeader>
           <CardContent>
             <DonutChart
+              locale={locale}
+              noDataLabel={noDataLabel}
               data={by_library.slice(0, 6).map((l, i) => ({
                 label: l.library_name,
                 value: l.book_count,
@@ -225,10 +236,11 @@ export default async function DashboardPage() {
         {/* Monthly additions bar chart */}
         <Card hover={false}>
           <CardHeader>
-            <CardTitle className="text-base">Livres ajoutés (12 derniers mois)</CardTitle>
+            <CardTitle className="text-base">{t("dashboard.booksAdded")}</CardTitle>
           </CardHeader>
           <CardContent>
             <BarChart
+              noDataLabel={noDataLabel}
               data={additions_over_time.map((m) => ({
                 label: m.month.slice(5), // "MM" from "YYYY-MM"
                 value: m.books_added,
@@ -241,7 +253,7 @@ export default async function DashboardPage() {
         {/* Top series */}
         <Card hover={false}>
           <CardHeader>
-            <CardTitle className="text-base">Séries populaires</CardTitle>
+            <CardTitle className="text-base">{t("dashboard.popularSeries")}</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="space-y-3">
@@ -251,12 +263,12 @@ export default async function DashboardPage() {
                   label={s.series}
                   value={s.book_count}
                   max={top_series[0]?.book_count || 1}
-                  subLabel={`${s.read_count}/${s.book_count} lu`}
+                  subLabel={t("dashboard.readCount", { read: s.read_count, total: s.book_count })}
                   color="hsl(142 60% 45%)"
                 />
               ))}
               {top_series.length === 0 && (
-                <p className="text-muted-foreground text-sm text-center py-4">Aucune série pour le moment</p>
+                <p className="text-muted-foreground text-sm text-center py-4">{t("dashboard.noSeries")}</p>
               )}
             </div>
           </CardContent>
@@ -267,7 +279,7 @@ export default async function DashboardPage() {
       {by_library.length > 0 && (
         <Card hover={false}>
           <CardHeader>
-            <CardTitle className="text-base">Bibliothèques</CardTitle>
+            <CardTitle className="text-base">{t("dashboard.libraries")}</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
@@ -281,23 +293,23 @@ export default async function DashboardPage() {
                     <div
                       className="h-full transition-all duration-500"
                       style={{ width: `${(lib.read_count / Math.max(lib.book_count, 1)) * 100}%`, backgroundColor: "hsl(142 60% 45%)" }}
-                      title={`Lu : ${lib.read_count}`}
+                      title={`${t("status.read")} : ${lib.read_count}`}
                     />
                     <div
                       className="h-full transition-all duration-500"
                       style={{ width: `${(lib.reading_count / Math.max(lib.book_count, 1)) * 100}%`, backgroundColor: "hsl(45 93% 47%)" }}
-                      title={`En cours : ${lib.reading_count}`}
+                      title={`${t("status.reading")} : ${lib.reading_count}`}
                     />
                     <div
                       className="h-full transition-all duration-500"
                       style={{ width: `${(lib.unread_count / Math.max(lib.book_count, 1)) * 100}%`, backgroundColor: "hsl(220 13% 70%)" }}
-                      title={`Non lu : ${lib.unread_count}`}
+                      title={`${t("status.unread")} : ${lib.unread_count}`}
                     />
                   </div>
                   <div className="flex gap-3 text-[11px] text-muted-foreground">
-                    <span>{lib.book_count} livres</span>
-                    <span className="text-success">{lib.read_count} lu</span>
-                    <span className="text-warning">{lib.reading_count} en cours</span>
+                    <span>{lib.book_count} {t("dashboard.books").toLowerCase()}</span>
+                    <span className="text-success">{lib.read_count} {t("status.read").toLowerCase()}</span>
+                    <span className="text-warning">{lib.reading_count} {t("status.reading").toLowerCase()}</span>
                   </div>
                 </div>
               ))}
@@ -307,7 +319,7 @@ export default async function DashboardPage() {
       )}
 
       {/* Quick links */}
-      <QuickLinks />
+      <QuickLinks t={t} />
     </div>
   );
 }
@@ -345,12 +357,12 @@ function StatCard({ icon, label, value, color }: { icon: string; label: string;
   );
 }
 
-function QuickLinks() {
+function QuickLinks({ t }: { t: TranslateFunction }) {
   const links = [
-    { href: "/libraries", label: "Bibliothèques", bg: "bg-primary/10", text: "text-primary", hoverBg: "group-hover:bg-primary", hoverText: "group-hover:text-primary-foreground", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /> },
-    { href: "/books", label: "Livres", bg: "bg-success/10", text: "text-success", hoverBg: "group-hover:bg-success", hoverText: "group-hover:text-white", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" /> },
-    { href: "/series", label: "Séries", bg: "bg-warning/10", text: "text-warning", hoverBg: "group-hover:bg-warning", hoverText: "group-hover:text-white", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> },
-    { href: "/jobs", label: "Tâches", bg: "bg-destructive/10", text: "text-destructive", hoverBg: "group-hover:bg-destructive", hoverText: "group-hover:text-destructive-foreground", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /> },
+    { href: "/libraries", label: t("nav.libraries"), bg: "bg-primary/10", text: "text-primary", hoverBg: "group-hover:bg-primary", hoverText: "group-hover:text-primary-foreground", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /> },
+    { href: "/books", label: t("nav.books"), bg: "bg-success/10", text: "text-success", hoverBg: "group-hover:bg-success", hoverText: "group-hover:text-white", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" /> },
+    { href: "/series", label: t("nav.series"), bg: "bg-warning/10", text: "text-warning", hoverBg: "group-hover:bg-warning", hoverText: "group-hover:text-white", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> },
+    { href: "/jobs", label: t("nav.jobs"), bg: "bg-destructive/10", text: "text-destructive", hoverBg: "group-hover:bg-destructive", hoverText: "group-hover:text-destructive-foreground", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /> },
   ];
 
   return (

apps/backoffice/app/series/page.tsx

@@ -1,4 +1,5 @@
 import { fetchAllSeries, fetchLibraries, fetchSeriesStatuses, LibraryDto, SeriesDto, SeriesPageDto, getBookCoverUrl } from "../../lib/api";
+import { getServerTranslations } from "../../lib/i18n/server";
 import { MarkSeriesReadButton } from "../components/MarkSeriesReadButton";
 import { LiveSearchForm } from "../components/LiveSearchForm";
 import { Card, CardContent, OffsetPagination } from "../components/ui";
@@ -12,6 +13,7 @@ export default async function SeriesPage({
 }: {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
+  const { t } = await getServerTranslations();
   const searchParamsAwaited = await searchParams;
   const libraryId = typeof searchParamsAwaited.library === "string" ? searchParamsAwaited.library : undefined;
   const searchQuery = typeof searchParamsAwaited.q === "string" ? searchParamsAwaited.q : "";
@@ -33,39 +35,39 @@ export default async function SeriesPage({
   const series = seriesPage.items;
   const totalPages = Math.ceil(seriesPage.total / limit);
   const sortOptions = [
-    { value: "", label: "Titre" },
-    { value: "latest", label: "Ajout récent" },
+    { value: "", label: t("books.sortTitle") },
+    { value: "latest", label: t("books.sortLatest") },
   ];
 
   const hasFilters = searchQuery || libraryId || readingStatus || sort || seriesStatus || hasMissing;
 
   const libraryOptions = [
-    { value: "", label: "Toutes les bibliothèques" },
+    { value: "", label: t("books.allLibraries") },
     ...libraries.map((lib) => ({ value: lib.id, label: lib.name })),
   ];
 
   const statusOptions = [
-    { value: "", label: "Tous" },
-    { value: "unread", label: "Non lu" },
-    { value: "reading", label: "En cours" },
-    { value: "read", label: "Lu" },
+    { value: "", label: t("common.all") },
+    { value: "unread", label: t("status.unread") },
+    { value: "reading", label: t("status.reading") },
+    { value: "read", label: t("status.read") },
   ];
 
   const KNOWN_STATUSES: Record<string, string> = {
-    ongoing: "En cours",
-    ended: "Terminée",
-    hiatus: "Hiatus",
-    cancelled: "Annulée",
-    upcoming: "À paraître",
+    ongoing: t("seriesStatus.ongoing"),
+    ended: t("seriesStatus.ended"),
+    hiatus: t("seriesStatus.hiatus"),
+    cancelled: t("seriesStatus.cancelled"),
+    upcoming: t("seriesStatus.upcoming"),
   };
   const seriesStatusOptions = [
-    { value: "", label: "Tous les statuts" },
+    { value: "", label: t("seriesStatus.allStatuses") },
     ...dbStatuses.map((s) => ({ value: s, label: KNOWN_STATUSES[s] || s })),
   ];
 
   const missingOptions = [
-    { value: "", label: "Tous" },
-    { value: "true", label: "Livres manquants" },
+    { value: "", label: t("common.all") },
+    { value: "true", label: t("series.missingBooks") },
   ];
 
   return (
@@ -75,7 +77,7 @@ export default async function SeriesPage({
           <svg className="w-8 h-8 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
           </svg>
-          Séries
+          {t("series.title")}
         </h1>
       </div>
 
@@ -84,12 +86,12 @@ export default async function SeriesPage({
           <LiveSearchForm
             basePath="/series"
             fields={[
-              { name: "q", type: "text", label: "Rechercher", placeholder: "Rechercher par nom de série...", className: "flex-1 w-full" },
-              { name: "library", type: "select", label: "Bibliothèque", options: libraryOptions, className: "w-full sm:w-48" },
-              { name: "status", type: "select", label: "Lecture", options: statusOptions, className: "w-full sm:w-36" },
-              { name: "series_status", type: "select", label: "Statut", options: seriesStatusOptions, className: "w-full sm:w-36" },
-              { name: "has_missing", type: "select", label: "Manquant", options: missingOptions, className: "w-full sm:w-36" },
-              { name: "sort", type: "select", label: "Tri", options: sortOptions, className: "w-full sm:w-36" },
+              { name: "q", type: "text", label: t("common.search"), placeholder: t("series.searchPlaceholder"), className: "flex-1 w-full" },
+              { name: "library", type: "select", label: t("books.library"), options: libraryOptions, className: "w-full sm:w-48" },
+              { name: "status", type: "select", label: t("series.reading"), options: statusOptions, className: "w-full sm:w-36" },
+              { name: "series_status", type: "select", label: t("editSeries.status"), options: seriesStatusOptions, className: "w-full sm:w-36" },
+              { name: "has_missing", type: "select", label: t("series.missing"), options: missingOptions, className: "w-full sm:w-36" },
+              { name: "sort", type: "select", label: t("books.sort"), options: sortOptions, className: "w-full sm:w-36" },
             ]}
           />
         </CardContent>
@@ -97,8 +99,8 @@ export default async function SeriesPage({
 
       {/* Results count */}
       <p className="text-sm text-muted-foreground mb-4">
-        {seriesPage.total} séries
-        {searchQuery && <> correspondant à &quot;{searchQuery}&quot;</>}
+        {seriesPage.total} {t("series.title").toLowerCase()}
+        {searchQuery && <> {t("series.matchingQuery")} &quot;{searchQuery}&quot;</>}
       </p>
 
       {/* Series Grid */}
@@ -119,7 +121,7 @@ export default async function SeriesPage({
                   <div className="aspect-[2/3] relative bg-muted/50">
                     <Image
                       src={getBookCoverUrl(s.first_book_id)}
-                      alt={`Couverture de ${s.name}`}
+                      alt={t("books.coverOf", { name: s.name })}
                       fill
                       className="object-cover"
                       unoptimized
@@ -127,11 +129,11 @@ export default async function SeriesPage({
                   </div>
                   <div className="p-3">
                     <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
-                      {s.name === "unclassified" ? "Non classé" : s.name}
+                      {s.name === "unclassified" ? t("books.unclassified") : s.name}
                     </h3>
                     <div className="flex items-center justify-between mt-1">
                       <p className="text-xs text-muted-foreground">
-                        {s.books_read_count}/{s.book_count} lu{s.book_count !== 1 ? "s" : ""}
+                        {t("series.readCount", { read: String(s.books_read_count), total: String(s.book_count), plural: s.book_count !== 1 ? "s" : "" })}
                       </p>
                       <MarkSeriesReadButton
                         seriesName={s.name}
@@ -148,17 +150,12 @@ export default async function SeriesPage({
                           s.series_status === "cancelled" ? "bg-red-500/15 text-red-600" :
                           "bg-muted text-muted-foreground"
                         }`}>
-                          {s.series_status === "ongoing" ? "En cours" :
-                           s.series_status === "ended" ? "Terminée" :
-                           s.series_status === "hiatus" ? "Hiatus" :
-                           s.series_status === "cancelled" ? "Annulée" :
-                           s.series_status === "upcoming" ? "À paraître" :
-                           s.series_status}
+                          {KNOWN_STATUSES[s.series_status] || s.series_status}
                         </span>
                       )}
                       {s.missing_count != null && s.missing_count > 0 && (
                         <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-yellow-500/15 text-yellow-600">
-                          {s.missing_count} manquant{s.missing_count > 1 ? "s" : ""}
+                          {t("series.missingCount", { count: String(s.missing_count), plural: s.missing_count > 1 ? "s" : "" })}
                         </span>
                       )}
                     </div>
@@ -183,7 +180,7 @@ export default async function SeriesPage({
             </svg>
           </div>
           <p className="text-muted-foreground text-lg">
-            {hasFilters ? "Aucune série trouvée correspondant à vos filtres" : "Aucune série disponible"}
+            {hasFilters ? t("series.noResults") : t("series.noSeries")}
           </p>
         </div>
       )}

apps/backoffice/app/settings/SettingsPage.tsx

@@ -4,6 +4,8 @@ import { useState, useEffect, useCallback, useMemo } from "react";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button, FormField, FormInput, FormSelect, FormRow, Icon } from "../components/ui";
 import { ProviderIcon } from "../components/ProviderIcon";
 import { Settings, CacheStats, ClearCacheResponse, ThumbnailStats, KomgaSyncResponse, KomgaSyncReportSummary } from "../../lib/api";
+import { useTranslation } from "../../lib/i18n/context";
+import type { Locale } from "../../lib/i18n/types";
 
 interface SettingsPageProps {
   initialSettings: Settings;
@@ -12,6 +14,7 @@ interface SettingsPageProps {
 }
 
 export default function SettingsPage({ initialSettings, initialCacheStats, initialThumbnailStats }: SettingsPageProps) {
+  const { t, locale, setLocale } = useTranslation();
   const [settings, setSettings] = useState<Settings>({
     ...initialSettings,
     thumbnail: initialSettings.thumbnail || { enabled: true, width: 300, height: 400, quality: 80, format: "webp", directory: "/data/thumbnails" }
@@ -55,13 +58,13 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
         body: JSON.stringify({ value })
       });
       if (response.ok) {
-        setSaveMessage("Paramètres enregistrés avec succès");
+        setSaveMessage(t("settings.savedSuccess"));
         setTimeout(() => setSaveMessage(null), 3000);
       } else {
-        setSaveMessage("Échec de l'enregistrement des paramètres");
+        setSaveMessage(t("settings.savedError"));
       }
     } catch (error) {
-      setSaveMessage("Erreur lors de l'enregistrement des paramètres");
+      setSaveMessage(t("settings.saveError"));
     } finally {
       setIsSaving(false);
     }
@@ -81,7 +84,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
         setCacheStats(stats);
       }
     } catch (error) {
-      setClearResult({ success: false, message: "Échec du vidage du cache" });
+      setClearResult({ success: false, message: t("settings.cacheClearError") });
     } finally {
       setIsClearing(false);
     }
@@ -150,8 +153,8 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
   const [activeTab, setActiveTab] = useState<"general" | "integrations">("general");
 
   const tabs = [
-    { id: "general" as const, label: "Général", icon: "settings" as const },
-    { id: "integrations" as const, label: "Intégrations", icon: "refresh" as const },
+    { id: "general" as const, label: t("settings.general"), icon: "settings" as const },
+    { id: "integrations" as const, label: t("settings.integrations"), icon: "refresh" as const },
   ];
 
   return (
@@ -159,7 +162,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
       <div className="mb-6">
         <h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
           <Icon name="settings" size="xl" />
-          Paramètres
+          {t("settings.title")}
         </h1>
       </div>
 
@@ -190,20 +193,40 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
       )}
 
       {activeTab === "general" && (<>
+      {/* Language Selector */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Icon name="settings" size="md" />
+            {t("settings.language")}
+          </CardTitle>
+          <CardDescription>{t("settings.languageDesc")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <FormSelect
+            value={locale}
+            onChange={(e) => setLocale(e.target.value as Locale)}
+          >
+            <option value="fr">Français</option>
+            <option value="en">English</option>
+          </FormSelect>
+        </CardContent>
+      </Card>
+
       {/* Image Processing Settings */}
       <Card className="mb-6">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Icon name="image" size="md" />
-            Traitement d&apos;images
+            {t("settings.imageProcessing")}
           </CardTitle>
-          <CardDescription>Ces paramètres s&apos;appliquent uniquement lorsqu&apos;un client demande explicitement une conversion de format via l&apos;API (ex. <code className="text-xs bg-muted px-1 rounded">?format=webp&amp;width=800</code>). Les pages servies sans paramètres sont livrées telles quelles depuis l&apos;archive, sans traitement.</CardDescription>
+          <CardDescription><span dangerouslySetInnerHTML={{ __html: t("settings.imageProcessingDesc") }} /></CardDescription>
         </CardHeader>
         <CardContent>
           <div className="space-y-4">
             <FormRow>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Format de sortie par défaut</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.defaultFormat")}</label>
                 <FormSelect
                   value={settings.image_processing.format}
                   onChange={(e) => {
@@ -218,7 +241,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                 </FormSelect>
               </FormField>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Qualité par défaut (1-100)</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.defaultQuality")}</label>
                 <FormInput 
                   type="number" 
                   min={1} 
@@ -235,7 +258,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
             </FormRow>
             <FormRow>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Filtre de redimensionnement par défaut</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.defaultFilter")}</label>
                 <FormSelect 
                   value={settings.image_processing.filter}
                   onChange={(e) => {
@@ -244,13 +267,13 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                     handleUpdateSetting("image_processing", newSettings.image_processing);
                   }}
                 >
-                  <option value="lanczos3">Lanczos3 (Meilleure qualité)</option>
-                  <option value="triangle">Triangle (Plus rapide)</option>
-                  <option value="nearest">Nearest (Le plus rapide)</option>
+                  <option value="lanczos3">{t("settings.filterLanczos")}</option>
+                  <option value="triangle">{t("settings.filterTriangle")}</option>
+                  <option value="nearest">{t("settings.filterNearest")}</option>
                 </FormSelect>
               </FormField>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Largeur maximale autorisée (px)</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.maxWidth")}</label>
                 <FormInput 
                   type="number" 
                   min={100} 
@@ -274,23 +297,23 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Icon name="cache" size="md" />
-            Cache
+            {t("settings.cache")}
           </CardTitle>
-          <CardDescription>Gérer le cache d&apos;images et le stockage</CardDescription>
+          <CardDescription>{t("settings.cacheDesc")}</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="space-y-4">
             <div className="grid grid-cols-3 gap-4 p-4 bg-muted/30 rounded-lg">
               <div>
-                <p className="text-sm text-muted-foreground">Taille du cache</p>
+                <p className="text-sm text-muted-foreground">{t("settings.cacheSize")}</p>
                 <p className="text-2xl font-semibold">{cacheStats.total_size_mb.toFixed(2)} MB</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Files</p>
+                <p className="text-sm text-muted-foreground">{t("settings.files")}</p>
                 <p className="text-2xl font-semibold">{cacheStats.file_count}</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Directory</p>
+                <p className="text-sm text-muted-foreground">{t("settings.directory")}</p>
                 <p className="text-sm font-mono truncate" title={cacheStats.directory}>{cacheStats.directory}</p>
               </div>
             </div>
@@ -303,7 +326,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
 
             <FormRow>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Cache Directory</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.cacheDirectory")}</label>
                 <FormInput 
                   value={settings.cache.directory}
                   onChange={(e) => {
@@ -314,7 +337,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                 />
               </FormField>
               <FormField className="w-32">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Max Size (MB)</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.maxSizeMb")}</label>
                 <FormInput 
                   type="number"
                   value={settings.cache.max_size_mb}
@@ -336,12 +359,12 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
               {isClearing ? (
                 <>
                   <Icon name="spinner" size="sm" className="animate-spin -ml-1 mr-2" />
-                  Clearing...
+                  {t("settings.clearing")}
                 </>
               ) : (
                 <>
                   <Icon name="trash" size="sm" className="mr-2" />
-                  Clear Cache
+                  {t("settings.clearCache")}
                 </>
               )}
             </Button>
@@ -354,15 +377,15 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Icon name="performance" size="md" />
-            Performance Limits
+            {t("settings.performanceLimits")}
           </CardTitle>
-          <CardDescription>Configure API performance, rate limiting, and thumbnail generation concurrency</CardDescription>
+          <CardDescription>{t("settings.performanceDesc")}</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="space-y-4">
             <FormRow>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Concurrent Renders</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.concurrentRenders")}</label>
                 <FormInput 
                   type="number"
                   min={1}
@@ -376,11 +399,11 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                   onBlur={() => handleUpdateSetting("limits", settings.limits)}
                 />
                 <p className="text-xs text-muted-foreground mt-1">
-                  Maximum number of page renders and thumbnail generations running in parallel
+                  {t("settings.concurrentRendersHelp")}
                 </p>
               </FormField>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Timeout (seconds)</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.timeoutSeconds")}</label>
                 <FormInput 
                   type="number"
                   min={5}
@@ -395,7 +418,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                 />
               </FormField>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Rate Limit (req/s)</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.rateLimit")}</label>
                 <FormInput 
                   type="number"
                   min={10}
@@ -411,7 +434,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
               </FormField>
             </FormRow>
             <p className="text-sm text-muted-foreground">
-              Note: Changes to limits require a server restart to take effect. The "Concurrent Renders" setting controls both page rendering and thumbnail generation parallelism.
+              {t("settings.limitsNote")}
             </p>
           </div>
         </CardContent>
@@ -422,15 +445,15 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Icon name="image" size="md" />
-            Thumbnails
+            {t("settings.thumbnails")}
           </CardTitle>
-          <CardDescription>Configure thumbnail generation during indexing</CardDescription>
+          <CardDescription>{t("settings.thumbnailsDesc")}</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="space-y-4">
             <FormRow>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Enable Thumbnails</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.enableThumbnails")}</label>
                 <FormSelect 
                   value={settings.thumbnail.enabled ? "true" : "false"}
                   onChange={(e) => {
@@ -439,12 +462,12 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                     handleUpdateSetting("thumbnail", newSettings.thumbnail);
                   }}
                 >
-                  <option value="true">Enabled</option>
-                  <option value="false">Disabled</option>
+                  <option value="true">{t("common.enabled")}</option>
+                  <option value="false">{t("common.disabled")}</option>
                 </FormSelect>
               </FormField>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Output Format</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.outputFormat")}</label>
                 <FormSelect 
                   value={settings.thumbnail.format}
                   onChange={(e) => {
@@ -453,21 +476,21 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                     handleUpdateSetting("thumbnail", newSettings.thumbnail);
                   }}
                 >
-                  <option value="original">Original (No Re-encoding)</option>
+                  <option value="original">{t("settings.formatOriginal")}</option>
                   <option value="webp">WebP</option>
                   <option value="jpeg">JPEG</option>
                   <option value="png">PNG</option>
                 </FormSelect>
                 <p className="text-xs text-muted-foreground mt-1">
                   {settings.thumbnail.format === "original"
-                    ? "Resizes to target dimensions, keeps source format (JPEG→JPEG). Much faster generation."
-                    : "Resizes and re-encodes to selected format."}
+                    ? t("settings.formatOriginalDesc")
+                    : t("settings.formatReencodeDesc")}
                 </p>
               </FormField>
             </FormRow>
             <FormRow>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Width (px)</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.width")}</label>
                 <FormInput 
                   type="number" 
                   min={50} 
@@ -482,7 +505,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                 />
               </FormField>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Height (px)</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.height")}</label>
                 <FormInput 
                   type="number" 
                   min={50} 
@@ -497,7 +520,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                 />
               </FormField>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Quality (1-100)</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.quality")}</label>
                 <FormInput 
                   type="number" 
                   min={1} 
@@ -514,7 +537,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
             </FormRow>
             <FormRow>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Thumbnail Directory</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.thumbnailDirectory")}</label>
                 <FormInput 
                   value={settings.thumbnail.directory}
                   onChange={(e) => {
@@ -528,21 +551,21 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
 
             <div className="grid grid-cols-3 gap-4 p-4 bg-muted/30 rounded-lg">
               <div>
-                <p className="text-sm text-muted-foreground">Total Size</p>
+                <p className="text-sm text-muted-foreground">{t("settings.totalSize")}</p>
                 <p className="text-2xl font-semibold">{thumbnailStats.total_size_mb.toFixed(2)} MB</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Files</p>
+                <p className="text-sm text-muted-foreground">{t("settings.files")}</p>
                 <p className="text-2xl font-semibold">{thumbnailStats.file_count}</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Directory</p>
+                <p className="text-sm text-muted-foreground">{t("settings.directory")}</p>
                 <p className="text-sm font-mono truncate" title={thumbnailStats.directory}>{thumbnailStats.directory}</p>
               </div>
             </div>
 
             <p className="text-sm text-muted-foreground">
-              Note: Thumbnail settings are used during indexing. Existing thumbnails will not be regenerated automatically. The concurrency for thumbnail generation is controlled by the "Concurrent Renders" setting in Performance Limits above.
+              {t("settings.thumbnailsNote")}
             </p>
           </div>
         </CardContent>
@@ -559,15 +582,15 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Icon name="refresh" size="md" />
-            Komga Sync
+            {t("settings.komgaSync")}
           </CardTitle>
-          <CardDescription>Import read status from a Komga server. Books are matched by title (case-insensitive). Credentials are not stored.</CardDescription>
+          <CardDescription>{t("settings.komgaDesc")}</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="space-y-4">
             <FormRow>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Komga URL</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.komgaUrl")}</label>
                 <FormInput
                   type="url"
                   placeholder="https://komga.example.com"
@@ -578,14 +601,14 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
             </FormRow>
             <FormRow>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Username</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.username")}</label>
                 <FormInput
                   value={komgaUsername}
                   onChange={(e) => setKomgaUsername(e.target.value)}
                 />
               </FormField>
               <FormField className="flex-1">
-                <label className="text-sm font-medium text-muted-foreground mb-1 block">Password</label>
+                <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("settings.password")}</label>
                 <FormInput
                   type="password"
                   value={komgaPassword}
@@ -601,12 +624,12 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
               {isSyncing ? (
                 <>
                   <Icon name="spinner" size="sm" className="animate-spin -ml-1 mr-2" />
-                  Syncing...
+                  {t("settings.syncing")}
                 </>
               ) : (
                 <>
                   <Icon name="refresh" size="sm" className="mr-2" />
-                  Sync Read Books
+                  {t("settings.syncReadBooks")}
                 </>
               )}
             </Button>
@@ -621,19 +644,19 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
               <div className="space-y-3">
                 <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4 bg-muted/30 rounded-lg">
                   <div>
-                    <p className="text-sm text-muted-foreground">Komga read</p>
+                    <p className="text-sm text-muted-foreground">{t("settings.komgaRead")}</p>
                     <p className="text-2xl font-semibold">{syncResult.total_komga_read}</p>
                   </div>
                   <div>
-                    <p className="text-sm text-muted-foreground">Matched</p>
+                    <p className="text-sm text-muted-foreground">{t("settings.matched")}</p>
                     <p className="text-2xl font-semibold">{syncResult.matched}</p>
                   </div>
                   <div>
-                    <p className="text-sm text-muted-foreground">Already read</p>
+                    <p className="text-sm text-muted-foreground">{t("settings.alreadyRead")}</p>
                     <p className="text-2xl font-semibold">{syncResult.already_read}</p>
                   </div>
                   <div>
-                    <p className="text-sm text-muted-foreground">Newly marked</p>
+                    <p className="text-sm text-muted-foreground">{t("settings.newlyMarked")}</p>
                     <p className="text-2xl font-semibold text-success">{syncResult.newly_marked}</p>
                   </div>
                 </div>
@@ -646,7 +669,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                       className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1"
                     >
                       <Icon name={showMatchedBooks ? "chevronDown" : "chevronRight"} size="sm" />
-                      {syncResult.matched_books.length} matched book{syncResult.matched_books.length !== 1 ? "s" : ""}
+                      {t("settings.matchedBooks", { count: syncResult.matched_books.length, plural: syncResult.matched_books.length !== 1 ? "s" : "" })}
                     </button>
                     {showMatchedBooks && (
                       <div className="mt-2 max-h-60 overflow-y-auto p-3 bg-success/5 rounded-lg text-sm space-y-1">
@@ -671,7 +694,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                       className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1"
                     >
                       <Icon name={showUnmatched ? "chevronDown" : "chevronRight"} size="sm" />
-                      {syncResult.unmatched.length} unmatched book{syncResult.unmatched.length !== 1 ? "s" : ""}
+                      {t("settings.unmatchedBooks", { count: syncResult.unmatched.length, plural: syncResult.unmatched.length !== 1 ? "s" : "" })}
                     </button>
                     {showUnmatched && (
                       <div className="mt-2 max-h-60 overflow-y-auto p-3 bg-muted/20 rounded-lg text-sm space-y-1">
@@ -687,7 +710,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
             {/* Past reports */}
             {reports.length > 0 && (
               <div className="border-t border-border pt-4">
-                <h3 className="text-sm font-medium text-foreground mb-3">Sync History</h3>
+                <h3 className="text-sm font-medium text-foreground mb-3">{t("settings.syncHistory")}</h3>
                 <div className="space-y-2">
                   {reports.map((r) => (
                     <button
@@ -709,11 +732,11 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                         </span>
                       </div>
                       <div className="flex gap-4 mt-1 text-xs text-muted-foreground">
-                        <span>{r.total_komga_read} read</span>
-                        <span>{r.matched} matched</span>
-                        <span className="text-success">{r.newly_marked} new</span>
+                        <span>{r.total_komga_read} {t("settings.read")}</span>
+                        <span>{r.matched} {t("settings.matched").toLowerCase()}</span>
+                        <span className="text-success">{r.newly_marked} {t("settings.new")}</span>
                         {r.unmatched_count > 0 && (
-                          <span className="text-warning">{r.unmatched_count} unmatched</span>
+                          <span className="text-warning">{r.unmatched_count} {t("settings.unmatched")}</span>
                         )}
                       </div>
                     </button>
@@ -725,19 +748,19 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                   <div className="mt-3 space-y-3">
                     <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4 bg-muted/30 rounded-lg">
                       <div>
-                        <p className="text-sm text-muted-foreground">Komga read</p>
+                        <p className="text-sm text-muted-foreground">{t("settings.komgaRead")}</p>
                         <p className="text-2xl font-semibold">{selectedReport.total_komga_read}</p>
                       </div>
                       <div>
-                        <p className="text-sm text-muted-foreground">Matched</p>
+                        <p className="text-sm text-muted-foreground">{t("settings.matched")}</p>
                         <p className="text-2xl font-semibold">{selectedReport.matched}</p>
                       </div>
                       <div>
-                        <p className="text-sm text-muted-foreground">Already read</p>
+                        <p className="text-sm text-muted-foreground">{t("settings.alreadyRead")}</p>
                         <p className="text-2xl font-semibold">{selectedReport.already_read}</p>
                       </div>
                       <div>
-                        <p className="text-sm text-muted-foreground">Newly marked</p>
+                        <p className="text-sm text-muted-foreground">{t("settings.newlyMarked")}</p>
                         <p className="text-2xl font-semibold text-success">{selectedReport.newly_marked}</p>
                       </div>
                     </div>
@@ -750,7 +773,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                           className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1"
                         >
                           <Icon name={showReportMatchedBooks ? "chevronDown" : "chevronRight"} size="sm" />
-                          {selectedReport.matched_books.length} matched book{selectedReport.matched_books.length !== 1 ? "s" : ""}
+                          {t("settings.matchedBooks", { count: selectedReport.matched_books.length, plural: selectedReport.matched_books.length !== 1 ? "s" : "" })}
                         </button>
                         {showReportMatchedBooks && (
                           <div className="mt-2 max-h-60 overflow-y-auto p-3 bg-success/5 rounded-lg text-sm space-y-1">
@@ -775,7 +798,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                           className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1"
                         >
                           <Icon name={showReportUnmatched ? "chevronDown" : "chevronRight"} size="sm" />
-                          {selectedReport.unmatched.length} unmatched book{selectedReport.unmatched.length !== 1 ? "s" : ""}
+                          {t("settings.unmatchedBooks", { count: selectedReport.unmatched.length, plural: selectedReport.unmatched.length !== 1 ? "s" : "" })}
                         </button>
                         {showReportUnmatched && (
                           <div className="mt-2 max-h-60 overflow-y-auto p-3 bg-muted/20 rounded-lg text-sm space-y-1">
@@ -809,6 +832,7 @@ const METADATA_LANGUAGES = [
 ] as const;
 
 function MetadataProvidersCard({ handleUpdateSetting }: { handleUpdateSetting: (key: string, value: unknown) => Promise<void> }) {
+  const { t } = useTranslation();
   const [defaultProvider, setDefaultProvider] = useState("google_books");
   const [metadataLanguage, setMetadataLanguage] = useState("en");
   const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
@@ -843,15 +867,15 @@ function MetadataProvidersCard({ handleUpdateSetting }: { handleUpdateSetting: (
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Icon name="search" size="md" />
-          Metadata Providers
+          {t("settings.metadataProviders")}
         </CardTitle>
-        <CardDescription>Configure external metadata providers for series/book enrichment. Each library can override the default provider. All providers are available for quick-search in the metadata modal.</CardDescription>
+        <CardDescription>{t("settings.metadataProvidersDesc")}</CardDescription>
       </CardHeader>
       <CardContent>
         <div className="space-y-6">
           {/* Default provider */}
           <div>
-            <label className="text-sm font-medium text-muted-foreground mb-2 block">Default Provider</label>
+            <label className="text-sm font-medium text-muted-foreground mb-2 block">{t("settings.defaultProvider")}</label>
             <div className="flex gap-2 flex-wrap">
               {([
                 { value: "google_books", label: "Google Books" },
@@ -878,12 +902,12 @@ function MetadataProvidersCard({ handleUpdateSetting }: { handleUpdateSetting: (
                 </button>
               ))}
             </div>
-            <p className="text-xs text-muted-foreground mt-2">Used by default for metadata search. Libraries can override this individually.</p>
+            <p className="text-xs text-muted-foreground mt-2">{t("settings.defaultProviderHelp")}</p>
           </div>
 
           {/* Metadata language */}
           <div>
-            <label className="text-sm font-medium text-muted-foreground mb-2 block">Metadata Language</label>
+            <label className="text-sm font-medium text-muted-foreground mb-2 block">{t("settings.metadataLanguage")}</label>
             <div className="flex gap-2">
               {METADATA_LANGUAGES.map((l) => (
                 <button
@@ -903,41 +927,41 @@ function MetadataProvidersCard({ handleUpdateSetting }: { handleUpdateSetting: (
                 </button>
               ))}
             </div>
-            <p className="text-xs text-muted-foreground mt-2">Preferred language for search results and descriptions. Fallback: English.</p>
+            <p className="text-xs text-muted-foreground mt-2">{t("settings.metadataLanguageHelp")}</p>
           </div>
 
           {/* Provider API keys — always visible */}
           <div className="border-t border-border/50 pt-4">
-            <h4 className="text-sm font-medium text-foreground mb-3">API Keys</h4>
+            <h4 className="text-sm font-medium text-foreground mb-3">{t("settings.apiKeys")}</h4>
             <div className="space-y-4">
               <FormField>
                 <label className="text-sm font-medium text-muted-foreground mb-1 flex items-center gap-1.5">
                   <ProviderIcon provider="google_books" size={16} />
-                  Google Books API Key
+                  {t("settings.googleBooksKey")}
                 </label>
                 <FormInput
                   type="password"
-                  placeholder="Optional — for higher rate limits"
+                  placeholder={t("settings.googleBooksPlaceholder")}
                   value={apiKeys.google_books || ""}
                   onChange={(e) => setApiKeys({ ...apiKeys, google_books: e.target.value })}
                   onBlur={() => save(defaultProvider, metadataLanguage, apiKeys)}
                 />
-                <p className="text-xs text-muted-foreground mt-1">Works without a key but with lower rate limits.</p>
+                <p className="text-xs text-muted-foreground mt-1">{t("settings.googleBooksHelp")}</p>
               </FormField>
 
               <FormField>
                 <label className="text-sm font-medium text-muted-foreground mb-1 flex items-center gap-1.5">
                   <ProviderIcon provider="comicvine" size={16} />
-                  ComicVine API Key
+                  {t("settings.comicvineKey")}
                 </label>
                 <FormInput
                   type="password"
-                  placeholder="Required to use ComicVine"
+                  placeholder={t("settings.comicvinePlaceholder")}
                   value={apiKeys.comicvine || ""}
                   onChange={(e) => setApiKeys({ ...apiKeys, comicvine: e.target.value })}
                   onBlur={() => save(defaultProvider, metadataLanguage, apiKeys)}
                 />
-                <p className="text-xs text-muted-foreground mt-1">Get your key at <span className="font-mono text-foreground/70">comicvine.gamespot.com/api</span>.</p>
+                <p className="text-xs text-muted-foreground mt-1">{t("settings.comicvineHelp")} <span className="font-mono text-foreground/70">comicvine.gamespot.com/api</span>.</p>
               </FormField>
 
               <div className="p-3 rounded-lg bg-muted/30 flex items-center gap-3 flex-wrap">
@@ -950,12 +974,12 @@ function MetadataProvidersCard({ handleUpdateSetting }: { handleUpdateSetting: (
                   <ProviderIcon provider="anilist" size={16} />
                   <span className="text-xs font-medium text-foreground">AniList</span>
                 </div>
-                <span className="text-xs text-muted-foreground">and</span>
+                <span className="text-xs text-muted-foreground">{t("common.and")}</span>
                 <div className="flex items-center gap-1.5">
                   <ProviderIcon provider="bedetheque" size={16} />
                   <span className="text-xs font-medium text-foreground">Bédéthèque</span>
                 </div>
-                <span className="text-xs text-muted-foreground">are free and require no API key.</span>
+                <span className="text-xs text-muted-foreground">{t("settings.freeProviders")}</span>
               </div>
             </div>
           </div>

apps/backoffice/app/tokens/page.tsx

@@ -2,6 +2,7 @@ import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 import { listTokens, createToken, revokeToken, deleteToken, TokenDto } from "../../lib/api";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button, Badge, FormField, FormInput, FormSelect, FormRow } from "../components/ui";
+import { getServerTranslations } from "../../lib/i18n/server";
 
 export const dynamic = "force-dynamic";
 
@@ -10,6 +11,7 @@ export default async function TokensPage({
 }: {
   searchParams: Promise<{ created?: string }>;
 }) {
+  const { t } = await getServerTranslations();
   const params = await searchParams;
   const tokens = await listTokens().catch(() => [] as TokenDto[]);
 
@@ -45,15 +47,15 @@ export default async function TokensPage({
           <svg className="w-8 h-8 text-destructive" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
           </svg>
-          Jetons API
+          {t("tokens.title")}
         </h1>
       </div>
 
       {params.created ? (
         <Card className="mb-6 border-success/50 bg-success/5">
           <CardHeader>
-            <CardTitle className="text-success">Jeton créé</CardTitle>
-            <CardDescription>Copiez-le maintenant, il ne sera plus affiché</CardDescription>
+            <CardTitle className="text-success">{t("tokens.created")}</CardTitle>
+            <CardDescription>{t("tokens.createdDescription")}</CardDescription>
           </CardHeader>
           <CardContent>
             <pre className="p-4 bg-background rounded-lg text-sm font-mono text-foreground overflow-x-auto border">{params.created}</pre>
@@ -63,22 +65,22 @@ export default async function TokensPage({
 
       <Card className="mb-6">
         <CardHeader>
-          <CardTitle>Créer un nouveau jeton</CardTitle>
-          <CardDescription>Générer un nouveau jeton API avec la portée souhaitée</CardDescription>
+          <CardTitle>{t("tokens.createNew")}</CardTitle>
+          <CardDescription>{t("tokens.createDescription")}</CardDescription>
         </CardHeader>
         <CardContent>
           <form action={createTokenAction}>
             <FormRow>
               <FormField className="flex-1 min-w-48">
-                <FormInput name="name" placeholder="Nom du jeton" required />
+                <FormInput name="name" placeholder={t("tokens.tokenName")} required />
               </FormField>
               <FormField className="w-32">
                 <FormSelect name="scope" defaultValue="read">
-                  <option value="read">Lecture</option>
-                  <option value="admin">Admin</option>
+                  <option value="read">{t("tokens.scopeRead")}</option>
+                  <option value="admin">{t("tokens.scopeAdmin")}</option>
                 </FormSelect>
               </FormField>
-              <Button type="submit">Créer le jeton</Button>
+              <Button type="submit">{t("tokens.createButton")}</Button>
             </FormRow>
           </form>
         </CardContent>
@@ -89,11 +91,11 @@ export default async function TokensPage({
           <table className="w-full">
             <thead>
               <tr className="border-b border-border/60 bg-muted/50">
-                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Nom</th>
-                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Portée</th>
-                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Préfixe</th>
-                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Statut</th>
-                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Actions</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.name")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.scope")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.prefix")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.status")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.actions")}</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-border/60">
@@ -110,9 +112,9 @@ export default async function TokensPage({
                   </td>
                   <td className="px-4 py-3 text-sm">
                     {token.revoked_at ? (
-                      <Badge variant="error">Révoqué</Badge>
+                      <Badge variant="error">{t("tokens.revoked")}</Badge>
                     ) : (
-                      <Badge variant="success">Actif</Badge>
+                      <Badge variant="success">{t("tokens.active")}</Badge>
                     )}
                   </td>
                   <td className="px-4 py-3">
@@ -123,7 +125,7 @@ export default async function TokensPage({
                           <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                           </svg>
-                          Révoquer
+                          {t("tokens.revoke")}
                         </Button>
                       </form>
                     ) : (
@@ -133,7 +135,7 @@ export default async function TokensPage({
                           <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                           </svg>
-                          Supprimer
+                          {t("common.delete")}
                         </Button>
                       </form>
                     )}