/* =============================================================================
   Zone18 — Navigation jeu (desktop + base)
   Météo et administration : styles visuels dans css/style.css
   ============================================================================= */

nav.z18-nav-v3.z18-game-nav,
nav.z18-nav-v3 {
    --z18-nav-h: 48px;
    --z18-nav-y-offset: 5px;
    --z18-nav-red: #b22922;
    --z18-nav-red-light: #d64e47;
    --z18-nav-ink: #1f252e;
    --z18-nav-ink-soft: #3d4a59;
    --z18-nav-muted: #8492a6;
    --z18-nav-bar: linear-gradient(180deg, #2b3340 0%, #1e252e 55%, #171c24 100%);
    --z18-nav-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    --z18-nav-drop-shadow: 0 16px 40px rgba(15, 20, 28, .18), 0 0 0 1px rgba(15, 20, 28, .05);
    --z18-nav-ease: cubic-bezier(.22, 1, .36, 1);
    --z18-nav-speed: .2s;

    width: 100%;
    min-height: var(--z18-nav-h);
    height: auto;
    margin-top: calc(-1 * var(--z18-nav-h));
    background: var(--z18-nav-bar);
    border-top: 3px solid var(--z18-nav-red);
    border-bottom: 1px solid rgba(0, 0, 0, .55);
    box-shadow: var(--z18-nav-shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
    position: relative;
    z-index: 10000;
    isolation: isolate;
}

nav.z18-nav-v3::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 120% at 8% -30%, rgba(178, 41, 34, .22), transparent 55%),
        radial-gradient(ellipse 60% 100% at 92% 130%, rgba(58, 156, 255, .07), transparent 50%);
    z-index: 0;
}

nav.z18-nav-v3::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08) 20%, rgba(255, 255, 255, .08) 80%, transparent);
    z-index: 0;
}

nav.z18-nav-v3 .z18-nav-inner,
nav.z18-nav-v3 > .centered {
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* Reset conflits globaux style.css */
nav.z18-nav-v3 ul#main-nav,
nav.z18-nav-v3 #main-nav {
    float: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-height: calc(var(--z18-nav-h) - 3px) !important;
    margin: 0 !important;
    padding: var(--z18-nav-y-offset) 0 1px !important;
    list-style: none !important;
    background: transparent !important;
}

nav.z18-nav-v3 ul#main-nav > li,
nav.z18-nav-v3 #main-nav > li {
    position: relative;
    float: none !important;
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent !important;
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    text-transform: none;
}

/* —— Barre principale (hors météo / admin) —— */
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin) > a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: calc(var(--z18-nav-h) - 3px - var(--z18-nav-y-offset) - 1px);
    padding: 0 15px;
    color: rgba(255, 255, 255, .94);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.15;
    white-space: nowrap;
    transition:
        color var(--z18-nav-speed) var(--z18-nav-ease),
        background var(--z18-nav-speed) var(--z18-nav-ease);
}

/* Pas de flèches sur les entrées barre principale */
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin) > a[href="#"]::after,
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin) > a[href="#"] span::after {
    content: none !important;
    display: none !important;
}

nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin):hover > a,
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin).z18-menu-open > a {
    color: #fff !important;
    background: rgba(178, 41, 34, .42) !important;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .85);
}

/* Section courante — repasse souris : accent rouge, texte lisible */
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin).z18-nav-parent-active > a {
    color: #fff !important;
    background: rgba(178, 41, 34, .28) !important;
    box-shadow: inset 0 -2px 0 var(--z18-nav-red-light);
    animation: z18-nav-parent-active-glow 2.8s ease-in-out infinite;
}

nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin).z18-nav-parent-active:hover > a,
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin).z18-nav-parent-active.z18-menu-open > a {
    color: #fff !important;
    background: rgba(178, 41, 34, .58) !important;
    box-shadow: inset 0 -2px 0 #fff;
    animation: none;
}

nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin).z18-nav-parent-active > a::before,
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin).z18-nav-parent-active:hover > a::before,
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin).z18-nav-parent-active.z18-menu-open > a::before {
    opacity: 1;
}

nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin).z18-nav-parent-active > a::before {
    animation: z18-nav-active-icon-pulse 2.8s ease-in-out infinite;
}

nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin).z18-nav-parent-active:hover > a::before,
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin).z18-nav-parent-active.z18-menu-open > a::before {
    animation: none;
}

/* Icônes barre principale */
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin) > a::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    opacity: .88;
    background: currentColor;
    -webkit-mask: var(--z18-nav-icon) center / contain no-repeat;
    mask: var(--z18-nav-icon) center / contain no-repeat;
    transition: opacity var(--z18-nav-speed) ease;
}

nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin):hover > a::before,
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin).z18-menu-open > a::before {
    opacity: 1;
}

nav.z18-nav-v3 .z18-nav-home > a { --z18-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); }
nav.z18-nav-v3 .z18-nav-account > a { --z18-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5m0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5'/%3E%3C/svg%3E"); }
nav.z18-nav-v3 .z18-nav-career > a { --z18-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z'/%3E%3C/svg%3E"); }
nav.z18-nav-v3 .z18-nav-caserne > a { --z18-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 21V8l9-5 9 5v13H3m9-2h2v-4h-2v4m-4 0h2v-4H8v4m8 0h2v-4h-2v4'/%3E%3C/svg%3E"); }
nav.z18-nav-v3 .z18-nav-training > a,
nav.z18-nav-v3 .z18-nav-manoeuvre > a { --z18-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3L1 9l11 6 9-4.9V17h2V9L12 3m0 8.7L5 9.8V17l7 3.8 7-3.8V9.8L12 11.7'/%3E%3C/svg%3E"); }
nav.z18-nav-v3 .z18-nav-messages > a { --z18-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); }
nav.z18-nav-v3 .z18-nav-community > a { --z18-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3M8 11c1.7 0 3-1.3 3-3S9.7 5 8 5 5 6.3 5 8s1.3 3 3 3m0 2c-2.3 0-7 1.2-7 3.5V20h14v-1.5C15 14.2 10.3 13 8 13m8 0c-.3 0-.6 0-1 .1 1.2.8 2 2 2 3.4V20h6v-1.5c0-2.3-4.7-3.5-7-3.5'/%3E%3C/svg%3E"); }
nav.z18-nav-v3 .z18-nav-interventions > a { --z18-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2 13.5 6.5H18l-3.7 2.7 1.4 4.5L12 13.8 8.3 13.7l1.4-4.5L6 6.5h4.5L12 2'/%3E%3C/svg%3E"); }
nav.z18-nav-v3 .z18-nav-stats > a { --z18-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 9v10H3V9h2m6 4v6H9v-6h2m6-8v14h-2V5h2'/%3E%3C/svg%3E"); }

/* Lien direct sans sous-menu (Interventions simple) */
nav.z18-nav-v3 ul#main-nav > li.z18-nav-interventions > a[href*="interventions"]::before {
    -webkit-mask-image: var(--z18-nav-icon);
    mask-image: var(--z18-nav-icon);
}

nav.z18-nav-v3 ul#main-nav > li.z18-nav-messages > a {
    text-transform: none;
    letter-spacing: .02em;
    font-size: 12px;
}

nav.z18-nav-v3 ul#main-nav > li > a .z18-nav-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 2px;
    padding: 0 5px;
    color: #fff;
    background: var(--z18-nav-red);
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(178, 41, 34, .45);
    animation: z18-nav-badge-pulse 2.5s ease-in-out infinite;
}

nav.z18-nav-v3 ul#main-nav > li.z18-nav-messages:hover > a .z18-nav-counter,
nav.z18-nav-v3 ul#main-nav > li.z18-nav-messages.z18-nav-parent-active > a .z18-nav-counter {
    background: #fff;
    color: var(--z18-nav-red);
    border-color: var(--z18-nav-red);
}

@keyframes z18-nav-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes z18-nav-parent-active-glow {
    0%, 100% {
        box-shadow: inset 0 -2px 0 rgba(214, 78, 71, .72), 0 0 0 rgba(178, 41, 34, 0);
    }
    50% {
        box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .95), 0 0 16px rgba(178, 41, 34, .28);
    }
}

@keyframes z18-nav-active-icon-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 1; }
}

@keyframes z18-nav-link-active-shine {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.08); }
}

@keyframes z18-nav-link-active-dot {
    0%, 100% {
        transform: scale(1);
        opacity: .92;
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .45);
    }
    50% {
        transform: scale(1.18);
        opacity: 1;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
    }
}

/* —— Listes communes —— */
nav.z18-nav-v3 ul#main-nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

nav.z18-nav-v3 ul#main-nav ul li a.z18-nav-active {
    position: relative;
    color: #fff !important;
    background: linear-gradient(90deg, var(--z18-nav-red) 0%, #c93d35 100%) !important;
    box-shadow: inset 3px 0 0 var(--z18-nav-ink) !important;
    font-weight: 800;
    padding-right: 28px !important;
    animation: z18-nav-link-active-shine 2.6s ease-in-out infinite;
    overflow: hidden;
}

