/* --- 1. SUPPRESSION TOTALE DES ESPACES (TOP & SIDES) --- */
body.site {
    margin: 0 !important;
    padding: 0 !important;
}

.container-header {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

/* On s'assure que le conteneur interne ne limite pas la largeur */
.container-header .grid-child {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* --- FIX IMAGE PLEINE LARGEUR --- */
.navbar-brand, .brand-logo {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important; /* Supprime la limite qui bloque l'image à gauche */
}

.brand-logo img {
    width: 100% !important;   /* Force l'image à prendre toute la largeur du navigateur */
    height: auto !important;  /* Garde les proportions */
    max-width: none !important;
    display: block !important;
}

/* On supprime les marges de la grille Cassiopeia pour le header */
.header .grid-child {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* --- 2. AGRANDISSEMENT DU MENU --- */
.container-header .mod-menu {
    gap: 10px; /* Espace entre les items */
}

.container-header .mod-menu > li > a, 
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button {
    font-size: 1.2rem !important; /* Augmenté de 1rem à 1.2rem */
    letter-spacing: 1.5px !important; /* Plus aéré et moderne */
    padding: 15px 25px !important; /* Plus de zone de clic */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
}

/* Ajustement pour les écrans plus petits (tablettes) pour éviter que le menu ne casse */
@media (max-width: 1200px) {
    .container-header .mod-menu > li > a {
        font-size: 1rem !important;
        padding: 10px 15px !important;
    }
}
/* --- 3. MENU - VERSION ORDINATEUR (Écrans larges) --- */
@media (min-width: 992px) {
    
    /* Hauteur minimale de l'image sur grand écran */
    .container-header .navbar-brand img {
        min-height: 350px; 
    }

    /* Le conteneur du menu se place PAR DESSUS l'image */
    .container-header .container-nav {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); /* Dégradé pour lisibilité */
        z-index: 100;
        display: flex;
        justify-content: center;
    }

    /* Force le Metismenu à s'afficher en ligne (horizontal) */
    ul.metismenu.mod-menu {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center;
        margin: 0;
        padding: 10px 0;
        list-style: none;
    }

    /* Style des liens principaux */
    ul.metismenu > li.metismenu-item {
        position: relative;
    }

    ul.metismenu > li.metismenu-item > a,
    ul.metismenu > li.metismenu-item > button {
        color: #fff !important;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 1rem;
        padding: 10px 20px;
        background: transparent !important;
        border: none;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        cursor: pointer;
    }

    /* Survol */
    ul.metismenu > li.metismenu-item:hover > a,
    ul.metismenu > li.metismenu-item:hover > button {
        color: #ffda79 !important;
    }

    
}

/* --- 4. MENU - VERSION MOBILE (Tablettes et téléphones) --- */
@media (max-width: 991.98px) {
    
    .container-header .navbar-brand img {
        min-height: auto; /* Hauteur naturelle sur mobile */
    }

    /* Le menu passe EN DESSOUS de l'image (flux normal) */
    .container-header .container-nav {
        position: relative; 
        background-color: #1a252f; /* Fond bleu nuit */
        padding: 10px;
        width: 100%;
    }

    /* On empile les menus verticalement */
    ul.metismenu.mod-menu {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    ul.metismenu > li.metismenu-item {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        width: 100%;
        text-align: center;
    }

    ul.metismenu > li.metismenu-item > a,
    ul.metismenu > li.metismenu-item > button {
        color: #fff !important;
        display: block;
        width: 100%;
        padding: 15px;
        font-size: 1.1rem;
    }
}

/* --- 5. FOOTER --- */
footer.footer {
    background: linear-gradient(135deg, #1e2a36 0%, #2c3e50 100%) !important;
    padding: 20px 0;
    margin-top: 0;
}
footer.footer a { color: #bdc3c7; text-decoration: none; }

/* --- STYLISATION DU BOUTON BURGER (MOBILE) --- */
.navbar-toggler {
    padding: 0.75rem 1rem !important; /* Agrandit la zone de clic */
    border: 2px solid #ffffff !important; /* Ajoute un cadre blanc */
    background-color: rgba(255, 255, 255, 0.1) !important; /* Fond léger */
    margin: 10px !important;
}

/* Grossir l'icône des 3 barres à l'intérieur */
.navbar-toggler-icon {
    width: 2em !important;
    height: 2em !important;
    /* Force la couleur blanche pour les barres du burger */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Optionnel : Ajouter le mot "MENU" à côté du burger pour la clarté */
.navbar-toggler::after {
    content: " MENU";
    color: #fff;
    font-weight: bold;
    vertical-align: middle;
    margin-left: 5px;
}