From 8bc7109392a1e22293059d36c04cf5c298b41c17 Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Thu, 29 Jan 2026 13:03:02 +0100
Subject: [PATCH] fix: move stabilization toggle to bottom for better
 visibility

---
 client/src/pages/mobile/new-reel.tsx | 33 ++++++++++++++--------------
 task.md                              |  1 +
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/client/src/pages/mobile/new-reel.tsx b/client/src/pages/mobile/new-reel.tsx
index d2eaf27..90db4c2 100644
--- a/client/src/pages/mobile/new-reel.tsx
+++ b/client/src/pages/mobile/new-reel.tsx
@@ -271,22 +271,6 @@ export default function MobileNewReel() {
                 {/* VIDEO STEP */}
                 {currentStep === 'video' && (
                     <div className="space-y-4">
-                        <Card className="bg-primary/5 border-primary/20">
-                            <CardContent className="p-4 space-y-4">
-                                <div className="flex items-center justify-between">
-                                    <div className="space-y-0.5">
-                                        <div className="text-sm font-medium flex items-center gap-2">
-                                            <Sparkles className="w-4 h-4 text-primary" /> Stabilisation Vidéo (Anti-tremblements)
-                                        </div>
-                                        <div className="text-xs text-muted-foreground">Corrige les secousses (Recommandé main levée). Désactiver sur trépied.</div>
-                                    </div>
-                                    <Switch
-                                        checked={stabilize}
-                                        onCheckedChange={(checked) => setStabilize(!!checked)}
-                                    />
-                                </div>
-                            </CardContent>
-                        </Card>
 
                         <div {...getRootProps()} className={`border-2 border-dashed rounded-xl p-6 text-center ${isDragActive ? 'border-primary bg-primary/5' : 'border-muted'}`}>
                             <input {...getInputProps()} />
@@ -331,6 +315,23 @@ export default function MobileNewReel() {
                             )}
                         </div>
 
+                        <Card className="bg-primary/5 border-primary/20">
+                            <CardContent className="p-4 space-y-4">
+                                <div className="flex items-center justify-between">
+                                    <div className="space-y-0.5">
+                                        <div className="text-sm font-medium flex items-center gap-2">
+                                            <Sparkles className="w-4 h-4 text-primary" /> Stabilisation Vidéo (Anti-tremblements)
+                                        </div>
+                                        <div className="text-xs text-muted-foreground">Corrige les secousses (Recommandé main levée). Désactiver sur trépied.</div>
+                                    </div>
+                                    <Switch
+                                        checked={stabilize}
+                                        onCheckedChange={(checked) => setStabilize(!!checked)}
+                                    />
+                                </div>
+                            </CardContent>
+                        </Card>
+
                         {selectedVideo && (
                             <Button className="w-full h-12 text-lg sticky bottom-4 shadow-xl" onClick={goNext}>
                                 Suivant <ChevronRight className="ml-2 w-5 h-5" />
diff --git a/task.md b/task.md
index 9e2b49b..341a0b1 100644
--- a/task.md
+++ b/task.md
@@ -118,6 +118,7 @@ Ajout d'une fonctionnalité complète de création de Reels Facebook permettant
   - [x] Ajouter une flèche ou une animation pour attirer l'œil sur le Switch de stabilisation
   - [x] S'assurer que le bouton "Suivant" est bien visible sous le Switch
   - [x] Renommer toggle stabilisation pour clarté (Anti-tremblements)
+  - [x] Déplacer le toggle en bas de page (UX)
 - [x] **Phase 12: Optimisation Safari (Bypass Compression)** ✅
   - [x] Ajouter l'attribut `multiple` à l'input file pour forcer l'envoi du fichier original (Bypass Safari downscaling)
   - [x] Mettre à jour les MIME types pour inclure `video/quicktime` (iPhone natif)