diff --git a/src/pages/index.astro b/src/pages/index.astro
index c44f99c..677ddf3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,7 +3,7 @@ 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"; // <-- AJOUT
+import BankCard from "../components/BankCard.astro";
 
 // 1. Récupération des données
 const allHumans = await getCollection("humans", ({ id }) => {
@@ -26,7 +26,7 @@ const latestEvent = allEvents.sort(
     (a, b) => new Date(a.data.date).getTime() - new Date(b.data.date).getTime(),
 )[0];
 
-// 3. Logique de Streak (Série) - TON CODE ORIGINAL
+// 3. Logique de Streak (Série)
 const getStreak = (name: any, entries: any) => {
     const userDates = entries
         .filter((e: any) => e.data.name === name)
@@ -84,7 +84,7 @@ const getStreak = (name: any, entries: any) => {
 // 4. Sélection de la carte principale
 const latestPerUser = Array.from(
     sortedAll
-        .reduce((map, obj) => {
+        .reduce((map: any, obj: any) => {
             if (!map.has(obj.data.name)) map.set(obj.data.name, obj);
             return map;
         }, new Map())
@@ -104,15 +104,21 @@ const latestPerUser = Array.from(
     <main>
         <h1 class="main-title">Ambient</h1>
 
-        <section class="hero-flex">
-            {
-                latestPerUser.map((entry) => {
-                    const currentStreak = getStreak(entry.data.name, allHumans);
-                    return (
+        <div class="carousel-container">
+            <button class="nav-btn prev" id="prevBtn" aria-label="Précédent"
+                >‹</button
+            >
+
+            <section class="hero-flex">
+                {
+                    latestPerUser.map((entry) => (
                         <div class="card-focus">
                             <Card
                                 frontmatter={entry.data}
-                                streakCount={currentStreak}
+                                streakCount={getStreak(
+                                    entry.data.name,
+                                    allHumans,
+                                )}
                             />
                             <div class="entry-meta">
                                 <p>
@@ -123,111 +129,138 @@ const latestPerUser = Array.from(
                                 </p>
                             </div>
                         </div>
-                    );
-                })
-            }
+                    ))
+                }
 
-            {
-                latestEvent && (
-                    <div class="card-focus">
-                        <EventCard frontmatter={latestEvent.data} />
-                        <div class="entry-meta">
-                            <p>Projet Actif : {latestEvent.data.type}</p>
+                {
+                    latestEvent && (
+                        <div class="card-focus">
+                            <EventCard frontmatter={latestEvent.data} />
+                            <div class="entry-meta">
+                                <p>Projet Actif : {latestEvent.data.type}</p>
+                            </div>
                         </div>
-                    </div>
-                )
-            }
+                    )
+                }
 
-            {
-                upCard && (
-                    <div class="card-focus">
-                        <BankCard
-                            frontmatter={upCard.data}
-                            allHumans={allHumans}
-                        />
-                        <div class="entry-meta">
-                            <p>État du cercle FLX</p>
+                {
+                    upCard && (
+                        <div class="card-focus">
+                            <BankCard
+                                frontmatter={upCard.data}
+                                allHumans={allHumans}
+                            />
+                            <div class="entry-meta">
+                                <p>État du cercle FLX</p>
+                            </div>
                         </div>
-                    </div>
-                )
-            }
-        </section>
+                    )
+                }
+            </section>
+
+            <button class="nav-btn next" id="nextBtn" aria-label="Suivant"
+                >›</button
+            >
+        </div>
     </main>
 </Layout>
 
 <style>
+    /* 1. Reset et Base */
+    * {
+        box-sizing: border-box;
+    }
+
+    .carousel-container {
+        position: relative;
+        width: 100%;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+    }
+
+    /* 2. Le Flex Horizontal (Le "Souffle") */
     .hero-flex {
         display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 40px;
+        flex-direction: row;
+        flex-wrap: nowrap; /* EMPÊCHE le chevauchement par empilement */
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        scroll-behavior: smooth;
+        gap: 20px;
         padding: 60px 20px;
-        scroll-snap-type: x mandatory; /* Optionnel pour le swipe Samsung */
+        width: 100%;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        -webkit-overflow-scrolling: touch;
     }
+
+    .hero-flex::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* 3. La Carte */
     .card-focus {
+        flex: 0 0 auto; /* Empêche la compression de la carte */
+        width: 320px;
         scroll-snap-align: center;
-    }
-    /* ... le reste de ton CSS ... */
-
-    .intent-quote {
-        max-width: 800px;
-        margin: 20px auto;
-        font-size: 1.1rem;
-        color: #475569;
-        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
     }
 
-    .work-todo-grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 30px;
-        margin-top: 40px;
-    }
-
-    .todo-column {
-        background: white;
-        padding: 25px;
-        border-radius: 16px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
-    }
-
-    .todo-column h3 {
-        font-family: "Philosopher", serif;
-        font-size: 1.2rem;
-        margin-bottom: 20px;
-        color: #1e293b;
-        border-bottom: 2px solid #e2e8f0;
-        padding-bottom: 10px;
-    }
-
-    .todo-column ul {
-        list-style: none;
-        padding: 0;
-    }
-
-    .todo-column li {
-        margin-bottom: 15px;
-        font-size: 0.95rem;
-        line-height: 1.5;
-        color: #64748b;
-        position: relative;
-        padding-left: 20px;
-    }
-
-    .todo-column li::before {
-        content: "→";
+    /* 4. Navigation */
+    .nav-btn {
         position: absolute;
-        left: 0;
-        color: #3b82f6;
-        font-weight: bold;
+        z-index: 10;
+        background: rgba(255, 255, 255, 0.9);
+        border: none;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        font-size: 1.5rem;
+        cursor: pointer;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 
-    @media (max-width: 1024px) {
-        .work-todo-grid {
-            grid-template-columns: 1fr;
+    .prev {
+        left: 10px;
+    }
+    .next {
+        right: 10px;
+    }
+
+    /* 5. Responsive Mobile (Samsung) */
+    @media (max-width: 768px) {
+        .nav-btn {
+            display: none;
+        }
+
+        .hero-flex {
+            gap: 60px;
+            padding: 40px 10vw; /* Centre la carte active et montre un peu les voisines */
+        }
+
+        .card-focus {
+            width: 80vw;
+            min-width: 80vw; /* FORCE la largeur pour éviter que les cartes se rentrent dedans */
         }
     }
 
+    /* 6. Centrage Desktop (Lenovo) */
+    @media (min-width: 1025px) {
+        .hero-flex {
+            justify-content: center;
+            gap: 40px;
+        }
+    }
+
+    /* 7. Typography & UI */
     .main-title {
         text-align: center;
         font-family: "Philosopher", serif;
@@ -236,6 +269,13 @@ const latestPerUser = Array.from(
         color: #1e293b;
     }
 
+    .entry-meta {
+        font-family: "Philosopher", serif;
+        font-size: 0.9rem;
+        color: #64748b;
+        text-align: center;
+    }
+
     .minimal-header {
         position: fixed;
         top: 20px;
@@ -257,106 +297,25 @@ const latestPerUser = Array.from(
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
         backdrop-filter: blur(5px);
     }
-
-    .hero-flex {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 40px;
-        padding: 60px 20px;
-        min-height: 60vh;
-    }
-
-    .card-focus {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 15px;
-        transition: transform 0.3s ease;
-    }
-
-    .entry-meta {
-        font-family: "Philosopher", serif;
-        font-size: 0.9rem;
-        color: #64748b;
-    }
-
-    .separator {
-        border: 0;
-        height: 1px;
-        background-image: linear-gradient(
-            to right,
-            transparent,
-            rgba(0, 0, 0, 0.1),
-            transparent
-        );
-        margin: 40px 0;
-    }
-
-    /* Codex Style */
-    .codex {
-        max-width: 1100px;
-        margin: 0 auto;
-        padding: 40px;
-        background: #f8fafc;
-        border-radius: 24px;
-        border: 1px solid #e2e8f0;
-    }
-
-    .codex-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 20px;
-    }
-
-    .codex-box {
-        background: white;
-        padding: 20px;
-        border-radius: 16px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
-    }
-
-    .synergy-active {
-        border: 2px solid #8b5cf6;
-    }
-    .status-ok {
-        color: #10b981;
-        font-weight: bold;
-    }
-    .status-ko {
-        color: #94a3b8;
-    }
-
-    /* System Rules Style */
-    .system-rules {
-        max-width: 1100px;
-        margin: 40px auto 100px auto;
-        padding: 20px;
-        font-family: "Philosopher", serif;
-    }
-
-    .rules-layout {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-        gap: 30px;
-        margin-top: 20px;
-    }
-
-    .rule-category h3 {
-        border-bottom: 1px solid #cbd5e1;
-        padding-bottom: 5px;
-        margin-bottom: 15px;
-        color: #334155;
-    }
-
-    .rule-category ul {
-        list-style: none;
-        padding: 0;
-    }
-
-    .rule-category li {
-        margin-bottom: 12px;
-        font-size: 0.95rem;
-        line-height: 1.4;
-    }
 </style>
+
+<script>
+    const initCarousel = () => {
+        const container = document.querySelector(".hero-flex");
+        const prevBtn = document.getElementById("prevBtn");
+        const nextBtn = document.getElementById("nextBtn");
+
+        if (container && prevBtn && nextBtn) {
+            nextBtn.onclick = () => {
+                container.scrollBy({ left: 350, behavior: "smooth" });
+            };
+
+            prevBtn.onclick = () => {
+                container.scrollBy({ left: -350, behavior: "smooth" });
+            };
+        }
+    };
+
+    initCarousel();
+    document.addEventListener("astro:after-swap", initCarousel);
+</script>