body, html {
    font-family: Arial, sans-serif;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2; /* Couleur de fond plus claire */
    color: #333; /* Texte foncé pour contraste */
}

.container-login {
    width: 100%;
    max-width: 400px;
}

.square {
    width: 100%;
    background-color: #ffffff; /* Fond blanc pour la zone de connexion */
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.3); /* Ombre portée légère */
}

h1 {
    color: #551A8B; /* Couleur du titre pour correspondre au thème */
    font-size: 30px; /* Ajusté pour une meilleure taille sur les écrans plus petits */
    margin-bottom: 20px;
}

label, input, button {
    display: block;
    margin-bottom: 10px;
}
input[type="text"], input[type="password"], button {
    width: 100%; /* Ajusté pour les bordures */
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    box-sizing: border-box;
}

input[type="text"], input[type="password"] {
    background-color: #f9f9f9; /* Fond légèrement gris pour les champs de texte */
}

button {
    background-color: #551A8B; /* Couleur de fond du bouton */
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #411b63; /* Couleur de fond au survol */
}


header .logo img {
    height: 40px;
}

.logo img {
    width: 220px; /* Largeur de l'image, ajustable selon ta préférence */
    height: 170px; /* Hauteur identique pour conserver le carré */
    object-fit: cover; /* Maintient le rapport largeur/hauteur tout en remplissant le carré */
}