.auth {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 18px calc(24px + var(--jm-safe-bottom));
    /* fond indigo subtil cohérent avec le splash, mais plus clair pour la lisibilité du formulaire */
    background:
            radial-gradient(120% 90% at 50% 0%,
            color-mix(in srgb, var(--jm-indigo) 10%, var(--jm-bg)) 0%,
            var(--jm-bg) 60%);
}

.auth__card {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 22px;
    /* léger liseré bronze/sable pour rappeler les détourages du logo */
    border-top: 3px solid var(--jm-red);
    box-shadow: var(--jm-shadow);
}

.auth__mark {
    width: 76px; height: 76px;
    object-fit: contain;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 10px rgba(10, 37, 64, .18));
}

.auth__title {
    margin: 0;
    font-size: 1.5rem;
    color: var(--jm-indigo);
    letter-spacing: .01em;
}

.auth__subtitle {
    margin: 4px 0 18px;
    color: var(--jm-text-muted);
    font-size: .9rem;
}

.auth__card .stack { width: 100%; text-align: left; }
.auth__card .field > .label { text-align: left; }

.auth__footnote {
    text-align: center;
    opacity: .8;
}

/* le formulaire passe AU-DESSUS du splash une fois celui-ci masqué ;
   tant que le splash est visible (2,2 s) il couvre déjà tout l'écran */