From 2023820896a0ca4e5ee32969bd64f3a86a30c10c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 13 Jul 2026 19:49:01 +0000
Subject: [PATCH] Aligne le carrousel de logos sur la largeur du site et
 corrige le mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Le carrousel « Nos entreprises membres » est maintenant contenu dans le
  même conteneur que le reste des sections (au lieu de déborder pleine
  largeur jusqu'aux bords de l'écran).
- Header : la barre de navigation passe en hauteur flexible pour ne plus
  être tronquée quand les liens (dont « Rencontres passées ») passent à
  la ligne sur petit écran.
- Back-office admin : la barre latérale fixe de 250px passait en dehors
  de l'écran sur mobile ; elle se replie désormais en liste verticale
  au-dessus du contenu sous 860px.
- Cartes de rencontres passées et carrousel photo plein écran : paddings,
  tailles de police et de flèches réduits sur petit écran ; le fond du
  carrousel plein écran passe d'un rgba semi-transparent à une couleur
  opaque (le fond semi-transparent laissait apparaître le header du site
  par transparence sur mobile).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fkg15RCxNgUys4ru73He2o
---
 web/src/components/Carousel.jsx      | 14 +++++++------
 web/src/components/Header.jsx        |  4 ++--
 web/src/components/PastEventCard.jsx |  4 ++--
 web/src/pages/Admin.jsx              | 10 ++++-----
 web/src/pages/Home.jsx               | 26 ++++++++++++-----------
 web/src/styles.css                   | 31 ++++++++++++++++++++++++++++
 6 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/web/src/components/Carousel.jsx b/web/src/components/Carousel.jsx
