/* ==========================================================================
   NAVBAR / MENU HAMBURGER / SOUS-MENUS — CORRECTIF RESPONSIVE
   À charger en DERNIER (après design-global.css et styles.css) pour
   remplacer proprement les règles qui se contredisaient entre les deux
   anciens fichiers (largeur du megamenu, position, etc.).
   ========================================================================== */

#custom-navbar {
    overflow: visible;
}

#custom-navbar .navbar-nav .nav-item.dropdown {
    position: relative;
}

/* ==========================================================================
   1) DESKTOP (≥ 1400px) — megamenu élégant, centré sous son item,
      qui ne déborde jamais de l'écran

   Bootstrap bascule .navbar-expand-lg en mode "une seule
   ligne" dès 992px. Or les 8 items du menu (avec leurs longs libellés
   français : "Point sur les réformes", "Finances publiques"...) ont besoin
   d'environ 1235px pour tenir sur une ligne. Entre 992px et ~1400px, les
   derniers items ("Dette publique", "Agenda", "Liens utiles") débordaient
   silencieusement du conteneur — invisibles et inatteignables, un défaut
   fréquent sur les résolutions d'ordinateur portable (1024, 1280...).
   Le seuil de bascule est donc repoussé à 1400px, avec une redéclaration
   ci-dessous du comportement natif de .navbar-expand-lg pour la plage
   992–1399.98px (Bootstrap l'active nativement dès 992px). Marge portée à
   1400px (au lieu de 1300px) pour absorber le 9e item optionnel « Pages »
   (menu des pages dynamiques créées depuis l'admin, top-header.blade.php),
   invisible tant qu'aucune page n'y est rattachée mais dont la largeur doit
   déjà être prise en compte pour ne jamais casser la mise en page le jour
   où il apparaît.
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1399.98px) {
    /* Bootstrap (≥992px) met la barre sur une seule ligne (nowrap) et la
       liste en ligne (row) : le panneau ouvert se retrouvait écrasé à côté
       du bouton, avec un défilement horizontal. On rétablit le comportement
       « menu déroulant en colonne » sur toute cette plage. */
    #custom-navbar.navbar-expand-lg,
    #custom-navbar.navbar-expand-lg > .container-fluid {
        flex-wrap: wrap;
    }
    #custom-navbar.navbar-expand-lg .navbar-toggler {
        display: inline-flex !important;
        margin-left: auto;
    }
    /* !important obligatoire : Bootstrap impose « display: flex !important »
       à .navbar-expand-lg .navbar-collapse dès 992px, ce qui laissait le
       menu affiché en permanence, même fermé. */
    #custom-navbar.navbar-expand-lg .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }
    #custom-navbar.navbar-expand-lg .navbar-collapse {
        flex-basis: 100%;
    }
    #custom-navbar.navbar-expand-lg .navbar-collapse.show,
    #custom-navbar.navbar-expand-lg .navbar-collapse.collapsing {
        display: block !important;
    }
    #custom-navbar.navbar-expand-lg .navbar-nav {
        flex-direction: column;
        width: 100%;
        max-width: 760px;
        margin: 0 auto !important;
    }
    #custom-navbar .navbar-nav .nav-item.dropdown .nav-link::after {
        bottom: auto;
    }
    /* Le bandeau blanc du haut porte déjà recherche, langue et suivi : la
       barre bleue n'a que le bouton du menu, à droite. */
    #custom-navbar.navbar-expand-lg {
        padding: 6px 0;
    }
}

