feat(web): unified reader with reading settings, faster lists, a11y

- New Reader (desktop + mobile): loads full content on open, prefetches
  the next article, reading progress and time, "Aa" settings (light /
  sepia / dark / auto theme, serif / sans / Atkinson Hyperlegible font,
  size, line height, measure), Space-to-next, keyboard shortcuts, focus
  management, inert background, URL-driven (?a=) so Back closes it.
- Dashboard: cursor pagination, unread/all filter, CSS grid (no masonry),
  no re-sorting under the reader, optimistic cache patches instead of
  refetch storms, "new articles" banner, error/offline states, j/k/o/m/s/v
  shortcuts and help dialog.
- Cards: keyboard-openable, lazy <img>, memoized, touch-only swipe.
- Focus mode: framer drag (drop @use-gesture), Read button, undo restores
  unread state, arrow keys.
- WebSocket: single connection, backoff, cache patching, no console logs.
- Contrast fixes (on-nature tokens), 44px targets, lang="fr", reduced
  motion, self-hosted fonts, theme applied before first paint.
- Code splitting + vendor chunk, prompt-based PWA updates, smaller
  precache, offline cache for opened articles and images, caches cleared
  on logout; upgrade react-router (CVE), drop unused deps and assets.

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

web/src/components/ThemeToggle.tsx

@@ -1,24 +1,14 @@
-import { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
+import { usePrefs } from '../stores/prefsStore';
 
-type Theme = 'light' | 'dark';
-
-function getInitialTheme(): Theme {
-    const stored = localStorage.getItem('theme');
-    if (stored === 'light' || stored === 'dark') return stored;
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+function isDarkNow() {
+    return document.documentElement.classList.contains('dark');
 }
 
+/** Quick light/dark switch. Sepia and "system" live in the reader settings. */
 export function ThemeToggle() {
-    const [theme, setTheme] = useState<Theme>(getInitialTheme);
-
-    useEffect(() => {
-        const root = window.document.documentElement;
-        root.classList.toggle('dark', theme === 'dark');
-        localStorage.setItem('theme', theme);
-    }, [theme]);
-
-    const isDark = theme === 'dark';
+    const theme = usePrefs((s) => s.theme);
+    const setTheme = usePrefs((s) => s.setTheme);
+    const isDark = theme === 'dark' || (theme === 'system' && isDarkNow());
 
     return (
         <button
@@ -26,16 +16,10 @@ export function ThemeToggle() {
             className="icon-btn"
             role="switch"
             aria-checked={isDark}
-            aria-label={isDark ? 'Activer le mode clair' : 'Activer le mode sombre'}
+            aria-label="Mode sombre"
             title={isDark ? 'Activer le mode clair' : 'Activer le mode sombre'}
         >
-            <motion.span
-                key={theme}
-                initial={{ rotate: -90, opacity: 0, scale: 0.5 }}
-                animate={{ rotate: 0, opacity: 1, scale: 1 }}
-                transition={{ duration: 0.3 }}
-                className="flex"
-            >
+            <span key={isDark ? 'd' : 'l'} className="flex animate-fade-in">
                 {isDark ? (
                     <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
@@ -45,7 +29,7 @@ export function ThemeToggle() {
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                     </svg>
                 )}
-            </motion.span>
+            </span>
         </button>
     );
 }