From 9cfd4e4e934c347dd52bacb35671bdb8b2309800 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 14 Jul 2026 06:53:20 +0000
Subject: [PATCH] Corrige le fondu du carrousel de logos (coupait les cartes
 net)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le fondu en CSS mask-image ne s'affichait pas correctement : les cartes
en bord de carrousel étaient tronquées net au lieu de s'estomper.
Remplacé par un vrai dégradé en overlay (deux calques blanc→transparent
superposés aux bords), plus fiable visuellement, avec une largeur de
fondu réduite sur mobile.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fkg15RCxNgUys4ru73He2o
---
 web/src/pages/Home.jsx |  2 ++
 web/src/styles.css     | 13 ++++++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/Home.jsx b/web/src/pages/Home.jsx
index e6ffcd8..5607502 100644
--- a/web/src/pages/Home.jsx
+++ b/web/src/pages/Home.jsx
@@ -187,6 +187,8 @@ export default function Home() {
         </div>
         <div className="container">
           <div className="marquee-mask">
+            <div className="marquee-fade marquee-fade-left" />
+            <div className="marquee-fade marquee-fade-right" />
             <div className="marquee-track">
               {marquee.map((m, i) => (
                 <div key={`${m.id}-${i}`} style={{ width: 210, flexShrink: 0, background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 4, padding: '22px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
diff --git a/web/src/styles.css b/web/src/styles.css
index 06e3d3d..1fe81da 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -33,11 +33,14 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--r
 @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
 .marquee-track { display: flex; gap: 20px; width: max-content; animation: marquee 46s linear infinite; padding: 0 10px; }
 .marquee-track:hover { animation-play-state: paused; }
-.marquee-mask {
-  position: relative;
-  overflow: hidden;
-  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+.marquee-mask { position: relative; overflow: hidden; }
+.marquee-fade {
+  position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none;
+}
+.marquee-fade-left { left: 0; background: linear-gradient(90deg, var(--marquee-bg, #fff), transparent); }
+.marquee-fade-right { right: 0; background: linear-gradient(270deg, var(--marquee-bg, #fff), transparent); }
+@media (max-width: 640px) {
+  .marquee-fade { width: 40px; }
 }
 
 .container { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }