card cosmo ambient

src/pages/collection.astro

@@ -2,13 +2,20 @@
 import { getCollection } from "astro:content";
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
+import EventCard from "../components/EventCard.astro";
 
 const allHumans = await getCollection("humans");
+const allEvents = await getCollection("events");
+
 // 1. Tri chronologique global
 const sortedEntries = allHumans.sort(
     (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
 );
 
+const sortedEvents = allEvents.sort(
+    (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
+);
+
 // 2. Groupement par utilisateur [cite: 80]
 const groupedHumans = sortedEntries.reduce((acc, entry) => {
     const userName = entry.data.name;
@@ -26,6 +33,37 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => {
     </header>
 
     <main class="collection-container">
+        {/* SECTION ÉVÉNEMENTS (Même structure que les humains) */}
+        {
+            sortedEvents.length > 0 && (
+                <section class="user-collection">
+                    <h2 class="user-title">
+                        Événements <span>({sortedEvents.length} cartes)</span>
+                    </h2>
+                    <div class="user-flex-row">
+                        {sortedEvents.map((event) => (
+                            <a
+                                href={`/${event.id.replace(/\.md$/, "")}`}
+                                class="card-link"
+                            >
+                                <div class="card-scaler">
+                                    <EventCard frontmatter={event.data} />
+                                    <div class="entry-meta">
+                                        <p>
+                                            Prévu pour :{" "}
+                                            {event.data.target_date}
+                                        </p>
+                                    </div>
+                                </div>
+                            </a>
+                        ))}
+                    </div>
+                    <hr class="separator" />
+                </section>
+            )
+        }
+
+        {/* SECTION HUMAINS */}
         {
             Object.entries(groupedHumans).map(([userName, cards]) => (
                 <section class="user-collection">