@media (min-width: 1400px) {
    #custom-navbar .navbar-nav .dropdown-menu.megamenu {
        display: block;
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        right: auto !important;
        width: max-content !important;
        min-width: 420px;
        /* Relevé de 900 à 1100px : "Liens utiles" compte désormais 4
           colonnes (Gouvernement, Ministères, Institutions | Agences,
           Partenaires internationaux) — les menus à moins de colonnes
           restent inchangés, leur largeur naturelle étant déjà < 900px. */
        max-width: min(1100px, 94vw) !important;
        margin-top: 14px !important;
        padding: 26px !important;
        border: none !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 24px 60px rgba(16, 35, 63, 0.18) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 6px) !important;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
        z-index: 1050;
    }

    /*
       Avec un déclenchement au :hover pur, la souris traverse
       une zone vide (margin-top du megamenu) en descendant du lien vers le
       menu. Pendant cette traversée, le curseur ne survole plus ni le lien
       ni le menu : le megamenu perd `pointer-events`, devient impossible à
       cliquer, et semble "se rétracter" juste au moment de cliquer un lien.
       .megamenu-open est ajoutée par header.js avec un court délai de grâce
       (mouseleave différé, annulé si la souris rentre à nouveau), ce qui
       comble cette zone morte sans dépendre uniquement du survol CSS.
    */
    /* Ouverture pilotée par header.js (intention de survol), jamais au
       :hover CSS instantané : un simple passage de la souris ne doit pas
       déplier le menu. */
    #custom-navbar .navbar-nav .nav-item.dropdown.show > .dropdown-menu.megamenu,
    #custom-navbar .navbar-nav .nav-item.dropdown.megamenu-open > .dropdown-menu.megamenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0) !important;
    }

    /* Le dernier menu ("Liens utiles") s'aligne sur la droite pour ne
       jamais sortir de l'écran */
    #custom-navbar .navbar-nav > li.nav-item:last-child .dropdown-menu.megamenu {
        left: auto !important;
        right: 0 !important;
        transform: translate(0, 6px) !important;
    }
    /* Le sélecteur cherchait ".nav-item.dropdown:hover" comme
       DESCENDANT de "li.nav-item:last-child", alors que ces classes sont
       portées par ce <li> lui-même (pas un enfant imbriqué) — la règle ne
       matchait donc jamais, et le menu restait décalé de 6px verticalement
       au survol. */
    #custom-navbar .navbar-nav > li.nav-item:last-child.show > .dropdown-menu.megamenu,
    #custom-navbar .navbar-nav > li.nav-item:last-child.megamenu-open > .dropdown-menu.megamenu {
        transform: translate(0, 0) !important;
    }

    #custom-navbar .megamenu .row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 30px !important;
        width: auto !important;
        margin: 0 !important;
    }

    #custom-navbar .megamenu .row > div {
        flex: 1 1 220px !important;
        max-width: 280px !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* Bouton de fermeture inutile en desktop (survol) */
    #custom-navbar .megamenu .btn-close {
        display: none !important;
    }

    /* Petite flèche pointant vers le menu, pour un rendu plus élégant */
    #custom-navbar .navbar-nav .dropdown-menu.megamenu::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: #fff;
        border-radius: 2px;
    }
    #custom-navbar .navbar-nav > li.nav-item:last-child .dropdown-menu.megamenu::before {
        left: auto;
        right: 28px;
        transform: rotate(45deg);
    }
}

/* Titres de colonnes + sous-sous-menu (ex: "Budget de l'État"), communs
   aux deux formats desktop/mobile */
#custom-navbar .megamenu strong {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

#custom-navbar .megamenu ul.list-unstyled {
    margin: 0 0 4px;
}

#custom-navbar .megamenu li.sub-menu {
    margin-top: 10px;
    padding-top: 10px;
}

#custom-navbar .megamenu li.sub-menu > strong {
    /* Même taille/graisse que les titres de colonne (hérité de
       ".megamenu strong") : seul l'espacement change pour un sous-titre. */
    margin-bottom: 6px;
}

#custom-navbar .megamenu li.sub-menu > ul.list-unstyled {
    padding-left: 14px;
    border-left: 2px solid rgba(0, 0, 0, .08);
}

/* ==========================================================================
   2) MOBILE / TABLETTE / PETIT LAPTOP (≤ 1399.98px) — menu hamburger en
      accordéon, sous-menus et sous-sous-menus lisibles, sans débordement
   ========================================================================== */
