carte du jour

src/components/EventCard.astro

@@ -18,6 +18,7 @@ const categoryColors = {
     Festival: "#f59e0b",
     IRL: "#a1be18",
     Amical: "#8b5cf6",
+    Professionnel: "#5ae0f7",
     SI_Arbitrage: "violet",
     SI_Applicatif: "#5ca6e8",
     SI_Logistique: "#45c494",

src/pages/collection.astro

@@ -3,57 +3,62 @@ import { getCollection } from "astro:content";
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
 import EventCard from "../components/EventCard.astro";
-import BankCard from "../components/BankCard.astro"; // Import du nouveau composant
+import BankCard from "../components/BankCard.astro";
 
 const allHumans = await getCollection("humans");
-const myHumans = allHumans.filter((entry: any) => entry.id.startsWith("latchimynicolas/"));
+const myHumans = allHumans.filter((entry: any) =>
-
+    entry.id.startsWith("latchimynicolas/"),
+);
 
 const allEvents = await getCollection("events");
-const allBanks = await getCollection("banks"); // Récupération des cartes banques/objets
+const allBanks = await getCollection("banks");
 
-// 1. Tri chronologique global
+// 1. Tri
 const sortedEntries = allHumans.sort(
-    (a: any, b: any) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
+    (a: any, b: any) =>
+        new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
 );
 
 const sortedEvents = allEvents.sort(
-    (a: any, b: any) => new Date(a.data.date).getTime() - new Date(b.data.date).getTime(),
+    (a: any, b: any) =>
+        new Date(a.data.date).getTime() - new Date(b.data.date).getTime(),
 );
 
-const sortedBanks = allBanks.sort(
+const sortedBanks = allBanks.sort((a: any, b: any) =>
-    (a: any, b: any) => a.data.name.localeCompare(b.data.name));
+    a.data.name.localeCompare(b.data.name),
+);
 
-// 2. Groupement par utilisateur
+// 2. Groupement
 const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
     const userName = entry.data.name;
     if (!acc[userName]) acc[userName] = [];
     acc[userName].push(entry);
     return acc;
 }, {});
-
 ---
 
 <Layout title="Collection">
     <header class="collection-header">
         <a href="/" class="back-link">← Retour au flux</a>
         <h1>Collection</h1>
-        <p class="back-link">Cliquer sur une carte pour en voir les détails.</p>
+        <p class="back-link">
+            Cliquer sur un titre pour ouvrir/fermer, ou une carte pour les
+            détails.
+        </p>
     </header>
 
     <main class="collection-container">
         {/* SECTION HUMAINS */}
         {
             Object.entries(groupedHumans).map(([userName, cards]) => (
-                <section class="user-collection">
+                <details class="user-collection">
-                    <h2 class="user-title">
+                    <summary class="user-title">
                         {userName}
                         <span>({(cards as any[]).length} souffles)</span>
-                    </h2>
+                    </summary>
 
                     <div class="user-flex-row">
-                        {
+                        {(cards as any[]).map((entry) => (
-                            (cards as any[]).map((entry) => (
                             <a
                                 href={`/${entry.id.replace(/\.md$/, "")}`}
                                 class="card-link"
@@ -62,26 +67,27 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
                                     <Card frontmatter={entry.data} />
                                     <div class="entry-meta">
                                         <p>
-                                                {new Date(entry.data.date).toLocaleDateString("fr-FR")}
+                                            {new Date(
+                                                entry.data.date,
+                                            ).toLocaleDateString("fr-FR")}
                                         </p>
                                     </div>
                                 </div>
                             </a>
-                            ))
+                        ))}
-                        }
                     </div>
                     <hr class="separator" />
-                </section>
+                </details>
             ))
         }
 
-        {/* SECTION ÉVÉNEMENTS (Même structure que les humains) */}
+        {/* SECTION ÉVÉNEMENTS */}
         {
             sortedEvents.length > 0 && (
-                <section class="user-collection">
+                <details class="user-collection">
-                    <h2 class="user-title">
+                    <summary class="user-title">
                         Événements <span>({sortedEvents.length} cartes)</span>
-                    </h2>
+                    </summary>
                     <div class="user-flex-row">
                         {sortedEvents.map((event) => (
                             <a
@@ -101,29 +107,37 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
                         ))}
                     </div>
                     <hr class="separator" />
-                </section>
+                </details>
+            )
+        }
 
