Merge pull request #7 from R0m1k3/claude/quirky-bardeen-97n4j4

Images des articles rétablies, grille pleine largeur, passe de revue design

web/src/components/ArticleCard.tsx

@@ -15,9 +15,10 @@ interface ArticleCardProps {
 
 /** Initial-letter cover used when a feed provides no image (no third-party fallback). */
 function CoverFallback({ title, feed }: { title: string; feed?: string }) {
+    const initial = (feed || title).trim().charAt(0).toUpperCase();
     return (
-        <div className="w-full h-full bg-gradient-to-br from-nature/90 to-nature-dark flex items-end p-5">
-            <span className="font-serif italic text-on-nature/90 text-lg leading-snug line-clamp-3">{feed || title}</span>
+        <div className="w-full h-full bg-nature/12 flex items-center justify-center" aria-hidden="true">
+            <span className="font-serif italic text-nature/45 text-7xl leading-none select-none">{initial}</span>
         </div>
     );
 }
@@ -25,6 +26,7 @@ function CoverFallback({ title, feed }: { title: string; feed?: string }) {
 function ArticleCardImpl({ article, index, isCurrent, onOpen, onToggleRead, onToggleFavorite }: ArticleCardProps) {
     const [offset, setOffset] = useState(0);
     const [imgFailed, setImgFailed] = useState(false);
+    const [imgLoaded, setImgLoaded] = useState(false);
 
     // Touch-only swipe: right = read/unread, left = favorite. Mouse drags (text
     // selection) never trigger it.
@@ -80,12 +82,15 @@ function ArticleCardImpl({ article, index, isCurrent, onOpen, onToggleRead, onTo
                             referrerPolicy="no-referrer"
                             width={640}
                             height={360}
-                            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
+                            className={`w-full h-full object-cover transition-[transform,opacity] duration-700 group-hover:scale-[1.03] ${imgLoaded ? 'opacity-100' : 'opacity-0'}`}
+                            onLoad={() => setImgLoaded(true)}
                             onError={() => setImgFailed(true)}
                         />
                     ) : (
                         <CoverFallback title={article.title} feed={article.feed_title} />
                     )}
+                    {/* Light bottom shade: gives the cover depth and lifts the feed chip. */}
+                    <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/30 to-transparent pointer-events-none" aria-hidden="true" />
                     <span className="absolute bottom-3 left-3 chip bg-carbon-light/95 shadow-sm max-w-[75%] truncate">
                         {article.feed_title || 'Journal'}
                     </span>

web/src/components/AuthShell.tsx

@@ -38,7 +38,7 @@ export function AuthShell({ eyebrow, title, subtitle, children }: AuthShellProps
                     transition={{ duration: 0.7, delay: 0.1 }}
                     className="relative z-10 space-y-6"
                 >
-                    <h2 className="text-5xl font-serif italic leading-[1.1] text-balance">
+                    <h2 className="text-5xl font-serif italic leading-[1.1] text-balance text-white">
                         Le calme dans le chaos de l'information.
                     </h2>
                     <p className="text-white/70 font-reading text-lg max-w-sm leading-relaxed">
@@ -46,7 +46,7 @@ export function AuthShell({ eyebrow, title, subtitle, children }: AuthShellProps
                     </p>
                 </motion.div>
 
-                <p className="relative z-10 text-white/40 text-[10px] uppercase tracking-[0.4em] font-bold">
+                <p className="relative z-10 text-white/50 text-xs">
                     FlowReader · Édition 2026
                 </p>
             </aside>

web/src/components/TopBar.tsx

@@ -211,7 +211,7 @@ export function TopBar({ onSelectFeed, selectedFeedId, onEnterFocus }: TopBarPro
     return (
         <>
             <header className="sticky top-0 z-30 bg-carbon/95 border-b border-paper-muted/12" style={{ paddingTop: 'env(safe-area-inset-top)' }}>
-                <div className="max-w-[1400px] mx-auto px-4 sm:px-6 md:px-12 h-16 flex items-center gap-3 sm:gap-6">
+                <div className="max-w-[2400px] mx-auto px-4 sm:px-6 md:px-12 h-16 flex items-center gap-3 sm:gap-6">
                     <span className="hidden sm:block text-nature text-lg font-serif shrink-0" aria-hidden="true">
                         FlowReader
                     </span>

web/src/components/focus/FocusCard.tsx

@@ -24,19 +24,19 @@ export function FocusCard({ article, isTop = false }: FocusCardProps) {
                         onError={(e) => (e.currentTarget.style.display = 'none')}
                     />
                 ) : (
-                    <div className="w-full h-full bg-gradient-to-br from-nature to-nature-dark p-8 flex items-end">
-                        <span className="text-2xl font-serif italic text-on-nature/95 leading-tight line-clamp-3">{article.feed_title}</span>
+                    <div className="w-full h-full bg-nature/12 p-8 flex items-end">
+                        <span className="text-2xl font-serif italic text-nature leading-tight line-clamp-3">{article.feed_title}</span>
                     </div>
                 )}
-                <span className="absolute top-4 right-4 bg-black/55 text-white text-[11px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-full">
+                <span className="absolute top-4 right-4 bg-black/55 text-white text-xs font-semibold px-3 py-1.5 rounded-full">
                     {readingTimeLabel(article.reading_time)}
                 </span>
             </div>
 
             {/* Body */}
             <div className="flex-1 p-5 sm:p-6 flex flex-col min-h-0">
-                <div className="flex items-center justify-between gap-3 mb-3 text-[11px] uppercase tracking-widest font-bold text-paper-muted">
-                    <span className="flex items-center gap-2 text-nature truncate">
+                <div className="flex items-center justify-between gap-3 mb-3 text-xs text-paper-muted">
+                    <span className="flex items-center gap-2 text-nature font-semibold truncate">
                         <span className="w-1.5 h-1.5 rounded-full bg-nature shrink-0" aria-hidden="true" />
                         <span className="truncate">{article.feed_title || 'Journal'}</span>
                     </span>
@@ -54,7 +54,7 @@ export function FocusCard({ article, isTop = false }: FocusCardProps) {
                 )}
 
                 {isTop && (
-                    <p className="mt-auto pt-3 text-center text-[11px] uppercase tracking-widest font-bold text-paper-muted hidden sm:block">
+                    <p className="mt-auto pt-3 text-center text-xs text-paper-muted hidden sm:block">
                         ← Garder · Lu → · Entrée pour lire
                     </p>
                 )}

web/src/components/focus/FocusCardStack.tsx

@@ -144,7 +144,7 @@ export function FocusCardStack({ articles, onEmpty, onExit }: FocusCardStackProp
         <div className="relative w-full h-full flex flex-col items-center justify-center gap-6">
             <p className="sr-only" aria-live="polite">{announce}</p>
 
-            <span className="inline-block bg-nature-dark/80 px-4 py-2 rounded-full text-white text-[11px] uppercase font-bold tracking-widest">
+            <span className="inline-block bg-nature-dark/80 px-4 py-2 rounded-full text-white text-xs font-semibold">
                 {articles.length - currentIndex} restant{articles.length - currentIndex > 1 ? 's' : ''}
             </span>
 

web/src/components/reader/Reader.tsx

@@ -255,7 +255,7 @@ export function Reader({ article: listArticle, next, hasPrev, onClose, onNext, o
                         <div className="flex-1 min-w-0 text-sm">
                             <p className="font-semibold text-nature truncate">{listArticle.feed_title || 'Article'}</p>
                             <p className="text-paper-muted truncate">
-                                <time dateTime={date}>{formatLong(date)}</time>, {readingTimeLabel(listArticle.reading_time)} de lecture
+                                <time dateTime={date}>{formatLong(date)}</time> · {readingTimeLabel(listArticle.reading_time)}<span className="hidden sm:inline"> de lecture</span>
                             </p>
                         </div>
                         <button

web/src/index.css

@@ -113,6 +113,13 @@
   text-wrap: pretty;
 }
 
+/* Article grid: as many ~20rem columns as the width allows. */
+@utility article-grid {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
+}
+
 /* Skip rendering work for off-screen cards in long lists. */
 @utility cv-auto {
   content-visibility: auto;

web/src/pages/DashboardPage.tsx

@@ -224,7 +224,7 @@ export function DashboardPage({ selectedFeedId, hidden }: DashboardPageProps) {
 
     return (
         <main ref={mainRef} className={`flex-1 overflow-y-auto bg-carbon relative ${hidden ? 'hidden' : ''}`} aria-busy={isFetching}>
-            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 md:px-12 py-6 md:py-8">
+            <div className="max-w-[2400px] mx-auto px-4 sm:px-6 md:px-12 py-6 md:py-8">
                 {/* The page title is the feed selector in the top bar. */}
                 <div className="mb-6 flex flex-wrap items-center justify-between gap-x-6 gap-y-3">
                     <p className="text-paper-muted text-sm" aria-live="polite">
@@ -284,7 +284,7 @@ export function DashboardPage({ selectedFeedId, hidden }: DashboardPageProps) {
 
                 {/* Grid */}
                 {isPending ? (
-                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3" aria-label="Chargement des articles" role="status">
+                    <div className="article-grid" aria-label="Chargement des articles" role="status">
                         {Array.from({ length: 6 }, (_, i) => (
                             <div key={i} className="rounded-2xl bg-carbon-light border border-paper-muted/10 overflow-hidden">
                                 <div className="aspect-[16/9] bg-carbon-dark animate-pulse" />
@@ -306,7 +306,7 @@ export function DashboardPage({ selectedFeedId, hidden }: DashboardPageProps) {
                 ) : articles.length > 0 ? (
                     <>
                         <div
-                            className={`grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3 transition-opacity ${isPlaceholderData ? 'opacity-60' : ''}`}
+                            className={`article-grid transition-opacity ${isPlaceholderData ? 'opacity-60' : ''}`}
                         >
                             {articles.map((article, i) => (
                                 <ArticleCard

web/vite.config.ts

@@ -67,15 +67,9 @@ export default defineConfig({
               cacheableResponse: { statuses: [200] },
             },
           },
-          {
-            urlPattern: ({ request }) => request.destination === 'image',
-            handler: 'StaleWhileRevalidate',
-            options: {
-              cacheName: 'images',
-              expiration: { maxEntries: 400, maxAgeSeconds: 60 * 60 * 24 * 30, purgeOnQuotaError: true },
-              cacheableResponse: { statuses: [0, 200] },
-            },
-          },
+          // No image route: feed images are cross-origin, and a fetch() from
+          // the worker is bound by the CSP's connect-src 'self', so it would
+          // fail every cover. The browser's HTTP cache handles them instead.
           {
             urlPattern: ({ request }) => request.destination === 'font',
             handler: 'CacheFirst',