/* Page de connexion du relais — couleurs de palette.css (mêmes clés que l'application). */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--window-background);
  color: var(--text-primary);
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
}

.titlebar {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  background: var(--title-bar-background);
  color: var(--title-bar-foreground);
}
.title-monogram, .title-logo { display: inline-block; background-repeat: no-repeat; background-size: contain; flex: none; }
.title-monogram { width: 20px; height: 20px; background-image: var(--title-monogram); }
.title-logo { width: 46px; height: 16px; margin-left: 8px; background-image: var(--title-logo); }
.title-sep { width: 1px; height: 20px; margin: 0 12px; background: var(--border-subtle); }
.title-text { font-weight: 600; }

.login { display: grid; place-items: start center; padding: 32px 16px; }

.login-card {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 20px;
  background: var(--card-background);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 2px 12px var(--shadow);
}
.login-card h1 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.hint { margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.4; }

label { margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
input {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px; /* 16 px : pas de zoom automatique sur iOS */
}
input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }

button {
  margin-top: 18px;
  height: 42px;
  border: 0;
  border-radius: 4px;
  background: var(--primary);
  color: var(--window-background);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }

.error {
  margin: 0 0 4px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--error);
  color: var(--error);
  font-size: 13px;
}
.foot { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--text-tertiary); }

[hidden] { display: none !important; }

/* Connexion par passkey, secours par code, enregistrement du téléphone. */
.login-card section { display: flex; flex-direction: column; }
.login-card section button, .login-card #doneStep button { margin-top: 8px; }
.fallback { margin-top: 18px; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.fallback summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; }
.fallback form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
#nameStep { display: flex; flex-direction: column; gap: 6px; }
.success-text { color: var(--success); font-weight: 600; line-height: 1.4; }
button:disabled { opacity: 0.6; cursor: default; }