ergonomie

src/layouts/GameLayout.astro

@@ -51,6 +51,112 @@ const { title } = Astro.props;
         padding: 2rem 1.5rem; /* Marges internes pour que rien ne touche les bords */
     }
 
+    /* --- 1. LES WIKILINKS [[Concept]] --- */
+    /* Le plugin transforme [[Concept]] en <a href="/concept">Concept</a> */
+    main a[href] {
+        color: var(--color-gold-dark);
+        font-weight: bold;
+        text-decoration: none;
+        background-color: rgba(200, 155, 60, 0.08);
+        padding: 0 4px;
+        border-radius: 4px;
+        border-bottom: 1px dashed var(--color-gold);
+        transition: all 0.2s ease;
+    }
+
+    main a[href]:hover {
+        background-color: var(--color-gold);
+        color: white !important;
+        border-bottom-style: solid;
+    }
+
+    /* --- STYLE DES TABLEAUX MARKDOWN (GFM) --- */
+    main table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 2.5rem 0;
+        background-color: #ffffff; /* Fond blanc pour faire ressortir l'alternance */
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+        overflow: hidden; /* Pour que les coins arrondis fonctionnent avec le fond des th */
+    }
+
+    /* Entête du tableau */
+    main th {
+        background-color: var(--color-gold);
+        color: white;
+        font-family: "Cinzel", serif;
+        text-transform: uppercase;
+        font-size: 0.85rem;
+        letter-spacing: 1px;
+        padding: 15px;
+        text-align: left;
+        border: 1px solid var(--color-gold-dark);
+    }
+
+    main th strong {
+        color: white;
+    }
+
+    /* Cellules standards */
+    main td {
+        padding: 12px 15px;
+        border: 1px solid rgba(200, 155, 60, 0.2);
+        font-size: 0.95rem;
+        color: var(--color-ink);
+        line-height: 1.4;
+    }
+
+    /* --- L'ALTERNANCE (LE ZEBRA) --- */
+    /* On applique un fond léger sur les lignes paires (even) */
+    main tr:nth-child(even) {
+        background-color: rgba(200, 155, 60, 0.06);
+    }
+
+    /* Effet au survol de la ligne pour ne pas perdre le fil */
+    main tr:hover {
+        background-color: rgba(200, 155, 60, 0.12);
+        transition: background-color 0.2s ease;
+    }
+
+    /* Ajustement pour le gras à l'intérieur des tableaux */
+    main td strong {
+        color: var(--color-gold-dark);
+    }
+
+    /* --- 3. LES GRAS ET SOULIGNÉS --- */
+    main strong {
+        color: var(--color-gold-dark);
+        font-weight: 700;
+    }
+
+    /* 3. Correction Tableaux : Assurer l'affichage sur mobile */
+    @media (max-width: 640px) {
+        main table {
+            display: block;
+            overflow-x: auto; /* Permet de scroller le tableau s'il est trop large sur ton Samsung */
+            white-space: nowrap;
+        }
+    }
+
+    /* Style pour les lignes alternées de tes tableaux (Aventuriers/Personnages) */
+    main table tr:nth-child(even) {
+        background-color: rgba(200, 155, 60, 0.08);
+    }
+
+    main table tr:hover {
+        background-color: rgba(200, 155, 60, 0.15);
+    }
+
+    /* --- RÉPARATION DU RENDU ET STYLE CALLOUT --- */
+    main blockquote {
+        margin: 2rem 0;
+        padding: 1.5rem;
+        background-color: rgba(200, 155, 60, 0.05);
+        border-left: 5px solid var(--color-gold);
+        border-radius: 0 8px 8px 0;
+        color: var(--color-ink);
+    }
+
     /* LA GRILLE : Flexbox pour éviter le débordement mobile */
     .card-grid {
         display: flex;