/*==========================================
    Pages de connexion / inscription
    (login, register, forgot, reset-password, create-password)
==========================================*/
#auth-page .container{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
    padding-bottom: clamp(1rem, calc(var(--u) * 3), 2rem);
}

.hero-photo{
    border: clamp(2px, calc(var(--u) * .4), 5px) solid var(--blanc);
    line-height: 0;
}

.hero-photo img{
    width: 100%;
    height: auto;
}

.auth-card{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(.75rem, calc(var(--u) * 2), 1.5rem);
}

.auth-card .card-title{margin-bottom: .25rem}

.card-text{
    font-size: var(--fs-text);
    font-weight: 600;
    text-align: center;
}

.auth-card .alert{margin: 0}

.auth-card a{text-decoration: underline}

.form-actions{
    display: grid;
    justify-items: center;
    gap: clamp(.75rem, calc(var(--u) * 2), 1.5rem);
    margin-top: .5rem;
}

.form-actions .button{
    max-width: calc(var(--unit) * 47.9);
    background-color: var(--cyan);
}

.form-actions .button:hover,
.form-actions .button:focus-visible{background-color: var(--bleu-fonce)}

/* Liens sous le bouton du formulaire (bleu sur le fond clair de la carte) */
.form-actions a{
    color: var(--bleu-texte);
    font-size: clamp(1rem, calc(var(--u) * 2), 1.9rem);
    font-weight: 500;
    text-align: center;
}

.form-actions a:hover,
.form-actions a:focus-visible{color: var(--bleu-fonce)}

/* Variante : pages courtes centrées */
.auth-page--narrow .container{max-width: calc(calc(var(--unit) * 58.3) + var(--gutter) * 2)}

/*==========================================
    Inscription rapide (via QR code)
==========================================*/
.page-head{
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.page-head-decor{
    width: clamp(110px, calc(var(--u) * 28), 431px);
    height: auto;
}

@media (min-width: 992px) {
    /* La baleine chevauche le titre : seul cas où un décor est placé en absolu */
    .page-head{position: relative}

    .page-head-decor{
        position: absolute;
        top: calc(min(100vw, var(--page-w)) * -.112);
        right: 0;
        width: clamp(260px, calc(var(--u) * 28), 431px);
    }
}