/* Constellation — pages d'accès (connexion, double authentification, invitation, réinitialisation).
   Aucun jeton propre : tout vient de style.css (--ac-*). Même grammaire que le Suivi : panneau mat, titre de
   section, champs, un seul bouton principal Prune par étape, Prune plein réservé à « c'est à vous ». */

.auth-page { min-height: 100vh; }
.auth-shell {
  position: relative; z-index: 1; min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 22px;
  padding: 40px var(--ac-gutter) 32px;
}
.auth-brand { display: flex; align-items: center; gap: 14px; width: min(460px, 100%); }
/* emblème : même peinture que .brand .logo de style.css (disque Prune décalé, anneau au jeton), à l'échelle --s */
.auth-brand .logo, .home-mark .logo {
  --s: 44px; flex: none; color: var(--ac-tx-1); display: block;
  background:
    radial-gradient(circle at calc(var(--s) * .6) calc(var(--s) * .408), var(--ac-accent) 0 calc(var(--s) * .17), transparent calc(var(--s) * .19)),
    radial-gradient(circle at 50% 50%, transparent 0 calc(var(--s) * .323), currentColor calc(var(--s) * .34) calc(var(--s) * .373), transparent calc(var(--s) * .39));
}
.auth-brand .logo use, .home-mark .logo use { display: none; }
.auth-brand .logo { width: var(--s); height: var(--s); }
.auth-brand h1 { margin: 0; font: var(--ac-fw-semibold) 20px/1.2 var(--ac-font-display); }
.auth-brand h1 span { color: var(--ac-tx-2); font-weight: var(--ac-fw-regular); }
.auth-tag { margin: 3px 0 0; font-size: var(--ac-fs-12); color: var(--ac-tx-3); }

.auth-card { width: min(460px, 100%); }
.auth-card .panel-head { gap: 12px; }
.auth-card .p-body { padding: 18px 18px 20px; display: grid; gap: 14px; }
.auth-card form { display: grid; gap: 14px; }

.auth-field { display: grid; gap: 6px; }
.auth-field > label, .auth-field > .lbl { font-size: 12.5px; font-weight: var(--ac-fw-semibold); color: var(--ac-tx-2); }
.auth-field input {
  width: 100%; height: 38px; background: var(--ac-field); border: 1px solid var(--ac-line-ctl); color: var(--ac-tx-1);
  border-radius: var(--ac-r-2); padding: 0 11px; font-size: 14px;
  transition: border-color var(--ac-dur-1), box-shadow var(--ac-dur-2);
}
.auth-field input:hover { border-color: var(--ac-line-4); }
.auth-field input:focus { outline: none; border-color: var(--ac-accent); box-shadow: var(--ac-glow-cyan); }
.auth-field input[aria-invalid="true"] { border-color: var(--ac-st-blocked); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-bad) 16%, transparent); }
.auth-field .help { font-size: 12px; color: var(--ac-tx-3); line-height: 1.45; }
.auth-field .pw-wrap { position: relative; }
.auth-field .pw-wrap input { padding-right: 42px; }
.auth-field .pw-toggle { position: absolute; right: 4px; top: 3px; }
.auth-field input.code {
  height: 48px; text-align: center; font: 600 24px/1 var(--ac-font-mono); letter-spacing: .38em; padding-left: .38em;
}

.auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.auth-actions .btn { min-width: 150px; }
.auth-link { background: none; border: 0; padding: 4px 0; font-size: 12.5px; color: var(--ac-tx-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ac-tx-2) 40%, transparent); text-underline-offset: 3px; cursor: pointer; }
.auth-link:hover { color: var(--ac-tx-1); text-decoration-color: currentColor; }

.auth-msg { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--ac-r-2); font-size: 12.5px; line-height: 1.5; border: 1px solid var(--ac-line-2); background: var(--ac-bg-2); color: var(--ac-tx-2); }
.auth-msg .ic { margin-top: 1px; }
.auth-msg.err { color: var(--ac-bad); border-color: color-mix(in srgb, var(--ac-bad) 35%, transparent); background: var(--ac-bad-soft); }
.auth-msg.ok { color: var(--ac-ok); border-color: color-mix(in srgb, var(--ac-ok) 35%, transparent); background: var(--ac-ok-soft); }
.auth-msg.info { color: var(--ac-tx-2); }
.auth-msg b { color: var(--ac-tx-1); }

/* invitation : fiche de l'organisation */
.auth-invite { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 12px 14px; border: 1px solid var(--ac-line-2); border-radius: var(--ac-r-3); background: var(--ac-bg-2); font-size: 13px; }
.auth-invite dt { color: var(--ac-tx-3); font-size: 12px; }
.auth-invite dd { margin: 0; color: var(--ac-tx-1); font-weight: var(--ac-fw-semibold); overflow-wrap: anywhere; }

