card cosmo ambient

src/components/EventCard.astro

@@ -0,0 +1,134 @@
+---
+// src/components/EventCard.astro
+const { frontmatter } = Astro.props;
+const { title, date, location, target_date, participants, summary, status } =
+    frontmatter;
+---
+
+<article class="event-card">
+    <div class="card-inner">
+        <header class="event-header">
+            <span class="event-type">ÉVÉNEMENT IRL</span>
+            <span class="event-status">{status}</span>
+        </header>
+
+        <div class="event-art">
+            <div class="location-tag">{location}</div>
+            <h2 class="event-title">{title}</h2>
+        </div>
+
+        <div class="event-info-line">
+            Projet prévu pour : <strong>{target_date}</strong>
+        </div>
+
+        <div class="event-body">
+            <p class="summary">{summary}</p>
+
+            <div class="participants-box">
+                <span class="label">Membres impliqués :</span>
+                <div class="tags">
+                    {participants.map((p) => <span class="p-tag">{p}</span>)}
+                </div>
+            </div>
+        </div>
+
+        <footer class="event-footer">
+            <div class="date-recorded">
+                Détecté le : {new Date(date).toLocaleDateString("fr-FR")}
+            </div>
+            <div class="social-impact">+3 SOC</div>
+        </footer>
+    </div>
+</article>
+
+<style>
+    .event-card {
+        width: 320px;
+        height: 480px;
+        background: #a1be18;
+        border-radius: 18px;
+        padding: 12px;
+        font-family: "Philosopher", serif;
+        color: rgba(0, 0, 0, 0.7);
+    }
+    .card-inner {
+        height: 100%;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 10px;
+        display: flex;
+        flex-direction: column;
+        padding: 12px;
+    }
+    .event-header {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.7rem;
+        font-weight: bold;
+        letter-spacing: 1px;
+    }
+    .event-art {
+        flex: 1;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        margin: 10px 0;
+        border-radius: 6px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        padding: 10px;
+    }
+    .event-title {
+        font-size: 1.4rem;
+        margin: 5px 0;
+    }
+    .location-tag {
+        font-size: 0.7rem;
+        opacity: 0.9;
+    }
+    .event-info-line {
+        font-size: 0.8rem;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        padding-bottom: 5px;
+        margin-bottom: 10px;
+    }
+    .event-body {
+        flex: 1.2;
+        font-size: 0.85rem;
+    }
+    .summary {
+        font-style: italic;
+        line-height: 1.4;
+        margin-bottom: 10px;
+    }
+    .participants-box .label {
+        font-size: 0.65rem;
+        text-transform: uppercase;
+        display: block;
+        margin-bottom: 5px;
+    }
+    .tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+    }
+    .p-tag {
+        background: rgba(255, 255, 255, 0.2);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-size: 0.65rem;
+    }
+    .event-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 0.7rem;
+        padding-top: 10px;
+    }
+    .social-impact {
+        background: #ffffff80;
+        padding: 2px 8px;
+        border-radius: 5px;
+        font-weight: bold;
+    }
+</style>

src/pages/[...id].astro

@@ -3,65 +3,97 @@ import { getCollection } from "astro:content";
 import Layout from "../layouts/Layout.astro";
 import TimelineBoard from "../components/TimelineBoard.astro";
 import Card from "../components/Card.astro";
