card cosmo ambient

src/components/Card.astro

@@ -2,7 +2,7 @@
 const { frontmatter, streakCount = 1 } = Astro.props;
 const { birthDate, health, manifestations, date, name } = frontmatter;
 
-// 1. CALCUL DU NIVEAU ET VARIABLES DE BASE [cite: 25, 26, 27]
+// 1. CALCUL DU NIVEAU ET VARIABLES DE BASE
 const referenceDate = new Date(date);
 const birth = new Date(birthDate);
 let age = referenceDate.getFullYear() - birth.getFullYear();
@@ -15,16 +15,19 @@ if (
 const stress = health?.somatic?.stress_level ?? 2;
 const hallucinations = health?.mental?.hallucinations ?? 0;
 const sleepBase = health?.somatic?.sleep_avg ?? 7.5;
+const energy = health?.somatic?.energy_level ?? 5;
+const hygieneScore = health?.somatic?.hygiene_level ?? 5;
 
-// 2. RÉINTÉGRATION DES COMPTAGES (Le fix pour l'erreur) [cite: 28, 29, 30, 31]
+// 2. RÉINTÉGRATION DES COMPTAGES
 const counts = {
     PRO: manifestations?.filter((m) => m.cercle === "PRO").length || 0,
     SAN: manifestations?.filter((m) => m.cercle === "SAN").length || 0,
     SOC: manifestations?.filter((m) => m.cercle === "SOC").length || 0,
     FLX: manifestations?.filter((m) => m.cercle === "FLX").length || 0,
+    HYG: manifestations?.filter((m) => m.cercle === "HYG").length || 0,
 };
 
-// 3. SCORE D'HARMONIE RAFFINÉ [cite: 32, 33]
+// 3. SCORE D'HARMONIE RAFFINÉ
 const rawHarmony =
     manifestations?.reduce((acc, m) => {
         if (m.type === "pos") return acc + 1;
@@ -33,7 +36,7 @@ const rawHarmony =
     }, 0) || 0;
 
 const uniqueCercles = new Set(manifestations?.map((m) => m.cercle)).size;
-const hasAllCercles = uniqueCercles === 4;
+const hasAllCercles = uniqueCercles === 5;
 const harmonyScore = rawHarmony + (hasAllCercles ? 2 : 0);
 
 // 4. SYSTÈME DE RARETÉ ET SHINY
@@ -56,16 +59,22 @@ const autoMotivation =
     health?.mental?.motivation ?? Math.min(10, uniqueCercles * 2.5);
 const streakBonus = Math.floor(streakCount / 7);
 const autoAtk = Math.min(
-    12,
+    15,
     counts.PRO * 2 +
         Math.floor(autoMotivation / 4) +
+        Math.floor(energy / 3) + // L'énergie booste l'attaque
         (harmonyScore > 0 ? 1 : 0) +
         streakBonus,
 );
 const sleepPenalty = sleepBase - (counts.PRO > 5 ? 1 : 0) < 6 ? 2 : 0;
 const autoDef = Math.max(
     0,
-    10 - stress - hallucinations - sleepPenalty + streakBonus,
+    10 +
+        Math.floor(hygieneScore / 2) -
+        stress -
+        hallucinations -
+        sleepPenalty +
+        streakBonus,
 );
 const autoCost = Math.max(1, Math.ceil((manifestations?.length || 0) / 2));
 
@@ -129,6 +138,36 @@ const circleSummaries = Object.entries(counts)
             manifestations?.find((m) => m.cercle === type && m.type)?.type ||
             "neu",
     }));
+
+// LAYER AUTO : Les constantes biologiques et calculées
+const autoLayer = [
+    {
+        label: "Sommeil",
+        value: `${sleepBase}h`,
+        status: sleepBase < 6 ? "critique" : "stable",
+    },
+    {
+        label: "Énergie",
+        value: `${energy}/10`,
+        status: energy < 3 ? "bas" : "normal",
+    },
+    {
+        label: "Hallucinations",
+        value: hallucinations,
+        status: hallucinations > 4 ? "alerte" : "calme",
+    },
+    { label: "Stabilité", value: currentBiome.label, status: "info" },
+];
+
+// LAYER MANUEL : Les leviers d'action et ressentis
+const manualLayer = [
+    { label: "Stress ressenti", value: `${stress}/10` },
+    { label: "Hygiène foyer", value: `${hygieneScore}/10` },
+    {
+        label: "Harmonie globale",
+        value: harmonyScore > 0 ? `+${harmonyScore}` : harmonyScore,
+    },
+];
 ---
 
 <article
