/*
 * Fix Hamburger Arrow Right 0348d677 — v2.0.0
 * 1. Centrage du texte des items de menu
 * 2. Flèche/toggle à droite via position absolute
 * 3. Visibilité immédiate des boutons +/-
 */

@media (max-width: 1024px) {

    /* ═══════════════════════════════════════════════
       1. CENTRAGE GLOBAL — texte centré, li en relative
    ═══════════════════════════════════════════════ */

    .elementor-nav-menu--dropdown .elementor-nav-menu,
    .elementor-nav-menu--dropdown ul.elementor-nav-menu {
        width: 100% !important;
    }

    /* Chaque li : position relative pour ancrer les toggles absolus */
    .elementor-nav-menu--dropdown .elementor-nav-menu > li,
    .elementor-nav-menu--dropdown ul.sub-menu > li {
        position: relative !important;
        width: 100% !important;
        list-style: none !important;
    }

    /* Tous les liens : texte centré avec padding symétrique pour laisser place au toggle */
    .elementor-nav-menu--dropdown .elementor-nav-menu > li > a,
    .elementor-nav-menu--dropdown .elementor-nav-menu > li > .elementor-item,
    .elementor-nav-menu--dropdown ul.sub-menu > li > a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding-left: 48px !important;
        padding-right: 48px !important;
        box-sizing: border-box !important;
    }

    /* Sous-menus */
    .elementor-nav-menu--dropdown ul.sub-menu {
        width: 100% !important;
        text-align: center !important;
    }

    /* ═══════════════════════════════════════════════
       2. TOGGLE À DROITE — position absolute sur le li
    ═══════════════════════════════════════════════ */

    /* Toggle natif Elementor (.elementor-item-toggle) — à droite du li */
    .elementor-nav-menu--dropdown li.menu-item-has-children > a > .elementor-item-toggle,
    .elementor-nav-menu--dropdown li.menu-item-has-children > a > i.sub-arrow,
    .elementor-nav-menu--dropdown li.menu-item-has-children > a > span.sub-arrow,
    .elementor-nav-menu--dropdown li.menu-item-has-children > a > .sub-arrow {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        color: #39FF14 !important;
        font-size: 1.1rem !important;
        font-weight: bold !important;
        background: rgba(57,255,20,0.10) !important;
        border-radius: 50% !important;
        border: 1px solid rgba(57,255,20,0.35) !important;
        cursor: pointer !important;
        z-index: 30 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Empêche le toggle d'être écrasé par flex justify-content */
    .elementor-nav-menu--dropdown li.menu-item-has-children > a {
        display: block !important;
        position: relative !important;
        text-align: center !important;
    }

    /* Boutons +/- injectés par JS (autres snippets) */
    .elementor-nav-menu--dropdown li.menu-item-has-children > .angie-sub-toggle,
    .elementor-nav-menu--dropdown li.menu-item-has-children > button.sub-toggle,
    .elementor-nav-menu--dropdown li.menu-item-has-children > span.sub-toggle,
    .elementor-nav-menu--dropdown li.menu-item-has-children > .toggle-sub-menu,
    li.menu-item-has-children > .angie-sub-toggle,
    li.menu-item-has-children > button.sub-toggle,
    li.menu-item-has-children > span.sub-toggle,
    li.menu-item-has-children > .toggle-sub-menu {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 34px !important;
        height: 34px !important;
        color: #39FF14 !important;
        font-size: 1.2rem !important;
        font-weight: bold !important;
        background: rgba(57,255,20,0.10) !important;
        border-radius: 50% !important;
        border: 1px solid rgba(57,255,20,0.35) !important;
        cursor: pointer !important;
        z-index: 30 !important;
        margin: 0 !important;
    }

    /* ═══════════════════════════════════════════════
       3. PSEUDO-ELEMENT ::after utilisé comme flèche
    ═══════════════════════════════════════════════ */

    .elementor-nav-menu--dropdown li.menu-item-has-children > a::after {
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }
}