-                <section class="user-collection">
+        {/* SECTION TRÉSORERIES */}
-                            <h2 class="user-title">Trésoreries <span>(Sources de Flux)</span></h2>
+        <details class="user-collection">
+            <summary class="user-title">
+                Trésoreries <span>(Sources de Flux)</span>
+            </summary>
             <div class="user-flex-row">
                 {
                     sortedBanks.map((bank) => (
                         <div class="card-link">
                             <div class="card-scaler">
                                 {bank.data.sub_category === "finances" ? (
-                                                    <BankCard frontmatter={bank.data} allHumans={myHumans} />
+                                    <BankCard
+                                        frontmatter={bank.data}
+                                        allHumans={myHumans}
+                                    />
                                 ) : (
-                                                    /* Autre type de stuff si nécessaire */
+                                    <div class="tcg-card">
-                                                    <div class="tcg-card">Objet: {bank.data.name}</div>
+                                        Objet: {bank.data.name}
+                                    </div>
                                 )}
                             </div>
                         </div>
                     ))
                 }
             </div>
-                        </section>
+            <hr class="separator" />
-            )
+        </details>
-        }
     </main>
 </Layout>
 
@@ -145,8 +159,15 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
         padding: 0 20px 40px;
     }
 
+    /* Accordéon Style */
     .user-collection {
-        margin-bottom: 60px;
+        margin-bottom: 20px;
+        display: block;
+    }
+
+    summary {
+        display: flex;
+        flex-direction: column;
     }
 
     .user-title {
@@ -156,6 +177,26 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
         margin-bottom: 25px;
         border-left: 5px solid #333;
         padding-left: 15px;
+        cursor: pointer;
+        list-style: none; /* Cache la flèche par défaut */
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .user-title::-webkit-details-marker {
+        display: none;
+    }
+
+    .user-title::before {
+        content: "▸";
+        font-size: 1rem;
+        color: #94a3b8;
+        transition: transform 0.2s ease;
+    }
+
+    details[open] .user-title::before {
+        transform: rotate(90deg);
     }
 
     .user-title span {
@@ -167,10 +208,10 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
     .user-flex-row {
         display: flex;
         flex-wrap: wrap;
-        gap: 45px; /* Gap simple comme demandé */
+        gap: 45px;
         justify-content: flex-start;
         padding: 20px 0;
-        margin-bottom: 100px;
+        margin-bottom: 40px;
     }
 
     .entry-meta {
@@ -187,14 +228,10 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
     .card-link {
         text-decoration: none;
         transition: transform 0.3s ease;
-
-        /* 1. On définit la taille "réelle" que prendra la carte dans le flux */
-        /* Si ta Card fait 300px de large, on met 150px ici */
         width: 230px;
         height: 375px;
-
-        /* 2. On autorise le contenu à déborder visuellement de la boîte logicielle */
         overflow: visible;
+        display: block;
     }
 
     .card-link:hover {
@@ -202,57 +239,38 @@ const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
     }
 
     .card-scaler {
-        /* 3. On réduit l'échelle */
         transform: scale(0.8);
-
-        /* 4. On fixe l'origine en haut à gauche pour que la carte
-               se cale parfaitement dans le coin du .card-link */
         transform-origin: top left;
-
-        /* 5. On s'assure que la carte garde sa taille originale en interne
-               pour ne pas briser le layout interne de <Card /> */
         width: 300px;
         height: 440px;
     }
 
     .separator {
-        margin-top: 50px;
+        margin-top: 10px;
         border: 0;
         border-top: 1px solid rgba(0, 0, 0, 0.05);
     }
 
-    /* Adaptabilité mobile */
     @media (max-width: 480px) {
         .user-flex-row {
-            display: flex; /*  */
+            gap: 10px;
-            flex-wrap: wrap; /*  */
+            justify-content: center;
-            gap: 10px; /* Espacement horizontal entre les colonnes */
-            justify-content: center; /* [cite: 36] */
-            padding: 0;
         }
 
         .card-link {
-            /* On force la largeur à un tiers de l'écran moins le gap */
             width: calc(45%);
-            /* On réduit la hauteur de la boîte pour que le separator remonte */
             height: 190px;
-            text-decoration: none; /* [cite: 33] */
-            display: block;
-            overflow: visible;
         }
 
         .card-scaler {
-            transform: scale(0.4) !important; /* On force le scale à 0.3 */
+            transform: scale(0.4) !important;
-            transform-origin: top left; /* Indispensable pour coller au bord haut-gauche */
+            width: 300px;
-            width: 300px; /* Taille originale [cite: 23] */
+            height: 440px;
-            height: 440px; /* Taille originale [cite: 24] */
         }
 
         .entry-meta {
-            /* On masque ou on réduit drastiquement la méta pour gagner de la place */
+            font-size: 0.5rem;
-            font-size: 0.5rem; /* [cite: 32] */
             margin-top: -5px;
-            white-space: nowrap;
         }
     }
 </style>