/* @layer-wrap:site.dispositions */
@layer site.dispositions {
/* Version: 16-10-2026 — options du header (plan-header-footer.md, lot E1)
 * Header : réglages qui ne changent ni la forme ni le menu. Sorti de l'ancien chrome.css, règles inchangées.
 *   - Bouton du menu : icon · text · icon-text · dots ; mobile [data-nav-button], ordinateur [data-nav-button-desktop].
 *   - Réglages fins (lot E3), posés par portfolios_header_option_attrs() seulement s'ils s'écartent du thème :
 *       data-header-hide-{desktop|mobile}   éléments masqués, liste de mots (lue par ~=) : logo contact ;
 *       data-header-rule-{desktop|mobile}   none | rule | shadow → --pf-header-rule (theme-advanced-colors.css) ;
 *       data-header-gap-desktop             tight | wide → --pf-header-logo-gap (header-line.css, header-tower.css) ;
 *       data-header-contact="button"        lien Contact en bouton, en dernier (habillage : buttons.css).
 * Chargé après header-layouts.css. Porte l'id theme-basic-stylesheet : ancre des feuilles de thème insérées par
 * l'éditeur (matrix-editor.js).
 */

/* ==========================================================================
   6 ter. Bouton du menu — icon · text · icon-text · dots ; mobile [data-nav-button], ordinateur [data-nav-button-desktop]
   Un seul design quel que soit l'en-tête (Barre, Compacte, Minimale…) ou le thème ;
   seule la position change (ex. bouton rond en bas pour « Bouton rond »).
   ========================================================================== */

/* Icône et texte de la même couleur que le bouton (main.css colore span / svg à part). */
#portfolio_page header #hamburgerBtn :is(.hamburger__box, .hamburger__svg, .hamburger__svg *) {
    color: inherit;
}

@media (max-width: 1100px) {
#portfolio_page header[data-nav-button="text"] #hamburgerBtn::after,
    #portfolio_page header[data-nav-button="icon-text"] #hamburgerBtn::after {
        content: "Menu";
        font-size: 0.85rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        line-height: 1;
        text-transform: uppercase;
    }

#portfolio_page header[data-nav-button="text"] #hamburgerBtn.active::after,
    #portfolio_page header[data-nav-button="icon-text"] #hamburgerBtn.active::after {
        content: "Fermer";
    }

#portfolio_page header[data-nav-button="text"] #hamburgerBtn .hamburger__box,
    #portfolio_page header[data-nav-button="dots"] #hamburgerBtn:not(.active) .hamburger__box {
        display: none;
    }

#portfolio_page header[data-nav-button="icon-text"] #hamburgerBtn {
        gap: 0.45rem;
    }

/* Points : trois points dessinés (pas de police ni d'icône supplémentaire) ; croix à l'ouverture. */
#portfolio_page header[data-nav-button="dots"] #hamburgerBtn:not(.active)::after {
        content: "";
        display: block;
        width: 1.6rem;
        height: 0.5rem;
        background: radial-gradient(circle, currentColor 0 0.17rem, transparent 0.19rem) 0 50% / 33.333% 100% repeat-x;
    }
}

/* Points : trois points dessinés (pas de police ni d'icône supplémentaire) ; croix à l'ouverture. */

@media (min-width: 1101px) {
#portfolio_page header[data-nav-button-desktop="text"] #hamburgerBtn::after,
    #portfolio_page header[data-nav-button-desktop="icon-text"] #hamburgerBtn::after {
        content: "Menu";
        font-size: 0.85rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        line-height: 1;
        text-transform: uppercase;
    }

#portfolio_page header[data-nav-button-desktop="text"] #hamburgerBtn.active::after,
    #portfolio_page header[data-nav-button-desktop="icon-text"] #hamburgerBtn.active::after {
        content: "Fermer";
    }

#portfolio_page header[data-nav-button-desktop="text"] #hamburgerBtn .hamburger__box,
    #portfolio_page header[data-nav-button-desktop="dots"] #hamburgerBtn:not(.active) .hamburger__box {
        display: none;
    }