/* enrôlement TOTP */
.auth-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; color: var(--ac-tx-2); line-height: 1.5; }
.auth-steps b { color: var(--ac-tx-1); }
.auth-qr { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.auth-qr img { width: 156px; height: 156px; border-radius: var(--ac-r-2); border: 1px solid var(--ac-line-3); background: var(--ac-ring-hi); padding: 6px; image-rendering: pixelated; }
.auth-secret { display: grid; gap: 6px; min-width: 0; }
.auth-secret code { display: block; font: 600 13px/1.5 var(--ac-font-mono); color: var(--ac-tx-1); letter-spacing: .06em; word-break: break-all; padding: 8px 10px; border-radius: var(--ac-r-2); background: var(--ac-inset); border: 1px solid var(--ac-line-2); user-select: all; }

/* codes de secours */
.auth-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0; padding: 12px; list-style: none; border-radius: var(--ac-r-3); background: var(--ac-inset); border: 1px solid var(--ac-accent-line); }
.auth-codes li { font: 600 14px/1.6 var(--ac-font-mono); color: var(--ac-tx-1); text-align: center; letter-spacing: .08em; }
.auth-codes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.auth-codes-head .hud { color: var(--ac-accent-ink); }

.auth-foot { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 11.5px; color: var(--ac-tx-3); text-align: center; max-width: 460px; }

@media (max-width: 480px) {
  .auth-shell { align-content: start; padding-top: 28px; }
  .auth-qr { grid-template-columns: 1fr; justify-items: center; }
  .auth-actions .btn { width: 100%; }
}

/* Mode développement (AC_ENV=dev) : connexion directe aux comptes de démonstration */
.auth-dev { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ac-line-2); }
.auth-dev-title { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 12px; font-weight: var(--ac-fw-semibold); color: var(--ac-accent-ink); }
.auth-dev-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Accueil public (racine du site) : présentation à gauche, connexion à droite ; empilé sous 960 px. */
.auth-shell.home {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 460px); align-items: center; justify-content: center;
  justify-items: stretch; gap: clamp(32px, 6vw, 88px); max-width: 1180px; margin: 0 auto;
}
.home-side { display: grid; gap: 18px; justify-items: center; }
.home-hero { display: grid; gap: 18px; align-content: center; max-width: 560px; }
.home-mark { display: flex; align-items: center; gap: 12px; }
.home-mark .logo { --s: 40px; width: var(--s); height: var(--s); }
.home-word { font: var(--ac-fw-semibold) 20px/1 var(--ac-font-display); }
.home-kicker { margin: 10px 0 0; color: var(--ac-accent-ink); }
.home-title { margin: 0; font: var(--ac-fw-semibold) clamp(30px, 4.2vw, 46px)/1.08 var(--ac-font-display); letter-spacing: -.01em; }
.home-title span { color: var(--ac-accent-ink); }
.home-lead { margin: 0; max-width: 480px; font-size: 15px; line-height: 1.6; color: var(--ac-tx-2); }
.home-features { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.home-features li {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--ac-line-2);
  border-radius: var(--ac-r-3); background: var(--ac-bg-2);
}
.home-features .ic { width: 20px; height: 20px; flex: none; color: var(--ac-accent); fill: none; stroke: currentColor; stroke-width: 1.6; }
.home-features div { display: grid; gap: 2px; }
.home-features b { font-size: 13.5px; color: var(--ac-tx-1); }
.home-features span { font-size: 12.5px; color: var(--ac-tx-3); }

@media (max-width: 960px) {
  .auth-shell.home { grid-template-columns: 1fr; justify-items: center; align-content: start; padding-top: 36px; }
  .home-hero { max-width: 460px; gap: 14px; }
  .home-features { display: none; }
}

.auth-link:focus-visible { outline: var(--ac-focus-ring); outline-offset: var(--ac-focus-offset); border-radius: var(--ac-r-1); }
@media (max-width: 639px), (pointer: coarse) {
  .auth-field input { height: var(--ac-tap); }
  .auth-field input.code { height: 52px; }
  .auth-field .pw-toggle { top: 0; min-width: var(--ac-tap); min-height: var(--ac-tap); right: 0; }
  .auth-field .pw-wrap input { padding-right: var(--ac-tap); }
  .auth-actions .btn { min-height: var(--ac-tap); }
  .auth-link { min-height: var(--ac-tap); display: inline-flex; align-items: center; }
}