/* ------------------------------
   Menu Mobile Modernisé - Fond Flou & Hiérarchie
--------------------------------*/
@media screen and (max-width: 800px) {

    /* Burger centré */
    .toggle-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .toggle-menu button.gb_toggle {
        background-color: #ffb300;
        border: none;
        border-radius: 8px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 20px;
        z-index: 9999;
        transition: background 0.3s ease, transform 0.2s ease;
    }

    .toggle-menu button.gb_toggle:hover {
        background-color: #e69500;
        transform: scale(1.1);
    }

    /* Menu latéral / fond semi-transparent flou */
    .side_gb_nav {
        position: fixed;
        top: 0;
        right: -260px;
        width: 250px;
        height: 100%;
        background-color: rgba(255, 200, 100, 0.85);
        backdrop-filter: blur(8px);
        padding-top: 80px;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 99999;
        transition: right 0.4s ease, opacity 0.4s ease;
        border-left: 3px solid #ff9800;
        border-radius: 0 12px 12px 0;
        box-shadow: -3px 0 12px rgba(0,0,0,0.25);
        opacity: 0;
        overflow-y: auto;
    }

    .side_gb_nav.show {
        right: 0;
        opacity: 1;
    }

    /* Liste verticale */
    .side_gb_nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .side_gb_nav li {
        margin-bottom: 18px;
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .side_gb_nav.show ul li {
        opacity: 1;
        transform: translateX(0);
    }

    /* Liens principaux */
    .side_gb_nav > ul > li > a {
        color: #111;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        display: block;
        padding: 14px 18px;
        border-radius: 10px;
        background-color: rgba(255,255,255,0.95);
        box-shadow: 0 3px 12px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
    }

    .side_gb_nav > ul > li > a:hover {
        background-color: #ffd966;
        color: #111;
        transform: translateX(3px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    }

    /* Sous-pages */
    .side_gb_nav ul ul {
        padding-left: 14px;
        margin-top: 6px;
    }

    .side_gb_nav ul ul li a {
        font-size: 14px;
        font-weight: 500;
        padding: 12px 16px;
        border-radius: 8px;
        background-color: rgba(255,255,255,0.85);
        color: #333;
        margin-left: 6px;
        position: relative;
        transition: all 0.3s ease;
    }

    /* Ligne verticale pour indiquer sous-page */
    .side_gb_nav ul ul li a::before {
        content: "";
        position: absolute;
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 70%;
        background-color: #ff9800;
        border-radius: 2px;
    }

    .side_gb_nav ul ul li a:hover {
        background-color: #fff2c4;
        color: #111;
        transform: translateX(3px);
    }

    /* Supprimer les __ si présents */
    .nav ul li ul li a:before {
        content: none !important;
    }

    /* Bouton fermer */
    .side_gb_nav .closebtn {
        font-size: 28px;
        font-weight: bold;
        color: #111;
        position: absolute;
        top: 12px;
        right: 14px;
        cursor: pointer;
        transition: color 0.3s ease, transform 0.2s ease;
    }

    .side_gb_nav .closebtn:hover {
        color: #333;
        transform: scale(1.1);
    }
}


/* ==============================
   Menu Desktop Moderne - intégré au header
============================== */
@media screen and (min-width: 801px) {
    /* Conteneur du menu */
    .gb_navigation {
        display: flex;
        justify-content: center; /* aligne horizontalement */
        align-items: center;     /* centre verticalement */
        gap: 25px;

        background-color: transparent; /* plus de fond */
        padding: 0;                    /* pas de padding autour */
        max-width: fit-content;
        margin: 0 auto;                /* centré horizontalement */
        position: relative;
        z-index: 10;
    }

    /* Items du menu */
    .gb_navigation li {
        position: relative;
        list-style: none;
    }

    .gb_navigation li a {
        color: #111;               /* texte sombre visible sur header blanc */
        text-decoration: none;
        font-weight: 500;
        padding: 12px 22px;        /* hauteur et largeur du bouton */
        border-radius: 6px;
        display: inline-block;
        transition: all 0.3s ease;
        background-color: rgba(255, 255, 255, 0.05); /* léger fond pour ressortir */
    }

    /* Hover items */
    .gb_navigation li a:hover {
        background-color: #ff9800; /* orange vif */
        color: #fff;               /* texte blanc au survol */
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    }

    /* Sous-menu desktop */
    .gb_navigation li ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #222;       /* fond sombre pour sous-menu */
        border-radius: 8px;
        padding: 8px 0;
        min-width: 180px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.2);
        z-index: 999;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .gb_navigation li:hover > ul {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    .gb_navigation li ul li a {
        padding: 10px 16px;
        display: block;
        color: #fff;
        background-color: transparent;
        border-radius: 4px;
        transition: all 0.25s ease;
    }

    .gb_navigation li ul li a:hover {
        background-color: #ffd966; /* jaune clair */
        color: #111;
        transform: translateX(3px);
    }
}
.gb_navigation {
    background-color: rgba(255, 255, 255, 0.9); /* léger fond blanc transparent */
    backdrop-filter: blur(6px); /* flou subtil derrière */
    padding: 8px 15px;          /* plus d’espace autour des items */
    border-radius: 12px;
}

/* ==============================
   MENU LATERAL - MOBILE (Fond jaune/or semi-transparent)
============================== */

@media screen and (max-width: 800px) {

    /* Menu latéral modernisé */
    .side_gb_nav {
        position: fixed;
        top: 0;               /* commence depuis le haut pour recouvrir header si besoin */
        right: -280px;        /* caché par défaut */
        width: 260px;
        height: 100%;         /* prend toute la hauteur de l’écran */
        background: rgba(255, 200, 50, 0.85); /* jaune/or semi-transparent */
        backdrop-filter: blur(8px);          /* effet verre dépoli léger */
        padding-top: 100px;                  /* espace pour le logo si nécessaire */
        padding-left: 20px;
        padding-right: 20px;
        border-left: 3px solid #ff9800;     /* accent orange */
        border-radius: 0 16px 16px 0;
        box-shadow: -4px 0 20px rgba(0,0,0,0.25);
        z-index: 99999;
        transition: right 0.4s ease, opacity 0.4s ease;
        opacity: 0;
        overflow-y: auto;
    }

    .side_gb_nav.show {
        right: 0;
        opacity: 1;
    }

    /* Liste verticale avec titres et sous-items distincts */
    .side_gb_nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .side_gb_nav li {
        margin-bottom: 20px;
    }

    /* Titres principaux du menu avec soulignement */
    .side_gb_nav > ul > li > a {
        font-size: 18px;
        font-weight: 700;
        color: #111; /* texte sombre pour contraster sur fond jaune */
        padding: 14px 18px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 3px 12px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border-bottom: 3px solid rgba(255, 165, 0, 0.5); /* soulignement subtil */
    }

    .side_gb_nav > ul > li > a:hover {
        background-color: #ff9800;
        color: #fff;
        transform: translateX(2px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.25);
        border-bottom: 3px solid #fff; /* accentuation du soulignement au survol */
    }

    /* Sous-items */
    .side_gb_nav ul ul li a {
        font-size: 15px;
        font-weight: 500;
        color: #111; /* sombre pour contraste */
        background-color: transparent;
        padding: 10px 16px;
        border-radius: 8px;
        transition: all 0.3s ease;
        display: block;
    }

    .side_gb_nav ul ul li a:hover {
        color: #fff;
        background-color: rgba(255, 165, 0, 0.4); /* orange semi-transparent au survol */
        transform: translateX(3px);
    }

    /* Bouton fermer */
    .side_gb_nav .closebtn {
        font-size: 28px;
        font-weight: bold;
        color: #111;
        position: absolute;
        top: 16px;
        right: 16px;
        cursor: pointer;
        transition: transform 0.2s ease, color 0.3s ease;
    }

    .side_gb_nav .closebtn:hover {
        color: #ff9800;
        transform: scale(1.2);
    }
}
@media screen and (max-width: 800px) {
    #header {
        position: relative;
    }
    #header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #ffd966, #ff9800, #ffd966);
        animation: slide 3s linear infinite;
        border-radius: 2px;
    }

    @keyframes slide {
        0% { background-position: 0% 0; }
        100% { background-position: 200% 0; }
    }
    
}
/* =========================
   Sous-items Desktop - Fond Bleu
========================= */
@media screen and (min-width: 801px) {
    /* Sous-items du menu desktop */
    .gb_navigation li ul li a {
        background-color: #ff9800; /* bleu vif */
        color: #fff;               /* texte blanc */
    }

    /* Hover sur sous-items desktop */
    .gb_navigation li ul li a:hover {
        background-color: #ff9800; /* bleu foncé */
        color: #fff;
        transform: translateX(3px);
    }
}

:root {
    --first-color: #ff9800;
    --second-color: #141316;
}