/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 16-10-2026 — menu « Sur le côté » (plan-header-footer.md, lot E2) */
/*
 * Menu ordinateur « Sur le côté » (data-header-rail) : en-tête en colonne fixe à gauche, imposé par Galerie ;
 * sous-pages en accordéon dans la colonne. Sous 1100 px : barre du haut classique.
 * 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).
 */

/* --- Sur le côté : en-tête en colonne fixe à gauche (data-header-rail) -------------
   Choix de menu ordinateur « rail », imposé par Galerie. header.js : pas de décalage vertical du contenu.
   Sous 1100px : barre du haut classique. */
@media (min-width: 1101px) {
    /* Ordinateur seulement : sous 1100 px, l'en-tête garde la forme mobile choisie (header-layouts.css). */
    #portfolio_page header[data-header-rail] {
        bottom: 0;
        height: 100vh;/* Colonne étroite : marge latérale réduite (pf-pad-x-md = 20px pour la barre du haut). */
        
        overflow-y: auto;
        border-right: var(--pf-rule-width) solid var(--pf-rule-color);
    }
}

/* « Espacement vertical de l'en-tête » + marge de base (header/main.css lit --pf-header-pad-outer).
   #header : passe devant l'écart fixe des thèmes en îlot (Bento, Verre), qui n'a pas de sens dans la colonne. */
#portfolio_page #header[data-header-rail] {
    --pf-header-pad-outer: calc(var(--portfolios-header-padding-y, 15px) + 1.5rem);
}

#portfolio_page header[data-header-rail] .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    /* Toute la hauteur de la colonne, quoi qu'il arrive : le menu défile dedans (#header-nav ci-dessous). */
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
}

/* En-tête « en ligne » (line.css) : rangée centrée et menu borné ; dans la colonne, tout part du haut
   et le menu prend toute la largeur. */

/* Thèmes qui dessinent leur îlot (Verre, Bento : data-island="own") : dans la colonne, l'îlot en prend
   toute la largeur avec des marges égales, au lieu de sa largeur de pilule décentrée (liens à la ligne).
   #header : passe devant les règles d'îlot des thèmes (themes/<slug>/chrome.css). Ordinateur seulement :
   en barre mobile, l'îlot mobile du thème reprend la main. */

/* Menu plus haut que la colonne : il défile seul, le logo reste en haut. Mêmes règles pour tous les thèmes
   (îlot de Verre / Bento compris : les liens ne sortent plus du cadre). Marge de 0.4rem rendue par une marge
   négative (côtés et haut ; pas en bas, le menu dépasserait du cadre) : ombres et contours des liens (Brutal…)
   ne sont pas rognés par le défilement. */
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav {
    box-sizing: border-box;
    width: calc(100% + 0.8rem);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Pas de décalage à gauche dans la colonne (marges des en-têtes en ligne / tour). */

#portfolio_page header[data-header-rail] .header-bar {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    /* Écart sous le logo : thème (Éditorial) ou réglage « Espace entre le logo et le menu », sinon aucun. */
    margin: 0 0 var(--pf-header-logo-gap, 0);
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .nav__content .nav__list {
    flex-direction: column;
    align-items: flex-start;
    /* Liens espacés : les thèmes à contour / ombre décalée (Brutal) ont besoin d'air entre deux liens. */
    gap: 0.75rem;
}

/* La colonne suit le réglage « Alignement » du header : liens et logo (ligne .header-bar) du même côté. */
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])):is(.nav-center, .nav-right) :is(.header-inner, #header-nav .nav__content .nav__list) {
    align-items: var(--pf-align-justify);
    text-align: var(--pf-align-text);
}


/* Page à sous-pages : le <li> prend la largeur de son sous-menu (même replié) ; le lien [libellé + chevron]
   reste à sa taille et suit l'alignement, sinon il part à gauche avec un vide après le chevron. */
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .nav__list > .item-has-children {
    align-items: stretch;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > a.nav__item-main {
    align-self: flex-start;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])):is(.nav-center, .nav-right) #header-nav .item-has-children > a.nav__item-main {
    align-self: var(--pf-align-justify);
}

