/**
 * Styles spécifiques à la page de réinitialisation de mot de passe oublié.
 *
 * Ce fichier contient les règles CSS pour la mise en page du formulaire de demande
 * de réinitialisation de mot de passe, y compris le bandeau supérieur, le conteneur
 * principal du formulaire, et les styles des éléments de formulaire.
 */

/* Styles pour le bandeau supérieur */
.bandeau{
    height: 23dvh;
}

.bandeau img{
    width: 100%;
    height: 100%;
}

/* Conteneur principal de la page de mot de passe oublié */
.mainForgotPassword{
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    height: fit-content !important;
}

.mainForgotPassword .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

/* Styles pour le formulaire de réinitialisation */
.mainForgotPassword form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.mainForgotPassword h2 {
    font-weight: lighter;
    font-size: 1.625rem; /* 26px */
    color: #333333;
    text-align: center;
}

.mainForgotPassword label {
    font-weight: bold;
    color: #333333;
}

.mainForgotPassword input {
    width: 100%;
    height: 4dvh;
    margin: 1dvw 0;
    padding: 1dvw;
    border: 1px solid #ccc;
    border-radius: 0.3125rem; /* 5px */
}

.mainForgotPassword input:focus {
    outline: none;
    border: 1px solid #2196f3;
}

.mainForgotPassword p{
    text-align: center;
}