/* Feuille de style de l'AUTHENTIFICATION (amorçage, connexion, menu utilisateur, admin).
   Cf. docs/SPEC-auth-multi-user.md et docs/design-rules.md.

   DEUX CONTRAINTES GOUVERNENT CE FICHIER :

   1. MODE LOCAL INTACT. Aucun sélecteur ici ne porte sur un élément existant de la page :
      tous descendent d'un `#auth-*` ou d'une classe `.auth-*` que seul auth.js crée, et
      auth.js ne crée RIEN quand `/auth/state` rend `mode: "off"`. Ce fichier est donc
      chargé sur l'app de bureau, où il reste sans effet — pas un pixel ne bouge. Ne
      jamais y ajouter de règle sur `header`, `body` ou une classe partagée sans la
      préfixer d'un ancêtre `.auth-*` (`body.auth-locked` est la seule exception, et la
      classe n'est posée que par les écrans de porte).
   2. TOKENS SEULEMENT (règle de conception 3). Aucune couleur en dur : les cinq thèmes
      commutent à chaud, et une valeur littérale ici deviendrait illisible dans quatre
      d'entre eux.

   Z-INDEX (cf. docs/ui-shell.md — menu de thème 4000, confirm/prompt 4100) :
     menu utilisateur 4050 · zone admin 4200 · écran-porte 4300.
   L'écran-porte est au-dessus de TOUT, y compris du dialogue confirm : ce n'est pas une
   fenêtre de plus, c'est la condition d'accès à l'application. */

/* ====================== écran-porte : amorçage et connexion ====================== */
#auth-gate{
  position:fixed;inset:0;z-index:4300;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--overlay);backdrop-filter:blur(2px);
}
/* Le fond de page reste visible derrière la porte mais ne défile plus : sans cela, la
   molette fait glisser une application à laquelle on n'a pas encore accès. */
body.auth-locked{overflow:hidden}

.auth-card{
  width:100%;max-width:380px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 48px var(--shadow);
  padding:22px 22px 18px;
}
/* Sélecteur de langue de l'écran-porte. Il ne DOUBLE pas celui de l'en-tête, il le PILOTE
   (cf. auth.js) : la porte étant `position:fixed; inset:0` au-dessus de tout, `#lang`
   reste visible derrière elle mais hors d'atteinte à la souris — et la langue par défaut
   étant figée à `fr` dans search.js, la porte s'ouvrait en français pour tout le monde. */
.auth-lang{
  display:block;margin:0 0 10px auto;max-width:150px;
  font:inherit;font-size:12px;padding:3px 6px;
  background:var(--input);color:var(--txt);
  border:1px solid var(--line);border-radius:6px;cursor:pointer;
}
.auth-lang:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--focus)}

.auth-title{margin:0 0 6px;font-size:17px;color:var(--txt)}
.auth-lead{margin:0 0 16px;font-size:12.5px;line-height:1.5;color:var(--txt2)}
.auth-lead:empty{display:none}

.auth-field{margin-bottom:12px}
.auth-field[hidden]{display:none}
.auth-field label{display:block;margin-bottom:4px;font-size:12px;color:var(--txt2)}
.auth-field input{
  width:100%;padding:8px 10px;font:inherit;
  background:var(--input);color:var(--txt);
  border:1px solid var(--line);border-radius:6px;
}
.auth-field input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--focus)}
.auth-hint{margin-top:4px;font-size:11px;color:var(--mut)}
.auth-hint[hidden]{display:none}

/* Message d'erreur : `--bad` et son fond dédié, jamais un rouge littéral. `:empty` plutôt
   qu'un `hidden` piloté en JS — un message vide ne doit pas laisser un cadre vide. */
.auth-msg{
  margin:10px 0 0;padding:8px 10px;font-size:12.5px;
  color:var(--bad);background:var(--bad-bg);border:1px solid var(--bad-line);border-radius:6px;
}
.auth-msg:empty{display:none}

.auth-btn{
  font:inherit;padding:7px 14px;border-radius:6px;cursor:pointer;
  background:var(--input);color:var(--txt);border:1px solid var(--line);
}
.auth-btn:hover{border-color:var(--acc)}
.auth-btn:disabled{opacity:.6;cursor:default}
.auth-btn.prim{background:var(--acc);color:var(--on-acc);border-color:var(--acc);font-weight:600}
.auth-btn.ghost{color:var(--txt2)}
.auth-btn.bad{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
#auth-submit{width:100%;margin-top:14px;padding:9px 14px}

/* ========================= menu utilisateur (en-tête) ========================= */
/* Aligné sur `.theme-btn` de search.css (même hauteur, même bordure) pour que les trois
   contrôles d'en-tête — langue, thème, compte — forment une rangée cohérente. */
.auth-user{position:relative;align-self:center;flex:0 0 auto}
.auth-user-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--input);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;padding:5px 9px;cursor:pointer;font:inherit;line-height:1;
}
.auth-user-btn:hover{border-color:var(--acc)}
.auth-user-nm{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-caret{color:var(--mut);font-size:10px}

.auth-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:4050;min-width:200px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 10px 28px var(--shadow);padding:6px;
}
.auth-menu[hidden]{display:none}
.auth-menu-head{
  padding:6px 8px 8px;margin-bottom:4px;border-bottom:1px solid var(--line);
  font-size:11.5px;color:var(--mut);
}
.auth-menu-head b{display:block;margin-top:2px;font-size:13px;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-menu-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 8px;border:0;border-radius:6px;
  background:transparent;color:var(--txt);font:inherit;text-align:left;cursor:pointer;
}
.auth-menu-item:hover{background:var(--panel2)}
.auth-menu-item[hidden]{display:none}
.auth-menu-ic{width:16px;text-align:center;color:var(--mut)}

/* ================================ zone admin ================================ */
.auth-modal{
  position:fixed;inset:0;z-index:4200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--overlay);
}
.auth-modal[hidden]{display:none}
.auth-box{
  width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 48px var(--shadow);
}
.auth-box-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);color:var(--txt);
}
.auth-x{
  background:transparent;border:0;color:var(--mut);font-size:20px;line-height:1;
  cursor:pointer;padding:0 4px;
}
.auth-x:hover{color:var(--txt)}
.auth-box-body{padding:12px 14px 16px;overflow:auto}
.auth-sec{
  margin:6px 0 8px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);
}

.auth-urow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px;margin-bottom:6px;
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;
}
.auth-uname{font-weight:600;color:var(--txt)}
.auth-urole{
  font-size:11px;padding:1px 7px;border-radius:999px;
  color:var(--mut);border:1px solid var(--line);
}
.auth-urole.adm{color:var(--acc);border-color:var(--acc)}
.auth-udate{font-size:11px;color:var(--mut)}
.auth-uact{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.auth-uask{font-size:11.5px;color:var(--warn)}
.auth-uact .auth-btn{padding:4px 9px;font-size:12px}

.auth-new{margin-top:4px}
.auth-new label{display:block;margin:8px 0 4px;font-size:12px;color:var(--txt2)}
.auth-new input{
  width:100%;padding:7px 10px;font:inherit;
  background:var(--input);color:var(--txt);
  border:1px solid var(--line);border-radius:6px;
}
.auth-new input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--focus)}
.auth-new button[type="submit"]{margin-top:12px}