/**
 * Oguey Mega Menu — Frontend styles (v2.0.9)
 *
 * Fix critique : le panel est en `display: none` quand fermé, pour qu'il
 * ne bloque PAS les clics sur les éléments derrière (hero, boutons, etc.)
 * pendant qu'il est invisible. Les transitions sont gérées différemment :
 * on utilise une animation @keyframes pour fade-in à l'ouverture, et la
 * fermeture est instantanée (display:none direct).
 */

/* ============================================
   MOBILE / TABLETTE (≤ 1024px) — PLUGIN INACTIF
   ============================================ */

@media (max-width: 1024px) {
    .oguey-mega-panel,
    .oguey-mega-panel *,
    .oguey-mega-panel__inner,
    .oguey-mega-panel__grid,
    .oguey-mega-col,
    .oguey-mega-col__icon,
    .oguey-mega-col__icon svg,
    .oguey-mega-col__title,
    .oguey-mega-col__links,
    .oguey-mega-col__links li,
    .oguey-mega-col__links a {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .menu-item.oguey-mega-root > a > .oguey-mega-chevron {
        display: none !important;
    }
}


/* ============================================
   DESKTOP UNIQUEMENT (≥ 1025px)
   ============================================ */

@media (min-width: 1025px) {

    /* --- 1. ROOT ITEM — chevron --- */

    .menu-item.oguey-mega-root > a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px;
    }

    .oguey-mega-chevron {
        display: inline-flex;
        align-items: center;
        margin-left: 4px;
        transition: transform 250ms ease;
        flex-shrink: 0;
    }
    .oguey-mega-chevron svg { display: block; }

    .menu-item.oguey-mega-root.is-open > a .oguey-mega-chevron,
    .menu-item.oguey-mega-root:focus-within > a .oguey-mega-chevron,
    .menu-item.oguey-mega-root:hover > a .oguey-mega-chevron {
        transform: rotate(180deg);
    }

    .menu-item.oguey-mega-root > a > .sub-arrow,
    .menu-item.oguey-mega-root > a > .fa-svg-chevron-down,
    .menu-item.oguey-mega-root > a > .wb-chevron-down-mini {
        display: none !important;
    }


    /* --- 2. SOUS-MENU ORIGINAL — visually hidden --- */

    .menu-item.oguey-mega-root > ul.sub-menu.oguey-mega-original-sub,
    .menu-item.oguey-mega-root > ul.elementor-nav-menu--dropdown.oguey-mega-original-sub {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        display: block !important;
    }


    /* --- 3. MEGA PANEL — display:none quand fermé --- */

    /* État FERMÉ (par défaut) : display:none = pas dans le rendu, ne bloque rien */
    .oguey-mega-panel {
        display: none;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80vw;
        max-width: 1280px;
        z-index: 9999;
        background: #FFFFFF;
        box-shadow: 0 16px 40px rgba(8, 35, 81, 0.15);
        border-radius: 0 0 8px 8px;
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
        font-family: 'Raleway', system-ui, sans-serif;
        color: #464646;
    }

    /* État OUVERT : display:block + animation fade-in */
    .oguey-mega-panel.is-open {
        display: block;
        animation: oguey-mega-fade-in 240ms ease forwards;
    }

    @keyframes oguey-mega-fade-in {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    /* Bridge invisible PLEINE LARGEUR au-dessus du panel — UNIQUEMENT quand ouvert */
    .oguey-mega-panel.is-open::before {
        content: '';
        position: fixed;
        top: var(--oguey-mm-bridge-top, 0);
        left: 0;
        right: 0;
        width: 100vw;
        height: var(--oguey-mm-bridge-height, 30px);
        background: transparent;
        pointer-events: auto;
        z-index: 9998;
    }

    .oguey-mega-panel__inner {
        width: 100%;
        margin: 0 auto;
        padding: 40px clamp(32px, 4vw, 56px);
        box-sizing: border-box;
    }


    /* --- 4. GRILLE 4 colonnes × 2 lignes --- */

    .oguey-mega-panel__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 32px;
        row-gap: 28px;
        align-items: start;
        width: 100%;
        margin: 0 auto;
        list-style: none;
        padding: 0;
    }


    /* --- 5. COLONNE --- */

    .oguey-mega-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .oguey-mega-col__icon {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        height: 56px;
        flex-shrink: 0;
        color: #143F84;
    }
    .oguey-mega-col__icon svg {
        display: block;
        height: auto;
        width: auto;
        max-height: 56px;
        max-width: 80px;
        color: inherit;
    }

    .oguey-mega-col--no-icon::before {
        content: '';
        display: block;
        width: 100%;
        height: 56px;
        flex-shrink: 0;
    }

    .oguey-mega-col__icon + .oguey-mega-col__title,
    .oguey-mega-col--no-icon::before + .oguey-mega-col__title {
        margin-top: 40px !important;
    }

    .oguey-mega-col__title {
        font-family: 'Raleway', system-ui, sans-serif !important;
        font-weight: 700 !important;
        font-size: 17px !important;
        line-height: 24px !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        color: #143F84 !important;
        text-decoration: none !important;
        transition: opacity 200ms ease;
        margin: 0;
        padding: 0;
        display: block;
        width: 100%;
    }
    .oguey-mega-col__title:hover,
    .oguey-mega-col__title:focus {
        opacity: 0.75;
        color: #143F84 !important;
    }
    .oguey-mega-col__title .sub-arrow,
    .oguey-mega-col__title .fa-svg-chevron-down,
    .oguey-mega-col__title .wb-chevron-down-mini,
    .oguey-mega-col__title i {
        display: none !important;
    }


    /* --- 6. LIENS ENFANTS --- */

    .oguey-mega-col__title + .oguey-mega-col__links {
        margin-top: 10px !important;
    }

    .oguey-mega-col__links {
        list-style: none !important;
        margin: 0;
        padding: 0;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 100%;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-shadow: none !important;
        background: transparent !important;
        border: 0 !important;
    }
    .oguey-mega-col__links li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: block !important;
    }
    .oguey-mega-col__links li::before,
    .oguey-mega-col__links li::marker {
        content: none !important;
        display: none !important;
    }
    .oguey-mega-col__links a {
        font-family: 'Raleway', system-ui, sans-serif !important;
        font-weight: 500 !important;
        font-size: 15px !important;
        line-height: 26px !important;
        color: #464646 !important;
        text-decoration: none !important;
        transition: color 200ms ease;
        display: inline-block !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        background: transparent !important;
        padding: 0 !important;
    }
    .oguey-mega-col__links a:hover,
    .oguey-mega-col__links a:focus {
        color: #143F84 !important;
    }


    /* --- 7. RESPONSIVE --- */

    @media (max-width: 1280px) {
        .oguey-mega-panel { width: 90vw; }
        .oguey-mega-panel__grid {
            column-gap: 24px;
            row-gap: 24px;
        }
        .oguey-mega-panel__inner { padding: 32px 24px; }
        .oguey-mega-col__title { font-size: 16px !important; }
        .oguey-mega-col__links a { font-size: 14px !important; line-height: 24px !important; }
    }


    /* --- 8. REDUCED MOTION --- */

    @media (prefers-reduced-motion: reduce) {
        .oguey-mega-panel.is-open {
            animation: none !important;
        }
        .oguey-mega-chevron,
        .oguey-mega-col__title,
        .oguey-mega-col__links a {
            transition: none !important;
        }
    }

}
/* FIN @media (min-width: 1025px) */