/* ============================================================
   Page de recherche.

   Trois états, chacun avec sa mise en page : formulaire et exemples avant
   toute recherche, compteur puis grille quand il y a des résultats, et une
   sortie franche quand il n'y en a pas, vers les trois clubs, Tous les
   casques, le guide et Offrir (snippets/onward.liquid).

   Le champ est un champ en capsule sur papier teinté, avec son bouton
   rond, et les exemples des capsules (instrument.css).
   ============================================================ */

.search-page {
  padding-block: clamp(28px, 4vw, 56px) var(--space-section);
  background: var(--surface-sunken);
}

.search-page h1 { margin: 0; }

/* ---------- Champ ---------- */

.search-bar { max-width: 720px; margin: 26px 0 36px; }

/* ---------- Exemples ---------- */

.search-bar__examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
}

.search-bar__examples-label { margin: 0; color: var(--ink-70); font-size: .95rem; font-weight: 700; }

.search-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-bar__chip { min-height: 44px; padding: 0 16px; }

/* ---------- États ---------- */

.search-page__count { margin-bottom: 25px; color: var(--ink-70); }

.search-page__hint { max-width: 48ch; margin: 0; color: var(--ink-70); }

.search-page__empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  max-width: 780px;
}

.search-page__empty-title {
  margin: 0;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}

.search-page__empty-note { max-width: 52ch; margin: 0; color: var(--ink-70); }

.search-page__onward { margin-top: clamp(36px, 5vw, 64px); }