/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 16-10-2026 — menu « Flottant » (plan-header-footer.md, lot E2) */
/*
 * Menu « Flottant » (data-nav-active="radial") : bouton rond en bas à droite, liens en bulles pleines
 * (lisibles sur le contenu : pas de trait souligné en plus) ; sous-pages décalées avec un filet, en bulles.
 * 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).
 */

/* --- Bouton rond qui se déplie (bas droite) -------------------------- */
#portfolio_page header[data-nav-active="radial"] #hamburgerBtn {
    top: auto;
    right: 1.25rem;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
    inset-inline-end: 1.25rem;/* Même habillage que les pastilles du menu : icône lisible quel que soit le thème
       (couleur des titres / fond du thème pouvaient être deux teintes sombres). */
    
    border-radius: var(--pf-float-chip-radius, var(--pf-pill-radius));
    background: var(--pf-float-bg, var(--pf-nav-panel-bg));
    box-shadow: var(--pf-float-shadow, var(--pf-bubble-shadow));
    z-index: 860;
}


#portfolio_page header[data-nav-active="radial"] #header-nav {
    top: auto;
    left: auto;
    right: 1.25rem;
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
    width: auto;
    max-width: calc(100vw - 2.5rem);
    max-height: none;
    clip-path: none;
    -webkit-clip-path: none;
    transform: scale(0.6);
    transform-origin: bottom right;
    transition: transform 0.35s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.2s ease, visibility 0s linear 0.35s;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#portfolio_page header[data-nav-active="radial"] #header-nav.nav-full {
    transform: none;
    transition: transform 0.35s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.2s ease, visibility 0s;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#portfolio_page header[data-nav-active="radial"] #header-nav.nav-full::before {
    content: none;
}

/* Liste bornée entre le bas du header et le bouton : au-delà, elle défile
   (sinon les dernières pages débordent derrière le bouton). */
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content {
    min-height: 0;
    max-height: calc(100dvh - var(--header-height, 5rem) - 6.5rem - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
}

/* Pastilles calées à droite, au-dessus du bouton, quel que soit l'alignement du header. */
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list,
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list > li {
    align-items: flex-end;
    text-align: right;
}

#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list {
    gap: 0.5rem;
}

#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list > li {
    width: auto;
}

#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list > li > a {
    display: inline-block;
    -webkit-backdrop-filter: var(--pf-float-blur, none);
    backdrop-filter: var(--pf-float-blur, none);
}

/* Bulle toujours pleine (lisibilité sur le contenu derrière) : le trait des thèmes
   « Souligné » / « Texte seul » ferait doublon avec elle. */

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

/* Bulle toujours pleine (lisibilité sur le contenu derrière) : le trait des thèmes
   « Souligné » / « Texte seul » ferait doublon avec elle. */

/* Sous-pages (accordéon, nav-ctx-panel) : décalées avec un filet sur le côté, comme dans les autres menus
   alignés à droite (menu-panels.css), et en bulles elles aussi (lisibles sur le contenu). Même écart que
   les bulles principales ; pas de marge sous le sous-menu ouvert. */
#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
    border: 0;
    border-inline-end: var(--pf-rule-width, 1px) solid color-mix(in srgb, currentColor 25%, transparent);
}

#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav .nav__content .nav__list .item-has-children.submenu-open {
    padding-bottom: 0;
}

#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav .nav__content .nav__list .item-has-children > .sub-menu a {
    display: inline-block;
}

/* Bulle toujours pleine : le trait des thèmes « Souligné » / « Texte seul » ferait doublon avec elle. */

/* Mobile : bouton plein, jamais translucide sur le contenu (un fond de menu flottant en verre, à 70 %, laissait voir
   la page à travers). Le fond du thème est posé sur celui de la page : même teinte, opaque. */
@media (max-width: 1100px) {
    #portfolio_page header[data-nav-active="radial"] {
        --pf-bubble-base: var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, #fafafa));
    }

}
}

/* 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="radial"] #hamburgerBtn {
    position: fixed;
    transform: none;
    border: var(--pf-float-edge, 1px solid transparent);
    color: var(--portfolios-nav-text-color, currentColor);
}

#portfolio_page header[data-nav-active="radial"] #hamburgerBtn:active {
    transform: scale(0.94);
}

#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content {
    padding: 0.5rem;
}

#portfolio_page header[data-nav-active="radial"] #header-nav.nav--underline .nav__content .nav__list > li > a::after {
    content: none;
}

#portfolio_page header[data-nav-active="radial"] #header-nav.nav--underline .nav__content .nav__list > li > a::after {
    content: none;
}

#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
    align-items: flex-end;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0 0.9rem 0 0;
}

#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav.nav--underline .nav__content .nav__list .item-has-children > .sub-menu a::after {
    content: none;
}

@media (max-width: 1100px) {
    #portfolio_page header[data-nav-active="radial"] #hamburgerBtn {
        background:
            linear-gradient(var(--pf-float-bg, var(--pf-nav-panel-bg)), var(--pf-float-bg, var(--pf-nav-panel-bg))),
            var(--pf-bubble-base);
    }
}
}