card cosmo ambient

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

@@ -18,9 +18,24 @@ export async function getStaticPaths() {
 
 const { entry, sortedEntries } = Astro.props;
 const manifestations = entry.data.manifestations || [];
+
+// Groupement des manifestations par catégorie (cercle)
+const groupedManifestations = manifestations.reduce((acc, m) => {
+    if (!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={`Hebel - ${entry.data.name}`}>
+<Layout title={`${entry.data.name}`}>
+    <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} />
@@ -33,17 +48,41 @@ const manifestations = entry.data.manifestations || [];
         </main>
 
         <aside class="details-column">
-            <h2 class="section-title">Émanations</h2>
+            <h2 class="section-title">Émanations (Détails par Cercle)</h2>
             <div class="details-scroll">
                 {
-                    manifestations.map((m) => (
-                        <div class={`detail-card ${m.cercle}`}>
-                            <header>
-                                <span class="cercle-label">{m.cercle}</span>
-                            </header>
-                            <p>{m.content}</p>
-                        </div>
-                    ))
+                    circleOrder.map(
+                        (cercle) =>
+                            groupedManifestations[cercle] && (
+                                <section class={`cercle-group ${cercle}`}>
+                                    <h3 class="cercle-header">
+                                        {cercle} (
+                                        {groupedManifestations[cercle].length} )
+                                    </h3>
+                                    <div class="cercle-content">
+                                        {groupedManifestations[cercle].map(
+                                            (m) => (
+                                                <details
+                                                    class={`detail-item ${m.type || "neu"}`}
+                                                >
+                                                    <summary class="note-summary">
+                                                        <span
+                                                            class={`status-dot ${m.type || "neu"}`}
+                                                        />
+                                                        <span class="note-label">
+                                                            Séquence
+                                                        </span>
+                                                    </summary>
+                                                    <p class="private-content">
+                                                        {m.content}
+                                                    </p>
+                                                </details>
+                                            ),
+                                        )}
+                                    </div>
+                                </section>
+                            ),
+                    )
                 }
             </div>
         </aside>
@@ -51,6 +90,16 @@ const manifestations = entry.data.manifestations || [];
 </Layout>
 
 <style>
+    .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;
@@ -64,18 +113,13 @@ const manifestations = entry.data.manifestations || [];
 
     /* Aligner le style des colonnes sur la Card */
     .details-column {
-        background: rgba(255, 255, 255, 0.6);
-        backdrop-filter: blur(10px);
-        border-radius: 18px; /* Comme la Card [cite: 48] */
-        padding: 20px;
-        border: 1px solid #e2e8f0;
         height: calc(100vh - 40px);
         display: flex;
         flex-direction: column;
     }
 
     .section-title {
-        font-family: "Philosopher", serif; /* Cohérence [cite: 127] */
+        font-family: "Philosopher", serif; /* Cohérence */
         text-transform: uppercase;
         font-size: 0.9rem;
         letter-spacing: 2px;
@@ -88,11 +132,8 @@ const manifestations = entry.data.manifestations || [];
         flex: 1;
     }
 
-    /* Style des items calqué sur les types de la Card [cite: 107, 108, 109, 110] */
+    /* Style des items calqué sur les types de la Card */
     .detail-card {
-        background: white;
-        padding: 15px;
-        border-radius: 10px;
         margin-bottom: 12px;
         border-bottom: 4px solid #666;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
@@ -117,6 +158,105 @@ const manifestations = entry.data.manifestations || [];
         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);
+        padding: 5px 0;
+        margin: 15px 0 10px 0;
+    }
+
+    .detail-item summary {
+        cursor: pointer;
+        font-size: 0.85rem;
+        color: #64748b;
+        list-style: none; /* Cache la flèche par défaut */
+    }
+
+    .note-summary {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        cursor: pointer;
+        padding: 4px 0;
+        list-style: none; /* Cache la flèche par défaut */
+    }
+
+    /* Le petit point de statut minimaliste */
+    .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: #cbd5e1; /* Neutre par défaut */
+        display: inline-block;
+    }
+
+    .status-dot.pos {
+        background-color: #4ade80; /* Vert succès */
+        box-shadow: 0 0 5px rgba(74, 222, 128, 0.5);
+    }
+
+    .status-dot.neg {
+        background-color: #f87171; /* Rouge alerte */
+        box-shadow: 0 0 5px rgba(248, 113, 113, 0.5);
+    }
+
+    .note-label {
+        font-family: "Philosopher", serif;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        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 */
+    .PRO {
+        --border-color: #f59e0b;
+    }
+    .SAN {
+        --border-color: #3b82f6;
+    }
+    .HYG {
+        --border-color: #9400ff;
+    }
+    .SOC {
+        --border-color: #ec4899;
+    }
+    .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;
+    }
+    .detail-item.neg {
+        border-left-color: #f87171;
+    }
+
     /* CONTROLE DU SCROLL HORIZONTAL (MOBILE) */
     .focus-column {
         display: flex;
@@ -125,32 +265,44 @@ const manifestations = entry.data.manifestations || [];
     }
 
     .card-scaling-container {
-        max-width: 100%; /* Empêche le débordement [cite: 128] */
+        max-width: 100%; /* Empêche le débordement */
     }
 
     /* RESPONSIVE : Passage en colonne pour ton Samsung */
     @media (max-width: 1100px) {
         .hebel-dashboard {
-            grid-template-columns: 1fr;
-            height: auto;
-            padding: 10px;
-        }
-
-        .nav-column,
-        .details-column {
-            order: 2;
-            height: auto;
+            display: flex; /* On passe en flex pour mieux contrôler l'empilement */
+            flex-direction: column;
+            align-items: center; /* Centre tout ce qui est dans le dashboard */
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            overflow-x: hidden;
         }
 
         .focus-column {
-            order: 1;
+            width: 100%;
+            margin: 0;
             padding: 20px 0;
+            display: flex;
+            justify-content: center; /* Centre la carte horizontalement */
+            align-items: center;
         }
 
-        /* Réduction de la carte si l'écran est trop petit */
         .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: top center;
+            transform-origin: center center;
+        }
+
+        /* 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 */
+            margin: 0 auto;
+            padding: 15px 0;
         }
     }
 </style>

