feat(ux): fix focus swipe animation, button visibility and mobile scroll

web/src/components/ArticleCard.tsx

@@ -37,8 +37,8 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
         },
         onSwiped: () => resetSwipe(),
         trackMouse: true,
-        preventScrollOnSwipe: true,
-        delta: 10,
+        preventScrollOnSwipe: false,
+        delta: 50,
     });
 
     const resetSwipe = () => {

web/src/components/focus/FocusCardStack.tsx

@@ -24,7 +24,7 @@ interface FocusCardStackProps {
 export function FocusCardStack({ articles, onMarkRead, onKeep, onToggleFavorite, onEmpty }: FocusCardStackProps) {
     const [currentIndex, setCurrentIndex] = useState(0);
     const [readingArticle, setReadingArticle] = useState<Article | null>(null);
-    const [exitX, setExitX] = useState(0);
+    // const [exitX, setExitX] = useState(0); // Removed per simplification
     const isMobile = useIsMobile();
 
     const [isProcessing, setIsProcessing] = useState(false);
@@ -84,7 +84,7 @@ export function FocusCardStack({ articles, onMarkRead, onKeep, onToggleFavorite,
         if (!active && trigger) {
             // Swipe Validé
             const isRight = mx > 0;
-            setExitX(isRight ? 500 : -500); // Trigger exit animation
+            // setExitX(isRight ? 500 : -500); // Trigger exit animation - Removed lateral movement per user request
 
             // Trigger action via handler
             handleAction(isRight ? 'read' : 'keep');
@@ -208,7 +208,7 @@ export function FocusCardStack({ articles, onMarkRead, onKeep, onToggleFavorite,
                                     }
                                 }}
                                 animate={{ scale: 1 - i * 0.05, y: i * 20 }}
-                                exit={{ x: exitX, opacity: 0, scale: 0.9, transition: { duration: 0.2 } }}
+                                exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.2 } }}
                             >
                                 <FocusCard article={article} isTop={isTop} />
                             </motion.div>

web/src/pages/FocusPage.tsx

@@ -89,10 +89,10 @@ export function FocusPage({ onExit }: FocusPageProps) {
                 </div>
                 <button
                     onClick={onExit}
-                    className="flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-nature/10 text-nature shadow-lg hover:bg-nature hover:text-white hover:border-nature hover:scale-105 transition-all duration-300 group"
+                    className="flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-nature/10 text-nature-dark shadow-lg hover:bg-nature hover:text-white hover:border-nature hover:scale-105 transition-all duration-300 group"
                     title="Quitter le mode Focus"
                 >
-                    <span className="text-[10px] font-bold uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity hidden sm:inline-block">
+                    <span className="text-[10px] font-bold uppercase tracking-widest hidden sm:inline-block">
                         Retour au Dashboard
                     </span>
                     <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">