/* Recherche onsite : overlay plein écran (search.js), suggestions instantanées, page /recherche.
   Tokens seulement (tokens.css) : aucune taille de police ni couleur en dur. Mobile-first, desktop ≥ 960 px. */

/* ---------- Overlay ---------- */
.so { position: fixed; inset: 0; z-index: 60; }
.so[hidden] { display: none; }
.so__scrim { position: absolute; inset: 0; background: var(--color-scrim); }
.so__panel { position: relative; background: var(--color-surface); color: var(--color-ink); min-height: 100svh; display: flex; flex-direction: column; animation: so-in var(--duration-slow) var(--easing); }
.so__form { display: flex; align-items: center; gap: var(--space-3); height: var(--header-height); padding: 0 var(--space-3); border-bottom: 1px solid var(--color-line); flex: none; }
.so__ico { flex: none; color: var(--color-muted); }
.so__input { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; background: transparent; font: inherit; font-family: var(--font-serif); font-size: var(--text-22); letter-spacing: var(--serif-letter-spacing); color: var(--color-ink); -webkit-appearance: none; appearance: none; }
.so__input:focus { outline: none; }
.so__input::placeholder { color: var(--color-muted-2); }
.so__input::-webkit-search-cancel-button, .so__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.so__close { flex: none; }
.so__results { width: 100%; max-width: 720px; margin: 0 auto; padding: var(--space-3) var(--space-3) var(--space-8); overflow-y: auto; }
.so__hint { padding: var(--space-2) var(--space-2); margin: 0; }

/* Suggestions (fragment /recherche/suggest) */
.sg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sg__item { display: flex; align-items: center; gap: var(--space-3); min-height: 72px; padding: var(--space-2); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.sg__item:hover, .sg__item.is-active { background: var(--color-accent-bg); }
.sg__thumb { flex: none; width: 56px; height: 70px; border-radius: var(--radius); overflow: hidden; background: var(--color-accent-bg); }
.sg__thumb .picture, .sg__thumb img, .sg__thumb .ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sg__name { font-size: var(--text-15); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg__item .price--inline { flex: none; font-size: var(--text-15); }
.sg__families { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-3); }
.sg__all { display: flex; align-items: center; justify-content: center; min-height: var(--tap); margin-top: var(--space-2); border-radius: var(--radius); font-size: var(--text-13); letter-spacing: var(--ui-tracking); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.sg__all:hover, .sg__all.is-active { background: var(--color-accent-bg); }
.so__hint a { text-decoration: underline; text-underline-offset: 4px; }
.so__hint a.is-active { background: var(--color-accent-bg); }

@keyframes so-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .so__panel { animation: none; } }
@media (min-width: 960px) {
  .so { display: flex; align-items: flex-start; justify-content: center; padding: var(--space-12) var(--gutter); }
  .so[hidden] { display: none; }
  .so__panel { width: 100%; max-width: 720px; min-height: 0; max-height: calc(100svh - 2 * var(--space-12)); border-radius: var(--radius-md); box-shadow: var(--shadow-menu); overflow: hidden; }
  .so__form { height: var(--header-height-desktop); padding: 0 var(--space-5); }
  .so__input { font-size: var(--text-28); }
  .so__results { padding: var(--space-4) var(--space-4) var(--space-6); }
}

/* ---------- Page /recherche ---------- */
.srch { padding-top: var(--space-8); padding-bottom: var(--space-2); display: flex; flex-direction: column; gap: var(--space-3); }
.srch__title { margin: 0; font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--serif-letter-spacing); overflow-wrap: anywhere; }
.srch__form { display: flex; gap: var(--space-2); max-width: 560px; margin-top: var(--space-2); }
.srch__btn { flex: none; }
.srch__count { margin: 0; }
.srch-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-6) var(--grid-margin) 0; }
.srch-empty { display: flex; flex-direction: column; gap: var(--space-4); }
.srch-empty__text { margin: 0; max-width: var(--measure); }
.srch-empty__families { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.srch-empty__title { margin: var(--space-4) 0 0; }