/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 16-10-2026 — menus ordinateur (plan-header-footer.md, lot E2) */
/*
 * Menus ordinateur, liens dans la barre : sous-menus en petite liste (bandeau) et en grand cadre (méga),
 * menu trop rempli (deux lignes puis défilement), ouverture des sous-pages au survol.
 * 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).
 */

/* --- Sous-menus (bandeau sous l'en-tête, menus « En ligne » et « Méga ») ----
   Habillage commun piloté par variables ; chaque thème (matrices/<slug>.css) règle les siennes sur
   header[data-matrix="<slug>"], comme pour les cartes. Fond par défaut : celui du menu (themes/basic/nav-background.css). */
#portfolio_page header[data-matrix] {
    --pf-submenu-bg: var(--portfolios-nav-bg-color, transparent);
    --pf-submenu-edge: 0 solid transparent;
    --pf-submenu-rule: var(--pf-submenu-edge);
    /* Fenêtre de sous-menu : angles des liens. Arrondi des liens + marge intérieure (0,5rem) pour rester
       concentrique, liens carrés ⇒ fenêtre carrée, plafonné pour les liens en pilule. */
    --pf-submenu-radius: min(calc(var(--portfolios-nav-links-radius, 0px) + min(var(--portfolios-nav-links-radius, 0px), 0.5rem)), 1.75rem);
    --pf-submenu-shadow: var(--pf-panel-shadow, 0 10px 30px rgba(0, 0, 0, 0.14));
    /* Menus flottants (panneau, tiroir, feuille, barre flottante, bulles, palette, onglets) :
       fond du menu choisi par l'utilisateur sur le fond du site, arrondi qui suit celui des liens,
       contour / ombre / flou propres au thème (chaque matrices/<slug>.css peut les régler). */
    --pf-float-bg: var(--pf-nav-panel-bg);
    --pf-float-edge: max(1px, var(--pf-border-width)) solid color-mix(in srgb, var(--portfolios-nav-text-color, currentColor) 14%, transparent);
    --pf-float-radius: min(calc(var(--portfolios-nav-links-radius, 0.5rem) + 0.5rem), 1.75rem);
    --pf-float-chip-radius: var(--pf-pill-radius);
    --pf-float-shadow: var(--pf-sheet-shadow);
    --pf-float-blur: var(--portfolios-nav-bg-blur-custom, none);
    --pf-float-gap: 0.75rem;
}

@media (min-width: 1101px) {

#portfolio_page header:is([data-nav-desktop="inline"], [data-nav-desktop="mega"]) #header-nav .item-has-children > .sub-menu {
        box-sizing: border-box;
        z-index: 30;
    }

#portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu {
        min-width: 11rem;
    }

#portfolio_page header:is([data-nav-desktop="inline"], [data-nav-desktop="mega"]) #header-nav .item-has-children > .sub-menu .sub-menu-content {
        box-sizing: border-box;
    }


#portfolio_page header:is([data-nav-desktop="inline"], [data-nav-desktop="mega"]) #header-nav .item-has-children > .sub-menu li {
        margin: 0;
        list-style: none;
    }

#portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu a {
        white-space: nowrap;
        text-align: start;
    }

/* Souligné / Texte seul : le lien s'arrête au texte (le trait aussi) ; l'écart latéral passe en marge,
       et le dessous garde au moins la place du trait (themes/basic/links.css). */
#portfolio_page header[data-nav-desktop="inline"] #header-nav.nav--underline .item-has-children > .sub-menu a {
        width: fit-content;
    }

/* Méga : bande sous le header, alignée sur la largeur du contenu. */

/* Toute la largeur de l'en-tête, quel que soit le repère (liste, pilule…) : position calculée
       par header.js (portfoliosPlaceMegaMenus → --pf-mega-left / --pf-mega-width). */

/* Bande pleine largeur : pas d'arrondi ni de contour latéral. */

/* Contenu calé comme l'en-tête : largeur du site, marge latérale du header, alignement du menu. */
#portfolio_page header[data-nav-desktop="mega"] #header-nav .item-has-children > .sub-menu ul {
        justify-content: flex-start;
        box-sizing: border-box;
        text-align: start;
    }

