/* ============================================================================
   auth.css — écrans de connexion et de mot de passe (audit design 01.09.2026)

   Remplace les 5 blocs <style> quasi identiques de login.html, login_employe.html,
   set_password.html, change_password.html et change_password_employe.html, qui
   n'incluaient ni theme.css ni tokens.css : Arial, fond clair #f0f2f5, indigo
   #4F46E5 et rouge #c62828 absents du reste du système. L'employé se connectait
   sur une page claire puis basculait sur une application sombre.

   Le logo emanet.svg est dessiné pour un fond sombre (#12161C, bord #2A323D) —
   il était posé sur un aplat indigo, qui disparaît ici.

   Charger après theme.css et tokens.css.
   ========================================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5);
  -webkit-font-smoothing: antialiased;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--s-7) var(--s-6);
  max-width: 420px; width: 100%;
  box-shadow: var(--shadow-4);
  display: flex; flex-direction: column; gap: var(--s-4);
}

.logo { text-align: left; }
.logo img { height: 44px; display: block; }

.brand {
  font-size: var(--t-xl); font-weight: 700; letter-spacing: 0.02em;
  color: var(--text);
}

h1 { font-size: var(--t-lg); font-weight: 600; color: var(--text); }
p.intro { color: var(--muted); font-size: var(--t-sm); margin-top: calc(var(--s-2) * -1); }

/* Le gabarit ne groupe pas label + champ : l'espacement se fait ici. */
form { display: flex; flex-direction: column; gap: var(--s-2); }
form > label:not(:first-child) { margin-top: var(--s-3); }
form > button[type=submit] { margin-top: var(--s-4); }

label {
  display: block;
  font-size: var(--t-xs); font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 0;
}

/* 16px minimum : en dessous, iOS zoome à la mise au point du champ. */
input[type=email], input[type=text], input[type=password] {
  width: 100%;
  min-height: var(--control-h-mobile);
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 16px;
  font-family: inherit;
  background: var(--panel-2);
  color: var(--text);
}
input::placeholder { color: var(--muted); }  /* --muted-2 donnait 4,2:1 sur --panel-2 */
input:focus { border-color: var(--accent); outline: 2px solid var(--c-focus); outline-offset: 2px; }

.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 46px; }
.pwd-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); border-radius: var(--r-2);
}
.pwd-toggle:hover { color: var(--accent); }

button[type=submit], .card > button {
  width: 100%;
  min-height: var(--control-h-mobile);
  background: var(--marque); color: var(--on-marque);
  border: 0; border-radius: var(--r-2);
  font-size: var(--t-base); font-weight: 700; font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
button[type=submit]:hover, .card > button:hover { background: #d84509; }

/* Messages — annoncés au lecteur d'écran (role="alert" dans le gabarit). */
.error, .success {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  border-radius: var(--r-2);
  font-size: var(--t-sm); line-height: 1.5;
}
.error   { background: var(--c-danger-bg);  color: var(--c-danger-text);  border: 1px solid rgba(248,81,73,0.3); }
.success { background: var(--c-success-bg); color: var(--c-success-text); border: 1px solid rgba(63,185,80,0.3); }

.foot {
  color: var(--muted-2); font-size: var(--t-xs);
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
}
.foot a { color: var(--accent); text-decoration: none; }
.foot a:hover { text-decoration: underline; }