/* ============================
   EN-TÊTE - Uniforme & fonctionnel (corrigé)
   ============================ */

/* Normalisation locale */
#header, #header * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Header principal */
#header {
    display: flex;
    align-items: center;
    gap: 24px;
    background-color: #2e8b57;
    color: #fff;
    padding: 20px 30px;
    min-height: 125px;
    width: 100%;
    position: relative;
}

/* Lien du logo */
#header a { color:#fff; text-decoration:none; }
#header a:hover { text-decoration: underline; text-decoration-color: rgba(255,255,255,.6); }

/* Titre principal */
#header h1 { font-size: 2em; line-height: 1.2; font-weight: bold; }

/* Bloc gauche */
#header-left { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }

/* Titre + langue */
#header-title-lang { display: flex; flex-direction: column; gap: 4px; }
#header-title-lang h1 { font-size: 2em; font-weight: bold; color: #fff; }

#lang-select {
    padding: 4px 10px;
    font-size: 1em;
    border-radius: 6px;
    border: none;
    background: #0f2f23;
    color: #fff;
    width: auto;
    max-width: 160px;
}
#flag-icon { width:22px; height:22px; vertical-align:middle; }

/* ======== NAV CENTRÉ ======== */
#main-nav { flex: 1; display: flex; justify-content: center; }
#main-nav ul { list-style: none; display: flex; gap: 24px; }
#main-nav ul li a {
    color: #fff; text-decoration: none;
    padding: 6px 12px; border-radius: 6px;
    transition: background-color 0.2s; white-space: nowrap;
}
#main-nav ul li a:hover { background-color: rgba(255, 255, 255, 0.2); }

/* ======== COMPTE À DROITE ======== */
#account-menu {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    margin-left: auto; z-index: 10;
}

/* Avatar */
#account-toggle img {
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important; border: 2px solid rgba(255,255,255,.5) !important;
    object-fit: cover !important; max-width: none !important; display: block;
}
#account-toggle { cursor: pointer; color: #fff; font-weight: bold; }

/* Dropdown compte */
#account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    width: 260px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    text-align: left;
    color: #333;
    display: none; /* fermé par défaut */
    z-index: 9999; /* au-dessus de tout */
}
#account-dropdown.hidden { display: none; }
#account-dropdown:not(.hidden) { display: block; }

#account-dropdown p,
#account-dropdown label { margin-bottom: 6px; }

#account-dropdown form input[type="email"],
#account-dropdown form input[type="password"],
#account-dropdown form input[type="submit"] {
    width: 100%; margin: 6px 0; padding: 9px;
    font-size: 1em; border-radius: 6px; border: 1px solid #ccc;
}
#account-dropdown input[type="submit"] {
    background-color: #2e8b57; color: #fff; cursor: pointer; transition: background 0.3s;
}
#account-dropdown input[type="submit"]:hover { background-color: #226c45; }
#account-dropdown a { color: #2e8b57; text-decoration: none; display: inline-block; margin-top: 8px; font-size: 0.95em; }
#account-dropdown a:hover { text-decoration: underline; }

#account-name { font-size: 0.95em; font-weight: bold; }

/* Texte discret */
.texte-petit { font-size: 0.85em; color: #ffffff; }

/* ===== Overflow / stacking pour ne pas couper le menu ===== */
#header-wrap, #header { overflow: visible; }

/* Classe utilitaire si manquante ailleurs */
.hidden { display: none !important; }

/* ======== Responsive ======== */
@media screen and (max-width: 1200px) {
    #header { flex-wrap: wrap; }
    #main-nav { order: 3; width: 100%; margin-top: 8px; }
    #main-nav ul { justify-content: center; flex-wrap: wrap; row-gap: 8px; column-gap: 18px; }
    #account-name { display: none; }
}
@media screen and (max-width: 768px) {
    #header { align-items: flex-start; padding: 16px; }
    #header-left { flex-direction: column; align-items: flex-start; gap: 10px; }
}