{*
 * MÉRIDIAN — En-tête (bandeau + barre desktop + barre mobile)
 * 3 styles pilotés en back-office via ConfigHeader->header ($headerParameter[0]->header) :
 *   • header1 → "classic"  : logo gauche / nav centre / icônes droite (une rangée)
 *   • header2 → "centered" : recherche gauche / logo centre / icônes droite + nav en rangée dessous
 *   • header3 → "minimal" : bouton « Menu » (ouvre le tiroir) gauche / logo centre / icônes droite — sans nav inline ni méga-menu
 * background / color (ConfigHeader) surchargent le fond et la couleur du texte si renseignés.
 * Le header est sticky (CSS) : la barre de menu reste visible au scroll dans les 3 styles.
 * Le méga-menu et le tiroir mobile sont rendus par le module via {hook h='displayTop'} (menu.tpl).
 * Icônes (recherche / compte / panier) via {hook h='displayNav2'}.
 *}
{block name='header_banner'}
  {if !empty($bandeaux)}
    <div class="mrd-announce">{hook h='displayBandeau'}</div>
  {/if}
{/block}

{block name='header_nav'}
  {hook h='displayMagasin'}

  {* style d'en-tête : ConfigHeader->header (header1/2/3) → data-style MÉRIDIAN *}
  {assign var=_hdrSel value=($headerParameter[0]->header|default:'header1')}
  {if $_hdrSel == 'header2'}{assign var=_hdrStyle value='centered'}
  {elseif $_hdrSel == 'header3'}{assign var=_hdrStyle value='minimal'}
  {else}{assign var=_hdrStyle value='classic'}{/if}

  {* transparence (ConfigHeader->transparent) : uniquement sur l'accueil quand un hero plein écran est visible,
     sinon le texte blanc du header serait illisible sur les pages sans slider *}
  {assign var=_hasFullHero value=($page.page_name == 'index' && !empty($sliderParameter) && $sliderParameter[0]->isVisible && $sliderParameter[0]->width)}
  {assign var=_transparent value=(($headerParameter[0]->transparent|default:false) && $_hasFullHero)}
  {assign var=_hdrBg value=($headerParameter[0]->background|default:'')}
  {assign var=_hdrColor value=($headerParameter[0]->color|default:'')}

  {function name=mrdLogo size=140}
    <a class="mrd-logo" href="{$urls.base_url}" aria-label="{$shop.name}">
      {if isset($shop.logo_details) && $shop.logo_details.src}
        <img src="{$shop.logo_details.src}" alt="{$shop.name}" width="{$size}" height="28" {if $page.page_name != 'index'}fetchpriority="high"{/if}>
      {else}{$shop.name}{/if}
    </a>
  {/function}

  <div class="mrd-header" data-style="{$_hdrStyle}" data-transparent="{if $_transparent}true{else}false{/if}" data-scrolled="false"
       {if $_hdrBg || $_hdrColor}style="{if $_hdrBg}--mrd-hdr-bg:{$_hdrBg};{/if}{if $_hdrColor}--mrd-hdr-fg:{$_hdrColor};{/if}"{/if}>
    <div class="mrd-container">

      {* ---- Barre desktop ---- *}
      <div class="mrd-header-row">
        {if $_hdrStyle == 'centered'}
          <div class="mrd-icons" style="justify-self:start">
            {* champ de recherche compact : purement visuel, le clic ouvre l'overlay
               de recherche (.js-search-toggle est écouté par theme.js) *}
            <button type="button" class="mrd-search-mini js-search-toggle" aria-label="{l s='Rechercher' d='Shop.Theme.Actions'}">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
              <span>{l s='Rechercher' d='Shop.Theme.Actions'}</span>
            </button>
          </div>
          {mrdLogo size=160}
          <div class="mrd-icons">{hook h='displayNav2'}</div>
        {elseif $_hdrStyle == 'minimal'}
          <button class="mrd-menu-btn" type="button" data-mdrawer-open style="justify-self:start" aria-label="{l s='Menu' d='Shop.Theme.Global'}">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            <span>{l s='Menu' d='Shop.Theme.Global'}</span>
          </button>
          {mrdLogo size=160}
          <div class="mrd-icons">{hook h='displayNav2'}</div>
          {* méga-menu non affiché en minimal ; displayTop rendu masqué pour fournir le tiroir (que theme.js relocalise sur <body>) *}
          <div class="mrd-nav-source" hidden>{hook h='displayTop'}</div>
        {else}
          <span style="justify-self:start">{mrdLogo size=160}</span>
          <nav class="mrd-nav" aria-label="{l s='Navigation principale' d='Shop.Theme.Global'}">
            {hook h='displayTop'}
          </nav>
          <div class="mrd-icons">{hook h='displayNav2'}</div>
        {/if}
      </div>

      {* nav sous le logo pour le style "centered" *}
      {if $_hdrStyle == 'centered'}
        <div class="mrd-nav-row">
          <nav class="mrd-nav" aria-label="{l s='Navigation principale' d='Shop.Theme.Global'}">
            {hook h='displayTop'}
          </nav>
        </div>
      {/if}

      {* ---- Barre mobile ---- *}
      <div class="mrd-header-mobile">
        <button class="mrd-tap" data-mdrawer-open aria-label="{l s='Menu' d='Shop.Theme.Global'}">
          <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
        </button>
        {mrdLogo size=140}
        <div class="mrd-mob-right">{hook h='displayNav2'}</div>
      </div>

    </div>
  </div>
  {* L'overlay de recherche est rendu par le module ps_searchbar (displayNav2). *}
{/block}
