/* =====================================================================
   VISION PME — La recherche qui traverse les onglets

   Une liste de résultats qu'on parcourt des yeux en trois secondes, au
   téléphone, pendant que quelqu'un attend. Chaque ligne répond dans cet
   ordre : qui, où il est rendu, comment le joindre.
   ===================================================================== */

.rg-champ { max-width: none; margin-bottom: var(--s-3); }

.rg-zone { min-height: 12rem; max-height: 56vh; overflow-y: auto; }

.rg-compte {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.rg-liste { display: grid; gap: 6px; }

/* Une ligne entière est cliquable : au téléphone, viser un petit lien
   coûte une seconde qu'on n'a pas. */
.rg-ligne {
  display: grid;
  grid-template-columns: minmax(0, auto) auto 1fr auto;
  align-items: center; gap: var(--s-2) var(--s-3);
  width: 100%;
  padding: var(--s-3);
  text-align: left;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  cursor: pointer;
  font: inherit; color: var(--text);
  transition: border-color .12s, background .12s;
}
.rg-ligne:hover { border-color: var(--green, #00CE86); background: var(--surface-2, var(--surface-1)); }
.rg-ligne:focus-visible { outline: 2px solid var(--green, #00CE86); outline-offset: 2px; }

.rg-nom {
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.rg-coord {
  font-size: var(--fs-xs); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.rg-quand {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); color: var(--green, #00CE86);
  white-space: nowrap;
}
.rg-quand .icon { width: 13px; height: 13px; }

/* Les trois états vides — « tape deux caractères », « recherche… » et
   « personne ne correspond » — partagent la même boîte, parce qu'ils
   occupent la même place et se remplacent l'un l'autre. */
.rg-etat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: var(--s-6) var(--s-4);
  text-align: center; color: var(--text-muted);
}
.rg-etat b { color: var(--text); font-weight: 650; }
.rg-etat .icon { width: 22px; height: 22px; opacity: .5; margin-bottom: 4px; }

@media (max-width: 680px) {
  /* En colonne : quatre colonnes sur 375 px donnent quatre miettes. */
  .rg-ligne { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rg-ligne .badge { justify-self: start; }
}