{*
 * MÉRIDIAN — ps_searchbar
 * Icône déclencheur + overlay de recherche plein écran (fidèle maquette).
 * Le formulaire utilise le contrôleur de recherche du module ($search_controller_url).
 *}
<div id="search_widget" class="search-widget header-icon" data-search-toggle data-search-controller-url="{$search_controller_url}">
  <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" height="22" width="22" 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>
</div>

<div class="mrd-search" data-search-overlay aria-hidden="true">
  <div class="mrd-search-backdrop" data-search-close></div>
  <div class="mrd-search-panel">
    <div class="mrd-container">
      <form class="mrd-search-form" method="get" action="{$search_controller_url}" role="search">
        <input type="hidden" name="controller" value="search">
        <svg class="mrd-search-ico" width="22" height="22" 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>
        <input type="text" name="s" class="mrd-search-field search-input" value="{$search_string}"
          placeholder="{l s='Rechercher produits, catégories…' d='Shop.Theme.Catalog'}" autocomplete="off"
          aria-label="{l s='Rechercher' d='Shop.Theme.Catalog'}">
        <button type="button" class="mrd-search-close" data-search-close aria-label="{l s='Fermer' 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="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </form>
      <div class="mrd-search-results" data-search-results aria-live="polite" hidden></div>
    </div>
  </div>
</div>
