card cosmo ambient

2026-02-20 21:54:38 +04:00
parent 3816b63a22
commit 9f3e5515d1
8 changed files with 6356 additions and 14 deletions
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -0,0 +1,309 @@
+---
+const { frontmatter } = Astro.props;
+const { birthDate, health, manifestations, date } = frontmatter;
+
+// 1. CALCUL DU NIVEAU
+const referenceDate = new Date(date);
+const birth = new Date(birthDate);
+let age = referenceDate.getFullYear() - birth.getFullYear();
+if (
+    new Date(referenceDate.getFullYear(), birth.getMonth(), birth.getDate()) >
+    referenceDate
+)
+    age--;
+
+// 2. VARIABLES ET COMPTAGES
+const stress = health?.somatic?.stress_level ?? 2;
+const hallucinations = health?.mental?.hallucinations ?? 0;
+const sleepBase = health?.somatic?.sleep_avg ?? 7.5;
+
+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,
+};
+
+// 3. SCORE D'HARMONIE
+const harmonyScore =
+    manifestations?.reduce((acc, m) => {
+        if (m.type === "pos") return acc + 1;
+        if (m.type === "neg") return acc - 1;
+        return acc;
+    }, 0) || 0;
+
+// 4. STATS TCG
+const uniqueCercles = new Set(manifestations?.map((m) => m.cercle)).size;
+const autoMotivation =
+    health?.mental?.motivation ?? Math.min(10, uniqueCercles * 2.5);
+const harmonyAtkBonus = harmonyScore > 0 ? 1 : 0;
+const harmonyDefPenalty = harmonyScore < -2 ? 2 : 0;
+
+const autoAtk = Math.min(
+    10,
+    counts.PRO * 2 + Math.floor(autoMotivation / 4) + harmonyAtkBonus,
+);
+const sleepPenalty = sleepBase - (counts.PRO > 5 ? 1 : 0) < 6 ? 2 : 0;
+const autoDef = Math.max(
+    0,
+    10 - stress - hallucinations - sleepPenalty - harmonyDefPenalty,
+);
+const autoCost = Math.max(1, Math.ceil((manifestations?.length || 0) / 2));
+
+// 5. LOGIQUE DES BIOMES (L'ÉQUILIBRE FINAL)
+let autoBiome = "SAVANE";
+let biomeReason = "Équilibre par défaut";
+
+// 1. SANTÉ (ÉTANG) - Priorité critique
+if (stress > 7 || hallucinations >= 2 || harmonyScore <= -3) {
+    autoBiome = "ETANG";
+    biomeReason = "Alerte Santé / Harmonie critique";
+}
+// 2. ÉQUILIBRE RICHE (BELOUVE) - Priorité si diversité de vie
+else if (uniqueCercles >= 3 && counts.SAN > 0) {
+    autoBiome = "BELOUVE";
+    biomeReason = "Harmonie des Cercles";
+}
+// 3. FLUX SOCIAL (OCEAN) - Si le social domine le pro
+else if (counts.SOC > counts.PRO || counts.FLX > 2) {
+    autoBiome = "OCEAN";
+    biomeReason = "Flux Social & Émotionnel";
+}
+// 4. LA FORGE (FOURNAISE) - Si le pro domine OU si on a une accumulation (>= 2)
+// mais qu'on n'est pas déjà tombé dans Belouve ou Ocean
+else if (counts.PRO >= 2 && counts.PRO >= counts.SOC) {
+    autoBiome = "FOURNAISE";
+    biomeReason = "Dominance Technique (PRO)";
+}
+
+const biomes = {
+    ETANG: {
+        color: "#737e71",
+        label: "L'Inerte",
+        strong: "SAVANE",
+        weak: "OCEAN",
+    },
+    SAVANE: {
+        color: "#e2d1a4",
+        label: "La Clarté",
+        strong: "FOURNAISE",
+        weak: "BELOUVE",
+    },
+    OCEAN: {
+        color: "#85a9bc",
+        label: "Le Flux",
+        strong: "FOURNAISE",
+        weak: "BELOUVE",
+    },
+    BELOUVE: {
+        color: "#5b8c5d",
+        label: "La Racine",
+        strong: "ETANG",
+        weak: "FOURNAISE",
+    },
+    FOURNAISE: {
+        color: "#b35d4d",
+        label: "La Forge",
+        strong: "BELOUVE",
+        weak: "OCEAN",
+    },
+};
+
+const currentBiome = biomes[autoBiome] || biomes.SAVANE;
+
+const circleSummaries = Object.entries(counts)
+    .filter(([_, count]) => count > 0)
+    .map(([type, count]) => ({
+        type,
+        count,
+        dominance:
+            manifestations?.find((m) => m.cercle === type && m.type)?.type ||
+            "neu",
+    }));
+---
+
+<article class="tcg-card" style={`--biome-color: ${currentBiome.color}`}>
+    <div class="card-border">
+        <header class="card-header">
+            <span class="name">{frontmatter.name}</span>
+            <span class="cost">{autoCost}</span>
+        </header>
+
+        <div class="card-art">
+            <div class="biome-tag">{autoBiome}</div>
+            <div class="biome-label">{currentBiome.label}</div>
+        </div>
+
+        <div class="card-type-line">
+            Niveau {age} — {frontmatter.identity?.job || "PROTO"}
+        </div>
+
+        <div class="card-body">
+            {
+                circleSummaries.map((circle) => (
+                    <div class="effect-line">
+                        <span
+                            class={`type-tag ${circle.type} ${circle.dominance}`}
+                        >
+                            {circle.type} <small>x{circle.count}</small>
+                            {circle.dominance === "pos" && " +"}
+                            {circle.dominance === "neg" && " -"}
+                        </span>
+                    </div>
+                ))
+            }
+        </div>
+
+        <div class="rules-box">
+            <div class="mechanics-summary">
+                <ul>
+                    <li><strong>Origine Biome :</strong> {biomeReason}</li>
+                    <li>
+                        <strong>Surcharge :</strong> PRO &gt; 5 ➔ Sommeil -1h
+                    </li>
+                    <li class="manual-values">
+                        <strong>Apports :</strong> Stress {stress} • Sommeil {
+                            sleepBase
+                        }h • Hallu {hallucinations}
+                    </li>
+                    <li>
+                        <strong>Harmonie :</strong> Score {
+                            harmonyScore > 0 ? `+${harmonyScore}` : harmonyScore
+                        } (Motiv. +{autoMotivation})
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <footer class="card-footer">
+            <div class="matchup">
+                <span>VS {currentBiome.strong} (+)</span>
+                <span>VS {currentBiome.weak} (-)</span>
+            </div>
+            <div class="stats-box">
+                {autoAtk} / {autoDef}
+            </div>
+        </footer>
+    </div>
+</article>
+
+<style>
+    /* Ton CSS reste identique */
+    .tcg-card {
+        width: 320px;
+        height: 480px;
+        background: var(--biome-color);
+        border-radius: 18px;
+        padding: 12px;
+        font-family: "Philosopher", serif;
+        color: #1e293b;
+    }
+    .card-border {
+        height: 100%;
+        border-radius: 10px;
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
+    }
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        font-weight: bold;
+    }
+    .card-art {
+        flex: 1;
+        margin: 5px 0;
+        position: relative;
+    }
+    .biome-tag {
+        background: #333;
+        color: white;
+        padding: 2px 8px;
+        font-size: 0.6rem;
+        border-radius: 5px;
+        width: fit-content;
+    }
+    .biome-label {
+        font-size: 0.6rem;
+        padding: 2px 0;
+    }
+    .card-type-line {
+        border-bottom: 1px solid #333;
+        font-size: 0.75rem;
+        padding: 2px 5px;
+        margin-bottom: 5px;
+        font-weight: bold;
+    }
+    .card-body {
+        flex: 0.8;
+        display: flex;
+        gap: 5px;
+        flex-wrap: wrap;
+    }
+    .type-tag {
+        font-size: 0.7rem;
+        font-weight: bold;
+        padding: 2px 5px;
+        border-radius: 3px;
+        color: white;
+        background: #333;
+    }
+    .type-tag small {
+        font-size: 0.6rem;
+        opacity: 0.8;
+    }
+    .type-tag.pos {
+        border-left: 4px solid #4ade80;
+    }
+    .type-tag.neg {
+        border-left: 4px solid #f87171;
+    }
+    .PRO {
+        border-bottom: 3px solid #f59e0b;
+    }
+    .SAN {
+        border-bottom: 3px solid #3b82f6;
+    }
+    .SOC {
+        border-bottom: 3px solid #ec4899;
+    }
+    .FLX {
+        border-bottom: 3px solid #10b981;
+    }
+    .rules-box {
+        margin-top: auto;
+        padding: 6px;
+        background: rgba(255, 255, 255, 0.25);
+        border-radius: 6px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    .mechanics-summary li {
+        font-size: 0.58rem;
+        list-style: none;
+        line-height: 1.3;
+    }
+    .manual-values {
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        margin-top: 3px;
+        padding-top: 3px;
+        font-weight: bold;
+    }
+    .card-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-top: 8px;
+    }
+    .stats-box {
+        background: #333;
+        color: white;
+        padding: 3px 8px;
+        border-radius: 5px;
+        font-size: 1.1rem;
+    }
+    .matchup {
+        font-size: 0.5rem;
+        text-transform: uppercase;
+        font-weight: bold;
+    }
+</style>
--- a/src/components/TimelineBoard.astro
+++ b/src/components/TimelineBoard.astro
@@ -0,0 +1,102 @@
+---
+const { entry, sortedEntries } = Astro.props;
+const displayDate = entry
+    ? new Date(entry.data.date).toLocaleDateString("fr-FR")
+    : "Aucune date";
+---
+
+<div class="card-wrapper">
+
+    <nav class="history-nav">
+        <p class="nav-title">Chronologie du Souffle</p>
+        <div class="slug-list">
+            {
+                sortedEntries.map((e) => {
+                    // ID propre pour l'URL (ex: latchimynicolas/2026-02-19)
+                    // On retire l'extension .md si elle existe pour l'URL
+                    const cleanId = e.id.replace(/\.md$/, "");
+
+                    const dateLabel = new Date(e.data.date).toLocaleDateString(
+                        "fr-FR",
+                        {
+                            day: "2-digit",
+                            month: "2-digit",
+                        },
+                    );
+
+                    const isActive = entry.id === e.id;
+
+                    return (
+                        <a
+                            href={`/${cleanId}`}
+                            class={`nav-item ${isActive ? "active" : ""}`}
+                        >
+                            {dateLabel}
+                        </a>
+                    );
+                })
+            }
+        </div>
+    </nav>
+
+    <div class="debug-info">
+        <p>Flux synchronisé : {displayDate}</p>
+        <p>Source : Obsidian / Raspberry Pi 4</p>
+    </div>
+</div>
+
+<style>
+    .card-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 25px;
+        margin: 50px 50px
+        padding: 50px;
+    }
+    .history-nav {
+        background: white;
+        padding: 15px;
+        border-radius: 12px;
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+        border: 1px solid #e2e8f0;
+        max-width: 320px;
+        width: 100%;
+    }
+    .nav-title {
+        font-size: 0.6rem;
+        text-transform: uppercase;
+        font-weight: bold;
+        color: #94a3b8;
+        margin-bottom: 10px;
+        letter-spacing: 1px;
+        text-align: center;
+    }
+    .slug-list {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .nav-item {
+        text-decoration: none;
+        font-size: 0.75rem;
+        padding: 4px 8px;
+        border-radius: 6px;
+        background: #f1f5f9;
+        color: #475569;
+        transition: all 0.2s;
+        font-family: monospace;
+    }
+    .nav-item.active {
+        background: #333;
+        color: white;
+    }
+    .debug-info {
+        text-align: center;
+        font-size: 0.6rem;
+        color: #94a3b8;
+        font-family: monospace;
+        text-transform: uppercase;
+    }
+</style>
--- a/src/content
+++ b/src/content
@@ -0,0 +1 @@
+/home/nicolas-latchimy/Nextcloud/Notes/ambient/content/
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,81 @@
+---
+// src/layouts/Layout.astro
+interface Props {
+    title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="fr">
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            name="description"
+            content="Hebel - Système de gestion de flux personnel"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta name="generator" content={Astro.generator} />
+        <title>{title}</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Philosopher:ital,wght@0,400;0,700;1,400&display=swap"
+            rel="stylesheet"
+        />
+    </head>
+    <body>
+        <slot />
+    </body>
+</html>
+
+<style is:global>
+    :root {
+        --bg-gradient: radial-gradient(
+            circle at 50% 50%,
+            #ffffff 0%,
+            #f1f5f9 100%
+        );
+    }
+
+    * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }
+
+    html,
+    body {
+        overflow-x: hidden;
+        height: 100%;
+        width: 100%;
+    }
+
+    body {
+        font-family: "Inter", sans-serif;
+        background-image: var(--bg-gradient);
+        background-attachment: fixed;
+        color: #1e293b;
+        min-height: 100vh;
+        display: block; /* Change de flex à block pour laisser le contrôle aux pages */
+        line-height: 1.5;
+    }
+
+    /* Style spécifique pour les titres de cartes TCG */
+    h1,
+    h2,
+    .name,
+    .trigram {
+        font-family: "Philosopher", serif;
+    }
+
+    /* Optimisation mobile pour ton Samsung */
+    @media (max-width: 480px) {
+        body {
+            padding: 10px;
+            align-items: flex-start; /* Permet de scroller si la carte est longue */
+        }
+    }
+</style>
--- a/src/pages/[...id].astro
+++ b/src/pages/[...id].astro
@@ -0,0 +1,156 @@
+---
+import { getCollection } from "astro:content";
+import Layout from "../layouts/Layout.astro";
+import TimelineBoard from "../components/TimelineBoard.astro";
+import Card from "../components/Card.astro";
+
+export async function getStaticPaths() {
+    const allHumans = await getCollection("humans");
+    const sortedEntries = allHumans.sort(
+        (a, b) =>
+            new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
+    );
+    return allHumans.map((entry) => ({
+        params: { id: entry.id.replace(/\.md$/, "") },
+        props: { entry, sortedEntries },
+    }));
+}
+
+const { entry, sortedEntries } = Astro.props;
+const manifestations = entry.data.manifestations || [];
+---
+
+<Layout title={`Hebel - ${entry.data.name}`}>
+    <div class="hebel-dashboard">
+        <aside class="nav-column">
+            <TimelineBoard entry={entry} sortedEntries={sortedEntries} />
+        </aside>
+
+        <main class="focus-column">
+            <div class="card-scaling-container">
+                <Card frontmatter={entry.data} />
+            </div>
+        </main>
+
+        <aside class="details-column">
+            <h2 class="section-title">Émanations</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>
+                    ))
+                }
+            </div>
+        </aside>
+    </div>
+</Layout>
+
+<style>
+    .hebel-dashboard {
+        display: grid;
+        grid-template-columns: 280px 1fr 320px;
+        gap: 20px;
+        padding: 20px;
+        max-width: 1600px;
+        margin: 0 auto;
+        height: 100vh;
+        align-items: start;
+    }
+
+    /* 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] */
+        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 [cite: 107, 108, 109, 110] */
+    .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);
+    }
+
+    .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;
+    }
+
+    /* 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 [cite: 128] */
+    }
+
+    /* 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;
+        }
+
+        .focus-column {
+            order: 1;
+            padding: 20px 0;
+        }
+
+        /* Réduction de la carte si l'écran est trop petit */
+        .card-scaling-container {
+            transform: scale(0.9);
+            transform-origin: top center;
+        }
+    }
+</style>
--- a/src/pages/collection.astro
+++ b/src/pages/collection.astro
@@ -0,0 +1,139 @@
+---
+import { getCollection } from "astro:content";
+import Layout from "../layouts/Layout.astro";
+import Card from "../components/Card.astro";
+
+const allHumans = await getCollection("humans");
+// 1. Tri chronologique global
+const sortedEntries = allHumans.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;
+    if (!acc[userName]) acc[userName] = [];
+    acc[userName].push(entry);
+    return acc;
+}, {});
+---
+
+<Layout title="Hebel - Collection">
+    <header class="collection-header">
+        <a href="/" class="back-link">← Retour au flux</a>
+        <h1>Toute la Collection</h1>
+    </header>
+
+    <main class="collection-container">
+        {
+            Object.entries(groupedHumans).map(([userName, cards]) => (
+                <section class="user-collection">
+                    <h2 class="user-title">
+                        {userName} <span>({cards.length} souffles)</span>
+                    </h2>
+
+                    <div class="user-flex-row">
+                        {cards.map((entry) => (
+                            <a
+                                href={`/${entry.id.replace(/\.md$/, "")}`}
+                                class="card-link"
+                            >
+                                <div class="card-scaler">
+                                    <Card frontmatter={entry.data} />
+                                    <div class="entry-meta">
+                                        <p>
+                                            {new Date(
+                                                entry.data.date,
+                                            ).toLocaleDateString("fr-FR")}
+                                        </p>
+                                    </div>
+                                </div>
+                            </a>
+                        ))}
+                    </div>
+                    <hr class="separator" />
+                </section>
+            ))
+        }
+    </main>
+</Layout>
+
+<style>
+    .collection-header {
+        padding: 40px;
+        text-align: center;
+    }
+
+    .back-link {
+        color: #64748b;
+        text-decoration: none;
+        font-size: 0.9rem;
+    }
+
+    .collection-container {
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 0 20px 40px;
+    }
+
+    .user-collection {
+        margin-bottom: 60px;
+    }
+
+    .user-title {
+        font-family: "Philosopher", serif;
+        font-size: 1.5rem;
+        color: #1e293b;
+        margin-bottom: 25px;
+        border-left: 5px solid #333;
+        padding-left: 15px;
+    }
+
+    .user-title span {
+        font-size: 0.9rem;
+        color: #94a3b8;
+        font-weight: normal;
+    }
+
+    .user-flex-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px; /* Gap simple comme demandé */
+        justify-content: flex-center;
+    }
+
+    .entry-meta {
+        font-family: "Inter", sans-serif;
+        font-size: 0.8rem;
+        color: #94a3b8;
+        text-transform: uppercase;
+        text-align: center;
+        letter-spacing: 1px;
+    }
+
+    .card-link {
+        text-decoration: none;
+        transition: transform 0.3s ease;
+    }
+
+    .card-link:hover {
+        transform: translateY(-5px);
+    }
+
+    .separator {
+        margin-top: 50px;
+        border: 0;
+        border-top: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    /* Adaptabilité mobile [cite: 96] */
+    @media (max-width: 480px) {
+        .user-flex-row {
+            gap: 15px;
+            justify-content: center;
+        }
+        .card-scaler {
+            transform: scale(0.9);
+        }
+    }
+</style>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,17 +1,116 @@
 ---
+import { getCollection } from "astro:content";
+import Layout from "../layouts/Layout.astro";
+import Card from "../components/Card.astro";
+
+const allHumans = await getCollection("humans");
+// 1. On trie d'abord par date décroissante pour avoir les plus récents en premier [cite: 65]
+const sortedAll = allHumans.sort(
+    (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
+);
+
+// 2. On utilise une Map pour ne garder que la première occurrence (la plus récente) de chaque nom
+const latestPerUser = Array.from(
+    sortedAll
+        .reduce((map, obj) => {
+            if (!map.has(obj.data.name)) {
+                map.set(obj.data.name, obj);
+            }
+            return map;
+        }, new Map())
+        .values(),
+);
+---

---
+<Layout title="Derniers Souffles">
+    <header class="minimal-header">
+        <nav>
+            <a href="/collection" class="menu-link">
+                <span class="icon">🎴</span> Collection
+            </a>
+        </nav>
+    </header>

-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-	</body>
-</html>
+    <main class="hero-flex">
+        {
+            latestPerUser.map((entry) => (
+                <div class="card-focus">
+                    <Card frontmatter={entry.data} />
+                    <div class="entry-meta">
+                        <p>
+                            Dernier souffle :{" "}
+                            {new Date(entry.data.date).toLocaleDateString(
+                                "fr-FR",
+                            )}
+                        </p>
+                    </div>
+                </div>
+            ))
+        }
+    </main>
+</Layout>
+
+<style>
+    /* Header minimaliste pour le menu */
+    .minimal-header {
+        position: fixed;
+        top: 0;
+        right: 0;
+        padding: 20px 30px;
+        z-index: 100;
+    }
+
+    .menu-link {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        text-decoration: none;
+        color: #1e293b;
+        font-family: "Philosopher", serif;
+        font-weight: bold;
+        background: rgba(255, 255, 255, 0.8);
+        padding: 10px 20px;
+        border-radius: 50px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+        backdrop-filter: blur(5px);
+        transition: transform 0.2s ease;
+    }
+
+    .menu-link:hover {
+        transform: scale(1.05);
+    }
+
+    /* Centrage absolu de la carte */
+    .hero-flex {
+        display: flex;
+        flex-wrap: wrap; /* Permet le retour à la ligne */
+        justify-content: center; /* Centre les cartes sur la ligne */
+        gap: 20px; /* Espacement simple et constant */
+        padding: 100px 20px; /* Padding haut pour le header fixé */
+        width: 100%;
+        min-height: 100vh;
+    }
+
+    .card-focus {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+        flex: 0 1 320px; /* Ne grandit pas, peut rétrécir, base à 320px */
+    }
+    .entry-meta {
+        font-family: "Inter", sans-serif;
+        font-size: 0.8rem;
+        color: #94a3b8;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+
+    /* Ajustement Mobile pour ton Samsung */
+    @media (max-width: 480px) {
+        .hero-flex {
+            gap: 10px; /* Gap plus serré sur téléphone */
+            padding: 80px 10px;
+        }
+    }
+</style>
				`@@ -0,0 +1 @@`
				`/home/nicolas-latchimy/Nextcloud/Notes/ambient/content/`