/* @layer-wrap:site.dispositions */
@layer site.dispositions {
/* Version: 16-10-2026 — formes du header (plan-header-footer.md, lot E1)
 * Header : formes de la barre, choisies par l'utilisateur ou « Celle du thème ». Sorti de l'ancien chrome.css,
 * règles inchangées.
 *   - Ordinateur [data-header-desktop] : Pleine largeur (bar), En bulle (island), Transparente (transparent).
 *   - Mobile [data-header-mobile] : Flottante (floating), Transparente (transparent) ; transitions de la barre.
 *   - Fond et flou (variables --pf-chrome-* / --pf-island-*) : nav-background.css.
 * Chargé après les menus (menu-desktop / -rail / -panels / -radial.css).
 */

@media (min-width: 1101px) {
/* Barre : pleine largeur, teinte sur toute la ligne. Verre / Bento : la barre rallumée (nav-background.css
       l'éteint pour data-island="own") et leur îlot sans fond ni flou (une seule couche). */
#portfolio_page #header[data-header-desktop="bar"] {
        --pf-island-bg: transparent;
        --pf-island-blur: none;
    }

#portfolio_page #header[data-header-desktop="bar"]::before,
    #portfolio_page #header[data-header-desktop="bar"] .header-glass {
        display: block;
        border-radius: 0;
    }

#portfolio_page #header[data-header-desktop="bar"] .header-inner {
        width: 100%;
        max-width: var(--layout-width-wide);
        margin-inline: auto;
        padding-inline: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

/* En bulle : îlot arrondi détaché des bords, fond et flou du générateur (comme l'îlot de Bento / Verre,
       qui gardent le leur : pour eux « En bulle » = « Celle du thème »). Écart fixe autour, espacement réglé dedans.
       Contour et ombre = ceux des menus flottants du thème (--pf-float-edge / --pf-float-shadow, matrices/<slug>.css) :
       Brutal = contour fort + ombre décalée, Folio / Éditorial = filet, Console = pointillés… */
/* Formes d'en-tête (Pleine largeur, En bulle, Transparente) : ciblées par #header pour passer devant le filet
   de theme-advanced-colors.css et l'îlot / le fondu des thèmes (Verre, Bento, Cinéma), comme le faisait la garde
   d'aperçu retirée (:root:not(:has(#theme-visualiser…))). [data-matrix] sur Transparente : Cinéma est chargé après. */
#portfolio_page #header[data-header-desktop="island"]:not([data-island="own"]) {
        --pf-header-pad-outer: var(--pf-island-gap);
        border: 0;
        background: transparent;
    }

#portfolio_page header[data-header-desktop="island"]:not([data-island="own"])::before,
    #portfolio_page header[data-header-desktop="island"]:not([data-island="own"]) .header-glass {
        display: none;
    }

#portfolio_page header[data-header-desktop="island"]:not([data-island="own"]) .header-inner {
        position: relative;
        box-sizing: border-box;
        width: calc(100% - 2rem);
        max-width: var(--layout-width-wide);
        margin-inline: auto;
        padding: var(--pf-island-pad-y) 0.75rem var(--pf-island-pad-y) 1.25rem;
        border: var(--pf-float-edge, 0 solid transparent);
        border-radius: max(var(--pf-radius, 0px), 1rem);
        background: var(--pf-island-bg);
        box-shadow: var(--pf-float-shadow, var(--pf-panel-shadow));
    }

/* Flou sur un pseudo-élément : un backdrop-filter sur .header-inner enfermerait les menus fixes (cf. glass.css). */
#portfolio_page header[data-header-desktop="island"]:not([data-island="own"]) .header-inner::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        -webkit-backdrop-filter: var(--pf-island-blur);
        backdrop-filter: var(--pf-island-blur);
        pointer-events: none;
    }

/* Transparente : jamais de fond ni de flou (seul cas où la couleur et le flou du générateur
       ne s'appliquent pas ; l'éditeur les verrouille). Îlots des thèmes (Verre, Bento) et fondu (Cinéma) compris. */
#portfolio_page #header[data-header-desktop="transparent"] {
        --pf-chrome-bg: transparent;
        --pf-chrome-blur: none;
        --pf-island-bg: transparent;
        --pf-island-blur: none;
    }

#portfolio_page #header[data-header-desktop="transparent"][data-matrix] .header-inner {
        border-color: transparent;
        box-shadow: none;
    }
}

@media (max-width: 1100px) {
#portfolio_page header[data-header-mobile] {
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), top 0.35s ease, background-color 0.25s ease;
    }

/* Flottante : carte arrondie détachée des bords. */
#portfolio_page header[data-header-mobile="floating"] {
        top: 0.6rem;
        left: 0.6rem;
        right: 0.6rem;
        width: auto;
        border-radius: var(--pf-radius);
        /* --pf-header-floating-shadow : ombre propre au thème (Verre : aucune, la pilule fait déjà carte). */
        box-shadow: var(--pf-header-floating-shadow, var(--pf-panel-shadow));
    }

/* Contour et ombre des menus flottants du thème, comme l'en-tête « En bulle » sur ordinateur
       (Verre et Bento habillent leur propre pilule : glass.css / bento.css). */
#portfolio_page header[data-header-mobile="floating"]:not([data-island="own"]) {
        border: var(--pf-float-edge, 0 solid transparent);
        box-shadow: var(--pf-float-shadow, var(--pf-panel-shadow));
    }

#portfolio_page header[data-header-mobile="floating"]::before,
    #portfolio_page header[data-header-mobile="floating"] .header-glass {
        border-radius: var(--pf-radius);
    }

/* Transparente : sans fond en haut de page, fond dès qu'on défile. Barre en fondu (opacité, transition) ;
       pilule des thèmes (Verre, Bento) : fond et flou coupés, la pilule anime sa propre transition. */
#portfolio_page #header[data-header-mobile="transparent"]:not(.is-scrolled):not(.mobile-nav-open) {
        --pf-island-bg: transparent;
        --pf-island-blur: none;
    }

#portfolio_page header[data-header-mobile="transparent"]:not(.is-scrolled):not(.mobile-nav-open)::before,
    #portfolio_page header[data-header-mobile="transparent"]:not(.is-scrolled):not(.mobile-nav-open) .header-glass {
        opacity: 0;
    }

#portfolio_page header[data-header-mobile="transparent"]::before,
    #portfolio_page header[data-header-mobile="transparent"] .header-glass {
        transition: opacity 0.25s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
#portfolio_page header[data-header-mobile] {
        transition: none;
    }
}
}