feat: affiche l’overlay uniquement au survol

src/components/Affiche.astro

@@ -0,0 +1,88 @@
+---
+const { evenement, showOverlay = true } = Astro.props;
+---
+
+<a href={`/evenements/${evenement.slug}`} class="affiche-link">
+    <img 
+        src={evenement.affiche.fields.file.url} 
+        alt={`Affiche de ${evenement.nom}`}
+        class="affiche-thumb"
+    />
+    {showOverlay && (
+        <div class="affiche-overlay">
+            <span class="affiche-nom">{evenement.nom}</span>
+            <span class="affiche-date">{new Date(evenement.date).toLocaleDateString("fr-FR")}</span>
+        </div>
+    )}
+</a>
+
+<style>
+    .affiche-link {
+        position: relative;
+        display: block;
+        overflow: hidden;
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        background: white;
+    }
+    
+    .affiche-link:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
+    }
+    
+    .affiche-thumb {
+        width: 100%;
+        height: auto;
+        display: block;
+        aspect-ratio: 3/4;
+        object-fit: cover;
+    }
+    
+    .affiche-overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
+        color: white;
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        opacity: 0;
+        transform: translateY(10px);
+        transition: all 0.3s ease;
+    }
+    
+    .affiche-link:hover .affiche-overlay {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    
+    .affiche-nom {
+        font-weight: bold;
+        font-size: 0.9rem;
+        line-height: 1.2;
+    }
+    
+    .affiche-date {
+        font-size: 0.8rem;
+        opacity: 0.9;
+    }
+    
+    @media (max-width: 480px) {
+        .affiche-overlay {
+            padding: 0.5rem;
+        }
+        
+        .affiche-nom {
+            font-size: 0.75rem;
+        }
+        
+        .affiche-date {
+            font-size: 0.65rem;
+        }
+    }
+</style>

src/components/GrilleSpectaclesPassés.astro

@@ -1,4 +1,6 @@
 ---
+import Affiche from "./Affiche.astro";
+
 const { evenements, limite = 6, afficherLienVoirTout = true } = Astro.props;
 const evenementsAffiches = evenements.slice(0, limite);
 ---
@@ -8,17 +10,7 @@ const evenementsAffiches = evenements.slice(0, limite);
         <div class="grille-affiches">
             {evenementsAffiches.map(evenement => (
                 evenement.affiche && (
-                    <a href={`/evenements/${evenement.slug}`} class="affiche-link">
+                    <Affiche evenement={evenement} />
-                        <img 
-                            src={evenement.affiche.fields.file.url} 
-                            alt={`Affiche de ${evenement.nom}`}
-                            class="affiche-thumb"
-                        />
-                        <div class="affiche-overlay">
-                            <span class="affiche-nom">{evenement.nom}</span>
-                            <span class="affiche-date">{new Date(evenement.date).toLocaleDateString("fr-FR")}</span>
-                        </div>
-                    </a>
                 )
             ))}
         </div>
@@ -40,53 +32,6 @@ const evenementsAffiches = evenements.slice(0, limite);
         margin-bottom: 2rem;
     }
     
-    .affiche-link {
-        position: relative;
-        display: block;
-        overflow: hidden;
-        border-radius: 0.5rem;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-        background: white;
-    }
-    
-    .affiche-link:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-    }
-    
-    .affiche-thumb {
-        width: 100%;
-        height: auto;
-        display: block;
-        aspect-ratio: 3/4;
-        object-fit: cover;
-    }
-    
-    .affiche-overlay {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
-        color: white;
-        padding: 1rem;
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-    }
-    
-    .affiche-nom {
-        font-weight: bold;
-        font-size: 0.9rem;
-        line-height: 1.2;
-    }
-    
-    .affiche-date {
-        font-size: 0.8rem;
-        opacity: 0.9;
-    }
-    
     .voir-tout {
         display: inline-block;
         margin-top: 1rem;
@@ -112,18 +57,6 @@ const evenementsAffiches = evenements.slice(0, limite);
             grid-template-columns: repeat(3, 1fr);
             gap: 1rem;
         }
-        
-        .affiche-overlay {
-            padding: 0.5rem;
-        }
-        
-        .affiche-nom {
-            font-size: 0.8rem;
-        }
-        
-        .affiche-date {
-            font-size: 0.7rem;
-        }
     }
     
     @media (max-width: 480px) {
@@ -131,17 +64,5 @@ const evenementsAffiches = evenements.slice(0, limite);
             grid-template-columns: repeat(2, 1fr);
             gap: 0.75rem;
         }
-        
-        .affiche-overlay {
-            padding: 0.4rem;
-        }
-        
-        .affiche-nom {
-            font-size: 0.75rem;
-        }
-        
-        .affiche-date {
-            font-size: 0.65rem;
-        }
     }
 </style>