/*
 * page-login.css - Style des pages sans barre de navigation (home_app/login.php et home_app/setup.php)
 * =====================================================================================================
 * Complète home-ui.css : une carte centrée sous la marque « Maison », sur un fond doucement éclairé.
 * Chargé automatiquement après home-anim.css (setup.php le charge lui-même, c'est la même carte).
 * Les champs sont un peu plus grands que d'habitude : on les remplit au pouce, souvent sur téléphone.
 */

/* ── Mise en page : tout est centré, le contenu ne s'étire pas ──────────── */
body { background: radial-gradient(52rem 26rem at 50% -6rem, #7cc4a424, transparent 70%), var(--bg); }
main { min-height: 100vh; min-height: 100dvh; justify-items: center; align-content: center; gap: 18px; padding: 28px 16px 40px; }

/* ── Marque ─────────────────────────────────────────────────────────────── */
.auth-brand { display: flex; align-items: center; gap: 12px; font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
.auth-logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--acc); background: var(--acc-soft); border: 1px solid var(--acc-d); }
.auth-logo svg { width: 28px; height: 28px; }

/* ── Carte ──────────────────────────────────────────────────────────────── */
.card.auth-card { width: min(100%, 420px); padding: 24px; gap: 18px; background: var(--card); box-shadow: 0 30px 60px -36px #000; }
.card.auth-card:hover { transform: none; box-shadow: 0 30px 60px -36px #000; border-color: var(--line); }
.auth-intro { display: grid; gap: 6px; }
.auth-intro h1 { font-size: 1.3rem; }
.auth-intro p { font-size: .95rem; }
.auth-card .form { gap: 16px; }
.auth-card label { color: var(--txt); font-weight: 500; font-size: .92rem; }
.auth-card input { min-height: 46px; }
.auth-card .hint { margin-top: 6px; }
.auth-card button.auth-submit { width: 100%; min-height: 50px; font-size: 1.02rem; }
.auth-foot { width: min(100%, 420px); text-align: center; font-size: .85rem; }

/* ── Mot de passe avec bouton « Afficher » (le bouton n'apparaît qu'avec JavaScript) ── */
.auth-pw { position: relative; }
.auth-pw input:not([type=button]) { padding-right: 104px; }
.auth-pw .pw-toggle { position: absolute; top: 1px; bottom: 1px; right: 1px; width: auto; min-height: 0; padding: 0 14px; border: 0; border-left: 1px solid var(--line2); border-radius: 0 7px 7px 0; background: var(--card2); color: var(--mut); font-size: .88rem; font-weight: 500; cursor: pointer; }
.auth-pw .pw-toggle:hover { color: var(--txt); }
.auth-pw .pw-toggle[aria-pressed="true"] { color: var(--acc); }

/* ── Étapes de la première installation ─────────────────────────────────── */
.auth-steps { display: grid; gap: 22px; }
.auth-step + .auth-step { border-top: 1px solid var(--line); padding-top: 20px; }
.auth-step h2 { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; }
.step-body { display: grid; gap: 14px; }
.auth-step .step-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acc-soft); border: 1px solid var(--acc-d); color: var(--acc); font-size: .85rem; flex: none; }
.auth-step .step-sub { color: var(--mut); font-size: .88rem; }

@media (max-width: 520px) {
    main { justify-content: stretch; padding-top: 20px; }
    .card.auth-card { padding: 20px 16px; }
    .auth-brand { font-size: 1.7rem; }
}

/* Page « Trop de tentatives » (private/home_login_guard.php) : le lien de retour a la largeur du bouton de connexion. */
.card.auth-card a.btn.auth-submit { width: 100%; min-height: 50px; font-size: 1.02rem; }