index 18cd2e3..8f6986a 100644
--- a/web/src/components/Carousel.jsx
+++ b/web/src/components/Carousel.jsx
@@ -36,22 +36,23 @@ export default function Carousel({ photos, title, startIndex = 0, onClose }) {
   return (
     <div
       onClick={onClose}
-      style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(10,9,8,.94)', display: 'flex', flexDirection: 'column', padding: '24px 24px 18px' }}
+      className="carousel-overlay"
+      style={{ position: 'fixed', inset: 0, zIndex: 200, background: '#0A0908', display: 'flex', flexDirection: 'column', padding: '24px 24px 18px' }}
     >
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: '#fff', flexShrink: 0 }}>
-        <div>
-          <div className="serif" style={{ fontSize: 20, fontWeight: 600 }}>{title}</div>
+        <div style={{ minWidth: 0 }}>
+          <div className="serif carousel-title" style={{ fontSize: 20, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
           <div style={{ fontSize: 13, color: '#B7AFA6', marginTop: 2 }}>{i + 1} / {n}</div>
         </div>
-        <button onClick={onClose} aria-label="Fermer" style={{ background: 'rgba(255,255,255,.14)', border: 'none', cursor: 'pointer', width: 40, height: 40, borderRadius: '50%', fontSize: 20, color: '#fff' }}>×</button>
+        <button onClick={onClose} aria-label="Fermer" style={{ flexShrink: 0, marginLeft: 14, background: 'rgba(255,255,255,.14)', border: 'none', cursor: 'pointer', width: 40, height: 40, borderRadius: '50%', fontSize: 20, color: '#fff' }}>×</button>
       </div>
 
       <div onClick={(e) => e.stopPropagation()} style={{ flex: 1, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 0, margin: '14px 0' }}>
         <img src={photos[i].path} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', borderRadius: 4 }} />
         {n > 1 && (
           <>
-            <button onClick={() => go(-1)} aria-label="Précédente" style={{ ...arrow, left: 8 }}>‹</button>
-            <button onClick={() => go(1)} aria-label="Suivante" style={{ ...arrow, right: 8 }}>›</button>
+            <button className="carousel-arrow" onClick={() => go(-1)} aria-label="Précédente" style={{ ...arrow, left: 8 }}>‹</button>
+            <button className="carousel-arrow" onClick={() => go(1)} aria-label="Suivante" style={{ ...arrow, right: 8 }}>›</button>
           </>
         )}
       </div>
@@ -61,6 +62,7 @@ export default function Carousel({ photos, title, startIndex = 0, onClose }) {
           {photos.map((p, idx) => (
             <button
               key={p.id ?? idx}
+              className="carousel-thumb"
               onClick={() => setI(idx)}
               style={{ flexShrink: 0, width: 76, height: 54, borderRadius: 4, overflow: 'hidden', border: idx === i ? '2px solid #fff' : '2px solid transparent', padding: 0, cursor: 'pointer', background: 'none', opacity: idx === i ? 1 : 0.55 }}
             >
diff --git a/web/src/components/Header.jsx b/web/src/components/Header.jsx
index b310f66..97351c7 100644
--- a/web/src/components/Header.jsx
+++ b/web/src/components/Header.jsx
@@ -13,7 +13,7 @@ export default function Header() {
     >
       <div
         className="container"
-        style={{ height: 76, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}
+        style={{ minHeight: 76, paddingTop: 12, paddingBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}
       >
         <Link to="/" style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none' }}>
           <img src="/assets/logo.jpg" alt="SLUC Business Club Nancy" style={{ height: 50, width: 'auto', display: 'block' }} />
@@ -24,7 +24,7 @@ export default function Header() {
             </span>
           </span>
         </Link>
-        <nav style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+        <nav className="site-nav" style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
           <NavLink to="/" end className={navLinkClass}>Accueil</NavLink>
           <NavLink to="/annuaire" className={navLinkClass}>Annuaire</NavLink>
           <NavLink to="/rencontres-passees" className={navLinkClass}>Rencontres passées</NavLink>
diff --git a/web/src/components/PastEventCard.jsx b/web/src/components/PastEventCard.jsx
index ca58cf6..3d9b33f 100644
--- a/web/src/components/PastEventCard.jsx
+++ b/web/src/components/PastEventCard.jsx
@@ -25,7 +25,7 @@ export default function PastEventCard({ event }) {
   return (
     <>
       <article
-        className="card hero-grid"
+        className="card hero-grid past-event-card"
         style={{ display: 'grid', gridTemplateColumns: '1.15fr .85fr', gap: 40, alignItems: 'center', padding: 36, cursor: hasPhotos ? 'pointer' : 'default' }}
         onClick={hasPhotos ? () => setCarouselAt(0) : undefined}
       >
@@ -45,7 +45,7 @@ export default function PastEventCard({ event }) {
             )}
           </div>
         </div>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 10, height: 240 }}>
+        <div className="past-event-photos" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 10, height: 240 }}>
           {cell(0, { gridRow: 'span 2' })}
           {cell(1)}
           {photos.length > 3 ? (
diff --git a/web/src/pages/Admin.jsx b/web/src/pages/Admin.jsx
index 04badc4..62ebffd 100644
--- a/web/src/pages/Admin.jsx
+++ b/web/src/pages/Admin.jsx
@@ -105,8 +105,8 @@ export function AdminShell() {
   const today = new Date().toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
 
   return (
-    <div style={{ display: 'flex', minHeight: '100vh', background: 'var(--admin-bg)' }}>
-      <aside style={{ width: 250, flexShrink: 0, background: 'var(--dark)', color: '#fff', display: 'flex', flexDirection: 'column', padding: '26px 0', position: 'sticky', top: 0, height: '100vh' }}>
+    <div className="admin-shell" style={{ display: 'flex', minHeight: '100vh', background: 'var(--admin-bg)' }}>
+      <aside className="admin-sidebar" style={{ width: 250, flexShrink: 0, background: 'var(--dark)', color: '#fff', display: 'flex', flexDirection: 'column', padding: '26px 0', position: 'sticky', top: 0, height: '100vh' }}>
         <div style={{ padding: '0 24px 26px', borderBottom: '1px solid rgba(255,255,255,.1)', display: 'flex', alignItems: 'center', gap: 12 }}>
           <img src="/assets/logo.jpg" alt="SLUC" style={{ height: 40, width: 40, objectFit: 'cover', borderRadius: 4, background: '#fff' }} />
           <div style={{ lineHeight: 1.1 }}>
@@ -132,17 +132,17 @@ export function AdminShell() {
       </aside>
 
       <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ background: '#fff', borderBottom: '1px solid var(--border)', padding: '20px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div className="admin-content-header" style={{ background: '#fff', borderBottom: '1px solid var(--border)', padding: '20px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
           <div>
             <h1 className="serif" style={{ fontSize: 24, fontWeight: 600 }}>{current.title}</h1>
             <div style={{ fontSize: 13, color: 'var(--gray-light)', marginTop: 2, textTransform: 'capitalize' }}>{today}</div>
           </div>
-          <div style={{ width: 38, height: 38, borderRadius: '50%', background: '#FBEDEC', color: 'var(--red)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14 }}>
+          <div style={{ width: 38, height: 38, borderRadius: '50%', background: '#FBEDEC', color: 'var(--red)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14, flexShrink: 0 }}>
             {(user.email || 'AD').slice(0, 2).toUpperCase()}
           </div>
         </div>
 
-        <div style={{ padding: '36px 40px' }}>
+        <div className="admin-content-body" style={{ padding: '36px 40px' }}>
           {tab === 'dashboard' && <Dashboard />}
           {tab === 'membres' && <MembersTab />}
           {tab === 'rencontres' && <RencontresTab />}
diff --git a/web/src/pages/Home.jsx b/web/src/pages/Home.jsx
index d6280d8..e6ffcd8 100644
--- a/web/src/pages/Home.jsx
+++ b/web/src/pages/Home.jsx
@@ -185,19 +185,21 @@ export default function Home() {
             <span className="btn-link" style={{ fontSize: 14, whiteSpace: 'nowrap' }}>Voir l'annuaire complet →</span>
           </Link>
         </div>
-        <div className="marquee-mask">
-          <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 }}>
-                <div className={m.logo_path ? '' : 'placeholder-pattern'} style={{ height: 56, borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'monospace', fontSize: 10, color: '#a8a099', overflow: 'hidden', background: m.logo_path ? '#fff' : undefined }}>
-                  {m.logo_path ? <img src={m.logo_path} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} /> : 'logo'}
+        <div className="container">
+          <div className="marquee-mask">
+            <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 }}>
+                  <div className={m.logo_path ? '' : 'placeholder-pattern'} style={{ height: 56, borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'monospace', fontSize: 10, color: '#a8a099', overflow: 'hidden', background: m.logo_path ? '#fff' : undefined }}>
+                    {m.logo_path ? <img src={m.logo_path} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} /> : 'logo'}
+                  </div>
+                  <div>
+                    <div className="serif" style={{ fontSize: 17, fontWeight: 600, lineHeight: 1.2 }}>{m.nom}</div>
+                    <div style={{ fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--red)', fontWeight: 600, marginTop: 6 }}>{m.secteur}</div>
+                  </div>
                 </div>
-                <div>
-                  <div className="serif" style={{ fontSize: 17, fontWeight: 600, lineHeight: 1.2 }}>{m.nom}</div>
-                  <div style={{ fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--red)', fontWeight: 600, marginTop: 6 }}>{m.secteur}</div>
-                </div>
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
         </div>
       </section>
diff --git a/web/src/styles.css b/web/src/styles.css
index 1e71eff..06e3d3d 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -35,6 +35,7 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--r
 .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);
 }
@@ -145,3 +146,33 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--r
 .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
 .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
 .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
+
+/* Admin backend: fixed left sidebar becomes a normal stacked block on
+   narrow screens instead of squeezing the content area. */
+@media (max-width: 860px) {
+  .admin-shell { flex-direction: column !important; }
+  .admin-sidebar { width: 100% !important; height: auto !important; position: static !important; }
+  .admin-content-header { padding: 16px 20px !important; }
+  .admin-content-body { padding: 20px !important; }
+}
+
+@media (max-width: 640px) {
+  .container { padding-left: 20px; padding-right: 20px; }
+
+  /* Header nav: tighter spacing so the extra links (added alongside the
+     new "rencontres passées" page) wrap without feeling cramped. */
+  .site-nav { gap: 2px; }
+  .nav-btn { padding: 8px 10px; font-size: 13.5px; }
+
+  /* Past event card (home + /rencontres-passees): reduce padding and
+     stack photos at a shorter height once the grid collapses to 1 col. */
+  .past-event-card { padding: 22px !important; gap: 22px !important; }
+  .past-event-card h3 { font-size: 24px !important; }
+  .past-event-photos { height: 200px !important; }
+
+  /* Full-screen photo carousel */
+  .carousel-overlay { padding: 16px 14px 12px !important; }
+  .carousel-title { font-size: 17px !important; max-width: 60vw; }
+  .carousel-arrow { width: 42px !important; height: 42px !important; font-size: 20px !important; }
+  .carousel-thumb { width: 58px !important; height: 42px !important; }
+}