/* La bannière du §9 bis, et la page qui l'ouvre.

   Ce fichier existe séparément parce qu'il sert dans DEUX mondes qui ne
   partagent aucune feuille : le site public, qui a la sienne, et la console,
   qui est en Tailwind. La bannière s'est d'abord affichée en texte nu dans la
   console, ce qui est la pire des situations — l'avertissement présent, mais
   ne ressemblant à rien qu'on remarque.

   Ses couleurs sont donc écrites en clair, et les rares variables qu'il
   emprunte portent toutes une valeur de repli. */
.impersonation-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  background: #b3261e;
}
.impersonation-bar .impersonation-why {
  opacity: 0.85;
  font-style: italic;
}
.impersonation-bar .impersonation-why::before { content: " — "; }
.impersonation-bar button {
  font: inherit;
  padding: 5px 12px;
  color: #b3261e;
  background: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

/* La page de choix. Des colonnes de comptes, un motif obligatoire au-dessus :
   on écrit pourquoi AVANT de choisir qui, parce que l'inverse invite à taper
   n'importe quoi une fois la personne trouvée. */
.impersonate fieldset {
  margin: 18px 0;
  padding: 12px 16px;
  border: 1px solid var(--border, #d7dde5);
  border-radius: 10px;
}
.impersonate legend { font-weight: 600; padding: 0 6px; }
.impersonate legend .count { font-weight: 400; opacity: 0.6; }
.impersonate .accounts { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.impersonate .accounts label { display: flex; gap: 8px; align-items: baseline; }
.impersonate input[type="text"] { width: 100%; font: inherit; padding: 9px 11px;
  border: 1px solid var(--border, #d7dde5); border-radius: 8px; }