+import EventCard from "../components/EventCard.astro";
 
 export async function getStaticPaths() {
     const allHumans = await getCollection("humans");
-    const sortedEntries = allHumans.sort(
+    const allEvents = await getCollection("events");
+
+    const sortedHumans = allHumans.sort(
         (a, b) =>
             new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
     );
-    return allHumans.map((entry) => ({
+
+    const humanPaths = allHumans.map((entry) => ({
         params: { id: entry.id.replace(/\.md$/, "") },
-        props: { entry, sortedEntries },
+        props: { entry, sortedEntries: sortedHumans, type: "human" },
     }));
+
+    const eventPaths = allEvents.map((entry) => ({
+        params: { id: entry.id.replace(/\.md$/, "") },
+        props: { entry, sortedEntries: [], type: "event" },
+    }));
+
+    return [...humanPaths, ...eventPaths];
 }
 
-const { entry, sortedEntries } = Astro.props;
+const { entry, sortedEntries, type } = Astro.props;
+const { Content } = await entry.render();
+
 const manifestations = entry.data.manifestations || [];
-
-// Groupement des manifestations par catégorie (cercle)
 const groupedManifestations = manifestations.reduce((acc, m) => {
-    if (!acc[m.cercle]) {
+    if (!acc[m.cercle]) acc[m.cercle] = [];
-        acc[m.cercle] = [];
-    }
     acc[m.cercle].push(m);
     return acc;
 }, {});
 
-// Définition de l'ordre d'affichage des cercles
 const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
 ---
 
-<Layout title={`${entry.data.name}`}>
+<Layout title={type === "human" ? entry.data.name : entry.data.title}>
     <header class="collection-header">
         <a href="/collection" class="back-link">← Retour à la collection</a>
     </header>
+
     <div class="hebel-dashboard">
         <aside class="nav-column">
-            <TimelineBoard entry={entry} sortedEntries={sortedEntries} />
+            {
+                type === "human" && (
+                    <TimelineBoard
+                        entry={entry}
+                        sortedEntries={sortedEntries}
+                    />
+                )
+            }
         </aside>
 
         <main class="focus-column">
             <div class="card-scaling-container">
+                {
+                    type === "human" ? (
                         <Card frontmatter={entry.data} />
+                    ) : (
+                        <EventCard frontmatter={entry.data} />
+                    )
+                }
             </div>
         </main>
 
         <aside class="details-column">
-            <h2 class="section-title">Émanations (Détails par Cercle)</h2>
             <div class="details-scroll">
                 {
-                    circleOrder.map(
+                    type === "human" ? (
+                        <>
+                            <h2 class="section-title">Émanations (Cercles)</h2>
+                            {circleOrder.map(
                                 (cercle) =>
                                     groupedManifestations[cercle] && (
-                                <section class={`cercle-group ${cercle}`}>
+                                        <section
+                                            class={`cercle-group ${cercle}`}
+                                        >
                                             <h3 class="cercle-header">
                                                 {cercle} (
-                                        {groupedManifestations[cercle].length} )
+                                                {
+                                                    groupedManifestations[
+                                                        cercle
+                                                    ].length
+                                                }
+                                                )
                                             </h3>
                                             <div class="cercle-content">
-                                        {groupedManifestations[cercle].map(
+                                                {groupedManifestations[
-                                            (m) => (
+                                                    cercle
+                                                ].map((m) => (
                                                     <details
                                                         class={`detail-item ${m.type || "neu"}`}
                                                     >
@@ -77,11 +109,25 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
                                                             {m.content}
                                                         </p>
                                                     </details>
-                                            ),
+                                                ))}
-                                        )}
                                             </div>
                                         </section>
                                     ),
+                            )}
+                        </>
+                    ) : (
+                        <div class="event-notes">
+                            <h2 class="section-title">
+                                Planification du projet
+                            </h2>
+                            {/* On applique la classe ici pour que le CSS ci-dessus fonctionne */}
+                            <div
+                                class="content-markdown"
+                                style={`--border-color: ${entry.data.circle === "SOC" ? "#ec4899" : "#3b82f6"}`}
+                            >
+                                <Content />
+                            </div>
+                        </div>
                     )
                 }
             </div>
@@ -90,16 +136,17 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
 </Layout>
 
 <style>
+    /* ... Tes styles existants ... */
     .collection-header {
         padding: 40px;
         text-align: center;
     }
-
     .back-link {
         color: #64748b;
         text-decoration: none;
         font-size: 0.9rem;
     }
+
     .hebel-dashboard {
         display: grid;
         grid-template-columns: 280px 1fr 320px;
@@ -111,58 +158,24 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
         align-items: start;
     }
 
-    /* Aligner le style des colonnes sur la Card */
     .details-column {
         height: calc(100vh - 40px);
         display: flex;
         flex-direction: column;
     }
-
     .section-title {
-        font-family: "Philosopher", serif; /* Cohérence */
+        font-family: "Philosopher", serif;
         text-transform: uppercase;
         font-size: 0.9rem;
         letter-spacing: 2px;
         margin-bottom: 20px;
         color: #475569;
     }
-
     .details-scroll {
         overflow-y: auto;
         flex: 1;
     }
 
-    /* Style des items calqué sur les types de la Card */
-    .detail-card {
-        margin-bottom: 12px;
-        border-bottom: 4px solid #666;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    }
-
-    .detail-card.PRO {
-        border-color: #f59e0b;
-    }
-    .detail-card.SAN {
-        border-color: #3b82f6;
-    }
-    .detail-card.SOC {
-        border-color: #ec4899;
-    }
-    .detail-card.FLX {
-        border-color: #10b981;
-    }
-
-    .cercle-label {
-        font-size: 0.7rem;
-        font-weight: bold;
-        color: #94a3b8;
-    }
-
-    .cercle-group {
-        background: rgba(255, 255, 255, 0.05);
-        border-radius: 8px;
-    }
-
     .cercle-header {
         font-family: "Philosopher", serif;
         border-bottom: 2px solid var(--border-color, #666);
@@ -170,11 +183,40 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
         margin: 15px 0 10px 0;
     }
 
-    .detail-item summary {
+    .detail-item {
-        cursor: pointer;
+        font-size: 0.9rem;
-        font-size: 0.85rem;
+        padding: 8px;
-        color: #64748b;
+        margin-bottom: 6px;
-        list-style: none; /* Cache la flèche par défaut */
+        background: white;
+        border-left: 3px solid #cbd5e1;
+        border-radius: 4px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+
+    /* Style spécifique pour aérer le Markdown des événements */
+    .event-markdown-body .private-content {
+        line-height: 1.8;
+        padding: 15px;
+    }
+
+    /* Ciblage du contenu généré par Astro (Markdown) */
+    .event-markdown-body :global(h2),
+    .event-markdown-body :global(h3) {
+        font-family: "Philosopher", serif;
+        font-size: 1.1rem;
+        margin-top: 1.5rem;
+        margin-bottom: 0.5rem;
+        color: #1e293b;
+        border-bottom: 1px solid #f1f5f9;
+    }
+
+    .event-markdown-body :global(ul) {
+        padding-left: 1.2rem;
+        margin-bottom: 1rem;
+    }
+
+    .event-markdown-body :global(li) {
+        margin-bottom: 0.5rem;
     }
 
     .note-summary {
@@ -183,28 +225,23 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
         gap: 10px;
         cursor: pointer;
         padding: 4px 0;
-        list-style: none; /* Cache la flèche par défaut */
+        list-style: none;
     }
-
-    /* Le petit point de statut minimaliste */
     .status-dot {
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        background-color: #cbd5e1; /* Neutre par défaut */
+        background-color: #cbd5e1;
         display: inline-block;
     }
-
     .status-dot.pos {
-        background-color: #4ade80; /* Vert succès */
+        background-color: #4ade80;
         box-shadow: 0 0 5px rgba(74, 222, 128, 0.5);
     }
-
     .status-dot.neg {
-        background-color: #f87171; /* Rouge alerte */
+        background-color: #f87171;
         box-shadow: 0 0 5px rgba(248, 113, 113, 0.5);
     }
-
     .note-label {
         font-family: "Philosopher", serif;
         font-size: 0.75rem;
@@ -212,18 +249,51 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
         letter-spacing: 1px;
         color: #64748b;
     }
-
-    /* Style du contenu révélé */
     .private-content {
         font-size: 0.85rem;
         line-height: 1.4;
         padding: 10px;
         margin-top: 5px;
-        border-left: 1px solid #e2e8f0;
         color: #334155;
     }
 
-    /* Couleurs des cercles basées sur tes fichiers */
+    /* --- STYLES ÉVÉNEMENTS (MARKDOWN) --- */
+
+    /* 1. On enlève les puces de listes qui chevauchent la ligne */
+    .content-markdown :global(ul) {
+        list-style: none !important; /* Supprime les points */
+        margin-bottom: 20px;
+    }
+
+    /* 2. On stylise les titres pour qu'ils ressemblent aux en-têtes de cercles */
+    .content-markdown :global(h2) {
+        font-family: "Philosopher", serif;
+        padding: 5px 0;
+        margin: 30px 0 15px 0;
+        font-size: 1rem;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+
+    /* 3. L'ASTUCE : Chaque paragraphe ou liste devient une case blanche */
+    .content-markdown :global(p),
+    .content-markdown :global(ul) {
+        background: white;
+        padding: 15px;
+        border-radius: 6px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        margin-bottom: 15px;
+        font-size: 0.9rem;
+        line-height: 1.6;
+    }
+
+    /* 4. Style pour les cases à cocher Obsidian [ ] */
+    .content-markdown :global(li) {
+        margin-bottom: 10px;
+        display: block;
+        align-items: flex-start;
+        gap: 10px;
+    }
     .PRO {
         --border-color: #f59e0b;
     }
@@ -240,16 +310,6 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
         --border-color: #10b981;
     }
 
-    .detail-item {
-        font-size: 0.9rem;
-        padding: 8px;
-        margin-bottom: 6px;
-        background: white;
-        border-left: 3px solid #cbd5e1;
-        border-radius: 4px;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    }
-
     .detail-item.pos {
         border-left-color: #4ade80;
     }
@@ -257,52 +317,43 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
         border-left-color: #f87171;
     }
 
-    /* CONTROLE DU SCROLL HORIZONTAL (MOBILE) */
-    .focus-column {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .card-scaling-container {
-        max-width: 100%; /* Empêche le débordement */
-    }
-
-    /* RESPONSIVE : Passage en colonne pour ton Samsung */
     @media (max-width: 1100px) {
         .hebel-dashboard {
-            display: flex; /* On passe en flex pour mieux contrôler l'empilement */
+            display: flex;
             flex-direction: column;
-            align-items: center; /* Centre tout ce qui est dans le dashboard */
+            align-items: center;
             padding: 0;
             margin: 0;
             width: 100%;
             overflow-x: hidden;
         }
-
         .focus-column {
             width: 100%;
-            margin: 0;
-            padding: 20px 0;
             display: flex;
-            justify-content: center; /* Centre la carte horizontalement */
+            justify-content: center;
-            align-items: center;
+            padding: 20px 0;
         }
-
         .card-scaling-container {
-            display: block;
-            margin: 0 auto; /* Centrage automatique via les marges */
-            width: fit-content; /* S'adapte à la taille de la Card */
             transform: scale(0.9);
             transform-origin: center center;
+            width: 100%;
+            max-width: 350px;
+            display: flex;
+            justify-content: center;
+            margin: 0 auto;
+        }
+        .card-scaling-container :global(.tcg-card) {
+            width: 100% !important;
+            height: auto !important;
+            aspect-ratio: 5 / 7;
+            margin: 0 auto;
         }
-
-        /* Important : On s'assure que la nav et les détails ne poussent pas le layout */
         .nav-column,
         .details-column {
-            width: 95%; /* Laisse une petite marge visuelle sur les côtés */
+            width: 100%;
-            margin: 0 auto;
+            max-width: 400px;
-            padding: 15px 0;
+            padding: 20px;
+            box-sizing: border-box;
         }
     }
 </style>

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">

src/pages/index.astro

@@ -2,17 +2,26 @@
 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");
+// 1. Récupération des deux types de contenu
+const allHumans = await getCollection("humans", ({ id }) => {
+    return id.startsWith("latchimynicolas/");
+});
+const allEvents = await getCollection("events");
 
-// 1. Tri par date décroissante
+// 2. Tri par date décroissante pour les humains
 const sortedAll = allHumans.sort(
     (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
 );
 
-// 2. Fonction de calcul de Streak (Série) corrigée
+// 3. Récupération du dernier événement (ex: Camping Châteauroux)
+const latestEvent = allEvents.sort(
+    (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
+)[0];
+
+// 4. Fonction de calcul de Streak (Série) [cite: 94]
 const getStreak = (name, entries) => {
-    // 1. On récupère les données utiles (date + si HYG était présent)
     const userDates = entries
         .filter((e) => e.data.name === name)
         .map((e) => ({
@@ -21,13 +30,11 @@ const getStreak = (name, entries) => {
                 e.data.manifestations?.some((m) => m.cercle === "HYG") || false,
         }));
 
-    // On dédoublonne et on trie (plus récent au plus ancien)
+    const uniqueDates = [...new Set(userDates.map((d) => d.date))]
-    const uniqueDates = [...new Set(userDates)].sort().reverse();
+        .sort()
-
+        .reverse();
     let streak = 0;
-    let hygCountLast7Days = 0;
     let today = new Date();
-    // On cale la date de vérification sur aujourd'hui à minuit
     let checkDate = new Date(
         today.getFullYear(),
         today.getMonth(),
@@ -36,12 +43,10 @@ const getStreak = (name, entries) => {
 
     for (let i = 0; i < 31; i++) {
         const dateStr = checkDate.toISOString().split("T")[0];
-
         if (uniqueDates.includes(dateStr)) {
             streak++;
             checkDate.setDate(checkDate.getDate() - 1);
         } else {
-            // Tolérance : si pas de note aujourd'hui, on vérifie si la série continue depuis hier
             if (i === 0) {
                 checkDate.setDate(checkDate.getDate() - 1);
                 const yesterdayStr = checkDate.toISOString().split("T")[0];
@@ -51,33 +56,26 @@ const getStreak = (name, entries) => {
         }
     }
 
-    // 2. Logique Malus HYG (7 derniers jours glissants)
+    // Malus HYG [cite: 103, 106]
-    const last7Days = [];
+    const last7Days = Array.from({ length: 7 }, (_, j) => {
-    for (let j = 0; j < 7; j++) {
         let d = new Date();
         d.setDate(d.getDate() - j);
-        last7Days.push(d.toISOString().split("T")[0]);
+        return d.toISOString().split("T")[0];
-    }
+    });
 
-    hygCountLast7Days = userDates.filter(
+    const hygCount = userDates.filter(
         (e) => last7Days.includes(e.date) && e.hasHyg,
     ).length;
-
+    if (hygCount < 3 && streak > 0) streak = Math.max(0, streak - 1);
-    // Si moins de 3 sessions HYG sur les 7 derniers jours, malus de 1
-    if (hygCountLast7Days < 3 && streak > 0) {
-        streak = Math.max(0, streak - 1);
-    }
 
     return streak;
 };
 
-// 3. Unicité par utilisateur pour l'affichage (dernière version de chaque profil)
+// 5. Unicité par utilisateur [cite: 107]
 const latestPerUser = Array.from(
     sortedAll
         .reduce((map, obj) => {
-            if (!map.has(obj.data.name)) {
+            if (!map.has(obj.data.name)) map.set(obj.data.name, obj);
-                map.set(obj.data.name, obj);
-            }
             return map;
         }, new Map())
         .values(),
@@ -95,11 +93,10 @@ const latestPerUser = Array.from(
     </header>
 
     <main class="hero-flex">
+        {/* Affichage des cartes Humains (Hebel) [cite: 110] */}
         {
             latestPerUser.map((entry) => {
-                // On calcule la streak ICI pour l'envoyer à la carte
                 const currentStreak = getStreak(entry.data.name, allHumans);
-
                 return (
                     <div class="card-focus">
                         <Card
@@ -118,10 +115,23 @@ const latestPerUser = Array.from(
                 );
             })
         }
+
+        {/* Insertion de la carte Événement  */}
+        {
+            latestEvent && (
+                <div class="card-focus">
+                    <EventCard frontmatter={latestEvent.data} />
+                    <div class="entry-meta">
+                        <p>Projet Communautaire</p>
+                    </div>
+                </div>
+            )
+        }
     </main>
 </Layout>
 
 <style>
+    /* Tes styles restent identiques pour préserver la mise en page [cite: 115, 119, 120] */
     .minimal-header {
         position: fixed;
         top: 50px;