fix tfe page: scope common.css header to body>header, fix grid width collapse, remove overflow-y clip

TODO.md

@@ -1,6 +1,10 @@
 # TODO
 
 ## Done
+- [x] Fix TFE page gradient bleed & layout collapse
+  - [x] Scope `header` nav CSS in common.css to `body > header` (prevents article `<header>` inheriting gradient)
+  - [x] Add `width: 100%` + `align-items: start` to `.tfe-layout` grid
+  - [x] Remove `overflow-y: auto` from `.tfe-main` (was clipping layout)
 - [x] Redesign TFE detail page
   - [x] Author moved above title (smaller body font)
   - [x] Remove "← Retour" back link

public/assets/css/common.css

@@ -71,7 +71,7 @@ a:hover {
 /* ============================================================
    HEADER / NAV BAR (public pages)
    ============================================================ */
-header {
+body > header {
   flex-shrink: 0;
   background: linear-gradient(
     180deg,
@@ -84,7 +84,7 @@ header {
   );
 }
 
-header nav {
+body > header nav {
   padding: 1.44rem 1.5rem;
   display: flex;
   align-items: center;
@@ -107,7 +107,7 @@ header nav {
   padding: 0;
 }
 
-header nav > a {
+body > header nav > a {
   font-family: var(--font-display);
   font-size: 1.1rem;
   letter-spacing: 0.12em;
@@ -117,7 +117,7 @@ header nav > a {
   /* font-weight: 400; */
 }
 
-header nav > ul {
+body > header nav > ul {
   display: flex;
   gap: 3rem;
   align-items: center;
@@ -126,7 +126,7 @@ header nav > ul {
   padding: 0;
 }
 
-header nav ul a {
+body > header nav ul a {
   font-size: 0.95rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
@@ -137,16 +137,16 @@ header nav ul a {
 }
 
 /* Subtle shadow on all header text to improve legibility against the gradient */
-header nav > a,
+body > header nav > a,
-header nav ul a {
+body > header nav ul a {
   text-shadow: 0 0 16px var(--header-shadow-strong), 0 0 32px var(--header-shadow-soft);
 }
 
-header nav ul a:hover {
+body > header nav ul a:hover {
   opacity: 1;
 }
 
-header nav ul a[aria-current="page"] {
+body > header nav ul a[aria-current="page"] {
   opacity: 1;
   border-bottom: 1px solid var(--header-nav-active-border);
   padding-bottom: 1px;
@@ -159,7 +159,7 @@ header nav ul a[aria-current="page"] {
   padding: 0 0;
 }
 
-header form[role="search"] {
+body > header form[role="search"] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -171,7 +171,7 @@ header form[role="search"] {
   color: var(--accent-primary);
 }
 
-header form[role="search"] svg {
+body > header form[role="search"] svg {
   color: var(--text-tertiary);
   flex-shrink: 0;
   width: 16px;
@@ -179,7 +179,7 @@ header form[role="search"] svg {
   stroke: var(--accent-primary);
 }
 
-header form[role="search"] input {
+body > header form[role="search"] input {
   flex: 1;
   border: none;
   font-size: 0.95rem;
@@ -189,7 +189,7 @@ header form[role="search"] input {
   font-family: inherit;
 }
 
-header form[role="search"] input::placeholder {
+body > header form[role="search"] input::placeholder {
   color: var(--accent-primary);
 }
 

public/assets/css/tfe.css

@@ -13,7 +13,6 @@
 
 .tfe-main {
   flex: 1;
-  overflow-y: auto;
   padding: 2rem 1.5rem 3rem;
 }
 
@@ -22,7 +21,9 @@
   display: grid;
   grid-template-columns: 1fr 1.4fr;
   gap: 3rem;
+  width: 100%;
   max-width: 1200px;
+  align-items: start;
 }
 
 /* Left column — article header */
@@ -32,14 +33,14 @@
   gap: 1.5rem;
 }
 
-/* Author (p) — above title, smaller */
+/* Author (p) — above title */
 .tfe-author {
-  font-family: var(--font-body);
+  font-family: var(--font-display);
-  font-size: 1rem;
+  font-size: 1.4rem;
   font-weight: 400;
   color: var(--text-primary);
   margin: 0;
-  line-height: 1.4;
+  line-height: 1.3;
 }
 
 /* Title (h1) — primary heading, very large */