fix: aligner la page livre sur le layout de la page série

- Cover w-48 → w-40 (cohérent avec la page série)
- Titre séparé, auteur + série + statut de lecture regroupés en badges
- Métadonnées (format, pages, langue, ISBN, date) en ligne texte
  au lieu de pills (style série)
- Toolbar d'actions groupée en bas (Edit, MarkRead, Convert, Delete)
- Tous les boutons d'action (MarkBookRead, Convert, Delete) alignés en
  py-1.5 au lieu de Button size=sm (h-9)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/backoffice/app/components/ConvertButton.tsx

@@ -61,13 +61,13 @@ export function ConvertButton({ bookId }: ConvertButtonProps) {
   }
 
   return (
-    <Button
-      variant="secondary"
-      size="sm"
+    <button
+      type="button"
       onClick={handleConvert}
       disabled={state.type === "loading"}
+      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 disabled:opacity-50"
     >
       {state.type === "loading" ? t("convert.converting") : t("convert.convertToCbz")}
-    </Button>
+    </button>
   );
 }

apps/backoffice/app/components/DeleteBookButton.tsx

@@ -26,15 +26,15 @@ export function DeleteBookButton({ bookId, libraryId }: { bookId: string; librar
 
   return (
     <>
-      <Button
-        variant="destructive"
-        size="sm"
+      <button
+        type="button"
         onClick={() => setShowConfirm(true)}
         disabled={deleting}
+        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-destructive/30 bg-destructive/10 text-destructive text-sm font-medium hover:bg-destructive/20 transition-colors disabled:opacity-50"
       >
         {deleting ? <Icon name="spinner" size="sm" className="animate-spin" /> : <Icon name="trash" size="sm" />}
-        <span className="ml-1.5">{t("bookDetail.delete")}</span>
-      </Button>
+        {t("bookDetail.delete")}
+      </button>
 
       <Modal isOpen={showConfirm} onClose={() => setShowConfirm(false)} maxWidth="sm">
         <div className="p-6">

apps/backoffice/app/components/MarkBookReadButton.tsx

@@ -40,11 +40,15 @@ export function MarkBookReadButton({ bookId, currentStatus }: MarkBookReadButton
   };
 
   return (
-    <Button
-      variant={isRead ? "outline" : "primary"}
-      size="sm"
+    <button
+      type="button"
       onClick={handleClick}
       disabled={loading}
+      className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-sm font-medium transition-colors disabled:opacity-50 ${
+        isRead
+          ? "border-border bg-card text-muted-foreground hover:text-foreground hover:border-primary"
+          : "border-green-500/30 bg-green-500/10 text-green-600 hover:bg-green-500/20"
+      }`}
     >
       {loading ? (
         <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
@@ -52,15 +56,15 @@ export function MarkBookReadButton({ bookId, currentStatus }: MarkBookReadButton
           <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
         </svg>
       ) : isRead ? (
-        <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
         </svg>
       ) : (
-        <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
         </svg>
       )}
       {!loading && label}
-    </Button>
+    </button>
   );
 }