Améliore la lisibilité des en-têtes de phase

styles.css

@@ -501,6 +501,13 @@ textarea:focus {
   grid-template-columns: auto 1fr auto;
   gap: 0.8rem;
   align-items: center;
+  padding: 1rem 1.15rem;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 28px;
+  background:
+    linear-gradient(135deg, rgba(10, 12, 17, 0.9), rgba(22, 26, 35, 0.78));
+  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
+  backdrop-filter: blur(10px);
 }
 
 .brand-link {
@@ -536,6 +543,7 @@ textarea:focus {
   flex: 0 0 auto;
   width: 3.7rem;
   height: auto;
+  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
 }
 
 .brand-link-mark {
@@ -543,20 +551,36 @@ textarea:focus {
   max-width: 100%;
   width: 7.4rem;
   height: auto;
-  mix-blend-mode: screen;
+  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
 }
 
 .phase-title {
   text-align: center;
+  padding-inline: 0.6rem;
 }
 
 .phase-title h1 {
   margin: 0;
   font-size: clamp(1.9rem, 4vw, 3rem);
+  color: #ffffff;
+  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.26);
 }
 
 .phase-subtitle {
   margin: 0.25rem 0 0;
+  color: rgba(245, 247, 251, 0.88);
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.phase-header .eyebrow {
+  margin-bottom: 0.35rem;
+  color: #7aa8ff;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
+}
+
+.phase-header .button.ghost {
+  background: rgba(10, 12, 17, 0.65);
+  border-color: rgba(255, 255, 255, 0.14);
 }
 
 .utility-button {