body.login-body {
    height: 100vh; 
    margin: 0; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    background-color:#f4f7f6; /* Couleur de fond avec transparence */
    border-radius: 25px; /* Coins arrondis */
    padding: 30px; /* Rembourrage */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Ombre portée */
    width: 500px; /* Largeur de la carte */
}

.login-logo {
    width: 200px;
    height: auto; /* Hauteur automatique pour garder le ratio */
    border-radius: 90%; /* Rendre l'image circulaire */
}

.form-control {
    border: 1px solid #ddd; /* Bordure visible */
    border-radius: 5px; /* Arrondir les coins */
    background-color: transparent; /* Champ transparent */
    color: #fff; /* Texte blanc */
    padding: 10px; /* Ajout de rembourrage pour un meilleur look */
}

.form-control:focus {
    border-color  :#f4f7f6; /* Couleur de bordure au focus */
    outline: none; /* Pas de contour au focus */
    box-shadow: none; /* Pas d'ombre au focus */
}

.form-label {
    color: #fff; /* Couleur des étiquettes en blanc */
}
h1 {
    font-size: 1rem; 
    color: #000000; 
    text-align: center; 
    margin-bottom: 20px; 
   
    letter-spacing: 1px;
}
.login-btn {
    background-color:#e99213; /* Couleur de fond orange */
    border: none; /* Pas de bordure */
    border-radius: 20px; /* Coins arrondis */
    padding: 10px; /* Rembourrage */
    color: white; /* Texte en blanc */
    font-weight: bold; /* Texte en gras */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre portée */
    width: 100%; /* Prendre toute la largeur */
    font-size: 16px; /* Taille de police par défaut */
}

.login-btn:hover {
    background-color: #e99213; /* Couleur au survol */
}

.text-orange {
    color: #e99213; /* Couleur du texte orange */
    text-decoration: none; /* Pas de soulignement */
}

.text-orange:hover {
    color: #000000; /* Couleur du texte au survol */
    text-decoration: none; /* Pas de soulignement */
}

::placeholder {
    color: #ddd; /* Couleur des espaces réservés */
}

/* Media query pour les écrans plus petits */
@media (max-width: 768px) {
    .login-card {
        padding: 20px; /* Ajuster le rembourrage pour les petits écrans */
        width: 90%;
        margin-left: 5%;  /* Prendre plus de place sur les petits écrans */
    }
    .login-logo {
        width: 80px; /* Ajuster la taille de l'image pour les petits écrans */
    }
    .login-btn {
        padding: 8px; /* Réduire le rembourrage pour les petits écrans */
        font-size: 14px; /* Ajuster la taille de la police */
    }
}

/* Media query pour les smartphones */
@media (max-width: 480px) {
    .login-card {
        padding: 15px; /* Réduire le rembourrage pour les très petits écrans */
        width: 95%;
        margin-left: 5%; /* Prendre encore plus de place sur les très petits écrans */
    }
    .login-logo {
        width: 60px; /* Ajuster la taille de l'image pour les très petits écrans */
    }
    .form-control {
        padding: 8px; /* Ajustement supplémentaire du rembourrage */
        font-size: 14px; /* Réduire la taille de la police */
    }
    .login-btn {
        padding: 6px; /* Ajustement du rembourrage pour les petits écrans */
        font-size: 12px; /* Réduire encore la taille de la police */
    }
}

/* Media query pour les très petits écrans */
@media (max-width: 360px) {
    .login-btn {
        padding: 5px; /* Ajustement supplémentaire pour les très petits écrans */
        font-size: 12px;
        margin-left: 5%;  /* Taille de police constante */
    }

    .login-btn {
        padding: 3px; /* Ajustement du rembourrage pour les petits écrans */
        font-size: 6px; /* Réduire encore la taille de la police */
    }
}