feat(reels): montage Remotion unifié, aperçu en direct, tests et CI

Montage (étape 3) :
- Nouvelle composition ReelVideo : sous-titres animés mot à mot (3 styles :
  Impact, Surligné, Épuré), logo, effet de fin et fondu, en React
- Le service Python prépare l'image (recadrage, HDR, stabilisation, dernière
  image figée) et la piste son finale (/prepare-reel) ; Remotion compose
- Reels d'images sur les mêmes composants, avec le vrai minutage de la voix
- Police Montserrat embarquée (plus de dépendance à Google Fonts)
- REEL_RENDERER=ffmpeg conserve le rendu FFmpeg, plus rapide, en secours
- Script de pré-bundle réparé (échouait en silence : require en ESM)

Interface (étape 4) :
- Aperçu en direct avec @remotion/player, identique au rendu final ; la voix
  testée cale les sous-titres, sinon minutage estimé
- Choix du style de sous-titres sur les 4 pages Reel
- Vraie progression : étape réelle du rendu, échecs visibles 24 h avec leur
  cause ; fin de la barre simulée et du faux « publié avec succès »

Outillage (étape 5) :
- Tests vitest (minutage identique à Python, validation, sécurité) et
  pytest ; CI GitHub Actions (tsc, tests, build, ruff)
- Captures d'écran, out.mp4 et scripts de test retirés de la racine

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Ze4bs7tpF1KGWUk6ZZSZ4

client/src/pages/mobile/new-reel.tsx

@@ -16,7 +16,10 @@ import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { Slider } from "@/components/ui/slider";
 import { useToast } from "@/hooks/use-toast";
-import { VoicePicker, type VoiceSettings } from "@/components/reels/voice-picker";
+import { VoicePicker, isVoicePreviewCurrent, type VoicePreviewResult, type VoiceSettings } from "@/components/reels/voice-picker";
+import { CaptionStylePicker } from "@/components/reels/caption-style-picker";
+import { ReelPreview } from "@/components/reels/reel-preview";
+import { DEFAULT_CAPTION_STYLE, type CaptionStyle } from "@shared/captions";
 import { DEFAULT_TTS_STYLE, DEFAULT_VOICE } from "@shared/voices";
 import { apiRequest, queryClient, handleUnauthorized } from "@/lib/queryClient";
 import type { SocialPage, Media } from "@shared/schema";
@@ -67,6 +70,10 @@ export default function MobileNewReel() {
         style: DEFAULT_TTS_STYLE,
     });
     const { engine: ttsEngine, voice: ttsVoice, style: ttsStyle } = voiceSettings;
+    const [captionStyle, setCaptionStyle] = useState<CaptionStyle>(DEFAULT_CAPTION_STYLE);
+    const [voicePreview, setVoicePreview] = useState<VoicePreviewResult | null>(null);
+    const currentVoice = isVoicePreviewCurrent(voicePreview, overlayText, voiceSettings) ? voicePreview : null;
+    const { data: reelConfig } = useQuery<{ logoUrl: string | null }>({ queryKey: ['/api/reels/config'] });
 
     // État audio preview
     const [isPlaying, setIsPlaying] = useState<string | null>(null);
@@ -203,8 +210,10 @@ export default function MobileNewReel() {
         onSuccess: async (data) => {
             await queryClient.invalidateQueries({ queryKey: ['/api/scheduled-posts'], refetchType: 'all' });
             toast({
-                title: data.success ? "Reel créé !" : "Attention",
-                description: data.success ? "Publication réussie" : "Certaines erreurs",
+                title: "Création du Reel lancée",
+                description: data.queued
+                    ? "Un autre Reel est en cours : le vôtre démarrera juste après."
+                    : "Suivez l'avancement sur l'accueil.",
             });
             navigate('/');
         },
@@ -264,6 +273,7 @@ export default function MobileNewReel() {
             ttsEngine,
             ttsVoice,
             ttsStyle,
+            captionStyle,
             enableEndingEffect,
         });
     };
