From 387e594221f1db8b66245759587138f45969cf84 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 9 Oct 2026 08:11:32 +0000
Subject: [PATCH] =?UTF-8?q?fix(web):=20design=20review=20pass=20=E2=80=94?=
 =?UTF-8?q?=20login=20contrast,=20focus=20labels,=20soft=20placeholders?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Login: the brand-panel headline inherited the ink heading colour and was
  near-invisible on the dark green; it is white again.
- Focus mode: sentence-case labels instead of spaced capitals, like the
  rest of the app.
- Article placeholder covers (grid and focus) use a soft green tint rather
  than a saturated block, which was glaring in dark mode.
- Reader header: "date · 3 min" fits on phones ("de lecture" from sm up).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NsXUyMEGFFGVRcHNVfcBLh
---
 web/src/components/ArticleCard.tsx          |  4 ++--
 web/src/components/AuthShell.tsx            |  4 ++--
 web/src/components/focus/FocusCard.tsx      | 12 ++++++------
 web/src/components/focus/FocusCardStack.tsx |  2 +-
 web/src/components/reader/Reader.tsx        |  2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/src/components/ArticleCard.tsx b/web/src/components/ArticleCard.tsx
index 8087677..ac1adfa 100644
--- a/web/src/components/ArticleCard.tsx
+++ b/web/src/components/ArticleCard.tsx
@@ -17,8 +17,8 @@ interface ArticleCardProps {
 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-center justify-center" aria-hidden="true">
-            <span className="font-serif italic text-on-nature/35 text-7xl leading-none select-none">{initial}</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>
     );
 }
diff --git a/web/src/components/AuthShell.tsx b/web/src/components/AuthShell.tsx
index 3e7a2c8..1489b42 100644
--- a/web/src/components/AuthShell.tsx
+++ b/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>
diff --git a/web/src/components/focus/FocusCard.tsx b/web/src/components/focus/FocusCard.tsx
index 19b1bd5..4c9a3a5 100644
--- a/web/src/components/focus/FocusCard.tsx
+++ b/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>
                 )}
diff --git a/web/src/components/focus/FocusCardStack.tsx b/web/src/components/focus/FocusCardStack.tsx
index b242d2b..03d154c 100644
--- a/web/src/components/focus/FocusCardStack.tsx
+++ b/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>
 
diff --git a/web/src/components/reader/Reader.tsx b/web/src/components/reader/Reader.tsx
index 4102212..66cd3d2 100644
--- a/web/src/components/reader/Reader.tsx
+++ b/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