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