nav.z18-nav-v3 ul#main-nav ul li a.z18-nav-active::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    animation: z18-nav-link-active-dot 2.6s ease-in-out infinite;
}

nav.z18-nav-v3 ul#main-nav ul li:has(> ul) > a.z18-nav-active::after {
    right: 10px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border: 0;
    transform: none;
    animation: z18-nav-link-active-dot 2.6s ease-in-out infinite;
}

nav.z18-nav-v3 ul#main-nav ul li a.z18-nav-active:hover,
nav.z18-nav-v3 ul#main-nav ul li a.z18-nav-active:focus-visible {
    color: #fff !important;
    background: linear-gradient(90deg, #962019 0%, var(--z18-nav-red) 100%) !important;
    box-shadow: inset 3px 0 0 #fff !important;
    animation: none;
    filter: none;
}

nav.z18-nav-v3 ul#main-nav ul li a.z18-nav-active:hover::after,
nav.z18-nav-v3 ul#main-nav ul li a.z18-nav-active:focus-visible::after {
    animation: none;
    transform: scale(1.15);
    opacity: 1;
}

/* Séparateurs de section */
nav.z18-nav-v3 ul#main-nav .separation-menu {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e4e9ef;
}

nav.z18-nav-v3 ul#main-nav .separation-menu > a {
    display: block !important;
    min-height: 24px !important;
    padding: 3px 12px 4px !important;
    color: var(--z18-nav-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    pointer-events: none;
    cursor: default;
}

nav.z18-nav-v3 ul#main-nav .separation-menu:has(> ul) > a {
    pointer-events: auto;
    cursor: pointer;
}

nav.z18-nav-v3 ul#main-nav .separation-menu > a::before,
nav.z18-nav-v3 ul#main-nav .separation-menu > a::after {
    display: none !important;
    content: none !important;
}

/* Météo / admin : pas d'icônes génériques */
nav.z18-nav-v3 ul#main-nav > li.menu-meteo-item > a::before,
nav.z18-nav-v3 ul#main-nav > li.menu-admin-panel > a::before,
nav.z18-nav-v3 ul#main-nav > li.z18-nav-admin > a::before {
    display: none !important;
    content: none !important;
}

/* =============================================================================
   Desktop — panneaux déroulants
   ============================================================================= */