/* Sous-menus : dépliés sous leur lien, dans la colonne (au survol, au focus ou au clic).
   header/main.css les place en bande fixe sous l'en-tête, calée sur sa hauteur (0 pour la colonne). */
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu {
    width: auto;
    background: none;
    box-shadow: none;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu .sub-menu-content {/* themes/basic/nav-background.css floute le fond des sous-menus flottants : dans la colonne, rectangle sombre. */
    
}

/* Rien ne dépasse de la colonne : liens et sous-pages passent à la ligne. */
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .nav__list > li,
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu {
    box-sizing: border-box;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav :is(.nav__list > li > a, .item-has-children > .sub-menu a) {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Liens principaux : marge latérale réduite, la colonne est étroite. */
/* Apparence des liens : voir la feuille de liens (lot E2). */

/* Souligné / Texte seul : le lien s'arrête au texte (le trait aussi), l'écart passe en marge. */
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav.nav--underline .nav__list > li > a {
    margin-inline: var(--pf-nav-link-pad-x, 0.6rem);
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu ul {
    flex-direction: column;
    align-items: inherit;
    /* Même rythme que les liens principaux : sous-pages espacées entre elles et du lien parent. */
    gap: 0.6rem;
    max-width: none;
    font-size: 0.85em;
}

/* Espacement régulier : ni marge ni padding hérités des sous-menus flottants. */

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu a {
    display: block;
    line-height: 1.25;
}

/* Souligné / Texte seul : le lien s'arrête au texte (le trait aussi), l'écart passe en marge ;
   le dessous garde au moins la place du trait. Centré / à droite : la marge auto suit l'alignement. */
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav.nav--underline .item-has-children > .sub-menu a {
    width: fit-content;
}



/* Le contenu se décale de la largeur de la colonne. */
#portfolio_page:has(header[data-header-rail]) > :not(header, script, style, #welcome-to, #welcome-to-blur) {
    margin-left: var(--pf-matrix-rail, 15rem);
}

/* Colonne en bulle (thèmes à îlot : Verre, Bento) : les fonds du hero et des sections passent sous la bulle,
   jusqu'au bord gauche de l'écran ; le contenu reste à sa place (largeur de la colonne + gouttière en padding).
   Article de blog : <main> porte lui-même le fond. Pied de page non concerné : c'est déjà un panneau flottant.
   #header dans :has() : passe devant le hero et la section vedette (#portfolio_page #hero.hero-layout,
   width 100 % et margin-inline 0, design/home/section-layout.css) et devant la marge de colonne ci-dessus. */
@media (min-width: 1101px) {
#portfolio_page:has(#header[data-header-rail][data-island="own"]) > main:not(.section-bg) > section {
        box-sizing: border-box;
        width: calc(100% + var(--pf-matrix-rail, 15rem));
        max-width: none;
        margin-left: calc(-1 * var(--pf-matrix-rail, 15rem));
    }

#portfolio_page:has(#header[data-header-rail][data-island="own"]) > main.section-bg {
        margin-left: 0;
    }
}

@media (max-width: 1100px) {
#portfolio_page header[data-header-rail] {
        overflow: hidden;
    }

#portfolio_page header[data-header-rail] .header-inner {
        height: auto;
    }

/* Barre du haut sur mobile : l'espacement suit directement le réglage. */
#portfolio_page #header[data-header-rail] {
        --pf-header-pad-outer: initial;
    }

#portfolio_page:has(header[data-header-rail]) > :not(header, script, style, #welcome-to, #welcome-to-blur) {
        margin-left: 0;
    }
}

@media (min-width: 1101px) {
#portfolio_page header[data-header-rail] #header-nav.nav .item-has-children > .sub-menu {
        grid-template-rows: 0fr;
    }

#portfolio_page header[data-header-rail] #header-nav.nav .item-has-children > .sub-menu > .sub-menu-content {
        min-height: 0;
        overflow: hidden;
    }

#portfolio_page header[data-header-rail] #header-nav.nav .item-has-children:is(:hover, :focus-within, .submenu-hover-intent, .submenu-open) > .sub-menu {
        grid-template-rows: 1fr;
    }
}
}

/* 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-header-rail] {
        right: auto;
        width: var(--pf-matrix-rail, 15rem);
        padding-inline: 0.75rem;
    }
}

#portfolio_page header[data-header-rail] .header-inner {
    display: flex;
}

#portfolio_page header[data-header-rail] .header-inner {
    justify-content: flex-start;
}

#portfolio_page #header[data-header-rail][data-island="own"]:where(:not([data-nav-menu])) .header-inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0.75rem;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav {
    flex: 1 1 auto;
    max-width: none;
    margin: -0.4rem -0.4rem 0;
    padding: 0.4rem;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) :is(#header-nav .nav__content, #header-nav .nav__list) {
    margin-left: 0;
    padding-left: 0;
}

#portfolio_page header[data-header-rail]:is(.nav-center, .nav-right) .header-bar {
    justify-content: var(--pf-align-justify);
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu {
    position: static;
    top: auto;
    padding-top: 0;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu .sub-menu-content {
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .nav__list > li,
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu {
    min-width: 0;
    max-width: 100%;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav :is(.nav__list > li > a, .item-has-children > .sub-menu a) {
    white-space: normal;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu ul {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0.75rem 0 0.25rem;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu li {
    margin: 0;
    padding: 0;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu a {
    margin: 0;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav.nav--underline .item-has-children > .sub-menu a {
    margin: 0 var(--pf-nav-link-pad-x, 0.4rem);
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])).nav-center #header-nav.nav--underline .item-has-children > .sub-menu a {
    margin-inline: auto;
}

#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])).nav-right #header-nav.nav--underline .item-has-children > .sub-menu a {
    margin-inline-start: auto;
}

@media (min-width: 1101px) {
    #portfolio_page:has(#header[data-header-rail][data-island="own"]) > main:not(.section-bg) > section {
        padding-left: calc(var(--pf-matrix-rail, 15rem) + var(--layout-gutter));
    }
}

@media (min-width: 1101px) {
    #portfolio_page:has(#header[data-header-rail][data-island="own"]) > main.section-bg {
        padding-left: calc(var(--pf-matrix-rail, 15rem) + var(--layout-gutter));
    }
}

@media (max-width: 1100px) {
    #portfolio_page header[data-header-rail] .header-inner {
        display: block;
    }
}

@media (min-width: 1101px) {
    #portfolio_page header[data-header-rail] #header-nav.nav .item-has-children > .sub-menu {
        display: grid;
        max-height: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: grid-template-rows calc(0.32s * var(--pf-submenu-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1), opacity calc(0.25s * var(--pf-submenu-speed, 1)) ease, visibility 0s linear calc(0.32s * var(--pf-submenu-speed, 1));
    }
}

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