/* =====================================================================
   recherche.css — Observatoire Paradoxale
   Panneau de résultats de la recherche d'indicateurs.
   VERSION : V1-0 — 7 juin 2026

   Reprend l'esprit de la recherche de la revue, recoloré dans la palette
   de l'Observatoire. Le champ lui-même est déjà stylé dans le bandeau de
   chaque page (.nav-search) ; cette feuille ne traite que le panneau de
   résultats, créé dynamiquement par recherche.js sous le champ.

   Les variables (--green, --cream, --gold-dk...) sont définies en :root
   dans chaque page et sont donc disponibles ici sans redéclaration.
   ===================================================================== */

/* Rappel par sûreté : l'ancrage du panneau suppose un conteneur positionné. */
.nav-search { position: relative; }

.search-results {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  background: var(--cream);
  border: 1px solid var(--cream-dk);
  border-radius: 4px;
  box-shadow: 0 18px 44px -18px rgba(28, 28, 28, .45);
  overflow: hidden;
  z-index: 200;
  display: none;
}
.search-results.open { display: block; }

.search-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .9rem;
  padding: .7rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--cream-dk);
  transition: background .15s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover,
.search-result.active { background: rgba(58, 107, 95, .10); }

.sr-titre {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--green-dk);
  line-height: 1.2;
}
.sr-titre mark {
  background: transparent;
  color: var(--gold-dk);
  font-style: italic;
}
.sr-famille {
  font-family: var(--ff-sans);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dk);
  white-space: nowrap;
  flex-shrink: 0;
}

.search-empty {
  padding: .8rem 1rem;
  font-family: var(--ff-sans);
  font-size: .82rem;
  color: var(--grey);
}