@media(max-width: 990px) {

    /*
     * Effets nav (flou + teinte) : sur #header uniquement, comme desktop (background.css).
     * #header-content / .header-wrapper ne portent pas le flou.
     * Si backdrop-filter sur #header recase le fixed de #header-nav, le top du panneau est
     * calé en JS (--header-height) depuis le haut du viewport.
     */
    #portfolio_page #header {
        overflow: visible !important;
    }

    #portfolio_page header .header-wrapper {
        display: flex;
        position: relative;
        justify-content: space-between;
        box-sizing: border-box;
        align-items: center;
        width: 100%;
        margin-bottom: 0px;
        gap: var(--portfolios-header-wrapper-gap, 0.75rem);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Bouton menu : tailles via --portfolios-hamburger-* sur #portfolio_page header (main.css) */
    #portfolio_page header #hamburgerBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-width: var(--portfolios-hamburger-min-touch, 3.25rem);
        min-height: var(--portfolios-hamburger-min-touch, 3.25rem);
        margin: 0;
        margin-inline-start: 0.125rem;
        padding: var(--portfolios-hamburger-touch-padding, 0.4rem);
        border: none;
        background: transparent;
        cursor: pointer;
        color: var(--portfolios-nav-text-color, currentColor);
        position: relative;
        z-index: 830 !important;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    #portfolio_page header #hamburgerBtn:focus-visible {
        outline: 2px solid var(--portfolios-nav-text-color, currentColor);
        outline-offset: 3px;
    }

    #portfolio_page header #hamburgerBtn:active {
        transform: scale(0.96);
    }

    #portfolio_page header #hamburgerBtn .hamburger__box {
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        width: 100%;
        height: 100%;
        transition: transform 0.25s cubic-bezier(0.34, 1.45, 0.64, 1);
    }

    /* Pas de scale quand le menu est ouvert : évite de décaler la croix */
    #portfolio_page header #hamburgerBtn:hover:not(.active) .hamburger__box {
        transform: scale(1.05);
    }

    #portfolio_page header #hamburgerBtn.active .hamburger__box {
        transform: none;
    }

    #portfolio_page header #hamburgerBtn .hamburger__svg {
        display: block;
        width: var(--portfolios-hamburger-icon-size, 2.125rem);
        height: auto;
        aspect-ratio: 1;
        flex-shrink: 0;
        overflow: visible;
    }

    /* Deux états SVG (menu / croix) — croix géométrique centrée en 12,12, sans morph fragile */
    #portfolio_page header #hamburgerBtn .hamburger__state {
        transition: opacity 0.22s ease, visibility 0.22s ease;
    }

    #portfolio_page header #hamburgerBtn .hamburger__state--close {
        opacity: 0;
        visibility: hidden;
    }

    #portfolio_page header #hamburgerBtn .hamburger__state--menu {
        opacity: 1;
        visibility: visible;
    }

    #portfolio_page header #hamburgerBtn.active .hamburger__state--menu {
        opacity: 0;
        visibility: hidden;
    }

    #portfolio_page header #hamburgerBtn.active .hamburger__state--close {
        opacity: 1;
        visibility: visible;
    }

    /*
     * Panneau sous la barre : top = hauteur du header, z-index < .header-wrapper (820)
     * pour que le menu passe derrière le bandeau (logo + burger restent au premier plan).
     * Fermé : -100% seul laissait le bas du panneau aligné sur le bas du header (ombre /
     * arrondis / safe-area) — on ajoute un décalage = hauteur du header pour tout remonter
     * au-dessus du viewport.
     */
    #portfolio_page header #header-nav {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--header-height, 5rem);
        width: 100%;
        height: calc(100vh - var(--header-height, 5rem));
        height: calc(100dvh - var(--header-height, 5rem));
        padding-left: 0px!important;
        margin: 0;
        box-sizing: border-box;
        z-index: 805 !important;
        display: flex;
        flex-direction: column;
        background: transparent;
        transform: translate3d(0, calc(-100% - var(--header-height, 5rem)), 0);
        transition: transform 0.46s cubic-bezier(0.32, 0.72, 0, 1);
        pointer-events: none;
    }

    #portfolio_page header #header-nav.nav-full {
        transform: translate3d(0, 0, 0);
        pointer-events: auto;
        overscroll-behavior: contain;
    }

    /* Panneau liste : teinte seule (flou + image sur #header, voir background.css / thème) */
    #portfolio_page header #header-nav .nav__content {
        flex: 1;
        min-height: 0;
        width: 100%;
        height: auto;
        padding: clamp(1.35rem, 4.5vw, 1.9rem) clamp(1.15rem, 4vw, 1.65rem) clamp(1.85rem, 5vw, 2.85rem);
        overflow-x: visible;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        transition: opacity 0.3s ease;
        position: relative;
        background: transparent;
        border-radius: 0 0 var(--portfolios-border-radius-l) var(--portfolios-border-radius-l);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    #portfolio_page header #header-nav .nav__content::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--portfolios-nav-bg-color, rgba(255, 255, 255, 0.15));
        pointer-events: none;
        z-index: 0;
        border-radius: inherit;
    }

    #portfolio_page header #header-nav .nav__content > * {
        position: relative;
        z-index: 1;
    }

    #portfolio_page header #header-nav .nav__content .sub-menu {
        display: none;
    }
    #portfolio_page header #header-nav .nav__content .item-has-children .sub-menu {
        display: none;
    }

    /*
     * Spécificité + !important : au-dessus de la règle (hover: none) ci-dessous, sinon :hover
     * collant au tap tactile masque le sous-menu malgré .submenu-open.
     */
    #portfolio_page header #header-nav .nav__content .item-has-children.submenu-open > .sub-menu {
        display: block !important;
        opacity: 1 !important;
        max-height: min(80vh, 2000px) !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    #portfolio_page header #header-nav .nav__content ul li {
        margin-bottom: clamp(1.1rem, 3vw, 1.5rem);
    }

    #portfolio_page header #header-nav .sub-menu {
        position: static !important;
        margin-top: 5px;
        width: 100%;
    }

    #portfolio_page header #header-nav .item-has-children > .sub-menu {
        position: static !important;
        left: auto !important;
        right: auto !important;
    }

    #portfolio_page header #header-nav .sub-menu ul {
        display: block !important;
        padding: 0 !important;
        margin: 0;
    }

    #portfolio_page header #header-nav .sub-menu ul li {
        margin-bottom: 5px;
        padding-left: 20px;
    }

    /* Sous-listes : pas de second « verre » (déjà porté par .nav__content) */
    #portfolio_page header #header-nav .nav__content .sub-menu .sub-menu-content {
        padding: 0;
        background-color: transparent !important;
        background-image: none !important;
    }

    #portfolio_page header #header-nav .nav__content .sub-menu .sub-menu-content::before {
        display: none !important;
    }

    #portfolio_page header.nav-left .nav__content ul li {
        text-align: left;
    }

    #portfolio_page header.nav-center .nav__content ul li {
        text-align: center;
    }

    #portfolio_page header.nav-right .nav__content ul li {
        text-align: right;
    }

    #portfolio_page header #header-nav .nav__content .item-has-children .sub-menu {
        overflow: visible !important;
    }

    #portfolio_page header #header-nav .nav__content .sub-menu {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #portfolio_page header #header-nav .nav__content .sub-menu::before {
        display: none !important;
    }

}

/*
 * Tactile : éviter un sous-menu « ouvert au survol » fantôme — mais ne pas écraser .submenu-open
 * (sinon :hover collant après le tap bat la règle globale et il faut taper ailleurs pour voir la liste).
 */
@media (max-width: 990px) and (hover: none) {
    #portfolio_page header #header-nav .nav__content .item-has-children:hover:not(.submenu-open) > .sub-menu {
        display: none !important;
    }
}

@media (max-width: 990px) and (prefers-reduced-motion: reduce) {
    #portfolio_page header #header-nav {
        transition-duration: 0.01ms;
    }

    #portfolio_page header #hamburgerBtn .hamburger__state {
        transition-duration: 0.01ms;
    }
}