#portfolio_page header[data-nav-button-desktop="icon-text"] #hamburgerBtn {
        gap: 0.45rem;
    }

/* Points : trois points dessinés (pas de police ni d'icône supplémentaire) ; croix à l'ouverture. */
#portfolio_page header[data-nav-button-desktop="dots"] #hamburgerBtn:not(.active)::after {
        content: "";
        display: block;
        width: 1.6rem;
        height: 0.5rem;
        background: radial-gradient(circle, currentColor 0 0.17rem, transparent 0.19rem) 0 50% / 33.333% 100% repeat-x;
    }
}

/* Points : trois points dessinés (pas de police ni d'icône supplémentaire) ; croix à l'ouverture. */

/* ==========================================================================
   Réglages fins du header (lot E3)
   ========================================================================== */

/* Ombre au défilement : douce, sous la barre, dès que la page a défilé (header.js : .is-scrolled). */
#portfolio_page header {
    --pf-header-scroll-shadow: 0 10px 24px -14px color-mix(in srgb, var(--pf-ink, #000) 45%, transparent);
}

/* Lien Contact en bouton : toujours le dernier lien du menu. */
#portfolio_page header[data-header-contact="button"] #header-nav .nav__list > li:has(> .nav__contact) {
    order: 999;
}

@media (min-width: 1101px) {
    #portfolio_page header[data-header-hide-desktop~="logo"] #hub-logo {
        display: none;
    }

    #portfolio_page header[data-header-hide-desktop~="contact"] #header-nav .nav__list > li:has(> .nav__contact) {
        display: none;
    }

    #portfolio_page header[data-header-rule-desktop="none"] {
        --pf-header-rule: 0 none;
    }

    #portfolio_page header[data-header-rule-desktop="rule"] {
        --pf-header-rule: var(--pf-theme-header-rule, var(--pf-rule-width, 1px) solid var(--pf-rule-color, currentColor));
    }

    #portfolio_page header[data-header-rule-desktop="shadow"] {
        --pf-header-rule: 0 none;
        transition: box-shadow 0.25s ease;
    }

    #portfolio_page header[data-header-rule-desktop="shadow"].is-scrolled {
        box-shadow: var(--pf-header-scroll-shadow);
    }

    #portfolio_page header[data-header-gap-desktop="tight"] {
        --pf-header-logo-gap: 0.4rem;
    }

    #portfolio_page header[data-header-gap-desktop="wide"] {
        --pf-header-logo-gap: 2.5rem;
    }

    /* Barre « liens visibles » alignée à gauche ou à droite : le bouton Contact se cale au bout de la rangée
       (centré : il reste le dernier lien, la rangée garde son centre). */
    #portfolio_page header[data-header-contact="button"]:is(.nav-left, .nav-right):where(:not([data-nav-menu], [data-header-rail])) #header-nav .nav__list > li:has(> .nav__contact) {
        margin-inline-start: auto;
    }
}

@media (max-width: 1100px) {
    #portfolio_page header[data-header-hide-mobile~="logo"] #hub-logo {
        visibility: hidden;
    }

    #portfolio_page header[data-header-hide-mobile~="contact"] #header-nav .nav__list > li:has(> .nav__contact) {
        display: none;
    }

    #portfolio_page header[data-header-rule-mobile="none"] {
        --pf-header-rule: 0 none;
    }

    #portfolio_page header[data-header-rule-mobile="rule"] {
        --pf-header-rule: var(--pf-theme-header-rule, var(--pf-rule-width, 1px) solid var(--pf-rule-color, currentColor));
    }

    #portfolio_page header[data-header-rule-mobile="shadow"] {
        --pf-header-rule: 0 none;
        transition: box-shadow 0.25s ease;
    }

    #portfolio_page header[data-header-rule-mobile="shadow"].is-scrolled {
        box-shadow: var(--pf-header-scroll-shadow);
    }
}
}