.FormulaireDeConnexion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Si vous voulez que les éléments du formulaire soient côte à côte sur les grands écrans */
@media (min-width: 768px) {
    .FormulaireDeConnexion {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .FormulaireDeConnexion > * {
        flex: 1 1 200px; /* Ajustez la largeur minimale selon vos besoins */
    }
}

/* Assurez-vous que les champs de saisie occupent toute la largeur de leur conteneur */
.FormulaireDeConnexion input[type="text"],
.FormulaireDeConnexion input[type="email"],
.FormulaireDeConnexion input[type="password"] {
    width: 100%;
    box-sizing: border-box;
}

/* Style pour le bouton de soumission */
.FormulaireDeConnexion input[type="submit"] {
    align-self: flex-start; /* Aligne le bouton à gauche */
}

.bloc-form label{
    padding-bottom: 10px;
}

.bloc-form{
    padding-bottom: 20px;
}


.ligne-all{
    flex: 100%;
}

/* Flexbox pour la ligne contenant le bouton */
.bouton-form-all {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.bouton-form-all input[type="submit"] {
    flex: 1;         /* Fait que l'élément occupe tout l'espace disponible */
    width: auto;     /* S'assure qu'il n'y a pas de conflit avec une largeur fixe */
    padding: 1rem;   /* Ajoute de l'espace à l'intérieur */

}