/* Conteneur principal */
.align-center {
    margin: auto;
    padding: 20px;
    background-color: #ebebeb; /* Couleur de fond légère */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre douce */
    max-width: 500px; /* Limiter la largeur maximale */
}

/* Champs de formulaire */
.form-control {
    width: 100%; /* Assure que les champs restent à l'intérieur de leur conteneur */
    padding: 12px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #ddd;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Trebuchet MS';
}

/* Focus sur les champs */
.form-control:focus {
    border-color: #28a745; /* Couleur verte pour correspondre au bouton Login */
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.5); /* Effet de surbrillance */
    outline: none;
}

/* Bouton */
.btn-success {
    background-color: #ff6800;
    width: 100%; /* Le bouton occupe toute la largeur */
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 8px;
    color: black;
    font-weight: bold; /* Met le texte des en-têtes en gras */
}

/* htmx */
.correct {
    font-size: 12px;
    color: green;
}

.typing {
    font-size: 12px;
    color: black;
}