feat(backoffice): redesign UI with enhanced background and glassmorphism effects

- Add vibrant radial gradient backgrounds with multiple color zones
- Implement glassmorphism effects on header and cards
- Add subtle grain texture overlay
- Update card hover effects with smooth transitions
- Improve dark mode background visibility

apps/backoffice/app/components/LibrarySubPageHeader.tsx

@@ -0,0 +1,111 @@
+import Link from "next/link";
+import { Card, Badge } from "./ui";
+
+interface LibrarySubPageHeaderProps {
+  library: {
+    id: string;
+    name: string;
+    root_path: string;
+    book_count: number;
+    enabled: boolean;
+  };
+  title: string;
+  icon: React.ReactNode;
+  iconColor?: string;
+  filterInfo?: {
+    label: string;
+    clearHref: string;
+    clearLabel: string;
+  };
+}
+
+export function LibrarySubPageHeader({ 
+  library, 
+  title, 
+  icon, 
+  iconColor = "text-primary",
+  filterInfo 
+}: LibrarySubPageHeaderProps) {
+  return (
+    <div className="space-y-6">
+      {/* Header avec breadcrumb intégré */}
+      <div>
+        <div className="flex items-center gap-2 mb-2">
+          <Link 
+            href="/libraries" 
+            className="inline-flex items-center text-sm text-muted-foreground hover:text-primary transition-colors duration-200"
+          >
+            <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>
+            Libraries
+          </Link>
+          <span className="text-muted-foreground">/</span>
+          <span className="text-sm text-foreground font-medium">{library.name}</span>
+        </div>
+        
+        <h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
+          <span className={iconColor}>{icon}</span>
+          {title}
+        </h1>
+      </div>
+      
+      {/* Info Bar - Version améliorée */}
+      <Card className="bg-muted/30 border-border/40">
+        <div className="p-4">
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
+            {/* Path */}
+            <div className="flex items-center gap-2">
+              <svg className="w-4 h-4 text-muted-foreground" 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>
+              <code className="text-xs font-mono text-muted-foreground bg-background px-2 py-1 rounded border border-border/60">
+                {library.root_path}
+              </code>
+            </div>
+            
+            {/* Divider */}
+            <span className="hidden sm:block w-px h-4 bg-border" />
+            
+            {/* Book count */}
+            <div className="flex items-center gap-2">
+              <svg className="w-4 h-4 text-muted-foreground" 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>
+              <span className="text-foreground">
+                <span className="font-semibold">{library.book_count}</span>
+                <span className="text-muted-foreground ml-1">book{library.book_count !== 1 ? 's' : ''}</span>
+              </span>
+            </div>
+            
+            {/* Divider */}
+            <span className="hidden sm:block w-px h-4 bg-border" />
+            
+            {/* Status */}
+            <Badge 
+              variant={library.enabled ? "success" : "muted"}
+              className="text-xs"
+            >
+              {library.enabled ? "Enabled" : "Disabled"}
+            </Badge>
+          </div>
+        </div>
+      </Card>
+
+      {/* Filter Info (optionnel) */}
+      {filterInfo && (
+        <div className="flex items-center justify-between py-2">
+          <p className="text-muted-foreground text-sm">
+            {filterInfo.label}
+          </p>
+          <Link 
+            href={filterInfo.clearHref as `/libraries/${string}/books`}
+            className="text-sm text-primary hover:text-primary/80 font-medium"
+          >
+            {filterInfo.clearLabel}
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}