/* --------- Initialisation --------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f7f6; /* Gris très clair et chic, fait ressortir la carte */
    color: #333;
    line-height: 1.6;
}

/* --------- Structure globale (Footer en bas) --------- */
.body-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1; /* Permet à la zone centrale de pousser le footer vers le bas */
    padding: 40px 0; /* Espace au dessus et en dessous de la carte */
}

.container {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --------- En-tête (Header) --------- */
.entete-elegante {
    background-color: #ffffff;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Ombre douce sous le menu */
    position: relative;
    z-index: 10;
}

.entete-elegante h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
}

.entete-elegante .accueil {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

.entete-elegante .accueil span {
    font-weight: 600;
    color: #0056b3; /* Rappel du bleu du formulaire */
}

/* Bouton de déconnexion stylisé */
.btn-deconnexion {
    display: inline-block;
    font-size: 14px;
    color: #d9534f; /* Un rouge très doux pour indiquer la sortie */
    text-decoration: none;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    background-color: rgba(217, 83, 79, 0.1);
    transition: all 0.3s ease;
}

.btn-deconnexion:hover {
    background-color: rgba(217, 83, 79, 0.2);
    color: #c9302c;
}

.btn-deconnexion i {
    margin-right: 5px;
}

/* --------- La Carte Leaflet --------- */
#map {
    width: 100%;
    height: 600px; /* Un peu plus haute pour une meilleure vue */
    border: none; /* On supprime l'ancien cadre bleu épais */
    border-radius: 12px; /* Même arrondi que le formulaire */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Même ombre élégante que le formulaire */
    z-index: 1;
}

/* --------- Footer --------- */
footer {
    background-color: #ffffff;
    color: #888;
    text-align: center;
    padding: 25px 20px;
    font-size: 14px;
    border-top: 1px solid #eaeaea;
}

/* --------- Responsive --------- */
@media (max-width: 768px) {
    #map {
        height: 450px;
    }
    
    .main-content {
        padding: 20px 0;
    }
}

/* --- Style global du conteneur du formulaire --- */
.colonne {
    background-color: #ffffff;
    width: 100%;
    max-width: 450px; /* Largeur maximale pour que ça reste élégant */
    margin: 40px auto; /* Centre le formulaire horizontalement */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Ombre douce et moderne */
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

/* --- Typographie --- */
.titre {
    font-size: 28px;
    font-weight: bold;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 8px;
}

.sous_titre {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* --- Labels et Champs de texte --- */
.colonne label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    margin-top: 15px; /* Espace au-dessus de chaque champ */
}

.colonne input[type="text"],
.colonne input[type="password"] {
    width: 100%;
    padding: 14px 15px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 8px; /* Bords arrondis comme sur ta photo */
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s ease; /* Animation fluide */
}

/* Effet de sélection (Focus) qui reproduit ta photo */
.colonne input[type="text"]:focus,
.colonne input[type="password"]:focus {
    border-color: #0056b3; /* Bleu élégant */
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15); /* Petit halo bleu autour */
}

/* --- Le secret de l'œil bien centré --- */
.conteneur_formulaire {
    position: relative; /* Indispensable pour positionner l'œil par rapport à cette boîte */
    width: 100%;
}

.conteneur_formulaire input[type="password"] {
    padding-right: 45px; /* Empêche le texte de passer sous l'œil si le mdp est long */
}

#oeil {
    position: absolute;
    right: 15px;      /* Décollé du bord droit */
    top: 50%;         /* À 50% de la hauteur du champ */
    transform: translateY(-50%); /* Remonte l'œil de la moitié de sa propre taille pour un centrage parfait */
    cursor: pointer;
    color: #777;
    font-size: 18px;
    transition: color 0.2s;
}

#oeil:hover {
    color: #1a1a1a; /* Devient plus sombre au survol */
}

/* --- Bouton d'envoi et Liens --- */
.envoi {
    margin-top: 35px;
    margin-bottom: 15px;
    background-color: #2c3e50; /* Gris/Bleu très sombre et sobre */
    color: #ffffff;
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}

.envoi:hover {
    background-color: #1a252f;
}

.envoi:active {
    transform: scale(0.98); /* Petit effet de clic naturel */
}

.colonne a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 600;
}

.colonne a:hover {
    text-decoration: underline;
}