@@ -168,19 +207,35 @@ const circleSummaries = Object.entries(counts)
             }
         </div>
 
-        <div class="rules-box">
+        <div class="rules-box medical-dashboard">
-            <div class="mechanics-summary">
+            <div class="layer-auto">
-                <ul>
+                <header class="layer-title">Indicateurs Somatiques</header>
-                    <li><strong>Origine :</strong> {biomeReason}</li>
+                <div class="stats-grid">
-                    <li>
+                    {
-                        <strong>Série :</strong> Bonus +{streakBonus} ATK/DEF
+                        autoLayer.map((stat) => (
-                    </li>
+                            <div class={`stat-item ${stat.status}`}>
-                    <li class="manual-values">
+                                <span class="stat-label">{stat.label}</span>
-                        Stress {stress} • Sommeil {sleepBase}h • Harmonie {
+                                <span class="stat-value">{stat.value}</span>
-                            harmonyScore > 0 ? `+${harmonyScore}` : harmonyScore
+                            </div>
+                        ))
                     }
-                    </li>
+                </div>
-                </ul>
+            </div>
+
+            <hr class="layer-divider" />
+
+            <div class="layer-manual">
+                <header class="layer-title">Ressentis & Hygiène</header>
+                <div class="stats-grid">
+                    {
+                        manualLayer.map((stat) => (
+                            <div class="stat-item">
+                                <span class="stat-label">{stat.label}</span>
+                                <span class="stat-value">{stat.value}</span>
+                            </div>
+                        ))
+                    }
+                </div>
             </div>
         </div>
 
@@ -283,14 +338,71 @@ const circleSummaries = Object.entries(counts)
     .FLX {
         border-bottom: 3px solid #10b981;
     }
+    .HYG {
+        border-bottom: 3px solid #9400ff;
+    }
     .rules-box {
         margin-top: auto;
         padding: 6px;
         background: rgba(255, 255, 255, 0.25);
         border-radius: 6px;
     }
+    .medical-dashboard {
+        color: #0f172a;
+        padding: 8px;
+    }
+
+    .layer-title {
+        font-size: 0.65rem;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        font-weight: 800;
+        margin-bottom: 5px;
+        color: #475569;
+    }
+
+    .stats-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 4px;
+    }
+
+    .stat-item {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.8rem;
+        padding: 2px 4px;
+        border-radius: 3px;
+        background: rgba(0, 0, 0, 0.05);
+    }
+
+    /* Alertes visuelles pour le médecin */
+    .stat-item.critique {
+        background: #fee2e27d;
+        color: #991b1b;
+        border-left: 3px solid #ef4444;
+    }
+    .stat-item.alerte {
+        background: #fef3c77d;
+        color: #92400e;
+        border-left: 3px solid #f59e0b;
+    }
+
+    .layer-divider {
+        border: 0;
+        border-top: 1px dashed #cbd5e1;
+        margin: 8px 0;
+    }
+
+    .stat-label {
+        font-weight: 500;
+    }
+    .stat-value {
+        font-family: monospace;
+        font-weight: bold;
+    }
     .mechanics-summary li {
-        font-size: 0.58rem;
+        font-size: 1rem;
         list-style: none;
         line-height: 1.3;
     }

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) => (
+                    circleOrder.map(
-                        <div class={`detail-card ${m.cercle}`}>
+                        (cercle) =>
-                            <header>
+                            groupedManifestations[cercle] && (
-                                <span class="cercle-label">{m.cercle}</span>
+                                <section class={`cercle-group ${cercle}`}>
-                            </header>
+                                    <h3 class="cercle-header">
-                            <p>{m.content}</p>
+                                        {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;
+            display: flex; /* On passe en flex pour mieux contrôler l'empilement */
-            height: auto;
+            flex-direction: column;
-            padding: 10px;
+            align-items: center; /* Centre tout ce qui est dans le dashboard */
-        }
+            padding: 0;
-
+            margin: 0;
-        .nav-column,
+            width: 100%;
-        .details-column {
+            overflow-x: hidden;
-            order: 2;
-            height: auto;
         }
 
         .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;