/* account.css — écran de connexion (gate), profil garage et administration des comptes. */
/* Accueil public + login (gate) : couvre tout tant que la session n'est pas ouverte. */
#gate{position:fixed;inset:0;z-index:200;background:var(--deep);display:none;align-items:center;justify-content:center;padding:24px}
#gate.show{display:flex}
.gatebox{background:var(--card);color:var(--ink);max-width:430px;width:100%;padding:36px 32px}
.glogo{font-family:"Barlow Condensed";font-weight:800;font-size:32px;letter-spacing:.04em;color:var(--deep);line-height:1}
.glogo small{display:block;font-size:9.5px;letter-spacing:.12em;color:var(--grey);font-weight:600;margin-top:5px}
.gpitch{font-size:13.5px;color:var(--grey);margin:18px 0 22px;line-height:1.55}
.gform input{width:100%;border:1px solid var(--line);padding:12px;font-size:14px;margin-bottom:10px}
.gform button{width:100%;background:var(--blue2);color:var(--card);border:none;padding:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.gerr{color:var(--danger);font-size:13px;min-height:18px}
.glegal{margin-top:20px;font-size:12px;color:var(--grey);text-align:center}
/* <a> -> <button> : le reset `button` de tokens.css enlève déjà bordure et fond, il reste à
   restaurer la taille de police (le navigateur impose la sienne aux boutons). */
.glegal button{color:var(--blue);cursor:pointer;font-size:inherit;text-decoration:underline}
/* Profil */
.flbl{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--grey);margin-bottom:6px}
.pfin{width:100%;border:1px solid var(--line);padding:11px;font-size:14px}
.pfmodes{display:flex;gap:16px;font-size:14px}
.pfmodes label{display:flex;align-items:center;gap:5px;cursor:pointer}
.pfhint{font-size:12.5px;color:var(--grey);margin-top:8px;min-height:16px}
/* Admin */
.cptcreate{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.cptcreate input[type=email],.cptcreate input[type=text]{border:1px solid var(--line);padding:9px;font-size:13px;flex:1;min-width:120px}
.cptcreate button{background:var(--blue2);color:var(--card);border:none;padding:9px 16px;font-weight:700;cursor:pointer}
.cptrow{display:grid;grid-template-columns:1.5fr 1.1fr auto auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--soft);font-size:13px}
/* Quatre actions par ligne : elles passent à la ligne plutôt que de déborder du panneau. */
.cptrow .cptactions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.cptrow .cptactions button{margin-left:0}
.cptrow button[disabled]{opacity:.4;cursor:not-allowed}
.cptgarage{color:var(--grey)}
/* Statut et rôle en pastilles : lisibles d'un coup d'œil sur une liste de comptes. */
.cptbadge{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:2px 7px;border-radius:3px;background:var(--soft);color:var(--grey)}
.cptbadge.ok{background:#e4f1e8;color:#1f5f44}
.cptbadge.ko{background:#f6e3e1;color:#a32219}
.cptbadge.roleadmin{background:var(--blue);color:#fff}
/* Repère « c'est vous » : évite de chercher qui l'on est dans une liste d'emails proches. */
.cptmoi{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:1px 6px;border-radius:3px;background:var(--blue);color:#fff}
.cptrow.off{opacity:.5}
.cptrow button{border:1px solid var(--line);background:var(--card);padding:5px 9px;font-size:12px;cursor:pointer;margin-left:5px}
.cptactions{text-align:right}
/* Panneau de confirmation / saisie en ligne, inséré sous la ligne de compte concernée. Remplace
   window.prompt() et window.alert(), qui sortaient du langage visuel de l'application dans la
   zone qui manipule justement des mots de passe. */
.cptinline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--soft);
  border-left:3px solid var(--blue2);padding:11px 13px;margin:0 0 8px;font-size:13px}
.cptinline label{display:block;font-size:12px;color:var(--grey);margin-bottom:5px}
.cptinline input{border:1px solid var(--line);padding:8px 10px;font-size:13px;font-family:inherit;min-width:200px}
.cptinline-btns{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.cptinline button{border:1px solid var(--line);background:var(--card);padding:7px 12px;font-size:12px;
  font-weight:600;cursor:pointer;margin:0}
.cptinline button.prim{background:var(--blue2);color:var(--card);border-color:var(--blue2)}
.cptinline .gerr{flex-basis:100%;min-height:0}
/* Pastille couleur (carte + fiche) */
.colorline{display:flex;align-items:center;gap:7px;margin:2px 0 8px;font-size:13px;color:var(--grey)}
.csw{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.28);flex:0 0 auto;display:inline-block}
/* Liste des comptes (Admin) */
.cptlisttitle{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--deep);margin:20px 0 8px}
.cptlisttitle .n{background:var(--soft);border-radius:10px;padding:1px 8px;font-size:12px;color:var(--grey)}
.cpthead{display:grid;grid-template-columns:1.6fr 1.4fr .8fr auto;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--grey);padding:0 0 5px;border-bottom:2px solid var(--line)}
.cptlist{max-height:340px;overflow-y:auto}

/* Onglets du profil. La gestion des comptes vivait dans une modale distincte qui se refermait
   au clic sur le fond — inadapté à une tâche d'administration. */
.pftabs{display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--line)}
.pftab{border:0;background:none;font-family:inherit;font-size:13px;font-weight:700;
  letter-spacing:.03em;color:var(--grey);padding:11px 14px;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.pftab:hover{color:var(--deep)}
.pftab.on{color:var(--deep);border-bottom-color:var(--brand)}

/* Ligne d'état de la liste des comptes : elle dit toujours ce qui se passe (chargement, nombre
   affiché, cause d'un échec). Sans elle, un rendu vide était indiscernable d'une base vide. */
.cptinfo{font-size:12.5px;color:var(--grey);margin:0 0 8px}
.cptinfo.alerte{color:var(--danger);font-weight:600}
.cptreload{margin-top:10px;border:1px solid var(--line);background:var(--card);
  padding:6px 12px;font-size:12px;font-family:inherit;cursor:pointer}
.cptreload:hover{background:var(--soft)}