refactor: polish reader chrome and visual immersion

src/components/reader/components/ControlButtons.tsx

@@ -45,7 +45,7 @@ export const ControlButtons = ({
       {/* Boutons de contrôle */}
       <div
         className={cn(
-          "absolute top-4 left-1/2 -translate-x-1/2 z-30 flex items-center gap-1.5 transition-all duration-300 p-1.5 rounded-full bg-background/70 backdrop-blur-md",
+          "absolute left-1/2 top-4 z-30 flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-border/60 bg-background/55 p-1.5 shadow-[0_8px_28px_-18px_rgba(0,0,0,0.75)] backdrop-blur-xl transition-all duration-300",
           showControls ? "opacity-100" : "opacity-0 pointer-events-none"
         )}
         onClick={(e) => {
@@ -178,7 +178,7 @@ export const ControlButtons = ({
           tooltip={t("reader.controls.previousPage")}
           iconClassName="h-8 w-8"
           className={cn(
-            "absolute top-1/2 -translate-y-1/2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-20",
+            "absolute top-1/2 z-20 -translate-y-1/2 rounded-full border border-border/60 bg-background/55 shadow-[0_8px_24px_-16px_rgba(0,0,0,0.75)] backdrop-blur-xl transition-all duration-300 hover:bg-background/70",
             direction === "rtl" ? "right-4" : "left-4",
             showControls ? "opacity-100" : "opacity-0 pointer-events-none"
           )}
@@ -198,7 +198,7 @@ export const ControlButtons = ({
           tooltip={t("reader.controls.nextPage")}
           iconClassName="h-8 w-8"
           className={cn(
-            "absolute top-1/2 -translate-y-1/2 rounded-full bg-background/70 backdrop-blur-md hover:bg-background/80 transition-all duration-300 z-20",
+            "absolute top-1/2 z-20 -translate-y-1/2 rounded-full border border-border/60 bg-background/55 shadow-[0_8px_24px_-16px_rgba(0,0,0,0.75)] backdrop-blur-xl transition-all duration-300 hover:bg-background/70",
             direction === "rtl" ? "left-4" : "right-4",
             showControls ? "opacity-100" : "opacity-0 pointer-events-none"
           )}

src/components/reader/components/NavigationBar.tsx

@@ -55,7 +55,7 @@ export const NavigationBar = ({
   return (
     <div
       className={cn(
-        "absolute bottom-0 left-0 right-0 bg-background/70 backdrop-blur-md border-t border-border/40 transition-all duration-300 ease-in-out z-30",
+        "absolute bottom-0 left-0 right-0 z-30 border-t border-border/60 bg-background/60 backdrop-blur-xl transition-all duration-300 ease-in-out",
         showThumbnails ? "h-52 opacity-100" : "h-0 opacity-0"
       )}
     >
@@ -63,7 +63,7 @@ export const NavigationBar = ({
         <>
           <div
             id="thumbnails-container"
-            className="h-full overflow-x-auto flex items-center gap-2 px-4 scroll-smooth snap-x snap-mandatory"
+            className="flex h-full snap-x snap-mandatory items-center gap-2 overflow-x-auto px-4 scroll-smooth"
             onTouchStart={(e) => e.stopPropagation()}
             onTouchMove={(e) => e.stopPropagation()}
             onTouchEnd={(e) => e.stopPropagation()}
@@ -89,8 +89,8 @@ export const NavigationBar = ({
             <div className="w-[calc(50vw-18rem)] flex-shrink-0" />
           </div>
 
-          {showControls && (
+            {showControls && (
-            <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 rounded-full bg-background/70 backdrop-blur-md text-sm">
+            <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-full rounded-full border border-border/60 bg-background/60 px-4 py-2 text-sm shadow-[0_8px_24px_-16px_rgba(0,0,0,0.75)] backdrop-blur-xl">
               Page {currentPage} / {pages.length}
             </div>
           )}

src/components/reader/components/PageDisplay.tsx

@@ -38,8 +38,8 @@ export function PageDisplay({
   }, [currentPage, isDoublePage]);
 
   return (
-    <div className="relative flex-1 flex items-center justify-center overflow-hidden w-full">
+    <div className="relative flex w-full flex-1 items-center justify-center overflow-hidden">
-      <div className="relative w-full h-[calc(100vh-2rem)] flex items-center justify-center gap-1">
+      <div className="relative flex h-[calc(100vh-2.5rem)] w-full items-center justify-center gap-1 px-2 sm:px-4">
         {/* Page 1 */}
         <div
           className={cn(
@@ -69,7 +69,7 @@ export function PageDisplay({
             src={imageBlobUrls[currentPage] || getPageUrl(currentPage)}
             alt={`Page ${currentPage}`}
             className={cn(
-              "max-h-full max-w-full object-contain transition-opacity cursor-pointer",
+              "max-h-full max-w-full cursor-pointer rounded-md object-contain transition-opacity",
               isLoading ? "opacity-0" : "opacity-100"
             )}
             loading="eager"
@@ -109,7 +109,7 @@ export function PageDisplay({
               src={imageBlobUrls[currentPage + 1] || getPageUrl(currentPage + 1)}
               alt={`Page ${currentPage + 1}`}
               className={cn(
-                "max-h-full max-w-full object-contain transition-opacity cursor-pointer",
+                "max-h-full max-w-full cursor-pointer rounded-md object-contain transition-opacity",
                 secondPageLoading ? "opacity-0" : "opacity-100"
               )}
               loading="eager"

src/components/reader/components/ReaderContainer.tsx

@@ -18,7 +18,7 @@ export function ReaderContainer({ children, onContainerClick }: ReaderContainerP
   return (
     <div
       ref={readerRef}
-      className="reader-zoom-enabled fixed inset-0 bg-background/95 backdrop-blur-sm z-50 overflow-hidden"
+      className="reader-zoom-enabled fixed inset-0 z-50 overflow-hidden bg-[radial-gradient(90%_70%_at_50%_8%,hsl(var(--primary)/0.1),transparent_50%),linear-gradient(to_bottom,hsl(var(--background)/0.97),hsl(var(--background)/0.93)_40%,hsl(var(--background)))] backdrop-blur-sm"
       onClick={handleContainerClick}
     >
       <div className="relative h-full flex flex-col items-center justify-center">{children}</div>