<div class="w-full space-y-4 sm:space-y-6 z-[800]">
  <!-- Barre de recherche -->
  <form [formGroup]="searchForm" (ngSubmit)="onSubmit()" class="w-full">
    <div class="flex flex-col sm:flex-row gap-3 sm:gap-0 w-full">
      <div
        class="flex-1 flex items-center gap-2 sm:gap-3 px-4 py-3 sm:py-2.5 border border-gray-300 dark:border-gray-700 rounded-full sm:rounded-l-full sm:rounded-r-none bg-white dark:bg-gray-800"
      >
        <!-- Icône de recherche -->
        <button
          type="button"
          class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
          aria-label="Icône de recherche"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-full h-full"
            viewBox="0 0 512 512"
            fill="currentColor"
          >
            <path
              d="M337.509 305.372h-17.501l-6.571-5.486c20.791-25.232 33.922-57.054 33.922-93.257C347.358 127.632 283.896 64 205.135 64 127.452 64 64 127.632 64 206.629s63.452 142.628 142.225 142.628c35.011 0 67.831-13.167 92.991-34.008l6.561 5.487v17.551L415.18 448 448 415.086 337.509 305.372zm-131.284 0c-54.702 0-98.463-43.887-98.463-98.743 0-54.858 43.761-98.742 98.463-98.742 54.7 0 98.462 43.884 98.462 98.742 0 54.856-43.762 98.743-98.462 98.743z"
            />
          </svg>
        </button>

        <!-- Input de recherche -->
        <input
          formControlName="search"
          type="search"
          autocomplete="off"
          autocorrect="off"
          autocapitalize="none"
          spellcheck="false"
          class="flex-1 focus:ring-0 focus:outline-none placeholder:text-gray-400 bg-transparent text-gray-800 dark:text-white text-sm sm:text-base"
          placeholder="Rechercher par nom, prénom..."
          aria-label="Rechercher un profil"
          aria-controls="search_results"
        />
      </div>

      <!-- Bouton de recherche -->
      <button
        type="submit"
        class="w-full sm:w-auto px-6 sm:px-8 py-3 sm:py-2.5 rounded-full sm:rounded-l-none sm:rounded-r-full bg-purple-600 hover:bg-purple-700 active:bg-purple-800 text-white font-medium text-sm sm:text-base transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
      >
        <span class="hidden sm:inline">{{
          searchForm.value!.search! === '' ? 'Explorer' : 'Rechercher'
        }}</span>
        <span class="sm:hidden">{{
          searchForm.value!.search! === '' ? 'Explorer' : 'Rechercher'
        }}</span>
      </button>
    </div>
  </form>
</div>
