/* main, .form, .form-title, .form-input, .form-button,
   .error-container, .success-container fournis par components.css */

/* Surcharge : page auth centrée verticalement, formulaire étroit */
main,
.page-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.form {
    max-width: 400px;
}

/* Texte descriptif sous le titre (mot de passe oublié, confirmation) */
.form-description {
    margin: 0;
    text-align: center;
    color: var(--text-color);
    line-height: 1.5;
}

/* Sur mobile le max-width: 85% de components.css + le padding 2rem
   laissaient trop peu de largeur au formulaire (ex. ~255px sur 375px).
   On reprend toute la largeur et on reduit le padding. */
@media (max-width: 768px) {
    main,
    .page-main {
        max-width: 100%;
        padding: 1rem;
    }

    /* Le formulaire touche les bords tout en gardant du souffle,
       sans etre limite a 400px quand l'ecran fait 375px. */
    .form {
        max-width: 100%;
        padding: 1.25rem;
    }
}

.auth-links {
    text-align: center;
    margin-top: 1rem;
}

.auth-links a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-duration) var(--transition-timing);
}

.auth-links a:hover {
    color: var(--accent-hover-color);
    text-decoration: underline;
}

.cf-turnstile {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Liens secondaires du formulaire (mot de passe oublié, inscription, CGU) */
.form-link {
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-color);
}

.form-link a,
a.form-link {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-duration) var(--transition-timing);
}

.form-link a:hover,
a.form-link:hover {
    color: var(--accent-hover-color);
    text-decoration: underline;
}