feat(web): redesign — three-pane desktop, mobile tab bar, search

Implements the approved design proposal across every screen.

- Layout: feeds · list · reader panes on desktop (≥1280px), list + reader
  with the feeds in a drawer on tablets, one column with a bottom tab bar
  (À lire, Focus, Favoris, Flux) on phones.
- List: dense rows with an unread dot, feed initial and square thumbnail
  instead of large cards; touch swipe reveals the action (→ lu, ← favori).
  The magazine grid stays available as a view toggle.
- Reader: inline pane on desktop, full screen on phones with a bottom
  action bar (favori, partager, original, Suivant); collapsible "Résumé IA"
  block; "Aa" settings become a bottom sheet on phones.
- Search: the existing /articles/search endpoint gets a UI — ⌘K / "/"
  palette on desktop, full screen on phones, with recent searches.
- Mobile "Mes flux" screen: views, subscriptions with errors, theme,
  OPML import/export, logout.
- Focus mode: progress bar, counter and labelled buttons.
- Tokens: new paper / deep-forest palette (all text ≥4.5:1), Newsreader +
  Inter replace Playfair + Lora (two families instead of four), shared
  Icon and FeedAvatar components.

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

web/src/pages/FocusPage.tsx

@@ -4,6 +4,7 @@ import { MotionConfig } from 'framer-motion';
 import { articlesApi } from '../api/articles';
 import { FocusCardStack } from '../components/focus/FocusCardStack';
 import { FocusEmptyState } from '../components/focus/FocusEmptyState';
+import { Icon } from '../components/Icon';
 
 interface FocusPageProps {
     onExit: () => void;
@@ -38,7 +39,7 @@ export function FocusPage({ onExit }: FocusPageProps) {
     } else if (isError) {
         body = (
             <div role="alert" className="flex-1 flex flex-col items-center justify-center gap-4 text-center">
-                <p className="font-serif italic text-xl text-paper-white">Impossible de charger vos articles.</p>
+                <p className="font-serif text-xl text-paper-white">Impossible de charger vos articles.</p>
                 <button onClick={() => refetch()} className="btn-secondary">Réessayer</button>
             </div>
         );
@@ -46,7 +47,7 @@ export function FocusPage({ onExit }: FocusPageProps) {
         body = <FocusEmptyState onBack={onExit} />;
     } else {
         body = (
-            <main className="flex-1 flex items-center justify-center p-4 min-h-0">
+            <main className="flex-1 flex items-center justify-center px-5 pt-2 min-h-0">
                 <FocusCardStack articles={deck} onEmpty={() => setIsComplete(true)} onExit={onExit} />
             </main>
         );
@@ -55,18 +56,12 @@ export function FocusPage({ onExit }: FocusPageProps) {
     return (
         <MotionConfig reducedMotion="user">
             <div className="fixed inset-0 z-50 bg-carbon flex flex-col animate-fade-in" role="region" aria-label="Mode Focus">
-                <header className="flex justify-between items-center p-4 sm:p-6 shrink-0">
-                    <div className="flex items-center gap-2">
-                        <span className="w-2 h-2 rounded-full bg-earth animate-pulse" aria-hidden="true" />
-                        <span className="eyebrow text-paper-white">Mode Focus</span>
-                    </div>
-                    <button onClick={onExit} className="btn-secondary" title="Quitter le mode Focus (Échap)">
-                        <span className="hidden sm:inline">Tableau de bord</span>
-                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                        <span className="sr-only sm:hidden">Quitter</span>
+                <header className="flex items-center gap-2 px-2 sm:px-4 pt-[max(0.5rem,env(safe-area-inset-top))] pb-1 shrink-0">
+                    <button onClick={onExit} className="tool-btn !text-paper-white" aria-label="Quitter le mode Focus" title="Quitter le mode Focus (Échap)">
+                        <Icon name="close" size={22} strokeWidth={2} />
                     </button>
+                    <h1 className="flex-1 text-center font-sans text-[15px] font-bold text-paper-white">Mode Focus</h1>
+                    <span className="w-11" aria-hidden="true" />
                 </header>
                 {body}
             </div>