/* Page de connexion : une carte de verre sur l'image floutée de la formation. Jetons : tokens.css. */
.auth { display: flex; flex-direction: column; overflow-x: hidden; }
.auth-backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg) url("/assets/backdrop.webp") center / cover no-repeat;
}
.auth-backdrop::after { content: ""; position: absolute; inset: 0; background: var(--scrim-card); }

.auth-bar { display: flex; align-items: center; height: var(--bar); padding-inline: var(--gutter); }
.wordmark {
  display: inline-flex; align-items: center; min-height: var(--control); gap: var(--s-1);
  color: var(--ink); font-size: var(--title-s); font-weight: 700; letter-spacing: -.01em; text-decoration: none;
}
.wordmark span { color: var(--accent); }
.wordmark:hover { color: var(--ink); }

.auth-main { flex: 1; display: grid; place-items: center; align-content: center; gap: var(--s-6); padding: var(--s-8) var(--gutter) var(--s-16); }
.auth-card {
  width: min(440px, 100%); padding: var(--s-10);
  border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--glass); box-shadow: var(--elev-float);
}
@supports (backdrop-filter: blur(12px)) { .auth-card { backdrop-filter: blur(12px); } }
.kicker { color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.auth-card h1 { margin-top: var(--s-2); color: var(--ink); font-size: var(--title-m); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.01em; }
.auth-card h1:focus { outline: none; }
.auth-card .lead { margin-top: var(--s-3); color: var(--muted); }
.auth-form { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
.link-btn {
  justify-self: start; display: inline-flex; align-items: center; min-height: var(--control); margin-block: calc(var(--s-3) * -1);
  padding: 0; border: 0; background: none; color: var(--accent); font-size: var(--text-s); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: color var(--dur-micro) var(--ease), text-decoration-color var(--dur-micro) var(--ease);
}
.link-btn:hover:not(:disabled) { color: var(--accent-hover); text-decoration-color: currentColor; }
.link-btn:active:not(:disabled) { color: var(--ink); }
.link-btn:disabled { opacity: .5; cursor: not-allowed; }
.divider { display: flex; align-items: center; gap: var(--s-4); margin-block: var(--s-6); color: var(--muted); font-size: var(--text-s); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
#view-state .btn { margin-top: var(--s-8); }
.g-blue { fill: var(--google-blue); } .g-green { fill: var(--google-green); } .g-yellow { fill: var(--google-yellow); } .g-red { fill: var(--google-red); }

@media (max-width: 560px) {
  .auth-main { place-items: start center; padding-top: var(--s-4); }
  .auth-card { padding: var(--s-6); border-radius: var(--radius-m); }
  .auth-form { margin-top: var(--s-6); }
}