/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 16-10-2026 — menus derrière le bouton Menu (plan-header-footer.md, lot E2) */
/*
 * Menus derrière le bouton Menu, un seul rendu sur ordinateur et sur mobile (data-nav-active) : déroulant,
 * depuis le bas (sheet), tiroir (drawer), plein écran ; fond des panneaux (--pf-nav-panel-bg) ; logo et bouton
 * sur une ligne ; sous-pages en accordéon (nav-ctx-panel) ; accordéon des sous-menus sur écran étroit.
 * Sorti de header-menus.css (découpage par motif, règles inchangées). Ordre de chargement du socle du header :
 * menu-desktop.css → menu-rail.css → menu-panels.css → menu-radial.css → header-layouts.css
 * → header-options.css (public/includes/css.php, shared/core/theme/preview_head.php).
 */

/* Fond des panneaux de menu (feuille, tiroir, plein écran, onglets, bulles, panneau) :
   la couleur du menu posée sur le fond du site, comme le menu déroulant d'origine
   (mobile.css : teinte ::before sur la page). Le texte reste --portfolios-nav-text-color. */
#portfolio_page header {
    --pf-nav-panel-bg: linear-gradient(var(--portfolios-nav-bg-color, transparent), var(--portfolios-nav-bg-color, transparent)), var(--portfolios-theme-bg-main, #fff);
}

/* Motifs du menu hamburger : data-nav-active = motif réellement affiché (écran étroit : data-nav-mobile ;
   écran large avec bouton Menu : data-nav-open converti). Aucune règle ne dépend de la largeur. */

/* --- Feuille : monte du bas, coins arrondis ---------------------------- */
#portfolio_page header[data-nav-active="sheet"] #header-nav {
    top: auto;
    right: var(--pf-float-gap, 0px);
    bottom: calc(var(--pf-float-gap, 0px) + env(safe-area-inset-bottom, 0px));
    left: var(--pf-float-gap, 0px);
    max-height: 82vh;
    border: var(--pf-float-edge, 0 solid transparent);
    border-radius: var(--pf-float-radius, var(--pf-radius));
    -webkit-backdrop-filter: var(--pf-float-blur, none);
    backdrop-filter: var(--pf-float-blur, none);
    clip-path: none;
    -webkit-clip-path: none;
    transform: translateY(calc(100% + 2rem));
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s linear 0.45s;
    background: var(--pf-float-bg, var(--pf-nav-panel-bg));
    color: var(--portfolios-nav-text-color, inherit);
    box-shadow: var(--pf-float-shadow, var(--pf-sheet-shadow-up));
}

#portfolio_page header[data-nav-active="sheet"] #header-nav.nav-full {
    transform: none;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s;
}

#portfolio_page header[data-nav-active="sheet"] #header-nav .nav__content {
    min-height: 0;
    padding-top: 2.25rem;
}

#portfolio_page header[data-nav-active="sheet"] #header-nav .nav__content::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    left: 50%;
    width: 2.75rem;
    height: 0.3rem;
    margin-left: -1.375rem;
    border-radius: var(--pf-pill-radius);
    background: color-mix(in srgb, var(--portfolios-body-text-color, #111) 25%, transparent);
}

/* --- Tiroir latéral --------------------------------------------------- */
#portfolio_page header[data-nav-active="drawer"] #header-nav {
    /* Sous l'en-tête : titre et bouton de fermeture restent hors du panneau. */
    top: calc(var(--header-height, 5rem) + var(--pf-float-gap, 0px));
    right: var(--pf-float-gap, 0px);
    bottom: calc(var(--pf-float-gap, 0px) + env(safe-area-inset-bottom, 0px));
    left: auto;
    width: min(86vw, 24rem);
    height: auto;
    border: var(--pf-float-edge, 0 solid transparent);
    border-radius: var(--pf-float-radius, 0px);
    -webkit-backdrop-filter: var(--pf-float-blur, none);
    backdrop-filter: var(--pf-float-blur, none);
    clip-path: none;
    -webkit-clip-path: none;
    transform: translateX(calc(100% + 2rem));
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s linear 0.42s;
    background: var(--pf-float-bg, var(--pf-nav-panel-bg));
    color: var(--portfolios-nav-text-color, inherit);
    box-shadow: var(--pf-float-shadow, var(--pf-drawer-shadow));
}

#portfolio_page header[data-nav-active="drawer"] #header-nav.nav-full {
    transform: none;
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s;
}

#portfolio_page header[data-nav-active="drawer"] #header-nav .nav__content {
    padding-top: 1.5rem;
}

/* Voile cliquable : fermeture au toucher (header.js). */
#portfolio_page header[data-nav-active="drawer"].mobile-nav-open::after,
#portfolio_page header[data-nav-active="sheet"].mobile-nav-open::after {
    top: 0;
    pointer-events: auto;
}

/* --- Plein écran typographique --------------------------------------- */
#portfolio_page header[data-nav-active="fullscreen"] #header-nav {
    top: 0;
    background: var(--pf-nav-panel-bg);
    color: var(--portfolios-nav-text-color, inherit);
}

#portfolio_page header[data-nav-active="fullscreen"] #header-nav .nav__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Centrage par marges auto : une liste plus haute que l'écran démarre sous le logo
   au lieu de déborder vers le haut (justify-content: center). */
#portfolio_page header[data-nav-active="fullscreen"] #header-nav .nav__content .nav__list {
    margin-block: auto;
}

/* Liens : taille des liens du thème (pas de grands caractères sur mobile). */

/* ==========================================================================
   11. Menus hamburger — corrections d'intégration
   ========================================================================== */

