From a2e485f15e354cdcdfb20ae959c14d09184ed745 Mon Sep 17 00:00:00 2001
From: Antigravity Agent <antigravity@gemini.google.com>
Date: Wed, 4 Feb 2026 21:20:43 +0100
Subject: [PATCH] style(ui): improve masonry alignment, darken button borders,
 and enhance hover shadows

---
 web/src/components/ArticleCard.tsx | 4 ++--
 web/src/components/ReaderView.tsx  | 4 ++--
 web/src/index.css                  | 3 ++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/src/components/ArticleCard.tsx b/web/src/components/ArticleCard.tsx
index 5840b54..564d18d 100644
--- a/web/src/components/ArticleCard.tsx
+++ b/web/src/components/ArticleCard.tsx
@@ -11,7 +11,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
     const timeToRead = Math.ceil((article.content?.length || 500) / 1000) + 1;
 
     return (
-        <article className="magazine-card group cursor-pointer break-inside-avoid mb-8 hover:shadow-2xl hover:shadow-gold/10 transition-shadow duration-500 rounded-xl" onClick={() => onClick(article)}>
+        <article className="magazine-card group cursor-pointer break-inside-avoid-column inline-block w-full mb-8 hover:shadow-2xl hover:shadow-gold/20 transition-all duration-500 rounded-xl border border-transparent hover:border-gold/10" onClick={() => onClick(article)}>
             {/* Image Placeholder with Gold Overlay */}
             <div className="aspect-[16/10] overflow-hidden rounded-xl bg-carbon-light relative mb-6">
                 <div className="absolute inset-0 bg-gradient-to-t from-carbon-dark/80 via-transparent to-transparent opacity-60 z-10"></div>
@@ -64,7 +64,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
                                 e.stopPropagation();
                                 onToggleRead(article.id, !article.is_read);
                             }}
-                            className={`p-1.5 rounded-full transition-all duration-300 border ${article.is_read ? 'text-gold/40 border-gold/10' : 'text-gold bg-gold/10 border-carbon/20 hover:bg-gold/20'}`}
+                            className={`p-1.5 rounded-full transition-all duration-300 border ${article.is_read ? 'text-gold/40 border-gold/10' : 'text-gold bg-gold/5 border-paper-white/40 hover:bg-gold/20 hover:border-paper-white'}`}
                             title={article.is_read ? "Marquer comme non lu" : "Marquer comme lu"}
                         >
                             <svg className="w-4 h-4" fill={article.is_read ? "none" : "currentColor"} viewBox="0 0 24 24" stroke="currentColor">
diff --git a/web/src/components/ReaderView.tsx b/web/src/components/ReaderView.tsx
index 7c96bb7..a395361 100644
--- a/web/src/components/ReaderView.tsx
+++ b/web/src/components/ReaderView.tsx
@@ -77,8 +77,8 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
                             <button
                                 onClick={() => onToggleFavorite(article.id)}
                                 className={`flex items-center space-x-3 px-6 py-2.5 rounded-full border transition-all duration-500 ${article.is_favorite
-                                    ? 'bg-gold text-carbon border-carbon/20 shadow-lg'
-                                    : 'border-gold/20 text-gold hover:bg-gold/5'
+                                    ? 'bg-gold text-carbon border-paper-white/20 shadow-lg'
+                                    : 'border-paper-white/20 text-gold hover:bg-gold/5'
                                     }`}
                             >
                                 <svg className="w-4 h-4" fill={article.is_favorite ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor">
diff --git a/web/src/index.css b/web/src/index.css
index 1f25de5..ca0bb62 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -73,8 +73,9 @@
     column-count: 1;
     column-gap: 2rem;
     padding: 2rem 0;
+    column-fill: balance;
   }
-  
+
   @media (min-width: 768px) {
     .magazine-grid {
       column-count: 2;