/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 14-10-2026 — fond et flou partagés (docs/llm/plans/plan-header-footer.md § 4, lot F3) */
/*
 * Fond et flou du header et du pied de page : réglages de l'outil Header lus ICI SEULEMENT.
 *   --portfolios-nav-bg-color / --portfolios-nav-bg-blur : toujours posées (défauts compris) ;
 *   --portfolios-nav-bg-color-custom / --portfolios-nav-bg-blur-custom : seulement si l'utilisateur a choisi
 *   (shared/core/design/css_vars_primary.php).
 *
 * Traduits une fois en variables partagées, lues par le socle, les formes / dispositions et les thèmes :
 *   --pf-chrome-bg / --pf-chrome-blur   barre pleine largeur : teinte header::before / footer::before,
 *                                       flou .header-glass / .footer-glass (frères du contenu).
 *                                       --pf-chrome-bg est une valeur de `background` : couleur ou dégradé.
 *   --pf-island-bg / --pf-island-blur   pilule, panneau ou tuiles : « En bulle », « En carte », Verre, Bento.
 *                                       Mêmes valeurs que la barre ; un thème à pilule les redéfinit une fois
 *                                       (themes/<slug>/tokens.css).
 *
 * Couches, jamais doublées :
 *   - cas général : la barre (teinte + flou) ;
 *   - thèmes à pilule (data-island="own" sur #header et #footer) : pas de barre, la pilule / les tuiles portent
 *     --pf-island-* ; la forme « Pleine largeur » rallume la barre (chrome.css) ;
 *   - formes sans fond (Transparente) : ni barre ni pilule (chrome.css).
 * Le flou n'est jamais posé sur un ancêtre du menu en position fixe (il deviendrait son repère) :
 * barre → .header-glass, pilule → .header-inner::after.
 * Ne jamais définir position sur le header ici : fixed = header-line / header-tower.css.
 */

/* ==========================================================================
   1. Variables
   ========================================================================== */

#portfolio_page header,
#portfolio_page footer {
    --pf-chrome-bg: var(--portfolios-nav-bg-color, rgba(255, 255, 255, 0.15));
    --pf-chrome-blur: var(--portfolios-nav-bg-blur, blur(6px));
    --pf-island-bg: var(--portfolios-nav-bg-color, rgba(255, 255, 255, 0.15));
    --pf-island-blur: var(--portfolios-nav-bg-blur, blur(6px));
}

/* ==========================================================================
   2. Barre pleine largeur
   Coquille sans fond ni flou ; teinte sur ::before, flou sur .header-glass / .footer-glass.
   ========================================================================== */

#portfolio_page header,
#portfolio_page footer,
#portfolio_page #header {
    background-color: transparent;
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#portfolio_page footer {
    position: relative;
}

#portfolio_page header::before,
#portfolio_page footer::before,
#portfolio_page #header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--pf-chrome-bg);
    pointer-events: none;
}

#portfolio_page header .header-glass,
#portfolio_page #header .header-glass,
#portfolio_page footer .footer-glass {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    -webkit-backdrop-filter: var(--pf-chrome-blur);
    backdrop-filter: var(--pf-chrome-blur);
    pointer-events: none;
}

/* Thèmes à pilule : pas de barre, ordinateur et mobile (la pilule, le panneau ou les tuiles portent le fond). */
#portfolio_page header[data-island="own"]::before,
#portfolio_page header[data-island="own"] .header-glass,
#portfolio_page footer[data-island="own"]::before,
#portfolio_page footer[data-island="own"] .footer-glass {
    display: none;
}

/* Contenu au-dessus de la barre. Pas de z-index sur .header-inner (piège le panneau fixe en mobile). */
#portfolio_page header .header-inner,
#portfolio_page #header .header-inner {
    position: relative;
    z-index: auto;
}

#portfolio_page footer #footer-main,
#portfolio_page #footer #footer-main {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   3. Sous-menu ordinateur (repli sans thème ; les menus et leurs panneaux passent aux variables en E2)
   ========================================================================== */

#portfolio_page header .sub-menu .sub-menu-content {
    position: relative;
    z-index: 1;
    background-color: var(--portfolios-nav-bg-color, rgba(255, 255, 255, 0.15));
    -webkit-backdrop-filter: var(--portfolios-nav-bg-blur, blur(6px));
    backdrop-filter: var(--portfolios-nav-bg-blur, blur(6px));
}

#portfolio_page header .sub-menu .sub-menu-content::before {
    content: none;
    display: none;
}
}