#portfolio_page header {
    position: relative;
    /* Menu mobile : tailles et respiration (mobile.css ≤990px) */
    --portfolios-hamburger-icon-size: 2.125rem;
    --portfolios-hamburger-min-touch: 3.25rem;
    --portfolios-hamburger-touch-padding: 0.4rem;
    --portfolios-header-wrapper-gap: 0.75rem;
}

#portfolio_page #hub-logo .hub-logo__mark--image {
	display: flex;
	justify-content: center;
	transition: 0.2s linear;
}

#portfolio_page #hub-logo .hub-logo__mark--image:hover {
	opacity: 0.5;
}

#portfolio_page #hub-logo .hub-logo__mark--image #site-title,
#theme-visualiser #portfolio_page #hub-logo .hub-logo__mark--image #site-title,
#portfolio_page #hub-logo .hub-logo__mark--text,
#theme-visualiser #portfolio_page #hub-logo .hub-logo__mark--text {
	color: var(--portfolios-nav-text-color);
	transition: color var(--portfolios-nav-links-transition);
}

#portfolio_page #hub-logo .hub-logo__mark--image img {
	height: 50px;
	object-fit: contain;
}

#portfolio_page #hub-logo .square img {
    height: 50px;
    width: 50px;
    object-fit: contain;
}

#portfolio_page #hub-logo .large img {
    height: auto;
    width: 150px;
    object-fit: contain;
}

#portfolio_page #hub-logo .high img,
#portfolio_page #hub-logo .hight img {
    width: auto;
    height: 100px;
    object-fit: contain;
}

@media screen and (max-width: 1050px) {

	#portfolio_page #hub-logo .hub-logo__mark--image img {
		height: 40px;
	}

    #portfolio_page #hub-logo .square img {
        height: 40px;
        width: 40px;
        object-fit: contain;
    }

    #portfolio_page #hub-logo .large img {
        height: auto;
        width: 100px;
        object-fit: contain;
    }

    #portfolio_page #hub-logo .high img,
    #portfolio_page #hub-logo .hight img {
        width: auto;
        height: 80px;
        object-fit: contain;
    }

}

@media screen and (max-width: 450px) {
	  
	#portfolio_page #hub-logo .hub-logo__mark--image img {
		height: 30px;
	}

	#portfolio_page #hub-logo .hub-logo__mark--text {
		display: none;
	}
  
}

/* Sous-menus : fermés par défaut (mobile = ouverture au clic / .submenu-open) */
#portfolio_page .item-has-children .sub-menu {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: opacity 0.25s ease, max-height 0.3s ease, visibility 0.25s ease;
}

#portfolio_page .item-has-children.submenu-open > .sub-menu {
    display: block !important;
    opacity: 1;
    max-height: 500px;
    visibility: visible;
    transition: opacity 0.25s ease, max-height 0.3s ease, visibility 0.25s ease;
}

@media (min-width: 991px) {

    /*
     * Desktop : barre pleine largeur sous le header, visible au survol / :focus-within /
     * .submenu-hover-intent. Position fixed + top calculé en JS (header réel − pont).
     *
     * Pont de survol : padding-top + ::before au-dessus pour garder le pointeur dans le <li>.
     */
    #portfolio_page #header-nav .item-has-children > .sub-menu,
    #theme-visualiser #portfolio_page #header-nav .item-has-children > .sub-menu {
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--header-height, 70px) - var(--portfolios-submenu-hover-bridge, 24px));
        box-sizing: border-box;
        padding-top: var(--portfolios-submenu-hover-bridge, 24px);
        display: none !important;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease, max-height 0.25s ease;
    }

    /* Teinte sur .sub-menu-content uniquement (pas sur le padding-top pont). Voir background.css. */
    #portfolio_page #header-nav .item-has-children > .sub-menu .sub-menu-content,
    #theme-visualiser #portfolio_page #header-nav .item-has-children > .sub-menu .sub-menu-content {
        width: 100%;
        box-sizing: border-box;
    }

    #portfolio_page #header-nav .item-has-children > .sub-menu ul,
    #theme-visualiser #portfolio_page #header-nav .item-has-children > .sub-menu ul {
        display: flex;
        padding: 20px 0;
    }

    #portfolio_page #header-nav .item-has-children:hover > .sub-menu,
    #portfolio_page #header-nav .item-has-children:focus-within > .sub-menu,
    #portfolio_page #header-nav .item-has-children.submenu-hover-intent > .sub-menu,
    #theme-visualiser #portfolio_page #header-nav .item-has-children:hover > .sub-menu,
    #theme-visualiser #portfolio_page #header-nav .item-has-children:focus-within > .sub-menu,
    #theme-visualiser #portfolio_page #header-nav .item-has-children.submenu-hover-intent > .sub-menu {
        display: block !important;
        opacity: 1;
        visibility: visible;
        max-height: 500px;
        overflow: visible;
        pointer-events: auto;
    }

    /* Bandeau invisible au-dessus du sous-menu (au-delà du padding-top) */
    #portfolio_page #header-nav .item-has-children:hover > .sub-menu::before,
    #portfolio_page #header-nav .item-has-children:focus-within > .sub-menu::before,
    #portfolio_page #header-nav .item-has-children.submenu-hover-intent > .sub-menu::before,
    #theme-visualiser #portfolio_page #header-nav .item-has-children:hover > .sub-menu::before,
    #theme-visualiser #portfolio_page #header-nav .item-has-children:focus-within > .sub-menu::before,
    #theme-visualiser #portfolio_page #header-nav .item-has-children.submenu-hover-intent > .sub-menu::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 0.75rem;
        pointer-events: auto;
        z-index: 2;
    }
}

#portfolio_page .item-has-children > a .submenu-toggle-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    transition: transform 0.3s;
    font-size: 1em;
    vertical-align: middle;
}

#portfolio_page .item-has-children > a .submenu-toggle-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}

#portfolio_page .item-has-children.submenu-open > a .submenu-toggle-icon svg {
    transform: rotate(180deg);
}

@media (min-width: 991px) {
    #portfolio_page #header-nav .item-has-children:hover > a .submenu-toggle-icon svg,
    #portfolio_page #header-nav .item-has-children:focus-within > a .submenu-toggle-icon svg,
    #portfolio_page #header-nav .item-has-children.submenu-hover-intent > a .submenu-toggle-icon svg,
    #theme-visualiser #portfolio_page #header-nav .item-has-children:hover > a .submenu-toggle-icon svg,
    #theme-visualiser #portfolio_page #header-nav .item-has-children:focus-within > a .submenu-toggle-icon svg,
    #theme-visualiser #portfolio_page #header-nav .item-has-children.submenu-hover-intent > a .submenu-toggle-icon svg {
        transform: rotate(180deg);
    }
}

body.portfolio-editor #portfolio_page header.line ~ main,
body.portfolio-editor #portfolio_page header.tower ~ main,
#theme-visualiser #portfolio_page header.line ~ main,
#theme-visualiser #portfolio_page header.tower ~ main {
    margin-top: var(--header-height, 70px);
}