/* Connexion mobile : centrer dans la surface utilisable, dès la fin du lancement.
   La carte reste dans le flux normal pour les petits écrans et le clavier. */
.login-secret{border:0;padding:0;margin:0;min-width:0;display:grid;gap:14px}
.login-secret[hidden],.login-mode-choice[hidden],.login-change-user[hidden],#login-google-help[hidden],#login-submit[hidden]{display:none}
.login-secret .auth-field{margin:0}
.login-code-row{display:flex;align-items:center;gap:8px;min-width:0}
.login-code-row input{min-width:0;flex:1;font-size:16px}
.login-code-row button,.login-change-user,.login-mode-buttons button{min-height:44px;font:inherit;cursor:pointer}
.login-code-row button{padding:8px;border:1px solid var(--line,#dce1e9);border-radius:10px;background:var(--card,#fff);color:var(--text,#132039);font-size:13px}
.login-change-user{border:0;background:none;padding:0;text-align:left;text-decoration:underline;color:var(--muted);font-size:13px}
.login-mode-choice p{font-size:13px;margin:0 0 8px}
.login-mode-buttons{display:flex;gap:8px}
.login-mode-buttons button{flex:1;border:1px solid var(--line,#dce1e9);border-radius:10px;background:var(--card,#fff);color:var(--text,#132039);padding:8px;font-size:14px}
.login-mode-buttons button[aria-pressed=true]{background:var(--navy,#001640);color:white;border-color:var(--navy,#001640)}
#login-step{margin:0;font-weight:600;text-align:left}
#f-username[readonly]{color:var(--muted);background:var(--bg,#f1f3f8)}

/* Un seul parcours principal, avec les autres accès et l'inscription séparés. */
.login-page .auth-panel { padding: 36px 40px; }
.login-page .login-heading { margin-bottom: 22px; }
.login-page .login-heading h2 { margin: 0 0 6px; font-size: 1.8rem; letter-spacing: -.035em; }
.login-page .login-heading p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.login-page .auth-form { gap: 16px; }
.login-page .auth-form .auth-sub { margin: 0; font-size: .78rem; line-height: 1.4; }
.login-progress { display: flex; gap: 10px; margin: 0 0 4px; }
.login-progress-item { display: flex; align-items: center; gap: 8px; flex: 1; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.login-progress-item b { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--surface-alt); font-size: .72rem; }
#login-form:is([data-login-state=identity],[data-login-state=checking]) .login-progress-item:first-child,
#login-form:is([data-login-state=secret],[data-login-state=google],[data-login-state=submitting]) .login-progress-item:last-child { color: var(--ink); border-color: var(--ink); background: var(--surface-alt); }
#login-form:is([data-login-state=identity],[data-login-state=checking]) .login-progress-item:first-child b,
#login-form:is([data-login-state=secret],[data-login-state=google],[data-login-state=submitting]) .login-progress-item:last-child b { color: var(--surface); background: var(--ink); }
.login-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin-bottom: 6px; }
.login-page .login-label-row label { margin: 0; }
.login-page .login-change-user { min-height: 28px; padding: 4px 0 4px 8px; font-size: .75rem; font-weight: 600; text-underline-offset: 3px; }
.login-page .auth-field input { min-height: 52px; padding: 13px 14px; border-radius: 12px; font-size: 16px; line-height: 22px; }
.login-page .auth-field input[aria-invalid=true] { border-color: var(--danger); }
.login-page #login-identity-help { min-height: 18px; margin: 7px 0 0; }
#login-form:is([data-login-state=secret],[data-login-state=google],[data-login-state=submitting]) #login-identity-help { color: var(--ink); }
#login-form:is([data-login-state=secret],[data-login-state=google],[data-login-state=submitting]) #login-identity-help::before { content: '✓'; margin-right: 5px; color: #19825c; font-weight: 800; }
.login-page .login-secret { gap: 10px; }
.login-page .login-code-row { position: relative; display: block; }
.login-page .login-code-row input { width: 100%; padding-right: 88px; }
.login-page .login-code-row button { position: absolute; inset: 4px 4px 4px auto; min-height: 44px; padding: 7px 12px; border: 0; border-radius: 9px; background: var(--surface-alt); color: var(--muted); font-size: .75rem; font-weight: 600; }
.login-page .login-code-row button[aria-pressed=true] { color: var(--ink); }
.login-page .auth-check { min-height: 32px; margin: 0; font-size: .8rem; }
.login-page .auth-check input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; }
.login-page .auth-form .btn { min-height: 48px; margin: 0; border-radius: 12px; font-size: .92rem; }
.login-page .auth-error { min-height: 0; margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--danger); background: var(--surface-alt); text-align: left; line-height: 1.45; }
.login-page .auth-error:empty { display: none; }
.login-recovery { display: flex; justify-content: flex-end; margin-top: 4px; }
.login-recovery > button { min-height: 40px; padding: 8px 0 8px 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.login-page .login-recovery-form { margin: 2px 0 14px; padding: 14px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 14px; }
.login-page .login-recovery-form .btn { white-space: normal; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; color: var(--muted); font-size: .75rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.login-methods { display: grid; gap: 10px; }
.login-page .login-methods .btn { width: 100%; min-height: 46px; margin: 0; border-radius: 12px; background: var(--surface); font-size: .84rem; font-weight: 600; }
.login-page .btn-google svg { flex-shrink: 0; }
.login-page .login-signup { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.login-signup a { display: inline-block; color: var(--ink); font-weight: 750; text-underline-offset: 3px; }
.login-page .auth-panel .auth-footnote { margin: 8px 0 0; font-size: .72rem; text-align: center; line-height: 1.45; }
.login-page .login-mode-choice { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-alt); }
.login-page .login-mode-choice p { color: var(--muted); font-size: .76rem; }
.login-page .auth-brand .auth-mark { animation: none; }
.login-page .auth-shell > .auth-sub a { color: var(--muted); font-size: .82rem; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .login-page .login-secret:not([hidden]), .login-page #login-google-help:not([hidden]) { animation: login-code-in .16s ease-out; }
  @keyframes login-code-in { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 860px) {
  .login-page .auth-panel { padding: 24px 22px; }
  .login-page .login-heading { margin-bottom: 18px; }
  .login-page .login-heading h2 { font-size: 1.5rem; }
  .login-page .auth-panel .auth-form { gap: 14px; }
  .login-page .auth-brand h1 { font-size: 1.2rem; }
  .login-page .auth-brand-sub { font-size: .78rem; }
}
@media (max-width: 360px) {
  .login-page .auth-panel { padding: 20px 16px; }
  .login-page .auth-brand { gap: 10px; padding-inline: 16px; }
  .login-page .auth-brand .auth-mark { width: 52px; height: 52px; flex-basis: 52px; }
  .login-progress { gap: 6px; }
  .login-progress-item { gap: 6px; padding-inline: 8px; }
}
@media (max-width: 860px) {
  html.auth-document {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html.auth-document body.auth-page main.auth-shell {
    flex: none;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: flex-start;
    gap: 16px;
    padding:
      calc(16px + env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      calc(16px + env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }

  html.auth-document .auth-shell > .auth-tile,
  html.auth-document .auth-shell > .auth-sub {
    flex-shrink: 0;
  }

  html.auth-document .auth-shell > .auth-sub {
    line-height: 1.4;
  }

  html.auth-document .auth-field input {
    font-size: 16px;
  }
}

/* En PWA iOS, la hauteur dynamique peut rester temporairement plus courte
   au démarrage. La hauteur native stable évite d'attendre un geste de scroll. */
@media (display-mode: standalone) and (max-width: 860px) {
  html.auth-document body.auth-page,
  html.auth-document body.auth-page main.auth-shell {
    min-height: 100vh;
    min-height: 100lvh;
  }
}