/* ============================================================
   SpiLi — la recherche plein texte (lot 5)

   Le champ appartient à l'instrument, pas au discours : registre
   monospace, filet franc, aucun arrondi. Les résultats se lisent
   comme un dépouillement — titre, nature, extrait — et jamais
   comme des cartes de produit.
   ============================================================ */

.recherche {
  padding: 56px 0 80px;
}

.recherche-rang {
  font-family: var(--spili-data);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin: 0;
}

.recherche h1 {
  margin: 10px 0 18px;
}

.recherche-chapo {
  font-size: 17px;
  line-height: 1.75;
  color: var(--spili-texte-doux);
  max-width: 66ch;
  margin: 0 0 36px;
}

/* ---------- Le champ ---------- */

.recherche-label {
  display: block;
  font-family: var(--spili-data);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin-bottom: 10px;
}

.recherche-champ {
  display: flex;
  gap: 12px;
  max-width: 760px;
}

.recherche-champ input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--spili-data);
  font-size: 15px;
  color: var(--spili-texte);
  background: var(--spili-fond-eleve);
  border: 1px solid var(--spili-texte);
  border-radius: var(--spili-rayon);
  padding: 14px 16px;
}
.recherche-champ input::placeholder {
  color: var(--spili-texte-faible);
}
.recherche-champ input:focus-visible {
  outline: var(--spili-notation) solid var(--spili-accent);
  outline-offset: 2px;
}

.recherche-bouton {
  font-family: var(--spili-data);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spili-fond-eleve);
  background: var(--spili-texte);
  border: 1px solid var(--spili-texte);
  border-radius: var(--spili-rayon);
  padding: 0 22px;
  cursor: pointer;
  transition: background var(--spili-transition);
}
.recherche-bouton:hover,
.recherche-bouton:focus-visible {
  background: var(--spili-accent-fort);
  border-color: var(--spili-accent-fort);
}

/* ---------- L'état ---------- */

.recherche-etat {
  font-family: var(--spili-data);
  font-size: 12.5px;
  color: var(--spili-texte-doux);
  margin: 22px 0 0;
  min-height: 1.4em;
}

/* ---------- Les résultats ---------- */

.recherche-resultats {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  max-width: 860px;
}

.recherche-resultat {
  padding: 22px 0 22px 20px;
  border-top: 1px solid var(--spili-trait);
  border-left: var(--spili-notation) solid transparent;
  transition: border-color var(--spili-transition);
}
.recherche-resultat:last-child {
  border-bottom: 1px solid var(--spili-trait);
}
.recherche-resultat:hover,
.recherche-resultat:focus-within {
  border-left-color: var(--spili-accent);
}

.recherche-resultat-titre {
  display: block;
  font-family: var(--spili-titre);
  font-size: 19px;
  line-height: 1.4;
  color: var(--spili-texte);
  text-decoration: none;
}
.recherche-resultat-titre:hover,
.recherche-resultat-titre:focus-visible {
  color: var(--spili-accent-fort);
  text-decoration: underline;
}

.recherche-resultat-nature {
  font-family: var(--spili-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin: 8px 0 0;
}

.recherche-resultat-extrait {
  font-size: 15px;
  line-height: 1.75;
  color: var(--spili-texte-doux);
  margin: 10px 0 0;
  max-width: 72ch;
}

/* Le terme trouvé : signalé par le filet, jamais par un aplat de couleur —
   la notation du projet survit au monochrome, et un surlignage jaune ne le
   ferait pas. */
.recherche-resultat-extrait mark {
  background: var(--spili-accent-voile);
  color: var(--spili-texte);
  box-shadow: inset 0 -2px 0 var(--spili-accent);
  padding: 0 2px;
}

/* ---------- Le repli sans script ---------- */

.recherche-sansjs {
  margin-top: 40px;
  padding: 26px 28px;
  border-left: var(--spili-notation) solid var(--spili-texte);
  background: var(--spili-fond-carte);
  max-width: 760px;
}
.recherche-sansjs h2 {
  font-family: var(--spili-data);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin: 0 0 14px;
}
.recherche-sansjs p,
.recherche-sansjs li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--spili-texte-doux);
}
.recherche-sansjs ul {
  padding-left: 20px;
  margin: 12px 0 0;
}
.recherche-sansjs li {
  margin-bottom: 8px;
}
.recherche-sansjs[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .recherche-champ {
    flex-wrap: wrap;
  }
  .recherche-bouton {
    padding: 14px 22px;
  }
}