/* En-tête « En bulle » (et îlots de Bento / Verre) : le grand cadre devient lui aussi une bulle,
       en retrait des bords comme l'en-tête, arrondi et ombré, au lieu d'une bande bord à bord. */
#portfolio_page header[data-nav-desktop="mega"]:is([data-header-desktop="island"], [data-island="own"][data-header-desktop="theme"]) #header-nav .item-has-children > .sub-menu .sub-menu-content {
        overflow: hidden;
    }

#portfolio_page header[data-nav-desktop="mega"].nav-center #header-nav .item-has-children > .sub-menu ul {
        justify-content: center;
        text-align: center;
    }

#portfolio_page header[data-nav-desktop="mega"].nav-right #header-nav .item-has-children > .sub-menu ul {
        justify-content: flex-end;
        text-align: end;
    }
}

/* --- Menu trop rempli : deux lignes au plus, puis défilement horizontal -------------------
   .nav-scroll-x posé par header.js (portfoliosFitNavLines) quand les liens prendraient plus de deux lignes
   (ordinateur, menus visibles ; jamais la colonne ni le bouton Menu). Liste sur une ligne qui défile ;
   sous-menus en position fixe calée sur leur lien (--pf-sub-top / --pf-sub-left), sinon le défilement
   de la liste les rognerait. Spécificité : passe devant les flex-wrap: wrap !important des thèmes
   et de l'aperçu de l'éditeur (customizer-matrices.css). */
#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav.nav {
    min-width: 0;
}

#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .nav__content {
    min-width: 0;
    max-width: 100%;
}

#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .nav__content .nav__list {
    max-width: 100%;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;/* Place des ombres et contours des liens (Brutal…), que le défilement rognerait. */
    
}

#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .nav__content .nav__list > li {
    flex: none;
}



/* Grand cadre : bande sous l'en-tête, sur toute sa largeur (header.js : --pf-mega-width). */

/* --- Méga-menu : sous-menus en panneau pleine largeur, colonnes ---------- */
#portfolio_page header[data-nav-desktop="mega"] .item-has-children {
    position: static;
}

#portfolio_page header[data-nav-desktop="mega"] .item-has-children > .sub-menu {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
}

#portfolio_page header[data-nav-desktop="mega"] .item-has-children > .sub-menu ul {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.25rem 2rem;
    padding-block: 1.5rem;
}

#portfolio_page header[data-nav-desktop="mega"] .item-has-children > .sub-menu ul a {
    display: block;
}

/* Déroulant ordinateur. Jamais sur un menu hamburger (data-nav-menu) : ses sous-menus sont en flux,
   cachés ici ils garderaient leur hauteur (grands vides). :where() garde la spécificité d'origine. */
@media (min-width: 1101px) {

#portfolio_page header:not([data-header-rail]):not(.nav-ctx-panel):where(:not([data-nav-menu])) #header-nav.nav .item-has-children > .sub-menu .sub-menu-content {
    transform: translateY(-0.4rem);
    transition: transform calc(0.28s * var(--pf-submenu-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1);
}


#portfolio_page header:not([data-header-rail]):not(.nav-ctx-panel):where(:not([data-nav-menu])) #header-nav.nav .item-has-children:is(:hover, :focus-within, .submenu-hover-intent) > .sub-menu .sub-menu-content {
    transform: none;
}

/* Bandeau par défaut : liens espacés. */
#portfolio_page header:not([data-header-rail]):not(.nav-ctx-panel):where(:not([data-nav-menu])) #header-nav.nav .item-has-children > .sub-menu ul {
    gap: 0.6rem 2rem;
}
}
}