@media (max-width: 1399.98px) {
    /* Fond BLANC pour tout le panneau du menu déroulé. Seule la barre elle-même (fermée) reste bleue. */
    #custom-navbar .navbar-collapse {
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #FFFFFF;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 16px 40px rgba(16, 35, 63, 0.18);
        padding-bottom: 8px;
    }

    #custom-navbar .navbar-nav .nav-item {
        border-bottom: 1px solid rgba(16, 35, 63, .08);
    }
    #custom-navbar .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }

    #custom-navbar .navbar-nav .nav-link {
        padding: 14px 16px !important;
        color: #10233F !important;
    }

    #custom-navbar .navbar-nav .dropdown-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    /* Signe distinctif des sous-menus : badge rond coloré autour du chevron,
       pour repérer immédiatement quels items du menu en contiennent un
       (contrairement à un simple lien comme "Accueil").

       Assets/css/styles.css:2665 définit, sur ce même
       pseudo-élément ::after, un soulignement décoratif au survol
       (position:absolute, width:0→100%) via le sélecteur
       "#custom-navbar .navbar-nav .nav-item.dropdown .nav-link::after",
       plus spécifique (4 classes) que l'ancien sélecteur ici (2 classes) —
       il gagnait donc la cascade et le badge ne s'affichait jamais.
       Le sélecteur ci-dessous égale sa spécificité (4 classes), et cette
       feuille étant chargée après styles.css, elle l'emporte désormais.
       position/bottom/left sont explicitement réinitialisés pour ne rien
       laisser filtrer de cette règle concurrente. */
    #custom-navbar .navbar-nav .nav-item.dropdown .dropdown-toggle::after {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: static !important;
        content: '\f078' !important;
        font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free';
        font-weight: 900;
        border: none !important;
        font-size: .62rem;
        margin-left: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0;
        color: #FFFFFF;
        background-color: #1e5f8e !important;
        border-radius: 50% !important;
        transition: transform .3s ease, background-color .2s ease;
    }
    #custom-navbar .navbar-nav .nav-item.dropdown .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
        background-color: #D21F28 !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* Le sous-menu reste dans le flux normal (jamais en position absolute)
       et s'ouvre/se ferme avec une transition douce en hauteur */
    #custom-navbar .navbar-nav .dropdown-menu.megamenu {
        position: static !important;
        display: block !important;
        inset: auto !important;
        left: auto !important;
        /* Design-global.css impose `left: 50% !important` et
           `transform: translateX(-50%) !important` sur .dropdown-menu.megamenu
           SANS media query (donc actif aussi en mobile). Cette règle, chargée
           avant ce fichier, n'était jamais annulée ici : le sous-menu restait
           décalé d'une demi-largeur vers la gauche, sortant de l'écran. */
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 10px !important;
        background: #F5F7FA !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 0;
        overflow: hidden;
        padding: 0 14px !important;
        transition: max-height .35s ease, padding .35s ease;
    }

    #custom-navbar .navbar-nav .dropdown-menu.megamenu.show {
        max-height: 2000px;
        padding: 14px !important;
        margin-bottom: 8px !important;
    }

    #custom-navbar .megamenu .btn-close {
        display: none !important;
    }

    #custom-navbar .megamenu .row {
        display: block !important;
    }

    #custom-navbar .megamenu .row > div + div {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(16, 35, 63, .10);
    }

    #custom-navbar .megamenu strong,
    #custom-navbar .megamenu li.sub-menu > strong {
        color: #B8860B;
    }

    #custom-navbar .megamenu li.sub-menu > ul.list-unstyled {
        border-left-color: rgba(16, 35, 63, .14);
    }

    #custom-navbar .navbar-nav .dropdown-menu a {
        color: #10233F !important;
        padding: 8px 10px !important;
        border-radius: 8px;
    }

    #custom-navbar .navbar-nav .dropdown-menu a:hover {
        color: #1e5f8e !important;
        background: rgba(30, 95, 142, .08);
    }

    #custom-navbar .navbar-toggler {
        padding: 6px 8px;
    }

    #custom-navbar .navbar-toggler:focus {
        box-shadow: none;
    }

    /* Bouton de fermeture et bloc recherche/connexion/langue (visibles
       uniquement en mobile, tout en haut du panneau) : basculés en version
       sombre-sur-blanc, cohérente avec le nouveau fond blanc du panneau. */
    #custom-navbar .navbar-collapse .btn-close-white {
        filter: none;
    }

    #custom-navbar .navbar-mobile-actions {
        border-color: rgba(16, 35, 63, .10) !important;
    }

    #custom-navbar .navbar-mobile-actions a.text-white {
        color: #10233F !important;
    }
}

/* ==========================================================================
   3) MENU MOBILE — panneau pleine largeur, sans marge parasite
   ========================================================================== */

/* Bandeau blanc du haut : son contenu est masqué sous 768px (d-none d-md-flex)
   mais ses 14px de padding restaient affichés en bande grise au-dessus du menu. */
@media (max-width: 767.98px) {
    #top-header {
        display: none;
    }
}

