/* ──────────────────────────────────────────────────────────────────────────
   Stackly — recherche instantanee des listes (voir public/js/recherche.js)

   Une zone remplacee sans rechargement. Quand elle enveloppe plusieurs
   blocs, c'est une <div class="ui-recherche-zone"> qui ne cree aucune boite :
   la mise en page de la liste reste celle du gabarit.
   ────────────────────────────────────────────────────────────────────────── */

.ui-recherche-zone { display: contents; }

/*  Pendant le chargement : la liste palit un peu, apres un court delai pour
    ne pas clignoter quand la reponse est immediate. */
[data-recherche-zone]:not(.ui-recherche-zone),
.ui-recherche-zone > * {
  transition: opacity var(--duration) var(--ease);
}

[data-recherche-zone].is-recherche-chargement:not(.ui-recherche-zone),
.ui-recherche-zone.is-recherche-chargement > * {
  opacity: 0.55;
  transition-delay: 150ms;
}

/*  Et un filet anime sous la barre de recherche. */
form[data-recherche] { position: relative; }

form[data-recherche]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease);
}

form[data-recherche].is-recherche-chargement::after {
  opacity: 1;
  transition-delay: 150ms;
  animation: ui-recherche-filet 900ms linear infinite;
}

@keyframes ui-recherche-filet {
  from { background-position: -100% 0; }
  to   { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-recherche-zone]:not(.ui-recherche-zone),
  .ui-recherche-zone > * { transition: none; }
  form[data-recherche].is-recherche-chargement::after { animation: none; background-size: 100% 100%; }
}