/* @layer-wrap:site.zones */ @layer site.zones { /* Version: 14-10-2026-underline-pad */ /* * Liens header / footer. * Couleurs : 4 réglages, chacun avec un seul rôle (panneau « Liens : apparence ») : * repos → --portfolios-nav-link-text-custom / --portfolios-nav-link-bg-custom * survol/actif → --portfolios-nav-link-active-text-custom / --portfolios-nav-link-active-bg-custom * Contour : repos → --portfolios-nav-button-border-color, survol/actif → --portfolios-nav-link-active-border-custom * (vide : celui du repos). Posées par css_vars_primary.php seulement si choisies. Sinon, valeurs du thème d'ensemble : * une matrice ne fixe que ses défauts --pf-nav-link-* (jamais de couleur en dur sur les liens). * Souligné / Texte seul : pas de fond ; le trait prend la couleur du texte survol/actif. * * Contrat avec les zones (header, pied de page — docs/llm/plans/plan-header-footer.md § 5) : l'apparence d'un lien * vit ici (et dans themes//links.css). Une zone ne restyle pas un lien : elle règle seulement les variables * d'emplacement que ces feuilles lisent — --pf-nav-link-pad-y / --pf-nav-link-pad-x (marge intérieure). * * Contrat avec les thèmes (couches CSS : le thème passe après ces feuilles, mais leurs !important l'emportent) : * un thème ne réécrit pas ces propriétés, il pose les variables d'accroche que les règles lisent, sur le menu * (#header-nav, #footer) ou sur le lien à l'état survolé / actif : * --pf-nav-link-pad marge intérieure dans tous les styles (sinon : selon le style, 0 en souligné) * --pf-nav-sublink-pad idem pour les sous-pages soulignées du menu déroulant et de la colonne (links-menus.css) * --pf-nav-link-pad-inline écart latéral en style texte / souligné derrière le bouton Menu et en colonne * --pf-nav-link-border-width / -style / -color, --pf-nav-link-shadow contour et ombre (sinon ceux des réglages) * --pf-nav-link-font-size / --pf-nav-link-line-height taille du texte d'un lien * --pf-nav-bubble-bg fond d'une bulle du menu « Flottant » (links-menus.css) * Liens des menus du header (sous-menus, colonne, panneaux, bulles) : themes/basic/links-menus.css (lot E2) ; * liens des menus derrière le bouton Menu et du header en ligne : section ci-dessous. */ /* --- Liens du header en ligne (ex-header-line.css, chargé avant links.css : en tête pour garder l'ordre) --- */ @media (min-width: 1101px) { #portfolio_page header:where(.line) #header-nav.nav--bg .nav__content .nav__list a { padding-top: 4px; padding-bottom: 4px; } } /* --- Liens des menus derrière le bouton Menu (ex-header-mobile.css, même raison) --- */ #portfolio_page header:where([data-nav-menu]) #header-nav:not(.nav--bg) .nav__content .nav__list a, #portfolio_page header:where([data-nav-menu]) #header-nav:not(.nav--bg) .nav__content .sub-menu a {/* --pf-nav-link-pad-inline : écart latéral d'un thème en style texte / souligné (Terminal). */ } #portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .nav__list > li > a, #portfolio_page header:where([data-nav-menu]) #header-nav a.nav__item-main { padding-block: calc((var(--portfolios-nav-line-height, 1.4em) - 1em) * 0.5 + 0.45rem); } #portfolio_page header:where([data-nav-menu]) #header-nav.nav--bg .nav__content .nav__list > li > a, #portfolio_page header:where([data-nav-menu]) #header-nav.nav--bg a.nav__item-main, #portfolio_page header:where([data-nav-menu]) #header-nav.nav--bg .nav__content .sub-menu a {/* Taille des liens du thème d'abord (--pf-nav-link-pad-*, themes//links.css : Verre, Bento, Brutal). */ border-radius: var(--portfolios-nav-links-radius); } #portfolio_page header:where([data-nav-menu]) #header-nav .sub-menu ul li a { padding-block: 0.5rem; } #portfolio_page :is(.nav, .nav-links) { --pf-link-text: var(--portfolios-nav-link-text-custom, var(--pf-nav-link-text, var(--portfolios-nav-links-color))); --pf-link-bg: var(--portfolios-nav-link-bg-custom, var(--pf-nav-link-bg, transparent)); --pf-link-active-text: var(--portfolios-nav-link-active-text-custom, var(--pf-nav-link-active-text, var(--pf-link-text))); --pf-link-active-bg: var(--portfolios-nav-link-active-bg-custom, var(--pf-nav-link-active-bg, color-mix(in srgb, var(--pf-link-active-text) 12%, transparent))); } /* Plein : la pastille du survol est visible au repos, sauf réglage du repos. */ #portfolio_page .nav.nav--theme-solid { --pf-link-text: var(--portfolios-nav-link-text-custom, var(--pf-nav-link-text, var(--pf-link-active-text))); --pf-link-bg: var(--portfolios-nav-link-bg-custom, var(--pf-nav-link-bg, var(--pf-link-active-bg))); --pf-link-active-text: var(--portfolios-nav-link-active-text-custom, var(--pf-nav-link-active-text, var(--portfolios-nav-links-color))); } #portfolio_page .nav .nav__list a, #portfolio_page .nav__list-item a, #portfolio_page .nav-links a { color: var(--pf-link-text); text-decoration: none; padding: var(--portfolios-nav-links-padding-vert) var(--portfolios-nav-links-padding-horiz); display: inline-block; position: relative; overflow: visible; text-overflow: clip; transition: transform var(--portfolios-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), filter var(--portfolios-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), color var(--portfolios-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), background-color var(--portfolios-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), border-color var(--portfolios-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), box-shadow var(--portfolios-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), opacity var(--portfolios-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)); } #portfolio_page .nav-links a { font-weight: 500; } /* Survol et page active : mêmes couleurs dans tous les styles */ #portfolio_page :is(.nav .nav__list, .nav .sub-menu, .nav-links) a:is(:hover, :focus-visible, .active-nav, .footer-heading) { opacity: 1; } /* Enfants (icônes, spans, chevron) : couleur du lien */ #portfolio_page :is(.nav .nav__list, .nav .sub-menu, .nav-links) a *, #portfolio_page .submenu-toggle, #portfolio_page .submenu-toggle-icon { color: inherit; } /* ---------- Fond (Plein, Contour, Fond au survol) ---------- */ #portfolio_page :is(.nav.nav--bg .nav__list, .nav.nav--bg .sub-menu, .nav-links--bg .nav-links) a { background: var(--pf-link-bg); box-sizing: border-box; } #portfolio_page :is(.nav.nav--bg .nav__list, .nav.nav--bg .sub-menu, .nav-links--bg .nav-links) a:is(:hover, :focus-visible, .active-nav, .footer-heading) { background: var(--pf-link-active-bg); } /* Contour des liens : appliqué dans tous les états. Style « Ombre » → box-shadow, bordure à none. Contour propre d'un thème (Brutal) : --pf-nav-link-border-width / -style / -color et --pf-nav-link-shadow (themes//links.css, posées aussi à l'état survolé / actif). */ /* Survol et page active : couleur du contour de cet état (sinon celle du repos), ombre « Ombre » recolorée. */ /* Contour : cadre visible au repos (1px minimum), couleur du contour sinon du fond actif */ #portfolio_page .nav.nav--bg.nav--theme-outline :is(.nav__list, .sub-menu) a { border: max(var(--portfolios-nav-button-border-width, 0px), 1px) solid var(--portfolios-nav-button-border-color-custom, var(--pf-link-active-text)); box-shadow: var(--portfolios-nav-button-box-shadow, none); } #portfolio_page .nav.nav--bg.nav--theme-outline :is(.nav__list, .sub-menu) a:is(:hover, :focus-visible, .active-nav, .footer-heading) { border-color: var(--portfolios-nav-link-active-border-custom, var(--portfolios-nav-button-border-color-custom, var(--pf-link-active-text))); box-shadow: var(--portfolios-nav-button-box-shadow-active, var(--portfolios-nav-button-box-shadow, none)); } /* ---------- Souligné / Texte seul ---------- */ /* Le lien s'arrête au texte : aucun padding latéral (le trait irait plus loin que le mot). Les motifs de menu qui écartent leurs liens (sous-menu déroulant, colonne : themes/basic/menu-desktop.css, menu-rail.css) le font en marge. Dessous : la place du trait, qui grandit vers le bas avec « Épaisseur » au lieu de mordre sur le texte. */ #portfolio_page .nav.nav--underline .nav__list > .nav__list-item > a, #portfolio_page .nav.nav--underline .sub-menu a, #portfolio_page .nav-links--underline .nav-links a {/* --pf-nav-link-pad : un thème à pilules (Verre, Bento, Brutal) garde sa taille de lien dans ce style aussi. */ } /* Texte seul : pas de trait, place d'origine. */ #portfolio_page :is(.nav.nav--underline .nav__list, .nav.nav--underline .sub-menu, .nav-links--underline .nav-links) a { background: none; } #portfolio_page :is(.nav.nav--underline .nav__list, .nav.nav--underline .sub-menu, .nav-links--underline .nav-links) a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--portfolios-nav-underline-width, 2px); background: var(--pf-link-active-text); transform-origin: left center; transform: scaleX(0); transition: transform var(--portfolios-nav-links-transition), background var(--portfolios-nav-links-transition); border-radius: var(--portfolios-border-radius-xs); } #portfolio_page :is(.nav.nav--underline .nav__list, .nav.nav--underline .sub-menu, .nav-links--underline .nav-links) a:is(:hover, :focus-visible, .active-nav, .footer-heading)::after { transform: scaleX(1); } /* Texte seul : comme Souligné, sans le trait */ #portfolio_page .nav.nav--theme-text :is(.nav__list, .sub-menu) a::after { display: none; } /* ---------- Sous-menu, effets, accessibilité ---------- */ #portfolio_page .nav .sub-menu ul { gap: var(--portfolios-header-nav-gap-y, 0.4rem) var(--portfolios-header-nav-gap-x, 1.25rem); } /* Effets de survol / clic (variables posées par css_vars_primary.php) */ #portfolio_page .nav-links a:focus-visible, #portfolio_page .nav .nav__list a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(11,132,255,0.12); } /* Chevron : trait en currentColor (pas de fill — le path est un stroke) */ #portfolio_page .submenu-toggle-icon svg, #portfolio_page .submenu-toggle-icon svg path, #portfolio_page .submenu-toggle-icon svg circle, #portfolio_page .submenu-toggle-icon svg rect, #portfolio_page .submenu-toggle-icon svg polygon, #portfolio_page .submenu-toggle-icon svg line, #portfolio_page .submenu-toggle-icon svg polyline { color: inherit; transition: stroke var(--portfolios-nav-links-transition), color var(--portfolios-nav-links-transition); } #portfolio_page .submenu-toggle-icon img { display: inline-block; max-width: 1em; height: 1em; vertical-align: middle; } /* Petits écrans : liens plus adaptés au tactile */ @media (max-width: 640px) { #portfolio_page .nav-links a { padding: 12px 14px; } #portfolio_page .nav-links--underline .nav-links a::after { bottom: 10px; left: 14px; right: 14px; } } @media (max-width: 1100px) { } /* Liens de vignettes, tuiles, infos profil : pas de couleur imposée. Fil d'Ariane : design/navigation/breadcrumbs.css ; liens de contenu : structure/layout/content.css */ #portfolio_page .vertical-grid-item a, #portfolio_page .horizontal-grid-item a, #portfolio_page .square-grid-item a, #portfolio_page .thumbnail-tile, #portfolio_page .thumbnail-tile a, #portfolio_page .profil-infos a, #portfolio_page .profil-infos a *, #profil-modal-root .profil-infos a, #profil-modal-root .profil-infos a * { color: inherit; text-decoration: none; } /* Boutons thème : ne pas forcer color:inherit ici (spécificité #portfolio_page gagnait sur buttons.css et annulait --portfolios-button-text-color / hover). */ #portfolio_page .folio_button, #portfolio_page .folio-button { text-decoration-line: var(--portfolios-button-th-deco, none); /* thème Souligné (buttons.css) */ } #portfolio_page .folio_button *, #portfolio_page .folio-button * { color: inherit; text-decoration: none; } } /* 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:where([data-nav-menu]) #header-nav:not(.nav--bg) .nav__content .nav__list a, #portfolio_page header:where([data-nav-menu]) #header-nav:not(.nav--bg) .nav__content .sub-menu a { padding-inline: var(--pf-nav-link-pad-inline, 0); } #portfolio_page header:where([data-nav-menu]) #header-nav.nav--bg .nav__content .nav__list > li > a, #portfolio_page header:where([data-nav-menu]) #header-nav.nav--bg a.nav__item-main, #portfolio_page header:where([data-nav-menu]) #header-nav.nav--bg .nav__content .sub-menu a { padding: var(--pf-nav-link-pad-y, var(--portfolios-nav-links-padding-vert, 8px)) var(--pf-nav-link-pad-x, var(--portfolios-nav-links-padding-horiz, 12px)); } #portfolio_page header:where([data-nav-menu]) #header-nav.nav--bg .nav__list a:not(.footer-title):not(:hover):not(.active-nav) .submenu-toggle, #portfolio_page header:where([data-nav-menu]) #header-nav.nav--bg .nav__list a:not(.footer-title):not(:hover):not(.active-nav) .submenu-toggle-icon, #portfolio_page header:where([data-nav-menu]) #header-nav.nav--bg .nav__list a:not(.footer-title):not(:hover):not(.active-nav) .submenu-toggle-icon svg, #portfolio_page header:where([data-nav-menu]) #header-nav.nav--bg .nav__list a:not(.footer-title):not(:hover):not(.active-nav) .submenu-toggle-icon svg path { color: inherit; } #portfolio_page .nav .nav__list a, #portfolio_page .nav__list-item a, #portfolio_page .nav-links a { border-radius: var(--portfolios-nav-links-radius); white-space: nowrap; } #portfolio_page .nav .nav__list a, #portfolio_page .nav .sub-menu a { font-size: var(--pf-nav-link-font-size, var(--portfolios-nav-font-size)); line-height: var(--pf-nav-link-line-height, var(--portfolios-nav-line-height)); } #portfolio_page :is(.nav .nav__list, .nav .sub-menu, .nav-links) a:is(:hover, :focus-visible, .active-nav, .footer-heading) { color: var(--pf-link-active-text); } #portfolio_page .nav.nav--bg .sub-menu a { padding: var(--pf-nav-link-pad, var(--portfolios-nav-links-padding-vert) var(--portfolios-nav-links-padding-horiz)); } #portfolio_page :is(.nav.nav--bg .nav__list, .nav.nav--bg .sub-menu, .nav-links--bg .nav-links) a::after { display: none; content: none; } #portfolio_page :is(.nav.nav--bg:not(.nav--theme-outline) .nav__list a, .nav.nav--bg:not(.nav--theme-outline) .sub-menu a, .nav-links--bg .nav-links a) { border-width: var(--pf-nav-link-border-width, var(--portfolios-nav-button-border-width, 0px)); border-style: var(--pf-nav-link-border-style, var(--portfolios-nav-button-border-style, none)); border-color: var(--pf-nav-link-border-color, var(--portfolios-nav-button-border-color, transparent)); box-shadow: var(--pf-nav-link-shadow, var(--portfolios-nav-button-box-shadow, none)); } #portfolio_page :is(.nav.nav--bg:not(.nav--theme-outline) .nav__list a, .nav.nav--bg:not(.nav--theme-outline) .sub-menu a, .nav-links--bg .nav-links a):is(:hover, :focus-visible, .active-nav, .footer-heading) { border-color: var(--pf-nav-link-border-color, var(--portfolios-nav-link-active-border-custom, var(--portfolios-nav-button-border-color, transparent))); box-shadow: var(--pf-nav-link-shadow, var(--portfolios-nav-button-box-shadow-active, var(--portfolios-nav-button-box-shadow, none))); } #portfolio_page .nav.nav--underline .nav__list > .nav__list-item > a, #portfolio_page .nav.nav--underline .sub-menu a, #portfolio_page .nav-links--underline .nav-links a { padding: var(--pf-nav-link-pad, 0 0 var(--portfolios-nav-underline-width, 2px)); } #portfolio_page .nav.nav--underline .nav__list > .nav__list-item > a > * { padding: 0 0 2px; } #portfolio_page .nav.nav--theme-text :is(.nav__list > .nav__list-item > a, .sub-menu a) { padding-bottom: 2px; } #portfolio_page :is(.nav.nav--underline .nav__list, .nav.nav--underline .sub-menu, .nav-links--underline .nav-links) a { border-width: var(--pf-nav-link-border-width, 0); border-style: var(--pf-nav-link-border-style, none); border-color: var(--pf-nav-link-border-color, currentColor); box-shadow: var(--pf-nav-link-shadow, none); } #portfolio_page .nav-links a:hover, #portfolio_page .nav .nav__list a:hover { transform: var(--portfolios-nav-hover-transform, none); filter: var(--portfolios-nav-hover-filter, none); } #portfolio_page .nav-links a:active, #portfolio_page .nav .nav__list a:active, #portfolio_page .nav .nav__list a:focus { transform: var(--portfolios-nav-click-transform, none); } #portfolio_page .submenu-toggle-icon svg, #portfolio_page .submenu-toggle-icon svg path, #portfolio_page .submenu-toggle-icon svg circle, #portfolio_page .submenu-toggle-icon svg rect, #portfolio_page .submenu-toggle-icon svg polygon, #portfolio_page .submenu-toggle-icon svg line, #portfolio_page .submenu-toggle-icon svg polyline { fill: none; stroke: currentColor; } @media (max-width: 1100px) { #portfolio_page .nav .nav__list a, #portfolio_page .nav__list-item a, #portfolio_page .nav-links a { white-space: normal; } } }