feat(v12-m): header bandeau Trans-Former / Jules Neny / baseline palette terre

2026-05-11 18:41:51 +02:00
4 changed files with 66 additions and 7 deletions
--- a/src/components/astro/MobileTabBar.astro
+++ b/src/components/astro/MobileTabBar.astro
@@ -6,7 +6,7 @@
 <nav
  id="mobile-tab-bar"
  aria-label="Navigation colonnes"
-  class="fixed top-0 left-0 right-0 z-30 h-11 bg-white border-b border-neutral-200 flex items-stretch justify-around md:hidden"
+  class="fixed top-12 left-0 right-0 z-30 h-11 bg-white border-b border-neutral-200 flex items-stretch justify-around md:hidden"
 >
  <button
    type="button"
--- a/src/components/astro/SiteHeader.astro
+++ b/src/components/astro/SiteHeader.astro
@@ -0,0 +1,52 @@
+---
+// SiteHeader.astro - V1.2-M : bandeau header pleine largeur identite site
+// Palette terre figee : papier #FAFAF7, encre #0F172A, encre douce #475569
+// Composition retenue : 2 lignes hierarchique
+//   ligne 1 : "Trans-Former" wordmark dominant (semibold tracking serre)
+//   ligne 2 : "Jules Neny" + baseline italique cote a cote (separateur point median)
+// Rationale : le wordmark domine sans ecraser ; la baseline reste lisible ;
+// composition adaptee a un manifeste (hierarchie typographique forte).
+// Hauteur : ~64px desktop / ~48px mobile (compacte)
+// Baseline raccourcie mobile : "architecture politique du vivant"
+---
+<header
+  class="site-header w-full border-b border-[#E5E7EB] bg-[#FAFAF7] text-[#0F172A] px-4 md:px-6 flex items-center"
+  role="banner"
+>
+  <a
+    href="/"
+    class="flex flex-col md:flex-row md:items-baseline gap-x-3 gap-y-0 no-underline text-[#0F172A] hover:text-[#0F172A]"
+    aria-label="trans-former.fr - retour accueil"
+  >
+    <!-- Ligne 1 : wordmark dominant -->
+    <span
+      class="font-semibold tracking-tight text-[#0F172A] text-[17px] md:text-[20px] leading-none"
+    >
+      Trans-Former
+    </span>
+
+    <!-- Ligne 2 (desktop : inline ; mobile : sous wordmark) : Jules Neny + baseline -->
+    <span class="flex items-baseline gap-2 text-[#475569] leading-none">
+      <span class="text-[11px] md:text-[13px]">Jules Neny</span>
+      <span class="text-[#94A3B8]" aria-hidden="true">·</span>
+      <!-- Baseline longue : desktop / Baseline courte : mobile -->
+      <span class="italic text-[11px] md:text-[13px] hidden sm:inline">
+        architecture d'ecologie politique
+      </span>
+      <span class="italic text-[11px] inline sm:hidden">
+        architecture politique du vivant
+      </span>
+    </span>
+  </a>
+</header>
+
+<style>
+  .site-header {
+    height: 48px;
+  }
+  @media (min-width: 768px) {
+    .site-header {
+      height: 64px;
+    }
+  }
+</style>
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,6 +1,7 @@
 ---
 import '../styles/global.css';
 import Footer from '../components/astro/Footer.astro';
+import SiteHeader from '../components/astro/SiteHeader.astro';

 interface Props {
  title?: string;
@@ -28,8 +29,11 @@ const {
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
  </head>
-  <body class="m-0 bg-white text-neutral-900 antialiased">
+  <body class="m-0 bg-white text-neutral-900 antialiased min-h-screen flex flex-col">
+    <SiteHeader />
+    <div class="flex-1 flex flex-col min-h-0">
      <slot />
+    </div>
    <Footer />
  </body>
 </html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -15,15 +15,18 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
  <MobileTabBar />
  <PopupOnboarding />

-  <!-- Desktop : grid 3 colonnes -->
-  <div class="hidden md:grid md:grid-cols-[320px_1fr_320px] h-screen overflow-hidden">
+  <!-- Desktop : grid 3 colonnes (header 64px deja consommes par SiteHeader, on prend le reste) -->
+  <div
+    class="hidden md:grid md:grid-cols-[320px_1fr_320px] overflow-hidden"
+    style="height: calc(100vh - 64px);"
+  >
    <aside class="border-r border-neutral-200 overflow-y-auto"><ColJournal /></aside>
    <main class="overflow-hidden"><ColCentre /></main>
    <aside class="border-l border-neutral-200 overflow-y-auto"><ColInsta /></aside>
  </div>

-  <!-- Mobile : SwipeContainer Vue island - decale de 44px pour la tabbar -->
-  <div class="md:hidden overflow-hidden" style="height: calc(100dvh - 44px); margin-top: 44px;">
+  <!-- Mobile : SwipeContainer Vue island - header 48px + tabbar 44px = 92px reserves -->
+  <div class="md:hidden overflow-hidden" style="height: calc(100dvh - 48px - 44px); margin-top: 44px;">
    <SwipeContainer client:load>
      <ColJournal slot="left" />
      <ColCentre slot="center" />