/* Boutons */
input[type="submit"], .submit-button, .btn-primary {
    background-color: #ffde59;
    color: #000;
    border: 1px solid #000;
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    outline: none;
    font-family: Arial, sans-serif;
    display: inline-block;
}

input[type="submit"]:hover, .submit-button:hover, .btn-primary:hover {
    background-color: #000;
    border-color: #000;
    color: #ffde59;
}

input[type="submit"]:focus, .submit-button:focus, .btn-primary:focus {
    border-color: #4CAF50;
}

/* CAPTCHA */
.captcha {
    background: #f3f3f3;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin: 10px 0;
}

/* Titre de connexion */
#Connexion-info-title-text {
    margin-left: 0%;
    font-weight: bold;
    font-size: 22px;
    position: absolute;
    z-index: 1;
}

#Connexion-info-title-background-image {
    margin-left: 2%;
    z-index: 2;
}

/* Ajustements pour petits écrans */
@media screen and (max-width: 576px) {
    body {
        padding: 0 7px; /* Ajout d'un padding pour éviter que le contenu touche les bords */
    }

    form {
        width: 65%; /* Formulaire prend toute la largeur */
        padding: 15px; /* Padding pour éviter que les champs soient collés */
    }

    .form-group input {
        width: 65%; /* Champs de saisie prennent toute la largeur disponible */
        margin-bottom: 15px; /* Espacement entre les champs */
    }

    .submit-button {
        width: 65%; /* Boutons prennent toute la largeur pour les petits écrans */
        text-align: center;
    }
}