/* Administration des comptes (utilisateurs, cabinets, scan automatique), Mon compte, clés d'accès.
   Téléphone d'abord ; liste et fiche des comptes côte à côte à partir de 72 em. */

/* ---------- fenêtres (formulaires) ---------- */
.dialogue {
  gap: 1rem;
}

.dialogue__sujet {
  font-weight: 650;
  color: var(--encre-2);
  overflow-wrap: anywhere;
}

.dialogue__texte {
  color: var(--encre-2);
}

.dialogue__etape {
  color: var(--bleu-fonce);
  font-weight: 600;
}

.dialogue__boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.groupe-cases {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.groupe-cases__titre {
  padding: 0;
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--encre);
}

.groupe-cases__grille {
  display: grid;
  gap: 0.6rem 1.25rem;
}

.groupe-cases__grille--retrait {
  padding-left: 1.9rem;
}

@media (min-width: 30em) {
  .groupe-cases__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- mot de passe ---------- */
.nouveau-mdp {
  display: grid;
  gap: 1rem;
}

.nouveau-mdp__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-top: -0.5rem;
}

.robustesse {
  min-height: 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--discret);
}

.robustesse--0 {
  color: var(--mauvais);
}

.robustesse--1 {
  color: var(--attention);
}

.robustesse--2 {
  color: var(--encre-2);
}

.robustesse--3,
.robustesse--4 {
  color: var(--bon);
}

/* ---------- barre d'outils à trois filtres : recherche, puis deux listes côte à côte ---------- */
.barre-outils.barre-outils--trois {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.barre-outils--trois > :first-child {
  grid-column: 1 / -1;
}

/* ---------- utilisateurs : liste et fiche ---------- */
.utilisateurs {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.utilisateurs__compte {
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--discret);
}

.utilisateurs__retour {
  margin-bottom: 0.5rem;
}

/* la fiche remplace la liste, comme le détail d'une ligne d'un logiciel en ligne */
.utilisateurs--fiche-ouverte .utilisateurs__liste {
  display: none;
}

.utilisateurs:not(.utilisateurs--fiche-ouverte) .utilisateurs__fiche {
  display: none;
}

.utilisateurs__fiche {
  max-width: 60rem;
}

.liste-comptes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.liste-comptes > li + li {
  border-top: 1px solid var(--trait);
}

.liste-comptes__entete {
  display: none;
}

.ligne-compte {
  display: grid;
  gap: 0.3rem;
  justify-items: start;
  padding: 0.75rem 1.1rem;
  color: var(--encre);
  text-decoration: none;
  background: var(--fond);
}

.ligne-compte:hover {
  background: var(--survol);
}

.ligne-compte:focus-visible {
  outline: var(--anneau);
  outline-offset: -3px;
}

.ligne-compte--choisie {
  background: var(--bleu-pale);
  box-shadow: inset 3px 0 0 var(--bleu);
}

.ligne-compte__qui {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ligne-compte__nom {
  font-weight: 650;
}

.ligne-compte__email {
  color: var(--discret);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.ligne-compte__role {
  font-size: 0.9rem;
  color: var(--encre-2);
}

.ligne-compte__detail {
  font-size: 0.875rem;
  color: var(--discret);
}

/* ordinateur : un vrai tableau (en-tête, colonnes alignées) */
@media (min-width: 64em) {
  .liste-comptes__entete,
  .ligne-compte {
    display: grid;
    grid-template-columns: minmax(11rem, 2.2fr) minmax(6.5rem, 1fr) minmax(7rem, 1.8fr) 6rem minmax(7.5rem, 1.3fr) minmax(6.5rem, 1.3fr);
    align-items: center;
    gap: 0.75rem;
  }

  .liste-comptes__entete {
    padding: 0.6rem 1.1rem;
    background: var(--fond-doux);
    color: var(--discret);
    font-size: 0.78rem;
    font-weight: 650;
  }
}

/* ---------- fiche ---------- */
.fiche {
  display: grid;
  gap: 1rem;
}

.fiche__entete {
  display: grid;
  gap: 0.15rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--trait);
}

.fiche__nom {
  font-size: 1.35rem;
  overflow-wrap: anywhere;
}

.fiche__email {
  color: var(--encre-2);
  overflow-wrap: anywhere;
}

.fiche__pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.fiche__infos {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.fiche__info {
  display: grid;
  gap: 0.1rem;
}

.fiche__info dt {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--discret);
}

.fiche__info dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 40em) {
  .fiche__info {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1rem;
  }
}

.fiche__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fiche__aide,
.fiche__vide {
  font-size: 0.875rem;
  color: var(--discret);
}

.fiche__tokens {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
}

.fiche__sous-titre {
  font-size: 1.15rem;
}

.fiche__section-tokens {
  display: grid;
  gap: 0.6rem;
}

.fiche__logiciel {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--discret);
}

/* ---------- bloc d'un token Pennylane ---------- */
.jeton {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  background: var(--fond-doux);
}

.jeton__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.jeton__titre {
  font-weight: 650;
}

.jeton__detail {
  font-size: 0.875rem;
  color: var(--discret);
}

.jeton__etat {
  color: var(--encre-2);
  overflow-wrap: anywhere;
}

.jeton--vide .jeton__etat {
  color: var(--discret);
}

.jeton__saisie {
  display: grid;
  gap: 0.6rem;
}

.jeton__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.jeton__confirmation {
  display: grid;
  gap: 0.5rem;
}

.jeton__question {
  font-weight: 600;
  color: var(--mauvais);
}

/* ---------- tokens du scan automatique ---------- */
.jetons-service {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.jetons-service__titre {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--discret);
}

.jetons-service__intro {
  color: var(--encre-2);
}

/* ---------- cabinets ---------- */
.cabinet__nom {
  font-weight: 650;
}

.cabinet__nom--inactif {
  color: var(--discret);
}

.cabinet__cle {
  font-family: var(--police-mono);
  font-size: 0.9rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: var(--segment);
}

.cabinet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* ---------- Mon compte ---------- */
.mon-compte {
  display: grid;
  gap: 1rem;
  max-width: 52rem;
}

.mon-compte__nom {
  font-size: 1.15rem;
  font-weight: 650;
}

.mon-compte__detail {
  color: var(--encre-2);
  overflow-wrap: anywhere;
}

.mon-compte__texte {
  margin-bottom: 0.75rem;
  color: var(--encre-2);
}

.mon-compte__formulaire {
  max-width: 32rem;
}

.liste-elements {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.element-compte {
  display: grid;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
}

@media (min-width: 40em) {
  .element-compte {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.element-compte__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.element-compte__detail {
  font-size: 0.875rem;
  color: var(--discret);
}

.element-compte__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* ---------- connexion : clé d'accès ---------- */
.connexion__cle {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.connexion__ou {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--discret);
  font-size: 0.9rem;
}

.connexion__ou::before,
.connexion__ou::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--trait);
}

/* fiche : identité à gauche, actions à droite */
.fiche__haut {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--trait);
}

.fiche__haut .fiche__entete {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Mon compte : texte à gauche, action à droite */
.mon-compte__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.mon-compte__ligne .mon-compte__texte {
  flex: 1 1 24rem;
  margin: 0;
}