/* ============================================================
   1. LOGIQUE DE COULEURS (COMMUNE TOUS ÉCRANS)
   Cible les classes 'nav-pole-...'
   ============================================================ */

/* --- COULEURS DES BARRES ET DU TEXTE --- */

/* Média (Rose) */
.elementor-nav-menu li.nav-pole-media > a::before { background-color: #E52C9A; }
.elementor-nav-menu li.nav-pole-media:hover > a,
.elementor-nav-menu li.nav-pole-media.current-menu-item > a,
.elementor-nav-menu li.nav-pole-media.elementor-item-active > a { color: #E52C9A !important; }

/* Insertion (Violet) */
.elementor-nav-menu li.nav-pole-insertion > a::before { background-color: #9A4FB2; }
.elementor-nav-menu li.nav-pole-insertion:hover > a,
.elementor-nav-menu li.nav-pole-insertion.current-menu-item > a,
.elementor-nav-menu li.nav-pole-insertion.elementor-item-active > a { color: #9A4FB2 !important; }

/* Éducation (Cyan) */
.elementor-nav-menu li.nav-pole-education > a::before { background-color: #12BAC6; }
.elementor-nav-menu li.nav-pole-education:hover > a,
.elementor-nav-menu li.nav-pole-education.current-menu-item > a,
.elementor-nav-menu li.nav-pole-education.elementor-item-active > a { color: #12BAC6 !important; }

/* Événement (Vert) */
.elementor-nav-menu li.nav-pole-event > a::before { background-color: #95C11F; }
.elementor-nav-menu li.nav-pole-event:hover > a,
.elementor-nav-menu li.nav-pole-event.current-menu-item > a,
.elementor-nav-menu li.nav-pole-event.elementor-item-active > a { color: #95C11F !important; }

/* Coopération (Jaune) */
.elementor-nav-menu li.nav-pole-coop > a::before { background-color: #F2C300; }
.elementor-nav-menu li.nav-pole-coop:hover > a,
.elementor-nav-menu li.nav-pole-coop.current-menu-item > a,
.elementor-nav-menu li.nav-pole-coop.elementor-item-active > a { color: #F2C300 !important; }


/* ============================================================
   2. VERSION ORDINATEUR (Desktop > 1024px)
   Stabilisation, Barre au survol et Fond Gris
   ============================================================ */

@media (min-width: 1025px) {
    /* Stabilisation du panneau blanc */
    .elementor-nav-menu .sub-menu {
        min-width: 220px !important;
        width: max-content !important;
        box-sizing: border-box !important;
    }

    /* Configuration des liens (État Stable) */
    .elementor-nav-menu li[class*="nav-pole-"] > a {
        position: relative;
        padding-left: 30px !important; /* Padding fixe pour anticiper la barre */
        transition: background-color 0.3s ease, color 0.3s ease;
        white-space: nowrap !important;
    }

    /* Création de la barre (::before) */
    .elementor-nav-menu li[class*="nav-pole-"] > a::before {
        content: "";
        position: absolute;
        left: 5px; top: 10px; bottom: 10px;
        width: 0; /* Invisible au repos */
        border-radius: 5px;
        transition: width 0.3s ease-in-out;
    }

    /* Fond gris + Barre au Survol / Actif */
    .elementor-nav-menu li[class*="nav-pole-"]:hover > a,
    .elementor-nav-menu li[class*="nav-pole-"].current-menu-item > a,
    .elementor-nav-menu li[class*="nav-pole-"].elementor-item-active > a {
        background-color: #f2f2f2 !important;
        border-radius: 4px;
        padding-left: 30px !important; /* On ne bouge pas le texte */
    }

    .elementor-nav-menu li[class*="nav-pole-"]:hover > a::before,
    .elementor-nav-menu li[class*="nav-pole-"].current-menu-item > a::before,
    .elementor-nav-menu li[class*="nav-pole-"].elementor-item-active > a::before {
        width: 10px !important;
    }
}


/* ============================================================
   3. VERSION MOBILE & TABLETTE (max-width: 1024px)
   Pleine largeur, Barre permanente et Zéro décalage
   ============================================================ */

@media (max-width: 1024px) {
    
    /* --- STRUCTURE FULL WIDTH --- */
    .elementor-widget-nav-menu { position: static !important; }
    
    #kaina-header-wrapper, #kaina-header-main, .elementor-location-header {
        overflow: visible !important;
        max-height: none !important;
    }

    .elementor-nav-menu--dropdown {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100vw !important;
        max-height: calc(100vh - var(--h-main) - 20px) !important;
        overflow-y: auto !important;
        background-color: #ffffff !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
        border: none !important;
        z-index: 999999 !important;
    }

    /* --- L'ASSOCIATION / CONTACT (Niveau 1) --- */
    .elementor-nav-menu--dropdown .elementor-item,
    .elementor-nav-menu--dropdown .elementor-item:hover,
    .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
        justify-content: flex-start !important;
        padding-left: 20px !important; 
        padding-right: 20px !important;
        min-height: 50px;
        border-bottom: 1px solid #f2f2f2;
        margin: 0 !important; /* Anti-décalage */
    }

    /* --- SOUS-MENUS PÔLES (Avec Gélules permanentes) --- */
    #kaina-header-wrapper .elementor-nav-menu--dropdown ul.sub-menu li a.elementor-sub-item {
        position: relative !important;
        padding-left: 55px !important; /* Indentation fixe pour la barre */
        margin: 0 !important;
        width: 100% !important;
        background-color: rgba(0,0,0,0.02) !important;
        justify-content: flex-start !important;
        transition: background-color 0.3s ease;
    }

    /* Fond gris actif sur mobile */
    .elementor-nav-menu--dropdown a.elementor-item-active,
    .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
        background-color: #f2f2f2 !important;
    }

    /* Affichage forcé de la barre sur Mobile */
    .elementor-nav-menu--dropdown li[class*="nav-pole-"] > a::before {
        content: "" !important;
        position: absolute !important;
        display: block !important;
        left: 20px !important; /* Positionnée dans le padding de 55px */
        top: 10px !important;
        bottom: 10px !important;
        width: 10px !important;
        border-radius: 5px !important;
        opacity: 1 !important;
    }

    /* --- SOUS-MENU STRUCTURE --- */
    .elementor-nav-menu--dropdown .sub-menu {
        position: relative !important;
        width: 100% !important;
        max-height: none !important;
        visibility: visible !important;
    }

    .elementor-nav-menu--dropdown .sub-arrow {
        margin-left: auto !important;
        padding: 10px !important;
    }
}

/* --- OPTIMISATION PETITS MOBILES (767px) --- */
@media (max-width: 767px) {
    .elementor-nav-menu--dropdown .elementor-item { padding-left: 15px !important; }
    #kaina-header-wrapper .elementor-nav-menu--dropdown ul.sub-menu li a.elementor-sub-item { padding-left: 45px !important; }
    .elementor-nav-menu--dropdown li[class*="nav-pole-"] > a::before { left: 15px !important; }
}