From 87cc4e5e9c6b743061cf3f40e924da2c5d6ff34e Mon Sep 17 00:00:00 2001
From: Esteban <esteban@MacBook-Air-de-Esteban.local>
Date: Thu, 2 Jul 2026 19:20:21 +0200
Subject: [PATCH] Ajoute le style des bandeaux de logos sur la home (outils /
 partenaires)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Complète la fonctionnalité logo_banners (déjà en place côté PHP/BDD) : bandeau
défilant en boucle infinie avec bords en dégradé, logos en niveaux de gris qui
reprennent leur couleur au survol, sens de défilement inversé entre les deux
bandeaux, et grille dédiée dans le panel admin.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 styles/primary_css.css | 173 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 173 insertions(+)

diff --git a/styles/primary_css.css b/styles/primary_css.css
index dc3021f..63c5511 100644
--- a/styles/primary_css.css
+++ b/styles/primary_css.css
@@ -1293,6 +1293,179 @@ img {
     }
 }
 
+/* ---- BANDEAUX DE LOGOS (page d'accueil) : "Outils" et "Ils m'ont fait confiance" ---- */
+
+.logo-banner-section {
+    max-width: 1200px;
+    margin: 60px auto;
+    padding: 0 clamp(20px, 4vw, 40px);
+}
+
+.logo-banner-header {
+    margin-bottom: 24px;
+    text-align: center;
+}
+
+.logo-banner-header h2 {
+    margin: 0;
+    font-size: clamp(24px, 3.5vw, 34px);
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    color: var(--text);
+}
+
+/* Fenêtre de défilement : masque les bords en dégradé pour un effet "infini" propre */
+.logo-marquee {
+    position: relative;
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
+    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
+}
+
+/* Ligne de logos animée : contient la liste dupliquée deux fois (voir listLogos.php),
+   la translation de -50% boucle donc exactement sur la deuxième copie => scroll infini */
+.logo-track {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    width: max-content;
+    animation: logoScroll 32s linear infinite;
+}
+
+.logo-marquee-reverse .logo-track {
+    animation-direction: reverse;
+}
+
+.logo-marquee:hover .logo-track {
+    animation-play-state: paused;
+}
+
+@keyframes logoScroll {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(-50%);
+    }
+}
+
+.logo-tile {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 160px;
+    height: 90px;
+    padding: 18px 24px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    text-decoration: none;
+    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
+}
+
+a.logo-tile:hover {
+    transform: translateY(-3px);
+    border-color: var(--accent-border);
+    background: var(--surface-2);
+}
+
+.logo-tile img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    filter: grayscale(1) opacity(0.6);
+    transition: filter 0.25s ease;
+}
+
+.logo-tile:hover img {
+    filter: grayscale(0) opacity(1);
+}
+
+/* Sur mobile le survol n'existe pas : on affiche les logos en couleur directement */
+@media (hover: none) {
+    .logo-tile img {
+        filter: grayscale(0) opacity(0.85);
+    }
+}
+
+@media (max-width: 620px) {
+    .logo-tile {
+        width: 130px;
+        height: 74px;
+        padding: 14px 18px;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .logo-track {
+        animation: none;
+        flex-wrap: wrap;
+        width: 100%;
+        justify-content: center;
+    }
+
+    .logo-marquee {
+        -webkit-mask-image: none;
+        mask-image: none;
+    }
+}
+
+/* ---- Panel admin : grille des logos ---- */
+.logo-admin-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 18px;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 8px clamp(16px, 4vw, 40px) 24px;
+}
+
+.logo-admin-item {
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+}
+
+.logo-admin-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 90px;
+    padding: 16px;
+    background: var(--surface-2);
+    border-bottom: 1px solid var(--border);
+}
+
+.logo-admin-preview img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.logo-admin-info {
+    padding: 14px 16px 4px;
+}
+
+.logo-admin-info .tag {
+    margin-bottom: 8px;
+}
+
+.logo-admin-info p {
+    margin: 0;
+    color: var(--text);
+    font-size: 14.5px;
+    font-weight: 600;
+}
+
+.logo-admin-item .admin-actions {
+    padding: 12px 16px 16px;
+}
+
 /* ---- PAGE COMPÉTENCES ---- */
 .skills-section {
     max-width: 1200px;