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

src/components/astro/ColCentre.astro

@@ -5,7 +5,7 @@ import CarteOWrapper from '../vue/CarteOWrapper.vue';
 import ChatbotV2 from '../vue/ChatbotV2.vue';
 import EmbedDynamique from '../vue/EmbedDynamique.vue';
 ---
-<div id="col-centre-grid" class="h-full grid grid-rows-2 gap-2 p-2">
+<div id="col-centre-grid" class="h-full grid gap-2 p-2" style="grid-template-rows: 1fr 2fr;">
   <!-- HAUT 50% : tabs Carte O / Chatbot -->
   <section id="col-centre-haut" class="border border-neutral-200 rounded flex flex-col overflow-hidden bg-white" style="min-height: 0;">
     <nav role="tablist" aria-label="Vues centrales" class="flex border-b border-neutral-200 px-1 pt-1">
@@ -97,8 +97,8 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
       haut.style.minHeight = '0';
       poignee?.setAttribute('aria-label', 'Deployer la Carte O');
     } else {
-      grid.classList.add('grid-rows-2');
-      grid.style.gridTemplateRows = '';
+      grid.classList.remove('grid-rows-2');
+      grid.style.gridTemplateRows = '1fr 2fr';
       haut.style.overflow = '';
       haut.style.minHeight = '';
       poignee?.setAttribute('aria-label', 'Replier la Carte O');
@@ -141,7 +141,7 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
         const parts = rows.split(' ');
         return parseFloat(parts[0]) || 50;
       }
-      return 50;
+      return 33.33;
     };
 
     dragHandle.addEventListener('mousedown', (e: MouseEvent) => {
@@ -182,10 +182,10 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
       gridEl.classList.remove('grid-rows-2');
     }
 
-    // Double-click sur drag handle = reset 50/50
+    // Double-click sur drag handle = reset default 1/3 + 2/3
     dragHandle.addEventListener('dblclick', () => {
-      gridEl.style.gridTemplateRows = '';
-      gridEl.classList.add('grid-rows-2');
+      gridEl.style.gridTemplateRows = '1fr 2fr';
+      gridEl.classList.remove('grid-rows-2');
       sessionStorage.removeItem('tf-centre-rows');
     });
   }

src/components/astro/ColJournal.astro

@@ -5,19 +5,19 @@ const categories = [
   {
     id: 'politique',
     label: 'Politique',
-    color: '#1d4ed8',
+    color: '#B5443A',
     hashtags: ['#politique', '#aep-politique'],
     plateformes: [
-      { id: 'instagram', label: '@aep.politique', url: 'https://www.instagram.com/aep.politique/' },
+      { id: 'instagram', label: 'Court', url: 'https://www.instagram.com/aep.politique/' },
       { id: 'castopod', label: 'Podcast', url: 'https://podcast.trans-former.fr' },
-      { id: 'substack', label: 'Substack', url: 'https://julesneny.substack.com' },
+      { id: 'substack', label: 'Article', url: 'https://julesneny.substack.com' },
     ],
     hasSelector: true,
   },
   {
     id: 'art',
     label: 'Art',
-    color: '#dc2626',
+    color: '#5B6B3A',
     hashtags: ['#peinture', '#art'],
     plateformes: [
       { id: 'instagram', label: '@julesneny', url: 'https://www.instagram.com/julesneny/' },
@@ -27,7 +27,7 @@ const categories = [
   {
     id: 'outils',
     label: 'Outils',
-    color: '#16a34a',
+    color: '#475569',
     hashtags: ['#stack', '#building-public'],
     plateformes: [
       { id: 'gitea', label: 'Gitea', url: 'https://git.trans-former.fr/jules' },
@@ -68,7 +68,7 @@ const categories = [
           type="button"
           data-platform-id={p.id}
           class="platform-pill"
-          style="font-family:'Courier New',Courier,monospace;font-size:12px;padding:2px 8px;border-radius:12px;cursor:pointer;border:1px solid #1d4ed8;background:transparent;color:#1d4ed8;"
+          style="font-family:'Courier New',Courier,monospace;font-size:12px;padding:2px 8px;border-radius:12px;cursor:pointer;border:1px solid #B5443A;background:transparent;color:#B5443A;"
         >
           {p.label}
         </button>
@@ -219,11 +219,11 @@ const categories = [
     pills.forEach((pill) => {
       const pid = pill.dataset.platformId;
       if (!active || pid === active) {
-        pill.style.background = '#1d4ed8';
+        pill.style.background = '#B5443A';
         pill.style.color = '#fff';
       } else {
         pill.style.background = 'transparent';
-        pill.style.color = '#1d4ed8';
+        pill.style.color = '#B5443A';
       }
     });
   };

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"

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>

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">
-    <slot />
+  <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>

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" />