diff --git a/src/components/Timeline.astro b/src/components/Timeline.astro
index 934fb51..0b9c0f2 100644
--- a/src/components/Timeline.astro
+++ b/src/components/Timeline.astro
@@ -92,9 +92,16 @@ const { eras } = Astro.props;
     }
 
     /* Autre exemple pour une ère future */
-    .era-chip.active[data-era="foret-sombre"] {
-        background-color: #2d4a22; /* Vert sombre */
-        border-color: #2d4a22;
+    .era-chip.active[data-era="prelude"] {
+        background-color: #3c86c8; /* Vert sombre */
+        border-color: #3c86c8;
+    }
+
+    /* Changement au survol pour cette ère spécifique si non active */
+    .era-chip[data-era="prelude"]:hover:not(.active) {
+        border-color: #3c86c8;
+        background: #fffafa;
+        color: #3c86c8;
     }
 
     .scribe-icon {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a112780..7ecb706 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -140,6 +140,22 @@ const allTags = [
         background-color: #722f37 !important;
         color: #f3ece0 !important;
     }
+
+    /* On cible l'identifiant "prelude" */
+    .gold-button[data-era="prelude"] {
+        border-color: #3c86c8 !important; /* Une bordure lie-de-vin */
+    }
+
+    /* On cible l'identifiant "prelude" */
+    .gold-button[data-era="prelude"] .title {
+        color: #3c86c8 !important; /* Une bordure lie-de-vin */
+    }
+
+    /* On change aussi la couleur du petit tag pour cette ère */
+    .gold-button[data-era="prelude"]::before {
+        background-color: #3c86c8 !important;
+        color: #f3ece0 !important;
+    }
 </style>
 
 <script>