From 8b2ceba57413dfea1bddf475b4835137e6ea3ce9 Mon Sep 17 00:00:00 2001
From: Elmehdi Aitbrahim <eaitbrahim@gmail.com>
Date: Fri, 21 Aug 2026 20:51:27 -0400
Subject: [PATCH] style(ui): hold the 40px theme toggle and single-line FR nav
 at every viewport (#46)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .theme-toggle: add flex:none — as a flex item in .header-actions it was
  being shrunk to as little as 30.6px wide on crowded desktop bars (the
  2.5rem circle became an ellipse). It now renders a true 40x40 target
  from 390px up.
- html[lang="fr"] nav spacing: the previous FR metrics (0.87rem labels,
  0.35rem padding) still wrapped the nine French labels onto two crowded
  lines from 1024px through ~1280px. Tighten the base FR metrics and add a
  scoped 64rem-71.99rem band (tighter bar gutters + one font notch) so the
  nav holds a single line from the hamburger breakpoint up; 72rem+ keeps
  the base FR sizing.
- BaseHead.astro script directives: already fully is:inline-annotated on
  main (5073da0); astro check reports no hints for it, so no change needed.

Zero client JS added — CSS only.
---
 src/styles/global.css | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 7fa5c88..fe42ca2 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -405,6 +405,7 @@ section {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  flex: none; /* keep the 2.5rem circle — flex shrink squashed it to ~31px on crowded desktop bars (#46) */
   width: 2.5rem;
   height: 2.5rem;
   padding: 0;
@@ -1799,14 +1800,42 @@ html[dir="rtl"] .locale-switch {
   font-size: 1rem;
 }
 
-/* French labels run long — keep the one-bar nav from wrapping */
+/* French labels run long — keep the one-bar nav from wrapping. The stock FR
+   sizing (0.87rem / 0.35rem padding) still needed ~60px more than the bar
+   offers at the 64rem breakpoint, so the nav wrapped into two crowded lines
+   from 1024px up to ~1280px. The tighter metrics below keep all nine links
+   on a single line from 64rem up (below that the hamburger owns the nav). */
 html[lang="fr"] .site-nav {
-  gap: 0.1rem 0.35rem;
+  gap: 0.1rem 0.3rem;
 }
 
 html[lang="fr"] .site-nav a {
-  font-size: 0.87rem;
-  padding-inline: 0.35rem;
+  font-size: 0.82rem;
+  padding-inline: 0.22rem;
+}
+
+/* Intermediate viewports (64rem up to the container's comfortable width):
+   the nine French labels still crowd here even with the metrics above, so
+   reclaim a little bar room — tighter gutters around the nav and inside the
+   actions cluster — and ease the labels one notch below the base FR sizing.
+   72rem and wider fits with the base FR metrics untouched. */
+@media (min-width: 64rem) and (max-width: 71.99rem) {
+  html[lang="fr"] .site-header .inner {
+    gap: 0.5rem;
+  }
+
+  html[lang="fr"] .header-actions {
+    gap: 0.5rem;
+  }
+
+  html[lang="fr"] .site-nav {
+    gap: 0.1rem 0.15rem;
+  }
+
+  html[lang="fr"] .site-nav a {
+    font-size: 0.78rem;
+    padding-inline: 0.12rem;
+  }
 }
 
 /* Changelog (#41) — version TOC and per-release articles */