/* Couleurs de base */
:root {
    --warm-beige: rgb(141, 121, 77);
    --soft-grey: rgb(186, 180, 142);
    --light-grey: rgb(222, 227, 216);
    --dark-charcoal: rgb(40, 40, 32);
    --muted-olive: rgb(79, 74, 54);
}

body {
    font-family: 'Arial', sans-serif;
    color: var(--dark-charcoal);
    background-color: var(--light-grey);
    margin: 0;
    padding: 0;
}

.btn-show-hide {
    position: absolute;
    right: 10px;
    top: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

/* Assure-toi que la hauteur du bouton correspond à la hauteur de ton input */
.btn-show-hide {
    height: calc(1.5em + 20px); /* 1.5em est la hauteur par défaut de l'input, 20px est la somme du padding vertical */
}

a {
    color: var(--warm-beige);
    text-decoration: none;
}

a:hover {
    color: var(--muted-olive);
}

header {
    background-color: var(--dark-charcoal);
    color: var(--light-grey);
    padding: 20px 0;
}

/* Stylisation des sous-menus */
.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.navbar li {
    position: relative;
    margin: 0 20px;
}

/* Style du menu déroulant */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--soft-grey);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
    z-index: 1;
}

.dropdown-content a {
    color: var(--dark-charcoal);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: var(--warm-beige);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropbtn {
    color: var(--warm-beige);
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    background-color: var(--dark-charcoal);
}

.dropdown:hover .dropbtn {
    background-color: var(--muted-olive);
}



.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* Styles de base pour le body */
body {
    line-height: 1.8; /* Augmenter l'interligne pour améliorer la lisibilité */
}

/* En-tête principal */
h1, h2 {
    color: var(--dark-charcoal);
}

/* Styles des formulaires */
form {
    background-color: var(--soft-grey); /* Assurer la cohérence avec le nouveau schéma de couleurs */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Styles des labels */
label {
    display: block;
    margin-bottom: 10px;
    color: rgb(40, 40, 32); /* texte charbon foncé */
}


/* Reste de ton CSS */

/* Container pour le formulaire */
.container {
    max-width: 50rem; /* Largeur maximale pour le container */
    margin: 50px auto; /* Centre horizontalement et ajoute une marge en haut */
    padding: 20px;
    background-color: var(--soft-grey);
    border-radius: 10px; /* Arrondit les angles */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre douce */
}

/* Form groups */
.form-group {
    margin-bottom: 20px; /* Espace entre les form groups */
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: calc(100% - 20px); /* Réduit la largeur pour tenir compte du padding */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--dark-charcoal);
    border-radius: 5px;
}

/* Bouton Afficher pour mot de passe */
.btn-show-hide {
    display: inline-block; /* Permet au texte de ne pas décaler l'input */
    cursor: pointer;
    user-select: none; /* Empêche la sélection du texte du bouton */
}

/* Bouton de connexion */
input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: var(--muted-olive);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* Pour le bouton S'inscrire */
.i {
    display: block;
    text-align: center;
    margin-top: 20px;
}


.password-toggle {
    cursor: pointer;
    /* Tu peux ajouter plus de styles ici pour le bouton */
}

.input-password-toggle {
    position: absolute;
    right: 10px;
    top: calc(50% - 15px); /* Centrer verticalement */
    border: none;
    background: none;
    cursor: pointer;
    color: var(--dark-charcoal);
}

/* Styles pour les messages d'erreur ou de confirmation */
.error, .success {
    color: white;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px; /* Augmenter légèrement le rayon de la bordure pour un look modernisé */
}

.error {
    background-color: rgb(204, 0, 0); /* rouge pour les erreurs */
}

.success {
    background-color: rgb(0, 153, 0); /* vert pour les succès */
}

/* Lien de déconnexion */
a.logout-link {
    color: rgb(141, 121, 77); /* couleur beige chaude */
    text-decoration: none;
}

/* Ajoutez d'autres styles personnalisés ci-dessous */

.error {
    color: red;
    margin: 10px 0;
    text-align: center;
}

footer {
    background-color: var(--muted-olive);
    color: var(--light-grey);
    padding: 20px 0;
    text-align: center;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    display: inline;
    margin: 0 15px;
}

footer a {
    color: var(--warm-beige);
    text-decoration: none;
    font-weight: bold;
}

footer a:hover {
    color: var(--soft-grey);
}