refonte complète du WebUI (Éditorial Botanique)

Refonte de toutes les vues en conservant l'identité magazine/vert nature,
avec un système de design cohérent et accessible.

- index.css : tokens sémantiques, échelle radius/ombres, classes réutilisables
  (btn-*, chip, surface-card, magazine-content), :focus-visible,
  prefers-reduced-motion, grain papier affiné
- nouveaux composants AuthShell (auth split-screen) et MobileTopBar
  (navigation mobile, auparavant absente)
- framer-motion sur toutes les vues ; AddFeedModal expose l'import OPML ;
  Sidebar ajoute déconnexion + identité utilisateur
- corrections : text-gold cassé -> nature, arithmétique Date -> getTime(),
  suppression de App.css mort, ProtectedRoute en Tailwind,
  snapshot du deck Focus conforme aux règles React

Frontend : npm run lint + build OK.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/components/focus/FocusEmptyState.tsx

@@ -1,30 +1,32 @@
+import { motion } from 'framer-motion';
+
 interface FocusEmptyStateProps {
     onBack: () => void;
 }
 
 export function FocusEmptyState({ onBack }: FocusEmptyStateProps) {
     return (
-        <div className="flex flex-col items-center justify-center h-full text-center space-y-8 animate-fade-in">
+        <motion.div
+            initial={{ opacity: 0, scale: 0.96 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.4 }}
+            className="flex flex-col items-center justify-center h-full text-center space-y-8 px-6"
+        >
             <div className="relative">
-                <div className="w-32 h-32 rounded-full bg-nature/10 flex items-center justify-center animate-bounce-slow">
-                    <span className="text-6xl">🎉</span>
+                <div className="w-28 h-28 rounded-full bg-nature/10 flex items-center justify-center animate-bounce-slow">
+                    <span className="text-5xl">🌿</span>
                 </div>
-                <div className="absolute -top-2 -right-2 w-10 h-10 bg-nature text-white rounded-full flex items-center justify-center font-bold border-4 border-carbon shadow-lg">
+                <div className="absolute -top-1 -right-1 w-9 h-9 bg-nature text-white rounded-full flex items-center justify-center font-bold border-4 border-carbon">
                     ✓
                 </div>
             </div>
 
             <div className="space-y-2">
                 <h1 className="text-4xl font-serif italic text-paper-white">C'est tout pour le moment !</h1>
-                <p className="text-paper-muted uppercase tracking-widest text-xs font-bold">Vous êtes à jour sur vos lectures.</p>
+                <p className="eyebrow text-paper-muted">Vous êtes à jour sur vos lectures.</p>
             </div>
 
-            <button
-                onClick={onBack}
-                className="px-8 py-3 rounded-full bg-nature text-white font-bold text-sm uppercase tracking-widest border border-nature shadow-lg shadow-nature/20 hover:bg-nature-light hover:scale-105 hover:shadow-xl transition-all duration-300"
-            >
-                Retour au Dashboard
-            </button>
-        </div>
+            <button onClick={onBack} className="btn-primary py-3 px-8">Retour au tableau de bord</button>
+        </motion.div>
     );
 }