card cosmo ambient

src/components/EventCard.astro

@@ -1,11 +1,28 @@
 ---
 // src/components/EventCard.astro
 const { frontmatter } = Astro.props;
-const { title, date, location, target_date, participants, summary, status } =
-    frontmatter;
+const {
+    title,
+    date,
+    location,
+    target_date,
+    participants,
+    summary,
+    status,
+    type,
+} = 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
+};
+
+const accentColor = categoryColors[type] || categoryColors["default"];
 ---
 
-<article class="event-card">
+<article class="event-card" style={`--accent-color: ${accentColor}`}>
     <div class="card-inner">
         <header class="event-header">
             <span class="event-type">ÉVÉNEMENT IRL</span>
@@ -45,11 +62,13 @@ const { title, date, location, target_date, participants, summary, status } =
     .event-card {
         width: 320px;
         height: 480px;
-        background: #a1be18;
+        /* Utilisation de la couleur dynamique [cite: 6, 61] */
+        background: var(--accent-color);
         border-radius: 18px;
         padding: 12px;
         font-family: "Philosopher", serif;
         color: rgba(0, 0, 0, 0.7);
+        transition: background 0.3s ease;
     }
     .card-inner {
         height: 100%;
@@ -96,6 +115,12 @@ const { title, date, location, target_date, participants, summary, status } =
         flex: 1.2;
         font-size: 0.85rem;
     }
+    .event-type {
+        text-transform: uppercase;
+        background: rgba(255, 255, 255, 0.3);
+        padding: 2px 8px;
+        border-radius: 4px;
+    }
     .summary {
         font-style: italic;
         line-height: 1.4;