From 55c6ac21b8520213af741896f3ad72d6dd9627ae Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Tue, 7 Apr 2026 14:37:53 +0200
Subject: [PATCH] fix tfe page: scope common.css header to body>header, fix
 grid width collapse, remove overflow-y clip

---
 TODO.md                      |  4 ++++
 public/assets/css/common.css | 26 +++++++++++++-------------
 public/assets/css/tfe.css    | 11 ++++++-----
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/TODO.md b/TODO.md
index acbcadb..54427e4 100644
--- a/TODO.md
+++ b/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
diff --git a/public/assets/css/common.css b/public/assets/css/common.css
index 1ad9465..d9b90cb 100644
--- a/public/assets/css/common.css
+++ b/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,
-header nav ul a {
+body > header nav > 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);
 }
 
diff --git a/public/assets/css/tfe.css b/public/assets/css/tfe.css
index 3da60b2..b334775 100644
--- a/public/assets/css/tfe.css
+++ b/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-size: 1rem;
+  font-family: var(--font-display);
+  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 */