/* Logo et bouton Menu / croix : toujours sur la même ligne, centrés sur la verticale (le padding du header
   est réglable). Sans cette règle, selon la feuille de forme chargée (ligne / tour) et la largeur, la barre
   pouvait rester « auto » ou passer en bloc : la croix tombait sous le logo. */
#portfolio_page header[data-nav-menu] .header-inner {
    align-items: center;
}

#portfolio_page header[data-nav-menu] .header-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#portfolio_page header[data-nav-menu] .header-bar > #hub-logo {
    flex: 0 1 auto;
    min-width: 0;
    align-self: center;
}

#portfolio_page header[data-nav-menu] .header-bar > #hamburgerBtn {
    flex: 0 0 auto;
    align-self: center;
    margin-block: 0;
}

/* Menu ouvert : logo + bouton de fermeture restent au-dessus du panneau. */
#portfolio_page header.mobile-nav-open .header-bar {
    z-index: 870;
}

/* Teinte de mobile.css (::before) déjà incluse dans --pf-nav-panel-bg. */
#portfolio_page header:is([data-nav-active="sheet"], [data-nav-active="drawer"], [data-nav-active="fullscreen"], [data-nav-active="radial"]) #header-nav.nav-full::before {
    content: none;
}



#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu {
    border: 0;
    background: none;
    box-shadow: none;
}



#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu .sub-menu-content {
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Liste des sous-pages : en retrait, filet du côté de l'alignement du menu. */
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
    border-inline-start: var(--pf-rule-width, 1px) solid color-mix(in srgb, currentColor 25%, transparent);
}

#portfolio_page #header.nav-ctx-panel.nav-center #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
    border-inline-start: 0;
}

#portfolio_page #header.nav-ctx-panel.nav-right #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
    border-inline-start: 0;
    border-inline-end: var(--pf-rule-width, 1px) solid color-mix(in srgb, currentColor 25%, transparent);
}


/* Apparence des liens : voir la feuille de liens (lot E2). */

/* Liens soulignés / texte seul : sous-pages aussi serrées que les liens principaux (padding hérité de mobile.css),
   dessous au moins la place du trait (themes/basic/links.css). Sauf en bulles : une bulle garde toujours son padding. */
/* Apparence des liens : voir la feuille de liens (lot E2). */

/* Chevron : pivote à l'ouverture. */
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > a .submenu-toggle-icon svg {
    transition: transform 0.25s ease;
}

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

#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 1100px) {
#portfolio_page header #header-nav.nav .nav__content .item-has-children > .sub-menu {
    grid-template-rows: 0fr;
}

#portfolio_page header #header-nav.nav .nav__content .item-has-children > .sub-menu > .sub-menu-content {
    min-height: 0;
    overflow: hidden;
}

#portfolio_page header #header-nav.nav .nav__content .item-has-children.submenu-open > .sub-menu {
    grid-template-rows: 1fr;
}

}
}

/* Déclarations imposées (D6, plan-elements-contenu.md § 6 bis) : couche « zones-imposees », après le thème, les
   dispositions et les pages, avant les réglages et le sur-mesure. Un thème ne les réécrit pas : il pose les
   variables d'accroche qu'elles lisent. Second bloc de couche : wrap.php --unwrap ne le retire pas. */
@layer site.zones-imposees {
#portfolio_page header[data-nav-active="fullscreen"] #header-nav .nav__content {
    padding-top: calc(var(--header-height, 5rem) + 2rem);
}

#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .submenu-parent-link {
    display: list-item;
}

#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list > .item-has-children {
    position: static;
    display: block;
}

#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu {
    position: static;
    inset: auto;
    display: block;
    width: auto;
    max-width: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s linear 0.3s;
}

#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children.submenu-open > .sub-menu {
    max-height: min(80vh, 40rem);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease, visibility 0s;
}

#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu::before,
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu .sub-menu-content::before {
    content: none;
}

#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu .sub-menu-content {
    min-height: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: auto;
    max-width: none;
    margin: 0.4rem 0 0.6rem;
    padding: 0 0 0 0.9rem;
}

#portfolio_page #header.nav-ctx-panel.nav-center #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
    align-items: center;
    padding: 0;
}

#portfolio_page #header.nav-ctx-panel.nav-right #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
    align-items: flex-end;
    padding: 0 0.9rem 0 0;
}

#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu li {
    width: auto;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    #portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu,
    #portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children.submenu-open > .sub-menu,
    #portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > a .submenu-toggle-icon svg {
        transition: none;
    }
}

@media (max-width: 1100px) {
    #portfolio_page header #header-nav.nav .nav__content .item-has-children > .sub-menu {
        display: grid;
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        max-height: none;
        transition: grid-template-rows calc(0.32s * var(--pf-submenu-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1), margin-top calc(0.32s * var(--pf-submenu-speed, 1)) ease, opacity calc(0.25s * var(--pf-submenu-speed, 1)) ease, visibility 0s linear calc(0.32s * var(--pf-submenu-speed, 1));
    }
}

@media (max-width: 1100px) {
    #portfolio_page header #header-nav.nav .nav__content .item-has-children.submenu-open > .sub-menu {
        margin-top: 0.35rem;
        opacity: 1;
        visibility: visible;
        transition: grid-template-rows calc(0.32s * var(--pf-submenu-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1), margin-top calc(0.32s * var(--pf-submenu-speed, 1)) ease, opacity calc(0.25s * var(--pf-submenu-speed, 1)) ease, visibility 0s linear 0s;
    }
}

@media (max-width: 1100px) {
    #portfolio_page header #header-nav.nav .nav__content .item-has-children > .sub-menu ul {
        gap: 0.6rem;
    }
}
}