/**
 * Navigation Custom
 * Grandes lignes - à customiser
 */

/* ========================================
   NAVIGATION PRINCIPALE
   ======================================== */

.custom-nav {
    position: relative;
    width: 100%;
    padding: 20px 2rem 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transition sur la section Divi */
.custom-divi-nav {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* État sticky */
.custom-divi-nav.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.custom-divi-nav.is-sticky .custom-nav__logo {
    width: 200px;
    top: 30px;
}

.custom-nav__container {
    display: grid;
    grid-auto-flow: column; /* Items en ligne */
    grid-template-rows: 80px;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

/* ========================================
   MENU
   ======================================== */

.custom-nav__menu {
    display: contents; /* Les li deviennent des grid items directs */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Items du menu */
.nav-item {
    list-style: none;
}

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: #92B9C7;
}

/* Icône SVG au-dessus */
.nav-icon {
    width: 30px;
    height: 30px;
    display: block;
}



.menu-item-who-are-we .nav-icon::before {
    /*content: url('/wp-content/themes/neuhauser/shortcodes/navigation/assets/svg/home.svg');*/
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 31'%3E%3Cpath fill='%2392b9c7' stroke='%2392b9c7' d='M10.5 5.4c1.4-2.8 4.8-3.8 7.6-2.4 1 .5 1.8 1.4 2.4 2.4.1.3.4.5.7.5.3 0 .6 0 .8-.3 1.3-1.6 3.7-1.8 5.3-.4.8.7 1.3 1.7 1.3 2.8 0 .2 0 .5 0 .7h0c-.4 1.9-.9 3.7-1.5 5.5-.7 2-1.4 4-1.8 5 0 0 0 .1-.2.1h-2.6l1.5-8.3c.1-.5-.2-1-.7-1.1-.5-.1-1 .2-1.1.7 0 0 0 0 0 0l-1.5 8.4c0 0 0 .1 0 .2h-4.1v-10.3c0-.5-.4-1-.9-1s-1 .4-1 .9c0 0 0 0 0 0v10.3h-4.1c0 0 0-.1 0-.2l-1.5-8.4c-.1-.5-.6-.8-1.1-.7-.5.1-.8.6-.7 1.1l1.5 8.3h-2.7c0 0-.1 0-.2-.1-.4-1-1.1-2.9-1.8-5-.6-1.8-1.2-3.6-1.5-5.5h0c0-.3 0-.5 0-.7 0-2.1 1.7-3.8 3.7-3.8 1.1 0 2.1.5 2.9 1.3.3.4.9.4 1.3.1 0 0 .2-.2.2-.3h0ZM15.5.5c-2.4 0-4.6 1.1-6 3-2.5-1.9-6-1.4-7.9 1.1-.7 1-1.1 2.2-1.1 3.4 0 .3 0 .7 0 1 .4 2 .9 3.9 1.6 5.8.7 2.1 1.4 4 1.8 5 .3.8 1.1 1.3 1.9 1.3h19.1c.8 0 1.6-.5 1.9-1.3.4-1 1.1-3 1.8-5 .7-1.9 1.2-3.8 1.6-5.8.6-3.1-1.5-6-4.5-6.5-1.5-.3-3.1 0-4.4 1-1.4-1.9-3.6-3-6-3M4.3 23v3.8c0 2.1 1.7 3.8 3.7 3.8h15c2.1 0 3.7-1.7 3.8-3.8v-3.8h-1.9v3.8c0 1-.8 1.9-1.9 1.9 0 0 0 0 0 0h-15c-1 0-1.9-.8-1.9-1.9 0 0 0 0 0 0v-3.8h-1.9Z'/%3E%3C/svg%3E");

    /* OU avec un SVG inline :
    content: url('data:image/svg+xml;utf8,<svg>...</svg>');
    */
}

/* Exemple pour "menu-item-contact" : */
.menu-item-gammes .nav-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46.5 22.5'%3E%3Cpath fill='%2392b9c7' stroke='%2392b9c7' d='M21.5.5c3.1-.2 7.5.5 9.9 2.7.7.6 1.1 1.7 1.7 2.2 1.6 1.3 5.3 2.2 6.1 4.7.2.6 0 1.4.2 1.7.1.2 2.8 1.9 3.4 2.3 1.7 1.5 5.3 6.4 1.7 7.6-1.6.5-5 0-6.8-.3-1.3-.3-2.7-1.1-3.9-1.2-4.7-.4-11 0-15.8 0-1.7 0-3.9-.2-5.6 0-1 .1-2.5.9-3.7 1.2-1.7.4-5 .8-6.6.3-3.5-1-.4-5.8 1.2-7.3.6-.6 3.6-2.5 3.7-2.7.2-.3 0-1.1.2-1.7.4-1.2 2.2-2.5 3.3-3.2 1-.6 3.5-1.5 4-2 .3-.3.5-1.2.9-1.7 1.4-1.9 3.8-2.5 6-2.6M21.3 2.6c-2.1.2-4.3.7-5.2 2.8l3.5 12.8h6.7s.3-.3.3-.3c1.1-3.4 2.7-6.7 3.8-10.1.4-1.2 1-2.1-.1-3-2.2-1.9-6.2-2.4-9-2.2M12.1 18.4h5.8l-3.1-11.3c-1.3.4-6 2.8-6.2 4-.4 1.5 2.5 6 3.5 7.3M28.3 18.4h6c1-1.3 3.8-5.7 3.6-7.2-.2-.9-4.7-3.9-5.6-3.8l-3.9 11ZM2.1 19.8c2.1.2 5.9.2 7.7-.7.2 0 .5-.1.4-.4-.5-.8-1-1.6-1.5-2.4-.3-.5-1-2.4-1.4-2.4-1.2.1-5.7 4.2-5.3 5.9M38.8 13.9l-2.6 5c.4.6 7.2 1.5 8.2.7.2-.3-1-2.1-1.2-2.4-.5-.6-3.7-3.4-4.3-3.3'/%3E%3C/svg%3E");
}

.menu-item-engagements .nav-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.1 27.8'%3E%3Cpath fill='%2395bcc7' stroke='%2395bbc7' d='M35 1.6c-9.8-1.1-17.5.7-22 5.2-1.1 1.1-2.1 2.4-2.8 3.8-1.1-2.1-2.7-3.9-4.6-5.3-.3-.2-.8-.1-1 .2-.2.3-.2.7.1 1 0 0 3.5 2.7 4.5 5.8 0 0 0 .1 0 .2-.8 2.3-1.1 4.7-.9 7.1-1.9 2.1-3.5 4.3-5 6.7-.2.3 0 .8.3 1 .3.2.8 0 1-.2 3.7-5.9 8.7-11 14.5-14.9 2.4-1.7 5-3 7.8-4.1.4-.1.6-.6.5-.9-.1-.4-.6-.6-.9-.5-2.8 1.1-5.6 2.5-8.1 4.3-3.1 2.1-5.9 4.4-8.5 7.1 0-3.8 1.5-7.4 4.2-10.1 4.2-4 11.1-5.7 20.2-4.8-.2 2-.5 4-1.1 6-1.7 6-4.5 9.1-6.5 10.7-3.7 2.8-8.6 3.6-14.5 2.1-.4 0-.8.2-.9.5 0 .4.2.8.5.9 1.9.5 3.9.7 5.9.7 3.5 0 7-1 9.9-3.2 3.2-2.5 5.6-6.4 7-11.5.6-2.3 1-4.6 1.2-6.9 0-.4-.3-.7-.7-.8M6.3 16.6c.3.2.8.2 1-.1.2-.3.2-.8-.1-1-2.9-2.2-4.7-5.4-5.1-9-.2-1.5-.2-3 0-4.5 2.6.2 5.1 1 7.3 2.3.9.5 1.6 1.1 2.3 1.9.2.3.7.4 1 .1.3-.2.4-.7.2-1-.1-.2-3.1-4.3-11.3-4.9-.4 0-.7.2-.8.6-.4 1.8-.4 3.7-.2 5.5.4 4 2.5 7.6 5.6 10'/%3E%3C/svg%3E");
}

.menu-item-contact .nav-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.2 29.1'%3E%3Cpath fill='%2392b9c7' stroke='%2392b9c7' stroke-width='.5' d='M5.2 17.5c.5-1 .4-2.3-.4-3.1-1.1-1.1-1.8-2.7-1.8-4.3 0-3.5 3.6-7.1 8.9-7.1s8.9 3.6 8.9 7.1-3.6 7.1-8.9 7.1c-.7 0-1.4 0-2.1-.2-.6-.1-1.2 0-1.7.2-.2.1-.5.2-.7.3-.9.4-1.8.7-2.8 1 .2-.3.3-.5.4-.8 0-.1.1-.2.2-.3h0ZM11.9 19.9c6.4 0 11.6-4.4 11.6-9.8S18.3.2 11.9.2.3 4.7.3 10.1c0 2.3.9 4.5 2.6 6.2 0 0-.1.2-.2.3-.6 1-1.3 2-2 2.9-.5.5-.5 1.4 0 1.9.2.2.6.4.9.4 2.4 0 4.7-.6 6.9-1.7.3-.1.5-.3.8-.4.9.2 1.7.3 2.6.3M24.4 27.1c.9 0 1.8 0 2.6-.3.3.1.5.3.8.4 2.1 1 4.5 1.6 6.9 1.7.7 0 1.3-.6 1.3-1.3 0-.3-.1-.7-.4-.9-.8-.9-1.5-1.9-2-2.9 0 0-.1-.2-.2-.3 1.6-1.6 2.5-3.9 2.6-6.2 0-5.3-4.9-9.6-11.1-9.8.2.9.3 1.8.3 2.7h0c4.9.4 8 3.8 8 7.1 0 1.6-.7 3.2-1.8 4.3-.8.8-1 2.1-.4 3.1 0 .1.1.2.2.3.1.3.3.5.4.8-1-.3-1.9-.6-2.8-1-.2-.1-.5-.2-.7-.3-.5-.3-1.1-.3-1.7-.2-.7.1-1.4.2-2.1.2-3 .1-5.8-1.2-7.6-3.5-.9.3-1.8.5-2.8.7 2.3 3.5 6.2 5.6 10.4 5.5'/%3E%3C/svg%3E");
}

