ergonomie

src/components/ContentSearch.astro

@@ -7,7 +7,7 @@ interface Props {
 }
 const { posts, tags, basePath } = Astro.props;
 
-// Groupement simple
+// Groupement des tags par catégorie
 const groupedTags: Record<string, string[]> = { Général: [] };
 tags.forEach((tag) => {
     if (tag.includes(":")) {
@@ -105,6 +105,7 @@ tags.forEach((tag) => {
                 .toLowerCase()
                 .normalize("NFD")
                 .replace(/[\u0300-\u036f]/g, "");
+
             const filtered = posts.filter((p) => {
                 const mQuery = p.data.title.toLowerCase().includes(query);
                 const mTag =
@@ -112,7 +113,8 @@ tags.forEach((tag) => {
                 return mQuery && mTag;
             });
 
-            container!.innerHTML = filtered
+            // Reconstruction propre du HTML des cartes
+            container.innerHTML = filtered
                 .map(
                     (p) => `
                 <a href="/journal/${p.id}/" class="gold-button">
@@ -126,24 +128,31 @@ tags.forEach((tag) => {
 
         input.addEventListener("input", update);
 
+        // Gestion de la navigation par catégories
         document.querySelectorAll(".cat-nav-btn").forEach((btn) => {
             btn.addEventListener("click", () => {
                 document
                     .querySelectorAll(".cat-nav-btn")
                     .forEach((b) => b.classList.remove("active"));
                 btn.classList.add("active");
+
                 const target = btn.getAttribute("data-target");
                 document.querySelectorAll(".tag-subgroup").forEach((g) => {
                     (g as HTMLElement).style.display =
                         g.id === `group-${target}` ? "block" : "none";
                 });
+
                 if (target === "all") {
                     activeTag = "all";
+                    document
+                        .querySelectorAll(".js-tag-filter")
+                        .forEach((el) => el.classList.remove("active-tag"));
                     update();
                 }
             });
         });
 
+        // Gestion des filtres par tags
         document.querySelectorAll(".js-tag-filter").forEach((t) => {
             t.addEventListener("click", () => {
                 document
@@ -155,6 +164,8 @@ tags.forEach((tag) => {
             });
         });
     }
+
+    // Ré-initialisation lors du changement de page (Astro View Transitions)
     document.addEventListener("astro:page-load", init);
 </script>
 
@@ -172,6 +183,7 @@ tags.forEach((tag) => {
         border: 1px solid var(--color-gold);
         outline: none;
         font-family: inherit;
+        background: white;
     }
     .filter-box {
         border: 1px solid #dcd0b9;

src/layouts/GameLayout.astro

@@ -29,155 +29,109 @@ const { title } = Astro.props;
         --color-ink: #4a4130;
         --color-gold: #c89b3c;
         --color-gold-dark: #b8860b;
-        --obsidian-border: #dcd0b9;
     }
 
+    /* Reset de base */
     * {
         box-sizing: border-box;
     }
-
     body {
         background-color: var(--color-parchment);
         color: var(--color-ink);
-        /* Calibri en priorité */
+        font-family: "Calibri", "Segoe UI", sans-serif; /* Ta police Calibri */
-        font-family: "Calibri", "Candara", "Segoe UI", sans-serif;
         margin: 0;
-        line-height: 1.6;
         overflow-x: hidden;
     }
 
+    /* LE FIX DES MARGES : C'est ce bloc qui centre tout ton site */
     main {
         width: 100%;
-        max-width: 1000px;
+        max-width: 1000px; /* Largeur confortable pour Lenovo et Samsung */
-        margin: 0 auto;
+        margin: 0 auto; /* Centre le bloc horizontalement */
-        padding: 1rem;
+        padding: 2rem 1.5rem; /* Marges internes pour que rien ne touche les bords */
     }
 
-    /* --- TABLEAUX OBSIDIAN --- */
+    /* LA GRILLE : Flexbox pour éviter le débordement mobile */
-    table {
+    .card-grid {
-        width: 100%;
-        border-collapse: collapse;
-        margin: 1.5rem 0;
-        border: 1px solid var(--obsidian-border);
-        display: block;
-        overflow-x: auto;
-    }
-    th,
-    td {
-        border: 1px solid var(--obsidian-border);
-        padding: 0.8rem;
-        text-align: left;
-    }
-    th {
-        background: rgba(220, 208, 185, 0.3);
-        font-family: "Cinzel", serif;
-    }
-
-    /* --- LISTES MOBILE --- */
-    ul,
-    ol {
-        padding-left: 1.5rem;
-        margin: 1rem 0;
-    }
-    li {
-        margin-bottom: 0.4rem;
-    }
-
-    @media (max-width: 640px) {
-        ul ul,
-        ol ol {
-            padding-left: 1rem;
-        }
-        main {
-            padding: 0.8rem;
-        }
-    }
-
-    /* --- CITATIONS (BLOCKQUOTES) --- */
-    blockquote {
-        margin: 1.5rem 0;
-        padding: 0.5rem 1rem;
-        border-left: 4px solid var(--color-gold);
-        background: rgba(200, 155, 60, 0.05);
-        font-style: italic;
-    }
-
-    /* --- STYLE DES TAGS --- */
-    /* On utilise une classe explicite pour éviter l'erreur de build */
-    .tag-link {
-        display: inline-block !important;
-        text-decoration: none !important;
-        background: white !important;
-        border: 1px solid var(--color-gold) !important;
-        padding: 0.2rem 0.7rem !important;
-        border-radius: 15px !important;
-        font-family: "Cinzel", serif !important;
-        font-size: 0.7rem !important;
-        color: var(--color-ink) !important;
-        margin: 0.2rem !important;
-        transition: 0.2s;
-    }
-    .tag-link:hover {
-        background: var(--color-gold) !important;
-        color: white !important;
-    }
-
-    /* STYLE DES CARTES (Gold Button) */
-    .gold-button {
         display: flex;
-        flex-direction: column;
+        flex-wrap: wrap;
+        gap: 20px;
         justify-content: center;
-        align-items: center;
+        padding: 20px 0;
-        background: #fffaf0; /* Fond parchemin clair */
+        width: 100%;
-        border: 2px solid var(--color-gold);
+    }
-        border-radius: 12px;
+
-        padding: 1.5rem;
+    /* LE STYLE DES CARTES (FORCE LE LOOK D'INDEX) */
-        text-decoration: none !important;
+    .gold-button {
-        transition: all 0.3s ease;
+        flex: 1 1 300px;
-        text-align: center;
+        max-width: 400px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
         min-height: 120px;
+        background: white !important;
+        border: 2px solid var(--color-gold) !important;
+        border-radius: 12px !important;
+        padding: 20px !important;
+        text-decoration: none !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        justify-content: center !important;
+        transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
     }
 
     .gold-button:hover {
         transform: translateY(-5px);
-        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+        border-color: var(--color-gold-dark) !important;
-        border-color: var(--color-gold-dark);
+        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
-        background: white;
     }
 
     .gold-button .title {
-        font-family: "Cinzel", serif;
+        font-family: "Cinzel", serif !important;
-        font-size: 1.2rem;
+        color: var(--color-gold-dark) !important;
-        color: var(--color-gold-dark);
+        font-size: 1.1rem !important;
-        margin-bottom: 0.5rem;
         text-transform: uppercase;
+        margin-bottom: 8px;
+        text-align: center;
     }
 
     .gold-button .body {
-        font-family: "Calibri", sans-serif; /* Ta police demandée */
+        font-family: "Calibri", sans-serif !important;
-        font-size: 0.9rem;
+        color: var(--color-ink) !important;
-        color: var(--color-ink);
+        font-size: 0.9rem !important;
-        opacity: 0.8;
         margin: 0;
+        opacity: 0.8;
     }
 
-    /* GRILLE FLEXBOX */
+    /* TAGS PROPRES SANS PRÉFIXE */
-    .card-grid {
+    .js-tag-filter,
-        display: flex;
+    .tag-link {
-        flex-wrap: wrap;
+        display: inline-block;
-        gap: 2rem;
+        background: white;
-        justify-content: center;
+        border: 1px solid var(--color-gold);
-        padding: 2rem 0;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-family: "Cinzel", serif;
+        font-size: 0.7rem;
+        color: var(--color-ink);
+        cursor: pointer;
+        margin: 4px;
+        text-decoration: none;
     }
 
-    .card-grid > * {
+    .active-tag,
-        flex: 1 1 300px;
+    .js-tag-filter:hover {
-        max-width: 400px;
+        background: var(--color-gold) !important;
+        color: white !important;
     }
 
+    /* MOBILE : On élargit au maximum */
     @media (max-width: 640px) {
-        .card-grid > * {
+        .card-grid {
+            padding: 10px;
+        }
+        .gold-button {
             flex: 1 1 100%;
         }
     }