@media (min-width: 801px) {
    nav.z18-nav-v3 > .centered,
    nav.z18-nav-v3 > .z18-nav-inner {
        width: calc(100% - 32px) !important;
        max-width: 1240px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    nav.z18-nav-v3 ul#main-nav,
    nav.z18-nav-v3 #main-nav {
        width: 100%;
        padding-right: 136px;
        box-sizing: border-box;
        overflow: visible !important;
    }

    /* Utilitaires droite */
    nav.z18-nav-v3 ul#main-nav > li.menu-meteo-item {
        position: absolute !important;
        top: calc(7px + var(--z18-nav-y-offset)) !important;
        right: 54px !important;
        width: auto !important;
        min-width: 0 !important;
    }

    nav.z18-nav-v3 ul#main-nav:not(:has(> li.menu-admin-panel)):not(:has(> li.z18-nav-admin)) > li.menu-meteo-item {
        right: 10px !important;
    }

    nav.z18-nav-v3 ul#main-nav > li.menu-admin-panel,
    nav.z18-nav-v3 ul#main-nav > li.z18-nav-admin {
        position: absolute !important;
        top: calc(7px + var(--z18-nav-y-offset)) !important;
        right: 10px !important;
    }

    /* Pont invisible hover */
    nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 10px;
        display: none;
    }

    nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):hover::after,
    nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel).z18-menu-open::after {
        display: block;
    }

    /* Pas de losange rouge sous la barre (override style.css global) */
    nav.z18-nav-v3 #main-nav > li > ul::before,
    nav.z18-nav-v3 #main-nav > li:hover > ul::before,
    nav.z18-nav-v3 #main-nav > li.z18-menu-open > ul::before,
    nav.z18-nav-v3 ul#main-nav > li > ul::before,
    nav.z18-nav-v3 ul#main-nav > li:hover > ul::before,
    nav.z18-nav-v3 ul#main-nav > li.z18-menu-open > ul::before,
    nav.z18-nav-v3 ul#main-nav > li > ul:not(.menu-meteo-panel)::before {
        content: none !important;
        display: none !important;
    }

    /* Niveau 1 */
    nav.z18-nav-v3 ul#main-nav > li > ul:not(.menu-meteo-panel) {
        display: block !important;
        position: absolute;
        top: calc(100% + 2px);
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        min-width: 220px;
        max-width: 280px;
        padding: 8px;
        background: #fff;
        border: 1px solid rgba(15, 20, 28, .08);
        border-top: 3px solid var(--z18-nav-red);
        border-radius: 10px;
        box-shadow: var(--z18-nav-drop-shadow);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity var(--z18-nav-speed) var(--z18-nav-ease),
            transform var(--z18-nav-speed) var(--z18-nav-ease),
            visibility var(--z18-nav-speed) ease;
        z-index: 10001;
        box-sizing: border-box;
    }

    nav.z18-nav-v3 ul#main-nav > li:hover > ul:not(.menu-meteo-panel),
    nav.z18-nav-v3 ul#main-nav > li.z18-menu-open > ul:not(.menu-meteo-panel),
    nav.z18-nav-v3 ul#main-nav > li:focus-within > ul:not(.menu-meteo-panel) {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    nav.z18-nav-v3 ul#main-nav ul li {
        position: relative;
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 0;
        float: none !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
    }

    nav.z18-nav-v3 ul#main-nav ul li + li {
        margin-top: 2px;
    }

    nav.z18-nav-v3 ul#main-nav ul li a {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
        min-height: 34px;
        padding: 7px 12px;
        color: var(--z18-nav-ink-soft);
        background: transparent !important;
        border: 0 !important;
        border-radius: 7px !important;
        box-shadow: none !important;
        text-decoration: none;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.35;
        text-transform: none;
        letter-spacing: 0;
        white-space: normal;
        word-break: break-word;
        transition:
            background var(--z18-nav-speed) ease,
            color var(--z18-nav-speed) ease,
            box-shadow var(--z18-nav-speed) ease;
    }

    nav.z18-nav-v3 ul#main-nav ul li a::before {
        display: none !important;
        content: none !important;
    }

    nav.z18-nav-v3 ul#main-nav ul li a:hover:not(.z18-nav-active),
    nav.z18-nav-v3 ul#main-nav ul li.z18-menu-open > a:not(.z18-nav-active),
    nav.z18-nav-v3 ul#main-nav ul li a:focus-visible:not(.z18-nav-active) {
        color: var(--z18-nav-ink) !important;
        background: #f3f5f8 !important;
        box-shadow: inset 3px 0 0 var(--z18-nav-red);
    }

    nav.z18-nav-v3 ul#main-nav ul li:has(> ul) > a {
        padding-right: 28px;
    }

    nav.z18-nav-v3 ul#main-nav ul li:has(> ul) > a::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 6px;
        height: 6px;
        margin-top: -3px;
        border-top: 2px solid #94a3b8;
        border-right: 2px solid #94a3b8;
        transform: rotate(45deg);
        transition: border-color var(--z18-nav-speed) ease, transform var(--z18-nav-speed) ease;
    }

    nav.z18-nav-v3 ul#main-nav ul li:hover > a::after,
    nav.z18-nav-v3 ul#main-nav ul li.z18-menu-open > a::after {
        border-color: var(--z18-nav-red);
    }

    /* Masquer sous-niveaux fermés */
    nav.z18-nav-v3 ul#main-nav li:hover > ul ul,
    nav.z18-nav-v3 ul#main-nav li.z18-menu-open ul li:not(.z18-menu-open) > ul {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Niveau 2 — flyout */
    nav.z18-nav-v3 ul#main-nav ul ul,
    nav.z18-nav-v3 ul#main-nav ul ul ul {
        display: block !important;
    }

    nav.z18-nav-v3 ul#main-nav ul ul {
        position: absolute;
        top: -4px;
        left: calc(100% + 4px);
        min-width: 210px;
        max-width: 260px;
        padding: 8px;
        background: #f8fafc;
        border: 1px solid rgba(15, 20, 28, .08);
        border-left: 3px solid var(--z18-nav-red);
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(10, 15, 22, .14);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(6px);
        transition:
            opacity var(--z18-nav-speed) var(--z18-nav-ease),
            transform var(--z18-nav-speed) var(--z18-nav-ease),
            visibility var(--z18-nav-speed) ease;
        z-index: 10002;
    }

    nav.z18-nav-v3 ul#main-nav ul ul::before,
    nav.z18-nav-v3 ul#main-nav ul ul ul::before {
        content: none !important;
        display: none !important;
    }

    nav.z18-nav-v3 ul#main-nav ul li:hover > ul,
    nav.z18-nav-v3 ul#main-nav ul li.z18-menu-open > ul,
    nav.z18-nav-v3 ul#main-nav ul li:focus-within > ul {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    nav.z18-nav-v3 ul#main-nav ul ul li a {
        min-height: 32px;
        padding: 6px 12px;
        font-size: 11.5px;
        color: #475569;
    }

    nav.z18-nav-v3 ul#main-nav ul ul li a:hover {
        background: #eef2f6 !important;
        color: var(--z18-nav-ink);
    }

    /* Niveau 3 */
    nav.z18-nav-v3 ul#main-nav ul ul ul {
        background: #f1f4f8;
        border-left-color: var(--z18-nav-red-light);
    }

    nav.z18-nav-v3 ul#main-nav ul ul ul li a {
        font-size: 11px;
        min-height: 30px;
        padding: 5px 12px;
    }

    /* Météo — positionnement panneau uniquement */
    nav.z18-nav-v3 ul#main-nav > li.menu-meteo-item > ul.menu-meteo-panel {
        display: block !important;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        left: auto;
        transform: translateY(8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity var(--z18-nav-speed) var(--z18-nav-ease),
            transform var(--z18-nav-speed) var(--z18-nav-ease),
            visibility var(--z18-nav-speed) ease;
        z-index: 10003;
    }

    nav.z18-nav-v3 ul#main-nav > li.menu-meteo-item > ul.menu-meteo-panel::before {
        display: none;
    }

    nav.z18-nav-v3 ul#main-nav > li.menu-meteo-item:hover > ul.menu-meteo-panel,
    nav.z18-nav-v3 ul#main-nav > li.menu-meteo-item.z18-menu-open > ul.menu-meteo-panel,
    nav.z18-nav-v3 ul#main-nav > li.menu-meteo-item:focus-within > ul.menu-meteo-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Neutralise les anciens styles globaux style.css sur les sous-menus */
    nav.z18-nav-v3 ul#main-nav li:hover li a,
    nav.z18-nav-v3 ul#main-nav li.z18-menu-open li a,
    nav.z18-nav-v3 ul#main-nav li.iehover li a {
        color: var(--z18-nav-ink-soft) !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    nav.z18-nav-v3 ul#main-nav li:hover li a.z18-nav-active,
    nav.z18-nav-v3 ul#main-nav li.z18-menu-open li a.z18-nav-active,
    nav.z18-nav-v3 ul#main-nav li.iehover li a.z18-nav-active {
        color: #fff !important;
        background: linear-gradient(90deg, var(--z18-nav-red) 0%, #c93d35 100%) !important;
        box-shadow: inset 3px 0 0 var(--z18-nav-ink) !important;
    }

    nav.z18-nav-v3 ul#main-nav li:hover li a:hover:not(.z18-nav-active),
    nav.z18-nav-v3 ul#main-nav li.z18-menu-open li a:hover:not(.z18-nav-active),
    nav.z18-nav-v3 ul#main-nav ul li:hover > a:not(.z18-nav-active),
    nav.z18-nav-v3 ul#main-nav ul li a:hover:not(.z18-nav-active) {
        color: var(--z18-nav-ink) !important;
        background: #f3f5f8 !important;
        border-color: transparent !important;
        box-shadow: inset 3px 0 0 var(--z18-nav-red) !important;
    }

    nav.z18-nav-v3 ul#main-nav ul ul li a.z18-nav-active:hover {
        color: #fff !important;
        background: linear-gradient(90deg, #962019 0%, var(--z18-nav-red) 100%) !important;
        box-shadow: inset 3px 0 0 #fff !important;
    }
}

/* Barre principale — annule style.css legacy (fond blanc / texte illisible) */
nav.z18-nav-v3 ul#main-nav > li:hover > a,
nav.z18-nav-v3 ul#main-nav > li > a:hover,
nav.z18-nav-v3 ul#main-nav .pull-down:hover > a {
    border-color: transparent !important;
    text-shadow: none !important;
}

nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin):not(.z18-nav-parent-active):hover > a,
nav.z18-nav-v3 ul#main-nav > li:not(.menu-meteo-item):not(.menu-admin-panel):not(.z18-nav-admin):not(.z18-nav-parent-active).z18-menu-open > a {
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .35);
}

@media (prefers-reduced-motion: reduce) {
    nav.z18-nav-v3 ul#main-nav > li.z18-nav-parent-active > a,
    nav.z18-nav-v3 ul#main-nav > li.z18-nav-parent-active > a::before,
    nav.z18-nav-v3 ul#main-nav ul li a.z18-nav-active,
    nav.z18-nav-v3 ul#main-nav ul li a.z18-nav-active::after {
        animation: none !important;
    }
}