@props(['breadcrumb' => null])
<header class="sticky top-0 z-40 bg-white/90 backdrop-blur border-b border-gray-200">
  <div class="flex items-center h-16 px-4 sm:px-6 lg:px-8 gap-3 sm:gap-6">
    {{-- Ouverture du menu latéral (mobile/tablette uniquement) --}}
    <button type="button"
            @click="sidebarOpen = true"
            class="lg:hidden -ml-1 w-10 h-10 rounded-cmu border border-gray-300 text-cmu-ink hover:border-cmu-green-600 hover:text-cmu-green-800 transition flex items-center justify-center flex-shrink-0"
            aria-label="Ouvrir le menu">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
      </svg>
    </button>
    <div class="flex-1 min-w-0">
      @if($breadcrumb)
        {{ $breadcrumb }}
      @endif
    </div>
    <div class="flex items-center gap-3">
      {{ $slot }}
      <span class="hidden sm:inline-flex items-center text-[10px] font-semibold tracking-[0.12em] uppercase text-gray-400 border-l border-gray-200 pl-3">
        {{ config('cmu.agence.sigle') }} · AMU
      </span>
    </div>
  </div>
</header>