src/pages/collection.astro

@@ -18,10 +18,11 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => {
 }, {});
 ---
 
-<Layout title="Hebel - Collection">
+<Layout title="Collection">
     <header class="collection-header">
         <a href="/" class="back-link">← Retour au flux</a>
-        <h1>Toute la Collection</h1>
+        <h1>Collection</h1>
+        <p class="back-link">Cliquer sur une carte pour en voir les détails.</p>
     </header>
 
     <main class="collection-container">

src/pages/index.astro

@@ -12,15 +12,20 @@ const sortedAll = allHumans.sort(
 
 // 2. Fonction de calcul de Streak (Série) corrigée
 const getStreak = (name, entries) => {
-    // On extrait toutes les dates pour cet utilisateur au format YYYY-MM-DD
+    // 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) => new Date(e.data.date).toISOString().split("T")[0]);
+        .map((e) => ({
+            date: new Date(e.data.date).toISOString().split("T")[0],
+            hasHyg:
+                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)].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(
@@ -45,6 +50,24 @@ const getStreak = (name, entries) => {
             break;
         }
     }
+
+    // 2. Logique Malus HYG (7 derniers jours glissants)
+    const last7Days = [];
+    for (let j = 0; j < 7; j++) {
+        let d = new Date();
+        d.setDate(d.getDate() - j);
+        last7Days.push(d.toISOString().split("T")[0]);
+    }
+
+    hygCountLast7Days = userDates.filter(
+        (e) => last7Days.includes(e.date) && e.hasHyg,
+    ).length;
+
+    // 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;
 };
 
@@ -62,6 +85,7 @@ const latestPerUser = Array.from(
 ---
 
 <Layout title="Derniers Souffles">
+    <h1 style="text-align: center;">Ambient</h1>
     <header class="minimal-header">
         <nav>
             <a href="/collection" class="menu-link">
@@ -100,7 +124,7 @@ const latestPerUser = Array.from(
 <style>
     .minimal-header {
         position: fixed;
-        top: 0;
+        top: 50px;
         right: 0;
         padding: 20px 30px;
         z-index: 100;