Merge pull request 'feat: Reels plein écran + admin uploader' (#66) from feat/reels-mobile-polish-and-admin-uploader into main

src/app/admin/carbets/[id]/page.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/lib/admin/carbets";
 import { CarbetForm } from "../_components/CarbetForm";
 import { StatusBadge } from "@/components/admin/StatusBadge";
-import { MediaManager } from "./_components/MediaManager";
+import { MediaUploader } from "@/components/MediaUploader";
 import { StatusActions } from "./_components/StatusActions";
 import { updateCarbetAction } from "../actions";
 
@@ -61,16 +61,21 @@ export default async function EditCarbetPage({ params }: PageProps) {
         </div>
       </header>
 
-      <MediaManager
-        carbetId={carbet.id}
-        media={carbet.media.map((m) => ({
-          id: m.id,
-          type: m.type,
-          s3Key: m.s3Key,
-          s3Url: m.s3Url,
-          sortOrder: m.sortOrder,
-        }))}
-      />
+      <section className="mb-6 rounded-lg border border-zinc-200 bg-white p-5 shadow-sm">
+        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-zinc-500">
+          Médias
+        </h2>
+        <MediaUploader
+          carbetId={carbet.id}
+          initialMedia={carbet.media.map((m) => ({
+            id: m.id,
+            type: m.type,
+            s3Key: m.s3Key,
+            s3Url: m.s3Url,
+            sortOrder: m.sortOrder,
+          }))}
+        />
+      </section>
 
       <CarbetForm
         owners={owners}

src/app/decouvrir/_components/ReelsViewer.tsx

@@ -96,20 +96,39 @@ export function ReelsViewer({ carbets, initialFavoriteIds, isAuthenticated }: Pr
   );
 
   return (
-    <div className="fixed inset-x-0 bottom-0 top-12 z-10 bg-black">
+    <div
+      className="fixed inset-0 z-10 bg-black"
+      style={{
+        // 100dvh sur navigateurs récents pour éviter le saut quand la barre d'URL mobile se masque
+        height: "100dvh",
+      }}
+    >
       {/* Bouton retour catalogue */}
       <Link
         href="/carbets"
-        className="absolute right-3 top-3 z-20 rounded-full bg-white/10 px-3 py-1.5 text-xs font-semibold text-white backdrop-blur hover:bg-white/20"
+        className="absolute right-3 z-20 rounded-full bg-white/10 px-3 py-1.5 text-xs font-semibold text-white backdrop-blur hover:bg-white/20"
+        style={{ top: "max(0.75rem, env(safe-area-inset-top, 0px))" }}
       >
         ← Catalogue
       </Link>
 
       {/* Compteur */}
-      <div className="absolute left-3 top-3 z-20 rounded-full bg-white/10 px-3 py-1.5 text-xs font-semibold text-white backdrop-blur">
+      <div
+        className="absolute left-3 z-20 rounded-full bg-white/10 px-3 py-1.5 text-xs font-semibold text-white backdrop-blur"
+        style={{ top: "max(0.75rem, env(safe-area-inset-top, 0px))" }}
+      >
         {activeIndex + 1} / {carbets.length}
       </div>
 
+      {/* Logo Karbé en surimpression haut centre */}
+      <Link
+        href="/accueil"
+        className="absolute left-1/2 z-20 -translate-x-1/2 text-sm font-semibold text-white/90 hover:text-white"
+        style={{ top: "max(1rem, env(safe-area-inset-top, 0px))" }}
+      >
+        Karbé
+      </Link>
+
       <div
         ref={containerRef}
         className="h-full snap-y snap-mandatory overflow-y-scroll overscroll-contain"

src/components/SiteHeaderGuard.tsx

@@ -21,6 +21,8 @@ export async function SiteHeaderGuard() {
 
   if (pathname.startsWith("/admin")) return null;
   if (pathname === "/connexion" || pathname === "/inscription") return null;
+  // Mode immersif : on cache le header pour donner 100dvh aux Reels
+  if (pathname === "/decouvrir" || pathname.startsWith("/decouvrir/")) return null;
 
   return <SiteHeader />;
 }