/* 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 {
@media (min-width: 1101px) {
    #portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children {
        position: relative;
    }
}

@media (min-width: 1101px) {
    #portfolio_page header:is([data-nav-desktop="inline"], [data-nav-desktop="mega"]) #header-nav .item-has-children > .sub-menu {
        position: absolute;
        top: 100%;
        bottom: auto;
        padding: var(--pf-submenu-gap, 0.5rem) 0 0;
        background: none;
    }
}

@media (min-width: 1101px) {
    #portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu {
        left: 50%;
        right: auto;
        width: max-content;
        max-width: min(22rem, calc(100vw - 2rem));
        transform: translateX(-50%);
    }
}

@media (min-width: 1101px) {
    #portfolio_page header:is([data-nav-desktop="inline"], [data-nav-desktop="mega"]) #header-nav .item-has-children > .sub-menu .sub-menu-content {
        width: auto;
        margin: 0;
        padding: 0.5rem;
        border: var(--pf-submenu-rule);
        border-radius: var(--pf-submenu-radius);
        background: linear-gradient(var(--pf-submenu-bg), var(--pf-submenu-bg)), var(--portfolios-theme-bg-main, #fff);
        box-shadow: var(--pf-submenu-shadow);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (min-width: 1101px) {
    #portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }
}

@media (min-width: 1101px) {
    #portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu a {
        display: block;
    }
}

@media (min-width: 1101px) {
    #portfolio_page header[data-nav-desktop="inline"] #header-nav.nav--underline .item-has-children > .sub-menu a {
        margin-inline: var(--pf-nav-link-pad-x, 1rem);
    }
}

@media (min-width: 1101px) {
    #portfolio_page header[data-nav-desktop="mega"] #header-nav .item-has-children {
        position: static;
    }
}

@media (min-width: 1101px) {
    #portfolio_page header[data-nav-desktop="mega"] #header-nav .item-has-children > .sub-menu {
        left: var(--pf-mega-left, 0px);
        right: auto;
        width: var(--pf-mega-width, 100%);
        max-width: none;
        transform: none;
    }
}

@media (min-width: 1101px) {
    #portfolio_page header[data-nav-desktop="mega"] #header-nav .item-has-children > .sub-menu .sub-menu-content {
        padding: 0;
        border-inline: 0;
        border-radius: 0;
    }
}

@media (min-width: 1101px) {
    #portfolio_page header[data-nav-desktop="mega"] #header-nav .item-has-children > .sub-menu ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem 2.5rem;
        width: 100%;
        max-width: var(--layout-width-wide, 100%);
        margin-inline: auto;
        padding: 1.25rem var(--pf-mega-pad, 20px);
    }
}

@media (min-width: 1101px) {
    #portfolio_page header[data-nav-desktop="mega"]:is([data-header-desktop="island"], [data-island="own"][data-header-desktop="theme"]) #header-nav .item-has-children > .sub-menu .sub-menu-content {
        width: calc(100% - 2rem);
        max-width: var(--layout-width-wide);
        margin-inline: auto;
        border: var(--pf-submenu-rule);
        border-radius: max(var(--pf-radius, 0px), 1rem);
        box-shadow: var(--pf-submenu-shadow);
    }
}

#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .nav__content .nav__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 8px;
}

#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .nav__content .nav__list > li > a {
    white-space: nowrap;
}

#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .item-has-children > .sub-menu {
    position: fixed;
    top: var(--pf-sub-top, 100%);
    left: var(--pf-sub-left, 0px);
}

#portfolio_page #header.nav-scroll-x[data-nav-desktop="mega"]:not([data-header-rail]):not([data-nav-menu]) #header-nav .item-has-children > .sub-menu {
    transform: none;
}

#portfolio_page header[data-nav-desktop="mega"] .item-has-children > .sub-menu ul {
    display: grid;
}

@media (min-width: 1101px) {
    #portfolio_page header:not([data-header-rail]):not(.nav-ctx-panel):where(:not([data-nav-menu])) #header-nav.nav .item-has-children > .sub-menu {
        display: block;
        max-height: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity calc(0.22s * var(--pf-submenu-speed, 1)) ease, visibility 0s linear calc(0.22s * var(--pf-submenu-speed, 1));
    }
}

@media (min-width: 1101px) {
    #portfolio_page header:not([data-header-rail]):not(.nav-ctx-panel):where(:not([data-nav-menu])) #header-nav.nav .item-has-children:is(:hover, :focus-within, .submenu-hover-intent) > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity calc(0.22s * var(--pf-submenu-speed, 1)) ease, visibility 0s linear 0s;
    }
}
}