/* Pour Polylang (généralement classe "lang-item") */
.lang-item .nav-icon::before {
    /*content: url('/wp-content/themes/neuhauser/shortcodes/navigation/assets/svg/language.svg');*/
}

/* Texte en dessous */
.nav-text {
    font-family: 'Source Sans 3', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #53534D;
    text-transform: uppercase;

}

/* Item actif */
.nav-item--active .nav-link {
    color: #92B9C7;
}

/* ========================================
   SOUS-MENUS (DROPDOWN)
   ======================================== */

.nav-item--has-children {
    position: relative;
}

/* Sous-menu caché par défaut */
.nav-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    list-style: none;
    padding: 1rem;
    margin: 0;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* Afficher au hover */
.nav-item--has-children:hover .nav-submenu {
    display: block;
}

/* Items du sous-menu */
.nav-submenu .nav-item {
    margin: 0;
}

.nav-submenu .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    padding: 0.5rem 1rem;
}

.nav-submenu .nav-link:hover {
    background: #f5f5f5;
}

/* Pas d'icône dans les sous-menus */
.nav-submenu .nav-icon {
    display: none;
}

/* ========================================
   LOGO AU MILIEU
   ======================================== */

.custom-nav__logo {
    display: block;
    width: 280px;
    top: 50px;
    position: relative;
    order: 10; /* Position au milieu */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-nav__logo img {
    width: 100%;
    height: auto;
}

/* Items de menu après le 3e passent après le logo */
.custom-nav__menu > .nav-item:nth-child(n+3) {
    order: 20;
}

/* ========================================
   BOUTON MOBILE (HAMBURGER)
   ======================================== */

.custom-nav__toggle {
    display: none; /* Caché sur desktop */
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.custom-nav__toggle span {
    width: 30px;
    height: 3px;
    background: #333;
    transition: all 0.3s ease;
}

/* Animation en X quand actif */
.custom-nav__toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.custom-nav__toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.custom-nav__toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* ========================================
   RESPONSIVE MOBILE
   ======================================== */

@media (max-width: 1023px) {
    /* Nav mobile toujours fixed */
    .custom-divi-nav {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 9999;
        background: #fff;
    }

    .custom-nav {
        padding: 0.5rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .custom-nav__container {
        display: contents;
    }

    /* Logo petit */
    .custom-nav__logo {
        width: 100px !important;
        top: 0 !important;
        margin: 0;
        order: 1;
    }

    /* Burger */
    .custom-nav__toggle {
        display: flex;
        order: 2;
        z-index: 10001;
    }

    /* Menu overlay en dessous du header */
    .custom-nav__menu {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        gap: 1rem;
        padding: 2rem 1rem;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        /*box-shadow: 0 4px 12px rgba(0,0,0,0.1);*/
        order: 3;
    }

    .custom-nav__menu.is-open {
        display: flex;
        padding-top: 20px;
    }

    /* Items centrés */
    .custom-nav__menu > .nav-item {
        order: 0;
        text-align: center;
    }

    .nav-link {
        justify-content: center;
    }

    .nav-text {
        font-size: 1rem;
    }

    /* Sous-menus sur mobile */
    .nav-submenu {
        position: static;
        display: none;
        box-shadow: none;
        padding: 0.5rem 0 0 0;
        background: transparent;
    }

    .nav-submenu .nav-link {

     justify-content: center !important;
    }

        .nav-item--has-children.submenu-open .nav-submenu {
            display: block;
        }

        /* Indicateur visuel pour items avec sous-menu */
    .nav-item--has-children > .nav-link {
        position: relative;
    }

    .nav-item--has-children > .nav-link::after {
        content: '▼';
        font-size: 0.7em;
        margin-left: 0.5em;
        transition: transform 0.3s ease;
    }

    .nav-item--has-children.submenu-open > .nav-link::after {
        transform: rotate(180deg);
    }
}