Champ de recherche

<style>
.bn-search {
  position: relative;
  max-width: 340px;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-search__icon {
  position: absolute;
  left: 2.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #979793;
  font-size: 0.9rem;
  pointer-events: none;
}

.bn-search__input {
  width: 100%;
  padding: 0.7rem 2.2rem 0.7rem 2.5rem;

  font-family: inherit;
  font-size: 0.9rem;
  color: #E6E4DD;

  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(230, 228, 221, 0.2);
  border-radius: 999px;
}

.bn-search__input::placeholder {
  color: #5C6160;
}

.bn-search__input:focus-visible {
  outline: none;
  border-color: #E6E4DD;
}

/* Le navigateur ajoute par défaut un petit "x" natif sur les
   champs type="search" quand ils ne sont pas vides — on le
   désactive puisqu'on dessine le nôtre à la place */
.bn-search__input::-webkit-search-cancel-button {
  display: none;
}

.bn-search__clear {
  position: absolute;
  right: 2.6rem;
  top: 50%;
  transform: translateY(-50%);

  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #E6E4DD;
  font-size: 0.65rem;
  cursor: pointer;
}

</style>

<div class="bn-search" data-fx-root>
  <span class="bn-search__icon" aria-hidden="true">◎</span>
  <input
    type="search"
    class="bn-search__input"
    placeholder="Rechercher un projet..."
    autocomplete="off"
  />
  <button type="button" class="bn-search__clear" aria-label="Effacer la recherche" hidden>✕</button>
</div>


<script>
/* ==========================================================
   CHAMP DE RECHERCHE
   Affiche le bouton "effacer" seulement quand il y a du texte
   dans le champ, et vide le champ au clic dessus.
   ========================================================== */

(function () {
  const root = document.querySelector('.bn-search[data-fx-root]');
  if (!root) return;

  const input = root.querySelector('.bn-search__input');
  const clearBtn = root.querySelector('.bn-search__clear');

  function updateClearButton() {
    clearBtn.hidden = input.value.length === 0;
  }

  input.addEventListener('input', updateClearButton);

  clearBtn.addEventListener('click', () => {
    input.value = '';
    input.focus();
    updateClearButton();
  });
})();

</script>