/* =====================================================================
   HC Facturation — recherche d'un patient
   =====================================================================
   Feuille PROPRE AU LOT. Elle ne redéfinit aucune classe de base.css :
   le champ est une `.saisie`, la puce de chambre un `.badge`, l'état un
   paragraphe ordinaire. Il n'y a ici que la mise en page de la liste de
   résultats, qui n'existe nulle part ailleurs.

   Aucune couleur ni aucun espacement en dur : tout passe par les
   variables du système de design.
   ===================================================================== */

/* Le bloc entier. Il porte l'état de la liaison dans data-etat ; le
   JavaScript n'a donc aucun style à poser lui-même. */
.recherche {
  display: block;
}

/* Le champ est l'objet le plus utilisé de la journée : il occupe la
   largeur, sans marge basse — l'état et les résultats le suivent
   immédiatement. */
.recherche__champ {
  margin: 0;
}

.recherche__saisie {
  font-size: var(--taille-titre-3);
}

/* Ligne d'état : compte des résultats, invite, ou panne de liaison.
   Discrète par défaut, franche quand quelque chose ne va pas. */
.recherche__etat {
  margin: var(--espace-2) 0 0;
  font-size: var(--taille-petit);
  line-height: var(--hauteur-petit);
  color: var(--texte-attenue);
}

.recherche__etat[hidden] {
  display: none;
}

.recherche__etat[data-famille="panne"] {
  color: var(--erreur-texte);
  font-weight: var(--graisse-moyenne);
}

.recherche__etat[data-famille="attention"] {
  color: var(--avertissement-texte);
  font-weight: var(--graisse-moyenne);
}

/* --- Résultats --------------------------------------------------------
   Une carte posée sous le champ, et non une liste flottante : sur un
   poste d'accueil, l'écran est large et rien d'autre n'occupe cette
   place. Un menu superposé se referme au mauvais moment. */
.recherche__resultats {
  list-style: none;
  margin: var(--espace-3) 0 0;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-moyen);
  background: var(--surface);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
}

.recherche__resultats[hidden] {
  display: none;
}

.recherche__ligne + .recherche__ligne {
  border-top: 1px solid var(--bordure);
}

/* Chaque résultat est une cible de clic pleine largeur : une hôtesse
   debout vise une ligne, pas un mot. */
.recherche__resultat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--espace-1) var(--espace-4);
  width: 100%;
  min-height: var(--hauteur-cible);
  padding: var(--espace-3) var(--espace-4);
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duree-rapide) var(--courbe);
}

.recherche__resultat:hover {
  background: var(--marque-fond);
}

.recherche__resultat:focus-visible {
  outline: 2px solid var(--bordure-focus);
  outline-offset: calc(var(--espace-1) * -1);
}

/* Le temps de l'aller-retour vers Hotel Care : la ligne s'estompe et
   n'accepte plus le clic, sans changer de taille ni de disposition. */
.recherche__resultat[aria-busy="true"] {
  opacity: .6;
  cursor: progress;
}

.recherche__nom {
  grid-column: 1;
  font-size: var(--taille-titre-3);
  font-weight: var(--graisse-appuyee);
  color: var(--texte);
}

.recherche__reperes {
  grid-column: 1;
  font-size: var(--taille-petit);
  line-height: var(--hauteur-petit);
  color: var(--texte-secondaire);
}

/* La chambre est le repère que l'hôtesse cherche en premier quand deux
   patients portent le même nom : elle tient sa propre colonne. */
.recherche__chambre {
  grid-column: 2;
  grid-row: 1 / -1;
  justify-self: end;
  white-space: nowrap;
}

/* Sous 640 px, la chambre repasse sous le nom : une puce écrasée contre
   le bord droit d'un téléphone ne se lit plus. */
@media (max-width: 640px) {
  .recherche__resultat {
    grid-template-columns: 1fr;
  }

  .recherche__chambre {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}