fullart

src/components/EventCard.astro

@@ -10,19 +10,24 @@ const {
     summary,
     status,
     type,
+    image,
 } = frontmatter;
 
 // Définition des couleurs par catégorie [cite: 93, 94, 95, 96]
 const categoryColors = {
-    Festival: "#f59e0b", // Orange/Or
-    IRL: "#a1be18", // Bleu
-    default: "#ec4899", // Ton vert actuel
+    Festival: "#f59e0b",
+    IRL: "#a1be18",
+    Amical: "#8b5cf6",
+    default: "#ec4899",
 };
 
 const accentColor = categoryColors[type] || categoryColors["default"];
 ---
 
-<article class="event-card" style={`--accent-color: ${accentColor}`}>
+<article
+    class={`event-card ${image ? "has-bg" : ""}`}
+    style={`--accent-color: ${accentColor}; --bg-image: url('${image}');`}
+>
     <div class="card-inner">
         <header class="event-header">
             <span class="event-type">{type.toUpperCase()}</span>
@@ -69,13 +74,24 @@ const accentColor = categoryColors[type] || categoryColors["default"];
         width: 320px;
         height: 480px;
         /* Utilisation de la couleur dynamique [cite: 6, 61] */
-        background: var(--accent-color);
+        background-color: var(--accent-color);
         border-radius: 18px;
         padding: 12px;
         font-family: "Philosopher", serif;
         color: rgba(0, 0, 0, 0.7);
         transition: background 0.3s ease;
+        position: relative; /* Important pour le contexte d'affichage */
+        background-size: cover;
+        background-position: center;
     }
+    /* Style spécifique quand il y a une image de fond */
+        .event-card.has-bg {
+            background-image: linear-gradient(
+                to bottom,
+                rgba(255, 255, 255, 0.0) 0%,
+                rgba(255, 255, 255, 0.1) 100%
+            ), var(--bg-image) !important;
+        }
     .card-inner {
         height: 100%;
         border: 1px solid rgba(0, 0, 0, 0.1);
@@ -83,6 +99,8 @@ const accentColor = categoryColors[type] || categoryColors["default"];
         display: flex;
         flex-direction: column;
         padding: 12px;
+        /* Rendre le fond transparent si une image est présente */
+        background: rgba(255, 255, 255, 0.05);
     }
     .event-header {
         display: flex;
@@ -107,6 +125,11 @@ const accentColor = categoryColors[type] || categoryColors["default"];
         font-size: 1.4rem;
         margin: 5px 0;
     }
+    .event-title-overlay {
+            font-size: 1.4rem; [cite: 16]
+            margin-bottom: 10px;
+            text-shadow: 0px 1px 2px rgba(255,255,255,0.8);
+        }
     .location-tag {
         font-size: 0.7rem;
         opacity: 0.9;