---
// SiteHeader.astro - V1.3-C : header 1 ligne fine, liens cliquables, phrase intention Roboto Condensed
// Palette V1.3 figee : papier #FAFAF7, encre #0F172A, encre douce #475569, border #E5E7EB
// Composition :
//   Desktop (>= md) : 1 ligne ~44px - Trans-Former | Jules Neny | architecture d'ecologie politique  [phrase intention right-aligned, Roboto Condensed]
//   Mobile (< md)   : 2 lignes compactes - ligne 1 Trans-Former / ligne 2 Jules Neny . AEP (cliquables) - phrase intention masquee
// Liens :
//   Trans-Former -> /
//   Jules Neny   -> /a-propos
//   architecture d'ecologie politique -> https://aep.trans-former.fr (same-tab, site frere coherent)
// Typo phrase intention : Roboto Condensed Variable @fontsource (weight 400, font-stretch 75%)
import '@fontsource-variable/roboto-condensed/wght.css';
---
<header
  class="site-header w-full border-b border-[#E5E7EB] bg-[#FAFAF7] text-[#0F172A] px-4 md:px-6 flex items-center"
  role="banner"
>
  <!-- Bloc identite (gauche) -->
  <nav
    class="flex flex-col md:flex-row md:items-baseline gap-x-2 gap-y-0.5 flex-shrink-0"
    aria-label="identite site"
  >
    <!-- Ligne 1 desktop = wordmark inline ; mobile = ligne dediee -->
    <a
      href="/"
      class="font-semibold tracking-tight text-[#0F172A] hover:text-[#0F172A] text-[15px] md:text-[16px] leading-none no-underline hover:underline underline-offset-2 decoration-1"
      aria-label="trans-former.fr - accueil"
    >
      Trans-Former
    </a>

    <!-- Bloc secondaire : Jules Neny . AEP (mobile : ligne 2 ; desktop : inline) -->
    <span class="flex items-baseline gap-1.5 text-[#475569] leading-none">
      <span class="text-[#94A3B8] hidden md:inline" aria-hidden="true">·</span>
      <a
        href="/a-propos"
        class="text-[12px] md:text-[13px] text-[#475569] hover:text-[#0F172A] no-underline hover:underline underline-offset-2 decoration-1"
      >
        Jules Neny
      </a>
      <span class="text-[#94A3B8]" aria-hidden="true">·</span>
      <a
        href="https://aep.trans-former.fr"
        class="text-[12px] md:text-[13px] text-[#475569] hover:text-[#0F172A] no-underline hover:underline underline-offset-2 decoration-1"
      >
        architecture d'écologie politique
      </a>
    </span>
  </nav>

  <!-- Phrase intention (droite, desktop only) - Roboto Condensed allongee -->
  <p
    class="intention hidden md:block ml-auto pl-6 text-right text-[#475569] text-[11px] leading-tight max-w-[55%]"
  >
    Comment créer une pratique systémique, créative et collective de transformation sociale pour répondre à l'effondrement et restaurer notre capacité à habiter la Terre dans l'Anthropocène&nbsp;?
  </p>
</header>

<style>
  .site-header {
    height: 44px;
  }
  @media (max-width: 767px) {
    .site-header {
      height: auto;
      min-height: 48px;
      padding-top: 6px;
      padding-bottom: 6px;
    }
  }
  /* Phrase intention : Roboto Condensed Variable, font-stretch 75% (allongement vertical condense)
     Cantonnee a .intention pour eviter contagion stack Inter */
  .intention {
    font-family: 'Roboto Condensed Variable', 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-stretch: 75%;
    font-style: italic;
    letter-spacing: 0.01em;
  }
</style>