Retire l'animation vidéo derrière les stats du hero

L'utilisateur a jugé le rendu de la vidéo non satisfaisant. Retour à
un bloc de statistiques simple, sans élément de fond animé.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fkg15RCxNgUys4ru73He2o

server/src/index.js

@@ -50,7 +50,6 @@ app.use(
         styleSrc: ["'self'", "'unsafe-inline'", 'https://fonts.googleapis.com'],
         fontSrc: ['https://fonts.gstatic.com'],
         imgSrc: ["'self'", 'data:', 'blob:'],
-        mediaSrc: ["'self'"],
         connectSrc: ["'self'"],
         frameSrc: ["'self'", 'https://www.google.com', 'https://maps.google.com'],
         frameAncestors: ["'none'"],

web/src/components/HeroPlayerVideo.jsx

@@ -1,24 +0,0 @@
-// Purely decorative real video of a basketball player dribbling, animated
-// behind the hero stats row. Desaturated to black & white at runtime via
-// CSS (no source video processing available in this environment). Source:
-// Pexels stock footage (free commercial license, no attribution required,
-// anonymous player) — see web/public/assets/hero-player.mp4.
-export default function HeroPlayerVideo({ className = '' }) {
-  const reduceMotion =
-    typeof window !== 'undefined' &&
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-  return (
-    <video
-      className={`hero-stats-video ${className}`.trim()}
-      src="/assets/hero-player.mp4"
-      autoPlay={!reduceMotion}
-      loop={!reduceMotion}
-      muted
-      playsInline
-      preload="auto"
-      aria-hidden="true"
-      tabIndex={-1}
-    />
-  );
-}

web/src/pages/Home.jsx

@@ -7,7 +7,6 @@ import Modal from '../components/Modal.jsx';
 import PastEventCard from '../components/PastEventCard.jsx';
 import { AdhesionForm, AdhesionModal } from '../components/AdhesionForm.jsx';
 import { associationSettings } from '../lib/siteSettings.js';
-import HeroPlayerVideo from '../components/HeroPlayerVideo.jsx';
 
 export function InscriptionModal({ rencontre, onClose, onDone }) {
   const { user, login } = useAuth();
@@ -266,16 +265,13 @@ export default function Home() {
               <button className="btn btn-outline">Découvrir l'association</button>
             </Link>
           </div>
-          <div className="hero-stats-wrap" style={{ position: 'relative', marginTop: 54, paddingTop: 34, borderTop: '1px solid var(--border)' }}>
+          <div style={{ display: 'flex', gap: 42, marginTop: 54, paddingTop: 34, borderTop: '1px solid var(--border)' }}>
-            <HeroPlayerVideo />
+            {[[String(members.length), 'entreprises membres'], [String(passees.length), 'rencontres organisées'], ['30 ans', 'de partenariat']].map(([n, l]) => (
-            <div style={{ display: 'flex', gap: 42, position: 'relative', zIndex: 1 }}>
+              <div key={l}>
-              {[[String(members.length), 'entreprises membres'], [String(passees.length), 'rencontres organisées'], ['30 ans', 'de partenariat']].map(([n, l]) => (
+                <div className="serif" style={{ fontSize: 34, fontWeight: 600 }}>{n}</div>
-                <div key={l}>
+                <div style={{ fontSize: 13, color: 'var(--gray-light)', marginTop: 2 }}>{l}</div>
-                  <div className="serif" style={{ fontSize: 34, fontWeight: 600 }}>{n}</div>
+              </div>
-                  <div style={{ fontSize: 13, color: 'var(--gray-light)', marginTop: 2 }}>{l}</div>
+            ))}
-                </div>
-              ))}
-            </div>
           </div>
         </div>
         <div style={{ position: 'relative' }}>

web/src/styles.css

@@ -43,25 +43,6 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--r
   .marquee-fade { width: 40px; }
 }
 
-/* Hero stats background: a real video of a basketball player dribbling,
-   behind the "entreprises membres / rencontres organisées / X ans" row.
-   Pexels stock footage (free commercial license, no attribution required,
-   anonymous player), desaturated at runtime via CSS. */
-.hero-stats-wrap { overflow: visible; }
-.hero-stats-video {
-  position: absolute; right: -20px; bottom: -34px;
-  width: 420px; height: 130px;
-  object-fit: cover; object-position: 60% 35%;
-  pointer-events: none;
-  filter: grayscale(1) contrast(1.05) brightness(1.05);
-  opacity: .22;
-  /* Fades the video out over the stat text (left) and lets it show only
-     over the clear whitespace (right), so it never degrades the existing
-     text contrast. */
-  mask-image: linear-gradient(100deg, transparent 0%, transparent 26%, black 52%, black 100%);
-  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 26%, black 52%, black 100%);
-}
-
 .container { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
 .serif { font-family: var(--serif); }
 
@@ -267,7 +248,6 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--r
 @media (max-width: 960px) {
   .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
   .hero-grid { grid-template-columns: 1fr !important; }
-  .hero-stats-video { width: 260px; height: 100px; right: -10px; bottom: -10px; }
 }
 .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
 .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@@ -294,7 +274,6 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--r
 
 @media (max-width: 640px) {
   .container { padding-left: 20px; padding-right: 20px; }
-  .hero-stats-video { display: none; }
   .admin-nav { grid-template-columns: 1fr; gap: 20px; }
   .admin-sidebar-footer { align-items: stretch; flex-direction: column; }
   .admin-sidebar-action { width: 100%; }