@media (max-width: 1399.98px) {
    #custom-navbar {
        padding: 8px 0;
    }

    #custom-navbar .navbar-brand img {
        height: 52px !important;
    }

    /* Bouton du menu : trois traits, puis une croix une fois le menu ouvert.
       Remplace l'ancienne croix placée en haut du panneau, qui ajoutait une
       grande marge vide avant le premier lien. */
    #custom-navbar .navbar-toggler {
        width: 44px;
        height: 44px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        margin-left: auto;
    }

    #custom-navbar .navbar-toggler:active {
        background: rgba(255, 255, 255, .12);
    }

    #custom-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23fff' stroke-width='2.2' stroke-linecap='round' d='M8 8l14 14M22 8L8 22'/%3E%3C/svg%3E");
    }

    /* Panneau : bord à bord sous la barre, coins droits, défilement interne.
       Annule la carte arrondie avec marges (design-global.css). */
    #custom-navbar .navbar-collapse {
        margin: 8px calc(-1 * var(--bs-gutter-x, 1.5rem) * .5) -8px;
        padding: 6px 20px 20px;
        border-radius: 0;
        max-height: calc(100vh - 68px);
        max-height: calc(100dvh - 68px);
        box-shadow: 0 18px 30px rgba(16, 35, 63, .18);
        overscroll-behavior: contain;
    }

    #custom-navbar .navbar-collapse.collapsing {
        transition: height .25s ease;
    }

    /* Raccourcis : recherche + langue sur une ligne, suivi des réformes dessous */
    #custom-navbar .navbar-mobile-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px 12px;
        padding: 12px 0 16px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(16, 35, 63, .10);
    }

    #custom-navbar .navbar-mobile-recherche {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 0 14px;
        border-radius: 10px;
        background: #F2F4F7;
        color: #5B6778;
        font-size: .92rem;
        text-decoration: none;
    }

    #custom-navbar .navbar-mobile-recherche i {
        color: #10233F;
    }

    #custom-navbar .navbar-mobile-langue {
        position: relative;
    }

    #custom-navbar .navbar-mobile-langue .lang-switcher__toggle {
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid rgba(16, 35, 63, .14);
        border-radius: 10px;
        gap: 8px;
    }

    #custom-navbar .navbar-mobile-langue .lang-switcher__menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 190px;
        margin: 0;
        z-index: 5;
        box-shadow: 0 12px 28px rgba(16, 35, 63, .16);
    }

    #custom-navbar .navbar-mobile-suivi {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        border-radius: 10px;
        background: #C8202A;
        color: #fff;
        font-weight: 600;
        font-size: .92rem;
        text-decoration: none;
    }

    #custom-navbar .navbar-mobile-suivi:active {
        background: #A91B24;
    }

    /* Entrées du menu : lisibles, sans soulignement épais sur la page active */
    #custom-navbar .navbar-nav .nav-link {
        padding: 15px 2px !important;
        font-size: .9rem;
        font-weight: 600;
        letter-spacing: .03em;
        border-bottom: none !important;
    }

    #custom-navbar .navbar-nav .nav-link.active {
        color: #1e5f8e !important;
    }

    /* Chevron simple à la place des pastilles bleues */
    #custom-navbar .navbar-nav .nav-item.dropdown .dropdown-toggle::after,
    #custom-navbar .navbar-nav .nav-item.dropdown .dropdown-toggle[aria-expanded="true"]::after {
        width: 20px !important;
        height: 20px !important;
        background-color: transparent !important;
        color: #1e5f8e;
        font-size: .72rem;
    }

    #custom-navbar .navbar-nav .nav-item.dropdown .dropdown-toggle[aria-expanded="true"]::after {
        color: #C8202A;
    }

    #custom-navbar .navbar-nav .dropdown-menu a {
        display: block;
        padding: 10px 10px !important;
        font-size: .9rem;
    }

    /* Intitulés de colonnes du sous-menu : petits, discrets */
    #custom-navbar .megamenu .row strong,
    #custom-navbar .megamenu .col-md-6 strong,
    #custom-navbar .megamenu li.sub-menu > strong {
        font-size: .7rem !important;
        font-weight: 700;
        letter-spacing: .08em;
        color: #8A6408 !important;
        border: none !important;
        padding: 0 10px !important;
        margin: 4px 0 6px !important;
    }

    #custom-navbar .navbar-nav .dropdown-menu a.btn,
    #custom-navbar .navbar-nav .dropdown-menu a.btn:hover {
        color: #fff !important;
        background: #C8202A;
    }

    #custom-navbar .megamenu strong > a.btn {
        margin-top: 8px;
        display: inline-block;
        padding: 8px 16px !important;
        font-size: .8rem;
        letter-spacing: 0;
    }
}

/* Menu ouvert : les boutons flottants (assistant, visite guidée, badge
   reCAPTCHA) recouvraient les dernières entrées — masqués le temps du menu. */
body.menu-mobile-ouvert .chatbot,
body.menu-mobile-ouvert .visite-guidee-bouton,
body.menu-mobile-ouvert .grecaptcha-badge,
body.menu-mobile-ouvert .cookie-banner {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Colonnes générées dynamiquement par le découpage automatique du megamenu */
.megamenu-col {
    flex: 1 1 0 !important;
    max-width: 100% !important;
    width: auto !important;
    padding: 0 !important;
}

@media (min-width: 1400px) {
    #custom-navbar .megamenu.megamenu--cols-2 .megamenu-col {
        max-width: calc(50% - 15px) !important;
    }
    #custom-navbar .megamenu.megamenu--cols-3 .megamenu-col {
        max-width: calc(33.333% - 20px) !important;
    }
    #custom-navbar .megamenu.megamenu--cols-4 .megamenu-col {
        max-width: calc(25% - 22.5px) !important;
    }
}