@@ -456,6 +466,10 @@ export default function MobileNewReel() {
                                 className="text-lg"
                                 rows={3}
                             />
+                            <div className="space-y-1.5 mt-3">
+                                <Label className="text-xs font-medium">Style des sous-titres</Label>
+                                <CaptionStylePicker value={captionStyle} onChange={setCaptionStyle} compact />
+                            </div>
                             <div className="flex items-center space-x-2 mt-4">
                                 <Switch
                                     id="enable-ending-effect"
@@ -490,6 +504,7 @@ export default function MobileNewReel() {
                                             value={voiceSettings}
                                             onChange={setVoiceSettings}
                                             sampleText={overlayText}
+                                            onPreview={setVoicePreview}
                                             compact
                                         />
                                     </div>
@@ -524,6 +539,31 @@ export default function MobileNewReel() {
                 {/* PUBLISH STEP */}
                 {currentStep === 'publish' && (
                     <div className="space-y-6">
+                        {selectedVideo && (
+                            <Card>
+                                <CardHeader className="pb-3">
+                                    <CardTitle className="text-base">Aperçu</CardTitle>
+                                </CardHeader>
+                                <CardContent>
+                                    <div className="max-w-[260px] mx-auto">
+                                        <ReelPreview
+                                            kind="video"
+                                            videoUrl={selectedVideo.originalUrl}
+                                            text={overlayText}
+                                            showCaptions
+                                            captionStyle={captionStyle}
+                                            ttsEnabled={ttsEnabled}
+                                            voice={currentVoice}
+                                            musicUrl={selectedTrack?.previewUrl}
+                                            musicVolume={musicVolume[0] / 100}
+                                            logoUrl={reelConfig?.logoUrl}
+                                            storeName={pages.find((p) => p.id === selectedPages[0])?.pageName}
+                                            endingEffect={enableEndingEffect}
+                                        />
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        )}
                         <Card>
                             <CardHeader className="pb-3">
                                 <CardTitle className="text-base">Diffusion</CardTitle>

client/src/pages/mobile/remotion-video.tsx

@@ -1,6 +1,9 @@
-import { useState, useRef } from "react";
+import { useEffect, useMemo, useState, useRef } from "react";
 import { useToast } from "@/hooks/use-toast";
-import { VoicePicker, type VoiceSettings } from "@/components/reels/voice-picker";
+import { VoicePicker, isVoicePreviewCurrent, type VoicePreviewResult, type VoiceSettings } from "@/components/reels/voice-picker";
+import { CaptionStylePicker } from "@/components/reels/caption-style-picker";
+import { ReelPreview } from "@/components/reels/reel-preview";
+import { DEFAULT_CAPTION_STYLE, type CaptionStyle } from "@shared/captions";
 import { DEFAULT_TTS_STYLE, DEFAULT_VOICE } from "@shared/voices";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -50,6 +53,11 @@ export default function MobileRemotionVideoPage() {
   const [scheduledDate, setScheduledDate] = useState<Date | undefined>(undefined);
   const [publishDescription, setPublishDescription] = useState("");
   const [isPublishing, setIsPublishing] = useState(false);
+  const [captionStyle, setCaptionStyle] = useState<CaptionStyle>(DEFAULT_CAPTION_STYLE);
+  const [voicePreview, setVoicePreview] = useState<VoicePreviewResult | null>(null);
+  const [renderProgress, setRenderProgress] = useState(0);
+  const currentVoice = isVoicePreviewCurrent(voicePreview, overlayText, voiceSettings) ? voicePreview : null;
+  const { data: reelConfig } = useQuery<{ logoUrl: string | null }>({ queryKey: ['/api/reels/config'] });
   const audioRef = useRef<HTMLAudioElement>(null);
   const cameraInputRef = useRef<HTMLInputElement>(null);
   const galleryInputRef = useRef<HTMLInputElement>(null);
@@ -59,6 +67,13 @@ export default function MobileRemotionVideoPage() {
   const { data: audioTracks = [], isLoading: tracksLoading } = useQuery<AudioTrack[]>({ queryKey: ['/api/audio-tracks'] });
   const { data: socialPages = [] } = useQuery<SocialPage[]>({ queryKey: ['/api/pages'] });
 
+  // Aperçu : URL locales des fichiers choisis, libérées quand ils changent
+  const uploadedImageUrls = useMemo(() => images.map((file) => URL.createObjectURL(file)), [images]);
+  useEffect(() => () => uploadedImageUrls.forEach((url) => URL.revokeObjectURL(url)), [uploadedImageUrls]);
+  const musicFileUrl = useMemo(() => (musicFile ? URL.createObjectURL(musicFile) : undefined), [musicFile]);
+  useEffect(() => () => { if (musicFileUrl) URL.revokeObjectURL(musicFileUrl); }, [musicFileUrl]);
+  const previewImages = [...selectedLibraryImages.map((m) => m.originalUrl), ...uploadedImageUrls];
+
   const facebookPages = socialPages.filter(p => p.platform === 'facebook');
   const tiktokAccounts = socialPages.filter(p => p.platform === 'tiktok');
 
@@ -142,6 +157,7 @@ export default function MobileRemotionVideoPage() {
   const handleGenerate = async () => {
     if (totalSelected < 3) { toast({ title: "Minimum 3 images", variant: "destructive" }); return; }
     setIsRendering(true);
+    setRenderProgress(0);
     setVideoUrl(null);
     try {
       const formData = new FormData();
@@ -152,6 +168,7 @@ export default function MobileRemotionVideoPage() {
       formData.append("ttsEngine", voiceSettings.engine);
       formData.append("ttsVoice", voiceSettings.voice);
       formData.append("ttsStyle", voiceSettings.style);
+      formData.append("captionStyle", captionStyle);
       if (selectedPageIds[0]) formData.append("selectedPageId", selectedPageIds[0]);
       if (musicFile) { formData.append("music", musicFile); formData.append("musicVolume", String(musicVolume)); }
       else if (selectedTrack) { formData.append("musicTrackUrl", selectedTrack.url); formData.append("musicVolume", String(musicVolume)); }
@@ -180,6 +197,7 @@ export default function MobileRemotionVideoPage() {
               toast({ title: "Erreur de rendu", description: job.error || "Échec du rendu", variant: "destructive" });
               setIsRendering(false);
             } else {
+              setRenderProgress(job.progress ?? 0);
               setTimeout(checkStatus, 3000);
             }
           } catch (e: any) {
@@ -328,6 +346,10 @@ export default function MobileRemotionVideoPage() {
             )}
             <Textarea placeholder="Texte overlay…" value={overlayText}
               onChange={e => setOverlayText(e.target.value)} rows={2} className="text-sm" />
+            <div className="space-y-1.5">
+              <Label className="text-xs font-medium">Style des sous-titres</Label>
+              <CaptionStylePicker value={captionStyle} onChange={setCaptionStyle} compact />
+            </div>
             <div className="flex items-center gap-3">
               <Switch id="tts-m" checked={ttsEnabled} onCheckedChange={setTtsEnabled} />
               <Label htmlFor="tts-m" className="text-sm">Voix TTS</Label>
@@ -336,7 +358,7 @@ export default function MobileRemotionVideoPage() {
               <div className="space-y-2">
                 <p className="text-xs text-muted-foreground">TTS — voix activée</p>
 
-                <VoicePicker value={voiceSettings} onChange={setVoiceSettings} sampleText={overlayText} compact />
+                <VoicePicker value={voiceSettings} onChange={setVoiceSettings} sampleText={overlayText} onPreview={setVoicePreview} compact />
               </div>
             )}
           </CardContent>
@@ -433,10 +455,37 @@ export default function MobileRemotionVideoPage() {
           </CardContent>
         </Card>
 
+        {/* Aperçu en direct */}
+        {previewImages.length > 0 && (
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Aperçu</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="max-w-[260px] mx-auto">
+                <ReelPreview
+                  kind="images"
+                  images={previewImages}
+                  text={overlayText}
+                  showCaptions
+                  captionStyle={captionStyle}
+                  ttsEnabled={ttsEnabled}
+                  voice={currentVoice}
+                  musicUrl={musicFileUrl ?? selectedTrack?.url}
+                  musicVolume={musicVolume}
+                  logoUrl={reelConfig?.logoUrl}
+                  storeName={socialPages.find((p) => p.id === selectedPageIds[0])?.pageName ?? socialPages[0]?.pageName}
+                  endingEffect
+                />
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
         {/* Générer */}
         <Button onClick={handleGenerate} disabled={isRendering || totalSelected < 3} className="w-full h-12" size="lg">
           {isRendering
-            ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Génération (1-2 min)…</>
+            ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> {renderProgress > 0 ? `Rendu en cours… ${renderProgress} %` : "Préparation (voix, images)…"}</>
             : <><Video className="mr-2 h-4 w-4" /> Générer la vidéo MP4</>}
         </Button>
 

client/src/pages/new-reel.tsx

@@ -25,7 +25,10 @@ import {
     SelectValue,
 } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
-import { VoicePicker, type VoiceSettings } from "@/components/reels/voice-picker";
+import { VoicePicker, isVoicePreviewCurrent, type VoicePreviewResult, type VoiceSettings } from "@/components/reels/voice-picker";
+import { CaptionStylePicker } from "@/components/reels/caption-style-picker";
+import { ReelPreview } from "@/components/reels/reel-preview";
+import { DEFAULT_CAPTION_STYLE, type CaptionStyle } from "@shared/captions";
 import { DEFAULT_TTS_STYLE, DEFAULT_VOICE } from "@shared/voices";
 import { apiRequest, queryClient, handleUnauthorized, getErrorMessage } from "@/lib/queryClient";
 import type { SocialPage, Media } from "@shared/schema";
@@ -89,6 +92,11 @@ export default function NewReel() {
         style: DEFAULT_TTS_STYLE,
     });
     const { engine: ttsEngine, voice: ttsVoice, style: ttsStyle } = voiceSettings;
+    const [captionStyle, setCaptionStyle] = useState<CaptionStyle>(DEFAULT_CAPTION_STYLE);
+    // Dernière voix générée : l'aperçu l'utilise tant que texte et réglages n'ont pas changé
+    const [voicePreview, setVoicePreview] = useState<VoicePreviewResult | null>(null);
+    const currentVoice = isVoicePreviewCurrent(voicePreview, overlayText, voiceSettings) ? voicePreview : null;
+    const { data: reelConfig } = useQuery<{ logoUrl: string | null }>({ queryKey: ['/api/reels/config'] });
 
     // Enable TTS by default on mobile
     useEffect(() => {
@@ -245,10 +253,10 @@ export default function NewReel() {
         onSuccess: async (data) => {
             await queryClient.invalidateQueries({ queryKey: ['/api/scheduled-posts'], refetchType: 'all' });
             toast({
-                title: data.success ? "Reel créé !" : "Reel créé avec avertissements",
-                description: data.success
-                    ? "Votre Reel a été publié avec succès"
-                    : "Certaines pages ont échoué",
+                title: "Création du Reel lancée",
+                description: data.queued
+                    ? "Un autre Reel est en cours : le vôtre démarrera juste après. Suivez l'avancement sur le tableau de bord."
+                    : "Suivez l'avancement sur le tableau de bord.",
             });
             navigate('/');
         },
@@ -406,6 +414,7 @@ export default function NewReel() {
             ttsEngine,
             ttsVoice,
             ttsStyle,
+            captionStyle,
             drawText,
             stabilize: stabilize,
             enableEndingEffect,
@@ -783,6 +792,15 @@ export default function NewReel() {
                                                 </Label>
                                             </div>
 
+                                            {drawText && (
+                                                <div className="mt-3 ml-12">
+                                                    <Label className="text-sm font-medium">Style des sous-titres</Label>
+                                                    <div className="mt-2">
+                                                        <CaptionStylePicker value={captionStyle} onChange={setCaptionStyle} />
+                                                    </div>
+                                                </div>
+                                            )}
+
                                             <div className="flex items-center space-x-2 mt-4">
                                                 <Switch
                                                     id="enable-ending-effect"
@@ -817,6 +835,7 @@ export default function NewReel() {
                                                             value={voiceSettings}
                                                             onChange={setVoiceSettings}
                                                             sampleText={overlayText}
+                                                            onPreview={setVoicePreview}
                                                         />
                                                     </div>
 
@@ -962,31 +981,20 @@ export default function NewReel() {
                                 </CardHeader>
                                 <CardContent>
                                     {selectedVideo ? (
-                                        <div className="relative aspect-[9/16] bg-black rounded-lg overflow-hidden">
-                                            <video
-                                                src={selectedVideo.originalUrl}
-                                                className="w-full h-full object-cover"
-                                                muted
-                                                playsInline
-                                                loop
-                                                autoPlay
-                                            />
-                                            {overlayText && (
-                                                <div className="absolute inset-0 flex items-center justify-center p-4">
-                                                    <p className="text-white text-center text-lg font-bold drop-shadow-lg">
-                                                        {overlayText}
-                                                    </p>
-                                                </div>
-                                            )}
-                                            {selectedTrack && (
-                                                <div className="absolute bottom-4 left-4 right-4 bg-black/50 rounded-lg p-2 flex items-center gap-2">
-                                                    <Music className="w-4 h-4 text-white" />
-                                                    <span className="text-white text-sm truncate">
-                                                        {selectedTrack.title} - {selectedTrack.artist}
-                                                    </span>
-                                                </div>
-                                            )}
-                                        </div>
+                                        <ReelPreview
+                                            kind="video"
+                                            videoUrl={selectedVideo.originalUrl}
+                                            text={overlayText}
+                                            showCaptions={drawText}
+                                            captionStyle={captionStyle}
+                                            ttsEnabled={ttsEnabled}
+                                            voice={currentVoice}
+                                            musicUrl={selectedTrack?.previewUrl}
+                                            musicVolume={musicVolume[0] / 100}
+                                            logoUrl={reelConfig?.logoUrl}
+                                            storeName={pages.find((p) => p.id === selectedPages[0])?.pageName}
+                                            endingEffect={enableEndingEffect}
+                                        />
                                     ) : (
                                         <div className="aspect-[9/16] bg-muted rounded-lg flex items-center justify-center">
                                             <div className="text-center text-muted-foreground">
@@ -1026,115 +1034,6 @@ export default function NewReel() {
                     </div >
                 </div >
             </main >
-            {/* Overlay de progression */}
-            < ProcessingOverlay
-                isVisible={createReelMutation.isPending}
-                stabilize={stabilize}
-                ttsEnabled={ttsEnabled}
-            />
         </div >
     );
 }
-
-function ProcessingOverlay({ isVisible, stabilize, ttsEnabled }: { isVisible: boolean; stabilize: boolean; ttsEnabled: boolean }) {
-    const [progress, setProgress] = useState(0);
-    const [status, setStatus] = useState("Initialisation...");
-
-    useEffect(() => {
-        if (!isVisible) {
-            setProgress(0);
-            return;
-        }
-
-        setProgress(0);
-        setStatus("Préparation des fichiers...");
-
-        const timeouts: any[] = [];
-        let interval: any;
-
-        // Sequence de simulation
-        // 1. 2s: Téléchargement
-        timeouts.push(setTimeout(() => {
-            setStatus("Téléchargement des médias...");
-            setProgress(10);
-        }, 1500));
-
-        // 2. 4s: Audio/TTS
-        timeouts.push(setTimeout(() => {
-            setStatus(ttsEnabled ? "Génération de la voix IA..." : "Mixage audio...");
-            setProgress(25);
-        }, 3500));
-
-        // 3. 7s: Stabilisation ou Encodage
-        timeouts.push(setTimeout(() => {
-            if (stabilize) {
-                setStatus("Stabilisation vidéo (Traitement long)...");
-                setProgress(35);
-
-                // Progression lente : +1% toutes les 800ms
-                // Ça permet de couvrir ~45 secondes avant d'arriver à 90%
-                let p = 35;
-                interval = setInterval(() => {
-                    if (p < 90) {
-                        p++;
-                        setProgress(p);
-                    }
-                }, 800);
-            } else {
-                setStatus("Encodage optimisé...");
-                setProgress(40);
-
-                // Progression pour encodage standard (~10-15s)
-                let p = 40;
-                interval = setInterval(() => {
-                    if (p < 90) {
-                        p += 2;
-                        setProgress(p);
-                    }
-                }, 500);
-            }
-        }, 6500));
-
-        // Nettoyage
-        return () => {
-            timeouts.forEach(clearTimeout);
-            if (interval) clearInterval(interval);
-        };
-    }, [isVisible, stabilize, ttsEnabled]);
-
-    if (!isVisible) return null;
-
-    return (
-        <div className="fixed inset-0 z-[60] bg-black/90 flex flex-col items-center justify-center p-4 backdrop-blur-md animate-in fade-in duration-300">
-            <div className="w-full max-w-md space-y-8 text-center">
-                <div className="relative w-24 h-24 mx-auto mb-8">
-                    <Loader2 className="w-full h-full text-primary animate-spin" />
-                    <div className="absolute inset-0 flex items-center justify-center font-bold text-xl">
-                        {progress}%
-                    </div>
-                </div>
-
-                <div className="space-y-4">
-                    <h3 className="text-2xl font-bold text-white tracking-tight">Création de votre Reel</h3>
-                    <p className="text-lg text-muted-foreground animate-pulse">
-                        {status}
-                    </p>
-                </div>
-
-                <div className="w-full h-2 bg-secondary/30 rounded-full overflow-hidden">
-                    <div
-                        className="h-full bg-primary transition-all duration-300 ease-out"
-                        style={{ width: `${progress}%` }}
-                    />
-                </div>
-
-                {stabilize && (
-                    <div className="flex items-center justify-center gap-2 text-sm text-yellow-500/80 bg-yellow-500/10 py-2 px-4 rounded-full mx-auto w-fit">
-                        <Sparkles className="w-4 h-4" />
-                        <span>Stabilisation activée : traitement prolongé</span>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}

client/src/pages/remotion-video.tsx

@@ -1,8 +1,11 @@
-import { useState, useRef } from "react";
+import { useEffect, useMemo, useState, useRef } from "react";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import { useToast } from "@/hooks/use-toast";
-import { VoicePicker, type VoiceSettings } from "@/components/reels/voice-picker";
+import { VoicePicker, isVoicePreviewCurrent, type VoicePreviewResult, type VoiceSettings } from "@/components/reels/voice-picker";
+import { CaptionStylePicker } from "@/components/reels/caption-style-picker";
+import { ReelPreview } from "@/components/reels/reel-preview";
+import { DEFAULT_CAPTION_STYLE, type CaptionStyle } from "@shared/captions";
 import { DEFAULT_TTS_STYLE, DEFAULT_VOICE } from "@shared/voices";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -51,6 +54,11 @@ export default function RemotionVideoPage() {
   const [scheduledDate, setScheduledDate] = useState<Date | undefined>(undefined);
   const [publishDescription, setPublishDescription] = useState("");
   const [isPublishing, setIsPublishing] = useState(false);
+  const [captionStyle, setCaptionStyle] = useState<CaptionStyle>(DEFAULT_CAPTION_STYLE);
+  const [voicePreview, setVoicePreview] = useState<VoicePreviewResult | null>(null);
+  const [renderProgress, setRenderProgress] = useState(0);
+  const currentVoice = isVoicePreviewCurrent(voicePreview, overlayText, voiceSettings) ? voicePreview : null;
+  const { data: reelConfig } = useQuery<{ logoUrl: string | null }>({ queryKey: ['/api/reels/config'] });
   const audioRef = useRef<HTMLAudioElement>(null);
   const { toast } = useToast();
 
@@ -58,6 +66,13 @@ export default function RemotionVideoPage() {
   const { data: audioTracks = [], isLoading: tracksLoading } = useQuery<AudioTrack[]>({ queryKey: ['/api/audio-tracks'] });
   const { data: socialPages = [] } = useQuery<SocialPage[]>({ queryKey: ['/api/pages'] });
 
+  // Aperçu : URL locales des fichiers choisis, libérées quand ils changent
+  const uploadedImageUrls = useMemo(() => images.map((file) => URL.createObjectURL(file)), [images]);
+  useEffect(() => () => uploadedImageUrls.forEach((url) => URL.revokeObjectURL(url)), [uploadedImageUrls]);
+  const musicFileUrl = useMemo(() => (musicFile ? URL.createObjectURL(musicFile) : undefined), [musicFile]);
+  useEffect(() => () => { if (musicFileUrl) URL.revokeObjectURL(musicFileUrl); }, [musicFileUrl]);
+  const previewImages = [...selectedLibraryImages.map((m) => m.originalUrl), ...uploadedImageUrls];
+
   const facebookPages = socialPages.filter(p => p.platform === 'facebook');
   const tiktokAccounts = socialPages.filter(p => p.platform === 'tiktok');
 
@@ -108,6 +123,7 @@ export default function RemotionVideoPage() {
   const handleGenerate = async () => {
     if (totalSelected < 3) { toast({ title: "Minimum 3 images requises.", variant: "destructive" }); return; }
     setIsRendering(true);
+    setRenderProgress(0);
     setVideoUrl(null);
     try {
       const formData = new FormData();
@@ -118,6 +134,7 @@ export default function RemotionVideoPage() {
       formData.append("ttsEngine", voiceSettings.engine);
       formData.append("ttsVoice", voiceSettings.voice);
       formData.append("ttsStyle", voiceSettings.style);
+      formData.append("captionStyle", captionStyle);
       if (selectedPageIds[0]) formData.append("selectedPageId", selectedPageIds[0]);
       if (musicFile) { formData.append("music", musicFile); formData.append("musicVolume", String(musicVolume)); }
       else if (selectedTrack) { formData.append("musicTrackUrl", selectedTrack.url); formData.append("musicVolume", String(musicVolume)); }
@@ -146,6 +163,7 @@ export default function RemotionVideoPage() {
               toast({ title: "Erreur de rendu", description: job.error || "Échec du rendu", variant: "destructive" });
               setIsRendering(false);
             } else {
+              setRenderProgress(job.progress ?? 0);
               setTimeout(checkStatus, 3000);
             }
           } catch (e: any) {
@@ -268,6 +286,10 @@ export default function RemotionVideoPage() {
           )}
           <Textarea placeholder="Votre texte overlay..." value={overlayText}
             onChange={e => setOverlayText(e.target.value)} rows={3} />
+          <div className="space-y-1.5">
+            <Label className="text-sm font-medium">Style des sous-titres</Label>
+            <CaptionStylePicker value={captionStyle} onChange={setCaptionStyle} />
+          </div>
           <div className="flex items-center gap-3">
             <Switch id="tts" checked={ttsEnabled} onCheckedChange={setTtsEnabled} />
             <Label htmlFor="tts">Activer la voix TTS</Label>
@@ -276,7 +298,7 @@ export default function RemotionVideoPage() {
             <div className="space-y-3 p-3 bg-muted/30 rounded-lg border">
               <p className="text-sm text-muted-foreground">TTS — voix activée</p>
 
-              <VoicePicker value={voiceSettings} onChange={setVoiceSettings} sampleText={overlayText} />
+              <VoicePicker value={voiceSettings} onChange={setVoiceSettings} sampleText={overlayText} onPreview={setVoicePreview} />
             </div>
           )}
         </CardContent>
@@ -379,10 +401,37 @@ export default function RemotionVideoPage() {
         </CardContent>
       </Card>
 
+      {/* Aperçu en direct */}
+      {previewImages.length > 0 && (
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Aperçu</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="max-w-[300px] mx-auto">
+              <ReelPreview
+                kind="images"
+                images={previewImages}
+                text={overlayText}
+                showCaptions
+                captionStyle={captionStyle}
+                ttsEnabled={ttsEnabled}
+                voice={currentVoice}
+                musicUrl={musicFileUrl ?? selectedTrack?.url}
+                musicVolume={musicVolume}
+                logoUrl={reelConfig?.logoUrl}
+                storeName={socialPages.find((p) => p.id === selectedPageIds[0])?.pageName ?? socialPages[0]?.pageName}
+                endingEffect
+              />
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
       {/* Générer */}
       <Button onClick={handleGenerate} disabled={isRendering || totalSelected < 3} className="w-full" size="lg">
         {isRendering
-          ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Génération en cours (1-2 min)...</>
+          ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> {renderProgress > 0 ? `Rendu en cours… ${renderProgress} %` : "Préparation (voix, images)…"}</>
           : <><Video className="mr-2 h-4 w-4" /> Générer la vidéo</>}
       </Button>