/**
 * ============================================================
 * FICHIER : style.css
 * ROLE : Charte graphique - Bordures épaisses & Footer Fixe
 * ============================================================
 */

:root {
    --bg-blue: #00334d;      /* Bleu pétrole */
    --gold: #C5A059;         /* Or */
    --white: #ffffff;
    --red-quit: #ff4444;     
    --font-family: "Times New Roman", Times, serif;
    --header-height: 120px;
    --footer-height: 35px;
}

/* --- Reset & Bases --- */
* { box-sizing: border-box; }

body {
    background-color: var(--bg-blue);
    color: var(--gold);
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1 { font-size: 32px; text-align: center; text-transform: uppercase; margin: 20px 0; }

/* --- Structure --- */
main {
    flex: 1;
    width: 90%;
    margin: calc(var(--header-height) + 20px) auto calc(var(--footer-height) + 20px) auto;
}

/* Cards avec bordure Or 1px selon CDC mais rendu 2px pour visibilité */
.card {
    border: 1px solid var(--gold);
    border-radius: 15px;
    padding: 25px;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

/* --- HEADER (3 Colonnes) --- */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--header-height);
    background: var(--bg-blue);
    border-bottom: 2px solid var(--gold);
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    align-items: center;
    padding: 0 20px;
    z-index: 9999;
}

.header-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    border: 2px solid var(--gold); /* Bordure épaisse demandée */
    padding: 10px;
    border-radius: 15px;
    width: fit-content;
}

.avatar-medaillon {
    width: 50px;
    height: 50px;
    border-radius: 50% / 60%;
    border: 1px solid var(--gold);
    object-fit: cover;
}

.header-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.menu-side { display: flex; flex-direction: column; gap: 10px; }
.menu-row { display: flex; gap: 8px; justify-content: center; }

/* Boutons Navigation Ovale - Bordure 2px */
.nav-btn {
    border: 2px solid var(--gold); 
    border-radius: 20px;
    color: var(--gold);
    text-decoration: none;
    padding: 4px 15px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    background: transparent;
}

.nav-btn:hover { background: var(--gold); color: var(--bg-blue); }

.logo-main { height: 100px; }

.btn-auth {
    border: 2px solid var(--gold);
    border-radius: 25px;
    padding: 10px 25px;
    color: var(--gold);
    text-decoration: none;
    font-weight: bold;
}

/* --- FOOTER FIXE MONO-LIGNE --- */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: var(--footer-height);
    background: var(--bg-blue);
    border-top: 1px solid var(--gold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 12px; /* Taille Horloge selon CDC */
    z-index: 9999;
}

.footer-left, .footer-center, .footer-right { flex: 1; }
.footer-center { text-align: center; }
.footer-right { text-align: right; }

/* --- COMPATIBILITÉ SMARTPHONE & TABLETTE --- */
@media (max-width: 992px) {
    :root {
        --header-height: auto; /* Le header s'adapte au contenu sur mobile */
    }

    header {
        display: flex;
        flex-direction: column; /* On empile les éléments verticalement */
        height: auto;
        padding: 10px;
    }

    /* Le profil et le bouton déconnexion côte à côte en haut */
    .header-left, .header-right {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .header-profile {
        padding: 5px 10px;
        gap: 8px;
    }

    .header-profile img {
        width: 35px;
        height: 35px;
    }

    /* Réduction du logo pour gagner de la place */
    header .header-center > a img {
        height: 60px !important;
        margin: 5px 0;
    }

    /* --- SCROLL HORIZONTAL DU MENU --- */
    .header-center {
        width: 100%;
        overflow-x: auto; /* Active le scroll horizontal */
        white-space: nowrap; /* Empêche les boutons de revenir à la ligne */
        display: block; /* Nécessaire pour le scroll horizontal propre */
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch; /* Scroll fluide sur iPhone */
    }

    /* On aligne tous les boutons sur une seule ligne scrollable */
    .menu-side {
        display: inline-flex;
        flex-direction: row;
        gap: 8px;
    }

    .menu-row {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }

    /* Masquer la barre de défilement pour l'esthétique mais garder le scroll */
    .header-center::-webkit-scrollbar {
        height: 3px;
    }
    .header-center::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 10px;
    }

    /* Ajustement de la zone principale pour le nouveau header mobile */
    main {
        margin-top: 20px; /* Le header n'est plus fixe sur mobile pour éviter de masquer l'écran */
        width: 95%;
    }
    
    header {
        position: relative; /* On le libère pour ne pas manger 50% de l'écran mobile */
    }
}

/* --- COMPATIBILITÉ SMARTPHONE & TABLETTE --- */
@media (max-width: 850px) {
    header {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        position: relative !important;
        padding: 10px !important;
    }

    /* Le conteneur qui DOIT défiler */
    .header-center {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important; /* Force le scroll horizontal */
        white-space: nowrap !important; /* Empêche le retour à la ligne */
        padding: 10px 0 !important;
        -webkit-overflow-scrolling: touch !important; /* Fluidité iOS */
    }

    /* On force les menus à rester côte à côte sans rétrécir */
    .menu-side, .menu-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Interdit le retour à la ligne */
        gap: 10px !important;
    }

    .nav-btn {
        flex-shrink: 0 !important; /* Empêche le bouton de s'écraser */
        display: inline-block !important;
        min-width: fit-content !important;
    }

    /* Masquer la scrollbar pour le design mais garder le mouvement */
    .header-center::-webkit-scrollbar {
        height: 0px;
        background: transparent;
    }

    main {
        margin-top: 10px !important;
        width: 95% !important;
    }
}